Drawer

@hua-labs/hua

v1.1.0

화면 가장자리에서 슬라이드되어 나타나는 사이드 패널 컴포넌트입니다. 네비게이션 메뉴, 폼, 상세 보기에 적합합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Drawer, DrawerHeader, DrawerContent, DrawerFooter } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 사용법

헤더, 콘텐츠, 푸터가 있는 오른쪽 Drawer

방향

Drawer는 화면의 어느 방향에서든 나타날 수 있습니다

크기

다양한 용도에 맞는 크기 옵션

Props

이름	타입	기본값	설명
`isOpen`	`boolean`	-	Drawer open/close state (recommended)
`open`	`boolean`	-	Drawer 열림/닫힘 상태
`onClose`	`() => void`	-	Close callback (recommended)
`onOpenChange`	`(open: boolean) => void`	-	State change callback (deprecated, use onClose)
`closable`	`boolean`	`true`	Show close button
`backdropClassName`	`string`	-	추가 CSS 클래스
`side`	`"left" \| "right" \| "top" \| "bottom"`	`"right"`	Drawer가 나타나는 방향
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"md"`	Drawer 크기
`showBackdrop`	`boolean`	`true`	Show backdrop overlay
`closeOnBackdropClick`	`boolean`	`true`	Close drawer when backdrop is clicked
`closeOnEscape`	`boolean`	`true`	Close drawer when ESC key is pressed

코드 예시

docs:common.basicUsagetsx

// Via framework (recommended)
import { Drawer, DrawerHeader, DrawerContent } from '@hua-labs/ui';
import { DrawerFooter } from '@hua-labs/ui/overlay';
import { Button } from '@hua-labs/ui';
// Or direct import
// import { Drawer, DrawerHeader, DrawerContent, DrawerFooter } from '@hua-labs/ui/overlay';

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open Drawer</Button>

<Drawer open={open} onOpenChange={setOpen}>
  <DrawerHeader onClose={() => setOpen(false)}>
    <h2 className="text-xl font-bold">Drawer Title</h2>
  </DrawerHeader>
  <DrawerContent>
    <p>Drawer content goes here...</p>
  </DrawerContent>
  <DrawerFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={() => setOpen(false)}>Confirm</Button>
  </DrawerFooter>
</Drawer>

docs:components.drawer.demo.sideOptionstsx

// Left side
<Drawer open={open} onOpenChange={setOpen} side="left">
  ...
</Drawer>

// Top side
<Drawer open={open} onOpenChange={setOpen} side="top">
  ...
</Drawer>

// Bottom side (mobile-friendly)
<Drawer open={open} onOpenChange={setOpen} side="bottom">
  ...
</Drawer>

docs:components.drawer.demo.sizeOptionstsx

<Drawer open={open} onOpenChange={setOpen} size="sm">...</Drawer>
<Drawer open={open} onOpenChange={setOpen} size="md">...</Drawer>
<Drawer open={open} onOpenChange={setOpen} size="lg">...</Drawer>
<Drawer open={open} onOpenChange={setOpen} size="xl">...</Drawer>
<Drawer open={open} onOpenChange={setOpen} size="full">...</Drawer>

접근성

•키보드 네비게이션: ESC 키로 Drawer를 닫을 수 있습니다 (설정 가능)
•포커스 관리: Drawer가 열리면 포커스가 내부에 갇힙니다
•스크롤 잠금: Drawer가 열리면 body 스크롤이 잠깁니다

Dropdown BottomSheet