@simplysm/angular 14.0.51 → 14.0.52

package/docs/recipes/crud-list/extension-a-inline-edit.md

@@ -1,410 +0,0 @@
-← [CRUD 리스트 레시피 진입점](../crud-list.md)
-
-# 확장 A: inline 편집/저장
-
-> **선행:** 없음 (최소 뼈대 §3에 직접 얹음)
-
-시트 셀을 **직접 편집**하고 상단 저장 버튼(또는 Ctrl+S)으로 **일괄 저장**한다. 최소 뼈대(§3)의 읽기 전용 셀을 `<sd-textfield [inset]="true" [size]="'sm'" [readonly]="!edit">`로 교체하고, `oneWayDiffs` 기반 변경 감지 + `_upsertItem` 일괄 실행을 추가한다.
-
-> **적용 조건:** 시트 셀을 **직접 편집**할 때 이 확장을 사용한다. 행 클릭 → 편집 모달로 수정하는 방식은 [확장 F: 모달 편집 모드](./extension-f-modal-edit.md)를 대신 얹는다. 두 확장은 **상호 배타**이며 동시에 적용하지 않는다.
-
-**이 확장이 도입하는 요소:**
-
-- **imports:** `computed`, `viewChild`, `oneWayDiffs`(side-effect import), `obj`, `ArgumentError`, `expr`, `FormatPipe`, `SdSharedDataSelect`, `SdItemOfTemplate`, `SdAnchor`(신규 행 삭제 아이콘), `setupCanDeactivate`, `type DateTime`, `tablerCirclePlus` / `tablerDeviceFloppy` / `tablerX` 아이콘
-- **DI:** `AppAuthProvider`, `AppSharedDataProvider`
-- **타입 확장:** `ICustomer`에 `id?`(신규 행용) / `categoryId?` / `lastModifiedAt?` / `lastModifiedBy?` 필드 추가
-- **권한 키 확장:** `injectPermsSignal` 두 번째 인자 `["use"]` → `["use", "edit"]`
-- **상태:** `_itemsSnapshot: ICustomer[]` (직전 `_refresh()` 시점의 items 깊은 복제), `sharedCategories = useSharedSignal("카테고리")`
-- **파생:** `diffs = computed(() => items().oneWayDiffs(_itemsSnapshot, "id"))`, `canEdit = computed(() => perms().includes("edit") && viewType() === "page")` — `perms()` 외에 `viewType()` 조건도 함께 확인하므로 computed로 wrapping한다. 단일 `perms().includes("...")` 검사만 필요한 곳에서는 인라인이 기본 패턴이다
-- **hostDirectives·host:** outputs에 `sdSaveCommand` 추가, host에 `(sdSaveCommand)="onSaveButtonClick()"` 바인딩 추가
-- **viewChild:** `formCtrl = viewChild<SdForm>("formCtrl")` (Ctrl+S → form submit 경로 공유용)
-- **메서드:** `onSaveButtonClick`, `onSubmit`, `onAddItemButtonClick`, `onRemoveNewItemButtonClick`, `_upsertItem`, `_checkIgnoreChanges`, `getIsItemChanged`
-- **생성자:** `setupCanDeactivate(() => this._checkIgnoreChanges())` 추가
-- **템플릿:** topbar `@if (canEdit())` 블록으로 "저장" 버튼 추가, 필터 dock 아래 inline 도구 dock("등록" 버튼) 추가, 시트 셀을 inline 편집 컨트롤(`<sd-textfield>` / `<sd-shared-data-select>`)로 교체, 시트를 `<sd-form #formCtrl (formSubmit)="onSubmit()">`로 감쌈, id 컬럼 신규 행용 `<sd-anchor>` 제거 버튼 추가
-- **_refresh 변경:** 말미에 `_itemsSnapshot = obj.clone(r.items)` 한 줄 추가
-- **onRefreshButtonClick 변경:** 선두에 `if (!this._checkIgnoreChanges()) return;` 추가
-
-> **아래 코드 블록은 diff 조각이다.** 독립 실행 가능한 완성 클래스가 아니며, 최소 뼈대 위에 번호(1)·2)·3)…) 순서대로 삽입·교체할 지점을 나타낸다. 그대로 컴파일되지 않는다.
-
-```typescript
-// 1) imports 교체 — @simplysm/angular에 {SdAnchor, setupCanDeactivate, SdSharedDataSelect, SdItemOfTemplate, FormatPipe, viewChild 등}을 추가.
-//    @simplysm/core-common에 {ArgumentError, type DateTime, obj}를 추가. @simplysm/orm-common에서 {expr}를 가져온다.
-//    oneWayDiffs는 @simplysm/core-common의 side-effect import로 Array.prototype을 확장하므로 `import "@simplysm/core-common";` 한 줄만으로 활성화된다.
-import { NgIcon } from "@ng-icons/core";
-import {
-  tablerAlertTriangle, tablerCirclePlus, tablerDeviceFloppy,
-  tablerRefresh, tablerSearch, tablerX,
-} from "@ng-icons/tabler-icons";
-import {
-  ChangeDetectionStrategy, Component, computed, effect, inject, signal, untracked,
-  viewChild, ViewEncapsulation,
-} from "@angular/core";
-import { ArgumentError, type DateTime, obj, str } from "@simplysm/core-common";
-import { expr } from "@simplysm/orm-common";
-import {
-  FormatPipe, injectPermsSignal, injectViewTitleSignal, injectViewTypeSignal, mark,
-  SdAnchor, SdBusyContainer, SdButton, SdCommandDirective, SdDock, SdDockContainer,
-  SdForm, SdItemOfTemplate, SdSharedDataSelect, SdSheet, SdSheetColumn, SdSheetColumnCellTemplate,
-  SdTextfield, SdToastProvider, SdTopbar, SdTopbarContainer,
-  setupCanDeactivate, type SortingDef,
-} from "@simplysm/angular";
-// 앱별 대체: ORM + 공유 데이터 + 인증 provider / DbContext.
-import { AppOrmProvider, AppSharedDataProvider, useSharedSignal } from "@adtek/client-common";
-import type { MainDbContext } from "@adtek/db-main";
-import { AppAuthProvider } from "../../../providers/AppAuthProvider";
-
-// 2) ICustomer 확장 — 편집 가능한 필드(선택적 신규 id 포함 / 카테고리 / 감사 필드)
-interface IFilter {
-  searchText?: string;
-}
-
-interface ICustomer {
-  id?: number;                  // 신규 행은 undefined (diff의 "create" 타입 판정 근거)
-  name: string;                 // 필수 — upsert 시 non-null 단정이 불필요해진다
-  phone?: string;
-  categoryId?: number;
-  lastModifiedAt?: DateTime;    // 서버 감사 필드 — 신규 행엔 없음
-  lastModifiedBy?: string;
-}
-
-// 3) @Component — imports 배열에 SdAnchor/SdSharedDataSelect/SdItemOfTemplate/FormatPipe 추가.
-//    hostDirectives outputs에 "sdSaveCommand" 추가. host에 (sdSaveCommand) 바인딩 추가.
-@Component({
-  // ...selector/cd/encapsulation/standalone 동일
-  imports: [
-    SdBusyContainer, SdTopbarContainer, SdTopbar,
-    SdDockContainer, SdDock,
-    SdForm, SdSheet, SdSheetColumn, SdSheetColumnCellTemplate,
-    SdButton, SdAnchor, SdTextfield,
-    SdSharedDataSelect, SdItemOfTemplate,
-    NgIcon, FormatPipe,
-  ],
-  hostDirectives: [
-    { directive: SdCommandDirective, outputs: ["sdRefreshCommand", "sdSaveCommand"] },
-  ],
-  host: {
-    "(sdRefreshCommand)": "onRefreshButtonClick()",
-    "(sdSaveCommand)": "onSaveButtonClick()",
-  },
-  // template: 아래 7)에서 상세
-})
-
-// 4) DI 추가
-private readonly _appAuth = inject(AppAuthProvider);
-private readonly _appSharedData = inject(AppSharedDataProvider);
-
-// 5) 권한·공유 데이터·상태·파생 추가
-SHARED_DATA_KEY = "고객" as const;
-perms = injectPermsSignal(["sales.customer"], ["use", "edit"]);
-canEdit = computed(() => this.perms().includes("edit") && this.viewType() === "page");
-
-sharedCategories = useSharedSignal("카테고리");
-
-private _itemsSnapshot: ICustomer[] = [];
-diffs = computed(() => this.items().oneWayDiffs(this._itemsSnapshot, "id"));
-
-filter = signal<IFilter>({});
-lastFilter = signal<IFilter>({});
-
-// viewChild (Ctrl+S → form submit 경로 공유)
-formCtrl = viewChild<SdForm>("formCtrl");
-
-// 6) 생성자에 setupCanDeactivate 추가 + _refresh에 snapshot 갱신
-constructor() {
-  // 기존 초기 effect는 동일...
-  setupCanDeactivate(() => this._checkIgnoreChanges());
-}
-
-getIsItemChanged(item: ICustomer): boolean {
-  if (item.id == null) return true;
-  return this.diffs().some((diff) => diff.item.id === item.id);
-}
-
-// 7) template — topbar에 "저장" 버튼, 시트 셀을 inline 편집으로 교체,
-//    시트를 <sd-form #formCtrl (formSubmit)="onSubmit()">로 감싼다.
-template: `
-  <sd-busy-container [busy]="busyCount() > 0">
-    @if (initialized()) {
-      @if (!perms().includes("use")) { <!-- 경고 동일 --> }
-      @else {
-        <sd-topbar-container>
-          @if (viewType() === "page") {
-            <sd-topbar>
-              <h4>{{ viewTitle() }}</h4>
-              <sd-button [theme]="'link-info'" (click)="onRefreshButtonClick()">
-                <ng-icon [svg]="tablerRefresh" /> 새로고침 <small>(CTRL+ALT+L)</small>
-              </sd-button>
-              @if (canEdit()) {
-                <sd-button [theme]="'link-primary'" (click)="onSaveButtonClick()">
-                  <ng-icon [svg]="tablerDeviceFloppy" /> 저장 <small>(CTRL+S)</small>
-                </sd-button>
-              }
-            </sd-topbar>
-          }
-
-          <sd-dock-container>
-            <sd-dock class="p-default">
-              <sd-form (formSubmit)="onFilterSubmit()">
-                <div class="form-box-inline">
-                  <div class="form-box-item">
-                    <sd-button [type]="'submit'" [theme]="'info'"><ng-icon [svg]="tablerSearch" /> 조회</sd-button>
-                  </div>
-                  <div class="form-box-item">
-                    <label>검색어</label>
-                    <sd-textfield [type]="'text'" [placeholder]="'이름/전화번호'"
-                      [(value)]="filter().searchText" (valueChange)="mark(filter)" />
-                  </div>
-                </div>
-              </sd-form>
-            </sd-dock>
-
-            <!-- 도구 (page 뷰에서만) — 확장 B/G 등이 이 dock에 버튼을 추가한다 -->
-            @if (canEdit() && viewType() === "page") {
-              <sd-dock class="flex-row gap-sm p-xs-default">
-                <sd-button [size]="'sm'" [theme]="'link-primary'" (click)="onAddItemButtonClick()">
-                  <ng-icon [svg]="tablerCirclePlus" /> 등록
-                </sd-button>
-              </sd-dock>
-            }
-
-            <!-- 시트를 일괄 저장용 <sd-form>으로 감싼다. #formCtrl는 Ctrl+S 경로 공유 -->
-            <sd-form #formCtrl (formSubmit)="onSubmit()" class="block fill p-default pt-0">
-              <sd-sheet
-                [key]="'customer-list-sheet'"
-                [items]="items()"
-                [(currentPage)]="page"
-                [totalPageCount]="pageLength()"
-                [(sorts)]="sortingDefs"
-                [trackByFn]="trackByFn"
-              >
-                <!-- id 컬럼: 신규 행이면 <sd-anchor>로 제거 버튼 -->
-                <sd-sheet-column [fixed]="true" [key]="'id'" [header]="'#'">
-                  <ng-template [cell]="items()" let-item="item">
-                    <div class="p-xs-sm"
-                      [class.tx-right]="item.id"
-                      [style.background]="getIsItemChanged(item) ? 'yellow' : ''">
-                      @if (item.id) {
-                        {{ item.id }}
-                      } @else if (canEdit()) {
-                        <sd-anchor (click)="onRemoveNewItemButtonClick(item)">
-                          <ng-icon [svg]="tablerX" />
-                        </sd-anchor>
-                      }
-                    </div>
-                  </ng-template>
-                </sd-sheet-column>
-
-                <!-- 이름/전화번호: inline 편집 가능 — [inset]/[size]/[readonly]="!edit" -->
-                <sd-sheet-column [key]="'name'" [header]="'이름'">
-                  <ng-template [cell]="items()" let-item="item" let-edit="edit">
-                    <sd-textfield
-                      [type]="'text'" [inset]="true" [size]="'sm'" [required]="true"
-                      [disabled]="!canEdit()" [readonly]="!edit"
-                      [(value)]="item.name" (valueChange)="mark(items)" />
-                  </ng-template>
-                </sd-sheet-column>
-
-                <sd-sheet-column [key]="'phone'" [header]="'전화번호'">
-                  <ng-template [cell]="items()" let-item="item" let-edit="edit">
-                    <sd-textfield
-                      [type]="'text'" [inset]="true" [size]="'sm'"
-                      [disabled]="!canEdit()" [readonly]="!edit"
-                      [(value)]="item.phone" (valueChange)="mark(items)" />
-                  </ng-template>
-                </sd-sheet-column>
-
-                <!-- 카테고리: <sd-shared-data-select> + <ng-template [itemOf]> -->
-                <sd-sheet-column [key]="'categoryId'" [header]="'카테고리'">
-                  <ng-template [cell]="items()" let-item="item">
-                    <sd-shared-data-select
-                      [inset]="true" [size]="'sm'" [disabled]="!canEdit()"
-                      [items]="sharedCategories.items()"
-                      [(value)]="item.categoryId" (valueChange)="mark(items)">
-                      <ng-template [itemOf]="sharedCategories.items()" let-cat>
-                        {{ cat.name }}
-                      </ng-template>
-                    </sd-shared-data-select>
-                  </ng-template>
-                </sd-sheet-column>
-
-                <!-- 수정일시/수정자: [hidden]="true" 기본 숨김 -->
-                <sd-sheet-column [key]="'lastModifiedAt'" [header]="'수정일시'" [hidden]="true">
-                  <ng-template [cell]="items()" let-item="item">
-                    <div class="p-xs-sm tx-center">{{ item.lastModifiedAt | format: "yyyy-MM-dd HH:mm" }}</div>
-                  </ng-template>
-                </sd-sheet-column>
-                <sd-sheet-column [key]="'lastModifiedBy'" [header]="'수정자'" [hidden]="true">
-                  <ng-template [cell]="items()" let-item="item">
-                    <div class="p-xs-sm tx-center">{{ item.lastModifiedBy }}</div>
-                  </ng-template>
-                </sd-sheet-column>
-              </sd-sheet>
-            </sd-form>
-          </sd-dock-container>
-        </sd-topbar-container>
-      }
-    }
-  </sd-busy-container>
-`
-
-// 8) 메서드 추가
-onSaveButtonClick(): void {
-  this.formCtrl()?.requestSubmit();
-}
-
-async onSubmit(): Promise<void> {
-  if (this.busyCount() > 0) return;
-
-  const diffs = this.diffs();
-  if (diffs.length === 0) {
-    this._sdToast.info("변경사항이 없습니다.");
-    return;
-  }
-
-  this.busyCount.update((v) => v + 1);
-  await this._sdToast.try(async () => {
-    const changedIds: number[] = [];
-    await this._appOrm.connectAsync(async (db) => {
-      for (const diff of diffs) {
-        changedIds.push(await this._upsertItem(
-          db, diff.item, diff.type === "create" ? "등록" : "수정",
-        ));
-      }
-    });
-    await this._appSharedData.emitAsync(this.SHARED_DATA_KEY, changedIds);
-    this._sdToast.success("저장되었습니다.");
-    await this._refresh();
-  });
-  this.busyCount.update((v) => v - 1);
-}
-
-onAddItemButtonClick(): void {
-  this.items.update((list) => [{}, ...list]);
-}
-
-onRemoveNewItemButtonClick(item: ICustomer): void {
-  this.items.update((list) => list.filter((it) => it !== item));
-}
-
-// 9) onRefreshButtonClick / _refresh에 변경 감지·스냅샷 갱신 추가
-onRefreshButtonClick(): void {
-  if (this.busyCount() > 0) return;
-  if (!this.perms().includes("use")) return;
-  if (!this._checkIgnoreChanges()) return;
-  mark(this.lastFilter);
-}
-
-private _checkIgnoreChanges(): boolean {
-  return this.diffs().length === 0 || confirm("변경사항이 있습니다. 무시하고 진행하시겠습니까?");
-}
-
-private async _refresh(): Promise<void> {
-  const r = await this._search(true);
-  this.items.set(r.items);
-  this.pageLength.set(r.pageLength);
-  this._itemsSnapshot = obj.clone(r.items);    // ← snapshot 갱신
-}
-
-// 10) _search의 where절·select에 카테고리/감사 필드 반영 + _upsertItem 추가
-private async _search(usePagination: boolean): Promise<{ items: ICustomer[]; pageLength: number }> {
-  const filter = this.lastFilter();
-  const sortingDefs = this.sortingDefs();
-  const page = this.page();
-
-  return this._appOrm.connectAsync(async (db) => {
-    let qr1 = db.customer();
-    if (!str.isNullOrEmpty(filter.searchText)) {
-      qr1 = qr1.search((item) => [item.name, item.phone], filter.searchText);
-    }
-
-    const pageLength = usePagination ? Math.ceil((await qr1.count()) / 50) : 0;
-
-    let qr2 = qr1.joinLastDataLog().select((item) => ({
-      id: item.id, name: item.name, phone: item.phone, categoryId: item.categoryId,
-      lastModifiedAt: item.lastDataLog?.dateTime,
-      lastModifiedBy: item.lastDataLog?.userName,
-    }));
-
-    for (const s of sortingDefs) qr2 = qr2.orderBy(s.key, s.desc ? "DESC" : "ASC");
-    if (!sortingDefs.some((s) => s.key === "name")) qr2 = qr2.orderBy((item) => item.name);
-    if (usePagination) qr2 = qr2.limit(page * 50, 50);
-
-    const items = await qr2.execute();
-    return { items, pageLength };
-  });
-}
-
-private async _upsertItem(
-  db: MainDbContext, item: ICustomer, logType: string,
-): Promise<number> {
-  if (await db.customer().where((c) => [
-    expr.eq(c.name, item.name),
-    expr.not(expr.eq(c.id, item.id)),
-  ]).exists()) {
-    throw new ArgumentError("동일한 명칭이 이미 등록되어 있습니다.", { 명칭: item.name });
-  }
-
-  const upsertResult = await db.customer()
-    .where((c) => [expr.eq(c.id, item.id)])
-    .upsert(() => ({
-      name: item.name, phone: item.phone, categoryId: item.categoryId,
-    }), ["id"]);
-  const upsertId = upsertResult[0].id;
-
-  await db.customer().insertDataLogAsync({
-    type: logType, itemId: upsertId, valueJson: undefined,
-    userId: this._appAuth.authInfo()!.user.id,
-  });
-
-  return upsertId;
-}
-```
-
-**포인트:**
-
-- **`diffs = computed(() => items.oneWayDiffs(_itemsSnapshot, "id"))`는 변경 감지 signal**. 템플릿(`getIsItemChanged`)·호출부(`onSubmit` / `_checkIgnoreChanges`) 모두에서 `this.diffs()`로 참조한다. `_itemsSnapshot`은 `obj.clone(r.items)`로 `_refresh()` 시점마다 깊은 복제로 갱신한다 (얕은 참조 대입은 cell mutation이 snapshot까지 오염시켜 비교가 실패한다).
-- **`oneWayDiffs`는 delete를 다루지 않는다.** 반환 `type`은 `"create" | "update" | "same"`만 있다(`packages/core-common/src/extensions/arr-ext.types.ts:206`). 상세 처리 경로는 아래 [🚫 흔한 실수](#items-배열에서-기존-row를-물리-제거한다) 참조.
-- **시트 셀 내부 컨트롤은 `[inset]="true" [size]="'sm'"` 명시 필수.** 본 확장에서 inline 편집으로 교체되는 `<sd-textfield>` / `<sd-shared-data-select>`에 모두 적용한다. 상세·예외 케이스는 [공통 규칙: 시트 셀 `[inset]/[size]`](../_common-rules.md#시트-셀-내부-컨트롤에-insettrue-sizesm을-명시한다) 참조.
-- **`let-edit="edit"` + `[readonly]="!edit"` + `[disabled]="!canEdit()"` 3종 바인딩**으로 (a) 전체 권한 / (b) 개별 행 편집 모드 분리 제어. 시트가 제공하는 편집 모드 토글을 사용하지 않는다면 `[readonly]="!canEdit()"`만 써도 된다.
-- **`canEdit = computed(() => perms().includes("edit") && viewType() === "page")`**: edit 권한이 있어도 modal(선택 모달·조회 전용 modal) 뷰에서는 항상 false. 확장 D/E 적용 시 inline 편집이 자동으로 꺼진다.
-- **`setupCanDeactivate(() => this._checkIgnoreChanges())`**: 라우트 이탈 시 `diffs().length > 0`이면 `confirm`으로 사용자 확인 후 true/false를 리턴한다. 내부에서 `inject()`를 사용하므로 호출 위치는 생성자·필드 이니셜라이저로 제한된다 — 동일 제약을 다루는 [공통 규칙: `inject()` 의존 함수 호출 시점](../_common-rules.md#injectviewtypesignal은-생성자-또는-필드-이니셜라이저에서만-호출한다) 참조.
-- **Ctrl+S 경로 통일:** `hostDirectives` → `(sdSaveCommand)="onSaveButtonClick()"` → `formCtrl()?.requestSubmit()` → `<sd-form (formSubmit)="onSubmit()">`. 상단 "저장" 버튼 클릭과 완전히 동일한 경로로 수렴한다.
-- **신규 행 삽입:** `this.items.update((list) => [{}, ...list])`. id=undefined이면 snapshot에 존재하지 않으므로 `diffs`에서 `type: "create"`로 잡힌다. `getIsItemChanged(item)`은 `item.id == null`일 때 true를 반환 — 노란 배경 하이라이트.
-- **`(valueChange)="mark(items)"`는 OnPush 통지 용도.** 저장 여부를 `mark` 호출로 판정하지 않는다 (변경 감지는 `diffs().length`가 담당). 상세는 [공통 규칙: `mark(sig)`를 '저장 감지' 수단으로 사용하지 않는다](../_common-rules.md#marksig를-저장-감지-수단으로-사용하지-않는다) 참조.
-- **`_upsertItem`의 중복 명칭 검사**: `expr.not(expr.eq(c.id, item.id))`로 자기 자신 제외. `isDeleted` 컬럼이 있는 테이블에서는 `expr.eq(c.isDeleted, false)` 조건을 추가하여 soft-delete된 동일 명칭은 허용할 수 있다.
-- **`insertDataLogAsync`로 감사 로그 기록**: `type` 필드에 "등록" / "수정" / "엑셀업로드"(확장 G) 등 맥락 구분 문자열. `_refresh` 이후 `joinLastDataLog()`로 `lastModifiedAt` / `lastModifiedBy` 표시.
-
-**🚫 흔한 실수**
-
-> 공통 규칙(`mark` 저장 감지 오해, `setupCanDeactivate` 호출 위치, 시트 셀 `[inset]/[size]` 등)은 [레시피 공통 규칙](../_common-rules.md)을 참조한다. 본 섹션은 **inline 편집 확장 고유 실수**만 다룬다.
-
-### `items` 배열에서 기존 row를 물리 제거한다
-
-```typescript
-// ❌ 기존 row를 배열에서 제거 — oneWayDiffs는 delete를 반환하지 않으므로
-//    저장 시 서버는 이 row가 사라진 사실을 감지하지 못한다.
-onDeleteRow(item: ICustomer): void {
-  this.items.update((list) => list.filter((it) => it !== item));
-}
-
-// ✅ 삭제 의사는 isDeleted 플래그로 표현 → diff의 type: "update"로 전송
-onDeleteRow(item: ICustomer): void {
-  this.items.update((list) => list.map(
-    (it) => it.id === item.id ? { ...it, isDeleted: true } : it,
-  ));
-}
-
-// ✅ 예외: 신규 행(id == null)은 저장 포기 시 물리 제거해도 된다
-//   — snapshot에 존재하지 않으므로 diff 자체가 발생하지 않는다.
-onRemoveNewItemButtonClick(item: ICustomer): void {
-  this.items.update((list) => list.filter((it) => it !== item));
-}
-```
-
-**근거**: `oneWayDiffs`의 반환 `type`은 `"create" | "update" | "same"` 3종뿐이며 delete를 다루지 않는다(`packages/core-common/src/extensions/arr-ext.types.ts:206`). 기존 row를 화면에서 제거하면 diff가 발생하지 않아 서버 저장 경로를 우회한다. soft-delete 경로는 [확장 B: 선택 기능 + 선택 삭제/복구](./extension-b-selection.md) / [확장 C: inline 삭제/복구](./extension-c-inline-delete.md)가 전담한다. `isDeleted` 컬럼이 없는 테이블은 이 확장을 사용하지 않는다 — [공통 규칙: 삭제 방식](../_common-rules.md#삭제-방식은-db-스키마에-따라-결정한다) 참조.
-
-## Cross-reference
-
-- 진입점: [crud-list.md](../crud-list.md)
-- 다음 확장: [확장 B: 선택 기능 + 선택 삭제/복구](./extension-b-selection.md) (이 확장 위에 누적)
-- 관련 확장: [확장 F: 모달 편집 모드](./extension-f-modal-edit.md) (이 확장과 상호 배타)

package/docs/recipes/crud-list/extension-b-selection.md

@@ -1,226 +0,0 @@
-← [CRUD 리스트 레시피 진입점](../crud-list.md)
-
-# 확장 B: 선택 기능 + 선택 삭제/복구
-
-> **선행:** [확장 A: inline 편집/저장](./extension-a-inline-edit.md)
-
-시트에 체크박스 기반 선택 기능을 추가하고, 선택된 행에 대한 "선택 삭제 / 선택 복구" 버튼 바를 상단에 배치한다. 확장 A(inline 편집)가 도입한 `canEdit` / `SHARED_DATA_KEY` / `_appAuth` / `_appSharedData` 등을 그대로 재사용하며, 본 확장이 `isDeleted` 플래그 / `isIncludeDeleted` 필터 / `getItemCellStyleFn`(삭제 취소선)을 도입한다.
-
-> **적용 조건:** DB Table에 `isDeleted` 컬럼이 있는 경우에만 사용한다. 컬럼이 없는 테이블은 물리 삭제(row DELETE)로 처리하며 이 확장을 사용하지 않는다 → [공통 규칙: 삭제 방식](../_common-rules.md#삭제-방식은-db-스키마에-따라-결정한다).
-
-**이 확장이 도입하는 요소:**
-
-- **imports:** `SdCheckbox` (필터 "삭제항목 포함" 체크박스), `tablerEraser`, `tablerRestore`
-- **타입 확장:** `IFilter`에 `isIncludeDeleted: boolean` 추가, `ICustomer`에 `isDeleted: boolean` 추가
-- **상태:** `selectedItems = signal<ICustomer[]>([])`, `filter`/`lastFilter` 기본값에 `isIncludeDeleted: false` 추가
-- **파생:** `hasSelectedDeleted`, `hasSelectedNotDeleted`, `getItemCellStyleFn` (삭제 행 취소선)
-- **메서드:** `onToggleDeleteItemsButtonClick(del: boolean)` — confirm → DB `update` → `emitAsync` → 토스트 → `_refresh`
-- **템플릿:** 필터 dock에 "삭제항목 포함" 체크박스 추가, 확장 A 도구 dock("등록" 버튼 우측)에 "선택 삭제 / 선택 복구" 버튼 추가, `<sd-sheet>`에 `[selectMode]="'multi'"` + `[(selectedItems)]` + `[getItemCellStyleFn]` 바인딩 추가
-- **_search 변경:** `isIncludeDeleted` 필터에 따른 `isDeleted` where절 추가, select에 `isDeleted` 필드 추가
-- **_upsertItem 변경:** upsert 데이터에 `isDeleted: item.isDeleted` 추가, 중복 검사에 `expr.eq(c.isDeleted, false)` 조건 추가
-- **onAddItemButtonClick 변경:** 신규 행 리터럴에 `isDeleted: false` 포함
-- **_refresh 변경:** 말미에 "현재 페이지에 남아 있는 항목만 `selectedItems` 유지" 로직 추가 — 페이지 이동 시 선택 유지를 위해
-
-> 상세: [`<sd-sheet> selectMode/selectedItems`](../../ui-data/sd-sheet.md)
-
-> **아래 코드 블록은 diff 조각이다.** 독립 실행 가능한 완성 클래스가 아니며, 선행 확장(A) 위에 번호 순서대로 삽입·교체할 지점을 나타낸다. 그대로 컴파일되지 않는다.
-
-```typescript
-// 0) imports 추가 — SdCheckbox, tablerEraser, tablerRestore
-// 타입 확장 — IFilter에 isIncludeDeleted, ICustomer에 isDeleted 추가
-interface IFilter {
-  searchText?: string;
-  isIncludeDeleted: boolean;   // ← 추가
-}
-
-interface ICustomer {
-  // ...기존 필드...
-  isDeleted: boolean;           // ← 추가
-}
-
-// filter/lastFilter 기본값에 isIncludeDeleted 추가
-filter = signal<IFilter>({ isIncludeDeleted: false });
-lastFilter = signal<IFilter>({ isIncludeDeleted: false });
-
-// onAddItemButtonClick — 신규 행에 isDeleted: false 포함
-onAddItemButtonClick(): void {
-  this.items.update((list) => [{ isDeleted: false }, ...list]);
-}
-
-// 1) 상태·파생 추가
-selectedItems = signal<ICustomer[]>([]);
-
-hasSelectedDeleted = computed(() => this.selectedItems().some((it) => it.isDeleted));
-hasSelectedNotDeleted = computed(() => this.selectedItems().some((it) => !it.isDeleted));
-
-// 삭제 행 취소선 스타일
-getItemCellStyleFn = (item: ICustomer): string | undefined =>
-  item.isDeleted ? "text-decoration: line-through;" : undefined;
-
-// 2) _search — isIncludeDeleted 필터 + select에 isDeleted 추가
-// (기존 _search의 qr1 뒤에 추가)
-if (!filter.isIncludeDeleted) {
-  qr1 = qr1.where((item) => [expr.eq(item.isDeleted, false)]);
-}
-// select에 isDeleted 추가:
-//   isDeleted: item.isDeleted,
-
-// _upsertItem — upsert 데이터에 isDeleted 추가, 중복 검사에 isDeleted 조건 추가
-// 중복 검사: expr.eq(c.isDeleted, false) 조건 추가
-// upsert: isDeleted: item.isDeleted 추가
-
-// 3) 선택 삭제/복구 메서드 — confirm → 즉시 DB 반영 → refresh → 토스트
-async onToggleDeleteItemsButtonClick(del: boolean): Promise<void> {
-  if (!confirm(del ? "정말 삭제하시겠습니까?" : "정말 복구하시겠습니까?")) return;
-
-  this.busyCount.update((v) => v + 1);
-  await this._sdToast.try(async () => {
-    const targets = this.selectedItems().filter((it) => it.id != null);
-    await this._appOrm.connectAsync(async (db) => {
-      for (const item of targets) {
-        await db.customer()
-          .where((c) => [expr.eq(c.id, item.id!)])
-          .update(() => ({ isDeleted: del }));
-
-        await db.customer().insertDataLogAsync({
-          type: del ? "삭제" : "복구",
-          itemId: item.id!,
-          valueJson: undefined,
-          userId: this._appAuth.authInfo()!.user.id,
-        });
-      }
-    });
-    await this._appSharedData.emitAsync(
-      this.SHARED_DATA_KEY,
-      targets.map((it) => it.id!),
-    );
-    this._sdToast.success(`${del ? "삭제" : "복구"}되었습니다.`);
-    await this._refresh();
-  });
-  this.busyCount.update((v) => v - 1);
-}
-
-// 4) _refresh 재정의 — 확장 A의 _refresh 본문에 "선택 유지 블록"만 삽입한다.
-//    삽입 위치: items/pageLength 세팅 후, _itemsSnapshot 갱신 전.
-//    다른 줄(r.items 세팅, _itemsSnapshot 갱신)은 확장 A와 동일하며 여기서 다시 쓰지 않는다.
-private async _refresh(): Promise<void> {
-  const r = await this._search(true);
-  this.items.set(r.items);
-  this.pageLength.set(r.pageLength);
-
-  // ── 확장 B 추가 블록 시작 ──
-  // 현재 페이지에 남아 있는 항목만 선택 유지
-  const currKeys = new Set(r.items.map((it) => this.trackByFn(it)));
-  this.selectedItems.update((sel) => sel.filter((it) => currKeys.has(this.trackByFn(it))));
-  // ── 확장 B 추가 블록 끝 ──
-
-  this._itemsSnapshot = obj.clone(r.items);
-}
-
-// template — 필터에 "삭제항목 포함" 체크박스, 도구 dock에 선택 삭제/복구 버튼,
-//            <sd-sheet>에 selectMode + selectedItems + getItemCellStyleFn 바인딩 추가
-`
-  <sd-dock class="p-default">
-    <sd-form (formSubmit)="onFilterSubmit()">
-      <div class="form-box-inline">
-        <!-- ...기존 필터 필드... -->
-        <div class="form-box-item">
-          <sd-checkbox [(value)]="filter().isIncludeDeleted" (valueChange)="mark(filter)">
-            삭제항목 포함
-          </sd-checkbox>
-        </div>
-      </div>
-    </sd-form>
-  </sd-dock>
-
-  <!-- 확장 A가 도입한 도구 dock에 버튼 추가 (등록 버튼 우측) -->
-  @if (canEdit() && viewType() === "page") {
-    <sd-dock class="flex-row gap-sm p-xs-default">
-      <sd-button [size]="'sm'" [theme]="'link-primary'" (click)="onAddItemButtonClick()">
-        <ng-icon [svg]="tablerCirclePlus" /> 등록
-      </sd-button>
-      <!-- ↓ 확장 B가 추가 -->
-      <sd-button [size]="'sm'" [theme]="'link-danger'"
-        (click)="onToggleDeleteItemsButtonClick(true)"
-        [disabled]="!hasSelectedNotDeleted()">
-        <ng-icon [svg]="tablerEraser" /> 선택 삭제
-      </sd-button>
-      @if (hasSelectedDeleted()) {
-        <sd-button [size]="'sm'" [theme]="'link-warning'"
-          (click)="onToggleDeleteItemsButtonClick(false)">
-          <ng-icon [svg]="tablerRestore" /> 선택 복구
-        </sd-button>
-      }
-    </sd-dock>
-  }
-
-  <sd-form #formCtrl (formSubmit)="onSubmit()" class="block fill p-default pt-0">
-    <!--
-      확장 B가 추가하는 속성:
-        [selectMode]="'multi'"
-        [(selectedItems)]="selectedItems"
-        [getItemCellStyleFn]="getItemCellStyleFn"  (삭제 행 취소선)
-    -->
-    <sd-sheet
-      [key]="'customer-list-sheet'"
-      [items]="items()"
-      [(currentPage)]="page"
-      [totalPageCount]="pageLength()"
-      [(sorts)]="sortingDefs"
-      [selectMode]="'multi'"
-      [(selectedItems)]="selectedItems"
-      [trackByFn]="trackByFn"
-      [getItemCellStyleFn]="getItemCellStyleFn"
-    >
-      <!-- 컬럼들은 확장 A와 동일 -->
-    </sd-sheet>
-  </sd-form>
-`
-```
-
-**포인트:**
-
-- **선택 삭제/복구는 confirm 후 즉시 DB 반영한다.** `confirm()` → DB `update` → `emitAsync`(공유 데이터) → 토스트 → `_refresh()`. 확장 A의 inline 편집 일괄 저장 흐름과 별도 경로다 — inline 편집은 셀 수정 → 저장 버튼, 선택 삭제는 체크 → 즉시 반영.
-- **`selectMode` 기본값은 `"multi"`로 둔다** — 한 번에 여러 행 삭제/복구가 기본 요구. 단일 선택이 필요한 화면에서는 `"single"`로 바꾼다.
-- **페이지 이동/정렬/필터 제출 후 `_refresh` 내부에서 `selectedItems`를 현재 페이지 항목으로만 유지한다.** `trackByFn`이 반환하는 key를 기준으로 남은 항목만 걸러낸다. 페이지 간 누적 선택이 필요하면 [확장 D: 선택 모달 전환](./extension-d-select-modal.md)의 `[cumulativeSelection]`을 참조한다 (선택 모달 전용).
-
-**🚫 흔한 실수**
-
-> 공통 규칙(`mark` 저장 감지 오해, 시트 셀 `[inset]/[size]`, 삭제 방식 등)은 [레시피 공통 규칙](../_common-rules.md)을 참조한다. 본 섹션은 **선택 삭제/복구 확장 고유 실수**만 다룬다.
-
-### 신규 행(id == null)을 선택 삭제 대상에 포함한다
-
-```typescript
-// ❌ selectedItems() 전체를 DB update 대상으로 사용 —
-//    신규 행(id == null)은 DB에 존재하지 않으므로 where 조건(expr.eq(c.id, undefined))이
-//    예상 밖의 row를 스캔하거나 조용히 실패한다. emitAsync의 ids 단정(!)도 런타임 에러가 된다.
-async onToggleDeleteItemsButtonClick(del: boolean): Promise<void> {
-  for (const item of this.selectedItems()) {
-    await db.customer()
-      .where((c) => [expr.eq(c.id, item.id)])
-      .update(() => ({ isDeleted: del }));
-  }
-}
-
-// ✅ id != null 만 통과시켜 실제로 DB에 저장된 row만 대상으로 한다.
-async onToggleDeleteItemsButtonClick(del: boolean): Promise<void> {
-  const targets = this.selectedItems().filter((it) => it.id != null);
-  for (const item of targets) {
-    await db.customer()
-      .where((c) => [expr.eq(c.id, item.id!)])
-      .update(() => ({ isDeleted: del }));
-  }
-  await this._appSharedData.emitAsync(
-    this.SHARED_DATA_KEY,
-    targets.map((it) => it.id!),
-  );
-}
-```
-
-**근거**: 확장 A의 신규 행(`id == null`)은 DB에 insert되기 전 상태이므로 "선택 삭제"의 의미가 성립하지 않는다. 신규 행 제거는 확장 A의 [`onRemoveNewItemButtonClick`](./extension-a-inline-edit.md)이 담당한다. `emitAsync`로 전달하는 `ids` 배열의 non-null 단정(`it.id!`)도 동일 필터가 선행되어야 런타임 안전하다.
-
-## Cross-reference
-
-- 진입점: [crud-list.md](../crud-list.md)
-- 선행: [확장 A: inline 편집/저장](./extension-a-inline-edit.md)
-- 다음 확장: [확장 C: inline 삭제/복구](./extension-c-inline-delete.md), [확장 D: 선택 모달 전환](./extension-d-select-modal.md) (이 확장 위에 누적)