feat(M02): 일위대가 라이브러리 화면 — 좌측 「일위대가 조합」 컨테이너 · 뿌리 셋 나무 · 조합 편집 · M01 컨테이너 뺌(PLAN 27-2b · 27-2c 화면)

- 좌측 「일위대가 조합」(구조물 조합 위) → 메인 칸 왼쪽 뿌리 셋 + 조합 나무(폴더 [구분, 상세구분] 깊이 2 · TreePanel 공용) · 오른쪽 목록 · 상세(옛 M01 조합 화면 옮김 · Labor_Edit)
- 나무 오른쪽 클릭: 폴더 더하기(2 단까지) · 조합 더하기(그 폴더 채운 빈 조합) · 이름 · 옮기기 · 지우기 · 조합 이름 바꾸기 서버 길 더함
- 해시 open=일위대가 로 진입 · 다른 뿌리를 누르면 그 뿌리 일위대가로
- 읽기만 뿌리는 저장 · 지우기 · 로직 더하기 없음
- TreePanel 에 maxDepth · item(부르는 말 · 새 항목 화면) 선택지 더함(구조물 라이브러리는 그대로)
- 조합 고르기(면적산출 옆 목록 · 일위대가 고르기)가 이 층이 쓸 수 있는 세 층 조합 · 알약은 /api/m02/combos/key/{키}/inputs
- M01 좌측 · 페이지에서 일위대가 조합 컨테이너 뺌
- 시험 test_m02_labor_tree(새) · test_m02_combo_layers 더함

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

M01_MasterData/M01_MasterData_UI_Combo.ts

@@ -1,433 +0,0 @@
-/* =============================================================================
- * M01_MasterData_UI_Combo.ts
- * 일위대가 조합 화면 — 왼쪽 컨테이너(구분 · 상세구분 거름) / 오른쪽 목록 · 상세
- * 상세 = 이름·구분·단위·비고 + 담은 로직 표(차례 · 키 · 이름 · 결과 단위 · 메모 · 순서) + 미리 보기
- * 저장·지우기는 서버 조합 마스터(`일위대가조합.json` · 키 UA) — 길은 `Combo_Api` 한 곳
- * ========================================================================== */
-
-import {
-  createButton,
-  createInputField,
-  el,
-  showConfirmDialog,
-  showToast,
-} from "@ui/ui_template_elements";
-import { ApiError, fetchLogics, type LogicSummary } from "./M01_MasterData_UI_Logic_Api";
-import {
-  deleteCombo,
-  editCombo,
-  fetchCombo,
-  fetchCombos,
-  newCombo,
-  type Combo,
-  type ComboSummary,
-} from "../M02_MasterTemplete/M02_MasterTemplete_Labor_Api";
-import { openLogicPicker } from "../M02_MasterTemplete/M02_MasterTemplete_Labor_Pick";
-import { buildPreview } from "../M02_MasterTemplete/M02_MasterTemplete_Labor_Preview";
-import { tc } from "../M02_MasterTemplete/M02_MasterTemplete_Labor_Text";
-import type { SideHandle } from "./M01_MasterData_UI_Side";
-import "./M01_MasterData_UI_Logic_Style.css";
-import "./M01_MasterData_UI_LogicLab_Style.css";
-import "../M02_MasterTemplete/M02_MasterTemplete_Labor.css";
-
-const FILTER_ID = "조합|";
-const blankCombo = (): Combo => ({
-  키: "",
-  이름: "",
-  구분: null,
-  상세구분: null,
-  단위: null,
-  담은로직: [],
-  출처: "자체",
-  소유: "현장",
-  본뜬키: null,
-  비고: null,
-});
-
-/** 서버가 준 까닭 — 422 는 검사 글 목록 · 409 는 낡은 판본 */
-function reason(error: unknown): string {
-  if (error instanceof ApiError && typeof error.detail === "object" && error.detail) {
-    const d = error.detail as { errors?: string[]; stale?: string[] };
-    // 서버 검사 글 머리(「파일.json · 키 」)는 떼고 보임 — 새로 만들 때 키는 아직 없는 번호라 헷갈림
-    if (d.errors)
-      return d.errors.map((x) => x.replace(/^\S+\.json · (U[AM]\d{6} )?/, "")).join(" / ");
-    if (d.stale) return tc("Stale");
-  }
-  return error instanceof Error ? error.message : tc("Load_Failed");
-}
-
-export interface ComboHandle {
-  /** 컨테이너를 펼칠 때 — 목록을 새로 받아 그림 */
-  show: () => Promise<void>;
-}
-
-export function mountM01Combo(
-  host: HTMLElement,
-  side: SideHandle,
-  onOpenLogic: (key: string) => void,
-  /** 왼쪽 거름 · 찾기를 만지면 — 다른 화면이 떠 있으면 이 화면으로 */
-  activate: () => void = () => {},
-): ComboHandle {
-  let items: ComboSummary[] = [];
-  let logics = new Map<string, LogicSummary>();
-  let pick = { sub: "", detail: "" };
-  /** 화면을 바꾼 횟수 — 늦게 온 답은 이 값이 달라졌으면 버림 */
-  let nav = 0;
-  /** 열어 둔 상세 — 다른 화면에 갔다 와도 그대로 돌아오게 기억 */
-  /** `saved` = 연 때의 모양 — 다시 그려도 「저장 안 한 고침」 판정이 안 풀리게 */
-  let current: { combo: Combo; version: string; saved: string } | null = null;
-  let logicsReady: Promise<void> = Promise.resolve();
-  let q = "";
-  const filterHost = el("div");
-  const find = createInputField({ type: "search", placeholder: tc("Search") });
-  find.input.addEventListener("input", () => {
-    q = find.input.value.trim().toLowerCase();
-    activate();
-    if (!current) drawList();
-  });
-  side.comboHost.replaceChildren(find.root, filterHost);
-  const view = el("div", { className: "m01-logic__editor m01-combo" });
-  host.replaceChildren(view);
-
-  /** 목록만 받음 — 로직 이름표(1300여 개)는 따로 받아 목록을 붙잡지 않음 */
-  const load = async (redraw = true): Promise<void> => {
-    const my = nav;
-    try {
-      items = await fetchCombos();
-    } catch (error) {
-      showToast(error instanceof Error ? error.message : tc("Load_Failed"), "error");
-    }
-    drawFilter();
-    if (redraw && my === nav) drawList();
-  };
-
-  const loadLogics = (): void => {
-    logicsReady = fetchLogics()
-      .then((all) => {
-        logics = new Map(all.map((x) => [x.키, x]));
-      })
-      .catch((error) =>
-        showToast(error instanceof Error ? error.message : tc("Load_Failed"), "error"),
-      );
-  };
-
-  const show = async (): Promise<void> => {
-    if (!logics.size) loadLogics();
-    if (!items.length && !current) {
-      view.replaceChildren(el("p", { className: "m01-logic__muted", text: tc("Loading") }));
-    }
-    await load(false);
-    if (!current) drawList();
-    await logicsReady;
-    if (current) draw(current.combo, current.version, current.saved);
-  };
-
-  /* --- 왼쪽 거름 --- */
-  const drawFilter = (): void => {
-    const subs = [...new Set(items.map((x) => x.구분).filter((v): v is string => !!v))].map(
-      (name) => ({
-        name,
-        book: null,
-        details: [...new Set(items.filter((x) => x.구분 === name).map((x) => x.상세구분))].filter(
-          (v): v is string => !!v,
-        ),
-      }),
-    );
-    filterHost.replaceChildren(
-      side.filter({
-        id: FILTER_ID,
-        store: "m01.filter.조합",
-        subs,
-        total: items.length,
-        subLabel: tc("Sub"),
-        detailLabel: tc("Detail"),
-        onPick: (sub, detail) => {
-          pick = { sub, detail };
-          activate();
-          drawList();
-        },
-      }),
-    );
-  };
-
-  /* --- 목록 --- */
-  const toolbar = (...more: HTMLElement[]): HTMLElement =>
-    el("div", {
-      className: "m01-logic__section-head",
-      children: [
-        createButton({
-          label: tc("New"),
-          variant: "filled",
-          onClick: () => draw(blankCombo(), ""),
-        }),
-        ...more,
-      ],
-    });
-
-  const drawList = (): void => {
-    nav++;
-    current = null;
-    const shown = items.filter(
-      (x) =>
-        (!pick.sub || x.구분 === pick.sub) &&
-        (!pick.detail || x.상세구분 === pick.detail) &&
-        (!q || `${x.키} ${x.이름}`.toLowerCase().includes(q)),
-    );
-    const heads = [
-      tc("Head_Key"),
-      tc("Head_Name"),
-      tc("Sub"),
-      tc("Detail"),
-      tc("Head_Unit"),
-      tc("Head_Count"),
-      tc("Head_Origin"),
-    ];
-    const rows = shown.map((x) => {
-      const tr = el("tr", {
-        className: "m01-master__table-row",
-        attrs: { "data-combo-key": x.키 },
-        children: [
-          x.키,
-          x.이름,
-          x.구분 ?? "",
-          x.상세구분 ?? "",
-          x.단위 ?? "",
-          String(x.count),
-          x.본뜬키 ?? tc("Origin_Self"),
-        ].map((v) => el("td", { text: v, attrs: { title: v } })),
-      });
-      tr.addEventListener("click", () => void open(x.키));
-      return tr;
-    });
-    view.replaceChildren(
-      toolbar(),
-      shown.length
-        ? el("div", {
-            className: "m01-master__grid-wrap",
-            children: [
-              el("table", {
-                className: "m01-master__grid",
-                children: [
-                  el("thead", {
-                    children: [el("tr", { children: heads.map((t) => el("th", { text: t })) })],
-                  }),
-                  el("tbody", { children: rows }),
-                ],
-              }),
-            ],
-          })
-        : el("p", { className: "m01-logic__muted", text: tc(items.length ? "NoMatch" : "Empty") }),
-    );
-  };
-
-  const open = async (key: string): Promise<void> => {
-    try {
-      const my = ++nav;
-      const one = await fetchCombo(key);
-      await logicsReady;
-      if (my !== nav) return;
-      draw(one.combo, one.version);
-    } catch (error) {
-      showToast(error instanceof Error ? error.message : tc("Load_Failed"), "error");
-    }
-  };
-
-  /* --- 상세 --- */
-  const draw = (combo: Combo, version: string, saved = JSON.stringify(combo)): void => {
-    nav++;
-    current = { combo, version, saved };
-    const field = (label: string, name: "이름" | "구분" | "상세구분" | "단위" | "비고") => {
-      const f = createInputField({ type: "text", label });
-      f.input.value = combo[name] ?? "";
-      f.input.setAttribute("data-combo-field", name);
-      if (name === "이름") f.input.maxLength = 60; // 서버 한도(`MAX_이름`)와 같음
-      f.input.addEventListener("input", () => {
-        const v = f.input.value;
-        if (name === "이름") combo.이름 = v;
-        else combo[name] = v || null;
-      });
-      return f.root;
-    };
-    const preview = buildPreview(() => combo);
-    const table = el("div", { className: "m01-master__grid-wrap" });
-    const drawTable = (): void => {
-      const move = (i: number, d: number): void => {
-        const j = i + d;
-        if (j < 0 || j >= combo.담은로직.length) return;
-        [combo.담은로직[i], combo.담은로직[j]] = [combo.담은로직[j], combo.담은로직[i]];
-        drawTable();
-      };
-      const trs = combo.담은로직.map((row, i) => {
-        const info = logics.get(row.로직);
-        const memo = createInputField({ type: "text" });
-        memo.input.value = row.메모 ?? "";
-        memo.input.addEventListener("input", () => (row.메모 = memo.input.value || null));
-        const name = el("button", {
-          className: "ui-btn ui-btn--ghost ui-btn--sm",
-          text: info?.이름 ?? row.로직,
-          attrs: { type: "button", title: tc("Open") },
-        });
-        name.addEventListener("click", async () => {
-          if (JSON.stringify(combo) !== saved && !(await showConfirmDialog(tc("LeaveAsk")))) return;
-          onOpenLogic(row.로직);
-        });
-        const btns = el("div", {
-          className: "m01-logic__chips",
-          children: [
-            createButton({
-              label: tc("Up"),
-              variant: "ghost",
-              size: "sm",
-              onClick: () => move(i, -1),
-            }),
-            createButton({
-              label: tc("Down"),
-              variant: "ghost",
-              size: "sm",
-              onClick: () => move(i, 1),
-            }),
-            createButton({
-              label: tc("Remove"),
-              variant: "ghost",
-              size: "sm",
-              onClick: () => {
-                combo.담은로직.splice(i, 1);
-                drawTable();
-              },
-            }),
-          ],
-        });
-        return el("tr", {
-          attrs: { "data-combo-logic": row.로직 },
-          children: [
-            el("td", { text: String(i + 1) }),
-            el("td", { text: row.로직 }),
-            el("td", { children: [name] }),
-            el("td", { text: info?.결과단위 ?? "" }),
-            el("td", { children: [memo.root] }),
-            el("td", { children: [btns] }),
-          ],
-        });
-      });
-      const heads = [
-        tc("Col_Order"),
-        tc("Col_Key"),
-        tc("Col_Name"),
-        tc("Col_Unit"),
-        tc("Col_Memo"),
-        tc("Col_Move"),
-      ];
-      table.replaceChildren(
-        el("table", {
-          className: "m01-master__grid",
-          children: [
-            el("thead", {
-              children: [el("tr", { children: heads.map((t) => el("th", { text: t })) })],
-            }),
-            el("tbody", { children: trs }),
-          ],
-        }),
-        ...(trs.length ? [] : [el("p", { className: "m01-logic__muted", text: tc("NoLogic") })]),
-      );
-      void preview.redraw();
-    };
-
-    const add = createButton({
-      label: tc("AddLogic"),
-      variant: "filled",
-      onClick: () =>
-        openLogicPicker((x) => {
-          if (!logics.has(x.키)) logics.set(x.키, x);
-          combo.담은로직.push({ 로직: x.키, 메모: null });
-          drawTable();
-        }),
-    });
-    const save = createButton({
-      label: tc("Save"),
-      variant: "filled",
-      onClick: async () => {
-        if (!combo.이름.trim()) return showToast(tc("NeedName"), "error");
-        const my = nav;
-        try {
-          const key = combo.키 ? combo.키 : (await newCombo(combo)).key;
-          if (combo.키) await editCombo(combo.키, version, combo);
-          showToast(tc("Saved"), "success");
-          await load(false);
-          if (my !== nav) {
-            if (current?.combo === combo) current = null; // 저장 사이에 나감 — 옛 판본을 붙들지 않음
-            return;
-          }
-          await open(key);
-        } catch (error) {
-          showToast(reason(error), "error");
-        }
-      },
-    });
-    const remove = createButton({
-      label: tc("Delete"),
-      variant: "ghost",
-      onClick: async () => {
-        if (
-          !combo.키 ||
-          !(await showConfirmDialog(`${combo.키} ${combo.이름} — ${tc("DeleteAsk")}`))
-        )
-          return;
-        try {
-          await deleteCombo(combo.키, version);
-          showToast(tc("Deleted"), "success");
-          await load();
-        } catch (error) {
-          showToast(reason(error), "error");
-        }
-      },
-    });
-    const back = createButton({
-      label: "←",
-      variant: "ghost",
-      onClick: async () => {
-        if (JSON.stringify(combo) !== saved && !(await showConfirmDialog(tc("BackAsk")))) return;
-        drawList();
-      },
-    });
-    const origin = createInputField({ type: "text", label: tc("Head_Origin") });
-    origin.input.value = combo.본뜬키 ?? tc("Origin_Self");
-    origin.input.readOnly = true;
-    origin.input.setAttribute("data-combo-origin", combo.본뜬키 ?? "");
-    view.replaceChildren(
-      el("div", {
-        className: "m01-logic__section-head",
-        children: [back, el("h3", { text: combo.키 || tc("New") }), remove, save],
-      }),
-      el("section", {
-        className: "m01lab__box m01-logic__section",
-        children: [
-          el("div", {
-            className: "m01lab__info",
-            children: [
-              field(tc("Head_Name"), "이름"),
-              field(tc("Sub"), "구분"),
-              field(tc("Detail"), "상세구분"),
-              field(tc("Head_Unit"), "단위"),
-              field(tc("Head_Note"), "비고"),
-              origin.root,
-            ],
-          }),
-        ],
-      }),
-      el("section", {
-        className: "m01lab__box m01-logic__section",
-        children: [
-          el("div", {
-            className: "m01-logic__section-head",
-            children: [el("h3", { text: tc("Logics_Title") }), add],
-          }),
-          table,
-        ],
-      }),
-      preview.root,
-    );
-    drawTable();
-  };
-
-  return { show };
-}