Drawer
core사이드/하단 슬라이드 패널. Dialog 기반 compound 패턴으로 접근성을 보장합니다.
100%
기본 사용
테스트 커버리지
2026년 2월 4일생성된 테스트 결과를 찾지 못했습니다.
Drawer 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
DrawerRoot Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
open | boolean | — | 제어 모드 열림 상태 |
onClose | () => void | — | 닫힘 콜백 |
DrawerPanel Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
side | "left" | "right" | "bottom" | "right" | 슬라이드 방향 |
size | "sm" | "md" | "lg" | "full" | "md" | 패널 크기 |
swipeToDismiss | boolean | true | 가장자리 방향으로 드래그해 닫기 활성화 |
swipeDismissThreshold | number | 80 | 닫힘 커밋에 필요한 드래그 거리(px) |
Import
tsx
import {
DrawerRoot,
DrawerPanel,
DrawerClose,
} from "@reopt-ai/opt-ui";키보드 동작
| 키 | 동작 |
|---|---|
| Esc | 드로어 닫기 |
| Tab | 드로어 내부 포커스 이동 |