feat(M01): 관리자 화면 로직 칸 — 일위대가표(호표) 고치기 · 시험 계산 · 요소 찾기 창

- 화면: 왼쪽 로직 목록(원문·장·이름 찾기·막힘) / 가운데 머리·받을 값·호표·중간 값·덧줄·끝수 / 오른쪽 시험 계산 - 고친 것은 캐시에 쌓고 [저장] 한 번에 · [고친 것 버리기] · 줄 더하기·지우기 · 로직 새로 만들기·지우기 - 진입은 mountM01Logic(host) — 공용 진입 파일(sub_laptop_3 몫)이 한 줄로 붙임 - 서버: 로직 하나에 단가 자동(prices) · 요소 찾기(GET /elements) · 저장 전 시험 계산(calc 에 row·file) - 계약 문서 갱신 · 시험 1개 더함(9개 통과) Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PAdA5ThqmtVSsbzjusk1cJ
2026-09-19 18:45:17 +09:00
parent 6350152118
commit 3a36a0372c
12 changed files with 1954 additions and 7 deletions
@@ -0,0 +1,155 @@
+/* =============================================================================
+ * M01_MasterData_UI_Logic_List.ts
+ * 왼쪽 로직 목록 — 원문 · 장 · 이름 찾기 · 막힘만 · 막힘(⛔)·고침(●) 표시
+ * 거르기는 화면에서(목록은 한 번 받음 · 391 줄 남짓)
+ * ========================================================================== */
+
+import { el } from "@ui/ui_template_elements";
+import type { LogicSummary } from "./M01_MasterData_UI_Logic_Api";
+import { tx } from "./M01_MasterData_UI_Logic_Text";
+
+export type ListMark = "edited" | "new" | "deleted";
+
+export interface ListItem {
+  id: string;
+  book: string;
+  chapter: string;
+  key: string;
+  name: string;
+  blocked: boolean;
+  reasons: string[];
+}
+
+export interface ListHandle {
+  root: HTMLElement;
+  setItems: (items: LogicSummary[]) => void;
+  /** 저장 안 한 새 로직도 목록 맨 위에 */
+  setMarks: (marks: Map<string, ListMark>, extra: ListItem[]) => void;
+  setActive: (id: string | null) => void;
+}
+
+export const logicId = (book: string, key: string): string => `${book}\n${key}`;
+
+export function buildList(onOpen: (item: ListItem) => void): ListHandle {
+  let items: ListItem[] = [];
+  let extra: ListItem[] = [];
+  let marks = new Map<string, ListMark>();
+  let active: string | null = null;
+  const book = el("select", { className: "m01-logic__input" });
+  const chapter = el("select", { className: "m01-logic__input" });
+  const search = el("input", {
+    className: "m01-logic__input",
+    attrs: { type: "search", placeholder: tx("List_Search") },
+  });
+  const blockedOnly = el("input", { attrs: { type: "checkbox" } });
+  const count = el("span", { className: "m01-logic__muted" });
+  const list = el("ul", { className: "m01-logic__list" });
+
+  const options = (select: HTMLSelectElement, all: string, values: string[]): void => {
+    const keep = select.value;
+    select.replaceChildren(
+      el("option", { text: all, attrs: { value: "" } }),
+      ...values.map((v) => el("option", { text: v, attrs: { value: v } })),
+    );
+    select.value = values.includes(keep) ? keep : "";
+  };
+  const chapters = (): void =>
+    options(chapter, tx("List_AllChapters"), [
+      ...new Set(items.filter((x) => !book.value || x.book === book.value).map((x) => x.chapter)),
+    ]);
+
+  const draw = (): void => {
+    const q = search.value.trim().toLowerCase();
+    const shown = [...extra, ...items].filter(
+      (x) =>
+        (!book.value || x.book === book.value) &&
+        (!chapter.value || x.chapter === chapter.value) &&
+        (!blockedOnly.checked || x.blocked) &&
+        (!q || x.key.toLowerCase().includes(q) || x.name.toLowerCase().includes(q)),
+    );
+    count.textContent = tx("List_Count", { n: shown.length });
+    list.replaceChildren(...shown.slice(0, 500).map(line));
+  };
+  const line = (item: ListItem): HTMLElement => {
+    const mark = marks.get(item.id);
+    const badges: HTMLElement[] = [];
+    if (item.blocked) {
+      badges.push(
+        el("span", {
+          className: "m01-logic__badge m01-logic__badge--blocked",
+          text: `⛔ ${tx("List_Blocked")}`,
+          attrs: { title: item.reasons.join("\n") },
+        }),
+      );
+    }
+    if (mark) {
+      const label = { edited: "List_Edited", new: "List_New", deleted: "List_Deleted" } as const;
+      badges.push(el("span", { className: "m01-logic__badge", text: `● ${tx(label[mark])}` }));
+    }
+    const button = el("button", {
+      className: `m01-logic__item${item.id === active ? " is-active" : ""}`,
+      attrs: { type: "button", title: item.key },
+      children: [
+        el("span", { className: "m01-logic__muted", text: `${item.book} ${item.chapter}` }),
+        el("span", { text: item.name || item.key }),
+        el("span", { className: "m01-logic__badges", children: badges }),
+      ],
+    });
+    button.addEventListener("click", () => onOpen(item));
+    return el("li", { children: [button] });
+  };
+
+  book.addEventListener("change", () => {
+    chapters();
+    draw();
+  });
+  chapter.addEventListener("change", draw);
+  search.addEventListener("input", draw);
+  blockedOnly.addEventListener("change", draw);
+
+  const root = el("aside", {
+    className: "m01-logic__side",
+    children: [
+      el("div", {
+        className: "m01-logic__filters",
+        children: [
+          book,
+          chapter,
+          search,
+          el("label", {
+            className: "m01-logic__check",
+            children: [blockedOnly, el("span", { text: tx("List_BlockedOnly") })],
+          }),
+          count,
+        ],
+      }),
+      list,
+    ],
+  });
+  return {
+    root,
+    setItems: (logics) => {
+      items = logics.map((x) => ({
+        id: logicId(x.book, x.열쇠),
+        book: x.book,
+        chapter: x.chapter,
+        key: x.열쇠,
+        name: x.이름,
+        blocked: x.blocked,
+        reasons: x.reasons,
+      }));
+      options(book, tx("List_AllBooks"), [...new Set(items.map((x) => x.book))]);
+      chapters();
+      draw();
+    },
+    setMarks: (next, more) => {
+      marks = next;
+      extra = more;
+      draw();
+    },
+    setActive: (id) => {
+      active = id;
+      draw();
+    },
+  };
+}