From 9443a0371f0b27fa3c3b519642dcb12ba688dc83 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Mon, 5 Oct 2026 20:05:32 +0900 Subject: [PATCH] =?UTF-8?q?feat(M02):=20=EC=84=9C=EA=B3=A0=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=ED=91=9C=20M01=20=ED=91=9C=20=EC=96=91=EC=8B=9D=20?= =?UTF-8?q?=C2=B7=20=EC=82=AC=EC=A0=84=EC=A1=B0=ED=95=A9=20[=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=B6=94=EA=B0=80]=20=EA=B0=99=EC=9D=80=20?= =?UTF-8?q?=EA=B3=A0=EB=A5=B4=EA=B8=B0=20=EC=B0=BD(51-10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 서고 목록표(단가산출 승격 · 일위대가 사전조합) = M01 단가산출 로직 목록 양식 — 찾기 줄(buildHeadFilters) · 쪽(buildPager · 30줄) · 표 m01-master__grid · 줄 m01-master__table-row 를 M01 에서 import - 머리 단추 꼴 = M01 [신규 로직] · [로직 복사/생성] · [로직 지우기] 와 같음(filled · ghost · danger 빨강) · 단추 틈 8px(m01-head 와 같음) - 사전조합 상세 [추가] 따로 단추 없앰 — 일위대가 상세와 같은 [로직 추가] · 같은 고르기 창(Labor_Pick · only = 서고 줄만) - 시험 기대 글 고침(card_shell 늘 참이던 assert) · 화면 시나리오 51-10 · 51-6 단추 이름 Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_016PSXsvyDxjNmufteN5bqmt --- .../M02_MasterTemplete_Labor_Detail.ts | 32 ++-- .../M02_MasterTemplete_Labor_Text.ts | 1 - .../M02_MasterTemplete_Library_List.ts | 32 +++- .../M02_MasterTemplete_UI_Style.css | 13 +- resources/tester/test_m02_card_shell.py | 6 +- .../tester/ui_checks/51-10_서고_표양식.js | 149 ++++++++++++++++++ .../tester/ui_checks/51-6_사전조합_줄넣기.js | 6 +- 7 files changed, 198 insertions(+), 41 deletions(-) create mode 100644 resources/tester/ui_checks/51-10_서고_표양식.js diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts b/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts index b9974542c..441a2a223 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts @@ -9,7 +9,7 @@ * · 같은 로직 두 번 · 같은 자재 두 번 막음 · 빈 일위대가도 저장 됨 * · 오른쪽 「원문」 접는 패널(47-4 · 상세만 · 공용 `ui_template_side_panels`) = 고른 줄 로직의 출처 원문 * · 서고 모드(50-3 · `mode`) = 단가승격 · 사전조합 — 이름 칸 · 단가산출 로직 표 · 원문만(자재 · 면적 · 다이어그램 없음) · - * 승격은 로직 한 줄(입력값 고정 · 더하기 · 순서 · 수량 없음) · 사전조합 = [추가] · 수량 손 입력(기본 1) · 순서 · 삭제 + * 승격은 로직 한 줄(입력값 고정 · 더하기 · 순서 · 수량 없음) · 사전조합 = [로직 추가](같은 고르기 창 · 서고 줄만) · 수량 손 입력(기본 1) · 순서 · 삭제 * ========================================================================== */ import { createButton, createInputField, el, showToast } from "@ui/ui_template_elements"; @@ -378,22 +378,20 @@ export function mountLaborDetail( changed(); }, }; - /** 사전조합 [추가] — 서고 줄만 고르기(위 층만 · 자기 자신 · 순환은 [저장] 때 서버 422) */ - const addRef = createButton({ - label: tc("Lib_AddRow"), - variant: "filled", - onClick: () => openLogicPicker(() => undefined, { ...library, only: true }), - }); const addLogic = createButton({ label: tc("AddLogic"), variant: "filled", onClick: () => - openLogicPicker((x) => { - if (cur.담은로직.some((r) => r.로직 === x.키)) - return showToast(tc("Labor_Already").replace("{value}", `${x.키} ${x.이름}`), "error"); - cur.담은로직.push({ 로직: x.키, 별칭: null, 메모: null, 입력값: {}, 수량: null }); - void loadLogics().then(() => changed()); - }, library), + openLogicPicker( + (x) => { + if (cur.담은로직.some((r) => r.로직 === x.키)) + return showToast(tc("Labor_Already").replace("{value}", `${x.키} ${x.이름}`), "error"); + cur.담은로직.push({ 로직: x.키, 별칭: null, 메모: null, 입력값: {}, 수량: null }); + void loadLogics().then(() => changed()); + // 사전조합 = 같은 창 · 서고 줄만(위 층만 · 자기 자신 · 순환은 [저장] 때 서버 422) + }, + lib ? { ...library, only: true } : library, + ), }); const addMat = createButton({ label: tc("Labor_AddMat"), @@ -478,12 +476,8 @@ export function mountLaborDetail( ], }), ]), - // 승격 = 로직 한 줄(새로 만들 때 고름) · 사전조합 = [추가] 서고 줄만 고르기(51-6) - section( - tc("Logics_Title"), - opt.card || promote ? null : lib ? addRef : addLogic, - logicHost, - ), + // 승격 = 로직 한 줄(새로 만들 때 고름) · 사전조합 = 같은 [로직 추가] · 서고 줄만(51-10) + section(tc("Logics_Title"), opt.card || promote ? null : addLogic, logicHost), ...(lib ? [] : [section(tc("Labor_Mats"), opt.card ? null : addMat, matHost)]), ...(opt.card || lib ? [] : [dgBox]), ], diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts b/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts index cff2e9cda..c7be730db 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts @@ -124,7 +124,6 @@ const TEXT = { Lib_Unit: ["단위", "Unit"], Lib_Base: ["기준 금액", "Base amount"], Lib_Date: ["고친 날", "Modified"], - Lib_AddRow: ["추가", "Add"], } as const satisfies Record; export type ComboTextKey = keyof typeof TEXT; diff --git a/M02_MasterTemplete/M02_MasterTemplete_Library_List.ts b/M02_MasterTemplete/M02_MasterTemplete_Library_List.ts index 0b15d996f..3a183094e 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Library_List.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Library_List.ts @@ -3,6 +3,7 @@ * 일위대가 조합 서고 목록표(51-4) — 좌측 항목(단가산출 승격 · 일위대가 사전조합)을 누르면 상세 칸에 뜸. * 표 = 고름 · 키 · 이름 · 단위 · 기준 금액(서버 1 단위 계) · 고친 날 · 줄 누름 = 그 문서 상세. * 머리 [생성] · [복사](고른 줄) · [삭제](고른 줄 · 쓰는 곳 있으면 서버 409 까닭 그대로). + * 꼴 = M01 단가산출 로직 목록 — 찾기 줄(`buildHeadFilters`) · 쪽(`buildPager`) · 표(`m01-master__grid`) 를 M01 에서 import. * ========================================================================== */ import { @@ -14,6 +15,9 @@ import { } from "@ui/ui_template_elements"; import { t as L } from "@ui/ui_template_locale"; import { openModal } from "@ui/ui_template_modal"; +import { buildPager } from "../M01_MasterData/M01_MasterData_UI_Cells"; +import { buildHeadFilters } from "../M01_MasterData/M01_MasterData_UI_Head"; +import "../M01_MasterData/M01_MasterData_UI_Style.css"; import { deleteLayerTemplate, deleteTemplate, @@ -41,6 +45,7 @@ export interface LibraryListOptions { open: (key: string, label: string) => void; } +const SIZE = 30; const why = (error: unknown): string => (error instanceof Error ? error.message : ""); const money = (v: number | null | undefined): string => v == null ? "" : v.toLocaleString("ko-KR", { maximumFractionDigits: 2 }); @@ -54,7 +59,10 @@ export function mountLibraryList( ): { getDoc: () => null; destroy: () => void } { let rows: Row[] = []; let picked: string | null = null; + let page = 1; + const searchField = createInputField({ type: "search", placeholder: tc("Search") }); const body = el("tbody"); + let pager = buildPager(0, SIZE, 1, () => {}); const btnNew = createButton({ label: tc("Lib_Create"), variant: "filled" }); const btnCopy = createButton({ label: tc("Lib_Copy"), variant: "ghost" }); const btnDel = createButton({ label: tc("Lib_Delete"), variant: "danger" }); @@ -63,9 +71,18 @@ export function mountLibraryList( }; const draw = (): void => { + const q = searchField.input.value.trim().toLowerCase(); + const shown = rows.filter((r) => !q || libraryLabel(r).toLowerCase().includes(q)); + page = Math.min(page, Math.max(1, Math.ceil(shown.length / SIZE))); + const next = buildPager(shown.length, SIZE, page, (p) => { + page = p; + draw(); + }); + pager.replaceWith(next); + pager = next; body.replaceChildren( - ...(rows.length - ? rows.map((row) => { + ...(shown.length + ? shown.slice((page - 1) * SIZE, page * SIZE).map((row) => { const radio = el("input", { attrs: { type: "radio", name: `m02-lib-${opt.kind}`, "aria-label": row.이름 }, }) as HTMLInputElement; @@ -78,7 +95,7 @@ export function mountLibraryList( paintButtons(); }); const tr = el("tr", { - className: "m02-lib__row", + className: "m01-master__table-row", attrs: { "data-lib-key": row.이름 }, children: [ pick, @@ -200,14 +217,19 @@ export function mountLibraryList( } }); + searchField.input.addEventListener("input", () => { + page = 1; + draw(); + }); const heads = ["", "Lib_Key", "Lib_Name", "Lib_Unit", "Lib_Base", "Lib_Date"] as const; host.replaceChildren( + buildHeadFilters([searchField.root, pager]), el("div", { - className: "ui-general-block__table-wrap ui-general-block__table-wrap--sticky-head", + className: "m01-master__grid-wrap", attrs: { "data-lib-list": opt.kind }, children: [ el("table", { - className: "ui-general-block__table m02-lib__table", + className: "m01-master__grid", children: [ el("thead", { children: [ diff --git a/M02_MasterTemplete/M02_MasterTemplete_UI_Style.css b/M02_MasterTemplete/M02_MasterTemplete_UI_Style.css index 09567f32b..5fe85ec07 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_UI_Style.css +++ b/M02_MasterTemplete/M02_MasterTemplete_UI_Style.css @@ -56,16 +56,8 @@ gap: var(--spacing-4); } -/* 일위대가 조합 서고 목록표(51-4) — 줄 누름 = 상세 · 첫 칸 = 고름 */ -.m02-lib__row { - cursor: pointer; -} - -.m02-lib__row:hover { - background: var(--color-bg-hover, rgba(0, 0, 0, 0.04)); -} - -.m02-lib__table .m02-lib__pick { +/* 일위대가 조합 서고 목록표(51-4) — 표 꼴은 M01 목록(`m01-master__grid`) · 첫 칸 = 고름 */ +.m01-master__grid .m02-lib__pick { width: 2.5rem; text-align: center; } @@ -123,6 +115,7 @@ /* 제목 줄 오른쪽 끝 도구(일위대가 「새 조합」 · PLAN 30-5) */ .m02-main__tools { display: inline-flex; + gap: var(--spacing-8); /* M01 머리 줄(`m01-head`)과 같은 틈 */ margin-left: auto; } diff --git a/resources/tester/test_m02_card_shell.py b/resources/tester/test_m02_card_shell.py index 3ffaa76b1..178871a91 100644 --- a/resources/tester/test_m02_card_shell.py +++ b/resources/tester/test_m02_card_shell.py @@ -80,9 +80,9 @@ def test_일위대가_카드는_상세_카드_갈래(): detail = _text("M02_MasterTemplete_Labor_Detail.ts") assert "...(opt.card ? {} : { move })" in detail # 순서 단추 없음 · 빼기는 그대로 # 서고 모드(50-3 · lib)도 더하기 · 다이어그램 없음 - assert ( - "opt.card || promote ? null : lib ? addRef : addLogic" - ) # 51-6 사전조합 = 줄 고르기 in detail + # 51-10 사전조합 = 같은 [로직 추가] · 서고 줄만 + assert "opt.card || promote ? null : addLogic" in detail + assert "lib ? { ...library, only: true } : library" in detail assert "...(opt.card || lib ? [] : [dgBox])," in detail assert "opt.card ? null : addMat" in detail # 49-6 — 카드엔 [자재 추가] 없음 · 상세는 그대로 rows = _text("M02_MasterTemplete_Labor_Rows.ts") diff --git a/resources/tester/ui_checks/51-10_서고_표양식.js b/resources/tester/ui_checks/51-10_서고_표양식.js new file mode 100644 index 000000000..0b472b6ef --- /dev/null +++ b/resources/tester/ui_checks/51-10_서고_표양식.js @@ -0,0 +1,149 @@ +/* 51-10 — 서고 목록표(단가산출 승격 · 일위대가 사전조합) = M01 단가산출 로직 목록 표 양식 · 단추 꼴 · + * 사전조합 상세 [로직 추가] = 일위대가 상세 [로직 추가] 와 같은 고르기 창(서고 줄만) + * 시작 화면: M02 마스터 템플릿 · 마스터 층(#/m02-master-template?open=일위대가조합&root=master) · 시스템 관리자 + * 부르는 법: orca eval --expression "$(cat 이 파일)" (async 식 · JSON 글을 돌려줌) + * 쓰기 없음 — 서고 목록 · 문서 읽기는 가짜 응답(fetch 바꿔 끼움 · 끝에 되돌림) + * 기대 수치: + * - table.wrap = "m01-master__grid-wrap" · table.table = "m01-master__grid" · table.row = "m01-master__table-row" + * - table.filters = true(찾기 칸 + 쪽 `m01-master__pager`) · table.sameCell = true(M01 표 칸과 padding · 글자 · 밑줄 같음) + * - table.search = 1(「값 없음」 치면 한 줄) + * - buttons.variants = ["filled", "ghost", "danger"](M01 [신규 로직] · [로직 복사/생성] · [로직 지우기] 와 같음) · buttons.redDelete = true + * - precombo.add = "로직 추가" · picker.label = "로직 고르기" · picker.kinds ⊂ {단가승격, 일위조합} · picker.logicRows = 0 + */ +(async () => { + const wait = (ms) => new Promise((r) => setTimeout(r, ms)); + const until = async (fn, ms = 4000) => { + for (let t = 0; t < ms; t += 100) { + const v = fn(); + if (v) return v; + await wait(100); + } + return null; + }; + const SYS = { 층: "system", 주인: null }; + const rows = [ + { + 종류: "promote", + 이름: "SP-999901", + 판: "a", + 수정일: "2026-10-05", + 제목: "시험 승격", + 단위: "㎡", + 기준금액: 1234.5, + }, + { + 종류: "promote", + 이름: "SP-999902", + 판: "b", + 수정일: "2026-10-05", + 제목: "값 없음", + 단위: null, + 기준금액: null, + }, + { + 종류: "precombo", + 이름: "SC-999901", + 판: "c", + 수정일: "2026-10-05", + 제목: "시험 묶음", + 단위: "개소", + 기준금액: 10, + }, + ]; + const doc = { + 종류: "사전조합", + 키: "SC-999901", + 이름: "시험 묶음", + 단위: "개소", + 담은로직: [{ 참조: { ...SYS, 키: "SP-999901" }, 수량: { 손: 1 } }], + }; + const json = (body, status = 200) => + new Response(JSON.stringify(body), { status, headers: { "Content-Type": "application/json" } }); + const real = window.fetch; + window.fetch = async (input, init = {}) => { + const url = String(input?.url ?? input); + const method = (init.method ?? "GET").toUpperCase(); + if (method === "GET" && /\/m02\/layers\/system\/templates(\?|$)/.test(url)) { + const got = await (await real(input, init)).json(); + return json({ ...got, 양식: [...got.양식.filter((r) => !/^S[PC]-/.test(r.이름)), ...rows] }); + } + if (method === "GET" && url.includes("/templates/precombo/SC-999901")) + return json({ 종류: "precombo", 이름: "SC-999901", 판: "c", 문서: doc }); + if (method !== "GET" && !url.includes("/calc")) + return json({ detail: "시험 — 쓰기 막음" }, 400); + return real(input, init); + }; + const sec = [...document.querySelectorAll(".m02-side__lists > section")].find( + (s) => s.querySelector(".ui-collapsible__title")?.textContent?.trim() === "일위대가 조합", + ); + const items = [...sec.querySelectorAll("[data-precombo]")]; + const list = (kind) => document.querySelector(`[data-lib-list="${kind}"]`); + const tools = () => [...document.querySelectorAll(".m02-main__slot .m02-main__tools button")]; + const box = (n) => { + const s = getComputedStyle(n); + return [s.paddingTop, s.paddingLeft, s.fontSize, s.borderBottomWidth].join("|"); + }; + try { + items[0].click(); + await until(() => list("promote")?.querySelector(`[data-lib-key="SP-999902"]`)); + const wrap = list("promote"); + const td = wrap.querySelector("[data-lib-key] td:nth-child(3)"); + // M01 목록 표와 같은 클래스로 짠 견본 칸 — 같은 CSS 면 같은 칸 꼴 + const ref = document.createElement("div"); + ref.className = "m01-master__grid-wrap"; + ref.innerHTML = + '
시험 승격
'; + wrap.parentElement.append(ref); + const table = { + wrap: wrap.className, + table: wrap.querySelector("table").className, + row: wrap.querySelector("[data-lib-key]").className, + filters: + !!wrap.parentElement.querySelector(".m01-head__filters input[type=search]") && + !!wrap.parentElement.querySelector(".m01-head__filters .m01-master__pager"), + sameCell: box(td) === box(ref.querySelector("td")), + cell: box(td), + }; + ref.remove(); + const search = wrap.parentElement.querySelector(".m01-head__filters input[type=search]"); + search.value = "값 없음"; + search.dispatchEvent(new Event("input")); + await wait(100); + table.search = list("promote").querySelectorAll("[data-lib-key]").length; + search.value = ""; + search.dispatchEvent(new Event("input")); + const v = (b) => ["filled", "ghost", "danger"].find((x) => b.className.includes(`--${x}`)); + const buttons = { + labels: tools().map((b) => b.textContent), + variants: tools().map(v), + redDelete: /rgb\((1\d\d|2\d\d), (\d|[1-9]\d), (\d|[1-9]\d)\)/.test( + getComputedStyle(tools()[2]).backgroundColor + getComputedStyle(tools()[2]).color, + ), + deleteColor: getComputedStyle(tools()[2]).backgroundColor, + }; + // 사전조합 상세 [로직 추가] + items[1].click(); + const row = await until(() => + document.querySelector('[data-lib-key="SC-999901"] td:nth-child(3)'), + ); + row.click(); + const edit = await until(() => document.querySelector(".m02-main__host [data-labor]")); + await wait(300); + const add = [...edit.querySelectorAll("button")].find((b) => b.textContent === "로직 추가"); + const precombo = { add: add?.textContent ?? null }; + add?.click(); + const pick = await until(() => document.querySelector(".m01-logic__pick")); + await until(() => pick?.querySelectorAll("[data-pick]").length, 3000); + const kinds = [...(pick?.querySelectorAll("[data-pick-kind]") ?? [])].map((x) => x.textContent); + const picker = { + label: pick?.getAttribute("aria-label") ?? null, + kinds: [...new Set(kinds)], + logicRows: kinds.filter((k) => k === "단가산출").length, + rows: kinds.length, + }; + pick?.closest(".m01-logic__backdrop")?.remove(); + return JSON.stringify({ table, buttons, precombo, picker }); + } finally { + window.fetch = real; + } +})(); diff --git a/resources/tester/ui_checks/51-6_사전조합_줄넣기.js b/resources/tester/ui_checks/51-6_사전조합_줄넣기.js index 213b08cc8..689cf8434 100644 --- a/resources/tester/ui_checks/51-6_사전조합_줄넣기.js +++ b/resources/tester/ui_checks/51-6_사전조합_줄넣기.js @@ -115,7 +115,7 @@ await wait(300); }; const pickerRow = async (key) => { - btn(edit(), "추가").click(); + btn(edit(), "로직 추가").click(); const row = await until(() => document.querySelector(`.m01-logic__pick [data-pick="${key}"]`)); return row; }; @@ -123,13 +123,13 @@ // 단가승격 상세 — 한 줄 고정 await openDoc(0, "SP-999901"); const promote = { - add: !!btn(edit(), "추가"), + add: !!btn(edit(), "로직 추가"), rows: lines().length, move: edit().querySelectorAll(".m02-labrow__move button").length, }; // 사전조합 상세 await openDoc(1, "SC-999901"); - const precombo = { add: !!btn(edit(), "추가"), rows: lines().length }; + const precombo = { add: !!btn(edit(), "로직 추가"), rows: lines().length }; const first = await pickerRow("SP-999902"); const pick = document.querySelector(".m01-logic__pick"); const picker = {