feat(M01): 일위대가 조합 화면 뼈대 — 왼쪽 컨테이너 · 목록 · 상세 · 로직 더하기 · 미리 보기

- 왼쪽 패널 「일위대가 조합」 컨테이너(단가산출 로직 아래) · 구분/상세구분 거름 · 새 조합 · 지우기 · 저장
- 상세: 이름·구분·단위·비고 + 담은 로직 표(올리기/내리기/빼기) · 로직 줄을 누르면 단가산출 로직 상세로 감
- 로직 더하기 창: 구분 → 상세구분 → 찾기로 하나씩 고름
- 미리 보기: 담은 로직별 입력값으로 계산해 노무비·재료비·경비 합계(보기만)
- 서버 길(조합 목록·저장·지우기)은 아직 없어 Combo_Api 한 곳에 가정 이름으로 둠

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

M01_MasterData/M01_MasterData_UI_Combo.ts

@@ -0,0 +1,314 @@
+/* =============================================================================
+ * M01_MasterData_UI_Combo.ts
+ * 일위대가 조합 화면 — 왼쪽 컨테이너(구분 · 상세구분 거름) / 오른쪽 목록 · 상세
+ * 상세 = 이름·구분·단위·비고 + 담은 로직 표(차례 · 키 · 이름 · 결과 단위 · 메모 · 순서) + 미리 보기
+ * 저장·지우기는 서버 조합 마스터(`일위대가조합.json` · 키 UA) — 길은 `Combo_Api` 한 곳
+ * ========================================================================== */
+
+import {
+  createButton,
+  createInputField,
+  el,
+  showConfirmDialog,
+  showToast,
+} from "@ui/ui_template_elements";
+import { fetchLogics, type LogicSummary } from "./M01_MasterData_UI_Logic_Api";
+import {
+  deleteCombo,
+  fetchCombo,
+  fetchCombos,
+  saveCombo,
+  type Combo,
+  type ComboSummary,
+} from "./M01_MasterData_UI_Combo_Api";
+import { openLogicPicker } from "./M01_MasterData_UI_Combo_Pick";
+import { buildPreview } from "./M01_MasterData_UI_Combo_Preview";
+import { tc } from "./M01_MasterData_UI_Combo_Text";
+import type { SideHandle } from "./M01_MasterData_UI_Side";
+import "./M01_MasterData_UI_Logic_Style.css";
+import "./M01_MasterData_UI_LogicLab_Style.css";
+
+const FILTER_ID = "조합|";
+const blankCombo = (): Combo => ({
+  키: "",
+  이름: "",
+  구분: "",
+  상세구분: "",
+  단위: "",
+  비고: "",
+  로직: [],
+});
+
+export interface ComboHandle {
+  /** 컨테이너를 펼칠 때 — 목록을 새로 받아 그림 */
+  show: () => Promise<void>;
+}
+
+export function mountM01Combo(
+  host: HTMLElement,
+  side: SideHandle,
+  onOpenLogic: (key: string) => void,
+): ComboHandle {
+  let items: ComboSummary[] = [];
+  let logics = new Map<string, LogicSummary>();
+  let pick = { sub: "", detail: "" };
+  const filterHost = el("div");
+  side.comboHost.replaceChildren(filterHost);
+  const view = el("div", { className: "m01-logic__editor" });
+  host.replaceChildren(view);
+
+  const load = async (): Promise<void> => {
+    try {
+      const [combos, all] = await Promise.all([fetchCombos(), fetchLogics()]);
+      items = combos;
+      logics = new Map(all.map((x) => [x.키, x]));
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : tc("Load_Failed"), "error");
+    }
+    drawFilter();
+    drawList();
+  };
+
+  /* --- 왼쪽 거름 --- */
+  const drawFilter = (): void => {
+    const subs = [...new Set(items.map((x) => x.구분).filter(Boolean))].map((name) => ({
+      name,
+      book: null,
+      details: [...new Set(items.filter((x) => x.구분 === name).map((x) => x.상세구분))].filter(
+        Boolean,
+      ),
+    }));
+    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 };
+          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 => {
+    const shown = items.filter(
+      (x) => (!pick.sub || x.구분 === pick.sub) && (!pick.detail || x.상세구분 === pick.detail),
+    );
+    const heads = [
+      tc("Head_Key"),
+      tc("Head_Name"),
+      tc("Sub"),
+      tc("Detail"),
+      tc("Head_Unit"),
+      tc("Head_Count"),
+    ];
+    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.로직수)].map((v) =>
+          el("td", { text: 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("Empty") }),
+    );
+  };
+
+  const open = async (key: string): Promise<void> => {
+    try {
+      draw(await fetchCombo(key));
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : tc("Load_Failed"), "error");
+    }
+  };
+
+  /* --- 상세 --- */
+  const draw = (combo: Combo): void => {
+    const field = (label: string, name: "이름" | "구분" | "상세구분" | "단위" | "비고") => {
+      const f = createInputField({ type: "text", label });
+      f.input.value = combo[name];
+      f.input.setAttribute("data-combo-field", name);
+      f.input.addEventListener("input", () => (combo[name] = f.input.value));
+      return f.root;
+    };
+    const preview = buildPreview(() => combo.로직);
+    const table = el("div");
+    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));
+        const name = el("button", {
+          className: "ui-btn ui-btn--ghost",
+          text: info?.이름 ?? row.키,
+          attrs: { type: "button", title: tc("Open") },
+        });
+        name.addEventListener("click", () => onOpenLogic(row.키));
+        const btns = el("div", {
+          className: "m01-logic__chips",
+          children: [
+            createButton({ label: tc("Up"), variant: "ghost", onClick: () => move(i, -1) }),
+            createButton({ label: tc("Down"), variant: "ghost", onClick: () => move(i, 1) }),
+            createButton({
+              label: tc("Remove"),
+              variant: "ghost",
+              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.키, 메모: "", 입력: {} });
+          drawTable();
+        }),
+    });
+    const save = createButton({
+      label: tc("Save"),
+      variant: "filled",
+      onClick: async () => {
+        if (!combo.이름.trim()) return showToast(tc("NeedName"), "error");
+        try {
+          const saved = await saveCombo(combo);
+          showToast(tc("Saved"), "success");
+          await load();
+          draw(saved);
+        } catch (error) {
+          showToast(error instanceof Error ? error.message : tc("Load_Failed"), "error");
+        }
+      },
+    });
+    const remove = createButton({
+      label: tc("Delete"),
+      variant: "ghost",
+      onClick: async () => {
+        if (!combo.키 || !(await showConfirmDialog(tc("DeleteAsk")))) return;
+        try {
+          await deleteCombo(combo.키);
+          showToast(tc("Deleted"), "success");
+          await load();
+        } catch (error) {
+          showToast(error instanceof Error ? error.message : tc("Load_Failed"), "error");
+        }
+      },
+    });
+    const back = createButton({ label: "←", variant: "ghost", onClick: () => drawList() });
+    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"), "비고"),
+            ],
+          }),
+        ],
+      }),
+      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: load };
+}

M01_MasterData/M01_MasterData_UI_Combo_Api.ts

@@ -0,0 +1,56 @@
+/* =============================================================================
+ * M01_MasterData_UI_Combo_Api.ts
+ * 일위대가 조합 화면이 부르는 서버 길 — 조합 마스터 `일위대가조합.json`(키 UA)
+ * 길 이름은 계약(PLAN 4-2)이 오면 이 파일만 맞춤 · 미리 보기는 로직마다 `/calc` 를 불러 화면에서 합침
+ * ========================================================================== */
+
+import { API_BASE_URL } from "@config/config_frontend";
+import { ApiError } from "./M01_MasterData_UI_Logic_Api";
+
+/** 조합에 담은 로직 한 줄 — 입력 = 그 로직을 셀 때 넣을 값 */
+export interface ComboLogic {
+  키: string;
+  메모: string;
+  입력: Record<string, string>;
+}
+export interface Combo {
+  키: string;
+  이름: string;
+  구분: string;
+  상세구분: string;
+  단위: string;
+  비고: string;
+  로직: ComboLogic[];
+}
+export interface ComboSummary {
+  키: string;
+  이름: string;
+  구분: string;
+  상세구분: string;
+  단위: string;
+  로직수: number;
+}
+
+async function request<T>(path: string, body?: unknown): Promise<T> {
+  const response = await fetch(`${API_BASE_URL}/m01${path}`, {
+    method: body === undefined ? "GET" : "POST",
+    credentials: "include",
+    headers: { "Content-Type": "application/json" },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+  const data = (await response.json().catch(() => ({}))) as { detail?: unknown } & T;
+  if (!response.ok) throw new ApiError(response.status, data.detail ?? response.statusText);
+  return data;
+}
+
+export const fetchCombos = (): Promise<ComboSummary[]> =>
+  request<{ combos: ComboSummary[] }>("/combos").then((d) => d.combos);
+
+export const fetchCombo = (key: string): Promise<Combo> =>
+  request<{ combo: Combo }>(`/combo?key=${encodeURIComponent(key)}`).then((d) => d.combo);
+
+/** 키가 비면 새 조합 — 서버가 다음 번호(UA…)를 줌 */
+export const saveCombo = (combo: Combo): Promise<Combo> =>
+  request<{ combo: Combo }>("/combo/save", { combo }).then((d) => d.combo);
+
+export const deleteCombo = (key: string): Promise<unknown> => request("/combo/delete", { key });

M01_MasterData/M01_MasterData_UI_Combo_Pick.ts

@@ -0,0 +1,116 @@
+/* =============================================================================
+ * M01_MasterData_UI_Combo_Pick.ts
+ * [로직 더하기] 창 — 구분 → 상세구분 → 찾기로 사용자가 로직을 하나씩 고름(자동 추천 없음)
+ * ========================================================================== */
+
+import {
+  createButton,
+  createInputField,
+  createSelectField,
+  el,
+  showToast,
+} from "@ui/ui_template_elements";
+import { t as L } from "@ui/ui_template_locale";
+import {
+  fetchLogics,
+  fetchLogicSubs,
+  type LogicSummary,
+  type SubBrief,
+} from "./M01_MasterData_UI_Logic_Api";
+import { tc } from "./M01_MasterData_UI_Combo_Text";
+
+const opts = (values: string[]): { value: string; text: string }[] =>
+  [L("M01_All"), ...values].map((v, i) => ({ value: i ? v : "", text: v }));
+
+export function openLogicPicker(done: (logic: LogicSummary) => void): void {
+  const subs: SubBrief[] = [];
+  let all: LogicSummary[] = [];
+  const sub = createSelectField({ options: opts([]), compact: true, label: tc("Sub") });
+  const detail = createSelectField({ options: opts([]), compact: true, label: tc("Detail") });
+  detail.select.disabled = true;
+  const searchField = createInputField({ type: "search", placeholder: tc("Pick_Search") });
+  const list = el("div", { className: "m01-logic__pick-list" });
+  const hint = el("p", { className: "m01-logic__muted", text: tc("Pick_Hint") });
+  const close = (): void => backdrop.remove();
+
+  const find = (): void => {
+    const q = searchField.input.value.trim().toLowerCase();
+    const found = all.filter(
+      (x) =>
+        (!sub.select.value || x.구분 === sub.select.value) &&
+        (!detail.select.value || x.상세구분 === detail.select.value) &&
+        (!q || `${x.키} ${x.이름}`.toLowerCase().includes(q)),
+    );
+    hint.textContent = found.length ? `${found.length} / ${all.length}` : tc("Pick_None");
+    list.replaceChildren(
+      ...found.slice(0, 100).map((x) => {
+        const row = el("button", {
+          className: "m01-logic__pick-row m01-logic__pick-row--button",
+          attrs: { type: "button", "data-pick": x.키 },
+          children: [
+            el("div", {
+              className: "m01-logic__stack",
+              children: [
+                el("strong", { text: x.이름 }),
+                el("span", {
+                  className: "m01-logic__muted",
+                  text: `${x.키} · ${x.구분} ${x.상세구분}`.trim(),
+                }),
+              ],
+            }),
+            el("span", { text: `${x.결과단위}${x.blocked ? ` · ${tc("Pick_Blocked")}` : ""}` }),
+          ],
+        });
+        row.addEventListener("click", () => {
+          close();
+          done(x);
+        });
+        return row;
+      }),
+    );
+  };
+  sub.select.addEventListener("change", () => {
+    const d = subs.find((s) => s.name === sub.select.value)?.details ?? [];
+    detail.setOptions(opts(d), "");
+    detail.select.disabled = d.length === 0;
+  });
+
+  const dialog = el("div", {
+    className: "m01-logic__pick",
+    attrs: { role: "dialog", "aria-label": tc("Pick_Title") },
+    children: [
+      el("div", {
+        className: "m01-logic__section-head",
+        children: [
+          el("h3", { text: tc("Pick_Title") }),
+          createButton({ label: tc("Pick_Close"), variant: "ghost", onClick: close }),
+        ],
+      }),
+      el("div", {
+        className: "m01-logic__filters",
+        children: [
+          sub.root,
+          detail.root,
+          searchField.root,
+          createButton({ label: tc("Pick_Find"), variant: "filled", onClick: find }),
+        ],
+      }),
+      hint,
+      list,
+    ],
+  });
+  const backdrop = el("div", { className: "m01-logic__backdrop", children: [dialog] });
+  backdrop.addEventListener("click", (ev) => ev.target === backdrop && close());
+  backdrop.addEventListener("keydown", (ev) => ev.key === "Escape" && close());
+  document.body.append(backdrop);
+
+  void Promise.all([fetchLogicSubs(), fetchLogics()])
+    .then(([s, l]) => {
+      subs.push(...s);
+      all = l;
+      sub.setOptions(opts(s.map((x) => x.name)), "");
+    })
+    .catch((error) =>
+      showToast(error instanceof Error ? error.message : tc("Load_Failed"), "error"),
+    );
+}

M01_MasterData/M01_MasterData_UI_Combo_Preview.ts

@@ -0,0 +1,148 @@
+/* =============================================================================
+ * M01_MasterData_UI_Combo_Preview.ts
+ * 조합 미리 보기 — 담은 로직 저마다 입력값으로 `/calc` 를 불러 노무비·재료비·경비로 갈라 합침(보기만 · 저장 없음)
+ * ========================================================================== */
+
+import { createInputField, createSelectField, el } from "@ui/ui_template_elements";
+import { fetchLogic, runCalc, type LogicInput } from "./M01_MasterData_UI_Logic_Api";
+import type { ComboLogic } from "./M01_MasterData_UI_Combo_Api";
+import { tc, type ComboTextKey } from "./M01_MasterData_UI_Combo_Text";
+
+const COSTS = ["노무비", "재료비", "경비"] as const;
+type Costs = Record<(typeof COSTS)[number], number>;
+const LABEL: Record<(typeof COSTS)[number], ComboTextKey> = {
+  노무비: "Prev_Labor",
+  재료비: "Prev_Material",
+  경비: "Prev_Expense",
+};
+
+const num = (v: string): number | string => (v.trim() !== "" && !isNaN(Number(v)) ? Number(v) : v);
+const fmt = (n: number): string => n.toLocaleString("ko-KR", { maximumFractionDigits: 4 });
+const total = (c: Costs): number => c.노무비 + c.재료비 + c.경비;
+const blank = (): Costs => ({ 노무비: 0, 재료비: 0, 경비: 0 });
+
+/** 로직 입력 정의 → 처음 값(고르기 첫째 · 범위 아래끝) */
+const initial = (i: LogicInput): string => String(i.고르기?.[0] ?? i.범위?.[0] ?? "");
+
+/** 입력 칸 — 바꾸면 그 줄의 입력에 바로 적음(조합과 함께 저장됨) */
+function inputCell(input: LogicInput, row: ComboLogic): HTMLElement {
+  const value = row.입력[input.이름] ?? initial(input);
+  row.입력[input.이름] = value;
+  const choices = input.고르기?.map((v) => ({ value: String(v), text: String(v) }));
+  const field = choices
+    ? createSelectField({ options: choices, value, compact: true, label: input.이름 })
+    : createInputField({ type: "text", label: input.이름 });
+  const control = "select" in field ? field.select : field.input;
+  control.value = value;
+  control.setAttribute("data-input", `${row.키}|${input.이름}`);
+  control.addEventListener("input", () => (row.입력[input.이름] = control.value));
+  control.addEventListener("change", () => (row.입력[input.이름] = control.value));
+  return field.root;
+}
+
+export interface PreviewHandle {
+  root: HTMLElement;
+  /** 담은 로직이 바뀐 뒤 입력 칸을 다시 그림 */
+  redraw: () => Promise<void>;
+}
+
+export function buildPreview(rows: () => ComboLogic[]): PreviewHandle {
+  const inputs = el("div", { className: "m01-logic__stack" });
+  const out = el("div", { attrs: { "data-combo": "preview" } });
+  const rowOf = (cells: string[], note = "", bold = false): HTMLElement =>
+    el("tr", {
+      className: bold ? "m01lab__subtotal" : "",
+      children: cells.map((t, i) => el("td", { text: i === 0 && note ? `${t} — ${note}` : t })),
+    });
+
+  const run = async (): Promise<void> => {
+    out.replaceChildren(el("p", { className: "m01-logic__muted", text: "…" }));
+    const sum = blank();
+    const trs: HTMLElement[] = [];
+    for (const row of rows()) {
+      const cost = blank();
+      let name = row.키;
+      let note = "";
+      try {
+        const one = await fetchLogic(row.키);
+        name = one.logic.이름;
+        const values: Record<string, unknown> = {};
+        for (const i of one.logic.입력) {
+          const raw = row.입력[i.이름] ?? initial(i);
+          if (raw.trim() === "") continue; // 빈 칸은 안 보냄(로직 화면과 같음)
+          values[i.이름] = i.고르기?.find((o) => String(o) === raw) ?? num(raw);
+        }
+        const got = await runCalc({ key: row.키, inputs: values });
+        if (got.ok) {
+          for (const line of got.lines ?? []) for (const c of COSTS) cost[c] += line.비목?.[c] ?? 0;
+        } else note = `${tc("Prev_Fail")}: ${got.reason}`;
+      } catch (error) {
+        note = `${tc("Prev_Fail")}: ${error instanceof Error ? error.message : ""}`;
+      }
+      for (const c of COSTS) sum[c] += cost[c];
+      trs.push(
+        rowOf([`${row.키} ${name}`, ...COSTS.map((c) => fmt(cost[c])), fmt(total(cost))], note),
+      );
+    }
+    trs.push(rowOf([tc("Prev_Sum"), ...COSTS.map((c) => fmt(sum[c])), fmt(total(sum))], "", true));
+    const heads = [tc("Prev_Row"), ...COSTS.map((c) => tc(LABEL[c])), tc("Prev_Sum")];
+    out.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 }),
+        ],
+      }),
+    );
+  };
+
+  const button = el("button", {
+    className: "ui-btn ui-btn--filled",
+    text: tc("Prev_Run"),
+    attrs: { type: "button", "data-combo": "run" },
+  });
+  button.addEventListener("click", () => void run());
+
+  const redraw = async (): Promise<void> => {
+    const blocks: HTMLElement[] = [];
+    for (const row of rows()) {
+      try {
+        const one = await fetchLogic(row.키);
+        blocks.push(
+          el("div", {
+            className: "m01lab__info",
+            children: [
+              el("strong", {
+                className: "m01lab__cell--wide",
+                text: `${row.키} ${one.logic.이름}`,
+              }),
+              ...one.logic.입력.map((i) => inputCell(i, row)),
+            ],
+          }),
+        );
+      } catch {
+        /* 못 읽은 로직은 계산 때 까닭이 뜸 */
+      }
+    }
+    inputs.replaceChildren(...blocks);
+    out.replaceChildren(el("p", { className: "m01-logic__muted", text: tc("Prev_Wait") }));
+  };
+
+  const root = el("section", {
+    className: "m01lab__box m01-logic__section",
+    children: [
+      el("div", {
+        className: "m01-logic__section-head",
+        children: [el("h3", { text: tc("Prev_Title") })],
+      }),
+      el("h4", { text: tc("Prev_Inputs") }),
+      inputs,
+      button,
+      out,
+    ],
+  });
+  return { root, redraw };
+}

M01_MasterData/M01_MasterData_UI_Combo_Text.ts

@@ -0,0 +1,67 @@
+/* =============================================================================
+ * M01_MasterData_UI_Combo_Text.ts
+ * 일위대가 조합 화면 글자 — [한국어, 영어]
+ * ========================================================================== */
+
+import { currentLanguageIndex } from "@ui/ui_template_locale";
+
+const TEXT = {
+  Title: ["일위대가 조합", "Unit-price combination"],
+  Sub: ["구분", "Category"],
+  Detail: ["상세구분", "Detail"],
+  All: ["전체", "All"],
+  Empty: ["조합이 없음 — [새 조합]으로 만듦", "No combinations — press [New combination]"],
+  New: ["새 조합", "New combination"],
+  Delete: ["지우기", "Delete"],
+  Save: ["저장", "Save"],
+  DeleteAsk: ["이 조합을 지울까요?", "Delete this combination?"],
+  Saved: ["저장함", "Saved"],
+  Deleted: ["지움", "Deleted"],
+  NeedName: ["이름을 적어야 저장됨", "A name is required"],
+  Load_Failed: ["불러오지 못함", "Load failed"],
+  Head_Key: ["키", "Key"],
+  Head_Name: ["이름", "Name"],
+  Head_Unit: ["단위", "Unit"],
+  Head_Note: ["비고", "Note"],
+  Head_Count: ["로직 수", "Logics"],
+  Logics_Title: ["담은 로직", "Logics in it"],
+  Col_Order: ["차례", "No."],
+  Col_Key: ["로직 키", "Logic key"],
+  Col_Name: ["이름", "Name"],
+  Col_Unit: ["결과 단위", "Result unit"],
+  Col_Memo: ["메모", "Memo"],
+  Col_Move: ["순서", "Move"],
+  Up: ["올리기", "Up"],
+  Down: ["내리기", "Down"],
+  Remove: ["빼기", "Remove"],
+  AddLogic: ["로직 더하기", "Add logic"],
+  NoLogic: ["담은 로직 없음", "No logics yet"],
+  Open: ["열기", "Open"],
+  Pick_Title: ["로직 고르기", "Pick a logic"],
+  Pick_Search: ["이름·키로 찾기", "Search by name or key"],
+  Pick_Find: ["찾기", "Find"],
+  Pick_Hint: [
+    "구분 → 상세구분을 고르고 [찾기]를 누름 — 하나씩 직접 고름",
+    "Choose category, detail, then Find — pick one by one",
+  ],
+  Pick_None: ["찾은 로직 없음", "No logics found"],
+  Pick_Close: ["닫기", "Close"],
+  Pick_Blocked: ["막힘", "Blocked"],
+  Prev_Title: ["미리 보기 (보기만 · 저장 안 함)", "Preview (view only)"],
+  Prev_Inputs: ["넣을 값", "Inputs"],
+  Prev_Run: ["미리 보기 계산", "Run preview"],
+  Prev_Labor: ["노무비", "Labor"],
+  Prev_Material: ["재료비", "Material"],
+  Prev_Expense: ["경비", "Expense"],
+  Prev_Sum: ["합계", "Total"],
+  Prev_Row: ["로직", "Logic"],
+  Prev_Fail: ["못 셈", "Failed"],
+  Prev_Wait: ["미리 보기 계산을 누르면 값이 나옴", "Press the button to see values"],
+} as const satisfies Record<string, readonly [string, string]>;
+
+export type ComboTextKey = keyof typeof TEXT;
+
+export function tc(key: ComboTextKey): string {
+  const entry = TEXT[key];
+  return entry[currentLanguageIndex as 0 | 1] ?? entry[0];
+}

M01_MasterData/M01_MasterData_UI_Page.ts

@@ -1,6 +1,6 @@
 /* =============================================================================
  * M01_MasterData_UI_Page.ts
- * 마스터 요소 화면 — 좌측 도킹 패널(컨테이너: 인력·재료·기계·소요량·계수·환율·요율·단가산출 로직·로직 테스트)
+ * 마스터 요소 화면 — 좌측 도킹 패널(컨테이너: 인력·재료·기계·소요량·계수·환율·요율·단가산출 로직·일위대가 조합·로직 테스트)
  * / 우측 요소 표 · 표 목록 · 로직 편집
  *
  * 시스템 관리자만. 고친 것은 초안(sessionStorage)에 쌓이고 [저장] 한 번에 서버로 —
@@ -34,6 +34,7 @@ import {
 } from "./M01_MasterData_UI_Side";
 import { renderTables } from "./M01_MasterData_UI_Tables";
 import type { LogicHandle } from "./M01_MasterData_UI_Logic_Page";
+import type { ComboHandle } from "./M01_MasterData_UI_Combo";
 import "./M01_MasterData_UI_Style.css";
 
 const TABLE_GROUPS = ["소요량", "계수"];
@@ -55,6 +56,7 @@ function buildPage(): HTMLElement {
   let dispose = (): void => {};
   let logicMounted = false;
   let labMounted = false;
+  let comboHandle: ComboHandle | null = null;
 
   /* --- 우측: 머리(제목·찾기·저장) + 알림 + 본문 --- */
   const title = el("h2", { className: "m01-master__title", text: L("M01_PickFile") });
@@ -71,6 +73,7 @@ function buildPage(): HTMLElement {
   });
   const logicHost = el("div", { className: "m01-master__logic", attrs: { hidden: "" } });
   const labHost = el("div", { className: "m01-master__logic", attrs: { hidden: "" } });
+  const comboHost = el("div", { className: "m01-master__logic", attrs: { hidden: "" } });
   const elementView = el("div", {
     className: "m01-master__elements",
     children: [head, notice, body],
@@ -88,9 +91,10 @@ function buildPage(): HTMLElement {
   onDraftChange(refreshBar);
   refreshBar();
 
-  const showMode = (mode: "elements" | "logic" | "lab"): void => {
+  const showMode = (mode: "elements" | "logic" | "lab" | "combo"): void => {
     logicHost.hidden = mode !== "logic";
     labHost.hidden = mode !== "lab";
+    comboHost.hidden = mode !== "combo";
     elementView.hidden = mode !== "elements";
   };
 
@@ -207,8 +211,24 @@ function buildPage(): HTMLElement {
     void import("./M01_MasterData_UI_LogicLab").then((m) => m.mountM01LogicLab(labHost, side));
   };
 
+  /** 「일위대가 조합」 — 목록을 새로 받아 그림 · 로직 줄을 누르면 단가산출 로직 탭으로 */
+  const openComboTab = (): void => {
+    dispose();
+    dispose = (): void => {};
+    current = null;
+    showMode("combo");
+    if (comboHandle) {
+      void comboHandle.show();
+      return;
+    }
+    void import("./M01_MasterData_UI_Combo").then((m) => {
+      comboHandle = m.mountM01Combo(comboHost, side, (key) => openLogicTab(key));
+      void comboHandle.show();
+    });
+  };
+
   /* --- 좌측: 컨테이너 --- */
-  const side = buildSide(openFile, () => openLogicTab(), openLabTab);
+  const side = buildSide(openFile, () => openLogicTab(), openLabTab, openComboTab);
 
   const layout = el("div", { className: "ui-workflow-layout m01-master" });
   const main = el("main", {
@@ -216,7 +236,7 @@ function buildPage(): HTMLElement {
     children: [
       el("div", {
         className: "m01-master__panel",
-        children: [elementView, logicHost, labHost],
+        children: [elementView, logicHost, labHost, comboHost],
       }),
     ],
   });

M01_MasterData/M01_MasterData_UI_Side.ts

@@ -1,7 +1,7 @@
 /* =============================================================================
  * M01_MasterData_UI_Side.ts
- * 왼쪽 패널 — 공용 접기 컨테이너(`ui-collapsible ui-sidebar-section`) 여덟 개
- * 인력 · 재료 · 기계 · 소요량 · 계수 · 환율 · 요율 · 단가산출 로직
+ * 왼쪽 패널 — 공용 접기 컨테이너(`ui-collapsible ui-sidebar-section`) 아홉 개
+ * 인력 · 재료 · 기계 · 소요량 · 계수 · 환율 · 요율 · 단가산출 로직 · 일위대가 조합
  * 펼치면 하위 목록(거름 · 파일) · 환율/요율은 누르면 바로 표 · 로직은 안에 로직 목록
  * ========================================================================== */
 
@@ -10,6 +10,7 @@ import { attachCollapsible } from "@ui/ui_template_collapsible";
 import { t as L } from "@ui/ui_template_locale";
 import { fetchFiles, fetchSubsAll, type FileInfo, type SubInfo } from "./M01_MasterData_Api_Fetch";
 import { tx } from "./M01_MasterData_UI_Logic_Text";
+import { tc } from "./M01_MasterData_UI_Combo_Text";
 import { renderTree, type MakeRow } from "./M01_MasterData_UI_Tree";
 
 /** 컨테이너마다 기억하는 화면 상태 — 찾기 글 · 쪽 · 소요량·계수 표의 용도 대상 거름 (거름은 `m01.filter.*`) */
@@ -75,6 +76,8 @@ export interface SideHandle {
   root: HTMLElement;
   /** 단가산출 로직 컨테이너 안(로직 목록이 들어갈 자리) */
   logicHost: HTMLElement;
+  /** 일위대가 조합 컨테이너 안(구분 · 상세구분 거름이 들어갈 자리) */
+  comboHost: HTMLElement;
   /** 「로직 개선 시험」 컨테이너 안 */
   labHost: HTMLElement;
   /** 그룹의 파일 판본을 다시 받음(저장 뒤) — 돌려받는 것 = 새 목록 */
@@ -133,11 +136,13 @@ const LEAF: Group[] = ["환율", "요율"];
 const FILTERED: Group[] = ["인력", "기계", "소요량", "계수"];
 const LOGIC_ID = "로직|";
 const LAB_ID = "로직시험|";
+const COMBO_ID = "조합|";
 
 export function buildSide(
   onOpen: (pick: Pick) => void,
   onLogic: () => void,
   onLab: () => void,
+  onCombo: () => void = () => {},
 ): SideHandle {
   const lists = new Map<Group, FileInfo[]>();
   const bodies = new Map<Group, HTMLElement>();
@@ -427,6 +432,14 @@ export function buildSide(
     onLogic();
   });
 
+  const comboHost = el("div", { className: "m01-side__items" });
+  const combo = section(tc("Title"), comboHost);
+  combo.querySelector(".ui-collapsible__title")?.addEventListener("click", () => {
+    if (!combo.classList.contains("is-collapsed")) return;
+    setActive(buttons.has(COMBO_ID) ? COMBO_ID : null);
+    onCombo();
+  });
+
   const labHost = el("div", { className: "m01-side__items" });
   const lab = section(tx("Lab_Title"), labHost);
   lab.querySelector(".ui-collapsible__title")?.addEventListener("click", () => {
@@ -435,7 +448,7 @@ export function buildSide(
     onLab();
   });
 
-  const root = el("div", { className: "m01-side", children: [...groups, logic, lab] });
+  const root = el("div", { className: "m01-side", children: [...groups, logic, combo, lab] });
   attachCollapsible(root);
   void Promise.all(GROUPS.map(refresh)).catch((error) =>
     showToast(error instanceof Error ? error.message : L("M01_LoadFailed"), "error"),
@@ -443,5 +456,5 @@ export function buildSide(
   const setOnPicked = (fn: () => void): void => {
     onPicked = fn;
   };
-  return { root, logicHost, labHost, refresh, setActive, setOnPicked, filter };
+  return { root, logicHost, comboHost, labHost, refresh, setActive, setOnPicked, filter };
 }