# STree

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

### STreeItem

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `node` | `STreeNode` | — | 렌더링할 노드 |
| `depth?` | `number` | `1` | 중첩 단계 |
| `isLast?` | `boolean` | `true` | 마지막 자식 여부 |
| `ancestorLast?` | `boolean[]` | `[]` | 상위 depth 별 마지막 자식 여부 |
| `expanded?` | `boolean` | `false` | 펼침 상태 |
| `selected?` | `boolean` | `false` | 선택 상태 |
| `guideline?` | `boolean` | `true` | depth 연결선 표시 여부 |
| `border?` | `boolean` | `true` | 아이템 하단 border 표시 여부 |
| `indeterminate?` | `boolean` | `false` | 일부 선택 상태 |
| `selectable?` | `boolean` | `true` | 체크박스 표시 여부 |
| `leading?` | `ReactNode \| ((state: STreeItemRenderState) => ReactNode)` | — | 사용자 지정 leading 콘텐츠 |
| `trailing?` | `ReactNode \| ((state: STreeItemRenderState) => ReactNode)` | — | 사용자 지정 trailing 콘텐츠 |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onToggle` | `(node: STreeNode, event?: MouseEvent<HTMLElement>) => void` | 아이템 확장/축소 토글 |
| `onTreeSelect` | `(node: STreeNode, event?: MouseEvent<HTMLElement>) => void` | 선택 토글 |

### STree

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | `STreeNode[]` | — | 트리 노드 목록 |
| `value?` | `string[]` | — | 선택된 노드 ID 목록 |
| `defaultValue?` | `string[]` | — | 비제어 선택 초기값 |
| `expandedIds?` | `string[]` | — | 펼쳐진 노드 ID 목록 |
| `defaultExpandedIds?` | `string[]` | — | 비제어 펼침 초기값 |
| `selectable?` | `boolean` | `true` | 체크박스 표시 여부 |
| `guideline?` | `boolean` | `true` | depth 연결선 표시 여부 |
| `border?` | `boolean` | `true` | 아이템 하단 border 표시 여부 |
| `cascadeSelection?` | `boolean` | `true` | 부모 선택 시 하위 노드까지 함께 토글 |
| `leading?` | `ReactNode \| ((state: STreeItemRenderState) => ReactNode)` | — | 사용자 지정 leading 콘텐츠 |
| `trailing?` | `ReactNode \| ((state: STreeItemRenderState) => ReactNode)` | — | 사용자 지정 trailing 콘텐츠 |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onValueChange` | `(value: string[], node: STreeNode) => void` | 선택 변경 |
| `onExpandedChange` | `(expandedIds: string[], node: STreeNode) => void` | 펼침 변경 |

## Dependencies

### Depends on

- [SCheckbox](../SCheckbox)
- [SGhostButton](../SGhostButton)

### Graph

```mermaid
graph TD;
  STree --> SCheckbox
  STree --> SGhostButton
  style STree fill:#f9f,stroke:#333,stroke-width:4px
```