컴포넌트
Drawer
화면 가장자리(좌·우·하단)에서 슬라이드 인 하는 접근성 드로어 패널. 백드롭 페이드, ESC·백드롭·닫기 버튼으로 닫기, 포커스 트랩(Tab 순환), 스크롤 잠금, prefers-reduced-motion 대응을 표준 웹 기법만으로 자작.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Drawer-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| open | boolean | — | 드로어 표시 여부 (필수). |
| onClose | () => void | — | 닫기 요청 콜백 (ESC·백드롭·닫기 버튼) (필수). |
| side | "left" | "right" | "bottom" | "right" | 슬라이드 인 방향. |
| title | string | undefined | 드로어 제목 (aria-labelledby 연결). |
| children | ReactNode | undefined | 본문 콘텐츠. |
| closeOnBackdrop | boolean | true | 백드롭 클릭 시 닫힘 여부. |
| closeOnEsc | boolean | true | ESC 키로 닫힘 여부. |
| width | number | 320 | 좌·우 방향일 때 패널 너비(px). |
| height | number | 260 | bottom 방향일 때 패널 높이(px). |