@simplysm/angular 14.0.49 → 14.0.51

package/docs/ui-form/sd-textfield.md

@@ -0,0 +1,145 @@
+# `SdTextfield`
+
+텍스트 입력 컴포넌트. 13가지 타입을 지원한다.
+
+```typescript
+@Component({ selector: "sd-textfield" })
+class SdTextfield<K extends keyof SdTextfieldTypes> {
+  value = model<SdTextfieldTypes[K]>();
+  type = input.required<K>();
+  placeholder = input<string>();
+  title = input<string>();
+  inputStyle = input<string>();
+  inputClass = input<string>();
+  disabled = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  min = input<SdTextfieldTypes[K]>();
+  max = input<SdTextfieldTypes[K]>();
+  minlength = input<number>();
+  maxlength = input<number>();
+  pattern = input<string>();
+  validatorFn = input<(value: SdTextfieldTypes[K] | undefined) => string | undefined>();
+  format = input<string>();
+  step = input<number>();
+  autocomplete = input<string>();
+  useNumberComma = input(true, { transform: booleanAttribute });
+  minDigits = input<number>();
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  theme = input<string>();
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `type` | input (required) | `keyof SdTextfieldTypes` | - | 입력 타입 (number, text, password, color, email, format, date, month, year, datetime, datetime-sec, time, time-sec) |
+| `value` | model | `SdTextfieldTypes[K] \| undefined` | - | 값 (two-way) |
+| `placeholder` | input | `string \| undefined` | `undefined` | 플레이스홀더 |
+| `title` | input | `string \| undefined` | `undefined` | title 속성 |
+| `inputStyle` | input | `string \| undefined` | `undefined` | input 인라인 스타일 |
+| `inputClass` | input | `string \| undefined` | `undefined` | input CSS 클래스 |
+| `disabled` | input | `boolean` | `false` | 비활성화 |
+| `readonly` | input | `boolean` | `false` | 읽기 전용 |
+| `required` | input | `boolean` | `false` | 필수 |
+| `min` | input | `SdTextfieldTypes[K] \| undefined` | `undefined` | 최소값 |
+| `max` | input | `SdTextfieldTypes[K] \| undefined` | `undefined` | 최대값 |
+| `minlength` | input | `number \| undefined` | `undefined` | 최소 길이 |
+| `maxlength` | input | `number \| undefined` | `undefined` | 최대 길이 |
+| `pattern` | input | `string \| undefined` | `undefined` | 입력 패턴 (정규식) |
+| `validatorFn` | input | `((value) => string \| undefined) \| undefined` | `undefined` | 커스텀 유효성 검증 함수 (에러 메시지 반환) |
+| `format` | input | `string \| undefined` | `undefined` | format 타입에서 사용할 포맷 문자열 |
+| `step` | input | `number \| undefined` | `undefined` | 증감 단위 |
+| `autocomplete` | input | `string \| undefined` | `undefined` | autocomplete 속성 |
+| `useNumberComma` | input | `boolean` | `true` | number 타입에서 천 단위 쉼표 사용 |
+| `minDigits` | input | `number \| undefined` | `undefined` | number 타입 최소 자릿수 |
+| `inline` | input | `boolean` | `false` | 인라인 표시 |
+| `inset` | input | `boolean` | `false` | 삽입 스타일 |
+| `size` | input | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+| `theme` | input | `string \| undefined` | `undefined` | 테마 |
+
+**스타일 적용**: 입력 영역 스타일은 `inputClass`/`inputStyle`을 사용한다. 호스트(`<sd-textfield>`)에 직접 `class`/`style`을 줘도 입력 영역 외형은 변경되지 않는다.
+
+### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 영역 텍스트 입력
+- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 시트 셀 내 편집 (inset+sm, readonly=!edit)
+- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — 읽기 전용 필드 (readonly=true)
+- [crud-detail.md §5 확장 A: 편집/저장](../recipes/crud-detail.md#5-확장-a-편집저장) — 편집 가능 필드 (disabled=!canEdit)
+- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 하위 컬렉션 시트 셀 내 편집
+
+## Related Types
+
+### `SdTextarea`
+
+멀티라인 텍스트 입력 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-textarea" })
+class SdTextarea {
+  value = model<string>();
+  placeholder = input<string>();
+  title = input<string>();
+  minRows = input<number>(1);
+  disabled = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  validatorFn = input<(value: string | undefined) => string | undefined>();
+  theme = input<string>();
+  inputStyle = input<string>();
+  inputClass = input<string>();
+}
+```
+
+### `SdNumpad`
+
+숫자 패드 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-numpad" })
+class SdNumpad {
+  placeholder = input<string>();
+  value = model<number>();
+  required = input(false, { transform: booleanAttribute });
+  inputDisabled = input(false, { transform: booleanAttribute });
+  useEnterButton = input(false, { transform: booleanAttribute });
+  useMinusButton = input(false, { transform: booleanAttribute });
+  enterButtonClick = output();
+}
+```
+
+### `SdRange`
+
+범위 슬라이더 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-range" })
+class SdRange<K extends keyof SdTextfieldTypes> {
+  type = input.required<K>();
+  from = model<SdTextfieldTypes[K]>();
+  to = model<SdTextfieldTypes[K]>();
+  inputStyle = input<string>();
+  required = input(false, { transform: booleanAttribute });
+  disabled = input(false, { transform: booleanAttribute });
+}
+```
+
+### `SdDateRangePicker`
+
+날짜 범위 선택기.
+
+```typescript
+@Component({ selector: "sd-date-range-picker" })
+class SdDateRangePicker {
+  periodType = model<"일" | "월" | "범위">("범위");
+  from = model<DateOnly>();
+  to = model<DateOnly>();
+  required = input(false, { transform: booleanAttribute });
+}
+```

package/docs/ui-layout/sd-dock-container.md

@@ -0,0 +1,64 @@
+# `SdDockContainer`
+
+도킹 레이아웃 컨테이너. `SdDock`과 함께 사용하여 상/하/좌/우 고정 영역을 만든다.
+
+```typescript
+@Component({ selector: "sd-dock-container" })
+class SdDockContainer { }
+```
+
+## Related Types
+
+### `SdDock`
+
+도킹 영역 컴포넌트. `SdDockContainer` 내부에서 사용.
+
+```typescript
+@Component({ selector: "sd-dock" })
+class SdDock {
+  key = input<string>();
+  position = input<"top" | "bottom" | "right" | "left">("top");
+  resizable = input(false, { transform: booleanAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `key` | `string \| undefined` | `undefined` | 리사이즈 설정 저장 키 |
+| `position` | `"top" \| "bottom" \| "right" \| "left"` | `"top"` | 도킹 위치 |
+| `resizable` | `boolean` | `false` | 크기 조절 가능 여부 |
+
+## Usage
+
+필터·도구 바는 `position="top"` (기본값이므로 생략 가능), 하단 액션 바는 `[position]="'bottom'"`으로 배치한다.
+
+```html
+<sd-dock-container>
+  <sd-dock>
+    <!-- 상단 필터/도구 바 (기본 position="top") -->
+  </sd-dock>
+  <!-- 메인 콘텐츠 -->
+  <sd-dock [position]="'bottom'">
+    <!-- 하단 액션 바 -->
+  </sd-dock>
+</sd-dock-container>
+```
+
+> **CRITICAL — modal 하단 바에 `[position]="'bottom'"` 반드시 명시**
+> 기본값은 `"top"`이다. modal 하단 액션 바에 `[position]`을 누락하면 상단에 렌더링되어 레이아웃이 깨진다.
+
+### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 영역 dock(top)
+- [crud-list.md §8 확장 D: 선택 모달 전환](../recipes/crud-list.md#8-확장-d-선택-모달-전환) — modal 하단 선택 바 dock(bottom)
+- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 하단 액션 바 dock(bottom)
+- [crud-detail.md §8 확장 D: control 뷰](../recipes/crud-detail.md#8-확장-d-control-뷰) — control 상단 바 dock(top)
+
+## `SdGap`
+
+간격(gap) 컴포넌트. 요소 사이에 공간을 추가한다.
+
+```typescript
+@Component({ selector: "sd-gap" })
+class SdGap { }
+```

package/docs/ui-layout/sd-dock.md

@@ -0,0 +1,37 @@
+# `SdDock`
+
+`SdDockContainer` 내부에 배치되는 도킹 패널 컴포넌트. `position`으로 도킹 위치를 지정하고, `resizable`로 크기 조절을 허용한다.
+
+```typescript
+@Component({ selector: "sd-dock", ... })
+export class SdDock
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `key` | input | `string \| undefined` | 시스템 설정 저장 키 (크기 저장에 사용) |
+| `position` | input | `"top" \| "bottom" \| "right" \| "left"` | 도킹 위치 (기본값: `"top"`) |
+| `resizable` | input | `boolean` | 크기 조절 가능 여부 (기본값: `false`) |
+
+## Usage
+
+```html
+<sd-dock-container>
+  <sd-dock [position]="'top'">
+    <!-- 상단 고정 영역 -->
+  </sd-dock>
+  <sd-dock [position]="'bottom'" [resizable]="true" [key]="'my-page-bottom-dock'">
+    <!-- 하단 조절 가능 영역 -->
+  </sd-dock>
+  <ng-content /> <!-- 나머지 영역 -->
+</sd-dock-container>
+```
+
+### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 영역 dock(top)
+- [crud-list.md §8 확장 D: 선택 모달 전환](../recipes/crud-list.md#8-확장-d-선택-모달-전환) — modal 하단 선택 바 dock(bottom)
+- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 하단 액션 바 dock(bottom)
+- [crud-detail.md §8 확장 D: control 뷰](../recipes/crud-detail.md#8-확장-d-control-뷰) — control 상단 바 dock(top)

package/docs/ui-layout/sd-gap.md

@@ -0,0 +1,26 @@
+# `SdGap`
+
+레이아웃 간격 컴포넌트. 세로/가로 공백을 삽입한다.
+
+```typescript
+@Component({ selector: "sd-gap", ... })
+export class SdGap
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `height` | input | `"xxs" \| "xs" \| "sm" \| "default" \| "lg" \| "xl" \| "xxl" \| undefined` | 세로 간격 (CSS 변수 `--gap-*` 기반) |
+| `heightPx` | input | `number \| undefined` | 세로 간격 (픽셀) |
+| `width` | input | `"xxs" \| "xs" \| "sm" \| "default" \| "lg" \| "xl" \| "xxl" \| undefined` | 가로 간격 (CSS 변수 `--gap-*` 기반) |
+| `widthPx` | input | `number \| undefined` | 가로 간격 (픽셀) |
+| `widthEm` | input | `number \| undefined` | 가로 간격 (em) |
+
+## Usage
+
+```html
+<sd-gap [height]="'lg'" />
+<sd-gap [width]="'default'" />
+<sd-gap [heightPx]="32" />
+```

package/docs/{ui-layout.md → ui-layout/sd-kanban-board.md}

@@ -1,57 +1,65 @@
-# UI - Layout
+# `SdKanbanBoard`
 
-## `SdDockContainer`
-
-도킹 레이아웃 컨테이너. `SdDock`과 함께 사용하여 상/하/좌/우 고정 영역을 만든다.
+칸반 보드 컨테이너. 드래그앤드롭을 지원한다.
 
 ```typescript
-@Component({ selector: "sd-dock-container" })
-class SdDockContainer { }
+@Component({ selector: "sd-kanban-board" })
+class SdKanbanBoard<L, T> {
+  selectedValues = model<T[]>([]);
+  drop = output<SdKanbanBoardDropInfo<L, T>>();
+}
 ```
 
-## `SdDock`
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `selectedValues` | model | `T[]` | `[]` | 선택된 칸반 아이템 값 배열 (two-way) |
+| `drop` | output | `SdKanbanBoardDropInfo<L, T>` | - | 드롭 완료 시 발생 |
+
+## Related Types
 
-도킹 영역 컴포넌트. `SdDockContainer` 내부에서 사용.
+### `SdKanban`
+
+칸반 아이템 컴포넌트.
 
 ```typescript
-@Component({ selector: "sd-dock" })
-class SdDock {
-  key = input<string>();
-  position = input<"top" | "bottom" | "right" | "left">("top");
-  resizable = input(false, { transform: booleanAttribute });
+@Component({ selector: "sd-kanban" })
+class SdKanban<L, T> {
+  value = input<T>();
+  selectable = input(false, { transform: booleanAttribute });
+  draggable = input(false, { transform: booleanAttribute });
+  contentClass = input<string>();
 }
 ```
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
-| `key` | `string \| undefined` | `undefined` | 리사이즈 설정 저장 키 |
-| `position` | `"top" \| "bottom" \| "right" \| "left"` | `"top"` | 도킹 위치 |
-| `resizable` | `boolean` | `false` | 크기 조절 가능 여부 |
-
-## `SdGap`
-
-간격(gap) 컴포넌트. 요소 사이에 공간을 추가한다.
-
-```typescript
-@Component({ selector: "sd-gap" })
-class SdGap { }
-```
+| `value` | `T \| undefined` | `undefined` | 칸반 아이템의 값 |
+| `selectable` | `boolean` | `false` | 선택 가능 여부 |
+| `draggable` | `boolean` | `false` | 드래그 가능 여부 |
+| `contentClass` | `string \| undefined` | `undefined` | 컨텐츠 CSS 클래스 |
 
-## `SdKanbanBoard`
+### `SdKanbanLane`
 
-칸반 보드 컨테이너. 드래그앤드롭을 지원한다.
+칸반 레인 컴포넌트.
 
 ```typescript
-@Component({ selector: "sd-kanban-board" })
-class SdKanbanBoard<L, T> {
-  selectedValues = model<T[]>([]);
-  drop = output<SdKanbanBoardDropInfo<L, T>>();
+@Component({ selector: "sd-kanban-lane" })
+class SdKanbanLane<L, T> {
+  busy = input(false, { transform: booleanAttribute });
+  useCollapse = input(false, { transform: booleanAttribute });
+  collapse = model(false);
+  value = input<L>();
 }
 ```
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
-| `selectedValues` | `T[]` | `[]` | 선택된 칸반 아이템 값 배열 (two-way) |
+| `busy` | `boolean` | `false` | busy 상태 |
+| `useCollapse` | `boolean` | `false` | 접기 기능 사용 |
+| `collapse` | `boolean` | `false` | 접힘 상태 (two-way) |
+| `value` | `L \| undefined` | `undefined` | 레인의 값 |
 
 ### `SdKanbanBoardDropInfo`
 
@@ -67,7 +75,7 @@ interface SdKanbanBoardDropInfo<L, T> {
 |-------|------|-------------|
 | `sourceKanbanValue` | `T \| undefined` | 드래그한 칸반 아이템의 값 |
 | `targetLaneValue` | `L \| undefined` | 드롭 대상 레인의 값 |
-| `targetKanbanValue` | `T \| undefined` | 드롭 대상 칸반 아이템의 값 (칸반 위에 드롭 시) |
+| `targetKanbanValue` | `T \| undefined` | 드롭 대상 칸반 아이템의 값 |
 
 ### `SdKanbanDragRef`
 
@@ -78,11 +86,6 @@ interface SdKanbanDragRef<_L, T> {
 }
 ```
 
-| Field | Type | Description |
-|-------|------|-------------|
-| `value()` | `T \| undefined` | 드래그 중인 칸반 아이템의 값 |
-| `heightOnDrag()` | `number` | 드래그 시작 시점의 요소 높이 |
-
 ### `SdKanbanDropTarget`
 
 ```typescript
@@ -91,50 +94,3 @@ interface SdKanbanDropTarget<L, T> {
   targetKanbanValue?(): T | undefined;
 }
 ```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `targetLaneValue()` | `L \| undefined` | 드롭 대상 레인의 값 |
-| `targetKanbanValue?()` | `T \| undefined` | 드롭 대상 칸반 아이템의 값 (optional) |
-
-## `SdKanban`
-
-칸반 아이템 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-kanban" })
-class SdKanban<L, T> {
-  value = input<T>();
-  selectable = input(false, { transform: booleanAttribute });
-  draggable = input(false, { transform: booleanAttribute });
-  contentClass = input<string>();
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `value` | `T \| undefined` | `undefined` | 칸반 아이템의 값 |
-| `selectable` | `boolean` | `false` | 선택 가능 여부 |
-| `draggable` | `boolean` | `false` | 드래그 가능 여부 |
-| `contentClass` | `string \| undefined` | `undefined` | 컨텐츠 CSS 클래스 |
-
-## `SdKanbanLane`
-
-칸반 레인 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-kanban-lane" })
-class SdKanbanLane<L, T> {
-  busy = input(false, { transform: booleanAttribute });
-  useCollapse = input(false, { transform: booleanAttribute });
-  collapse = model(false);
-  value = input<L>();
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `busy` | `boolean` | `false` | busy 상태 |
-| `useCollapse` | `boolean` | `false` | 접기 기능 사용 |
-| `collapse` | `boolean` | `false` | 접힘 상태 (two-way) |
-| `value` | `L \| undefined` | `undefined` | 레인의 값 |

package/docs/ui-layout/sd-kanban-lane.md

@@ -0,0 +1,34 @@
+# `SdKanbanLane`
+
+칸반 레인 컴포넌트. `SdKanbanBoard` 내부에 배치되며, `SdKanban` 아이템을 수직으로 나열한다.
+
+```typescript
+@Component({ selector: "sd-kanban-lane", ... })
+export class SdKanbanLane<L, T> implements SdKanbanDropTarget<L, T>
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | input | `L \| undefined` | 이 레인의 값 |
+| `busy` | input | `boolean` | 로딩 표시 (기본값: `false`) |
+| `useCollapse` | input | `boolean` | 접기 기능 사용 (기본값: `false`) |
+| `collapse` | model | `boolean` | 접힘 상태 (기본값: `false`) |
+
+## Usage
+
+```html
+<sd-kanban-board [(selectedValues)]="selectedItems">
+  @for (lane of lanes; track lane.id) {
+    <sd-kanban-lane [value]="lane">
+      <ng-template #titleTpl>{{ lane.name }}</ng-template>
+      @for (item of lane.items; track item.id) {
+        <sd-kanban [value]="item" [draggable]="true">
+          {{ item.title }}
+        </sd-kanban>
+      }
+    </sd-kanban-lane>
+  }
+</sd-kanban-board>
+```

package/docs/ui-layout/sd-kanban.md

@@ -0,0 +1,29 @@
+# `SdKanban`
+
+칸반 아이템 컴포넌트. `SdKanbanLane` 내부에 배치되며, 드래그앤드롭으로 레인 간 이동이 가능하다.
+
+```typescript
+@Component({ selector: "sd-kanban", ... })
+export class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget<L, T>
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | input | `T \| undefined` | 이 카드의 데이터 값 |
+| `selectable` | input | `boolean` | 선택 가능 여부 (기본값: `false`) |
+| `draggable` | input | `boolean` | 드래그 가능 여부 (기본값: `false`) |
+| `contentClass` | input | `string \| undefined` | 카드 콘텐츠 CSS 클래스 |
+
+## Usage
+
+```html
+<sd-kanban-lane [value]="lane">
+  @for (item of lane.items; track item.id) {
+    <sd-kanban [value]="item" [draggable]="true">
+      {{ item.title }}
+    </sd-kanban>
+  }
+</sd-kanban-lane>
+```

package/docs/ui-navigation/sd-collapse.md

@@ -0,0 +1,35 @@
+# `SdCollapse`
+
+접기/펼치기 패널 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-collapse" })
+class SdCollapse {
+  open = input(false, { transform: booleanAttribute });
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `open` | input | `boolean` | `false` | 펼침 상태 |
+
+## Related Types
+
+### `SdCollapseIcon`
+
+접기/펼치기 아이콘 컴포넌트. 화살표 회전 애니메이션.
+
+```typescript
+@Component({ selector: "sd-collapse-icon" })
+class SdCollapseIcon {
+  open = input(false, { transform: booleanAttribute });
+  openRotate = input(90, { transform: numberAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `open` | `boolean` | `false` | 펼침 상태 |
+| `openRotate` | `number` | `90` | 열림 시 회전 각도 |

package/docs/ui-navigation/sd-pagination.md

@@ -0,0 +1,26 @@
+# `SdPagination`
+
+페이지네이션 컴포넌트. 현재 페이지와 전체 페이지 수를 표시하고 네비게이션을 제공한다.
+
+```typescript
+@Component({ selector: "sd-pagination", ... })
+export class SdPagination
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `currentPage` | model | `number` | 현재 페이지 (0-based, 기본값: `0`) |
+| `totalPageCount` | input | `number` | 전체 페이지 수 (기본값: `0`) |
+| `visiblePageCount` | input | `number` | 한 번에 표시할 페이지 버튼 수 (기본값: `10`) |
+
+## Usage
+
+```html
+<sd-pagination
+  [(currentPage)]="searchParams.page"
+  [totalPageCount]="totalPageCount()"
+  (currentPageChange)="onPageChange()"
+/>
+```

package/docs/ui-navigation/sd-sidebar-container.md

@@ -0,0 +1,49 @@
+# `SdSidebarContainer`
+
+사이드바 컨테이너.
+
+```typescript
+@Component({ selector: "sd-sidebar-container" })
+class SdSidebarContainer { }
+```
+
+## Related Types
+
+### `SdSidebar`
+
+사이드바 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-sidebar" })
+class SdSidebar { }
+```
+
+### `SdSidebarMenu`
+
+사이드바 메뉴 항목. 재귀적 트리 구조 지원.
+
+```typescript
+@Component({ selector: "sd-sidebar-menu" })
+class SdSidebarMenu {
+  menus = input<SdMenu[]>([]);
+  layout = input<"accordion" | "flat">();
+  getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `menus` | `SdMenu[]` | `[]` | 메뉴 항목 |
+| `layout` | `"accordion" \| "flat" \| undefined` | `undefined` | 레이아웃 모드 |
+| `getMenuIsSelectedFn` | `((menu) => boolean) \| undefined` | `undefined` | 커스텀 메뉴 선택 여부 함수 |
+
+### `SdSidebarUser`
+
+사이드바 사용자 영역 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-sidebar-user" })
+class SdSidebarUser {
+  userMenu = input<SdSidebarUserMenu>();
+}
+```

package/docs/ui-navigation/sd-sidebar-menu.md

@@ -0,0 +1,22 @@
+# `SdSidebarMenu`
+
+사이드바 메뉴 컴포넌트. `SdMenu[]` 트리를 받아 아코디언 또는 플랫 레이아웃으로 렌더링한다.
+
+```typescript
+@Component({ selector: "sd-sidebar-menu", ... })
+export class SdSidebarMenu
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `menus` | input | `SdMenu[]` | 메뉴 트리 (기본값: `[]`) |
+| `layout` | input | `"accordion" \| "flat" \| undefined` | 레이아웃. 미지정 시 메뉴 수 ≤ 3이면 `"flat"`, 초과이면 `"accordion"` |
+| `getMenuIsSelectedFn` | input | `(menu: SdMenu) => boolean` | 메뉴 선택 여부 커스텀 함수 |
+
+## Usage
+
+```html
+<sd-sidebar-menu [menus]="sdAppStructure.usableMenus()" />
+```