# SDraggableList

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

### SDraggableGroup

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — |  |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onMove` | `(event: SDraggableGroupMoveEvent) => void` |  |

### SDraggableList

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | `T[]` | — | 현재 순서대로 렌더링할 아이템 목록 |
| `getKey` | `(item: T, index: number) => string` | — | 아이템을 식별할 안정적인 key |
| `renderItem` | `(item: T, index: number, state: SDraggableListRenderState) => ReactNode` | — | 아이템 렌더링 함수 |
| `selectedKey?` | `string` | — | 외부에서 제어하는 selected 아이템 key |
| `defaultSelectedKey?` | `string` | — | 초기 selected 아이템 key |
| `getDisabled?` | `(item: T, index: number) => boolean` | — | disabled 아이템은 선택 및 드래그에서 제외 |
| `listId?` | `string` | — | Provider 안에서 사용할 리스트 식별자 |
| `group?` | `string` | — | 같은 group 값을 가진 리스트끼리 드래그 이벤트를 공유 |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onChange` | `(items: T[]) => void` | 단독 리스트에서 드래그가 끝난 뒤 변경된 순서 |
| `onSelectedKeyChange` | `(key: string) => void` | selected 아이템이 변경될 때 호출 |

### SDraggableProvider

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — |  |

## Dependencies

### Depends on

- [SList](../SList)

### Graph

```mermaid
graph TD;
  SDraggableList --> SList
  style SDraggableList fill:#f9f,stroke:#333,stroke-width:4px
```