From 0b158636ccb6d8233aac4a914db2ae472e91f254 Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Sun, 4 Oct 2026 17:23:56 +0900
Subject: [PATCH] =?UTF-8?q?feat(M02):=20=EB=A9=B4=EC=A0=81=EC=82=B0?=
 =?UTF-8?q?=EC=B6=9C=20=EC=B9=B8=20=EC=A7=80=EC=A0=95=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=20AreaLink=20=E2=80=94=20=EC=A7=80=EA=B8=88=20=EA=B3=A0?=
 =?UTF-8?q?=EB=A5=B8=20=EC=B9=B8=EC=9C=BC=EB=A1=9C=20=C2=B7=20=EC=A3=BC?=
 =?UTF-8?q?=EC=86=8C=EB=A1=9C=20=EC=9E=87=EA=B8=B0=20=C2=B7=20=ED=92=80?=
 =?UTF-8?q?=EA=B8=B0=20=C2=B7=20=EC=A0=95=EB=B3=B8=EC=9D=80=20=EB=A9=B4?=
 =?UTF-8?q?=EC=A0=81=20=EB=AC=B8=EC=84=9C=20=EC=97=B0=EA=B2=B0(setLink)=20?=
 =?UTF-8?q?(PLAN=2039-4=20D5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W4uKaV4ZBhsJN4GHG7yRj4
---
 .../M02_MasterTemplete_AreaLink.ts            | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 M02_MasterTemplete/M02_MasterTemplete_AreaLink.ts

diff --git a/M02_MasterTemplete/M02_MasterTemplete_AreaLink.ts b/M02_MasterTemplete/M02_MasterTemplete_AreaLink.ts
new file mode 100644
index 000000000..9bd76f293
--- /dev/null
+++ b/M02_MasterTemplete/M02_MasterTemplete_AreaLink.ts
@@ -0,0 +1,107 @@
+/* =============================================================================
+ * M02_MasterTemplete_AreaLink.ts
+ * 면적산출 상세 — 칸 지정 모달(PLAN 39-4 D5). 오른쪽 패널의 담은 로직 · 자재 줄을 누르면 엶.
+ * 그 줄 알약 키(로직 물량 「이름|단위」 · 자재 「자재|MT키」)를 면적산출 칸에 잇기 · 옮기기 · 풀기.
+ * 정본 = 면적산출 문서 `연결` 한 곳 — 스프레드시트 손잡이 `setLink`(알약 누름과 같은 규칙 · 되돌리기 됨)라
+ * 아래 알약 줄 · 칸 세모 · 패널 수량이 같이 따라감. 손 입력 수량은 일위대가 몫(여기 없음) · 저장은 [저장].
+ * ========================================================================== */
+
+import { createButton, createInputField, el } from "@ui/ui_template_elements";
+import { openModal } from "@ui/ui_template_modal";
+import type { LinkInfo, SpreadsheetHandle } from "../A00_Common/spreadsheet/spreadsheet";
+
+const TEXT = {
+  title: "칸 지정 — {value}",
+  close: "닫기",
+  now: "지금 연결",
+  none: "연결 없음",
+  picked: "지금 고른 칸으로 ({value})",
+  address: "칸 주소",
+  hint: "예 B6",
+  link: "잇기",
+  unlink: "풀기",
+  bad: "칸 주소가 틀림 — 예 B6",
+  readOnly: "읽기만 — 고칠 수 없음",
+};
+
+const fill = (text: string, value: string): string => text.replace("{value}", value);
+
+export interface AreaLinkOptions {
+  /** 줄 이름(모달 제목) */
+  label: string;
+  /** 알약 키 */
+  key: string;
+  /** 연결에 같이 적을 이름 · 단위 · 자재 */
+  info: LinkInfo;
+  sheet: SpreadsheetHandle;
+  /** 시트에서 지금 고른 칸(A1) */
+  picked: () => string;
+  readOnly: boolean;
+}
+
+/** 지금 연결 칸 · 값 글 — 「B6 = 12.5 ㎡」 · 없으면 null */
+function linkedText(opts: AreaLinkOptions): string | null {
+  const link = opts.sheet
+    .getDoc()
+    .시트.flatMap((s) => s.연결 ?? [])
+    .find((l) => l.키 === opts.key);
+  if (!link) return null;
+  const value = opts.sheet.getLinkedValues()[opts.key];
+  return [link.칸, "=", String(value ?? ""), opts.info.단위 ?? ""].join(" ").trim();
+}
+
+export function openAreaLink(opts: AreaLinkOptions): void {
+  const { close } = openModal({
+    title: fill(TEXT.title, opts.label),
+    closeLabel: TEXT.close,
+    dialogClass: "m02-modal m02-area-link",
+    mount: (body) => {
+      const now = el("p", { className: "m02-area-link__now" });
+      const paint = (): void => {
+        const text = linkedText(opts);
+        now.textContent = `${TEXT.now} · ${text ?? TEXT.none}`;
+        unlink.disabled = opts.readOnly || !text;
+      };
+      const done = (cell: string | null): boolean => {
+        if (!opts.sheet.setLink(opts.key, cell, opts.info)) return false;
+        close();
+        return true;
+      };
+      const here = opts.picked();
+      const pick = createButton({
+        label: fill(TEXT.picked, here),
+        variant: "filled",
+        size: "sm",
+        onClick: () => void done(here),
+      });
+      const address = createInputField({ label: TEXT.address, placeholder: TEXT.hint });
+      const link = createButton({
+        label: TEXT.link,
+        variant: "ghost",
+        size: "sm",
+        onClick: () => {
+          if (!done(address.input.value)) address.setError(TEXT.bad);
+        },
+      });
+      const unlink = createButton({
+        label: TEXT.unlink,
+        variant: "ghost",
+        size: "sm",
+        onClick: () => void done(null),
+      });
+      address.input.addEventListener("input", () => address.setError(undefined));
+      address.input.addEventListener("keydown", (ev) => ev.key === "Enter" && link.click());
+      pick.disabled = link.disabled = address.input.disabled = opts.readOnly;
+      paint();
+      body.append(
+        now,
+        ...(opts.readOnly
+          ? [el("p", { className: "m02-struct__empty", text: TEXT.readOnly })]
+          : []),
+        el("div", { className: "m02-area-link__row", children: [pick, unlink] }),
+        el("div", { className: "m02-area-link__row", children: [address.root, link] }),
+      );
+      if (!opts.readOnly) address.input.focus();
+    },
+  });
+}