Drawer

화면 가장자리에서 슬라이드되어 나타나는 헤드리스 드로어 컴포넌트. 네이티브 <dialog>의 top layer를 사용해 포커스 트랩, ESC 키 처리, 중첩 드로어 스태킹을 제공합니다. Trigger, Content, Closer 하위 컴포넌트로 구성합니다.

데모

right

Drawer 패널

이 드로어는 네이티브 <dialog> top layer 기반으로 포커스 트랩, ESC 키 처리, 중첩 스태킹을 제공합니다.

닫기

left

Drawer 패널

이 드로어는 네이티브 <dialog> top layer 기반으로 포커스 트랩, ESC 키 처리, 중첩 스태킹을 제공합니다.

닫기

top

Drawer 패널

이 드로어는 네이티브 <dialog> top layer 기반으로 포커스 트랩, ESC 키 처리, 중첩 스태킹을 제공합니다.

닫기

bottom

Drawer 패널

이 드로어는 네이티브 <dialog> top layer 기반으로 포커스 트랩, ESC 키 처리, 중첩 스태킹을 제공합니다.

닫기

Show Code

API 레퍼런스

Drawer

Prop	Type	Default	Description
placement	"top" | "right" | "bottom" | "left"	"right"	드로어가 슬라이드되어 나올 화면 가장자리
id	string	-	콘텐츠 요소의 커스텀 id. 생략 시 자동 생성
closeOutside	boolean	false	콘텐츠 영역 외부(백드롭) 클릭 시 드로어 닫기
keepMounted	boolean	true	드로어가 닫힌 상태에서도 DOM에 콘텐츠 유지
animation	DrawerAnimation | false	auto slide	슬라이드 애니메이션 설정 (Web Animations API). 기본값은 placement에 따른 슬라이드이며, false로 비활성화할 수 있습니다. prefers-reduced-motion을 따릅니다.
onOpen	() => void	-	드로어가 열릴 때 호출
onClose	() => void	-	드로어가 닫힐 때 호출
children	ReactNode	-	Drawer 하위 컴포넌트 (Trigger, Content, Closer)

Drawer.Trigger

Prop	Type	Default	Description
children	ReactElement | ((props: { open: () => void }) => ReactNode)	-	클릭 가능한 요소 또는 open 핸들러를 받는 렌더 함수

Drawer.Content

Prop	Type	Default	Description
...props	Omit<ComponentPropsWithoutRef<"dialog">, "onClose" | "onClick">	-	네이티브 dialog 요소 속성 (onClose/onClick 제외). showModal로 top layer에 렌더링되어 포커스 트랩 적용

Drawer.Closer

Prop	Type	Default	Description
children	ReactElement | ((props: { close: () => void }) => ReactNode)	-	클릭 가능한 요소 또는 close 핸들러를 받는 렌더 함수