fix(M01): 좁은 화면에서 거름을 고르면 왼쪽 패널이 접혀 목록이 바로 보이게

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

M01_MasterData/M01_MasterData_UI_Page.ts

@@ -244,6 +244,10 @@ function buildPage(): HTMLElement {
     showProjectName: false,
     onOptionsOpenChange: (isOpen) => layout.classList.toggle("is-options-open", isOpen),
   });
+  // 좁은 화면(공용 레이아웃 860px)에서는 패널이 목록을 덮음 — 거름을 다 고르면 접음
+  side.setOnPicked(() => {
+    if (window.matchMedia("(max-width: 860px)").matches) overlays.setTitleOpen(false);
+  });
   layout.append(
     el("div", { className: "ui-workflow-layout__body", children: [main] }),
     overlays.root,

M01_MasterData/M01_MasterData_UI_Side.ts

@@ -81,6 +81,8 @@ export interface SideHandle {
   /** 그룹의 파일 판본을 다시 받음(저장 뒤) — 돌려받는 것 = 새 목록 */
   refresh: (group: string) => Promise<FileInfo[]>;
   setActive: (id: string | null) => void;
+  /** 좁은 화면에서 사용자가 거름을 다 골랐을 때 부를 것 — 패널을 접어 목록을 드러냄 */
+  setOnPicked: (fn: () => void) => void;
   /** 「전체」 + 드롭다운 거름 한 벌 — 로직 컨테이너도 씀 */
   filter: (args: FilterArgs) => HTMLElement;
 }
@@ -150,6 +152,7 @@ export function buildSide(
   const states = new Map<Group, string[]>();
   const runs = new Map<string, () => void>();
   let restoring = false;
+  let onPicked = (): void => {};
 
   const setActive = (id: string | null): void => {
     for (const [key, button] of buttons) button.classList.toggle("is-active", key === id);
@@ -182,6 +185,7 @@ export function buildSide(
     button.addEventListener("click", () => {
       if (node.run) setActive(node.id);
       onClick();
+      if (node.run) onPicked();
     });
     return button;
   };
@@ -240,15 +244,24 @@ export function buildSide(
     };
     runs.set(a.id, run);
     sub.select.addEventListener("change", () => {
+      let more = false;
       if (detail) {
         const details = a.subs.find((k) => k.name === sub.select.value)?.details ?? [];
         detail.setOptions(opts(details), "");
         detail.select.disabled = details.length === 0;
+        more = details.length > 0 && sub.select.value !== "";
       }
       run();
+      if (!more && (!state || sub.select.value === "")) onPicked();
+    });
+    detail?.select.addEventListener("change", () => {
+      run();
+      if (!state) onPicked();
+    });
+    state?.select.addEventListener("change", () => {
+      run();
+      onPicked();
     });
-    detail?.select.addEventListener("change", run);
-    state?.select.addEventListener("change", run);
     const all = make(
       { id: a.id, label: a.title ?? L("M01_All"), count: a.total, run },
       "",
@@ -435,5 +448,8 @@ export function buildSide(
   void Promise.all(GROUPS.map(refresh)).catch((error) =>
     showToast(error instanceof Error ? error.message : L("M01_LoadFailed"), "error"),
   );
-  return { root, logicHost, easyHost, cviewHost, refresh, setActive, filter };
+  const setOnPicked = (fn: () => void): void => {
+    onPicked = fn;
+  };
+  return { root, logicHost, easyHost, cviewHost, refresh, setActive, setOnPicked, filter };
 }