fix(M01): 재료 처음 펼치면 자재품목 목록 바로 열림 · 좁은 화면 넓은 표 안내 한 줄 (일감 30)

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

M01_MasterData/M01_MasterData_UI_Page.ts

@@ -80,7 +80,12 @@ function buildPage(): HTMLElement {
   const comboHost = el("div", { className: "m01-master__logic", attrs: { hidden: "" } });
   const elementView = el("div", {
     className: "m01-master__elements",
-    children: [head, notice, body],
+    children: [
+      head,
+      notice,
+      el("p", { className: "m01-master__hint", text: L("M01_WideHint") }),
+      body,
+    ],
   });
 
   const showNotice = (nodes: (HTMLElement | string)[]): void => {

M01_MasterData/M01_MasterData_UI_Side.ts

@@ -379,6 +379,16 @@ export function buildSide(
     );
   };
 
+  /** 처음 펼칠 때 열 줄 — 재료는 차례 첫 파일(자재품목) */
+  const firstRun = (group: Group): string => {
+    if (group !== "재료") return `${group}|`;
+    const first = [...(lists.get(group) ?? [])].sort((a, b) => order(a.file) - order(b.file))[0];
+    return first
+      ? `${group}
+${first.file}`
+      : "";
+  };
+
   const refresh = async (group: string): Promise<FileInfo[]> => {
     const list = await fetchFiles(group);
     if (list[0] && (group === "인력" || group === "기계")) {
@@ -427,7 +437,7 @@ export function buildSide(
         if (!root.classList.contains("is-collapsed")) return; // 닫을 때는 그대로 둠
         restoring = true;
         try {
-          runs.get(lastRun.get(group) ?? (group === "재료" ? "" : `${group}|`))?.();
+          runs.get(lastRun.get(group) ?? firstRun(group))?.();
         } finally {
           restoring = false;
         }

M01_MasterData/M01_MasterData_UI_Style.css

@@ -139,6 +139,19 @@
   margin: 0;
 }
 
+.m01-master__hint {
+  display: none;
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-body-sm);
+}
+
+@media (max-width: 600px) {
+  .m01-master__hint {
+    display: block;
+  }
+}
+
 .m01-master__body {
   display: flex;
   flex-direction: column;

resources/master_data/ref/_검증_전체화면.md

@@ -39,3 +39,6 @@ ORCA · 포트 8006/5179 · 넓은 화면 928px · 좁은 화면 390px(iframe).
 3. 넓은 표(요율 · 기계 · 재료)는 390px에서 안쪽 스크롤 — 열 줄이기 없음.
 4. 일위대가 조합 빈 화면.
 5. 시험 흔적 없음(값 안 바꿈).
+
+## 고친 뒤
+- 재료 처음 펼침 : 「재료 · 자재품목」 30,592줄 목록이 바로 열림. 좁은 화면(600px 이하) 표 위에 「표가 넓음 — 옆으로 밀어서 볼 것」 한 줄(요율 · 소요량 확인) · 가로 스크롤 유지, 넘침 0. 자재품목 612쪽은 찾기 칸이 있어 그대로 둠.

ui_template/ui_template_locale_m1.ts

@@ -11,6 +11,7 @@ export const ui_locales_m1 = {
   M01_LoadFailed: ["마스터 요소를 못 읽음", "Failed to load master elements"],
   M01_PickFile: ["왼쪽에서 그룹과 파일을 고를 것", "Pick a group and a file on the left"],
   M01_Search: ["이름 찾기", "Find by name"],
+  M01_WideHint: ["표가 넓음 — 옆으로 밀어서 볼 것", "Wide table — swipe sideways"],
   M01_Prev: ["이전", "Prev"],
   M01_Next: ["다음", "Next"],
   M01_Page: ["쪽", "pages"],