reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/Drawer

Drawer

Component

사이드/하단 슬라이드 패널. Dialog 기반 compound 패턴으로 접근성을 보장합니다.

overlay
Related docs
bun add @reopt-ai/opt-ui
100%

기본 사용

DrawerRoot

PropTypeDefaultDescription
openboolean—제어 모드 열림 상태
onClose() => void—닫힘 콜백

DrawerPanel

PropTypeDefaultDescription
side"left" | "right" | "bottom""right"슬라이드 방향
size"sm" | "md" | "lg" | "full""md"패널 크기
swipeToDismissbooleantrue가장자리 방향으로 드래그해 닫기 활성화
swipeDismissThresholdnumber80닫힘 커밋에 필요한 드래그 거리(px)
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • open=true일 때 드로어 패널이 렌더링된다
  • side prop에 따라 방향이 결정된다
  • 임계값을 넘겨 스와이프하면 드로어가 닫힌다
  • 임계값 미만 스와이프는 닫지 않는다
  • swipeToDismiss=false면 스와이프해도 닫히지 않는다

키보드 동작

키동작
Esc드로어 닫기
Tab드로어 내부 포커스 이동

Related components

Disclosure

접기/펼치기 콘텐츠 영역. 3-part anatomy: Root, Trigger, Content.

Overlay

Dialog

모달 다이얼로그. 9-part anatomy: Root, Disclosure, Panel, Heading, Description, Dismiss, Header, Body, Footer.

Overlay

Popover

Popover 프리미티브 래퍼. 트리거 요소에 연결된 플로팅 콘텐츠를 표시합니다.

Overlay

Menu

메뉴바 + 개별 메뉴 시스템. 10 exports: MenubarRoot, MenubarContainer, MenuRoot, MenuTrigger, MenuButtonArrow, MenuPopover, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuSeparator.

NavOverlay

DropdownMenu

Menu Core 위의 간편 래퍼. 단일 트리거 드롭다운 메뉴에 특화되었습니다.

NavOverlay

FieldToken

필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다.

PreviousLogoNextPagination

기본 사용

기본 열림 상태

opt-ui는 접근성 프리미티브 기반 UI 컴포넌트 라이브러리입니다. 키보드 탐색과 스크린 리더 지원을 기본 제공합니다.

기본 구조 — Header / Body / Footer

DialogDisclosure — 비제어 모드

DialogDisclosure를 사용하면 open/setOpen 상태 관리 없이 다이얼로그를 열고 닫을 수 있습니다.

사이즈 변형 — xs ~ full

접근성 — aria-labelledby / aria-describedby 자동 연결

DialogHeading은 자동으로 aria-labelledby를, DialogDescription은 aria-describedby를 다이얼로그에 연결합니다. 수동 ID 관리가 필요 없습니다.

스크롤 가능한 본문 — DialogBody overflow

다이얼로그 닫기 패턴

다이얼로그를 닫는 여러 방법을 확인할 수 있습니다. ESC, 배경 클릭, 또는 Button의 onClick으로 setOpen(false)을 호출합니다.

중첩 다이얼로그 — 다이얼로그 안에 다이얼로그

커스텀 레이아웃 — Header/Body/Footer 선택적 사용

Header, Body, Footer는 모두 선택적입니다. 필요한 부분만 사용할 수 있습니다.

기본 사용

기본 사용

단일 메뉴

기본 사용

아이콘 + 섹션

정렬 옵션

스키마 컬럼 목록

  • event_nameVARCHAR
  • user_iduuid
  • occurred_atTIMESTAMP WITH TIME ZONE
  • revenueDECIMAL(12,2)
  • is_internalboolean
  • propertiesJSONB
  • referrerurl
  • client_ipinet
  • tagstext[]

전체 타입

StringNumberBooleanDateDate and timeDurationPercentCurrencyEnumArrayObjectJSONIP addressGeo pointURLEmailIdentifierBinaryAggregateNestedUnknown

크기와 채우기

결제 금액