feat(M02-일위대가조합): 조합 다이어그램 - 로직별 넣을 값 → 로직 카드 → 비용 구분 칸 · 미리 보기와 값 한 벌 · 카드 누르면 단가산출 로직 화면

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

M02_MasterTemplete/M02_MasterTemplete_Labor_Edit.ts

@@ -12,7 +12,10 @@ import {
   showConfirmDialog,
   showToast,
 } from "@ui/ui_template_elements";
+import { ROUTES } from "@config/config_frontend";
+import { navigateTo } from "../A00_Common/router";
 import { ApiError, type LogicSummary } from "../M01_MasterData/M01_MasterData_UI_Logic_Api";
+import { setPendingLogicKey } from "../M01_MasterData/M01_MasterData_UI_Side";
 import {
   deleteCombo,
   editCombo,
@@ -23,6 +26,7 @@ import {
   type ComboSummary,
   type LaborScope,
 } from "./M02_MasterTemplete_Labor_Api";
+import { diagramTitle, renderComboDiagram } from "./M02_MasterTemplete_Labor_Diagram";
 import { openLogicPicker } from "./M02_MasterTemplete_Labor_Pick";
 import { buildPreview } from "./M02_MasterTemplete_Labor_Preview";
 import { tc } from "./M02_MasterTemplete_Labor_Text";
@@ -212,6 +216,30 @@ export function createLaborEditor(opt: LaborEditOptions): LaborEditor {
       return f.root;
     };
     const preview = buildPreview(() => combo);
+    // 다이어그램 — 미리 보기와 값 한 벌(넣은 값 · 결과) · 보기만 · 로직 카드 누르면 단가산출 로직 화면
+    const dgHost = el("div");
+    const dgBox = el("details", {
+      className: "m01lab__box m01-logic__section m02-labor__dg",
+      attrs: { open: "" },
+      children: [el("summary", { text: diagramTitle() }), dgHost],
+    });
+    const drawDg = (): void => {
+      if (dgBox.open)
+        renderComboDiagram(dgHost, preview.data(), {
+          focusInput: preview.focusInput,
+          openLogic: async (logic) => {
+            if (dirty() && !(await showConfirmDialog(tc("LeaveAsk")))) return;
+            setPendingLogicKey(logic);
+            navigateTo(ROUTES.M01_MASTER_DATA);
+          },
+        });
+    };
+    let dgTimer = 0;
+    preview.onUpdate(() => {
+      window.clearTimeout(dgTimer);
+      dgTimer = window.setTimeout(drawDg, 120);
+    });
+    dgBox.addEventListener("toggle", drawDg);
     const table = el("div", { className: "m01-master__grid-wrap" });
     const drawTable = (): void => {
       const move = (i: number, d: number): void => {
@@ -381,6 +409,7 @@ export function createLaborEditor(opt: LaborEditOptions): LaborEditor {
           table,
         ],
       }),
+      dgBox,
       preview.root,
     );
     drawTable();