@simplysm/sd-claude 14.0.50 → 14.0.52

package/claude/references/sd-simplysm-v14/angular/recipes/crud-detail/extension-a-edit-save.md

@@ -0,0 +1,191 @@
+← [CRUD 상세폼 레시피 진입점](../crud-detail.md)
+
+# 확장 A: 편집/저장
+
+> **선행:** 없음 (최소 뼈대 §3에 직접 얹음)
+
+최소 뼈대의 읽기 전용 필드를 **편집 가능**으로 바꾸고, topbar에 "저장" 버튼(또는 Ctrl+S)을 추가하여 **일괄 저장**을 도입한다. `obj.clone(this.data())` snapshot + `obj.equal(data, _dataSnapshot)` 기반 변경 감지를 부착하고, 라우트 이탈 시 미저장 변경사항을 확인하는 `setupCanDeactivate` 가드를 등록한다. 편집은 page/modal/control 모든 뷰에서 동작하며, 뷰별 UI 배치는 [확장 C](./extension-c-modal-view.md)/[확장 D](./extension-d-control-view.md)에서 처리한다.
+
+**이 확장이 도입하는 요소:**
+
+- **imports:** `computed`, `viewChild`, `obj`, `setupCanDeactivate`, `mark`, `SdCommandDirective` outputs에 `sdSaveCommand` 추가, 아이콘 `tablerDeviceFloppy`
+- **DI:** 없음 (최소 뼈대와 동일)
+- **파생:** `canEdit = computed(() => perms().includes("edit"))` (뷰 분기 없음 — 편집은 3뷰 모두에서 가능, 뷰별 UI는 [확장 C](./extension-c-modal-view.md)/[확장 D](./extension-d-control-view.md)에서 분기)
+- **상태:** `_dataSnapshot?: ICustomer` (직전 `_refresh()` 시점 data의 깊은 복제), `isNew = computed(() => data().id == null)` (신규 레코드 여부)
+- **권한 키 확장:** `injectPermsSignal` 두 번째 인자 `["use"]` → `["use", "edit"]`
+- **hostDirectives·host:** `outputs`에 `sdSaveCommand` 추가, `host`에 `(sdSaveCommand)="onSaveButtonClick()"` 추가
+- **viewChild:** `formCtrl = viewChild<SdForm>("formCtrl")` (Ctrl+S 경로 통합용)
+- **메서드:** `onSaveButtonClick`, `onSubmit`, `_checkIgnoreChanges`
+- **for Template:** `protected readonly mark = mark;` (템플릿 `(valueChange)="mark(data)"` 호출용)
+- **생성자:** 기존 초기 effect 뒤에 `setupCanDeactivate(() => this._checkIgnoreChanges())`
+- **템플릿:** topbar에 "저장" 버튼 추가(`@if (canEdit())`), `<sd-form>` → `<sd-form #formCtrl (formSubmit)="onSubmit()">` 교체, 필드 `[readonly]="true"` → `[disabled]="!canEdit()"` 전환, 모든 입력 필드에 `(valueChange)="mark(data)"` 추가
+- **_refresh 변경:** 말미에 `this._dataSnapshot = data.id == null ? undefined : obj.clone(this.data());` 추가
+
+> 상세: [`<sd-form> #formCtrl / requestSubmit()`](../../ui-form/sd-form.md) · [`setupCanDeactivate`](../../utils/setup-functions.md#setupcandeactivate)
+
+> **아래 코드 블록은 diff 조각이다.** 독립 실행 가능한 완성 클래스가 아니며, 최소 뼈대 위에 번호 순서대로 삽입·교체할 지점을 나타낸다. 그대로 컴파일되지 않는다.
+
+```typescript
+// 1) imports 교체 — @angular/core에 {computed, viewChild} 추가, @simplysm/core-common에 {obj} 추가,
+//    @simplysm/angular에 {setupCanDeactivate, mark} 추가, 아이콘에 tablerDeviceFloppy 추가.
+import { tablerAlertTriangle, tablerDeviceFloppy } from "@ng-icons/tabler-icons";
+import {
+  ChangeDetectionStrategy, Component, computed, effect, inject, input, signal, untracked,
+  viewChild, ViewEncapsulation,
+} from "@angular/core";
+import { type DateTime, obj } from "@simplysm/core-common";
+import {
+  FormatPipe, injectPermsSignal, injectViewTitleSignal, mark,
+  SdBusyContainer, SdButton, SdCommandDirective,
+  SdForm, SdTextfield, SdToastProvider, SdTopbar, SdTopbarContainer,
+  setupCanDeactivate,
+} from "@simplysm/angular";
+
+// 2) @Component — hostDirectives에 sdSaveCommand 추가, host에 (sdSaveCommand) 바인딩 추가.
+@Component({
+  // ...selector/changeDetection/encapsulation/standalone/imports 동일
+  hostDirectives: [
+    { directive: SdCommandDirective, outputs: ["sdSaveCommand"] },
+  ],
+  host: {
+    "(sdSaveCommand)": "onSaveButtonClick()",
+  },
+  // template: 아래 6)에서 상세
+})
+
+// 3) 권한 키 확장 — ["use"] → ["use", "edit"]
+perms = injectPermsSignal(["sales.customer"], ["use", "edit"]);
+
+// 4) 파생·상태·viewChild 추가
+protected readonly canEdit = computed(() => this.perms().includes("edit"));
+protected readonly isNew = computed(() => this.data().id == null);
+private _dataSnapshot?: ICustomer;
+
+protected readonly formCtrl = viewChild<SdForm>("formCtrl");
+
+// 5) 생성자에 setupCanDeactivate 추가 (기존 초기 effect 뒤)
+constructor() {
+  // 기존 초기 effect 동일...
+  setupCanDeactivate(() => this._checkIgnoreChanges());
+}
+
+// 6) template — topbar에 "저장" 버튼 추가, <sd-form>을 <sd-form #formCtrl (formSubmit)>로 교체,
+//    필드 [readonly]="true" → [disabled]="!canEdit()"로 전환, 입력 필드에 (valueChange)="mark(data)" 추가.
+template: `
+  <sd-busy-container [busy]="busyCount() > 0">
+    @if (initialized()) {
+      @if (!perms().includes("use")) { <!-- 경고 동일 --> }
+      @else {
+        <sd-topbar-container>
+          <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>
+
+          <div class="flex-column fill">
+            <sd-form #formCtrl (formSubmit)="onSubmit()" class="flex-fill">
+              <div class="p-default">
+                <table class="form-table">
+                  <tbody>
+                    <tr>
+                      <th>명칭</th>
+                      <td>
+                        <sd-textfield
+                          [type]="'text'" [required]="true"
+                          [disabled]="!canEdit()" [(value)]="data().name"
+                          (valueChange)="mark(data)"
+                        />
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>전화번호</th>
+                      <td>
+                        <sd-textfield
+                          [type]="'text'" [disabled]="!canEdit()"
+                          [(value)]="data().phone"
+                          (valueChange)="mark(data)"
+                        />
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </sd-form>
+            <!-- lastModified 블록 동일 (최소 뼈대 §3) -->
+          </div>
+        </sd-topbar-container>
+      }
+    }
+  </sd-busy-container>
+`
+
+// 7) 메서드 추가 — onSaveButtonClick / onSubmit / _checkIgnoreChanges
+protected onSaveButtonClick(): void {
+  this.formCtrl()?.requestSubmit();
+}
+
+protected async onSubmit(): Promise<void> {
+  if (this.busyCount() > 0) return;
+  if (!this.perms().includes("edit")) return;
+
+  // 신규는 변경 체크 없이 저장. 기존 항목이면 snapshot 대비 변경 여부를 판정.
+  if (!this.isNew() && this._dataSnapshot != null && obj.equal(this.data(), this._dataSnapshot)) {
+    this._sdToast.info("변경사항이 없습니다.");
+    return;
+  }
+
+  this.busyCount.update((v) => v + 1);
+  await this._sdToast.try(async () => {
+    // 앱별 ORM upsert — 예:
+    //   await this._appOrm.connectAsync(async (db) => {
+    //     await db.customer()
+    //       .where((c) => [expr.eq(c.id, this.data().id)])
+    //       .upsert(() => ({ name: this.data().name, phone: this.data().phone }));
+    //   });
+    // 검증 실패 시 throw 하면 sdToast.try가 포착하여 에러 토스트를 표시한다 (이후 흐름은 생략).
+
+    this._sdToast.success("저장되었습니다.");
+    await this._refresh();
+  });
+  this.busyCount.update((v) => v - 1);
+}
+
+private _checkIgnoreChanges(): boolean {
+  return (
+    this._dataSnapshot == null ||
+    obj.equal(this.data(), this._dataSnapshot) ||
+    confirm("변경사항이 있습니다. 무시하고 진행하시겠습니까?")
+  );
+}
+
+// 8) _refresh 변경 — 말미에 snapshot 갱신
+}
+
+// 9) _refresh 말미에 snapshot 갱신
+private async _refresh(): Promise<void> {
+  // ... (최소 뼈대 동일 조회 로직)
+
+  this.data.set(data);
+  // 신규(id == null)면 snapshot을 비워 변경 체크를 항상 통과시키고 저장을 허용한다.
+  this._dataSnapshot = data.id == null ? undefined : obj.clone(this.data());
+}
+
+// 10) 아이콘 + mark 템플릿 참조 추가
+protected readonly tablerDeviceFloppy = tablerDeviceFloppy;
+protected readonly mark = mark;
+```
+
+**포인트:**
+
+- **`obj.equal`은 deep equal**(`packages/core-common/src/utils/obj.ts:172`)이므로 `data().field = "x"` 같은 field mutation도 snapshot 대비 **저장 판정에 자동 반영**된다. 입력 필드의 `(valueChange)="mark(data)"`는 OnPush 재렌더링·연계 computed 갱신을 위한 **통지** 용도이며, 값 비교(저장 감지)와는 별개다.
+- **snapshot은 반드시 `obj.clone`으로 깊은 복제한다.** `this._dataSnapshot = this.data()` 같은 얕은 참조 대입은 `data().field = "x"` mutation을 snapshot까지 오염시켜 변경 감지가 실패한다. `_refresh()` 말미에서 `obj.clone`(`packages/core-common/src/utils/obj.ts:19`)으로 저장해야 비교가 정확히 동작한다.
+- **`isNew = computed(() => data().id == null)`은 PK 형태에 주의한다.** 클라이언트 UUID 선할당·자연키·복합키처럼 신규 상태에서도 `id`가 존재하는 스키마에서는 이 판정이 깨진다. 해당 스키마는 `isNew`를 `signal<boolean>(false)`로 유지하고 `_refresh()` 내부에서 명시 세팅하며, snapshot 분기도 `this.isNew() ? undefined : obj.clone(this.data())`로 치환한다.
+- **Ctrl+S 경로 통일:** `hostDirectives` → `(sdSaveCommand)="onSaveButtonClick()"` → `formCtrl()?.requestSubmit()` → `<sd-form (formSubmit)="onSubmit()">`. 버튼 클릭과 단축키가 완전히 동일한 경로로 수렴한다.
+- **`setupCanDeactivate(() => this._checkIgnoreChanges())`** — 라우트 이탈 시 snapshot 대비 변경이 있으면 `confirm`으로 사용자 확인을 요청한다. [확장 C](./extension-c-modal-view.md)(modal 뷰)에서는 조건에 `viewType() === "modal" ||`를 추가하여 modal에서는 항상 이탈을 허용한다.
+- **`_checkIgnoreChanges`는 `_dataSnapshot == null`을 true로 취급** — 신규(snapshot 없음)이거나 아직 로드 전이면 이탈을 즉시 허용한다. snapshot이 있어도 `obj.equal`로 값이 동일하면 허용.
+
+> 공통 규칙(`mark` 오용 전반, `setupCanDeactivate` 호출 위치, `_sdSharedData.wait()` 조건, 시트 셀 `[inset]`/`[size]`, soft-delete 선택 기준)은 [레시피 공통 규칙](../_common-rules.md)을 참조한다.

package/claude/references/sd-simplysm-v14/angular/recipes/crud-detail/extension-b-delete-restore.md

@@ -0,0 +1,103 @@
+← [CRUD 상세폼 레시피 진입점](../crud-detail.md)
+
+# 확장 B: 삭제/복구 토글
+
+> **선행:** [확장 A: 편집/저장](./extension-a-edit-save.md)
+
+확장 A(편집/저장)를 전제로, 기존 레코드에 대한 **soft-delete 토글**(삭제/복구 버튼)을 추가한다. 도메인 타입에 `isDeleted: boolean` 필드를 추가하고, 삭제·복구 버튼은 최소 뼈대의 topbar에 `@if (!isNew() && canEdit())` 조건으로 배치한다. 뷰별 UI(modal 하단 바 / control 상단 바의 삭제 버튼)는 [확장 C](./extension-c-modal-view.md)/[확장 D](./extension-d-control-view.md)에서 추가로 처리한다.
+
+> **적용 조건: DB Table에 `isDeleted` 컬럼이 있는 경우에만.** `isDeleted` 컬럼이 없는 테이블은 물리 삭제(row DELETE)로 처리하며, 이 확장을 사용하지 않는다. → [공통 규칙: 삭제 방식은 DB 스키마에 따라 결정한다](../_common-rules.md#삭제-방식은-db-스키마에-따라-결정한다)
+
+**이 확장이 도입하는 요소:**
+
+- **imports:** `tablerEraser`, `tablerRestore`
+- **타입 확장:** `ICustomer.isDeleted: boolean` 필드 추가 + `data` 초기값·`_refresh` 빈 객체에 `isDeleted: false` 추가
+- **메서드:** `onDeleteButtonClick`, `onRestoreButtonClick`, `_toggleDelete(del: boolean)`
+- **템플릿:** topbar 내부(`canEdit()` 저장 버튼 뒤)에 `@if (!isNew() && canEdit())` 블록으로 삭제·복구 버튼 추가
+
+> **아래 코드 블록은 diff 조각이다.** 독립 실행 가능한 완성 클래스가 아니며, 선행 확장(A) 위에 번호 순서대로 삽입할 지점을 나타낸다. 그대로 컴파일되지 않는다.
+
+```typescript
+// 1) imports 추가
+import {
+  tablerAlertTriangle, tablerDeviceFloppy, tablerEraser, tablerRestore,
+} from "@ng-icons/tabler-icons";
+
+// 2) ICustomer 확장 — isDeleted 필드 추가
+interface ICustomer {
+  id: number | undefined;
+  name: string;
+  phone: string;
+  isDeleted: boolean;     // ← 추가
+  lastModifiedAt: DateTime | undefined;
+  lastModifiedBy: string | undefined;
+}
+
+// 3) data 초기값·_refresh 빈 객체에 isDeleted: false 추가
+protected readonly data = signal<ICustomer>({
+  id: undefined, name: "", phone: "",
+  isDeleted: false,       // ← 추가
+  lastModifiedAt: undefined, lastModifiedBy: undefined,
+});
+
+// 4) template — topbar에 삭제·복구 버튼 추가 (저장 버튼 뒤)
+template: `
+  <sd-topbar>
+    <h4>{{ viewTitle() }}</h4>
+    @if (canEdit()) {
+      <sd-button [theme]="'link-primary'" (click)="onSaveButtonClick()"> <!-- 저장 (확장 A) --> </sd-button>
+    }
+    @if (!isNew() && canEdit()) {
+      @if (data().isDeleted) {
+        <sd-button [theme]="'link-warning'" (click)="onRestoreButtonClick()">
+          <ng-icon [svg]="tablerRestore" /> 복구
+        </sd-button>
+      } @else {
+        <sd-button [theme]="'link-danger'" (click)="onDeleteButtonClick()">
+          <ng-icon [svg]="tablerEraser" /> 삭제
+        </sd-button>
+      }
+    }
+  </sd-topbar>
+`
+
+// 5) 메서드 추가
+protected async onDeleteButtonClick(): Promise<void> {
+  await this._toggleDelete(true);
+}
+
+protected async onRestoreButtonClick(): Promise<void> {
+  await this._toggleDelete(false);
+}
+
+private async _toggleDelete(del: boolean): Promise<void> {
+  if (this.busyCount() > 0) return;
+  if (!this.perms().includes("edit")) return;
+  if (del && !confirm("삭제하시겠습니까?")) return;
+
+  this.busyCount.update((v) => v + 1);
+  await this._sdToast.try(async () => {
+    // 앱별 ORM delete/restore — 예:
+    //   await this._appOrm.connectAsync(async (db) => {
+    //     await db.customer.where(...).update({ isDeleted: del });
+    //   });
+
+    this._sdToast.success(`${del ? "삭제" : "복구"}되었습니다.`);
+    await this._refresh();
+  });
+  this.busyCount.update((v) => v - 1);
+}
+
+// 6) 아이콘 추가
+protected readonly tablerEraser = tablerEraser;
+protected readonly tablerRestore = tablerRestore;
+```
+
+**포인트:**
+
+- **DB Table에 `isDeleted` 컬럼이 있는 경우의 삭제는 `isDeleted: true` 플래그 업데이트 soft-delete**로 구현한다 — 복구 기능·감사 이력·참조 무결성을 유지하기 위함. 서버는 `isDeleted: true` 레코드를 조회에서 기본 제외하고, 상세 폼에서는 복구 버튼으로 토글할 수 있다. `isDeleted` 컬럼이 없는 테이블은 이 확장을 사용하지 않고 물리 삭제(row DELETE)로 처리한다.
+- **삭제 confirm은 `_toggleDelete`에서 `del === true`일 때만** 호출한다. 복구는 확인 없이 즉시 수행.
+- **`isNew()` 신규 상태에서는 삭제·복구 버튼 노출 안 함** — DB에 저장되지 않은 레코드는 삭제 대상이 없으므로 `@if (!isNew() && canEdit())`로 감싼다.
+- **모달/컨트롤 뷰의 삭제 버튼은 [확장 C](./extension-c-modal-view.md)/[확장 D](./extension-d-control-view.md)에서 별도 배치** — topbar가 없는 뷰에서는 이 확장만으로는 삭제 UI가 보이지 않는다. [확장 C](./extension-c-modal-view.md)(modal 하단 바) / [확장 D](./extension-d-control-view.md)(control 상단 바)에서 동일 `_toggleDelete` 메서드를 재사용하여 배치한다.
+
+> 공통 규칙(삭제 방식 선택 기준, `mark` 오용, `setupCanDeactivate` 호출 위치 등)은 [레시피 공통 규칙](../_common-rules.md)을 참조한다.

package/claude/references/sd-simplysm-v14/angular/recipes/crud-detail/extension-c-modal-view.md

@@ -0,0 +1,198 @@
+← [CRUD 상세폼 레시피 진입점](../crud-detail.md)
+
+# 확장 C: modal 뷰
+
+> **선행:** [확장 A: 편집/저장](./extension-a-edit-save.md) + [확장 B: 삭제/복구 토글](./extension-b-delete-restore.md)
+
+확장 A(편집/저장) + 확장 B(삭제/복구)를 전제로, 동일 컴포넌트를 **modal 뷰**로도 재사용한다. `SdModalProvider.showAsync`로 띄우면 `viewType() === "modal"`로 자동 판정되며, 기존 `<sd-topbar>`를 `@if (viewType() === "page") { ... }`로 래핑하여 page 뷰 전용으로 돌리고, 모달에는 하단 액션 바(확인·취소·삭제·복구)를 추가한다. 모달은 `implements SdModalContentDef<boolean | undefined>`로 계약을 부착하여 호출 측이 저장/닫기 결과를 받을 수 있다.
+
+**이 확장이 도입하는 요소:**
+
+- **imports:** `output`, `TemplateRef`, `injectViewTypeSignal`, `type SdModalContentDef`, `SdActivatedModalProvider`, `SdDockContainer`, `SdDock`
+- **DI:** `_sdActivatedModal = inject(SdActivatedModalProvider, { optional: true })`
+- **계약:** `implements SdModalContentDef<boolean | undefined>`, `close = output<boolean | undefined>()`, `actionTplRef?: TemplateRef<any>` (필드 선언만 — `SdModal`이 setter 프록시로 감쌈)
+- **viewChild:** `_modalActionTpl = viewChild("modalActionTpl", { read: TemplateRef })`
+- **생성자 effect:** `effect(() => { this.actionTplRef = this._modalActionTpl(); })` (모달 헤더 우측 액션 슬롯 브릿지)
+- **파생:** `viewType = injectViewTypeSignal()` (`viewTitle`은 이미 `injectViewTitleSignal()`로 modal/page 자동 분기됨)
+- **setupCanDeactivate 조건 변경:** `() => this.viewType() === "modal" || this._checkIgnoreChanges()` — modal에서는 항상 true(이탈 허용)
+- **onSubmit / `_toggleDelete` 변경:** 성공 경로에 `this.close.emit(true)` 추가
+- **템플릿 교체 1:** 기존 `<sd-topbar>...</sd-topbar>`를 `@if (viewType() === "page") { <sd-topbar>...</sd-topbar> }`로 **래핑** (page 뷰 전용으로 돌림)
+- **템플릿:** topbar 내부 `<h4>{{ viewTitle() }}</h4>` 및 권한 경고의 viewTitle은 그대로 유지 (`injectViewTitleSignal()`이 modal/page 자동 분기)
+- **템플릿 추가:** `<sd-topbar-container>` 내부 main 래퍼(`<div class="flex-column fill">`)를 `<sd-dock-container>`로 감싸고, 그 내부에 `@if (viewType() === "modal" && canEdit())` 블록으로 `<sd-dock [position]="'bottom'">` 하단 액션 바(확인·취소·삭제·복구) 추가
+- **템플릿 추가:** `<sd-busy-container>` 바깥에 `<ng-template #modalActionTpl>`로 모달 우측 상단 액션 슬롯 정의 (필요 시 커스텀 액션 배치)
+
+> 상세: [`SdModalContentDef` 구현 패턴](../../provider-types/sd-modal-content-def.md#구현-패턴)
+
+> 상세: [`SdActivatedModalProvider` 사용법](../../providers/sd-activated-modal-provider.md#usage)
+
+> 상세: [`injectViewTypeSignal`](../../utils/inject-routing-signals.md#injectviewtypesignal)
+
+> 상세: [`<sd-dock> position="bottom"`](../../ui-layout/sd-dock.md)
+
+> **아래 코드 블록은 diff 조각이다.** 독립 실행 가능한 완성 클래스가 아니며, 선행 확장(A+B) 위에 번호 순서대로 삽입·교체할 지점을 나타낸다. 그대로 컴파일되지 않는다.
+
+```typescript
+// 1) imports 추가
+import {
+  ChangeDetectionStrategy, Component, computed, effect, inject, input, output, signal,
+  TemplateRef, untracked, viewChild, ViewEncapsulation,
+} from "@angular/core";
+import {
+  FormatPipe, injectPermsSignal,
+  injectViewTitleSignal, injectViewTypeSignal,
+  SdActivatedModalProvider, SdAnchor,
+  SdBusyContainer, SdButton, SdCommandDirective,
+  SdDock, SdDockContainer,
+  SdForm, type SdModalContentDef,
+  SdTextfield, SdToastProvider,
+  SdTopbar, SdTopbarContainer, setupCanDeactivate,
+} from "@simplysm/angular";
+
+// 2) @Component imports 배열에 SdAnchor / SdDockContainer / SdDock 추가
+
+// 3) DI 추가
+private readonly _sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
+
+// 4) 계약 부착 + viewChild + 파생 추가
+export class CustomerDetail implements SdModalContentDef<boolean | undefined> {
+  //== SdModalContentDef 요구 필드 ==
+  close = output<boolean | undefined>();
+  // actionTplRef는 SdModal이 setter 프록시로 감싸므로 필드 선언만으로 충분
+  actionTplRef?: TemplateRef<any>;
+
+  //== viewChild (modal 우측 상단 액션 브릿지) ==
+  private readonly _modalActionTpl = viewChild("modalActionTpl", { read: TemplateRef });
+
+  //== 파생 ==
+  protected readonly viewType = injectViewTypeSignal();
+  // viewTitle은 최소 뼈대에서 이미 injectViewTitleSignal()로 선언됨 — modal/page 자동 분기
+
+  // ... (이하 기존)
+}
+
+// 5) 생성자 — setupCanDeactivate 조건 변경 + actionTplRef effect 추가
+constructor() {
+  // 기존 초기 effect 동일...
+
+  // 변경: setupCanDeactivate 조건에 viewType() === "modal" || 추가
+  setupCanDeactivate(() => this.viewType() === "modal" || this._checkIgnoreChanges());
+
+  // 추가: 모달 헤더 우측 액션 슬롯 브릿지
+  effect(() => {
+    this.actionTplRef = this._modalActionTpl();
+  });
+}
+
+// 6) onSubmit / _toggleDelete 성공 경로에 close.emit(true) 추가
+protected async onSubmit(): Promise<void> {
+  // ...
+  await this._sdToast.try(async () => {
+    // ... (ORM upsert)
+    this._sdToast.success("저장되었습니다.");
+    this.close.emit(true);     // ← 추가 — modal 호출 측이 결과를 받는다
+    await this._refresh();
+  });
+  // ...
+}
+
+private async _toggleDelete(del: boolean): Promise<void> {
+  // ...
+  await this._sdToast.try(async () => {
+    // ... (ORM delete/restore)
+    this._sdToast.success(`${del ? "삭제" : "복구"}되었습니다.`);
+    this.close.emit(true);     // ← 추가
+  });
+  // ...
+}
+
+// 7) template — 기존 <sd-topbar>를 @if (viewType() === "page")로 래핑,
+//    main 래퍼를 <sd-dock-container>로 감싸고
+//    modal 하단 바 + <ng-template #modalActionTpl> 추가
+template: `
+  <sd-busy-container [busy]="busyCount() > 0">
+    @if (initialized()) {
+      @if (!perms().includes("use")) {
+        <!-- '{{ viewTitle() }}'에 대한 사용권한이 없습니다. -->
+      } @else {
+        <sd-topbar-container>
+          @if (viewType() === "page") {
+            <sd-topbar>
+              <h4>{{ viewTitle() }}</h4>
+              <!-- 저장/삭제/복구 (확장 A/B 동일) -->
+            </sd-topbar>
+          }
+
+          <sd-dock-container>
+            <!-- modal 하단 바: 확인/취소/삭제/복구 -->
+            @if (viewType() === "modal" && canEdit()) {
+              <sd-dock
+                [position]="'bottom'"
+                class="p-sm-default flex-row gap-sm bdt bdt-theme-gray-lightest"
+              >
+                @if (!isNew() && canEdit()) {
+                  @if (data().isDeleted) {
+                    <sd-button [size]="'sm'" [theme]="'warning'" (click)="onRestoreButtonClick()">
+                      복구
+                    </sd-button>
+                  } @else {
+                    <sd-button [size]="'sm'" [theme]="'danger'" (click)="onDeleteButtonClick()">
+                      삭제
+                    </sd-button>
+                  }
+                }
+                <div class="flex-fill flex-row gap-sm main-align-end">
+                  <sd-button [size]="'sm'" [theme]="'gray'" (click)="close.emit(undefined)">
+                    취소
+                  </sd-button>
+                  <sd-button [size]="'sm'" [theme]="'primary'" (click)="onSaveButtonClick()">
+                    확인
+                  </sd-button>
+                </div>
+              </sd-dock>
+            }
+
+            <!-- main: form + 최종수정 (확장 A/B 동일) -->
+            <div class="flex-column fill"> ... </div>
+          </sd-dock-container>
+        </sd-topbar-container>
+      }
+    }
+  </sd-busy-container>
+
+  <!-- 모달 헤더 우측 액션 슬롯. 필요 시 커스텀 액션을 배치한다.
+       SdModalProvider가 contentComponent.actionTplRef를 setter 프록시로 감싸 SdModal로 브릿지한다.
+       (packages/angular/src/core/modal/sd-modal.provider.ts:140-150) -->
+  <ng-template #modalActionTpl>
+    <!-- 커스텀 액션이 필요하면 여기에 배치 -->
+  </ng-template>
+`
+```
+
+**포인트:**
+
+- **modal 하단 바는 `[position]="'bottom'"` 반드시 명시**(`packages/angular/src/layout/dock/sd-dock.ts:97`). 기본값이 `"top"`이라 누락하면 상단에 쌓여 topbar 뒤에 겹친다.
+- **`actionTplRef` setter 프록시는 modal 뷰에서만 동작한다.** `SdModalProvider`는 모달 컨텐츠 컴포넌트 생성 시 `if ("actionTplRef" in contentRef.instance)`로 확인한 뒤 setter 프록시를 설치한다(`sd-modal.provider.ts:141`). page/control 뷰에서는 프록시가 설치되지 않으므로 `this.actionTplRef = ...` 할당이 인스턴스 필드에만 저장되고 부작용이 없다.
+- **`setupCanDeactivate`는 modal에서 true를 돌려 항상 이탈 허용**한다 — modal 자체에 취소 버튼이 있으므로 이중 confirm을 피한다. 페이지 뷰에서는 `_checkIgnoreChanges()`의 confirm 결과로 제어.
+- **modal 취소 버튼은 `close.emit(undefined)`**. 호출 측은 `undefined`를 "취소"로, `true`를 "저장/삭제 성공"으로 해석한다. boolean 대신 사용자 정의 결과 타입이 필요하면 `close = output<FooResult | undefined>()` + `implements SdModalContentDef<FooResult | undefined>`로 변경하고, 호출 측은 `const result = await sdModal.showAsync({ type: CustomerDetail, ... })`로 받는다.
+- **`viewTitle` 우선순위**: 모달 컴포넌트의 `title()` input이 세팅되어 있으면 그것을 우선, 없으면 라우트 기반 타이틀을 사용. `_sdSystemLog.writeAsync("warn", ...)`로 실패 시 로그 남김.
+- **[확장 D](./extension-d-control-view.md)(control 뷰)와 병행 가능** — 두 분기 블록(`@if (viewType() === "modal")` / `@if (viewType() === "control")`)이 상호 배타이므로 같은 `<sd-dock-container>` 내부에 나란히 둘 수 있다.
+
+## 🚫 흔한 실수 (Anti-patterns)
+
+> 공통 규칙(`mark` 오용, `setupCanDeactivate` / `injectViewTypeSignal()` 호출 위치, page 컴포넌트의 topbar 소유 등)은 [레시피 공통 규칙](../_common-rules.md)을 참조한다. 이 섹션은 **modal 뷰 확장 고유 실수**만 다룬다.
+
+### modal 하단 바의 `<sd-dock>`에 `[position]="'bottom'"`을 명시하지 않는다
+
+```typescript
+// ✅ [position]="'bottom'"을 명시하여 <sd-dock-container> 하단에 고정
+@if (viewType() === "modal" && canEdit()) {
+  <sd-dock
+    [position]="'bottom'"
+    class="p-sm-default flex-row gap-sm bdt bdt-theme-gray-lightest"
+  >
+    <!-- 확인/취소/삭제/복구 버튼 ... -->
+  </sd-dock>
+}
+```
+
+**근거**: `SdDock.position`의 기본값이 `"top"`이다(`packages/angular/src/layout/dock/sd-dock.ts:97`). 하단 액션 바 용도로 `<sd-dock>`을 도입할 때 `[position]`을 생략하면 `<sd-dock-container>`가 상단부터 dock을 쌓기 때문에 topbar 영역 뒤에 깔리고, topbar가 없는 modal 뷰에서도 "모달 하단 고정"이 깨진다. 타입 시스템은 기본값으로 통과시키므로 컴파일러·린터가 경고하지 않는다.

package/claude/references/sd-simplysm-v14/angular/recipes/crud-detail/extension-d-control-view.md

@@ -0,0 +1,109 @@
+← [CRUD 상세폼 레시피 진입점](../crud-detail.md)
+
+# 확장 D: control 뷰
+
+> **선행:** [확장 A: 편집/저장](./extension-a-edit-save.md) + [확장 B: 삭제/복구 토글](./extension-b-delete-restore.md)
+
+확장 A(편집/저장) + 확장 B(삭제/복구)를 전제로, 동일 컴포넌트를 **control 뷰**(마스터-디테일의 디테일 영역)로도 재사용한다. 마스터 화면이 `<app-customer-detail [itemId]="selectedId()" class="flex-fill">`처럼 컴포넌트 selector를 직접 삽입하면 `viewType() === "control"`로 자동 판정되어, 상단 바에 저장·삭제·복구 버튼이 가로로 배치된다. page 뷰의 topbar가 없고 modal 뷰의 하단 바가 없는 대신, main 영역 위에 `<sd-dock>` 상단 바가 놓인다.
+
+**이 확장이 도입하는 요소:**
+
+- **imports:** [확장 C](./extension-c-modal-view.md)에서 이미 도입된 `injectViewTypeSignal`, `SdDockContainer`, `SdDock`, `tablerDeviceFloppy`, `tablerEraser`, `tablerRestore`를 재사용. 확장 D를 확장 C 없이 단독 적용하는 경우 동일 imports를 신규 도입. `output` (`@angular/core`)
+- **파생:** `viewType = injectViewTypeSignal()` (확장 C 없이 단독 적용 시 신규 도입)
+- **output:** `submitted = output<boolean>()` — 저장/삭제/상태 변경 등 데이터 변경 성공 시 부모에게 목록 갱신을 알리는 신호. 확장 C의 `close` output(SdModalContentDef 계약, modal 닫기 결과)과는 **별개**
+- **템플릿 추가:** [확장 C](./extension-c-modal-view.md)가 도입한 `<sd-dock-container>` 내부에 `@if (viewType() === "control" && canEdit())` 블록으로 `<sd-dock>` 상단 바(저장·삭제·복구) 추가 — 확장 C의 modal 하단 바 블록과 나란히 배치
+
+> 상세: [`injectViewTypeSignal`](../../utils/inject-routing-signals.md#injectviewtypesignal)
+
+> 상세: [`<sd-dock> position 기본 "top"`](../../ui-layout/sd-dock.md)
+
+> **아래 코드 블록은 diff 조각이다.** 독립 실행 가능한 완성 클래스가 아니며, 선행 확장(A+B) 위에 번호 순서대로 삽입할 지점을 나타낸다. 그대로 컴파일되지 않는다.
+
+```typescript
+// 1) imports 추가 (확장 D를 확장 C 없이 단독 적용하는 경우)
+import { injectViewTypeSignal, SdDock, SdDockContainer } from "@simplysm/angular";
+
+// 2) 파생 + output 추가 (확장 C 없이 단독 적용 시)
+protected readonly viewType = injectViewTypeSignal();
+
+// control 뷰에서 부모(마스터 시트)에게 "데이터 변경됨 → 목록 갱신 필요"를 알리는 output.
+// 확장 C의 close output(SdModalContentDef 계약, modal 닫기 결과)과는 별개다.
+submitted = output<boolean>();
+
+// 3) onSubmit / _toggleDelete 성공 경로에 submitted.emit(true) 추가
+protected async onSubmit(): Promise<void> {
+  // ... (ORM upsert)
+  this._sdToast.success("저장되었습니다.");
+  await this._refresh();
+  this.submitted.emit(true);     // ← 추가
+}
+
+private async _toggleDelete(del: boolean): Promise<void> {
+  // ... (ORM delete/restore)
+  this._sdToast.success(`${del ? "삭제" : "복구"}되었습니다.`);
+  this.submitted.emit(true);     // ← 추가
+}
+
+// 4) 부모(마스터 시트)에서의 사용
+// <app-customer-detail [itemId]="selectedId()" (submitted)="headerSheet.doRefresh()" class="flex-fill" />
+
+// 5) template — <sd-dock-container> 내부(확장 C 블록과 나란히)에 control 뷰 상단 바 추가
+template: `
+  <sd-dock-container>
+    <!-- control 뷰 상단 바: 저장·삭제·복구 -->
+    @if (viewType() === "control" && canEdit()) {
+      <sd-dock class="p-default flex-row gap-default bdb bdb-theme-gray-lightest">
+        <sd-button [theme]="'primary'" (click)="onSaveButtonClick()">
+          <ng-icon [svg]="tablerDeviceFloppy" /> 저장 <small>(CTRL+S)</small>
+        </sd-button>
+        @if (!isNew() && canEdit()) {
+          @if (data().isDeleted) {
+            <sd-button [theme]="'warning'" (click)="onRestoreButtonClick()">
+              <ng-icon [svg]="tablerRestore" /> 복구
+            </sd-button>
+          } @else {
+            <sd-button [theme]="'danger'" (click)="onDeleteButtonClick()">
+              <ng-icon [svg]="tablerEraser" /> 삭제
+            </sd-button>
+          }
+        }
+      </sd-dock>
+    }
+
+    @if (viewType() === "modal" && canEdit()) {
+      <!-- modal 하단 바 (확장 C) -->
+    }
+
+    <!-- main: form + 최종수정 (확장 A/B 동일) -->
+  </sd-dock-container>
+`
+```
+
+**포인트:**
+
+- **`submitted` output으로 부모 목록을 갱신한다.** 저장·삭제·복구·상태 변경 등 데이터 변경이 성공하면 `this.submitted.emit(true)`로 부모 마스터 시트에 목록 갱신을 알린다. 부모는 `(submitted)="headerSheet.doRefresh()"`로 수신한다. 확장 C의 `close` output(SdModalContentDef 계약, modal 닫기 결과 반환)과는 **별개**의 output이다.
+- **control 뷰 = 마스터-디테일의 디테일 영역**. 마스터 화면이 `<app-customer-detail [itemId]="selectedId()" (submitted)="headerSheet.doRefresh()" class="flex-fill">`처럼 직접 삽입하여 좌측 리스트 선택에 따라 우측에 상세 폼을 표시한다. `injectViewTypeSignal()`은 `ActivatedRoute.component`의 selector와 호스트 `tagName`이 **다를 때** control로 판정한다(page는 일치, modal은 `SdActivatedModalProvider` 주입 시 우선).
+- **상단 바는 `[position]` 생략** — `<sd-dock>`의 `[position]` 기본값이 `"top"`이므로 명시하지 않는다. modal 하단 바와 달리 기본 동작을 그대로 쓴다.
+- **[확장 C](./extension-c-modal-view.md)(modal 뷰)와 병행 가능** — 두 분기 블록(`@if (viewType() === "control")` / `@if (viewType() === "modal")`)이 상호 배타이므로 같은 `<sd-dock-container>` 내부에 나란히 둬도 안전하다. [변형 확장 A~F 인덱스](../crud-detail.md#변형-확장-a-f-인덱스)가 이 조합을 수용한다.
+- **control 뷰에서는 `setupCanDeactivate`가 아무 동작 하지 않는다** — 라우트 guard도 모달 canDeactivateFn도 연결되지 않는다(`packages/angular/src/core/routing/setupCanDeactivate.ts:10-26`). 마스터 화면이 이동할 때의 이탈 확인은 마스터 화면이 자체적으로 처리한다.
+
+## 🚫 흔한 실수 (Anti-patterns)
+
+> 공통 규칙(topbar 소유권, `mark` 오용, `setupCanDeactivate` 호출 위치 등)은 [레시피 공통 규칙](../_common-rules.md)을 참조한다. 이 섹션은 **control 뷰 확장 고유 실수**만 다룬다.
+
+### control 뷰 분기에 자체 `<sd-topbar>`를 추가한다
+
+```typescript
+// ✅ control 분기에는 <sd-dock> 상단 바만 둔다. page가 소유한 topbar와
+//    중첩되지 않으며, 저장/삭제/복구 버튼을 가로로 배치한다.
+@if (viewType() === "control" && canEdit()) {
+  <sd-dock class="p-default flex-row gap-default bdb bdb-theme-gray-lightest">
+    <sd-button [theme]="'primary'" (click)="onSaveButtonClick()">
+      <ng-icon [svg]="tablerDeviceFloppy" /> 저장 <small>(CTRL+S)</small>
+    </sd-button>
+    <!-- 삭제/복구는 @if (!isNew() && canEdit()) 블록으로 (확장 B 조건 재사용) -->
+  </sd-dock>
+}
+```
+
+**근거**: control 뷰는 마스터 화면이 `<app-customer-detail [itemId]="..." />`처럼 디테일 영역으로 직접 삽입하는 구조다. 마스터 화면은 이미 `<sd-topbar-container>`와 `<sd-topbar>`를 소유하므로, 내부 컴포넌트가 동일 구조를 중첩하면 타이틀·액션 영역이 이중으로 렌더링되어 레이아웃이 깨진다. control 분기의 상단 액션 영역은 `<sd-dock-container>` 내부 `<sd-dock>`으로 구성한다. → [공통 규칙: page 컴포넌트가 `<sd-topbar-container>`와 `<sd-topbar>`를 소유한다](../_common-rules.md#page-컴포넌트가-sd-topbar-container와-sd-topbar를-소유한다)