03 · Components · 피드백
드로어Drawer
화면 가장자리에서 슬라이드 인으로 나타나는 패널. 본문과 동시에 보이지 않고 모달에 가까우며 좌·우·하단 세 방향을 지원합니다.
StableWCAG AA
우측 드로어
tsx
<Drawer open={open} onClose={...} side="right" title="필터">
...
</Drawer>미리보기
하단 드로어 (바텀시트)
모바일에서 선택지·세부 정보를 노출할 때 자연스럽습니다. 최대 높이는 80vh로 제한됩니다.
tsx
<Drawer open={open} onClose={...} side="bottom" title="세부 정보">
...
</Drawer>미리보기
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | 열림 상태. | |
onClose | () => void | ESC · 배경 클릭 · 닫기 버튼 호출 콜백. | |
side | "left" | "right" | "bottom" | "right" | 슬라이드 방향. |
title | string | 상단 헤더 제목. |