@simplysm/sd-claude 14.0.53 → 14.0.55

package/claude/references/sd-simplysm-v14/angular/ui-data/sd-sheet.md

@@ -1,27 +1,35 @@
 # `SdSheet`
 
+> **읽어야 하는 상황**: 스프레드시트 형태로 데이터를 표시하고 정렬, 컬럼 고정, 리사이즈, 설정 저장 등이 필요할 때. 단순 목록은 [`SdList`](./sd-list.md) 참조.
+
 스프레드시트 컴포넌트. 정렬, 컬럼 고정, 리사이즈, 페이지네이션, 설정 저장을 지원한다.
 
 ```typescript
 @Component({ selector: "sd-sheet" })
-class SdSheet<T> {
+class SdSheet<TItem, TKey> {
   key = input<string>();
-  items = input<T[]>([]);
-  trackByFn = input<(item: T, index: number) => unknown>();
+  items = input<TItem[]>([]);
+  trackByFn = input.required<(item: TItem, index: number) => TKey>();
   selectMode = input<"single" | "multi">();
-  getItemSelectableFn = input<(item: T) => boolean | string>();
-  getChildrenFn = input<(item: T, index: number) => T[] | undefined>();
+  autoSelect = input<"click" | "focus">();
+  getItemSelectableFn = input<(item: TItem) => boolean | string>();
+  getChildrenFn = input<(item: TItem, index: number) => TItem[] | undefined>();
   useAutoSort = input(false, { transform: booleanAttribute });
   visiblePageCount = input(10);
   totalPageCount = input(0);
   itemsPerPage = input(0);
+  focusMode = input<"row" | "cell">("cell");
   inset = input(false, { transform: booleanAttribute });
+  contentStyle = input<string>();
+  getItemCellClassFn = input<(item: TItem, colKey: string) => string>();
+  getItemCellStyleFn = input<(item: TItem, colKey: string) => string | undefined>();
   hideConfigBar = input(false, { transform: booleanAttribute });
-  itemKeydown = output<SdSheetItemKeydownEventParam<T>>();
-  cellKeydown = output<SdSheetCellKeydownEventParam<T>>();
+  columnControlsInput = input<readonly SdSheetColumn[]>([]);
+  itemKeydown = output<SdSheetItemKeydownEventParam<TItem>>();
+  cellKeydown = output<SdSheetCellKeydownEventParam<TItem>>();
 
-  selectedItems = model<T[]>([]);
-  expandedItems = model<T[]>([]);
+  selectedKeys = model<NonNullable<TKey>[]>([]);
+  expandedItems = model<TItem[]>([]);
   sorts = model<SortingDef[]>([]);
   currentPage = model(0);
 }
@@ -32,34 +40,32 @@ class SdSheet<T> {
 | Member | Kind | Type | Default | Description |
 |--------|------|------|---------|-------------|
 | `key` | input | `string \| undefined` | `undefined` | 설정 저장 키 |
-| `items` | input | `T[]` | `[]` | 표시할 항목 |
-| `trackByFn` | input | `((item, index) => unknown) \| undefined` | `undefined` | 트랙킹 함수 |
+| `items` | input | `TItem[]` | `[]` | 표시할 항목 |
+| `trackByFn` | input (required) | `(item: TItem, index: number) => TKey` | - | 트랙킹 함수 |
 | `selectMode` | input | `"single" \| "multi" \| undefined` | `undefined` | 선택 모드 |
+| `autoSelect` | input | `"click" \| "focus" \| undefined` | `undefined` | 자동 선택 트리거 |
 | `getItemSelectableFn` | input | `((item) => boolean \| string) \| undefined` | `undefined` | 선택 가능 여부 함수. string은 비활성 사유 |
-| `getChildrenFn` | input | `((item, index) => T[] \| undefined) \| undefined` | `undefined` | 트리 구조 자식 반환 함수 |
+| `getChildrenFn` | input | `((item, index) => TItem[] \| undefined) \| undefined` | `undefined` | 트리 구조 자식 반환 함수 |
 | `useAutoSort` | input | `boolean` | `false` | 클라이언트 측 자동 정렬 |
 | `visiblePageCount` | input | `number` | `10` | 한 번에 표시할 페이지 수 |
 | `totalPageCount` | input | `number` | `0` | 총 페이지 수 |
 | `itemsPerPage` | input | `number` | `0` | 페이지당 항목 수 |
+| `focusMode` | input | `"row" \| "cell"` | `"cell"` | 포커스 모드 (행 단위 또는 셀 단위) |
 | `inset` | input | `boolean` | `false` | 삽입 스타일 |
+| `contentStyle` | input | `string \| undefined` | `undefined` | 시트 콘텐츠 영역 인라인 스타일 |
+| `getItemCellClassFn` | input | `((item, colKey) => string) \| undefined` | `undefined` | 셀별 CSS 클래스 함수 |
+| `getItemCellStyleFn` | input | `((item, colKey) => string \| undefined) \| undefined` | `undefined` | 셀별 인라인 스타일 함수 |
 | `hideConfigBar` | input | `boolean` | `false` | 설정 바 숨김 |
-| `itemKeydown` | output | `SdSheetItemKeydownEventParam<T>` | - | 행 keydown 이벤트 |
-| `cellKeydown` | output | `SdSheetCellKeydownEventParam<T>` | - | 셀 keydown 이벤트 |
-| `selectedItems` | model | `T[]` | `[]` | 선택된 항목 (two-way) |
-| `expandedItems` | model | `T[]` | `[]` | 확장된 항목 (two-way) |
+| `columnControlsInput` | input | `readonly SdSheetColumn[]` | `[]` | 프로그래밍 방식 컬럼 정의 (contentChildren과 병합) |
+| `itemKeydown` | output | `SdSheetItemKeydownEventParam<TItem>` | - | 행 keydown 이벤트 |
+| `cellKeydown` | output | `SdSheetCellKeydownEventParam<TItem>` | - | 셀 keydown 이벤트 |
+| `selectedKeys` | model | `NonNullable<TKey>[]` | `[]` | 선택된 항목의 key 배열 (two-way, trackByFn 기준) |
+| `expandedItems` | model | `TItem[]` | `[]` | 확장된 항목 (two-way) |
 | `sorts` | model | `SortingDef[]` | `[]` | 정렬 설정 (two-way) |
 | `currentPage` | model | `number` | `0` | 현재 페이지 (two-way) |
 
 > `SortingDef.key`는 `"vendor.name"` 같은 체인 경로일 수 있다. 정렬 처리 시 `obj.getChainValue(item, sort.key)` (from `@simplysm/core-common`)를 사용한다.
 
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — items·sorts·currentPage·totalPageCount·trackByFn 기본 바인딩
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — selectMode·selectedItems·mark 연동
-- [crud-list.md §6 확장 B: 선택 기능 + 선택 삭제/복구](../recipes/crud-list.md#6-확장-b-선택-기능--선택-삭제복구) — selectMode="multi"·selectedItems 바인딩
-- [crud-list.md §8 확장 D: 선택 모달 전환](../recipes/crud-list.md#8-확장-d-선택-모달-전환) — selectMode 조건부 적용
-- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 상세 폼 내부 하위 컬렉션 편집
-
 ## Related Types
 
 ### `SdSheetColumn`
@@ -85,12 +91,6 @@ class SdSheetColumn<T = unknown> {
 
 Content children: `SdSheetColumnCellTemplate` (required), `#headerTpl`, `#summaryTpl`
 
-#### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — key·header 기본 컬럼 정의
-- [crud-list.md §7 확장 C: inline 삭제 열](../recipes/crud-list.md#7-확장-c-inline-삭제-열) — fixed·hidden·#headerTpl 커스텀 헤더
-- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 하위 컬렉션 컬럼 정의
-
 ### `SdSheetColumnCellTemplate`
 
 시트 컬럼 셀 내용을 정의하는 디렉티브. `ng-template[cell]` 셀렉터.
@@ -111,12 +111,6 @@ class SdSheetColumnCellTemplate<T> {
 - **일반 텍스트**: `<div class="p-xs-sm">` 로 감싸 기본 패딩 적용
 - **컨트롤 삽입**: 반드시 `[inset]="true"` + `[size]="'sm'"` 지정
 
-#### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — let-item 기본 셀 렌더링
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — let-edit 조건부 편집 셀 (inset+sm 컨트롤)
-- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 상세 폼 내부 하위 컬렉션 셀
-
 ### `SdSheetCellContext`
 
 ```typescript
@@ -141,11 +135,12 @@ interface SdSheetCellContext<T = unknown> {
 
 ```typescript
 @Component({ selector: "sd-sheet-config-modal" })
-class SdSheetConfigModal implements SdModalContentDef<SdSheetConfig> {
+class SdSheetConfigModal implements SdModalContentDef<SdSheetConfig | undefined> {
+  sheetKey = input.required<string>();
   controls = input.required<readonly SdSheetColumn[]>();
   config = input.required<SdSheetConfig | undefined>();
-  close = output<SdSheetConfig>();
-  initialized = signal(true);
+  close = output<SdSheetConfig | undefined>();
+  initialized = signal(false);
 }
 ```
 

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-additional-button.md

@@ -1,5 +1,7 @@
 # `SdAdditionalButton`
 
+> **읽어야 하는 상황**: 콘텐츠 영역 옆에 추가 동작 버튼을 배치할 때.
+
 주 콘텐츠 영역과 추가 동작 버튼을 나란히 배치하는 복합 컴포넌트. 콘텐츠 왼쪽 `_content` 영역과 오른쪽 `_button` 영역으로 구성된다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-anchor.md

@@ -1,5 +1,7 @@
 # `SdAnchor`
 
+> **읽어야 하는 상황**: 텍스트 내 인라인 클릭 요소(앵커 링크 스타일)가 필요할 때. 블록 버튼은 [`SdButton`](./sd-button.md) 참조.
+
 인라인 버튼 컴포넌트. 텍스트나 아이콘을 클릭 가능한 링크 스타일로 표시한다.
 
 ```typescript
@@ -22,10 +24,3 @@ export class SdAnchor
 <sd-anchor [disabled]="!canEdit()">설정</sd-anchor>
 ```
 
-### 실사용 예
-
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 시트 셀 내 인라인 앵커 버튼
-- [crud-list.md §7 확장 C: inline 삭제 열](../recipes/crud-list.md#7-확장-c-inline-삭제-열) — row별 삭제/복구 토글 아이콘
-- [crud-list.md §10 확장 F: 모달 편집 모드](../recipes/crud-list.md#10-확장-f-모달-편집-모드) — 행 클릭 편집 모달 열기 링크
-- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 우측 상단 액션 앵커
-- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 행 삭제 아이콘 앵커

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-button.md

@@ -1,5 +1,7 @@
 # `SdButton`
 
+> **읽어야 하는 상황**: 클릭 가능한 버튼을 배치할 때. 텍스트 내 인라인 클릭 요소는 [`SdAnchor`](./sd-anchor.md), 콘텐츠 + 추가 동작 버튼은 [`SdAdditionalButton`](./sd-additional-button.md) 참조.
+
 버튼 컴포넌트.
 
 ```typescript
@@ -31,15 +33,6 @@ class SdButton {
 
 **스타일 적용**: 시각적 스타일은 내부 `<button>`에 적용되므로 `buttonClass`/`buttonStyle`을 사용한다. 호스트(`<sd-button>`)에 직접 `class`/`style`을 줘도 버튼 외형은 변경되지 않는다.
 
-### 실사용 예
-
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 저장·등록 버튼 (type="submit", primary theme)
-- [crud-list.md §11 확장 G: 엑셀 업로드/다운로드](../recipes/crud-list.md#11-확장-g-엑셀-업로드다운로드) — 엑셀 업로드·다운로드 버튼
-- [crud-detail.md §5 확장 A: 편집/저장](../recipes/crud-detail.md#5-확장-a-편집저장) — 저장 버튼 (type="submit")
-- [crud-detail.md §6 확장 B: 삭제/복구 토글](../recipes/crud-detail.md#6-확장-b-삭제복구-토글) — 삭제·복구 버튼 (danger/warning theme)
-- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 하단 바 확인·취소 버튼
-- [crud-detail.md §8 확장 D: control 뷰](../recipes/crud-detail.md#8-확장-d-control-뷰) — control 상단 바 버튼
-
 ## Related Types
 
 ### `SdAnchor`
@@ -80,7 +73,6 @@ class SdAdditionalButton {
 class SdModalSelectButton<T extends object, K, M extends keyof SelectModeValue<K>> {
   modal = input.required<SdSelectModalInfo<SdSelectModal<T>>>();
   value = model<SelectModeValue<K>[M]>();
-  selectedItems = model<T[]>([]);
   disabled = input(false, { transform: booleanAttribute });
   required = input(false, { transform: booleanAttribute });
   inset = input(false, { transform: booleanAttribute });
@@ -95,7 +87,6 @@ class SdModalSelectButton<T extends object, K, M extends keyof SelectModeValue<K
 |-------|------|---------|-------------|
 | `modal` | `SdSelectModalInfo<...>` | required | 모달 정보 |
 | `value` | `SelectModeValue<K>[M]` | - | 선택된 값 (two-way) |
-| `selectedItems` | `T[]` | `[]` | 선택된 항목 객체 배열 (two-way) |
 | `disabled` | `boolean` | `false` | 비활성화 |
 | `required` | `boolean` | `false` | 필수 (지우기 버튼 숨김) |
 | `inset` | `boolean` | `false` | 삽입 스타일 |

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-checkbox-group.md

@@ -1,5 +1,7 @@
 # `SdCheckboxGroup`
 
+> **읽어야 하는 상황**: 체크박스 그룹으로 다중 선택을 관리할 때. 단일 체크박스는 [`SdCheckbox`](./sd-checkbox.md) 참조.
+
 체크박스 그룹 컴포넌트. `SdCheckboxGroupItem`과 함께 사용하여 다중 선택을 관리한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-checkbox.md

@@ -1,5 +1,7 @@
 # `SdCheckbox`
 
+> **읽어야 하는 상황**: 체크박스로 boolean 값을 토글할 때. 스위치 형태는 [`SdSwitch`](./sd-switch.md), 다중 선택 그룹은 [`SdCheckboxGroup`](./sd-checkbox-group.md) 참조.
+
 체크박스 컴포넌트.
 
 ```typescript
@@ -33,10 +35,6 @@ class SdCheckbox {
 | `theme` | input | `string \| undefined` | `undefined` | 테마 색상 |
 | `contentStyle` | input | `string \| undefined` | `undefined` | 라벨 텍스트 인라인 스타일 |
 
-### 실사용 예
-
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 필터 영역 "삭제항목 포함" 체크박스
-
 ## Related Types
 
 ### `SdSwitch`

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-date-range-picker.md

@@ -1,5 +1,7 @@
 # `SdDateRangePicker`
 
+> **읽어야 하는 상황**: 날짜 범위(일/월/범위 모드)를 선택할 때.
+
 날짜 범위 선택 컴포넌트. 기간 유형(`일`/`월`/`범위`)을 선택하고 `from`/`to` 날짜를 입력한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-form.md

@@ -1,5 +1,7 @@
 # `SdForm`
 
+> **읽어야 하는 상황**: 폼 제출(submit 이벤트)과 유효성 검증이 필요할 때.
+
 폼 래퍼 컴포넌트. `<form>` 태그를 렌더링하며 submit 이벤트 처리 및 유효성 검증을 수행한다.
 
 ```typescript
@@ -39,13 +41,6 @@ onSave(): void {
 }
 ```
 
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 폼 래퍼 (formSubmit으로 검색 트리거)
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 편집 폼 래퍼 (#formCtrl + requestSubmit)
-- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — 읽기 전용 필드 배치 컨테이너
-- [crud-detail.md §5 확장 A: 편집/저장](../recipes/crud-detail.md#5-확장-a-편집저장) — 편집 폼 래퍼 (formSubmit + #formCtrl + requestSubmit)
-
 ## Related Types
 
 ### `SdStatePreset`

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-modal-select-button.md

@@ -1,6 +1,8 @@
 # `SdModalSelectButton`
 
-모달을 열어 항목을 선택하는 버튼 컴포넌트. 선택된 값은 `value`와 `selectedItems` model로 관리된다.
+> **읽어야 하는 상황**: 모달을 열어 항목을 선택하는 버튼이 필요할 때. 공유 데이터 기반 선택은 [`SdSharedDataSelectButton`](../features/sd-shared-data-components.md), 드롭다운 선택은 [`SdSelect`](./sd-select.md) 참조.
+
+모달을 열어 항목을 선택하는 버튼 컴포넌트. 선택된 값은 `value` model로 관리된다.
 
 ```typescript
 @Component({ selector: "sd-modal-select-button", ... })
@@ -13,7 +15,6 @@ export class SdModalSelectButton<T extends object, K, M extends keyof SelectMode
 |--------|------|------|-------------|
 | `modal` | input (required) | `SdSelectModalInfo<SdSelectModal<T>>` | 모달 정보 |
 | `value` | model | `SelectModeValue<K>[M] \| undefined` | 선택된 키 값 |
-| `selectedItems` | model | `T[]` | 선택된 항목 배열 (기본값: `[]`) |
 | `disabled` | input | `boolean` | 비활성화 여부 (기본값: `false`) |
 | `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
 | `inset` | input | `boolean` | 인셋 스타일 (기본값: `false`) |
@@ -29,17 +30,17 @@ export class SdModalSelectButton<T extends object, K, M extends keyof SelectMode
 ```typescript
 interface SdSelectModal<T> extends SdModalContentDef<SelectModalOutputResult<T>> {
   selectMode: InputSignal<"single" | "multi" | undefined>;
-  selectedItemKeys: InputSignal<any[]>;
+  selectedKeys: InputSignal<any[]>;
 }
 ```
 
 ### `SdSelectModalInfo<T>`
 
 ```typescript
-type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<T, "selectMode" | "selectedItemKeys">
+type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<T, "selectMode" | "selectedKeys">
 ```
 
-`selectMode`, `selectedItemKeys`를 제외한 나머지 inputs만 전달하면 된다.
+`selectMode`, `selectedKeys`를 제외한 나머지 inputs만 전달하면 된다.
 
 ## Usage
 
@@ -47,8 +48,7 @@ type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<T, "selectMod
 <sd-modal-select-button
   [modal]="{ title: '고객 선택', type: CustomerSelectModal, inputs: {} }"
   [(value)]="selectedCustomerId"
-  [(selectedItems)]="selectedCustomers"
 >
-  {{ selectedCustomers()[0]?.name }}
+  {{ selectedCustomerName() }}
 </sd-modal-select-button>
 ```

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-numpad.md

@@ -1,5 +1,7 @@
 # `SdNumpad`
 
+> **읽어야 하는 상황**: 터치 기기에서 숫자 패드 입력이 필요할 때.
+
 숫자 패드 입력 컴포넌트. 버튼을 클릭하여 숫자를 입력한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-range.md

@@ -1,5 +1,7 @@
 # `SdRange`
 
+> **읽어야 하는 상황**: 범위(from ~ to) 입력이 필요할 때.
+
 범위 입력 컴포넌트. `from`/`to` 두 개의 `SdTextfield`를 나란히 배치한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-select.md

@@ -1,5 +1,7 @@
 # `SdSelect`
 
+> **읽어야 하는 상황**: 드롭다운으로 항목을 선택할 때 (single/multi). 공유 데이터에서 선택은 [`SdSharedDataSelect`](./sd-shared-data-select.md), 모달에서 선택은 [`SdModalSelectButton`](./sd-modal-select-button.md) 참조.
+
 드롭다운 선택 컴포넌트. single/multi 모드를 지원한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-shared-data-select.md

@@ -1,5 +1,7 @@
 # `SdSharedDataSelect`
 
+> **읽어야 하는 상황**: 공유 데이터에서 드롭다운으로 항목을 선택할 때. 모달 선택은 [sd-shared-data-components.md](../features/sd-shared-data-components.md) 참조.
+
 공유 데이터 드롭다운 선택 컴포넌트. 검색 기능 포함. 상세 API는 [features/sd-shared-data-components.md](../features/sd-shared-data-components.md#sdshareddataselect)를 참조한다.
 
 ## 시트 셀 내 사용 패턴
@@ -46,7 +48,3 @@
 
 `<ng-template [itemOf]>` 패턴으로 드롭다운 항목의 표시 형식을 커스터마이징한다.
 
-### 실사용 예
-
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 시트 셀 내 공유 데이터 선택
-- [crud-detail.md §9 확장 E: 보조 기능 영역](../recipes/crud-detail.md#9-확장-e-보조-기능-영역) — 보조 form 셀렉터

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-state-preset.md

@@ -1,5 +1,7 @@
 # `SdStatePreset`
 
+> **읽어야 하는 상황**: 화면 상태(검색 조건 등)를 프리셋으로 저장/불러오기할 때.
+
 화면 상태(검색 조건 등)를 로컬 스토리지에 저장하고 불러오는 프리셋 컴포넌트.
 `SdSystemConfigProvider`를 통해 설정 키 기반으로 저장한다.
 

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-switch.md

@@ -1,5 +1,7 @@
 # `SdSwitch`
 
+> **읽어야 하는 상황**: 스위치 형태로 on/off를 토글할 때. 체크박스 형태는 [`SdCheckbox`](./sd-checkbox.md) 참조.
+
 토글 스위치 컴포넌트. `value` model로 on/off 상태를 관리한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-textarea.md

@@ -1,5 +1,7 @@
 # `SdTextarea`
 
+> **읽어야 하는 상황**: 여러 줄 텍스트를 입력받을 때. 한 줄 입력은 [`SdTextfield`](./sd-textfield.md), 리치 텍스트는 [`SdTiptapEditor`](../features/sd-tiptap-editor.md) 참조.
+
 멀티라인 텍스트 입력 컴포넌트. 내용에 따라 행 수가 자동으로 늘어난다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-textfield.md

@@ -1,5 +1,7 @@
 # `SdTextfield`
 
+> **읽어야 하는 상황**: 한 줄 텍스트, 숫자, 날짜, 시간, 색상 등을 입력받을 때. 여러 줄 텍스트는 [`SdTextarea`](./sd-textarea.md), 리치 텍스트는 [`SdTiptapEditor`](../features/sd-tiptap-editor.md) 참조.
+
 텍스트 입력 컴포넌트. 13가지 타입을 지원한다.
 
 ```typescript
@@ -63,14 +65,6 @@ class SdTextfield<K extends keyof SdTextfieldTypes> {
 
 **스타일 적용**: 입력 영역 스타일은 `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`

package/claude/references/sd-simplysm-v14/angular/ui-layout/sd-dock-container.md

@@ -1,5 +1,7 @@
 # `SdDockContainer`
 
+> **읽어야 하는 상황**: 상/하/좌/우 고정 영역이 있는 도킹 레이아웃을 구성할 때.
+
 도킹 레이아웃 컨테이너. `SdDock`과 함께 사용하여 상/하/좌/우 고정 영역을 만든다.
 
 ```typescript
@@ -47,13 +49,6 @@ class SdDock {
 > **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) 컴포넌트. 요소 사이에 공간을 추가한다.

package/claude/references/sd-simplysm-v14/angular/ui-layout/sd-dock.md

@@ -1,5 +1,7 @@
 # `SdDock`
 
+> **읽어야 하는 상황**: 도킹 컨테이너 내부에 고정 패널을 배치할 때.
+
 `SdDockContainer` 내부에 배치되는 도킹 패널 컴포넌트. `position`으로 도킹 위치를 지정하고, `resizable`로 크기 조절을 허용한다.
 
 ```typescript
@@ -29,9 +31,3 @@ export class SdDock
 </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/claude/references/sd-simplysm-v14/angular/ui-layout/sd-gap.md

@@ -1,5 +1,7 @@
 # `SdGap`
 
+> **읽어야 하는 상황**: 레이아웃에 세로/가로 간격을 삽입할 때.
+
 레이아웃 간격 컴포넌트. 세로/가로 공백을 삽입한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-layout/sd-kanban-board.md

@@ -1,5 +1,7 @@
 # `SdKanbanBoard`
 
+> **읽어야 하는 상황**: 칸반 보드(드래그앤드롭)를 구성할 때.
+
 칸반 보드 컨테이너. 드래그앤드롭을 지원한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-layout/sd-kanban-lane.md

@@ -1,5 +1,7 @@
 # `SdKanbanLane`
 
+> **읽어야 하는 상황**: 칸반 보드 내부에 아이템을 수직 나열하는 레인을 배치할 때.
+
 칸반 레인 컴포넌트. `SdKanbanBoard` 내부에 배치되며, `SdKanban` 아이템을 수직으로 나열한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-layout/sd-kanban.md

@@ -1,5 +1,7 @@
 # `SdKanban`
 
+> **읽어야 하는 상황**: 칸반 레인 내부에 드래그 가능한 아이템을 배치할 때.
+
 칸반 아이템 컴포넌트. `SdKanbanLane` 내부에 배치되며, 드래그앤드롭으로 레인 간 이동이 가능하다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-navigation/sd-collapse.md

@@ -1,5 +1,7 @@
 # `SdCollapse`
 
+> **읽어야 하는 상황**: 접기/펼치기 패널이 필요할 때.
+
 접기/펼치기 패널 컴포넌트.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-navigation/sd-pagination.md

@@ -1,5 +1,7 @@
 # `SdPagination`
 
+> **읽어야 하는 상황**: 페이지네이션 네비게이션이 필요할 때.
+
 페이지네이션 컴포넌트. 현재 페이지와 전체 페이지 수를 표시하고 네비게이션을 제공한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-navigation/sd-sidebar-container.md

@@ -1,5 +1,7 @@
 # `SdSidebarContainer`
 
+> **읽어야 하는 상황**: 사이드바 + 메뉴 레이아웃을 구성할 때.
+
 사이드바 컨테이너.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-navigation/sd-sidebar-menu.md

@@ -1,5 +1,7 @@
 # `SdSidebarMenu`
 
+> **읽어야 하는 상황**: 사이드바에 메뉴 트리를 렌더링할 때.
+
 사이드바 메뉴 컴포넌트. `SdMenu[]` 트리를 받아 아코디언 또는 플랫 레이아웃으로 렌더링한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-navigation/sd-sidebar-user.md

@@ -1,5 +1,7 @@
 # `SdSidebarUser`
 
+> **읽어야 하는 상황**: 사이드바 하단에 사용자 정보와 드롭다운 메뉴를 표시할 때.
+
 사이드바 하단 사용자 영역 컴포넌트. 사용자 정보를 표시하고, 선택적으로 드롭다운 메뉴를 제공한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-navigation/sd-tab.md

@@ -1,5 +1,7 @@
 # `SdTab`
 
+> **읽어야 하는 상황**: 탭으로 콘텐츠를 전환할 때.
+
 탭 컨테이너 컴포넌트. 선택된 값을 `value` model로 보관한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-navigation/sd-topbar-container.md

@@ -1,5 +1,7 @@
 # `SdTopbarContainer`
 
+> **읽어야 하는 상황**: 탑바 레이아웃을 구성할 때.
+
 탑바 컨테이너.
 
 ```typescript
@@ -68,15 +70,6 @@ class SdTopbarUser {
 
 페이지/모달/control 뷰에서 **재사용**되는 화면은 topbar를 page 뷰에서만 렌더한다. `@if (viewType() === "page")` 조건을 사용한다.
 
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — topbar + 타이틀 (조회 전용이라 버튼 없음)
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — topbar 내 저장·등록 버튼 추가
-- [crud-list.md §11 확장 G: 엑셀 업로드/다운로드](../recipes/crud-list.md#11-확장-g-엑셀-업로드다운로드) — topbar 내 엑셀 버튼 추가
-- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — topbar 조건 없이 렌더 (page 뷰 전용)
-- [crud-detail.md §5 확장 A: 편집/저장](../recipes/crud-detail.md#5-확장-a-편집저장) — topbar 내 저장 버튼 추가
-- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — `@if (viewType() === "page")` 조건부 렌더
-
 ## `SdPagination`
 
 페이지네이션 컴포넌트.

package/claude/references/sd-simplysm-v14/angular/ui-navigation/sd-topbar-menu.md

@@ -1,5 +1,7 @@
 # `SdTopbarMenu`
 
+> **읽어야 하는 상황**: 탑바에 드롭다운 메뉴를 배치할 때.
+
 탑바 메뉴 컴포넌트. `SdMenu[]` 트리를 드롭다운 방식으로 렌더링한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-navigation/sd-topbar-user.md

@@ -1,5 +1,7 @@
 # `SdTopbarUser`
 
+> **읽어야 하는 상황**: 탑바에 사용자 정보와 드롭다운 메뉴를 표시할 때.
+
 탑바 사용자 영역 컴포넌트. 사용자 이름을 버튼으로 표시하고, 클릭 시 드롭다운 메뉴를 제공한다.
 
 ```typescript

package/claude/references/sd-simplysm-v14/angular/ui-navigation/sd-topbar.md

@@ -1,5 +1,7 @@
 # `SdTopbar`
 
+> **읽어야 하는 상황**: 탑바 내부에 제목, 메뉴, 사용자 영역을 배치할 때.
+
 탑바 컴포넌트. `SdTopbarContainer` 내부에서 사용하며, 사이드바 토글 버튼과 콘텐츠 슬롯을 제공한다.
 
 ```typescript
@@ -9,13 +11,6 @@ export class SdTopbar
 
 `SdSidebarContainer`가 상위에 있으면 자동으로 사이드바 토글 버튼을 표시한다.
 
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — `<h4>` 타이틀 (조회 전용이라 버튼 없음)
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 저장·등록 버튼 추가
-- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — `<h4>` 타이틀 (읽기 전용이라 버튼 없음)
-- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — `@if (viewType() === "page")` 조건부 렌더
-
 ## Usage
 
 ```html

package/claude/references/sd-simplysm-v14/angular/ui-overlay/sd-busy-container.md

@@ -1,5 +1,7 @@
 # `SdBusyContainer`
 
+> **읽어야 하는 상황**: 특정 영역에 busy 로딩 오버레이를 표시할 때. 글로벌 busy는 [`SdBusyProvider`](../providers/sd-busy-provider.md) 참조.
+
 busy 상태(로딩 중) 표시 컨테이너 컴포넌트. `busy` 입력이 `true`일 때 스크린 오버레이와 인디케이터를 표시한다.
 
 ```typescript
@@ -62,8 +64,3 @@ this.busyMessage.set(undefined);
 <sd-busy-container [busy]="busyCount() > 0" [message]="busyMessage()">
 ```
 
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — busyCount 기본 패턴
-- [crud-list.md §11 확장 G: 엑셀 업로드/다운로드](../recipes/crud-list.md#11-확장-g-엑셀-업로드다운로드) — busyMessage 패턴
-- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — busyCount 기본 패턴

package/claude/references/sd-simplysm-v14/angular/ui-overlay/sd-confirm-modal.md

@@ -1,5 +1,7 @@
 # `SdConfirmModal`
 
+> **읽어야 하는 상황**: 확인/취소 대화상자를 표시할 때. 텍스트 입력은 [`SdPromptModal`](./sd-prompt-modal.md), 커스텀 모달은 [`SdModalProvider`](../providers/sd-modal-provider.md) 참조.
+
 범용 확인 모달. `SdModalContentDef<boolean>`을 구현한다.
 메시지를 표시하고 확인/취소한다. 확인 시 `true` 반환, 취소 시 `undefined` 반환.