@simplysm/sd-claude 14.0.50 → 14.0.52

package/claude/references/sd-simplysm-v14/angular/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/claude/references/sd-simplysm-v14/angular/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/claude/references/sd-simplysm-v14/angular/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/claude/references/sd-simplysm-v14/angular/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/claude/references/sd-simplysm-v14/angular/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()" />
+```

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

@@ -0,0 +1,43 @@
+# `SdSidebarUser`
+
+사이드바 하단 사용자 영역 컴포넌트. 사용자 정보를 표시하고, 선택적으로 드롭다운 메뉴를 제공한다.
+
+```typescript
+@Component({ selector: "sd-sidebar-user", ... })
+export class SdSidebarUser
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `userMenu` | input | `SdSidebarUserMenu \| undefined` | 사용자 메뉴 정보. `title`이 있으면 메뉴 버튼 표시 |
+
+## Related Types
+
+### `SdSidebarUserMenu`
+
+```typescript
+interface SdSidebarUserMenu {
+  title: string;
+  menus: {
+    title: string;
+    onClick: () => void;
+  }[];
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | 메뉴 버튼 라벨 |
+| `menus` | `{ title: string; onClick: () => void }[]` | 드롭다운 메뉴 항목 목록 |
+
+## Usage
+
+```html
+<sd-sidebar-user
+  [userMenu]="{ title: '홍길동', menus: [{ title: '로그아웃', onClick: logout }] }"
+>
+  <span>홍길동</span>
+</sd-sidebar-user>
+```

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

@@ -0,0 +1,51 @@
+# `SdTab`
+
+탭 컨테이너 컴포넌트. 선택된 값을 `value` model로 보관한다.
+
+```typescript
+@Component({ selector: "sd-tab" })
+class SdTab<T> {
+  value = model<T>();
+}
+```
+
+> **CRITICAL — 역할 범위**
+> `sd-tab`/`sd-tab-item`은 **상단의 탭 선택 UI만** 담당한다. 내부 뷰(패널) 전환 기능은 **없다**.
+> `sd-tab-item`의 `<ng-content>`는 **탭 라벨 전용**이다. 이 안에 시트/폼/상세 등 뷰 콘텐츠를 넣지 않는다.
+> 뷰 콘텐츠는 `sd-tab` **바깥**에서 선택된 `value`를 기준으로 `@if` / `@switch`로 제어한다.
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | model | `T \| undefined` | 선택된 탭 값 (two-way) |
+
+## Related Types
+
+### `SdTabItem`
+
+탭 항목 컴포넌트. 자신의 `value`가 부모 `SdTab.value`와 같으면 선택 상태가 된다.
+
+```typescript
+@Component({ selector: "sd-tab-item" })
+class SdTabItem<T> {
+  value = input.required<T>();
+}
+```
+
+## Usage
+
+```html
+<!-- ✅ 올바른 사용: 탭은 선택 UI, 뷰는 @if로 제어 -->
+<sd-tab [(value)]="tab">
+  <sd-tab-item [value]="'list'">목록</sd-tab-item>
+  <sd-tab-item [value]="'detail'">상세</sd-tab-item>
+</sd-tab>
+
+@if (tab() === "list") {
+  <sd-sheet ...></sd-sheet>
+}
+@if (tab() === "detail") {
+  <app-detail ...></app-detail>
+}
+```

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

@@ -0,0 +1,97 @@
+# `SdTopbarContainer`
+
+탑바 컨테이너.
+
+```typescript
+@Component({ selector: "sd-topbar-container" })
+class SdTopbarContainer { }
+```
+
+## Related Types
+
+### `SdTopbar`
+
+탑바 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-topbar" })
+class SdTopbar { }
+```
+
+### `SdTopbarMenu`
+
+탑바 메뉴 항목.
+
+```typescript
+@Component({ selector: "sd-topbar-menu" })
+class SdTopbarMenu {
+  menus = input<SdMenu[]>([]);
+  getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `menus` | `SdMenu[]` | `[]` | 메뉴 항목 |
+| `getMenuIsSelectedFn` | `((menu) => boolean) \| undefined` | `undefined` | 커스텀 메뉴 선택 여부 함수 |
+
+### `SdTopbarUser`
+
+탑바 사용자 영역 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-topbar-user" })
+class SdTopbarUser {
+  menus = input.required<SdTopbarUserMenu[]>();
+}
+```
+
+## Usage
+
+### topbar 내부 슬롯 활용
+
+```html
+<sd-topbar-container>
+  @if (viewType() === "page") {
+    <sd-topbar>
+      <h4>{{ viewTitle() }}</h4>
+      @if (canEdit()) {
+        <sd-button [theme]="'link-primary'" (click)="onSaveButtonClick()">
+          <ng-icon [svg]="tablerDeviceFloppy" /> 저장 <small>(CTRL+S)</small>
+        </sd-button>
+      }
+    </sd-topbar>
+  }
+  <!-- 메인 콘텐츠 -->
+</sd-topbar-container>
+```
+
+페이지/모달/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`
+
+페이지네이션 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-pagination" })
+class SdPagination {
+  currentPage = model(0);
+  totalPageCount = input(0, { transform: numberAttribute });
+  visiblePageCount = input(10, { transform: numberAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `currentPage` | `number` | `0` | 현재 페이지 (0-based, two-way) |
+| `totalPageCount` | `number` | `0` | 총 페이지 수 |
+| `visiblePageCount` | `number` | `10` | 한 번에 표시할 페이지 수 |

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

@@ -0,0 +1,23 @@
+# `SdTopbarMenu`
+
+탑바 메뉴 컴포넌트. `SdMenu[]` 트리를 드롭다운 방식으로 렌더링한다.
+
+```typescript
+@Component({ selector: "sd-topbar-menu", ... })
+export class SdTopbarMenu
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `menus` | input | `SdMenu[]` | 메뉴 트리 (기본값: `[]`) |
+| `getMenuIsSelectedFn` | input | `(menu: SdMenu) => boolean \| undefined` | 메뉴 선택 여부 커스텀 함수 |
+
+## Usage
+
+```html
+<sd-topbar>
+  <sd-topbar-menu [menus]="sdAppStructure.usableMenus()" />
+</sd-topbar>
+```

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

@@ -0,0 +1,38 @@
+# `SdTopbarUser`
+
+탑바 사용자 영역 컴포넌트. 사용자 이름을 버튼으로 표시하고, 클릭 시 드롭다운 메뉴를 제공한다.
+
+```typescript
+@Component({ selector: "sd-topbar-user", ... })
+export class SdTopbarUser
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `menus` | input (required) | `SdTopbarUserMenu[]` | 드롭다운 메뉴 항목 목록 |
+
+## Related Types
+
+### `SdTopbarUserMenu`
+
+```typescript
+interface SdTopbarUserMenu {
+  title: string;
+  onClick: () => void;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | 메뉴 항목 텍스트 |
+| `onClick` | `() => void` | 클릭 핸들러 |
+
+## Usage
+
+```html
+<sd-topbar-user [menus]="[{ title: '내 정보', onClick: goToProfile }, { title: '로그아웃', onClick: logout }]">
+  홍길동
+</sd-topbar-user>
+```

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

@@ -0,0 +1,30 @@
+# `SdTopbar`
+
+탑바 컴포넌트. `SdTopbarContainer` 내부에서 사용하며, 사이드바 토글 버튼과 콘텐츠 슬롯을 제공한다.
+
+```typescript
+@Component({ selector: "sd-topbar", ... })
+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
+<sd-topbar-container>
+  <sd-topbar>
+    <h1>앱 타이틀</h1>
+    <sd-topbar-menu [menus]="menus()" />
+    <sd-topbar-user [menus]="userMenus()" />
+  </sd-topbar>
+  ...
+</sd-topbar-container>
+```

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

@@ -0,0 +1,69 @@
+# `SdBusyContainer`
+
+busy 상태(로딩 중) 표시 컨테이너 컴포넌트. `busy` 입력이 `true`일 때 스크린 오버레이와 인디케이터를 표시한다.
+
+```typescript
+@Component({ selector: "sd-busy-container", ... })
+export class SdBusyContainer
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `busy` | input | `boolean` | busy 상태 (기본값: `false`) |
+| `type` | input | `SdBusyType` | 인디케이터 유형. 미지정 시 `SdBusyProvider.type()` 값 사용 |
+
+글로벌 busy 표시는 [`SdBusyProvider`](../providers/sd-busy-provider.md)를 통해 관리한다.
+
+## Usage
+
+```html
+<!-- 컴포넌트 로컬 busy -->
+<sd-busy-container [busy]="busyCount() > 0">
+  <!-- 콘텐츠 -->
+</sd-busy-container>
+```
+
+### busyCount 카운트 패턴
+
+비동기 작업마다 카운트를 증감하여 동시 요청을 안전하게 처리한다:
+
+```typescript
+busyCount = signal(0);
+
+async _refresh(): Promise<void> {
+  this.busyCount.update((v) => v + 1);
+  await this._sdToast.try(async () => {
+    // ... 비동기 작업
+  });
+  this.busyCount.update((v) => v - 1);
+}
+```
+
+```html
+<sd-busy-container [busy]="busyCount() > 0">
+```
+
+### busyMessage 선택적 패턴
+
+긴 작업(엑셀 업로드 등) 시에만 사용. 기본적으로는 메시지 없이 인디케이터만 표시한다:
+
+```typescript
+busyMessage = signal<string | undefined>(undefined);
+
+// 긴 작업 시
+this.busyMessage.set("엑셀 업로드 중...");
+// ... 작업 완료 후
+this.busyMessage.set(undefined);
+```
+
+```html
+<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

@@ -0,0 +1,30 @@
+# `SdConfirmModal`
+
+범용 확인 모달. `SdModalContentDef<boolean>`을 구현한다.
+메시지를 표시하고 확인/취소한다. 확인 시 `true` 반환, 취소 시 `undefined` 반환.
+
+```typescript
+@Component({ selector: "sd-confirm-modal", ... })
+export class SdConfirmModal implements SdModalContentDef<boolean>
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `message` | input (required) | `string` | 표시할 메시지 (HTML 허용) |
+| `initialized` | property | `Signal<boolean>` | 항상 `true` (SdModalContentDef 요구사항) |
+| `close` | output | `boolean \| undefined` | 확인: `true`, 취소: `undefined` |
+
+## Usage
+
+```typescript
+const confirmed = await this._sdModal.showAsync({
+  title: "삭제 확인",
+  type: SdConfirmModal,
+  inputs: { message: "정말 삭제하시겠습니까?" },
+});
+if (confirmed) {
+  await this._delete();
+}
+```

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

@@ -0,0 +1,40 @@
+# `SdDropdown`
+
+드롭다운 트리거 컴포넌트. 클릭 또는 키보드로 `SdDropdownPopup`을 열고 닫는다.
+
+```typescript
+@Component({ selector: "sd-dropdown", ... })
+export class SdDropdown
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `open` | model | `boolean` | 팝업 열림 상태 (기본값: `false`) |
+| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
+
+## Related Types
+
+### `SdDropdownPopup`
+
+```typescript
+@Component({ selector: "sd-dropdown-popup", ... })
+export class SdDropdownPopup
+```
+
+드롭다운 팝업 영역. `SdDropdown` 내부에서만 사용한다.
+
+## Usage
+
+```html
+<sd-dropdown>
+  <sd-button>메뉴 열기</sd-button>
+  <sd-dropdown-popup>
+    <sd-list>
+      <sd-list-item (click)="onAction1()">동작 1</sd-list-item>
+      <sd-list-item (click)="onAction2()">동작 2</sd-list-item>
+    </sd-list>
+  </sd-dropdown-popup>
+</sd-dropdown>
+```

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

@@ -0,0 +1,34 @@
+# `SdModal`
+
+모달 래퍼 컴포넌트. `SdModalProvider.showAsync()`에 의해 프로그래밍 방식으로 생성된다. 직접 템플릿에 배치하지 않는다.
+
+```typescript
+@Component({ selector: "sd-modal", ... })
+export class SdModal
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `open` | model | `boolean` | 열림 상태 (기본값: `false`) |
+| `key` | input | `string \| undefined` | 설정 저장 키 (크기/위치 저장) |
+| `title` | input | `string` | 모달 제목 (기본값: `""`) |
+| `hideHeader` | input | `boolean` | 헤더 숨김 (기본값: `false`) |
+| `hideCloseButton` | input | `boolean` | 닫기 버튼 숨김 (기본값: `false`) |
+| `headerStyle` | input | `string \| undefined` | 헤더 인라인 스타일 |
+| `useCloseByBackdrop` | input | `boolean` | 배경 클릭으로 닫기 (기본값: `true`) |
+| `useCloseByEscapeKey` | input | `boolean` | ESC 키로 닫기 (기본값: `true`) |
+| `float` | input | `boolean` | 플로팅 모달 (backdrop 없음) (기본값: `false`) |
+| `fill` | input | `boolean` | 전체 화면 채우기 (기본값: `false`) |
+| `resizable` | input | `boolean` | 크기 조절 가능 (기본값: `false`) |
+| `movable` | input | `boolean` | 이동 가능 (기본값: `false`) |
+| `position` | input | `"bottom-right" \| "top-right" \| undefined` | 초기 위치 |
+| `minHeightPx` | input | `number \| undefined` | 최소 높이 |
+| `minWidthPx` | input | `number \| undefined` | 최소 너비 |
+| `heightPx` | input | `number \| undefined` | 초기 높이 |
+| `widthPx` | input | `number \| undefined` | 초기 너비 |
+| `actionTplRef` | input | `TemplateRef<any> \| undefined` | 헤더 액션 영역 템플릿 |
+| `closeRequest` | output | `void` | 닫기 요청 (배경 클릭, ESC, X 버튼) |
+
+모달 컴포넌트를 직접 사용하는 대신 [`SdModalProvider`](../providers/sd-modal-provider.md)를 사용한다.

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

@@ -0,0 +1,30 @@
+# `SdPromptModal`
+
+범용 프롬프트 입력 모달. `SdModalContentDef<string>`을 구현한다.
+메시지를 표시하고 텍스트 입력 후 확인/취소한다. 확인 시 입력값 반환, 취소 시 `undefined` 반환.
+
+```typescript
+@Component({ selector: "sd-prompt-modal", ... })
+export class SdPromptModal implements SdModalContentDef<string>
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `message` | input (required) | `string` | 표시할 메시지 (HTML 허용) |
+| `initialized` | property | `Signal<boolean>` | 항상 `true` (SdModalContentDef 요구사항) |
+| `close` | output | `string \| undefined` | 확인: 입력값, 취소: `undefined` |
+
+## Usage
+
+```typescript
+const name = await this._sdModal.showAsync({
+  title: "이름 입력",
+  type: SdPromptModal,
+  inputs: { message: "새 항목의 이름을 입력하세요." },
+});
+if (name != null) {
+  // 입력한 이름 사용
+}
+```