feat(M02): 저장 안 한 고침 물음 단추 셋 — 취소 · 버리고 넘어감 · 저장 후 넘어감, settle 카드 저장 실패 흠(86-1)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7
2026-10-08 12:01:53 +09:00
parent e25b9ddf2f
commit 245eaa77af
9 changed files with 267 additions and 71 deletions
@@ -12,6 +12,7 @@
 * ========================================================================== */

 import { createButton, el, showConfirmDialog } from "@ui/ui_template_elements";
+import { leaveOrStay } from "@ui/ui_template_leave_dialog";
 import { attachCollapsible } from "@ui/ui_template_collapsible";
 import { readStateRaw, writeStateRaw } from "../A00_Common/b_page_state";
 import type {
@@ -68,7 +69,7 @@ const TEXT = {
  noFieldNumber: "{value} 없음",
  noSheet: "스프레드시트를 못 띄움 — {value}",
  readFailed: "{value} 파일을 못 읽음 — {why}",
-  discard: "카드에 저장 안 한 고침이 있음 — 버리고 다른 항목을 열까요?",
+  discard: "카드에 저장 안 한 고침이 있음 — 버리고 넘어갈까?",
  pills: "알약",
  pillsTip: "아래 알약 줄 보임 · 숨김",
  take: "가져오기",
@@ -179,6 +180,9 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {

  const numberOf = (kind: CardKind, id: string): string => opts.numberOf?.(kind, id) ?? "";
  const anyDirty = (): boolean => cards.some((c) => c.saver.dirty());
+  const saveAll = async (): Promise<void> => {
+    for (const c of cards) if (c.saver.dirty() && !(await c.saver.run())) throw new Error();
+  };
  const reload = (): void => void load(column ? { id: column, label } : null, true);

  /** 카드 틀 하나 — 제목 옆 = ? · 제목 줄 오른쪽 = [저장] · [〇〇 수정](빈 단추 한 모양) · 부제 = 번호 · 이름 */
@@ -461,7 +465,12 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {

  async function load(col: { id: string; label: string } | null, again = false): Promise<void> {
    // 카드 고침을 저장 안 했으면 버릴지 물음(한 번) — 취소면 보던 열 그대로
-    if (!again && anyDirty() && col?.id !== column && !(await showConfirmDialog(TEXT.discard)))
+    if (
+      !again &&
+      anyDirty() &&
+      col?.id !== column &&
+      (await leaveOrStay(TEXT.discard, { save: saveAll, stillDirty: anyDirty })) === "stay"
+    )
      return;
    const mine = ++seq;
    drop();
@@ -530,9 +539,7 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
    },
    column: () => column,
    dirty: anyDirty,
-    saveAll: async () => {
-      for (const c of cards) if (c.saver.dirty() && !(await c.saver.run())) throw new Error();
-    },
+    saveAll,
    discard: () => {
      drop();
      opts.onDirty?.(false);
@@ -14,7 +14,8 @@
 * 글자는 이 파일에 둠(도면 부품 `M02_MasterTemplete_Drawing.ts` 와 같은 방식).
 * ========================================================================== */

-import { showConfirmDialog, showToast } from "@ui/ui_template_elements";
+import { showToast } from "@ui/ui_template_elements";
+import { leaveOrStay } from "@ui/ui_template_leave_dialog";
 import type { LinkOptions } from "../A00_Common/spreadsheet/spreadsheet_links";
 import {
  clearPart,
@@ -252,9 +253,12 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
    if ((col?.id ?? null) !== column && cards.dirty()) {
      // 카드에 저장 안 한 고침 — 버릴지 물음 · 머물면 표의 고른 열을 되돌림
      const from = column;
-      void showConfirmDialog(TEXT.discardCards).then((ok) => {
-        if (!ok) return void (from && opts.keepColumn?.(from));
-        cards.discard(); // 한 번 물었음 — 카드가 다시 묻지 않게
+      void leaveOrStay(TEXT.discardCards, {
+        save: cards.saveAll,
+        stillDirty: cards.dirty,
+        discard: cards.discard, // 한 번 물었음 — 카드가 다시 묻지 않게
+      }).then((got) => {
+        if (got === "stay") return void (from && opts.keepColumn?.(from));
        void load(col);
      });
      return;
@@ -272,7 +276,12 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
    const toNo = to && numbers[to.id]?.[PART_FIELD[kind]];
    if (!to || !toNo) return void showToast(TEXT.saveFirst, "error");
    // 카드에 저장 안 한 고침 — 가져온 뒤 카드를 다시 읽어 버려지니 먼저 물음
-    if (cards.dirty() && !(await showConfirmDialog(TEXT.discardCards))) return;
+    if (
+      cards.dirty() &&
+      (await leaveOrStay(TEXT.discardCards, { save: cards.saveAll, stillDirty: cards.dirty })) ===
+        "stay"
+    )
+      return;
    const target = `${toNo} ${columnHead(to)}`;
    const here = { layer: getActiveLayer(), owner: getActiveOwner() };
    const same = (from: From): boolean => from.layer === here.layer && from.owner === here.owner;
@@ -1,6 +1,6 @@
 /* =============================================================================
 * M02_MasterTemplete_TreePanel_Dialogs.ts
- * 구조물 라이브러리 오른쪽 클릭 메뉴가 띄우는 작은 창 — 글 받기 · 옮길 폴더 고르기 · 저장/버림 물음.
+ * 구조물 라이브러리 오른쪽 클릭 메뉴가 띄우는 작은 창 — 글 받기 · 옮길 폴더 고르기.
 * 모두 약속(Promise)으로 답함 — 닫기 · Esc · 바깥 누르기 = 취소(null / "cancel").
 * ========================================================================== */

@@ -183,36 +183,3 @@ export function askFolder(
    });
  });
 }
-
-export type Settle = "save" | "discard" | "cancel";
-
-/** 저장 안 한 표 고침 — 저장하고 계속 · 버리고 계속 · 취소 */
-export function askSettle(): Promise<Settle> {
-  return new Promise((resolve) => {
-    let done = false;
-    const finish = (value: Settle): void => {
-      if (done) return;
-      done = true;
-      resolve(value);
-    };
-    openModal({
-      title: L("M02_TreeUnsaved"),
-      closeLabel: L("M02_TreeCancel"),
-      dialogClass: "m02-modal m02-treedlg",
-      beforeClose: () => (finish("cancel"), true),
-      mount: (body, close) => {
-        const choose = (value: Settle) => () => {
-          finish(value);
-          close();
-        };
-        const save = createButton({ label: L("M02_TreeSaveGo"), variant: "filled" });
-        const discard = createButton({ label: L("M02_TreeDiscardGo"), variant: "danger" });
-        const cancel = createButton({ label: L("M02_TreeCancel"), variant: "ghost" });
-        save.addEventListener("click", choose("save"));
-        discard.addEventListener("click", choose("discard"));
-        cancel.addEventListener("click", choose("cancel"));
-        body.append(el("div", { className: "m02-side__row", children: [save, discard, cancel] }));
-      },
-    });
-  });
-}
@@ -6,6 +6,7 @@

 import { setLeaveGuard } from "../A00_Common/router";
 import { createButton, el, showConfirmDialog, showToast } from "@ui/ui_template_elements";
+import { leaveOrStay } from "@ui/ui_template_leave_dialog";
 import { loadingError, showLoading } from "@ui/ui_template_loading";
 import { t as L } from "@ui/ui_template_locale";
 import {
@@ -26,7 +27,6 @@ import {
  type StructureColumn,
  type StructurePanelHandle,
 } from "./M02_MasterTemplete_Structure";
-import { askSettle } from "./M02_MasterTemplete_TreePanel_Dialogs";
 import { buildAreaPanel, type AreaPanel } from "./M02_MasterTemplete_AreaPanel";
 import { createAreaToDrawing, sentRanges } from "./M02_MasterTemplete_AreaToDrawing";
 import { detailHelp, HELP_TITLE } from "./M02_MasterTemplete_CardHelp";
@@ -202,19 +202,26 @@ export function createMain(
    event.returnValue = "";
  };
  window.addEventListener("beforeunload", guard);
-  const confirmLeave = async (): Promise<boolean> => {
-    if (!busy()) return true; // 카드 고침(도면 · 엑셀)도 같은 물음
-    if (!(await showConfirmDialog(L("M02_DiscardConfirm")))) {
-      // 취소 — 초점을 시트(고른 칸 입력 자리) · 집계표 · 도면으로 돌려 키보드 그대로
-      host
-        .querySelector<HTMLElement>(".ss-input, .ui-sheet, iframe")
-        ?.focus({ preventScroll: true });
-      return false;
-    }
-    dirty = false;
-    toDrawing.drop();
-    return true;
+  /**
+   * 저장 안 한 고침 물음(떠나기 · 나무 고치기 한 몸) — 단추 셋 [취소] [버리고 넘어감] [저장 후 넘어감].
+   * "clean" = 고침 없음 · "saved" · "discarded" · false = 머묾(취소 · 저장 실패 · 판 다름 · 카드 저장 실패).
+   * 열린 양식이 없는 화면(옵션 정의 등)은 저장할 것이 없어 2단추 그대로.
+   */
+  const askUnsaved = async (message: string): Promise<false | "clean" | "saved" | "discarded"> => {
+    if (!busy()) return "clean"; // 카드 고침(도면 · 엑셀)도 같은 물음
+    const drop_ = (): void => {
+      dirty = false;
+      toDrawing.drop();
+    };
+    let got: "saved" | "discarded" | "stay";
+    if (sel) got = await leaveOrStay(message, { save: doSave, stillDirty: busy, discard: drop_ });
+    else got = (await showConfirmDialog(message)) ? (drop_(), "discarded") : "stay";
+    if (got !== "stay") return got;
+    // 머묾 — 초점을 시트(고른 칸 입력 자리) · 집계표 · 도면으로 돌려 키보드 그대로
+    host.querySelector<HTMLElement>(".ss-input, .ui-sheet, iframe")?.focus({ preventScroll: true });
+    return false;
  };
+  const confirmLeave = async (): Promise<boolean> => !!(await askUnsaved(L("M02_DiscardConfirm")));
  setLeaveGuard(confirmLeave); // 머리 메뉴 · 뒤로 가기로 떠날 때도 물음

  const showNotice = (nodes: (HTMLElement | string)[]): void => {
@@ -573,15 +580,9 @@ export function createMain(
  }

  async function settle(): Promise<false | "clean" | "changed"> {
-    if (!busy()) return "clean";
-    const choice = await askSettle();
-    if (choice === "cancel") return false;
-    if (choice === "save") {
-      await doSave();
-      return dirty ? false : "changed"; // 저장이 막히면(판 다름 등) 나무도 안 고침
-    }
-    dirty = false; // 버림 — 화면을 서버 그대로 다시 읽음
-    if (sel) await open(sel);
+    const got = await askUnsaved(L("M02_TreeUnsaved"));
+    if (got === false || got === "clean") return got;
+    if (got === "discarded" && sel) await open(sel); // 버림 — 화면을 서버 그대로 다시 읽음
    return "changed";
  }