From cd1ef69d2b5cd4661f132d0485cb28ef62a1efed Mon Sep 17 00:00:00 2001 From: umsangdon Date: Mon, 5 Oct 2026 13:41:13 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat(M02):=2047-5=20=EC=9D=BC=EC=9C=84?= =?UTF-8?q?=EB=8C=80=EA=B0=80=20=EC=A4=84=20=EB=88=84=EB=A6=84=20=3D=20?= =?UTF-8?q?=EA=B3=A0=EB=A6=84=20=ED=95=98=EC=9D=B4=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8=20=C2=B7=20[=EC=98=B5=EC=85=98]=20=EB=8B=A8=EC=B6=94?= =?UTF-8?q?=EB=A1=9C=20=EB=84=A3=EC=9D=84=20=EA=B0=92=20=EB=AA=A8=EB=8B=AC?= =?UTF-8?q?=20=C2=B7=20=EC=A4=84=20=EB=8B=A8=EC=B6=94=20=EA=B3=B5=EC=9A=A9?= =?UTF-8?q?=20=EB=AC=B6=EC=9D=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 단가산출 로직 표 줄 누름 = 고른 줄 하이라이트(로직 키 · 다시 그려도 유지) · 넣을 값 모달은 새 [옵션] 단추 - 줄 단추 이름 위로 · 아래로 · 옵션 · 삭제(빨강) · 카드 갈래 = 옵션 · 삭제 - 공용 단추 묶음 `ui-btn-group` · 간격 토큰 `--btn-group-gap`(4px) — 이 표에만 적용 - 시험: test_m02_card_shell 낡은 글 맞춤 + 47-5 확인 · 화면 시나리오 ui_checks/47-5_일위대가_줄_고름.js Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7 --- .../M02_MasterTemplete_Labor.css | 11 ++ .../M02_MasterTemplete_Labor_Detail.ts | 25 +++- .../M02_MasterTemplete_Labor_Rows.ts | 41 ++++-- .../M02_MasterTemplete_Labor_Text.ts | 7 +- resources/tester/test_m02_card_shell.py | 23 +++- .../tester/ui_checks/47-5_일위대가_줄_고름.js | 128 ++++++++++++++++++ ui_template/ui_template_general_layout.css | 7 + ui_template/ui_template_theme.css | 1 + 8 files changed, 218 insertions(+), 25 deletions(-) create mode 100644 resources/tester/ui_checks/47-5_일위대가_줄_고름.js diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor.css b/M02_MasterTemplete/M02_MasterTemplete_Labor.css index a66f2a6ac..d80e0e147 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor.css +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor.css @@ -119,6 +119,17 @@ background: var(--color-mist-violet); } +/* 고른 줄(47-5) — 옵션 값 줄까지 한 덩이 · 왼쪽 띠 */ +.m02-labrow .m02-labrow__row.is-selected, +.m02-labrow .m02-labrow__optrow.is-selected { + background: var(--color-mist-violet); +} + +.m02-labrow__row.is-selected > td:first-child, +.m02-labrow__optrow.is-selected > td:first-child { + box-shadow: inset 3px 0 0 var(--color-primary); +} + /* 별칭 칸(44-6) — 칸 안 글상자 · 누르면 바로 고침 */ .m02-labrow__alias { min-width: 7rem; diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts b/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts index 4b4fe9ca3..22b37c53f 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts @@ -2,7 +2,8 @@ * M02_MasterTemplete_Labor_Detail.ts * 일위대가 상세(39-3) — 구조물 열마다 하나(`labor/<열>.json`) · UI_Main 종류 `labor` 가 이 부품을 붙임 * (양식 길 읽기 · [저장] · [다시 읽기]는 UI_Main). 차례 = 정보(단위 · 본뜬) → 담은 로직 → 자재목록 → 다이어그램. - * · 담은 로직 줄 누름 = 입력 모달(`Labor_Input`) · [확인] = 화면 캐시만 · 저장은 [저장] + * · 담은 로직 줄 누름 = 고름(하이라이트 · 다시 그려도 유지 · 47-5) · [옵션] = 입력 모달(`Labor_Input`) · + * [확인] = 화면 캐시만 · 저장은 [저장] * · 금액 = 서버 calc(기준 ③ · 최신 응답만 · 저장 안 함) · 고칠 때마다 뒤에서 다시 셈 * · 같은 로직 두 번 · 같은 자재 두 번 막음 · 빈 일위대가도 저장 됨 * ========================================================================== */ @@ -57,8 +58,8 @@ export interface LaborDetailOptions { onChanged: (dirty: boolean) => void; /** 「면적산출에서 잇기」 — 그 열 면적산출 상세로(옮겨 가면 참 · 취소 = 거짓 · 없으면 단추 없음) */ goArea: GoArea | null; - /** 구조물 조합 카드 갈래(43-4) — 단가산출 로직 표 + 자재목록만 · 올리기 · 내리기 · 로직 추가 · - * 정보(단위 · 본뜬) · 다이어그램 없음 · 빼기 · 자재 추가 · 줄 · 수량 모달은 상세와 같음 */ + /** 구조물 조합 카드 갈래(43-4) — 단가산출 로직 표 + 자재목록만 · 위로 · 아래로 · 로직 추가 · + * 정보(단위 · 본뜬) · 다이어그램 없음 · 옵션 · 삭제 · 자재 추가 · 줄 · 수량 모달은 상세와 같음 */ card?: boolean; } @@ -84,6 +85,8 @@ export function mountLaborDetail( let seq = 0; let timer = 0; let alive = true; + /** 고른 줄 로직 키(47-5) — 키로 둬서 순서가 바뀌어도 따라감 */ + let picked: string | null = null; /** 그 열 면적산출의 알약 → 칸 · 값(저장본 · 서버 calc 와 같은 것) */ let links = new Map(); const cells = (): Map => new Map([...links].map(([k, v]) => [k, v.칸])); @@ -133,17 +136,18 @@ export function mountLaborDetail( const draw = (): void => { logicHost.replaceChildren( logicTable( - { rows: cur.담은로직, logics, calc, fail, cells: cells() }, - // 읽기만이면 순서 · 빼기 없음(줄 누름 = 보기 모달은 둠) + { rows: cur.담은로직, logics, calc, fail, cells: cells(), selected: picked }, + // 읽기만이면 순서 · 삭제 없음([옵션] = 보기 모달은 둠) edit ? { - open: openRow, + open: pick, + option: openRow, qty: openQty, ...(opt.card ? {} : { move }), remove: removeRow, alias: setAlias, } - : { open: openRow }, + : { open: pick, option: openRow }, ), ); matHost.replaceChildren( @@ -265,7 +269,14 @@ export function mountLaborDetail( [cur.담은로직[i], cur.담은로직[j]] = [cur.담은로직[j], cur.담은로직[i]]; changed(); } + /** 줄 고름(47-5) — 하이라이트만(표만 · 다이어그램 안 다시 그림) · 화면 캐시 안 바뀜 */ + function pick(i: number): void { + picked = cur.담은로직[i].로직; + for (const tr of logicHost.querySelectorAll("[data-labor-logic],[data-labor-opt]")) + tr.classList.toggle("is-selected", (tr.dataset.laborLogic ?? tr.dataset.laborOpt) === picked); + } function removeRow(i: number): void { + if (cur.담은로직[i].로직 === picked) picked = null; cur.담은로직.splice(i, 1); changed(); } diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts b/M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts index 4047c4ac4..b6993e8eb 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts @@ -6,7 +6,8 @@ * 옵션 값(「지역 서울 · 규격 25mm」)은 줄 아래 이름 ~ 합계에 걸친 한 줄 · 맨 아래 합계 줄(전체 합계 강조). * 자재목록 = 코드 · 이름 · 규격 · 수량산출 · 단위 · 가격 다섯(기준 칸 강조) · 기준단가 / 반영 금액(43-3). * 금액은 calc 답(없으면 「…」). - * 줄 누름 · 순서 단추는 `on` 이 있을 때만(보기 갈래 = 없음). + * 줄 누름 · 줄 단추(위로 · 아래로 · 옵션 · 삭제 · 묶음 `ui-btn-group`)는 `on` 이 있을 때만(보기 갈래 = 없음) · + * 상세는 줄 누름 = 고름(`selected` 줄 하이라이트) · 넣을 값 모달은 [옵션](47-5). * ========================================================================== */ import { createButton, el } from "@ui/ui_template_elements"; @@ -21,6 +22,7 @@ import type { LaborRow, } from "./M02_MasterTemplete_Labor_Api"; import { tc } from "./M02_MasterTemplete_Labor_Text"; +import "@ui/ui_template_general_layout.css"; import "./M02_MasterTemplete_Labor.css"; import { valueLine } from "./M02_Labor_Values_Model"; @@ -98,7 +100,7 @@ function qtyCell( : el("span", { children: parts }); if (open) body.addEventListener("click", (e) => { - e.stopPropagation(); // 줄 누름(입력 모달)과 따로 + e.stopPropagation(); // 줄 누름(고름)과 따로 open(); }); return el("td", { @@ -158,9 +160,11 @@ const table = (heads: string[], rows: HTMLElement[], foot: HTMLElement[]): HTMLE ], }); -/** 줄 누름 · 순서 · 빼기 — 순서 · 빼기가 없으면 그 칸 없음 */ +/** 줄 누름 · 순서 · 옵션 · 삭제 — 셋 다 없으면 그 칸 없음 */ export interface RowHandlers { open: (i: number) => void; + /** [옵션] 단추(47-5 · 넣을 값 모달) — 없으면 단추 없음 */ + option?: (i: number) => void; /** 수량산출 칸 누름(손 입력 · 엑셀에서 고르기) — 없으면 줄 누름과 같음 */ qty?: (i: number) => void; move?: (i: number, d: number) => void; @@ -191,7 +195,7 @@ function aliasCell( }, }); input.value = value ?? ""; - input.addEventListener("click", (e) => e.stopPropagation()); // 줄 누름(입력 모달)과 따로 + input.addEventListener("click", (e) => e.stopPropagation()); // 줄 누름(고름)과 따로 input.addEventListener("input", () => set(input.value.trim() || null)); input.addEventListener("keydown", (e) => { if (e.key === "Enter") input.blur(); @@ -211,14 +215,16 @@ export interface LogicTableData { fail?: string | null; /** 알약 키 → 이은 면적산출 칸(「B6」) */ cells?: ReadonlyMap; + /** 고른 줄 로직 키(47-5 · 하이라이트) */ + selected?: string | null; } /** 담은 로직 표 — 보기 갈래는 `on` 없이 */ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement { const wait = !data.calc && !data.fail; - const { move, remove } = on ?? {}; - // 빼기만(구조물 조합 카드 · 43-4)이어도 끝 칸 — 순서 단추는 `move` 가 있을 때만 - const tools = !!(move || remove); + const { move, remove, option } = on ?? {}; + // 옵션 · 삭제만(구조물 조합 카드 · 43-4)이어도 끝 칸 — 순서 단추는 `move` 가 있을 때만 + const tools = !!(move || remove || option); const lineOf = (key: string): LaborCalcLine | undefined => data.calc?.줄.find((l) => l.로직 === key); const trs = data.rows.flatMap((row, i) => { @@ -237,12 +243,13 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement label, variant, onClick: (e) => { - e.stopPropagation(); // 줄 누름(입력 모달)과 따로 + e.stopPropagation(); // 줄 누름(고름)과 따로 run(); }, }); + const sel = data.selected === row.로직 ? " is-selected" : ""; const tr = el("tr", { - className: on ? "m02-labrow__row is-open" : "m02-labrow__row", + className: (on ? "m02-labrow__row is-open" : "m02-labrow__row") + sel, attrs: { "data-labor-logic": row.로직 }, children: [ el("td", { className: "m02-labrow__no", text: String(i + 1) }), @@ -281,10 +288,16 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement el("td", { className: "m02-labrow__move", children: [ - ...(move - ? [small(tc("Up"), () => move(i, -1)), small(tc("Down"), () => move(i, 1))] - : []), - ...(remove ? [small(tc("Remove"), () => remove(i), "danger")] : []), + el("div", { + className: "ui-btn-group", + children: [ + ...(move + ? [small(tc("Up"), () => move(i, -1)), small(tc("Down"), () => move(i, 1))] + : []), + ...(option ? [small(tc("Labor_Option"), () => option(i))] : []), + ...(remove ? [small(tc("Remove"), () => remove(i), "danger")] : []), + ], + }), ], }), ] @@ -295,7 +308,7 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement if (!note) return [tr]; // 옵션 값 줄(44-6) — 이름 ~ 합계 칸에 걸친 한 줄(말줄임 · 전체 글은 title) · 행 높이 안 커짐 const opt = el("tr", { - className: on ? "m02-labrow__optrow is-open" : "m02-labrow__optrow", + className: (on ? "m02-labrow__optrow is-open" : "m02-labrow__optrow") + sel, attrs: { "data-labor-opt": row.로직 }, children: [ el("td", { className: "m02-labrow__no", text: "" }), diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts b/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts index 13fe5f3a6..6dfa08d8d 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts @@ -31,9 +31,10 @@ const TEXT = { Alias_Edit: ["눌러서 별칭 고침", "Click to edit alias"], Col_Unit: ["결과 단위", "Result unit"], Col_Move: ["순서", "Move"], - Up: ["올리기", "Up"], - Down: ["내리기", "Down"], - Remove: ["빼기", "Remove"], + Up: ["위로", "Up"], + Down: ["아래로", "Down"], + Remove: ["삭제", "Delete"], + Labor_Option: ["옵션", "Options"], AddLogic: ["로직 추가", "Add logic"], NoLogic: ["단가산출 로직 없음", "No logics yet"], Open: ["열기", "Open"], diff --git a/resources/tester/test_m02_card_shell.py b/resources/tester/test_m02_card_shell.py index aada156a2..b8c90cf5c 100644 --- a/resources/tester/test_m02_card_shell.py +++ b/resources/tester/test_m02_card_shell.py @@ -78,7 +78,7 @@ def test_일위대가_카드는_상세_카드_갈래(): assert "...(opt.card ? {} : { move })" in detail # 순서 단추 없음 · 빼기는 그대로 assert "opt.card ? null : addLogic" in detail and "...(opt.card ? [] : [dgBox])," in detail rows = _text("M02_MasterTemplete_Labor_Rows.ts") - assert "const tools = !!(move || remove);" in rows and "compactTable" not in rows + assert "const tools = !!(move || remove || option);" in rows and "compactTable" not in rows assert "compact" not in _text("M02_MasterTemplete_Labor_View.ts").split("*/", 1)[1] @@ -90,3 +90,24 @@ def test_일위대가_상세_단위는_표준_단위_고르기(): assert "extra: [unit0, cur.단위].filter((u): u is string => !!u)," in detail assert "cur.단위 = u === NO_UNIT ? null : u;" in detail assert "readOnly: !edit," in detail and "maxLength = 20" not in detail + + +def test_일위대가_줄_고름과_옵션_단추(): + """47-5 — 줄 누름 = 고름(하이라이트 · 키로 둬서 다시 그려도 유지) · 넣을 값 모달 = [옵션] · + 단추 위로 · 아래로 · 옵션 · 삭제(빨강) · 묶음 간격 = 공용 `ui-btn-group`.""" + detail = _text("M02_MasterTemplete_Labor_Detail.ts") + assert "open: pick," in detail and "option: openRow," in detail + assert "{ open: pick, option: openRow }" in detail # 읽기만도 고름 · [옵션] = 보기 모달 + assert "selected: picked" in detail + rows = _text("M02_MasterTemplete_Labor_Rows.ts") + up, down = rows.index('small(tc("Up")'), rows.index('small(tc("Down")') + opt, rm = ( + rows.index('small(tc("Labor_Option")'), + rows.index('small(tc("Remove"), () => remove(i), "danger")'), + ) + assert up < down < opt < rm and 'className: "ui-btn-group"' in rows + text = _text("M02_MasterTemplete_Labor_Text.ts") + for t in ('Up: ["위로"', 'Down: ["아래로"', 'Remove: ["삭제"', 'Labor_Option: ["옵션"'): + assert t in text + css = (ROOT / "ui_template" / "ui_template_general_layout.css").read_text(encoding="utf-8") + assert ".ui-btn-group {" in css and "gap: var(--btn-group-gap);" in css diff --git a/resources/tester/ui_checks/47-5_일위대가_줄_고름.js b/resources/tester/ui_checks/47-5_일위대가_줄_고름.js new file mode 100644 index 000000000..a77595dc5 --- /dev/null +++ b/resources/tester/ui_checks/47-5_일위대가_줄_고름.js @@ -0,0 +1,128 @@ +/* 47-5 — 일위대가 단가산출 로직 표 줄 누름 = 고름(하이라이트) · 넣을 값 모달 = [옵션] · 줄 단추 꼴 — 카드 · 상세 두 곳 + * 시작 화면: M02 마스터 템플릿 · 마스터 층(#/m02-master-template?open=구조물조합&root=master) · 시스템 관리자 · + * 나무에 item1(구조물 조합 · 일위대가 로직 둘 이상)이 있음 + * 부르는 법: orca eval --expression "$(tr '\n' ' ' < 이 파일)" (async 식 · JSON 글을 돌려줌) + * 하는 일: item1 카드 표 → 일위대가 카드 [수정]으로 상세 → 둘째 줄 아래로 · 위로(제자리) → item1 다시(값 안 바뀜) + * 기대 수치: + * - card.btns = ["옵션","삭제"] · detail.btns = ["위로","아래로","옵션","삭제"] · danger = true(삭제 = ui-btn--danger) + * - gap = "4px"(공용 `ui-btn-group` · `--btn-group-gap`) · 단추 사이 실제 틈 = gap + * - pick.selected = 1(누른 줄만 is-selected · 옵션 값 줄 있으면 함께) · pick.modal = 0(줄 누름이 모달을 안 엶) + * - option.modal = 1(옵션 단추 = 넣을 값 모달) · 닫은 뒤 0 + * - kept.afterDown = 고른 키가 셋째 줄에서 is-selected · kept.afterUp = 둘째 줄에서 is-selected(다시 그려도 유지) + * - back = true(카드 화면으로 돌아감) + */ +(async () => { + const w = (ms) => new Promise((r) => setTimeout(r, ms)); + const until = async (fn, ms = 8000) => { + for (let t = 0; t < ms; t += 150) { + const v = fn(); + if (v) return v; + await w(150); + } + return null; + }; + const modals = () => document.querySelectorAll(".ui-modal__backdrop").length; + const closeModal = async () => { + document.querySelector(".ui-modal__top button")?.click(); + await w(300); + }; + const rowsOf = (t) => [...t.querySelectorAll("tbody tr[data-labor-logic]")]; + const btnsOf = (tr) => [...tr.querySelectorAll(".ui-btn-group button")]; + /* 금액 셈이 끝나 표가 더 안 바뀔 때까지(셈 중 「…」) — 표는 다시 그려지므로 늘 살아 있는 표를 다시 찾음 */ + const settled = (get) => + until(() => { + const t = get(); + return t && !/…/.test(t.querySelector("tbody").innerText) ? t : null; + }, 10000); + const measure = async (get) => { + const t = await settled(get); + const rows = rowsOf(t); + const tr = rows[1] ?? rows[0]; + const btns = btnsOf(tr); + const group = tr.querySelector(".ui-btn-group"); + const gaps = btns + .slice(1) + .map((b, i) => + Math.round(b.getBoundingClientRect().left - btns[i].getBoundingClientRect().right), + ); + const del = btns.find((b) => b.innerText.trim() === "삭제"); + const key = tr.getAttribute("data-labor-logic"); + tr.querySelector(".m02-labrow__name").click(); + await w(200); + const live = get(); + const pick = { + key, + selected: rowsOf(live).filter((r) => r.classList.contains("is-selected")).length, + mine: !!live.querySelector(`tr[data-labor-logic="${key}"].is-selected`), + opt: + live.querySelector(`tr[data-labor-opt="${key}"]`)?.classList.contains("is-selected") ?? + null, + bg: getComputedStyle(live.querySelector(`tr[data-labor-logic="${key}"]`)).backgroundColor, + modal: modals(), + }; + btnsOf(live.querySelector(`tr[data-labor-logic="${key}"]`)) + .find((b) => b.innerText.trim() === "옵션") + ?.click(); + await until(() => modals() > 0, 3000); + const option = { modal: modals() }; + await closeModal(); + option.after = modals(); + return { + btns: btns.map((b) => b.innerText.trim()), + danger: !!del && del.className.includes("ui-btn--danger"), + gap: group && getComputedStyle(group).gap, + gaps, + pick, + option, + }; + }; + const node = await until(() => document.querySelector('[data-node="i|item1"]')); + if (!node) return JSON.stringify({ error: "item1 없음 — 폴더를 펼쳐 둘 것" }); + node.click(); + const card = await until(() => + [...document.querySelectorAll(".m02-struct__card")].find((c) => + c.querySelector("table.m02-labrow tbody tr[data-labor-logic]"), + ), + ); + if (!card) return JSON.stringify({ error: "일위대가 카드 표 없음" }); + await w(1500); + const out = { card: await measure(() => card.querySelector("table.m02-labrow")) }; + const edit = [...card.querySelectorAll(".m02-struct__card-tools button")].find( + (b) => b.innerText.trim() === "수정", + ); + if (!edit) return JSON.stringify({ ...out, error: "일위대가 [수정] 없음" }); + edit.click(); + const dt = await until(() => + [...document.querySelectorAll("table.m02-labrow")].find( + (t) => !t.closest(".m02-struct__card") && t.querySelector("tbody tr[data-labor-logic]"), + ), + ); + if (!dt) return JSON.stringify({ ...out, error: "상세 표 없음" }); + await w(2000); + const table = () => + [...document.querySelectorAll("table.m02-labrow")].find((t) => !t.closest(".m02-struct__card")); + out.detail = await measure(table); + /* 다시 그려도 유지 — 고른 줄 아래로(서버 다시 셈 → 다시 그림) → 위로(제자리) */ + const key = out.detail.pick.key; + const selAt = () => rowsOf(table()).findIndex((r) => r.classList.contains("is-selected")); + const press = async (label) => { + const tr = table().querySelector(`tr[data-labor-logic="${key}"]`); + btnsOf(tr) + .find((b) => b.innerText.trim() === label) + ?.click(); + await w(2500); + }; + await press("아래로"); + out.kept = { afterDown: selAt() }; + await press("위로"); + out.kept.afterUp = selAt(); + /* 카드 화면으로 돌아감(순서는 제자리 — 버림 물음 뜨면 확인) */ + document.querySelector('[data-node="i|item1"]')?.click(); + await w(800); + [...document.querySelectorAll(".ui-modal button, dialog button")] + .find((b) => /확인|버림|떠나기/.test(b.innerText)) + ?.click(); + await w(1200); + out.back = !!document.querySelector(".m02-struct__card table.m02-labrow"); + return JSON.stringify(out); +})(); diff --git a/ui_template/ui_template_general_layout.css b/ui_template/ui_template_general_layout.css index 5ae01e858..cc8b2cd0c 100644 --- a/ui_template/ui_template_general_layout.css +++ b/ui_template/ui_template_general_layout.css @@ -48,6 +48,13 @@ gap: var(--spacing-8); } +/* 붙은 단추 묶음(표 줄 위로 · 아래로 · 옵션 · 삭제 등) — 사이 간격은 `--btn-group-gap` 하나 */ +.ui-btn-group { + display: inline-flex; + align-items: center; + gap: var(--btn-group-gap); +} + .ui-general-block__table-wrap { overflow-x: auto; } diff --git a/ui_template/ui_template_theme.css b/ui_template/ui_template_theme.css index cdfd0f12e..036d2a651 100644 --- a/ui_template/ui_template_theme.css +++ b/ui_template/ui_template_theme.css @@ -140,6 +140,7 @@ --spacing-96: 96px; --spacing-104: 104px; --spacing-216: 216px; + --btn-group-gap: var(--spacing-4); /* 붙은 단추 묶음(.ui-btn-group) 사이 */ /* --------------------------------------------------------------------------- * 5. 보더 반경 (Border Radius) — 8px 시그니처 From 66cb7afbab65f0141fd056c97a59ea1ead156848 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Mon, 5 Oct 2026 13:45:53 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat(M02):=2047-4=20=EC=9D=BC=EC=9C=84?= =?UTF-8?q?=EB=8C=80=EA=B0=80=20=EC=83=81=EC=84=B8=20=EC=98=A4=EB=A5=B8?= =?UTF-8?q?=EC=AA=BD=20=E3=80=8C=EC=9B=90=EB=AC=B8=E3=80=8D=20=EC=A0=91?= =?UTF-8?q?=EB=8A=94=20=ED=8C=A8=EB=84=90=20=E2=80=94=20=EA=B3=A0=EB=A5=B8?= =?UTF-8?q?=20=EC=A4=84=20=EB=A1=9C=EC=A7=81=EC=9D=98=20=ED=92=88=EC=85=88?= =?UTF-8?q?=20=EC=9B=90=EB=AC=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 공용 오른쪽 접는 패널(ui_template_side_panels · 47-3 부품) · 취향 키 m02-labor-side · 카드 갈래엔 없음 - 고른 줄 없음 = 안내 한 줄 · 고르면 그 로직 출처 원문(GET /m01/logic/source) - 원문 보기를 M01_MasterData_UI_LogicLab_Source 로 떼어 M01 로직 상세와 한 벌로 씀(M01 동작 그대로) - 입력 목록 길(GET /m02/logic-lib/inputs)에 로직 출처 칸 추가 - 시험: test_m02_labor_values 출처 확인 · 화면 시나리오 ui_checks/47-4_일위대가_원문패널.js Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7 --- .../M01_MasterData_UI_LogicLab_Side.ts | 86 ++------------- .../M01_MasterData_UI_LogicLab_Source.ts | 101 ++++++++++++++++++ M02_MasterTemplete/M02_Labor_Inputs.py | 3 +- .../M02_MasterTemplete_Api_Fetch.ts | 2 + .../M02_MasterTemplete_Labor_Detail.ts | 69 ++++++++---- .../M02_MasterTemplete_Labor_Text.ts | 5 + resources/tester/test_m02_labor_values.py | 1 + .../ui_checks/47-4_일위대가_원문패널.js | 82 ++++++++++++++ 8 files changed, 249 insertions(+), 100 deletions(-) create mode 100644 M01_MasterData/M01_MasterData_UI_LogicLab_Source.ts create mode 100644 resources/tester/ui_checks/47-4_일위대가_원문패널.js diff --git a/M01_MasterData/M01_MasterData_UI_LogicLab_Side.ts b/M01_MasterData/M01_MasterData_UI_LogicLab_Side.ts index 2eec06f9e..c8c242459 100644 --- a/M01_MasterData/M01_MasterData_UI_LogicLab_Side.ts +++ b/M01_MasterData/M01_MasterData_UI_LogicLab_Side.ts @@ -2,45 +2,26 @@ * M01_MasterData_UI_LogicLab_Side.ts * 로직 상세 — 왼쪽 지금 내용 · 오른쪽 접는 패널 둘 「흐름도」(M02_DF_Panel) · 「원문」(품셈 본문 절) * 공용 오른쪽 접는 패널(ui_template_side_panels) — 하나만 열림 · 모두 접힘 됨 · 폭 공유 · 접힌 패널 = 세로 글 띠 - * 열린 패널 · 폭은 취향 키(`m01-logic-side`) · 원문은 출처 글로 서버가 찾음(`GET /m01/logic/source`) + * 열린 패널 · 폭은 취향 키(`m01-logic-side`) · 원문 = 공용 원문 보기(`LogicLab_Source`) * ========================================================================== */ import { currentLanguageIndex } from "@ui/ui_template_locale"; import { createSidePanels } from "@ui/ui_template_side_panels"; import { el } from "@ui/ui_template_elements"; -import { API_BASE_URL } from "@config/config_frontend"; import type { SplitHandle } from "./M01_MasterData_UI_LogicLab_Flow"; +import { createSourceView } from "./M01_MasterData_UI_LogicLab_Source"; import "../M02_MasterTemplete/DataFlow/M02_DF_Panel.css"; import "./M01_MasterData_UI_LogicLab_Side.css"; const TEXT = { Flow: ["흐름도", "Flow"], Source: ["원문", "Source"], - Loading: ["원문 찾는 중", "Looking up the source"], - None: ["원문 연결 없음", "No linked source"], - From: ["출처", "Source"], - NoSource: ["출처 없음", "No source"], - Near: ["{v} 절이 없어 위 절", "No {v} section — showing the parent"], } as const; -const ts = (key: keyof typeof TEXT, v = ""): string => - TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v); +const ts = (key: keyof typeof TEXT): string => TEXT[key][currentLanguageIndex === 1 ? 1 : 0]; export type PanelPick = "flow" | "source" | "none"; -interface Block { - h?: number; - text?: string; - p?: string; - table?: string[][]; -} -interface Found { - number: string; - matched: string; - file: string; - blocks: Block[]; -} - export interface LogicSide { /** [왼쪽 지금 내용, 오른쪽 패널] 칸 */ root: HTMLElement; @@ -54,42 +35,16 @@ export interface LogicSide { showSource(src: string): void; } -function blockNode(b: Block): HTMLElement { - if (b.table) - return el("div", { - className: "m01-logic__scroll", - children: [ - el("table", { - className: "m01-logic__grid m01lab-src__table", - children: [ - el("tbody", { - children: b.table.map((r) => - el("tr", { children: r.map((c) => el("td", { text: c })) }), - ), - }), - ], - }), - ], - }); - if (b.h) return el("h4", { className: "m01lab-src__head", text: b.text ?? "" }); - return el("p", { className: "m01lab-src__p", text: b.p ?? "" }); -} - export function buildLogicSide(left: HTMLElement): LogicSide { const flowSlot = el("div", { className: "m01lab-side__slot" }); - const body = el("div", { className: "m01lab-src__body" }); - const title = el("strong", { className: "m02-dfp__title" }); + const source = createSourceView(); const sp = createSidePanels({ prefKey: "m01-logic-side", defaultWidth: 520, minWidth: 320, panels: [ { id: "flow", title: ts("Flow"), body: flowSlot }, - { - id: "source", - title: ts("Source"), - body: el("div", { className: "m01lab-src", children: [title, body] }), - }, + { id: "source", title: ts("Source"), body: source.root }, ], onChange: () => { flowFold?.(sp.current() !== "flow"); // 다시 펴면 흐름도 판을 폭에 맞춤 @@ -103,37 +58,10 @@ export function buildLogicSide(left: HTMLElement): LogicSide { let flowFold: ((on: boolean) => void) | null = null; let want = ""; - let shown: string | null = null; + /** 원문 패널이 열려 있을 때만 찾음 */ const load = (): void => { - if (sp.current() !== "source" || shown === want) return; - const src = (shown = want); - title.textContent = src || ts("NoSource"); - body.replaceChildren(el("p", { className: "m01-logic__muted", text: ts("Loading") })); - const none = (): void => - body.replaceChildren( - el("p", { className: "m01lab-src__none", text: ts("None") }), - el("p", { className: "m01-logic__muted", text: `${ts("From")} · ${src || "—"}` }), - ); - if (!src.trim()) return none(); - void fetch(`${API_BASE_URL}/m01/logic/source?${new URLSearchParams({ src })}`, { - credentials: "include", - }) - .then((r) => (r.ok ? (r.json() as Promise<{ found: Found[] }>) : { found: [] })) - .catch(() => ({ found: [] as Found[] })) - .then(({ found }) => { - if (shown !== src) return; - if (!found.length) return none(); - body.replaceChildren( - ...found.flatMap((f) => [ - el("p", { - className: "m01-logic__muted m01lab-src__file", - text: f.matched === f.number ? f.file : `${f.file} · ${ts("Near", f.number)}`, - }), - ...f.blocks.map(blockNode), - ]), - ); - }); + if (sp.current() === "source") source.show(want); }; return { diff --git a/M01_MasterData/M01_MasterData_UI_LogicLab_Source.ts b/M01_MasterData/M01_MasterData_UI_LogicLab_Source.ts new file mode 100644 index 000000000..e1d722d61 --- /dev/null +++ b/M01_MasterData/M01_MasterData_UI_LogicLab_Source.ts @@ -0,0 +1,101 @@ +/* ============================================================================= + * M01_MasterData_UI_LogicLab_Source.ts + * 원문 보기(품셈 본문 절) — 출처 글로 서버가 찾음(`GET /m01/logic/source`) · 늦게 온 답은 버림 + * M01 로직 상세 「원문」 패널 · M02 일위대가 상세 「원문」 패널(47-4)이 같이 씀 + * ========================================================================== */ + +import { currentLanguageIndex } from "@ui/ui_template_locale"; +import { el } from "@ui/ui_template_elements"; +import { API_BASE_URL } from "@config/config_frontend"; +import "../M02_MasterTemplete/DataFlow/M02_DF_Panel.css"; +import "./M01_MasterData_UI_LogicLab_Side.css"; + +const TEXT = { + Loading: ["원문 찾는 중", "Looking up the source"], + None: ["원문 연결 없음", "No linked source"], + From: ["출처", "Source"], + NoSource: ["출처 없음", "No source"], + Near: ["{v} 절이 없어 위 절", "No {v} section — showing the parent"], +} as const; + +const ts = (key: keyof typeof TEXT, v = ""): string => + TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v); + +interface Block { + h?: number; + text?: string; + p?: string; + table?: string[][]; +} +interface Found { + number: string; + matched: string; + file: string; + blocks: Block[]; +} + +function blockNode(b: Block): HTMLElement { + if (b.table) + return el("div", { + className: "m01-logic__scroll", + children: [ + el("table", { + className: "m01-logic__grid m01lab-src__table", + children: [ + el("tbody", { + children: b.table.map((r) => + el("tr", { children: r.map((c) => el("td", { text: c })) }), + ), + }), + ], + }), + ], + }); + if (b.h) return el("h4", { className: "m01lab-src__head", text: b.text ?? "" }); + return el("p", { className: "m01lab-src__p", text: b.p ?? "" }); +} + +export interface SourceView { + root: HTMLElement; + /** 그 출처 글의 원문을 그림 — 지금 보이는 것과 같으면 안 부름 */ + show(src: string): void; +} + +export function createSourceView(): SourceView { + const body = el("div", { className: "m01lab-src__body" }); + const title = el("strong", { className: "m02-dfp__title" }); + let shown: string | null = null; + + const show = (src: string): void => { + if (shown === src) return; + shown = src; + title.textContent = src || ts("NoSource"); + body.replaceChildren(el("p", { className: "m01-logic__muted", text: ts("Loading") })); + const none = (): void => + body.replaceChildren( + el("p", { className: "m01lab-src__none", text: ts("None") }), + el("p", { className: "m01-logic__muted", text: `${ts("From")} · ${src || "—"}` }), + ); + if (!src.trim()) return none(); + void fetch(`${API_BASE_URL}/m01/logic/source?${new URLSearchParams({ src })}`, { + credentials: "include", + }) + .then((r) => (r.ok ? (r.json() as Promise<{ found: Found[] }>) : { found: [] })) + .catch(() => ({ found: [] as Found[] })) + .then(({ found }) => { + if (shown !== src) return; + if (!found.length) return none(); + body.replaceChildren( + ...found.flatMap((f) => [ + el("p", { + className: "m01-logic__muted m01lab-src__file", + text: f.matched === f.number ? f.file : `${f.file} · ${ts("Near", f.number)}`, + }), + ...f.blocks.map(blockNode), + ]), + ); + }); + }; + + return { root: el("div", { className: "m01lab-src", children: [title, body] }), show }; +} diff --git a/M02_MasterTemplete/M02_Labor_Inputs.py b/M02_MasterTemplete/M02_Labor_Inputs.py index ccde25e9c..71cf43bae 100644 --- a/M02_MasterTemplete/M02_Labor_Inputs.py +++ b/M02_MasterTemplete/M02_Labor_Inputs.py @@ -41,7 +41,7 @@ def _logics(codes: list[str]) -> tuple[list[dict], list[str]]: def _listed(logics: list[dict]) -> list[dict[str, Any]]: - """로직 줄마다 `{로직, 이름, 결과단위, 입력: [{이름, 설명, 단위, 고르기?, 범위?, 자동값}]}`.""" + """로직 줄마다 `{로직, 이름, 결과단위, 출처, 입력: [{이름, 설명, 단위, 고르기?, 범위?, 자동값}]}`.""" whole = m01.loaded()[1] out = [] for logic in logics: @@ -57,6 +57,7 @@ def _listed(logics: list[dict]) -> list[dict[str, Any]]: "로직": logic.get("키"), "이름": logic.get("이름"), "결과단위": logic.get("결과단위"), + "출처": logic.get("출처"), "입력": specs, } ) diff --git a/M02_MasterTemplete/M02_MasterTemplete_Api_Fetch.ts b/M02_MasterTemplete/M02_MasterTemplete_Api_Fetch.ts index 5e7f251e8..e0569ac5c 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Api_Fetch.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Api_Fetch.ts @@ -313,6 +313,8 @@ export interface ItemLogic { 로직: string; 이름: string; 결과단위?: string; + /** 품셈 출처 글(47-4 · 원문 패널) */ + 출처?: string | null; 입력: ItemInput[]; } diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts b/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts index 22b37c53f..24b45bd61 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts @@ -6,12 +6,15 @@ * [확인] = 화면 캐시만 · 저장은 [저장] * · 금액 = 서버 calc(기준 ③ · 최신 응답만 · 저장 안 함) · 고칠 때마다 뒤에서 다시 셈 * · 같은 로직 두 번 · 같은 자재 두 번 막음 · 빈 일위대가도 저장 됨 + * · 오른쪽 「원문」 접는 패널(47-4 · 상세만 · 공용 `ui_template_side_panels`) = 고른 줄 로직의 출처 원문 * ========================================================================== */ import { createButton, createInputField, el, showToast } from "@ui/ui_template_elements"; +import { createSidePanels } from "@ui/ui_template_side_panels"; import { ROUTES } from "@config/config_frontend"; import { navigateTo } from "../A00_Common/router"; import { setPendingLogicKey } from "../M01_MasterData/M01_MasterData_UI_Side"; +import { createSourceView } from "../M01_MasterData/M01_MasterData_UI_LogicLab_Source"; import type { Workbook } from "../A00_Common/spreadsheet/spreadsheet"; import { recalcWorkbook } from "../A00_Common/spreadsheet/spreadsheet_recalc"; import { @@ -108,6 +111,26 @@ export function mountLaborDetail( children: [el("summary", { text: diagramTitle() }), dgHost], }); + /** 원문 패널(47-4 · 카드 갈래엔 없음) — 열려 있을 때만 찾음 · 고른 줄 없으면 안내 한 줄 */ + const source = createSourceView(); + const sourceHost = el("div", { attrs: { "data-labor-source": "" } }); + const side = opt.card + ? null + : createSidePanels({ + prefKey: "m02-labor-side", + panels: [{ id: "source", title: tc("Labor_Source"), body: sourceHost }], + onChange: () => showSource(), + }); + function showSource(): void { + if (side?.current() !== "source") return; + if (!picked) + return void sourceHost.replaceChildren( + el("p", { className: "m01-logic__muted", text: tc("Labor_SourceHint") }), + ); + source.show(logics.get(picked)?.출처 ?? ""); + if (sourceHost.firstChild !== source.root) sourceHost.replaceChildren(source.root); + } + const lineOf = (key: string) => calc?.줄.find((l) => l.로직 === key); const matOf = (code: string) => calc?.자재.find((m) => m.코드 === code); @@ -157,6 +180,7 @@ export function mountLaborDetail( ), ); drawDg(); + showSource(); }; /** 서버 다시 셈 — 늦게 온 답은 버림(최신 응답만) */ @@ -269,11 +293,12 @@ export function mountLaborDetail( [cur.담은로직[i], cur.담은로직[j]] = [cur.담은로직[j], cur.담은로직[i]]; changed(); } - /** 줄 고름(47-5) — 하이라이트만(표만 · 다이어그램 안 다시 그림) · 화면 캐시 안 바뀜 */ + /** 줄 고름(47-5) — 하이라이트(표만 · 다이어그램 안 다시 그림) + 원문 패널(47-4) · 화면 캐시 안 바뀜 */ function pick(i: number): void { picked = cur.담은로직[i].로직; for (const tr of logicHost.querySelectorAll("[data-labor-logic],[data-labor-opt]")) tr.classList.toggle("is-selected", (tr.dataset.laborLogic ?? tr.dataset.laborOpt) === picked); + showSource(); } function removeRow(i: number): void { if (cur.담은로직[i].로직 === picked) picked = null; @@ -390,26 +415,30 @@ export function mountLaborDetail( ], }); + const editor = (body: HTMLElement): HTMLElement => + side ? el("div", { className: "ui-side-panels-row", children: [body, side.root] }) : body; host.replaceChildren( - el("div", { - className: "m01-logic__editor m01-combo m02-labor__edit", - attrs: { "data-labor": opt.column }, - children: [ - ...(opt.card - ? [] - : [ - el("section", { - className: "m01lab__box m01-logic__section", - children: [ - el("div", { className: "m01lab__info", children: [unit.root, origin.root] }), - ], - }), - ]), - section(tc("Logics_Title"), opt.card ? null : addLogic, logicHost), - section(tc("Labor_Mats"), addMat, matHost), - ...(opt.card ? [] : [dgBox]), - ], - }), + editor( + el("div", { + className: "m01-logic__editor m01-combo m02-labor__edit", + attrs: { "data-labor": opt.column }, + children: [ + ...(opt.card + ? [] + : [ + el("section", { + className: "m01lab__box m01-logic__section", + children: [ + el("div", { className: "m01lab__info", children: [unit.root, origin.root] }), + ], + }), + ]), + section(tc("Logics_Title"), opt.card ? null : addLogic, logicHost), + section(tc("Labor_Mats"), addMat, matHost), + ...(opt.card ? [] : [dgBox]), + ], + }), + ), ); draw(); // 로직 입력 목록 · 면적산출 이은 칸(없으면 빈 것 — 새 구조물)을 받은 뒤 첫 계산 diff --git a/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts b/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts index 6dfa08d8d..db14ee6bc 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts @@ -35,6 +35,11 @@ const TEXT = { Down: ["아래로", "Down"], Remove: ["삭제", "Delete"], Labor_Option: ["옵션", "Options"], + Labor_Source: ["원문", "Source"], + Labor_SourceHint: [ + "단가산출 로직 줄을 고르면 그 원문이 보임", + "Pick a logic row to see its source", + ], AddLogic: ["로직 추가", "Add logic"], NoLogic: ["단가산출 로직 없음", "No logics yet"], Open: ["열기", "Open"], diff --git a/resources/tester/test_m02_labor_values.py b/resources/tester/test_m02_labor_values.py index f69a66248..923e5fe8c 100644 --- a/resources/tester/test_m02_labor_values.py +++ b/resources/tester/test_m02_labor_values.py @@ -43,6 +43,7 @@ def test_입력_목록은_키_차례_겹침_한_번_자동값_빠진_로직(clie assert got["빠진로직"] == ["GF999999"] one = got["로직"][1] assert one["이름"] and one["결과단위"] + assert all("출처" in x for x in got["로직"]) # 47-4 원문 패널 assert one["입력"] and all("자동값" in i and "이름" in i for i in one["입력"]) # 입력 목록 몸 한 벌(M02_Labor_Inputs) assert got["로직"] == labor_inputs.logic_inputs([B, A])["로직"] diff --git a/resources/tester/ui_checks/47-4_일위대가_원문패널.js b/resources/tester/ui_checks/47-4_일위대가_원문패널.js new file mode 100644 index 000000000..d6fad14d4 --- /dev/null +++ b/resources/tester/ui_checks/47-4_일위대가_원문패널.js @@ -0,0 +1,82 @@ +/* 47-4 — 일위대가 상세 오른쪽 「원문」 접는 패널(공용 ui_template_side_panels) · 고른 줄 로직의 원문 + * 시작 화면: M02 마스터 템플릿 · 마스터 층(#/m02-master-template?open=구조물조합&root=master) · 시스템 관리자 · + * 나무에 item1(구조물 조합 · 일위대가 로직 담김)이 있음 + * 부르는 법: orca eval --expression "$(tr '\n' ' ' < 이 파일)" (async 식 · JSON 글을 돌려줌) + * 하는 일: item1 카드(패널 없음) → 일위대가 [수정] 상세 → 패널 펴기 → 줄 고르기 → 접고 폄 → 처음 패널 상태로 → item1 다시 + * 기대 수치: + * - cardPanel = 0(카드 갈래엔 패널 없음) · detailPanel = 1 + * - hint = 「단가산출 로직 줄을 고르면 그 원문이 보임」(고른 줄 없음) + * - picked.title = 그 로직 출처 글(예 「건설품셈 공통 6-3-3」) · picked.blocks > 0(원문 절 글 · 표) · picked.loading = false + * - second.title ≠ picked.title 이면 다른 로직 원문으로 바뀜(출처가 같으면 같음) + * - folded = { panel: true(숨음) , strip: false(띠 보임) } · reopened.title = second.title(접고 펴도 그대로) + * - restored = 처음 패널 상태 · back = true + */ +(async () => { + const w = (ms) => new Promise((r) => setTimeout(r, ms)); + const until = async (fn, ms = 8000) => { + for (let t = 0; t < ms; t += 150) { + const v = fn(); + if (v) return v; + await w(150); + } + return null; + }; + const node = await until(() => document.querySelector('[data-node="i|item1"]')); + if (!node) return JSON.stringify({ error: "item1 없음 — 폴더를 펼쳐 둘 것" }); + node.click(); + const card = await until(() => + [...document.querySelectorAll(".m02-struct__card")].find((c) => + c.querySelector("table.m02-labrow tbody tr[data-labor-logic]"), + ), + ); + if (!card) return JSON.stringify({ error: "일위대가 카드 표 없음" }); + const out = { cardPanel: card.querySelectorAll(".ui-side-panels").length }; + [...card.querySelectorAll(".m02-struct__card-tools button")] + .find((b) => b.innerText.trim() === "수정") + ?.click(); + const row = await until(() => + document.querySelector(".ui-side-panels-row .m02-labor__edit")?.closest(".ui-side-panels-row"), + ); + if (!row) return JSON.stringify({ ...out, error: "상세 패널 칸 없음" }); + await until(() => row.querySelector("tbody tr[data-labor-logic]")); + const sp = row.querySelector(".ui-side-panels"); + out.detailPanel = row.querySelectorAll(":scope > .ui-side-panels").length; + const box = sp.querySelector('.ui-side-panels__panel[data-panel="source"]'); + const strip = sp.querySelector(".ui-side-panels__strip"); + const wasOpen = !box.hidden; + if (!wasOpen) strip.click(); + await w(200); + const host = () => row.querySelector("[data-labor-source]"); + out.hint = host().innerText.trim(); + const read = async () => { + await until(() => !/원문 찾는 중/.test(host().innerText), 8000); + return { + title: host().querySelector(".m02-dfp__title")?.innerText.trim() ?? null, + blocks: host().querySelectorAll(".m01lab-src__p, .m01lab-src__head, .m01lab-src__table") + .length, + loading: /원문 찾는 중/.test(host().innerText), + none: !!host().querySelector(".m01lab-src__none"), + }; + }; + const rows = () => [...row.querySelectorAll("tbody tr[data-labor-logic]")]; + rows()[0].querySelector(".m02-labrow__name").click(); + out.picked = { key: rows()[0].dataset.laborLogic, ...(await read()) }; + const two = rows()[1]; + if (two) { + two.querySelector(".m02-labrow__name").click(); + out.second = { key: two.dataset.laborLogic, ...(await read()) }; + } + sp.querySelector(".ui-side-panels__fold").click(); + await w(200); + out.folded = { panel: box.hidden, strip: strip.hidden }; + strip.click(); + await w(300); + out.reopened = await read(); + if (!wasOpen) sp.querySelector(".ui-side-panels__fold").click(); + await w(200); + out.restored = !box.hidden === wasOpen; + document.querySelector('[data-node="i|item1"]')?.click(); + await w(1200); + out.back = !!document.querySelector(".m02-struct__card table.m02-labrow"); + return JSON.stringify(out); +})();