refactor(M02): 항목 카드를 공용 한 벌로 — 자료 자리 창구 · 카드 셋 옮김 · 선택 입력 카드 뼈대 (PLAN 25-2d)

- ItemSource: 문서를 읽는 자리를 인자로(M02 = 지금 층 · 고르기 모달 = 프로젝트 복사본)
- ItemCards: Structure.ts 의 도면 · 면적산출 · 재료산출 카드 그리기를 옮김(DOM · 동작 그대로) + 덧붙는 카드 자리
- InputsCard: 선택 입력 카드 뼈대(로직마다 묶음 · view · value 모드 · link 는 25-2c)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EauA2ATmqNRbeV48s9CcBr

M02_MasterTemplete/M02_MasterTemplete_Structure.ts

@@ -21,9 +21,7 @@ import {
   showConfirmDialog,
   showToast,
 } from "@ui/ui_template_elements";
-import { attachCollapsible } from "@ui/ui_template_collapsible";
 import { openModal } from "@ui/ui_template_modal";
-import type { SpreadsheetHandle, Workbook } from "../A00_Common/spreadsheet/spreadsheet";
 import type { LinkOptions } from "../A00_Common/spreadsheet/spreadsheet_links";
 import { fetchComboInputs, searchMaterials } from "../M01_MasterData/M01_MasterData_Api_Fetch";
 import { type ComboSummary, fetchCombos } from "../M01_MasterData/M01_MasterData_UI_Combo_Api";
@@ -34,29 +32,24 @@ import {
   fetchStructureNumbers,
   getActiveLayer,
   readTemplate,
-  type StructureDoc,
   type StructureNumbers,
 } from "./M02_MasterTemplete_Api_Fetch";
 import {
-  mountDrawingTemplate,
-  type DrawingTemplateDoc,
-  type DrawingTemplateHandle,
-} from "./M02_MasterTemplete_Drawing";
+  createItemCards,
+  PART_FIELD,
+  PART_WORD,
+  type EditKind,
+  type SheetKind,
+} from "./M02_MasterTemplete_ItemCards";
+import { layerSource } from "./M02_MasterTemplete_ItemSource";
 import "./M02_MasterTemplete_Structure.css";
 
+export type { EditKind, SheetKind } from "./M02_MasterTemplete_ItemCards";
+
 /** 구조물 도면이 걸리는 집계표 이름 — 서버 `M02_MasterTemplete_Store.STRUCTURE_TABLE` 과 같은 글 */
 export const STRUCTURE_TABLE = "구조물집계표";
 
 const TEXT = {
-  drawingInfo: "도면 정보",
-  edit: "도면 수정",
-  noNumber: "도번 없음",
-  noDrawing: "도면 없음",
-  editSheet: "{value} 수정",
-  noSheetDoc: "{value} 없음",
-  noFieldNumber: "{value} 없음",
-  noSheet: "스프레드시트를 못 띄움 — {value}",
-  readFailed: "구조물 도면을 못 읽음 — {value}",
   close: "닫기",
   find: "찾기",
   clear: "비움",
@@ -74,15 +67,10 @@ const TEXT = {
 };
 
 /** 집계표 열 하나에 딸린 문서 셋 — 번호 칸 · 이름 · 복사 */
-export type EditKind = "structure" | "area" | "material";
-export type SheetKind = Exclude<EditKind, "structure">;
-const PARTS: Record<
-  EditKind,
-  { field: keyof StructureNumbers; word: string; copy: (to: string, from: string) => Promise<void> }
-> = {
-  structure: { field: "도번", word: "도면", copy: copyStructure },
-  area: { field: "면적번", word: "면적산출", copy: copyArea },
-  material: { field: "재료번", word: "재료산출", copy: copyMaterial },
+const COPY: Record<EditKind, (to: string, from: string) => Promise<void>> = {
+  structure: copyStructure,
+  area: copyArea,
+  material: copyMaterial,
 };
 /** 집계표 줄 열쇠 → 문서 */
 const ROW_KIND: Record<string, EditKind> = {
@@ -93,8 +81,6 @@ const ROW_KIND: Record<string, EditKind> = {
 
 const why = (error: unknown): string => (error instanceof Error ? error.message : "");
 const fill = (text: string, value: string): string => text.replace("{value}", value);
-/** 스프레드시트는 면적산출 · 재료산출 카드를 열 때만 받음 */
-const loadSpreadsheet = () => import("../A00_Common/spreadsheet/spreadsheet");
 
 /** `{열 id: {도번, 면적번, 재료번}}` — 집계표 번호 줄(없는 열은 키 없음 = 「없음」) */
 export type ColumnNumbers = Record<string, StructureNumbers>;
@@ -255,185 +241,30 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
   let shown: StructureColumn | null = null;
   let column: string | null = null;
   let columnLabel = "";
-  let doc: StructureDoc | null = null;
-  let preview: DrawingTemplateHandle | null = null;
-  let seq = 0;
 
-  const card = (title: string, head: HTMLElement, body: HTMLElement): HTMLElement =>
-    el("section", {
-      className: "m02-struct__card ui-collapsible ui-sidebar-section ui-sidebar-card",
-      children: [el("h3", { className: "ui-collapsible__title", text: title }), head, body],
-    });
-
-  const columnName = el("span", { className: "m02-struct__title" });
-  const number = el("span", { className: "m02-struct__no" });
-  const edit = createButton({ label: TEXT.edit, variant: "filled", size: "sm" });
-  const previewHost = el("div", { className: "m02-struct__preview" });
-  const infoCard = card(
-    TEXT.drawingInfo,
-    el("div", { className: "m02-struct__head", children: [number, columnName, edit] }),
-    previewHost,
-  );
-
-  /** 면적산출 · 재료산출 카드 — 번호 · [수정] · 스프레드시트 미리보기 */
-  interface SheetCard {
-    kind: SheetKind;
-    root: HTMLElement;
-    no: HTMLElement;
-    edit: HTMLButtonElement;
-    host: HTMLElement;
-    doc: Workbook | null;
-    number: string;
-    handle: SpreadsheetHandle | null;
-  }
-  const sheetCard = (kind: SheetKind): SheetCard => {
-    const no = el("span", { className: "m02-struct__no" });
-    const editButton = createButton({
-      label: fill(TEXT.editSheet, PARTS[kind].word),
-      variant: "ghost",
-      size: "sm",
-    });
-    const host = el("div", { className: "m02-struct__sheet" });
-    editButton.addEventListener("click", () => void openEdit(kind));
-    return {
-      kind,
-      root: card(
-        PARTS[kind].word,
-        el("div", { className: "m02-struct__subhead", children: [no, editButton] }),
-        host,
-      ),
-      no,
-      edit: editButton,
-      host,
-      doc: null,
-      number: "",
-      handle: null,
-    };
-  };
-  const sheets = [sheetCard("area"), sheetCard("material")];
-
-  const root = el("div", {
-    className: "m02-struct ui-sidebar-panel",
-    attrs: { hidden: "" },
-    children: [infoCard, ...sheets.map((c) => c.root)],
-  });
-  attachCollapsible(root);
-
-  const drop = (): void => {
-    preview?.destroy();
-    preview = null;
-    for (const c of sheets) {
-      c.handle?.destroy();
-      c.handle = null;
-    }
-  };
-
-  const note = (text: string): HTMLElement => el("p", { className: "m02-struct__empty", text });
-
-  /** 미리보기 CAD 는 iframe — 안쪽 도구 모음(제목줄 · 리본)을 스타일로 숨김(같은 출처라 접근 가능) */
-  const hideToolbar = (frame: HTMLIFrameElement): void => {
-    const apply = (): void => {
-      const inner = frame.contentDocument;
-      if (!inner?.head || inner.getElementById("m02-struct-hide")) return;
-      const style = inner.createElement("style");
-      style.id = "m02-struct-hide";
-      style.textContent = ".cad-titlebar, .cad-ribbon { display: none !important; }";
-      inner.head.append(style);
-    };
-    frame.addEventListener("load", apply);
-    apply();
-  };
-
-  /** 스프레드시트 미리보기 — 보기만(고침은 [수정] 이 여는 전체 화면) · 부품을 늦게 받음 ·
-   * 그 사이 열이 바뀌면 버림 */
-  const paintSheet = async (c: SheetCard, mine: number): Promise<void> => {
-    if (!c.doc) return void c.host.replaceChildren(note(fill(TEXT.noSheetDoc, PARTS[c.kind].word)));
-    try {
-      const { createSpreadsheet } = await loadSpreadsheet();
-      if (mine !== seq || !c.doc) return;
-      c.handle = createSpreadsheet(c.host, c.doc, { readOnly: true, tabs: false });
-    } catch (error) {
-      if (mine === seq) c.host.replaceChildren(note(fill(TEXT.noSheet, why(error))));
-    }
-  };
-
-  /** 미리보기 · 스프레드시트 — 문서가 없으면 없음 글(서버가 열마다 미리 만들어 둬 보통은 없음) */
-  const paintBody = (mine: number): void => {
-    drop();
-    number.textContent = doc?.도번 || numbers[column ?? ""]?.도번 || TEXT.noNumber;
-    edit.hidden = !opts.isAdmin;
-    for (const c of sheets) {
-      const field = PARTS[c.kind].field;
-      c.no.textContent =
-        c.number || numbers[column ?? ""]?.[field] || fill(TEXT.noFieldNumber, field);
-      c.edit.hidden = !opts.isAdmin;
-      c.host.replaceChildren();
-      void paintSheet(c, mine);
-    }
-    if (!doc) {
-      previewHost.replaceChildren(note(TEXT.noDrawing));
-      return;
-    }
-    previewHost.replaceChildren();
-    // 미리보기 — 도면 양식과 같은 부품을 읽기만으로. 자동백업 칸은 편집 화면과 갈라 둠.
-    preview = mountDrawingTemplate(previewHost, doc.도면 as unknown as DrawingTemplateDoc, {
-      readOnly: true,
-      name: `preview:${column ?? ""}`,
-      layer: getActiveLayer(),
-      panelsCollapsed: true, // 특성 · 도면층 패널은 접힌 채 — › 를 누르면 펼침
-      preview: true, // 왼쪽 끌기 = 화면 옮기기 · 두 번 누름 = 전체 맞춤
-      originMarker: true, // 좌표 0,0 기준점 십자
-      noArea: true, // 구조물도는 도각이 없음 — 작도 영역 단추 없음
-    });
-    const frame = previewHost.querySelector("iframe");
-    if (frame) hideToolbar(frame);
-  };
-
-  async function load(col: StructureColumn | null): Promise<void> {
-    const mine = ++seq;
-    drop();
-    shown = col;
-    if (!col) {
-      root.hidden = true;
-      column = null;
-      doc = null;
-      return;
-    }
-    root.hidden = false;
-    column = col.id;
-    columnLabel = columnHead(col);
-    columnName.textContent = columnLabel;
-    number.textContent = numbers[col.id]?.도번 || TEXT.noNumber;
-    doc = null;
-    previewHost.replaceChildren();
-    for (const c of sheets) {
-      c.doc = null;
-      c.number = "";
-      c.host.replaceChildren();
-    }
-    const [drawing, ...books] = await Promise.allSettled([
-      readTemplate(getActiveLayer(), "structure", col.id, null),
-      ...sheets.map((c) => readTemplate(getActiveLayer(), c.kind, col.id, null)),
-    ]);
-    if (mine !== seq) return;
-    if (drawing.status === "fulfilled") doc = drawing.value.문서 as StructureDoc;
+  // 카드 셋은 항목 카드 한 벌(`ItemCards`) — 여기서는 지금 층에서 열 하나를 읽어 넘기기만.
+  const cards = createItemCards({
+    source: layerSource,
+    editable: () => opts.isAdmin,
+    onEdit: (kind) => void openEdit(kind),
+    numberOf: (kind, id) => numbers[id]?.[PART_FIELD[kind]],
     // 도번 목록에 있는 열인데 못 읽으면 알림 — 없는 열은 그냥 「도면 없음」
-    else if (numbers[col.id]) showToast(fill(TEXT.readFailed, why(drawing.reason)), "error");
-    books.forEach((got, i) => {
-      if (got.status !== "fulfilled") return;
-      const c = sheets[i];
-      const book = got.value.문서 as Workbook & Record<string, unknown>;
-      c.doc = book;
-      c.number = String(book?.[PARTS[c.kind].field] ?? "");
-    });
-    paintBody(mine);
+    warnOnFail: (id) => !!numbers[id],
+  });
+  const root = cards.root;
+
+  function load(col: StructureColumn | null): Promise<void> {
+    shown = col;
+    column = col?.id ?? null;
+    columnLabel = col ? columnHead(col) : "";
+    return cards.load(col ? { id: col.id, label: columnLabel } : null);
   }
 
   /** 글 열(NO · 측점 · 비고)은 구조물이 아니라 컨테이너를 닫음 */
   const show = (colId: string | null, columns: StructureColumn[]): void => {
     const col = columns.find((c) => c.id === colId && isStructureColumn(c)) ?? null;
     if ((col?.id ?? null) !== column) return void load(col);
-    if (col) columnName.textContent = columnLabel = columnHead(col); // 머리를 고쳤을 수 있음
+    if (col) cards.setLabel((columnLabel = columnHead(col))); // 머리를 고쳤을 수 있음
   };
 
   const pickPrice = async (colId: string, columns: StructureColumn[]): Promise<string | null> => {
@@ -462,7 +293,9 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     colId: string,
     columns: StructureColumn[],
   ): Promise<void> => {
-    const { field, word, copy } = PARTS[kind];
+    const field = PART_FIELD[kind];
+    const word = PART_WORD[kind];
+    const copy = COPY[kind];
     const to = columns.find((c) => c.id === colId);
     const toNo = numbers[colId]?.[field];
     if (!to || !toNo) return void showToast(TEXT.saveFirst, "error");
@@ -505,12 +338,10 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     const at = column;
     if (!at) return;
     // 저장 전 새 열(분류 더하기) — 문서 · 번호가 아직 없음 · 떠나면 집계표 고침까지 버리게 됨
-    if (!numbers[at]?.[PARTS[kind].field]) return void showToast(TEXT.saveFirst, "info");
+    if (!numbers[at]?.[PART_FIELD[kind]]) return void showToast(TEXT.saveFirst, "info");
     if (!(await opts.confirmLeave())) return;
     opts.onEdit(at, columnLabel, kind);
   }
-  edit.addEventListener("click", () => void openEdit("structure"));
-
   return {
     root,
     numbers: () => numbers,
@@ -524,10 +355,6 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
       show(at, columns);
     },
     pick,
-    destroy: () => {
-      seq += 1;
-      drop();
-      root.remove();
-    },
+    destroy: () => cards.destroy(),
   };
 }