feat(M02): 산출근거 전체 편집 화면 — 집계표 카드는 보기 + [산출근거 수정]

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

M02_MasterTemplete/M02_MasterTemplete_Structure.ts

@@ -1,9 +1,10 @@
 /* =============================================================================
  * M02_MasterTemplete_Structure.ts
- * 구조물집계표 아래 설계 컨테이너 — 고른 열의 구조물 도면 미리보기 · [도면 수정] · 상세 산출근거.
- * 카드 둘(도면 정보 · 상세 산출근거)은 좌측 패널과 같은 공용 ui-sidebar 틀.
+ * 구조물집계표 아래 설계 컨테이너 — 고른 열의 구조물 도면 미리보기 · [도면 수정] · 상세 산출근거 미리보기 · [산출근거 수정].
+ * 카드 둘(도면 정보 · 상세 산출근거)은 좌측 패널과 같은 공용 ui-sidebar 틀 — 둘 다 보기만(고침은 전체 화면 편집).
  * 상세 산출근거 = 스프레드시트(`A00_Common/spreadsheet/`) · 열마다 따로 파일(`basis/<열 id>.json`) ·
- * 부품은 이 카드를 열 때만 `import()` 로 받음(다른 페이지 번들에 안 섞임) · [산출근거 저장] 때 서버가 다시 풂.
+ * 부품은 이 카드를 열 때만 `import()` 로 받음(다른 페이지 번들에 안 섞임) · 고침·저장은 [산출근거 수정] 이
+ * 여는 M02 메인 칸 전체 편집 화면(`M02_MasterTemplete_UI_Main.ts`)이 맡음.
  *
  * 구조물 도면은 집계표 열마다 하나(`resources/master_template/structure/<열 id>.json`) ·
  * 서버가 열마다 미리 만들어 둠(도번 자동 · 새 열도 집계표 저장 때 서버가 같이 만듦 — `M02_MasterTemplete_Store.py`).
@@ -11,14 +12,12 @@
  * 글자는 이 파일에 둠(도면 부품 `M02_MasterTemplete_Drawing.ts` 와 같은 방식).
  * ========================================================================== */
 
-import { createButton, el, showConfirmDialog, showToast } from "@ui/ui_template_elements";
+import { createButton, el, showToast } from "@ui/ui_template_elements";
 import { attachCollapsible } from "@ui/ui_template_collapsible";
 import type { SpreadsheetHandle, Workbook } from "../A00_Common/spreadsheet/spreadsheet";
 import {
   fetchStructureNumbers,
   readTemplate,
-  saveTemplate,
-  StaleError,
   type StructureDoc,
 } from "./M02_MasterTemplete_Api_Fetch";
 import {
@@ -34,18 +33,14 @@ export const STRUCTURE_TABLE = "구조물집계표";
 const TEXT = {
   drawingInfo: "도면 정보",
   edit: "도면 수정",
-  save: "산출근거 저장",
+  editBasis: "산출근거 수정",
   basis: "상세 산출근거",
   noNumber: "도번 없음",
+  noTableNumber: "표번 없음",
   noDrawing: "도면 없음",
   noBasis: "산출근거 없음",
   noSheet: "스프레드시트를 못 띄움 — {value}",
-  saved: "산출근거를 저장했음",
-  dirty: "저장 안 한 산출근거 고침이 있음 — 버리고 넘어갈까?",
-  kept: "열을 바꾸지 않음 — 산출근거를 먼저 저장할 것",
-  stale: "그 사이 산출근거가 바뀜 — 열을 다시 고를 것",
   readFailed: "구조물 도면을 못 읽음 — {value}",
-  saveFailed: "저장 못 함 — {value}",
 };
 
 const why = (error: unknown): string => (error instanceof Error ? error.message : "");
@@ -66,8 +61,9 @@ export const columnHead = (col: StructureColumn): string =>
 export interface StructurePanelOptions {
   /** 시스템 관리자만 저장함(구조물 도면은 서버가 미리 만들어 둠) */
   isAdmin: boolean;
-  /** [도면 수정] — 그 열 구조물 도면을 CAD 편집으로 엶(페이지의 `open`) · label 은 화면 제목에 씀 */
-  onEdit: (column: string, label: string) => void;
+  /** [도면 수정]·[산출근거 수정] — 그 열을 CAD·스프레드시트 전체 편집으로 엶(페이지의 `open`) ·
+   * label 은 화면 제목에 씀 */
+  onEdit: (column: string, label: string, kind: "structure" | "basis") => void;
   /** 집계표에 저장 안 한 고침이 있으면 버릴지 물음 — 취소면 false */
   confirmLeave: () => Promise<boolean>;
 }
@@ -89,11 +85,9 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
   let columnLabel = "";
   let doc: StructureDoc | null = null;
   let basisDoc: Workbook | null = null;
-  let basisVersion = "";
+  let basisNumber = "";
   let preview: DrawingTemplateHandle | null = null;
   let basis: SpreadsheetHandle | null = null;
-  let basisDirty = false;
-  let busy = false;
   let seq = 0;
 
   const columnName = el("span", { className: "m02-struct__title" });
@@ -109,13 +103,14 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     ],
   });
 
-  const saveBasis = createButton({ label: TEXT.save, variant: "ghost" });
+  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: [saveBasis] }),
+      el("div", { className: "m02-struct__subhead", children: [basisNo, editBasis] }),
       basisHost,
     ],
   });
@@ -132,7 +127,6 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     preview = null;
     basis?.destroy();
     basis = null;
-    basisDirty = false;
   };
 
   const note = (text: string): HTMLElement => el("p", { className: "m02-struct__empty", text });
@@ -152,16 +146,14 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     apply();
   };
 
-  /** 산출근거 스프레드시트 — 부품을 늦게 받음 · 그 사이 열이 바뀌면 버림 */
+  /** 산출근거 스프레드시트 미리보기 — 보기만(고침은 [산출근거 수정] 이 여는 전체 화면) ·
+   * 부품을 늦게 받음 · 그 사이 열이 바뀌면 버림 */
   const paintBasis = async (mine: number): Promise<void> => {
     if (!basisDoc) return void basisHost.replaceChildren(note(TEXT.noBasis));
     try {
       const { createSpreadsheet } = await loadSpreadsheet();
       if (mine !== seq || !basisDoc) return;
-      basis = createSpreadsheet(basisHost, basisDoc, {
-        readOnly: !opts.isAdmin,
-        onChange: () => (basisDirty = true),
-      });
+      basis = createSpreadsheet(basisHost, basisDoc, { readOnly: true });
     } catch (error) {
       if (mine === seq) basisHost.replaceChildren(note(fill(TEXT.noSheet, why(error))));
     }
@@ -172,7 +164,8 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     drop();
     number.textContent = doc?.도번 || numbers[column ?? ""] || TEXT.noNumber;
     edit.hidden = !opts.isAdmin;
-    saveBasis.hidden = !opts.isAdmin || !basisDoc;
+    basisNo.textContent = basisNumber || TEXT.noTableNumber;
+    editBasis.hidden = !opts.isAdmin;
     basisHost.replaceChildren();
     void paintBasis(mine);
     if (!doc) {
@@ -206,7 +199,7 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     number.textContent = numbers[col.id] ?? TEXT.noNumber;
     doc = null;
     basisDoc = null;
-    basisVersion = "";
+    basisNumber = "";
     previewHost.replaceChildren();
     basisHost.replaceChildren();
     const [drawing, sheet] = await Promise.allSettled([
@@ -219,53 +212,28 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
     else if (numbers[col.id]) showToast(fill(TEXT.readFailed, why(drawing.reason)), "error");
     if (sheet.status === "fulfilled") {
       basisDoc = sheet.value.문서 as Workbook;
-      basisVersion = sheet.value.판 ?? "";
+      basisNumber = (sheet.value.문서 as { 표번?: string })?.표번 ?? "";
     }
     paintBody(mine);
   }
 
   const show = (colId: string | null, columns: StructureColumn[]): void => {
     if (colId === column) return;
-    const next = colId ? (columns.find((c) => c.id === colId) ?? null) : null;
-    if (!basisDirty) return void load(next);
-    void showConfirmDialog(TEXT.dirty).then((ok) => {
-      if (!ok) return void showToast(TEXT.kept, "info");
-      basisDirty = false;
-      void load(next);
-    });
+    void load(colId ? (columns.find((c) => c.id === colId) ?? null) : null);
   };
 
-  saveBasis.addEventListener("click", async () => {
-    const at = column;
-    if (!at || !basis || busy) return;
-    busy = true;
-    saveBasis.disabled = true;
-    try {
-      // 계산값은 서버가 같은 엔진으로 다시 풀어 적음(보낸 값은 버림)
-      const next = basis.getDoc();
-      const info = await saveTemplate("system", "basis", at, null, basisVersion, next);
-      basisVersion = info.판;
-      basisDoc = next;
-      basisDirty = false;
-      showToast(TEXT.saved, "success");
-    } catch (error) {
-      showToast(
-        error instanceof StaleError ? TEXT.stale : fill(TEXT.saveFailed, why(error)),
-        "error",
-      );
-    } finally {
-      busy = false;
-      saveBasis.disabled = false;
-    }
-  });
-
   edit.addEventListener("click", async () => {
     const at = column;
-    if (!at || busy) return;
-    if (basisDirty && !(await showConfirmDialog(TEXT.dirty))) return;
-    basisDirty = false;
+    if (!at) return;
     if (!(await opts.confirmLeave())) return;
-    opts.onEdit(at, columnLabel);
+    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");
   });
 
   return {

M02_MasterTemplete/M02_MasterTemplete_UI_Main.ts

@@ -143,9 +143,9 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
     const made = createStructurePanel({
       isAdmin,
       confirmLeave,
-      // 같은 페이지에서 그 구조물 도면을 CAD 편집으로 엶
-      onEdit: (column, label) => {
-        void open({ layer: "system", projectId: null, kind: "structure", name: column, label });
+      // 같은 페이지에서 그 열을 CAD·스프레드시트 전체 편집으로 엶
+      onEdit: (column, label, kind) => {
+        void open({ layer: "system", projectId: null, kind, name: column, label });
       },
     });
     extra.replaceChildren(made.root);
@@ -179,6 +179,20 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
       if (struct) sheet = editor as SheetEditorHandle;
       return;
     }
+    if (at.kind === "basis") {
+      // 산출근거 = 구조물집계표 열마다 한 스프레드시트 — 페이지 번들에 안 섞이게 이 화면을 열 때만
+      // `import()` 로 받음(계약 `spreadsheet_types.ts` 머리)
+      try {
+        const { createSpreadsheet } = await import("../A00_Common/spreadsheet/spreadsheet");
+        editor = createSpreadsheet(host, doc as Parameters<typeof createSpreadsheet>[1], {
+          readOnly,
+          onChange: () => (dirty = !readOnly),
+        });
+      } catch {
+        empty(L("M02_NoSpreadsheet"));
+      }
+      return;
+    }
     const mountDrawing = await findExport<(h: HTMLElement, d: unknown, o: object) => EditorHandle>(
       DRAWING_MODS,
       "mountDrawingTemplate",
@@ -226,10 +240,13 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
             )
           : got.문서;
       if (mine !== seq) return;
-      // 구조물 도면은 열 id 로 열리니 머리에 도번을 함께 보임
+      // 구조물 도면 · 산출근거는 열 id 로 열리니 머리에 도번 · 표번을 함께 보임
       if (next.kind === "structure") {
         const number = (got.문서 as StructureDoc)?.도번;
         if (number) title.textContent = `${number} · ${next.label ?? next.name}`;
+      } else if (next.kind === "basis") {
+        const number = (got.문서 as { 표번?: string })?.표번;
+        if (number) title.textContent = `${number} · ${next.label ?? next.name}`;
       }
       await mount(shown, next);
     } catch (error) {
@@ -245,11 +262,14 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
     const at = sel;
     try {
       const edited = editor ? await editor.getDoc() : loaded;
-      // 구조물 도면 저장은 `도면` 칸만 갈아 끼움 — 도번 · 산출근거는 읽은 그대로
+      // 구조물 도면 저장은 `도면` 칸만 갈아 끼움 — 도번 · 산출근거는 읽은 그대로.
+      // 산출근거는 스프레드시트 문서로 통째 갈아 끼우되 표번은 계약 밖(엔진이 모름)이라 옮겨 붙임.
       const doc =
         at.kind === "structure" && loaded
           ? { ...(loaded as StructureDoc), 도면: edited as StructureDoc["도면"] }
-          : edited;
+          : at.kind === "basis" && loaded
+            ? { ...(loaded as Record<string, unknown>), ...(edited as Record<string, unknown>) }
+            : edited;
       const info = await saveTemplate(at.layer, at.kind, at.name, at.projectId, version, doc);
       version = info.판;
       loaded = doc;