# SDraggableItem

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

### SDraggableItem

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `SDraggableItemSlot` | — | 드래그 아이템 제목 |
| `supportingText?` | `SDraggableItemSlot` | — | 제목을 보조하는 텍스트 |
| `supportingTextPosition?` | `SDraggableItemSupportingTextPosition` | `'right'` | 보조 텍스트 위치 |
| `trailing?` | `SDraggableItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
| `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
| `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
| `selected?` | `boolean` | `false` | 선택 상태 여부 |
| `dragging?` | `boolean` | `false` | 드래그 중인 스타일을 고정해서 표시할지 여부 |
| `dense?` | `boolean` | `false` | 조밀한 높이 사용 여부 |
| `size?` | `SDraggableItemSize` | `'sm'` | 타이포그래피·세로 패딩 크기 |
| `disabled?` | `boolean` | `false` | 비활성 상태 여부 |
| `dragOverlay?` | `boolean` | `true` | 드래그 시 마우스를 따라가는 overlay 표시 여부 |
| `dragOverlayOpacity?` | `number` | `0.75` | 드래그 overlay 투명도 |
| `dragHandleProps?` | `HTMLAttributes<HTMLDivElement>` | — | 드래그 핸들에 전달할 속성 |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onDragHandleMouseDown` | `(event: MouseEvent<HTMLDivElement>) => void` | 드래그 핸들 mouse down 이벤트 |

## Dependencies

### Depends on

- [SIcon](../SIcon)

### Graph

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