Drawer

화면 가장자리에서 슬라이드되어 나타나는 헤드리스 드로어 컴포넌트. 포커스 트랩, ESC 키 처리, 중첩 드로어를 위한 자동 z-index 스태킹을 포함합니다. Trigger, Content, Closer 하위 컴포넌트로 구성합니다.

데모

right

Drawer 패널

이 드로어는 포커스 트랩, ESC 키 처리, 중첩 드로어를 위한 z-index 스태킹을 포함합니다.

닫기

left

Drawer 패널

이 드로어는 포커스 트랩, ESC 키 처리, 중첩 드로어를 위한 z-index 스태킹을 포함합니다.

닫기

top

Drawer 패널

이 드로어는 포커스 트랩, ESC 키 처리, 중첩 드로어를 위한 z-index 스태킹을 포함합니다.

닫기

bottom

Drawer 패널

이 드로어는 포커스 트랩, ESC 키 처리, 중첩 드로어를 위한 z-index 스태킹을 포함합니다.

닫기

Show Code

API 레퍼런스

Drawer

Prop	Type	Default	Description
placement	"top" | "right" | "bottom" | "left"	"right"	드로어가 슬라이드되어 나올 화면 가장자리
contentId	string	-	콘텐츠 요소의 커스텀 id. 생략 시 자동 생성. Trigger의 aria-controls가 참조
onOpen	() => void	-	드로어가 열릴 때 호출
onClose	() => void	-	드로어가 닫힐 때 호출
children	ReactNode	-	Drawer 하위 컴포넌트 (Trigger, Content, Closer)

Drawer.Trigger

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

Drawer.Content

Prop	Type	Default	Description
ref	RefObject<HTMLDivElement | null>	-	콘텐츠 래퍼 요소의 ref
...props	ComponentPropsWithoutRef<"div">	-	모든 네이티브 div 요소 속성. role="dialog" 및 aria-modal="true"와 함께 포탈로 렌더링

Drawer.Closer

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