feat(M01): 준용 고르면 값 따라옴 · 인력 상태 거름 · 유가전력 구분·상세구분 거름

- 인력 준용 고르기 — 값 칸이 고른 직종 값으로 바뀌어 노랑 · 비우면 원래 값
- 저장 때 서버가 준용 직종 값을 다시 읽어 값 칸에 채움(화면 값 불신)
- 인력 왼쪽 패널 「상태」 드롭다운(목록은 서버) · 재료 유가전력 2단 거름
- 시험 2개 더함

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,7 +8,7 @@
 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, fetchSubs, type FileInfo, type SubInfo } from "./M01_MasterData_Api_Fetch";
+import { fetchFiles, fetchSubsAll, type FileInfo, type SubInfo } from "./M01_MasterData_Api_Fetch";
 import { renderTree, type MakeRow } from "./M01_MasterData_UI_Tree";
 
 /** 요소 화면에서 열 것 — 파일 · 하위 거름(구분·세부분류) · 상세구분 · 제목 */
@@ -17,6 +17,8 @@ export interface Pick {
   file: FileInfo;
   sub: string;
   detail: string;
+  /** 인력 상태 거름 · 비면 전체 */
+  state?: string;
   label: string;
 }
 
@@ -39,13 +41,19 @@ export interface FilterArgs {
   subs: SubInfo[];
   total: number;
   subLabel: string;
+  /** 「전체」 줄 글 · 없으면 「전체」 */
+  title?: string;
   /** 없으면 한 단 */
   detailLabel?: string;
-  onPick: (sub: string, detail: string, label: string) => void;
+  /** 있으면 「상태」 드롭다운 한 단 더 — 목록은 서버가 줌 */
+  states?: string[];
+  stateLabel?: string;
+  onPick: (sub: string, detail: string, label: string, state: string) => void;
 }
 
 const MATERIAL_NAMES: Record<string, string> = { 유가전력: "유가·전력" };
 /** 재료 컨테이너 차례 — 여기 없는 파일은 뒤에 */
+const FUEL = "유가전력";
 const MATERIAL_ORDER = ["자재품목", "유가전력", "품셈재료"];
 
 /** 파일 이름 → 목록 글자 — 「소요량_건설품셈_10장_창호…」 → 「건설품셈_10장_창호…」 */
@@ -72,6 +80,7 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
   const buttons = new Map<string, HTMLElement>();
   // 하위 거름은 서버가 준 목록(파일 머리에 등록된 구분·세부분류) — 새 조사가 늘어도 화면은 그대로
   const kinds = new Map<Group, SubInfo[]>();
+  const states = new Map<Group, string[]>();
 
   const setActive = (id: string | null): void => {
     for (const [key, button] of buttons) button.classList.toggle("is-active", key === id);
@@ -136,10 +145,19 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
           disabled: !pickSub?.details.length,
         })
       : null;
+    const state = a.states?.length
+      ? createSelectField({
+          options: opts(a.states),
+          value: a.states.includes(saved[2]) ? saved[2] : "",
+          compact: true,
+          label: a.stateLabel ?? "",
+        })
+      : null;
     const run = (): void => {
       const d = detail?.select.value ?? "";
+      const s = state?.select.value ?? "";
       try {
-        sessionStorage.setItem(a.store, JSON.stringify([sub.select.value, d]));
+        sessionStorage.setItem(a.store, JSON.stringify([sub.select.value, d, s]));
       } catch {
         /* 기억 못 해도 거름은 됨 */
       }
@@ -147,7 +165,8 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
       a.onPick(
         sub.select.value,
         d,
-        [sub.select.value, d].filter(Boolean).join(" · ") || L("M01_All"),
+        [sub.select.value, d, s].filter(Boolean).join(" · ") || L("M01_All"),
+        s,
       );
     };
     sub.select.addEventListener("change", () => {
@@ -159,16 +178,23 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
       run();
     });
     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"));
-    });
+    state?.select.addEventListener("change", run);
+    const all = make(
+      { id: a.id, label: a.title ?? L("M01_All"), count: a.total, run },
+      "",
+      0,
+      () => {
+        if (state) state.select.value = "";
+        sub.select.value = "";
+        sub.select.dispatchEvent(new Event("change"));
+      },
+    );
     return el("div", {
       children: [
         all,
         el("div", {
           className: "m01-side__filter",
-          children: [sub.root, ...(detail ? [detail.root] : [])],
+          children: [sub.root, ...(detail ? [detail.root] : []), ...(state ? [state.root] : [])],
         }),
       ],
     });
@@ -183,8 +209,8 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
     const files = lists.get(group) ?? [];
     const body = bodies.get(group);
     if (!body) return;
-    const open = (file: FileInfo, sub: string, label: string, detail = ""): void =>
-      onOpen({ group, file, sub, detail, label });
+    const open = (file: FileInfo, sub: string, label: string, detail = "", state = ""): void =>
+      onOpen({ group, file, sub, detail, state, label });
     const one = files[0];
     const dropped: Partial<Record<Group, { label: string; detail?: string }>> = {
       인력: { label: L("M01_LaborSub"), detail: L("M01_LaborDetail") },
@@ -202,36 +228,59 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
           total: files.reduce((n, f) => n + f.rows, 0),
           subLabel: drop.label,
           detailLabel: drop.detail,
-          onPick: (sub, detail, label) => open(one, sub, label, detail),
+          states: states.get(group),
+          stateLabel: L("M01_LaborState"),
+          onPick: (sub, detail, label, state) => open(one, sub, label, detail, state),
         }),
       );
       return;
     }
     body.replaceChildren(
-      ...renderTree(
-        [...files]
-          .sort((a, b) => order(a.file) - order(b.file))
-          .map((f) => {
-            const name = fileLabel(f.file);
-            const label = group === "재료" ? (MATERIAL_NAMES[name] ?? name) : name;
-            return {
-              id: `${group}\n${f.file}`,
-              label,
-              count: f.rows,
-              run: () => open(f, "", label),
-            };
-          }),
-        make,
-      ),
+      ...[...files]
+        .sort((a, b) => order(a.file) - order(b.file))
+        .flatMap((f) => {
+          const name = fileLabel(f.file);
+          const label = group === "재료" ? (MATERIAL_NAMES[name] ?? name) : name;
+          if (group === "재료" && name === FUEL)
+            return [
+              filter({
+                id: `${group}\n${f.file}`,
+                store: `m01.filter.${group}.${name}`,
+                subs: kinds.get(group) ?? [],
+                total: f.rows,
+                title: label,
+                subLabel: L("M01_FuelSub"),
+                detailLabel: L("M01_FuelDetail"),
+                onPick: (sub, detail, tail) =>
+                  open(f, sub, sub || detail ? `${label} · ${tail}` : label, detail),
+              }),
+            ];
+          return renderTree(
+            [
+              {
+                id: `${group}\n${f.file}`,
+                label,
+                count: f.rows,
+                run: () => open(f, "", label),
+              },
+            ],
+            make,
+          );
+        }),
     );
   };
 
   const refresh = async (group: string): Promise<FileInfo[]> => {
     const list = await fetchFiles(group);
     if (list[0] && (group === "인력" || group === "기계")) {
-      kinds.set(group, await fetchSubs({ file: list[0].file }));
+      const got = await fetchSubsAll({ file: list[0].file });
+      kinds.set(group, got.subs);
+      states.set(group as Group, got.states ?? []);
+    } else if (group === "재료") {
+      const fuel = list.find((f) => fileLabel(f.file) === FUEL);
+      if (fuel) kinds.set(group, (await fetchSubsAll({ file: fuel.file })).subs);
     } else if (group === "소요량" || group === "계수") {
-      kinds.set(group, await fetchSubs({ group }));
+      kinds.set(group, (await fetchSubsAll({ group })).subs);
     }
     lists.set(group as Group, list);
     drawGroup(group as Group);