WIZ Design System

한눈에#

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

필터상태·기간·담당자로 결과를 좁힙니다.

가장자리 슬라이드 패널
right·left·bottom
포커스 트랩·Escape 닫기
Modal과 동일 계약

열린 상태 재현 — 우측에서 보조 작업 패널이 슬라이드 인(실제 동작은 아래에서)

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

사용 시점#

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

권장 — 이렇게 쓰세요

지양 — 이러지 마세요

쓴다 — 필터·설정·상세 편집처럼 본문 맥락 유지하며 고정 가장자리(좌·우·하단)에서 여는 보조 패널

Modal

대신 Modal — 흐름을 중단시키는 중앙 결정 다이얼로그

SideSheet

대신 SideSheet — compact↔expanded 자동 적응 표면이 필요할 때

BottomSheet

대신 BottomSheet — 모바일에서 하단으로 올라오는 표면

플레이그라운드#

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

Drawer를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

변형#

side — right(기본) · left · bottom 3방향 슬라이드

side="bottom"은 데스크톱/태블릿 레이아웃에서 쓰는 Drawer 변형입니다. 모바일·터치 환경에서 하단에서 올라오는 선택/편집 표면이 필요하면 drag handle·detent·safe-area·borderless 내부 규칙을 가진 BottomSheet 또는 적응형 SideSheet를 사용합니다.

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

closeOnBackdrop=false — 배경 클릭 무시

크기#

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

상태#

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

Props#

Prop	타입	기본값	설명
`open`	`boolean`	—	표시 여부 — 제어 prop
`onClose`	`() => void`	—	Escape·배경·닫기 버튼의 닫힘 요청 콜백
`title`	`ReactNode`	—	다이얼로그 제목 — aria-labelledby 대상이라 필수
`side`	`'right' \| 'left' \| 'bottom'`	`right`	슬라이드 인 방향 (기본 right)
`footer`	`ReactNode`	—	하단 행동 영역
`closeOnBackdrop`	`boolean`	`true`	배경(오버레이) 클릭으로 닫기 허용 (기본 true)
`closeLabel`	`string`	`닫기`	닫기 버튼 aria-label
`className`	`string`	—	추가 CSS 클래스 — 루트 요소에 병합됩니다.
`ref`	`Ref<HTMLDivElement>`	—	패널(role=dialog)로 병합 전달되는 ref — 닫힘(미마운트) 동안 null (React 19 ref-as-prop). 내부 panelRef(포커스 트랩·진입 포커스용)와 useMergedRefs로 합성한다.

접근성#

계약	구현
역할	`role="dialog"` + `aria-modal="true"`
이름	`title`이 `aria-labelledby`로 연결
포커스 진입	열리면 패널로 이동
포커스 트랩	Tab/Shift+Tab이 내부에서 순환
포커스 복원	닫히면 이전 포커스 요소로 복귀
키보드 닫기	Escape — 포커스 위치 무관(document 캡처)
배경 닫기	오버레이 mousedown 기준 — 패널에서 시작한 드래그는 무시
스크롤	열림 동안 배경 `body` 스크롤 잠금
모션	슬라이드 인은 `prefers-reduced-motion` 존중

토큰#

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

속성	토큰
오버레이	`color.overlay` · `z.modal`
패널 배경	`color.surface-raised`
라운드/그림자	`radius.xl`(진입 모서리) · `shadow.xl`
제목	`font.size-h3` · `font.weight-semibold`
닫기 버튼	hover `color.surface-hover` · pressed `color.surface-pressed`
슬라이드 모션	`duration.fast/normal` · 패널 `ease.emphasized-decelerate` · 스크림 `ease.out`