Drawer

한눈에#

화면 가장자리에서 슬라이드 인하는 오버레이 패널(Modal 변형)입니다 — 본문 맥락을 유지한 채 측면에서 보조 작업 패널을 엽니다.

트리거를 눌러 슬라이드 인·포커스 트랩·Escape를 직접 확인하세요:

사용 시점#

본문 맥락을 유지한 채 고정 가장자리에서 측면 보조 패널을 열면 Drawer — 중앙 결정·적응 표면·하단 표면은 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { Drawer, Button } from '@wds/ui-web';

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="필터"
>
  상태·담당자·기간으로 필터링합니다.
</Drawer>

변형#

배경 클릭 닫기는 기본 동작이며, 명시적 선택이 필요한 흐름은 closeOnBackdrop={false}로 끕니다(Escape와 닫기 버튼은 항상 동작).

크기#

좌우 패널 폭은 min(25rem, 100dvw - space.12) 단일 — 좁은 화면에서 자동 축소됩니다. bottom은 가로 전체 폭에 최대 높이 100dvh - space.16.

상태#

제어 컴포넌트입니다 — 열림/닫힘은 소비자의 open prop이 결정하고, 닫힘 요청(Escape·배경·닫기 버튼)은 전부 onClose 콜백으로 전달됩니다. 열림/닫힘 계약은 Modal과 동일합니다.

Props#

접근성#

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족 — Modal과 동일 결정).