# SDrawer

> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.

### SDrawer

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open?` | `boolean` | — | 표시 여부 |
| `persistent?` | `boolean` | `true` | backdrop·ESC로 닫히지 않고 흔들림 효과를 준다. **기본값 true** — Drawer는 내용을 작성·구성하는 곳이라 임의 닫힘을 막는 것이 기본이다. 닫기 경로는 X 버튼과 footer 버튼뿐이다. false로 주면 backdrop·ESC 닫기가 열린다. |
| `title?` | `string` | `''` | 접근성 제목 및 헤더 제목 |
| `width?` | `number \| string` | `572` | Drawer 너비. 기본값은 Figma drawer 기준 572px이다. 창이 이보다 좁으면 창 폭까지만 넓어진다 — 드로어가 화면 밖으로 나가지 않는다. `resizable` 로 조절한 폭은 이 값이 바뀔 때 되돌아간다 — 앱이 폭을 저장해 두었다가 다시 열 때 넘겨주면 그 폭으로 열린다. |
| `resizable?` | `boolean` | `false` | 왼쪽 테두리를 끌어 너비를 조절할 수 있게 한다. 조절선은 패널 왼쪽 경계 전체이며 평소엔 보이지 않다가 hover·포커스·조절 중에만 드러난다(SSplitter·SGnb 와 같은 선). 포커스를 받아 방향키(Shift 는 크게)·Home·End 로도 조절된다. |
| `minWidth?` | `number \| string` | — | 리사이즈 가능한 최소 너비(px, %, vw, vh). % 는 viewport 기준이며, 창 폭보다 클 수 없다 |
| `maxWidth?` | `number \| string` | — | 리사이즈 가능한 최대 너비(px, %, vw, vh). % 는 viewport 기준이며, 주지 않으면 창 폭이 상한이다 |
| `footerLeft?` | `ReactNode` | — | footer 좌측 슬롯 |
| `button?` | `SDrawerButton` | — | 우측 기본 액션 버튼 |
| `children?` | `ReactNode` | — |  |
| `className?` | `string` | — |  |
| `style?` | `CSSProperties` | — |  |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onOpenChange` | `(open: boolean) => void` | 표시 상태 변경 |
| `onClose` | `() => void` | 닫기(X) 버튼 클릭 |
| `onWidthChange` | `(width: number) => void` | 너비가 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 |

## Dependencies

### Depends on

- [SFooter](../SFooter)
- [SOverlayHeader](../SOverlayHeader)

### Graph

```mermaid
graph TD;
  SDrawer --> SFooter
  SDrawer --> SOverlayHeader
  style SDrawer fill:#f9f,stroke:#333,stroke-width:4px
```