# Component/Drawer

드로어는 화면 우측에서 슬라이드되어 페이지 위에 표시되는 패널입니다.
사용자가 현재 페이지를 떠나지 않고 상호작용할 수 있으므로 동일한 컨텍스트 안에서 효율적으로 작업을 수행할 수 있습니다.

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `className` | `string | undefined` | No |  |  |
| `direction` | `undefined "left" "right"` | No | right |  |
| `zIndex` | `number | undefined` | No | getZIndex('drawer') |  |
| `width` | `CSSValueWithLength | undefined` | No | 280 |  |
| `opened` | `boolean | undefined` | No |  |  |
| `canClickOutside` | `boolean | undefined` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
| `canCloseEscapeKey` | `boolean | undefined` | No | true | escapeKey 키이벤트 닫힘 사용 여부 |
| `noUsePortal` | `boolean | undefined` | No | false | main app node 바깥영역으로 생성할지 여부 |
| `lockScroll` | `boolean | undefined` | No | true | 오버레이가 렌더링되는 동안 스크롤 금지 여부 |
| `animationOnClose` | `boolean | undefined` | No | true | Drawer 닫힐 때 애니메이션 사용 여부 |
| `onClose` | `(() => void) | undefined` | No |  |  |