feat(M01): 소요량·계수·로직·기계 컨테이너를 인력과 같은 모양으로 — 전체 + 드롭다운 거름 · 가운데 표 목록 · 트리 걷음

- 왼쪽: 「전체」 한 줄 + 구분 → 상세구분 공용 드롭다운(기계는 세부분류 한 단) · 목록은 서버 /subs
- 가운데: 표 목록(키·원문번호·구분·상세구분·이름·기준·출처·비고) · 로직은 파일을 가로질러 한 목록 · 쪽 나눔 · 누르면 상세
- 표 목록 응답에 비고 칸 추가 · 관급 시험을 조달청 값 이은 줄 기준으로

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

M01_MasterData/M01_MasterData_UI_Side.ts

@@ -8,14 +8,8 @@
 import { createSelectField, el, showToast } from "@ui/ui_template_elements";
 import { attachCollapsible } from "@ui/ui_template_collapsible";
 import { t as L } from "@ui/ui_template_locale";
-import {
-  fetchFiles,
-  fetchRows,
-  fetchSubs,
-  type FileInfo,
-  type SubInfo,
-} from "./M01_MasterData_Api_Fetch";
-import { renderTree, type MakeRow, type TreeNode } from "./M01_MasterData_UI_Tree";
+import { fetchFiles, fetchSubs, type FileInfo, type SubInfo } from "./M01_MasterData_Api_Fetch";
+import { renderTree, type MakeRow } from "./M01_MasterData_UI_Tree";
 
 /** 요소 화면에서 열 것 — 파일 · 하위 거름(구분·세부분류) · 상세구분 · 제목 */
 export interface Pick {
@@ -33,10 +27,23 @@ export interface SideHandle {
   /** 그룹의 파일 판본을 다시 받음(저장 뒤) — 돌려받는 것 = 새 목록 */
   refresh: (group: string) => Promise<FileInfo[]>;
   setActive: (id: string | null) => void;
+  /** 「전체」 + 드롭다운 거름 한 벌 — 로직 컨테이너도 씀 */
+  filter: (args: FilterArgs) => HTMLElement;
+}
+
+export interface FilterArgs {
+  /** 「전체」 줄 눌림 표시용 */
+  id: string;
+  /** 고른 것을 기억할 sessionStorage 칸 */
+  store: string;
+  subs: SubInfo[];
+  total: number;
+  subLabel: string;
+  /** 없으면 한 단 */
+  detailLabel?: string;
+  onPick: (sub: string, detail: string, label: string) => void;
 }
 
-const LABOR_FILTER = "m01.laborFilter";
-const LABOR_ID = "인력|";
 const MATERIAL_NAMES: Record<string, string> = { 오피넷유가: "유가" };
 /** 재료 컨테이너 차례 — 여기 없는 파일은 뒤에 */
 const MATERIAL_ORDER = ["자재품목", "오피넷유가", "품셈재료"];
@@ -63,7 +70,6 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
   const lists = new Map<Group, FileInfo[]>();
   const bodies = new Map<Group, HTMLElement>();
   const buttons = new Map<string, HTMLElement>();
-  const counts = new Map<string, number>();
   // 하위 거름은 서버가 준 목록(파일 머리에 등록된 구분·세부분류) — 새 조사가 늘어도 화면은 그대로
   const kinds = new Map<Group, SubInfo[]>();
 
@@ -102,64 +108,68 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
     return button;
   };
 
-  /** 인력 — 「전체」 한 줄 + 구분 → 상세구분 두 단 거름(서버가 준 목록 · 고른 것은 기억) */
-  const laborFilter = (
-    file: FileInfo,
-    open: (file: FileInfo, sub: string, label: string, detail?: string) => void,
-  ): HTMLElement => {
-    const list = kinds.get("인력") ?? [];
+  /** 「전체」 한 줄 + 구분 → 상세구분 드롭다운 거름(목록은 서버가 준 것 · 고른 것은 기억) —
+   * detailLabel 없으면 한 단 */
+  const filter = (a: FilterArgs): HTMLElement => {
     const saved = (() => {
       try {
-        return JSON.parse(sessionStorage.getItem(LABOR_FILTER) ?? "[]") as string[];
+        return JSON.parse(sessionStorage.getItem(a.store) ?? "[]") as string[];
       } catch {
         return [];
       }
     })();
-    const pickSub = list.find((k) => k.name === saved[0]);
+    const pickSub = a.subs.find((k) => k.name === saved[0]);
     const opts = (values: string[]): { value: string; text: string }[] =>
       [L("M01_All"), ...values].map((v, i) => ({ value: i ? v : "", text: v }));
     const sub = createSelectField({
-      options: opts(list.map((k) => k.name)),
+      options: opts(a.subs.map((k) => k.name)),
       value: pickSub?.name ?? "",
       compact: true,
-      label: L("M01_LaborSub"),
-    });
-    const detail = createSelectField({
-      options: opts(pickSub?.details ?? []),
-      value: saved[1] ?? "",
-      compact: true,
-      label: L("M01_LaborDetail"),
-      disabled: !pickSub?.details.length,
+      label: a.subLabel,
     });
+    const detail = a.detailLabel
+      ? createSelectField({
+          options: opts(pickSub?.details ?? []),
+          value: saved[1] ?? "",
+          compact: true,
+          label: a.detailLabel,
+          disabled: !pickSub?.details.length,
+        })
+      : null;
     const run = (): void => {
+      const d = detail?.select.value ?? "";
       try {
-        sessionStorage.setItem(
-          LABOR_FILTER,
-          JSON.stringify([sub.select.value, detail.select.value]),
-        );
+        sessionStorage.setItem(a.store, JSON.stringify([sub.select.value, d]));
       } catch {
         /* 기억 못 해도 거름은 됨 */
       }
-      const label =
-        [sub.select.value, detail.select.value].filter(Boolean).join(" · ") || L("M01_All");
-      setActive(LABOR_ID);
-      open(file, sub.select.value, label, detail.select.value);
+      setActive(a.id);
+      a.onPick(
+        sub.select.value,
+        d,
+        [sub.select.value, d].filter(Boolean).join(" · ") || L("M01_All"),
+      );
     };
     sub.select.addEventListener("change", () => {
-      const details = list.find((k) => k.name === sub.select.value)?.details ?? [];
-      detail.setOptions(opts(details), "");
-      detail.select.disabled = details.length === 0;
+      if (detail) {
+        const details = a.subs.find((k) => k.name === sub.select.value)?.details ?? [];
+        detail.setOptions(opts(details), "");
+        detail.select.disabled = details.length === 0;
+      }
       run();
     });
-    detail.select.addEventListener("change", run);
-    const all = make({ id: LABOR_ID, label: L("M01_All"), count: file.rows, run }, "", 0, () => {
+    detail?.select.addEventListener("change", run);
+    const all = make({ id: a.id, label: L("M01_All"), count: a.total, run }, "", 0, () => {
       sub.select.value = "";
       sub.select.dispatchEvent(new Event("change"));
     });
     return el("div", {
       children: [
         all,
-        el("div", { className: "m01-side__filter", children: [sub.root, detail.root] }),
+        el("div", {
+          className: "m01-side__filter",
+          children: [sub.root, ...(detail ? [detail.root] : [])],
+        }),
       ],
     });
   };
@@ -176,69 +186,25 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
     const open = (file: FileInfo, sub: string, label: string, detail = ""): void =>
       onOpen({ group, file, sub, detail, label });
     const one = files[0];
-    if (group === "인력" && one) {
-      body.replaceChildren(laborFilter(one, open));
-      return;
-    }
-    if (group === "기계") {
-      const list = kinds.get(group) ?? [];
-      const all: TreeNode[] = one
-        ? [
-            {
-              id: `${group}\n`,
-              label: L("M01_All"),
-              count: one.rows,
-              open: true,
-              run: () => open(one, "", L("M01_All")),
-              children: list.map((k) => ({
-                id: `${group}\n${k.name}`,
-                label: k.name,
-                count: counts.get(`${group}\n${k.name}`) ?? null,
-                run: () => open(one, k.name, k.name),
-                children: k.details.map((d) => ({
-                  id: `${group}\n${k.name}\n${d}`,
-                  label: d,
-                  count: null,
-                  run: () => open(one, k.name, `${k.name} · ${d}`, d),
-                })),
-              })),
-            },
-          ]
-        : [];
-      body.replaceChildren(...renderTree(all, make));
-      return;
-    }
-    if (group === "소요량" || group === "계수") {
-      // 전체 → 구분(원문+부문) → 상세구분(장) — 목록은 서버가 준 것 · 장 차례대로
-      const list = kinds.get(group) ?? [];
-      const chapter = (k: SubInfo, detail: string): FileInfo | undefined =>
-        files.find((f) => f.file === `${group}_${k.book}_${detail.replaceAll(" ", "_")}.json`);
-      const rows = (k: SubInfo): number =>
-        k.details.reduce((n, d) => n + (chapter(k, d)?.rows ?? 0), 0);
-      const all: TreeNode[] = one
-        ? [
-            {
-              id: `${group}\n`,
-              label: L("M01_All"),
-              count: files.reduce((n, f) => n + f.rows, 0),
-              open: true,
-              run: () => open(one, "", L("M01_All")),
-              children: list.map((k) => ({
-                id: `${group}\n${k.name}`,
-                label: k.name,
-                count: rows(k),
-                run: () => open(chapter(k, k.details[0] ?? "") ?? one, k.name, k.name),
-                children: k.details.map((d) => ({
-                  id: `${group}\n${k.name}\n${d}`,
-                  label: d,
-                  count: chapter(k, d)?.rows ?? null,
-                  run: () => open(chapter(k, d) ?? one, k.name, `${k.name} · ${d}`, d),
-                })),
-              })),
-            },
-          ]
-        : [];
-      body.replaceChildren(...renderTree(all, make));
+    const dropped: Partial<Record<Group, { label: string; detail?: string }>> = {
+      인력: { label: L("M01_LaborSub"), detail: L("M01_LaborDetail") },
+      기계: { label: L("M01_MachineSub") },
+      소요량: { label: L("M01_LaborSub"), detail: L("M01_LaborDetail") },
+      계수: { label: L("M01_LaborSub"), detail: L("M01_LaborDetail") },
+    };
+    const drop = dropped[group];
+    if (drop && one) {
+      body.replaceChildren(
+        filter({
+          id: `${group}|`,
+          store: `m01.filter.${group}`,
+          subs: kinds.get(group) ?? [],
+          total: files.reduce((n, f) => n + f.rows, 0),
+          subLabel: drop.label,
+          detailLabel: drop.detail,
+          onPick: (sub, detail, label) => open(one, sub, label, detail),
+        }),
+      );
       return;
     }
     body.replaceChildren(
@@ -263,14 +229,7 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
   const refresh = async (group: string): Promise<FileInfo[]> => {
     const list = await fetchFiles(group);
     if (list[0] && (group === "인력" || group === "기계")) {
-      const file = list[0].file;
-      const subs = await fetchSubs({ file });
-      kinds.set(group, subs);
-      await Promise.all(
-        (group === "기계" ? subs : []).map(async (k) =>
-          counts.set(`${group}\n${k.name}`, (await fetchRows(file, 1, 1, "", false, k.name)).total),
-        ),
-      );
+      kinds.set(group, await fetchSubs({ file: list[0].file }));
     } else if (group === "소요량" || group === "계수") {
       kinds.set(group, await fetchSubs({ group }));
     }
@@ -317,5 +276,5 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
   void Promise.all(GROUPS.map(refresh)).catch((error) =>
     showToast(error instanceof Error ? error.message : L("M01_LoadFailed"), "error"),
   );
-  return { root, logicHost, refresh, setActive };
+  return { root, logicHost, refresh, setActive, filter };
 }