feat(M02): 집계표 카드 = 도면 정보 · 면적산출 · 재료산출 · 편집 화면 알약 막대

- 집계표 아래 카드 셋(보기 + [수정] → 전체 편집) · 번호 = 도번 · 면적번 · 재료번
- 면적산출 · 재료산출 줄 조회 후 선택 = 다른 열 것 복사해 가져오기(copyArea · copyMaterial · 덮어쓰기 확인)
- 면적산출 · 재료산출은 표(스프레드시트) 편집 화면으로 엶(좌측 줄 · 카드 [수정] 둘 다 · 옛 CAD 로 뜨던 것 고침)
- 알약 막대 — 면적 = 그 열 일위대가 입력값(fetchComboInputs · 없으면 안내 글) · 재료 = 자재DB 찾기(searchMaterials)
- 옛 산출근거 이름(표번 · copyBasis) 안 씀

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

M02_MasterTemplete/M02_MasterTemplete_Structure.ts

@@ -1,16 +1,16 @@
 /* =============================================================================
  * M02_MasterTemplete_Structure.ts
- * 구조물집계표 아래 설계 컨테이너 — 고른 열의 구조물 도면 미리보기 · [도면 수정] · 상세 산출근거 미리보기 · [산출근거 수정].
- * 카드 둘(도면 정보 · 상세 산출근거)은 좌측 패널과 같은 공용 ui-sidebar 틀 — 둘 다 보기만(고침은 전체 화면 편집).
- * 상세 산출근거 = 스프레드시트(`A00_Common/spreadsheet/`) · 열마다 따로 파일(`basis/<열 id>.json`) ·
- * 부품은 이 카드를 열 때만 `import()` 로 받음(다른 페이지 번들에 안 섞임) · 고침·저장은 [산출근거 수정] 이
- * 여는 M02 메인 칸 전체 편집 화면(`M02_MasterTemplete_UI_Main.ts`)이 맡음.
+ * 구조물집계표 아래 설계 컨테이너 — 고른 열의 도면 정보 · 면적산출 · 재료산출 카드(보기만 + [수정]).
+ * 카드 셋은 좌측 패널과 같은 공용 ui-sidebar 틀 — 고침은 [수정] 이 여는 M02 메인 칸 전체 편집 화면
+ * (`M02_MasterTemplete_UI_Main.ts`)이 맡음.
+ * 면적산출 · 재료산출 = 스프레드시트(`A00_Common/spreadsheet/`) · 열마다 따로 파일(`area|material/<열 id>.json`) ·
+ * 부품은 카드를 열 때만 `import()` 로 받음(다른 페이지 번들에 안 섞임).
  *
  * 구조물 도면은 집계표 열마다 하나(`resources/master_template/structure/<열 id>.json`) ·
- * 서버가 열마다 미리 만들어 둠(도번 자동 · 새 열도 집계표 저장 때 서버가 같이 만듦 — `M02_MasterTemplete_Store.py`).
+ * 서버가 열마다 미리 만들어 둠(번호 자동 · 새 열도 집계표 저장 때 서버가 같이 만듦 — `M02_MasterTemplete_Store.py`).
  * 이 칸은 표 부품 host 밖 형제 자리에 붙음 — 집계표는 그대로 두고 여기만 열마다 다시 그림.
- * 집계표 일위대가 · 도면 · 산출근거 줄의 조회 후 선택(`pick`)도 여기 — 일위대가 = M01 일위대가 목록에서 고름 ·
- * 도면 · 산출근거 = 다른 열 것을 골라 내용만 복사해 가져옴(번호 · 열은 그대로 · 서버가 복사).
+ * 집계표 일위대가 · 도면 · 면적산출 · 재료산출 줄의 조회 후 선택(`pick`)도 여기 — 일위대가 = M01 일위대가
+ * 목록에서 고름 · 나머지 = 다른 열 것을 골라 내용만 복사해 가져옴(번호 · 열은 그대로 · 서버가 복사).
  * 글자는 이 파일에 둠(도면 부품 `M02_MasterTemplete_Drawing.ts` 와 같은 방식).
  * ========================================================================== */
 
@@ -24,9 +24,12 @@ import {
 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";
 import {
-  copyBasis,
+  copyArea,
+  copyMaterial,
   copyStructure,
   fetchStructureNumbers,
   readTemplate,
@@ -46,12 +49,11 @@ export const STRUCTURE_TABLE = "구조물집계표";
 const TEXT = {
   drawingInfo: "도면 정보",
   edit: "도면 수정",
-  editBasis: "산출근거 수정",
-  basis: "상세 산출근거",
   noNumber: "도번 없음",
-  noTableNumber: "표번 없음",
   noDrawing: "도면 없음",
-  noBasis: "산출근거 없음",
+  editSheet: "{value} 수정",
+  noSheetDoc: "{value} 없음",
+  noFieldNumber: "{value} 없음",
   noSheet: "스프레드시트를 못 띄움 — {value}",
   readFailed: "구조물 도면을 못 읽음 — {value}",
   close: "닫기",
@@ -59,23 +61,41 @@ const TEXT = {
   clear: "비움",
   none: "고를 것이 없음",
   pickPrice: "일위대가 고르기",
-  pickDrawing: "도면 복사해 가져오기",
-  pickBasis: "산출근거 복사해 가져오기",
   combosFailed: "일위대가 목록을 못 받음 — {value}",
   saveFirst: "새 열은 집계표를 먼저 저장해야 번호가 생김",
   overwrite: "{from} 의 {what} 내용을 {to} 에 덮어씀 — 번호 · 열은 그대로",
-  drawing: "도면",
-  basisWord: "산출근거",
+  pickCopy: "{value} 복사해 가져오기",
   copied: "복사해 가져옴",
   copyFailed: "복사 실패 — {value}",
+  noPrice: "이 열에 일위대가가 없어 알약 없음 — 구조물집계표 일위대가 줄에서 고름",
+  noInputs: "일위대가 {value} 에 입력값이 없어 알약 없음",
+  inputsFailed: "일위대가 입력값을 못 받음 — {value}",
+};
+
+/** 집계표 열 하나에 딸린 문서 셋 — 번호 칸 · 이름 · 복사 */
+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 ROW_KIND: Record<string, EditKind> = {
+  "s:drawing": "structure",
+  "s:area": "area",
+  "s:material": "material",
 };
 
 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: {도번, 표번}}` — 집계표 도면 · 산출근거 줄(없는 열은 키 없음 = 「없음」) */
+/** `{열 id: {도번, 면적번, 재료번}}` — 집계표 번호 줄(없는 열은 키 없음 = 「없음」) */
 export type ColumnNumbers = Record<string, StructureNumbers>;
 
 /** 일위대가 목록 — 처음 한 번만 받음(못 받으면 다음에 다시) */
@@ -162,14 +182,14 @@ function choose(title: string, items: Choice[], clearable: boolean): Promise<str
   });
 }
 
-/** 집계표 열 — 머리 글(제목행 종류 · 분류1 · 분류2) · 꼴만 씀 */
+/** 집계표 열 — 머리 글(제목행 종류 · 분류1 · 분류2 · 분류3) · 꼴만 씀 */
 export interface StructureColumn {
   id: string;
   머리: (string | null)[];
   꼴?: string | null;
 }
 
-/** 구조물 열 = 꼴=수 — NO · 측점 · 비고 같은 글 열은 도면 · 산출근거 · 번호가 없음(서버와 같은 규칙) */
+/** 구조물 열 = 꼴=수 — NO · 측점 · 비고 같은 글 열은 도면 · 면적산출 · 재료산출 · 번호가 없음(서버와 같은 규칙) */
 export const isStructureColumn = (col: StructureColumn): boolean => col.꼴 === "수";
 
 /** 구조물 이름 + 변수값 — 제목행 층을 빈칸으로 이음(빈 층은 건너뜀 · 다 비면 열 id) */
@@ -180,26 +200,47 @@ export const columnHead = (col: StructureColumn): string =>
 export const structureLabel = (number: string, col: StructureColumn): string =>
   [number, columnHead(col)].filter(Boolean).join(" ");
 
+/** 면적산출 · 재료산출 편집 화면 위 알약 막대 — 면적 = 그 열 일위대가 입력값(물량) · 재료 = 자재DB 찾기.
+ * 알약이 없으면 까닭 글(`notice`)을 같이 돌려줌 */
+export async function pillsFor(
+  kind: SheetKind,
+  column: string,
+): Promise<{ links: LinkOptions; notice?: string }> {
+  if (kind === "material") return { links: { 항목: [], 모드: "자재", 자재찾기: searchMaterials } };
+  const none = (notice: string) => ({ links: { 항목: [], 모드: "입력" as const }, notice });
+  const table = await readTemplate("system", "table", STRUCTURE_TABLE, null).catch(() => null);
+  const cols = (table?.문서 as { 열?: { id: string; 일위대가?: string | null }[] } | null)?.열;
+  const combo = cols?.find((c) => c.id === column)?.일위대가;
+  if (!combo) return none(TEXT.noPrice);
+  try {
+    const got = await fetchComboInputs(combo);
+    const 항목 = got.물량.map((q) => ({ 키: q.키, 이름: q.이름, 단위: q.단위 }));
+    return 항목.length ? { links: { 항목, 모드: "입력" } } : none(fill(TEXT.noInputs, combo));
+  } catch (error) {
+    return none(fill(TEXT.inputsFailed, why(error)));
+  }
+}
+
 export interface StructurePanelOptions {
   /** 시스템 관리자만 저장함(구조물 도면은 서버가 미리 만들어 둠) */
   isAdmin: boolean;
-  /** [도면 수정]·[산출근거 수정] — 그 열을 CAD·스프레드시트 전체 편집으로 엶(페이지의 `open`) ·
-   * label 은 화면 제목에 씀 */
-  onEdit: (column: string, label: string, kind: "structure" | "basis") => void;
+  /** [도면 수정] · [면적산출 수정] · [재료산출 수정] — 그 열을 CAD · 스프레드시트 전체 편집으로 엶
+   * (페이지의 `open`) · label 은 화면 제목에 씀 */
+  onEdit: (column: string, label: string, kind: EditKind) => void;
   /** 집계표에 저장 안 한 고침이 있으면 버릴지 물음 — 취소면 false */
   confirmLeave: () => Promise<boolean>;
 }
 
 export interface StructurePanelHandle {
   root: HTMLElement;
-  /** `{열 id: {도번, 표번}}` — 집계표 `drawingLabel` · `basisLabel` 이 씀 */
+  /** `{열 id: {도번, 면적번, 재료번}}` — 집계표 `drawingLabel` · `areaLabel` · `materialLabel` 이 씀 */
   numbers: () => ColumnNumbers;
-  /** 도번 · 표번 목록 다시 받기 */
+  /** 번호 목록 다시 받기 */
   reload: () => Promise<void>;
   /** 고른 열이 바뀜 — 같은 열이면 아무것도 안 함(CAD 를 다시 안 띄움) */
   show: (colId: string | null, columns: StructureColumn[]) => void;
   /** 집계표 조회 후 선택(`onPick`) — 일위대가 = 고른 키(「비움」 = 빈 글 · 닫으면 null) ·
-   * 도면 · 산출근거 = 다른 열 것을 복사해 가져옴(돌려주는 글 없음) */
+   * 도면 · 면적산출 · 재료산출 = 다른 열 것을 복사해 가져옴(돌려주는 글 없음) */
   pick: (row: string, colId: string | null, columns: StructureColumn[]) => Promise<string | null>;
   destroy: () => void;
 }
@@ -210,49 +251,75 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
   let column: string | null = null;
   let columnLabel = "";
   let doc: StructureDoc | null = null;
-  let basisDoc: Workbook | null = null;
-  let basisNumber = "";
   let preview: DrawingTemplateHandle | null = null;
-  let basis: SpreadsheetHandle | 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" });
   const previewHost = el("div", { className: "m02-struct__preview" });
-  const infoCard = el("section", {
-    className: "m02-struct__card ui-collapsible ui-sidebar-section ui-sidebar-card",
-    children: [
-      el("h3", { className: "ui-collapsible__title", text: TEXT.drawingInfo }),
-      el("div", { className: "m02-struct__head", children: [number, columnName, edit] }),
-      previewHost,
-    ],
-  });
+  const infoCard = card(
+    TEXT.drawingInfo,
+    el("div", { className: "m02-struct__head", children: [number, columnName, edit] }),
+    previewHost,
+  );
 
-  const basisNo = el("span", { className: "m02-struct__no" });
-  const editBasis = createButton({ label: TEXT.editBasis, variant: "ghost" });
-  const basisHost = el("div", { className: "m02-struct__sheet" });
-  const basisCard = el("section", {
-    className: "m02-struct__card ui-collapsible ui-sidebar-section ui-sidebar-card",
-    children: [
-      el("h3", { className: "ui-collapsible__title", text: TEXT.basis }),
-      el("div", { className: "m02-struct__subhead", children: [basisNo, editBasis] }),
-      basisHost,
-    ],
-  });
+  /** 면적산출 · 재료산출 카드 — 번호 · [수정] · 스프레드시트 미리보기 */
+  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",
+    });
+    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, basisCard],
+    children: [infoCard, ...sheets.map((c) => c.root)],
   });
   attachCollapsible(root);
 
   const drop = (): void => {
     preview?.destroy();
     preview = null;
-    basis?.destroy();
-    basis = null;
+    for (const c of sheets) {
+      c.handle?.destroy();
+      c.handle = null;
+    }
   };
 
   const note = (text: string): HTMLElement => el("p", { className: "m02-struct__empty", text });
@@ -272,28 +339,32 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     apply();
   };
 
-  /** 산출근거 스프레드시트 미리보기 — 보기만(고침은 [산출근거 수정] 이 여는 전체 화면) ·
-   * 부품을 늦게 받음 · 그 사이 열이 바뀌면 버림 */
-  const paintBasis = async (mine: number): Promise<void> => {
-    if (!basisDoc) return void basisHost.replaceChildren(note(TEXT.noBasis));
+  /** 스프레드시트 미리보기 — 보기만(고침은 [수정] 이 여는 전체 화면) · 부품을 늦게 받음 ·
+   * 그 사이 열이 바뀌면 버림 */
+  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 || !basisDoc) return;
-      basis = createSpreadsheet(basisHost, basisDoc, { readOnly: true, tabs: false });
+      if (mine !== seq || !c.doc) return;
+      c.handle = createSpreadsheet(c.host, c.doc, { readOnly: true, tabs: false });
     } catch (error) {
-      if (mine === seq) basisHost.replaceChildren(note(fill(TEXT.noSheet, why(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;
-    basisNo.textContent = basisNumber || numbers[column ?? ""]?.표번 || TEXT.noTableNumber;
-    editBasis.hidden = !opts.isAdmin;
-    basisHost.replaceChildren();
-    void paintBasis(mine);
+    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;
@@ -325,22 +396,27 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     columnName.textContent = columnLabel;
     number.textContent = numbers[col.id]?.도번 || TEXT.noNumber;
     doc = null;
-    basisDoc = null;
-    basisNumber = "";
     previewHost.replaceChildren();
-    basisHost.replaceChildren();
-    const [drawing, sheet] = await Promise.allSettled([
+    for (const c of sheets) {
+      c.doc = null;
+      c.number = "";
+      c.host.replaceChildren();
+    }
+    const [drawing, ...books] = await Promise.allSettled([
       readTemplate("system", "structure", col.id, null),
-      readTemplate("system", "basis", col.id, null),
+      ...sheets.map((c) => readTemplate("system", c.kind, col.id, null)),
     ]);
     if (mine !== seq) return;
     if (drawing.status === "fulfilled") doc = drawing.value.문서 as StructureDoc;
     // 도번 목록에 있는 열인데 못 읽으면 알림 — 없는 열은 그냥 「도면 없음」
     else if (numbers[col.id]) showToast(fill(TEXT.readFailed, why(drawing.reason)), "error");
-    if (sheet.status === "fulfilled") {
-      basisDoc = sheet.value.문서 as Workbook;
-      basisNumber = (sheet.value.문서 as { 표번?: string })?.표번 ?? "";
-    }
+    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);
   }
 
@@ -371,13 +447,13 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     return choose(col ? `${TEXT.pickPrice} — ${columnHead(col)}` : TEXT.pickPrice, items, true);
   };
 
-  /** 다른 열의 도면 · 산출근거를 골라 내용만 복사 — 덮어쓰기 확인 · 보고 있던 열이면 다시 읽음 */
+  /** 다른 열의 도면 · 면적산출 · 재료산출을 골라 내용만 복사 — 덮어쓰기 확인 · 보고 있던 열이면 다시 읽음 */
   const pickCopy = async (
-    kind: "structure" | "basis",
+    kind: EditKind,
     colId: string,
     columns: StructureColumn[],
   ): Promise<void> => {
-    const field = kind === "structure" ? "도번" : "표번";
+    const { field, word, copy } = PARTS[kind];
     const to = columns.find((c) => c.id === colId);
     const toNo = numbers[colId]?.[field];
     if (!to || !toNo) return void showToast(TEXT.saveFirst, "error");
@@ -385,7 +461,7 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
       .filter((c) => c.id !== colId && numbers[c.id]?.[field])
       .map((c) => ({ value: c.id, key: numbers[c.id][field]!, label: columnHead(c) }));
     const from = await choose(
-      `${kind === "structure" ? TEXT.pickDrawing : TEXT.pickBasis} — ${toNo} ${columnHead(to)}`,
+      `${fill(TEXT.pickCopy, word)} — ${toNo} ${columnHead(to)}`,
       items,
       false,
     );
@@ -393,11 +469,11 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     if (!from || !src) return;
     const ask = TEXT.overwrite
       .replace("{from}", `${numbers[from][field]} ${columnHead(src)}`)
-      .replace("{what}", kind === "structure" ? TEXT.drawing : TEXT.basisWord)
+      .replace("{what}", word)
       .replace("{to}", `${toNo} ${columnHead(to)}`);
     if (!(await showConfirmDialog(ask))) return;
     try {
-      await (kind === "structure" ? copyStructure : copyBasis)(colId, from);
+      await copy(colId, from);
       showToast(TEXT.copied, "success");
       if (column === colId) void load(shown);
     } catch (error) {
@@ -412,24 +488,17 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
   ): Promise<string | null> => {
     if (!opts.isAdmin || !colId) return null;
     if (row === "s:price") return pickPrice(colId, columns);
-    if (row === "s:drawing" || row === "s:basis")
-      await pickCopy(row === "s:drawing" ? "structure" : "basis", colId, columns);
+    if (ROW_KIND[row]) await pickCopy(ROW_KIND[row], colId, columns);
     return null;
   };
 
-  edit.addEventListener("click", async () => {
+  async function openEdit(kind: EditKind): Promise<void> {
     const at = column;
     if (!at) return;
     if (!(await opts.confirmLeave())) return;
-    opts.onEdit(at, columnLabel, "structure");
-  });
-
-  editBasis.addEventListener("click", async () => {
-    const at = column;
-    if (!at) return;
-    if (!(await opts.confirmLeave())) return;
-    opts.onEdit(at, columnLabel, "basis");
-  });
+    opts.onEdit(at, columnLabel, kind);
+  }
+  edit.addEventListener("click", () => void openEdit("structure"));
 
   return {
     root,