ScrollArea - OLUN. Design System

viewport: children은 Radix ScrollArea viewport 안에 렌더링됩니다.
ScrollBar: 기본 ScrollArea는 vertical ScrollBar를 포함하며, ScrollBar export는 고급 조합을 위해 제공됩니다.
rounded inherit: viewport는 부모 radius를 상속해 패널 모서리와 맞습니다.

긴 목록

fixed height viewport

김지수제출 완료
이민준진행 중
박서연검토 필요
최도윤제출 완료
한서아미응시
오민재제출 완료

코드 보기tsx

import { Badge, ScrollArea } from "@olundot/ui";

export function StudentScrollArea() {
  return (
    <ScrollArea style={{ height: 220 }}>
      <ul>
        {students.map((student) => (
          <li key={student.name}>
            {student.name}
            <Badge tone={student.tone}>{student.status}</Badge>
          </li>
        ))}
      </ul>
    </ScrollArea>
  );
}

패널 본문

rounded inherit

완료문항 12번 해설 수정

검토채점 기준 문구 보강

대기응시자 재시도 요청 검토

활성공개 전 최종 확인

보관감독관 메모 연결

코드 보기tsx

import { ScrollArea, StatusBadge } from "@olundot/ui";

export function NotesPanel() {
  return (
    <ScrollArea className="h-[240px] rounded-[var(--radius-md)] border border-[var(--border-subtle)]">
      <article>
        {notes.map((note) => (
          <p key={note.title}>
            <StatusBadge status={note.status}>{note.label}</StatusBadge>
            {note.title}
          </p>
        ))}
      </article>
    </ScrollArea>
  );
}