@simplysm/angular 14.0.49 → 14.0.52

package/docs/recipes/data-select-button.md

@@ -1,318 +0,0 @@
-# Recipe: 모달 기반 선택 버튼 직접 조립
-
-소비 화면이 `<sd-modal-select-button>` 표준 컴포넌트를 **직접** 사용하거나, **컴포지션**(wrap)으로 도메인별 선택 버튼을 만든다. 과거 `SdDataSelectButton` / `SdDataSelectButtonBase` 추상화는 제거되었다.
-
-## 1. Overview
-
-- 제거된 추상화: `SdDataSelectButton`(컴포넌트) / `SdDataSelectButtonBase`(추상 클래스)
-- 대체 컴포넌트:
-  - `<sd-modal-select-button>` — 표준 모달 선택 버튼. 모달을 띄워 선택 결과를 `value` model로 받는다
-  - `<sd-shared-data-select-button>` — 메모리 공유 데이터(`SharedDataBase`) 기반 선택 버튼. 내부에서 `<sd-modal-select-button>` 컴포지션
-  - 사용자 정의 select-button — `<sd-modal-select-button>` 컴포지션 + 비동기 `load(keys)` effect로 도메인별 표시 데이터 채우기
-- 유지되는 조력자:
-  - `SdSelectModal<T>` 인터페이스 (`packages/angular/src/controls/button/sd-modal-select-button.ts:30`) — 선택 모달 컴포넌트가 구현
-  - `SdSelectModalInfo<T>` 타입 — 모달 정보 객체
-  - `SelectModalOutputResult<T>` (`packages/angular/src/core/select-modal-output-result.ts`) — `{ selectedItemKeys, selectedItems }` 모달 반환 형식
-  - `SdModalProvider` — 프로그래밍 방식 모달 호출
-  - `SdItemOfTemplate` — 항목 템플릿 컨텍스트 디렉티브
-
-## 2. 언제 사용하는가
-
-| 상황 | 적용 패턴 |
-|---|---|
-| 외부 대형 테이블에서 모달로 선택, 결과를 key로 저장 | 패턴 3: 사용자 정의 select-button (load 비동기) |
-| 메모리에 로드된 공유 데이터(`SharedDataBase`)에서 선택 | 패턴 2: `<sd-shared-data-select-button>` |
-| 1회성 모달을 직접 띄워 선택 (도메인별 wrapper 불필요) | 패턴 1: `<sd-modal-select-button>` 직접 |
-| 단순 enum 정적 옵션 선택 | `<sd-select>` + `<sd-select-item>` (본 레시피 범위 외) |
-| 공유 데이터 드롭다운(검색 포함) | `<sd-shared-data-select>` (`features.md` 참조) |
-| 공유 데이터 목록형(페이지네이션) | `<sd-shared-data-select-list>` (`features.md` 참조) |
-
-## 3. 패턴 1: `<sd-modal-select-button>` 직접 사용
-
-### 3.1 모달 컴포넌트 구현
-
-선택 모달은 `SdSelectModal<T>` 인터페이스를 구현한다.
-
-```typescript
-import { Component, input, output, signal, ViewEncapsulation } from "@angular/core";
-import {
-  SdSelectModal,
-  SelectModalOutputResult,
-} from "@simplysm/angular";
-
-interface IItem {
-  id: number;
-  name: string;
-}
-
-@Component({
-  selector: "app-item-select-modal",
-  standalone: true,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <div class="p-default">
-      <!-- 항목 리스트, 검색, 페이지네이션 등 -->
-      <button (click)="onConfirm()">확인</button>
-      <button (click)="close.emit(undefined)">취소</button>
-    </div>
-  `,
-})
-export class ItemSelectModal implements SdSelectModal<IItem> {
-  initialized = signal(true);
-  close = output<SelectModalOutputResult<IItem> | undefined>();
-  selectMode = input<"single" | "multi" | undefined>("single");
-  selectedItemKeys = input<any[]>([]);
-
-  // 내부에서 선택된 항목 관리 (예시)
-  private readonly _selectedItems = signal<IItem[]>([]);
-
-  onConfirm(): void {
-    const items = this._selectedItems();
-    this.close.emit({
-      selectedItemKeys: items.map((it) => it.id),
-      selectedItems: items,
-    });
-  }
-}
-```
-
-### 3.2 호출 측
-
-```typescript
-import { Component, signal } from "@angular/core";
-import { SdModalSelectButton, SdSelectModalInfo } from "@simplysm/angular";
-
-@Component({
-  selector: "app-foo",
-  standalone: true,
-  imports: [SdModalSelectButton],
-  template: `
-    <sd-modal-select-button
-      [(value)]="value"
-      [(selectedItems)]="selectedItems"
-      [modal]="modalInfo"
-      [selectMode]="'single'"
-    >
-      @if (selectedItems().length > 0) {
-        {{ selectedItems()[0].name }}
-      } @else {
-        선택하세요
-      }
-    </sd-modal-select-button>
-  `,
-})
-export class FooPage {
-  value = signal<number | undefined>(undefined);
-  selectedItems = signal<IItem[]>([]);
-
-  modalInfo: SdSelectModalInfo<ItemSelectModal> = {
-    title: "항목 선택",
-    type: ItemSelectModal,
-    inputs: {},
-  };
-}
-```
-
-**핵심:**
-- `value`는 key (number/string), `selectedItems`는 표시용 객체. 둘 다 `model<>` 양방향
-- 모달이 닫힐 때 반환한 `selectedItemKeys`가 `value`로, `selectedItems`가 `selectedItems`로 자동 반영
-- 사용자가 모달을 띄우려면 검색 버튼을 누른다 (`<sd-modal-select-button>` 내장)
-- erase 버튼은 `disabled=false && required=false && value 존재` 시 자동 표시
-
-## 4. 패턴 2: `<sd-shared-data-select-button>` (공유 데이터)
-
-메모리에 이미 로드된 `SharedDataBase` 기반 데이터에서 선택할 때 사용한다. `value` 변경 시 `items.filter(by __valueKey)`로 표시 데이터가 자동 채워진다 — 별도 `load()` 호출 불필요.
-
-```typescript
-import { Component, signal } from "@angular/core";
-import {
-  SdSharedDataSelectButton,
-  SdItemOfTemplate,
-  SdSelectModalInfo,
-  SharedDataBase,
-} from "@simplysm/angular";
-
-interface IShop extends SharedDataBase<number> {
-  __valueKey: number;
-  __searchText: string;
-  __isHidden: boolean;
-  name: string;
-  code: string;
-}
-
-@Component({
-  selector: "app-bar",
-  standalone: true,
-  imports: [SdSharedDataSelectButton, SdItemOfTemplate],
-  template: `
-    <sd-shared-data-select-button
-      [(value)]="shopId"
-      [items]="shops()"
-      [modal]="shopModalInfo"
-      [selectMode]="'single'"
-    >
-      <ng-template [itemOf]="shops()" let-item>
-        <span>{{ item.code }} - {{ item.name }}</span>
-      </ng-template>
-    </sd-shared-data-select-button>
-  `,
-})
-export class BarPage {
-  shopId = signal<number | undefined>(undefined);
-  shops = signal<IShop[]>([]); // SdSharedDataProvider에서 로드
-
-  shopModalInfo: SdSelectModalInfo<ShopSelectModal> = {
-    title: "거래처 선택",
-    type: ShopSelectModal,
-    inputs: {},
-  };
-}
-```
-
-**핵심:**
-- `items`가 source of truth. `value`(key) 또는 `items` 변경 시 표시되는 항목이 자동 재계산됨
-- `<ng-template [itemOf]="items()" let-item>`은 항목 템플릿. multi 모드에서는 ", " 구분자로 자동 나열
-- `selectMode="multi"`이면 `value`는 `number[]`
-
-## 5. 패턴 3: 사용자 정의 select-button (LotSelectButton 패턴)
-
-도메인별로 자주 쓰는 모달 선택 버튼은 `<sd-modal-select-button>`을 컴포지션하여 wrapper 컴포넌트로 만든다. value(key)만 저장하고 표시용 데이터는 비동기 `load(keys)`로 ORM에서 조회한다.
-
-```typescript
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  inject,
-  input,
-  model,
-  signal,
-  ViewEncapsulation,
-  booleanAttribute,
-} from "@angular/core";
-import {
-  SdModalSelectButton,
-  SdSelectModalInfo,
-} from "@simplysm/angular";
-import { AppOrmProvider } from "../app-orm.provider";
-import { expr } from "@simplysm/orm-common";
-import { LotSelectModal } from "./lot-select.modal";
-
-interface ILot {
-  id: number;
-  code: string;
-}
-
-@Component({
-  selector: "app-lot-select-button",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdModalSelectButton],
-  template: `
-    <sd-modal-select-button
-      [(value)]="value"
-      [(selectedItems)]="_selectedItems"
-      [modal]="modalInfo()"
-      [disabled]="disabled()"
-      [required]="required()"
-      [inset]="inset()"
-      [size]="size()"
-      [selectMode]="'single'"
-    >
-      @for (item of _selectedItems(); track item.id; let index = $index) {
-        @if (index !== 0) { <span>,&nbsp;</span> }
-        <span>{{ item.code }}</span>
-      }
-    </sd-modal-select-button>
-  `,
-})
-export class LotSelectButton {
-  private readonly _appOrm = inject(AppOrmProvider);
-
-  value = model<number | undefined>();
-  modalInputs = input<SdSelectModalInfo<LotSelectModal>["inputs"]>({});
-  disabled = input(false, { transform: booleanAttribute });
-  required = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-
-  protected readonly _selectedItems = signal<ILot[]>([]);
-
-  protected readonly modalInfo = computed<SdSelectModalInfo<LotSelectModal>>(() => ({
-    type: LotSelectModal,
-    title: "LOT조회",
-    inputs: this.modalInputs(),
-  }));
-
-  constructor() {
-    // value 변경 시 비동기 load → _selectedItems 갱신
-    effect(() => {
-      const v = this.value();
-      if (v == null) {
-        this._selectedItems.set([]);
-        return;
-      }
-
-      void (async () => {
-        const items = await this._appOrm.connectAsync(async (db) =>
-          db.lot()
-            .where((it) => [expr.in(it.id, [v])])
-            .select((it) => ({ id: it.id, code: it.code }))
-            .execute(),
-        );
-        this._selectedItems.set(items);
-      })();
-    });
-  }
-}
-```
-
-사용:
-
-```html
-<app-lot-select-button
-  [(value)]="data().lotId"
-  [required]="true"
-  [disabled]="!canEdit()"
-/>
-```
-
-**핵심:**
-- `<sd-modal-select-button>`이 모달 호출/erase/invalid 로직 담당 → wrapper는 비동기 load만 추가
-- `_selectedItems`는 내부 signal. 외부에서는 `value`만 set
-- effect 콜백은 동기여야 하므로 비동기 작업은 `void (async () => { ... })()` IIFE로 감싼다. 로드 함수가 한 곳에서만 호출되므로 별도 private 메서드로 분리하지 않고 effect 내부에 직접 인라인한다
-- multi 모드를 지원하려면 `value = model<number[] | undefined>()`로 변경 + `selectMode = input<"single"|"multi">("single")` 추가 + effect의 `expr.in(it.id, [v])`를 배열 전체로 바꾸고 배열 길이 분기 추가
-
-### 5.1 시트 셀 안에 삽입
-
-`[inset]="true"` + `[size]="'sm'"`로 시트 셀에 자연스럽게 녹아든다 (관용 규칙):
-
-```html
-<sd-sheet-column [key]="'lotId'" [header]="'LOT'">
-  <ng-template [cell]="items()" let-item="item">
-    <app-lot-select-button
-      [inset]="true"
-      [size]="'sm'"
-      [(value)]="item.lotId"
-      (valueChange)="mark(items)"
-    />
-  </ng-template>
-</sd-sheet-column>
-```
-
-## 6. 주의사항
-
-- **`SdDataSelectButton` / `SdDataSelectButtonBase`는 삭제됨.** 기존 `extends SdDataSelectButtonBase` 코드는 패턴 3(사용자 정의 select-button) 형태로 마이그레이션한다.
-- **신규 추상화 클래스를 만들지 말 것.** `SelectButtonBase` 같은 공통 부모 클래스를 다시 만들면 본 WBS가 제거한 패턴이 되살아난다. 도메인별 wrapper 컴포넌트를 각자 직접 작성한다.
-- **`SdSelectModal<T>` 인터페이스는 모달 컴포넌트가 직접 `implements`한다.** `selectMode`/`selectedItemKeys` `InputSignal`과 `close` `output<SelectModalOutputResult<T>>`를 모두 구현해야 한다.
-- **`<sd-shared-data-select-button>`의 `selectedItems`는 외부 노출되지 않는다.** 내부 signal로 자동 관리되므로 외부에서는 `value` + `items`만 set한다. 직접 set이 필요하면 패턴 3로 wrapper를 작성한다.
-- **`effect()` 내부의 비동기 호출은 `void` 키워드 또는 별도 메서드 호출**로 처리한다. effect 콜백을 `async`로 만들면 cleanup 시점이 어긋난다.
-
-## 7. Cross-reference
-
-- 선택 모달이 CRUD 리스트와 동일한 컴포넌트일 때 — [recipes/crud-list.md](./crud-list.md)의 "변형 2: 선택 모달 뷰" 섹션 참조
-- 공유 데이터 드롭다운(`SdSharedDataSelect`) / 목록형 선택(`SdSharedDataSelectList`) — [features.md](../features.md) 참조
-- `SdModalSelectButton` 자체 API — `packages/angular/src/controls/button/sd-modal-select-button.ts:148`
-- `SharedDataBase` / `SdSharedDataProvider` — [features.md](../features.md), `packages/angular/src/core/shared-data/sd-shared-data.provider.ts`

package/docs/recipes/page-modal-container.md

@@ -1,178 +0,0 @@
-# Recipe: 페이지/모달 컨테이너 직접 조립
-
-소비 화면이 `<sd-busy-container>` · `<sd-topbar-container>` · `<sd-topbar>` 표준 컴포넌트를 **직접 조립**하여 "하나의 컴포넌트를 페이지·모달·제어(control) 뷰에서 모두 재사용"하는 구조를 만든다. 과거 `<sd-base-container>`가 감추고 있던 분기·타이틀 계산·권한 제한·초기화 숨김을 화면 내부에 인라인으로 풀어쓴다.
-
-## 1. Overview
-
-- 제거된 추상화: `SdBaseContainer`(`<sd-base-container>`)
-- 대체: 소비 컴포넌트가 표준 조각을 `@if` 분기로 직접 조립
-- 조립 요소:
-  - `<sd-busy-container [busy] [message]>` — 전체 busy 오버레이 (`@simplysm/angular` → `SdBusyContainer`, `busy`·`message`·`type` input)
-  - `<sd-topbar-container>` + `<sd-topbar>` — 페이지 뷰에서 상단 헤더
-  - `@if/@else if` — 뷰 타입 분기
-  - `injectViewTypeSignal()` — 라우트·모달 컨텍스트에 따라 `"page" | "modal" | "control"` 판정
-  - `computed()` — `header ?? 모달 타이틀 ?? 앱 구조 타이틀` 우선순위 타이틀 계산
-- 유지되는 조력자: `SdActivatedModalProvider`, `SdAppStructureProvider`, `SdSystemLogProvider`, `injectCurrentPageCodeSignal`, `injectFullPageCodeSignal`
-
-## 2. 언제 사용하는가
-
-| 상황 | 적용 여부 |
-|---|---|
-| 하나의 화면 컴포넌트를 페이지와 모달 양쪽에서 재사용 | 레시피 전체 적용 |
-| 페이지 뷰만 필요 (topbar 있는 라우트 화면) | 페이지 블록만 사용, 모달·control 분기 생략 가능 |
-| 모달 뷰만 필요 (프로그래밍 방식 `SdModalProvider.showAsync()` 전용) | 모달 블록만 사용 |
-| 다른 화면의 영역 일부로 삽입되는 컨트롤 | control 분기(`@else` 블록)만 사용. topbar·모달 분기 생략 |
-| 커스텀 단축키·이탈 확인이 필요 | `SdCommandDirective` + `setupCanDeactivate`를 본문에 직접 부착 (본 레시피 범위 외, `features-data-detail.md`류 레시피 참조) |
-
-## 3. 완성 예제
-
-아래는 하나의 컴포넌트가 **페이지·모달·control 뷰 모두**를 커버하는 완성 형태다. 필요 없는 분기는 삭제하여 단순화할 수 있다.
-
-```typescript
-import { NgIcon } from "@ng-icons/core";
-import { tablerAlertTriangle } from "@ng-icons/tabler-icons";
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from "@angular/core";
-import {
-  injectCurrentPageCodeSignal,
-  injectFullPageCodeSignal,
-  injectViewTypeSignal,
-  SdActivatedModalProvider,
-  SdAppStructureProvider,
-  SdBusyContainer,
-  SdSystemLogProvider,
-  SdTopbar,
-  SdTopbarContainer,
-} from "@simplysm/angular";
-
-@Component({
-  selector: "app-foo",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdBusyContainer, SdTopbarContainer, SdTopbar, NgIcon],
-  template: `
-    <sd-busy-container [busy]="busy()" [message]="busyMessage()">
-      @if (initialized() == null || initialized()) {
-        @if (restricted()) {
-          <div class="fill tx-theme-gray-light p-xxl tx-center">
-            <br />
-            <ng-icon [svg]="tablerAlertTriangle" [size]="'5em'" />
-            <br />
-            <br />
-            '{{ modalOrPageTitle() }}'에 대한 사용권한이 없습니다. 시스템 관리자에게 문의하세요.
-          </div>
-        } @else if (viewType() === "page") {
-          <sd-topbar-container>
-            <sd-topbar>
-              <h4>{{ modalOrPageTitle() }}</h4>
-              <!-- 페이지 topbar 보조 영역(버튼·메뉴 등) 필요 시 여기 -->
-            </sd-topbar>
-            <div class="fill">
-              <!-- 본문: 페이지 레이아웃으로 채우기 -->
-            </div>
-          </sd-topbar-container>
-        } @else if (viewType() === "modal") {
-          <div class="flex-column fill">
-            <div class="flex-fill">
-              <!-- 본문: 모달 내부 컨텐츠 -->
-            </div>
-            <!-- 모달 하단 액션(확인/취소 버튼 등) 필요 시:
-            <div class="bdt bdt-theme-gray-lightest">
-              ...
-            </div>
-            -->
-          </div>
-        } @else {
-          <!-- 본문: control 뷰(다른 화면의 영역으로 삽입) -->
-        }
-      }
-    </sd-busy-container>
-  `,
-})
-export class FooPage {
-  private readonly _sdActivatedModal = inject(SdActivatedModalProvider, { optional: true });
-  private readonly _sdAppStructure = inject(SdAppStructureProvider);
-  private readonly _sdSystemLog = inject(SdSystemLogProvider);
-
-  private readonly _fullPageCode = injectFullPageCodeSignal();
-  private readonly _currPageCode = injectCurrentPageCodeSignal();
-
-  protected readonly viewType = injectViewTypeSignal();
-
-  header = input<string>();
-  initialized = input<boolean | undefined>(undefined);
-  restricted = input(false, { transform: booleanAttribute });
-  busy = input(false, { transform: booleanAttribute });
-  busyMessage = input<string>();
-
-  protected readonly modalOrPageTitle = computed(() => {
-    try {
-      return (
-        this.header() ??
-        this._sdActivatedModal?.modalComponent()?.title() ??
-        this._sdAppStructure.getTitleByFullCode(this._currPageCode?.() ?? this._fullPageCode())
-      );
-    } catch (err) {
-      void this._sdSystemLog.writeAsync("warn", `modalOrPageTitle 계산 중 에러: ${String(err)}`);
-      return "";
-    }
-  });
-
-  protected readonly tablerAlertTriangle = tablerAlertTriangle;
-}
-```
-
-## 4. 분해 설명
-
-각 블록의 역할과 원본 `SdBaseContainer` 코드 대응 지점:
-
-| 블록 | 역할 | 원본 대응 |
-|---|---|---|
-| `<sd-busy-container [busy] [message]>` | 화면 전체에 busy 오버레이를 씌운다. 자식 전체를 감싼다 | `sd-base-container.ts:42` |
-| `@if (initialized() == null || initialized())` | `undefined` 또는 `true`일 때만 자식 렌더. `false`면 콘텐츠 전부 숨김(초기화 전 잔상 방지) | `sd-base-container.ts:43` |
-| `@if (restricted())` | 권한 없음 시 경고 메시지를 표시하고 콘텐츠는 렌더링하지 않음 | `sd-base-container.ts:44-51` |
-| `@else if (viewType() === "page")` | 페이지 뷰: `<sd-topbar-container>` + `<sd-topbar>` 헤더에 계산된 제목 표시 | `sd-base-container.ts:52-63` |
-| `@else if (viewType() === "modal")` | 모달 뷰: flex-column 레이아웃, 하단 액션은 선택 | `sd-base-container.ts:64-74` |
-| `@else` | control 뷰: 본문만 raw 렌더링 | `sd-base-container.ts:75-77` |
-| `modalOrPageTitle` computed | 제목 우선순위 계산 + 예외 시 빈 문자열 + `writeAsync("warn", ...)` | `sd-base-container.ts:102-113` |
-
-## 5. 뷰 타입 결정
-
-`injectViewTypeSignal()`은 인자 없이 호출한다. 내부 판정 규칙:
-
-1. `SdActivatedModalProvider`가 주입 가능하면 **`"modal"`**
-2. 현재 활성 라우트의 컴포넌트 `selector`가 이 화면의 `<host>.tagName`과 일치하면 **`"page"`**
-3. 그 외는 **`"control"`** (다른 화면의 내부에 삽입된 영역)
-
-일반적으로 이 자동 판정으로 충분하다. 수동 오버라이드가 필요한 특수 상황(예: 특정 페이지 안에 자기 자신을 모달처럼 보이게 하고 싶은 경우)에는 아래와 같이 **`injectViewTypeSignal()`은 필드 초기화 시점에 한 번만 호출**하고 `computed`에서는 signal만 재사용한다.
-
-```typescript
-override = input<SdViewType>();
-private readonly _autoViewType = injectViewTypeSignal();
-protected readonly viewType = computed(() => this.override() ?? this._autoViewType());
-```
-
-`injectViewTypeSignal()` 내부는 `inject(SdActivatedModalProvider, { optional: true })` · `inject(ActivatedRoute, { optional: true })`를 호출한다. Angular `inject()`는 injection context(생성자 실행 중 또는 필드 초기화 시점) 안에서만 유효하므로, `computed` 콜백이나 effect 안에서 호출하면 `NG0203` 런타임 에러가 발생한다. 이 오버라이드는 추상화 복원을 부추기므로 **기본은 자동 판정으로 쓰기**를 권장한다.
-
-## 6. 타이틀 우선순위
-
-타이틀은 **화면 내부의 `computed`로 직접 계산**한다. 우선순위:
-
-1. `header()` input이 지정되어 있으면 그 값
-2. 모달 컨텍스트면 `SdActivatedModalProvider.modalComponent()?.title()`
-3. 페이지 컨텍스트면 `SdAppStructureProvider.getTitleByFullCode(this._currPageCode?.() ?? this._fullPageCode())`
-
-`getTitleByFullCode`는 앱 구조(`items`)에 해당 fullCode 항목이 없으면 `Error`를 던진다. 따라서 `try/catch`로 래핑하고 실패 시 빈 문자열을 반환하면서 `SdSystemLogProvider.writeAsync("warn", ...)`으로 경고를 남긴다. 이는 화면 생성 시점에 앱 구조 로딩이 지연되는 상황에서 화면 전체가 깨지지 않도록 하기 위함이다.
-
-## 7. 주의사항
-
-- **신규 유틸 함수를 추출하지 말 것.** `useBaseContainer()`, `computeModalOrPageTitle()` 같은 공통 헬퍼를 도입하면 이 레시피가 제거한 추상화가 다시 생긴다. 세 줄짜리 `computed`를 화면마다 반복하는 편이 낫다.
-- **본문 채우기는 화면의 책임이다.** 위 예제의 `<!-- 본문: ... -->` 주석 자리에 `<sd-sheet>`(리스트), `<sd-form>`(상세), 임의 HTML 등 화면별 콘텐츠를 삽입한다. 리스트·상세 화면 조립은 `crud-list.md`·`crud-detail.md` 레시피 참조.