From 648bc52813c19aafdbc3bc45b05bea491e6709b4 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sat, 12 Sep 2026 14:46:43 +0900 Subject: [PATCH] =?UTF-8?q?fix(B08):=20=EC=A2=8C=EC=B8=A1=20=EC=82=B0?= =?UTF-8?q?=EC=B6=9C=EC=A1=B0=EA=B1=B4=20=ED=8C=A8=EB=84=90=EC=9D=84=20B03?= =?UTF-8?q?~B07=20=EA=B3=B5=ED=86=B5=20=EC=83=81=EC=9E=90=20=ED=8B=80?= =?UTF-8?q?=EB=A1=9C=20=ED=86=B5=EC=9D=BC=ED=95=98=EA=B3=A0=20=EC=A7=A4?= =?UTF-8?q?=EB=A6=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 개발용 「확정 없이 다음으로」 줄이 공용 `ui-sidebar-actions` 를 쓰고 패널 맨 위에 있어, 공용 코드(`splitSidebarActions`)가 **첫 번째** 그 클래스를 패널 바닥 액션 줄로 집고 스크롤 영역을 그 줄 안에 가둠. 그 아래 조건 칸과 진짜 [저장]·[확정] 줄이 `overflow: hidden` 밖으로 밀려 잘리고 스크롤바도 안 생기던 것을 바로잡음. - 개발용 줄 단추 묶음을 `b08-quantity__dev-actions` 로 바꿔 공용 클래스에서 뗌 - 조건 칸을 `ui-collapsible ui-sidebar-section` 상자로 묶는 `groupPanelSections` 신설 (새 파일 `B08_Quantity_UI_SidePanel_Sections.ts` — 본문이 이미 700줄을 넘김) - 토량환산계수 구획도 제 제목으로 접히게 `ui-collapsible` 부여 - 표를 못 받은 경우(`table === null`) `concrete_placing` 접근에서 터져 페이지가 통째로 백지가 되던 것을 `?.` 로 막음 자체검증(ORCA 내장 브라우저 5173, 모듈 직접 로드) — 스크롤 래퍼가 패널 직계로 돌아옴 (`b08-quantity__panel ui-sidebar-fill`) · `ui-sidebar-actions` 1개만 남음 · [저장]·[확정] 줄 바닥 920px = 패널 바닥 920px = 창 높이 920px 로 잘림 없음 · 상자 7개(제목 6 + 무제목 1) · 「구조물·사토」 제목 클릭에 511px → 42px → 511px 로 접힘·펼침 확인 · `tsc --noEmit` 통과 · `pytest -q` 1294 passed. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_017RANEBHns1S4tkmsYwewtk --- .../B08_Quantity_UI_ConversionFactors.ts | 5 +- .../B08_Quantity_UI_EarthworkGrid_Style.ts | 27 ++++++++ B08_Quantity/B08_Quantity_UI_Page.ts | 17 ++++- .../B08_Quantity_UI_SidePanel_Sections.ts | 64 +++++++++++++++++++ 4 files changed, 108 insertions(+), 5 deletions(-) create mode 100644 B08_Quantity/B08_Quantity_UI_SidePanel_Sections.ts diff --git a/B08_Quantity/B08_Quantity_UI_ConversionFactors.ts b/B08_Quantity/B08_Quantity_UI_ConversionFactors.ts index 1a2497c9..443f5b2c 100644 --- a/B08_Quantity/B08_Quantity_UI_ConversionFactors.ts +++ b/B08_Quantity/B08_Quantity_UI_ConversionFactors.ts @@ -157,9 +157,10 @@ export function renderConversionFactorFields( if (!entries.length) return null; const box = document.createElement("div"); - box.className = "b08-quantity__factors"; + // 제 제목을 제 안에 들고 있어 이 구획 자신이 공용 접기 컨테이너가 된다(B03~B07 과 같은 틀). + box.className = "b08-quantity__factors ui-collapsible"; const title = document.createElement("div"); - title.className = "b08-quantity__field"; + title.className = "b08-quantity__field ui-collapsible__title"; const titleName = document.createElement("span"); titleName.textContent = L("B08_Quantity_Side_Factors"); title.append(titleName); diff --git a/B08_Quantity/B08_Quantity_UI_EarthworkGrid_Style.ts b/B08_Quantity/B08_Quantity_UI_EarthworkGrid_Style.ts index 5102228d..5e2d567e 100644 --- a/B08_Quantity/B08_Quantity_UI_EarthworkGrid_Style.ts +++ b/B08_Quantity/B08_Quantity_UI_EarthworkGrid_Style.ts @@ -188,6 +188,33 @@ const CSS = ` .b08-quantity__hint { margin: 0 0 6px; font-size: 11px; line-height: 1.4; color: var(--color-text-secondary); } /* 품셈 범위 밖을 고른 칸 — **막지 않고** 사유를 받는 자리라 경고 색만 준다. */ .b08-quantity__hint--warn { color: var(--color-warning, #b45309); } +/* 좌측 산출조건 패널 — B03~B07 과 같은 공통 틀을 쓴다(접히는 상자 ui-collapsible + + 공통 외곽선 ui-sidebar-section + 바닥 고정 액션 줄 ui-sidebar-actions). + ⚠ 테두리는 공용 .ui-sidebar-section(ui_template_overlay.css)이 전담한다 — + 여기서 border 를 다시 선언하면 로드 순서상 공통 색을 덮어 흐려진다(B04 주석과 같은 까닭). */ +.b08-quantity__panel { display: flex; flex-direction: column; gap: 8px; } +.b08-quantity__section { + display: flex; + flex-direction: column; + gap: 2px; + margin: 0; + padding: 10px 12px; + border-radius: var(--radius-cards); + background-color: var(--color-surface-raised); +} +.b08-quantity__section-title { + margin: 0 0 2px; + font-size: 12px; + font-weight: 600; + color: var(--color-text-secondary); +} +/* 개발 전용 줄 — ⚠ 단추 묶음에 공용 ui-sidebar-actions 를 쓰면 공용 코드가 **이 줄**을 + 패널 바닥 액션으로 잘못 집어(첫 번째 것을 찾는다) 스크롤 영역이 이 줄 안에 갇히고 + 아래 칸들이 통째로 잘린다(2026-09-12 사용자 보고). 생김새만 같게 두고 클래스는 따로 쓴다. */ +.b08-quantity__dev { display: flex; flex-direction: column; gap: 4px; } +.b08-quantity__dev-actions { display: flex; gap: 8px; } +.b08-quantity__dev-actions > * { flex: 1 1 0; min-width: 0; } +.b08-quantity__note { margin: 0; font-size: 11px; line-height: 1.4; color: var(--color-text-secondary); } /* 토량환산계수 구획 — 갈래마다 (값 · 안내 · 사유)가 한 덩어리로 붙는다. */ .b08-quantity__factors { margin: 4px 0 10px; } .b08-quantity__factor { margin-bottom: 6px; } diff --git a/B08_Quantity/B08_Quantity_UI_Page.ts b/B08_Quantity/B08_Quantity_UI_Page.ts index e0bd7259..3e6b092a 100644 --- a/B08_Quantity/B08_Quantity_UI_Page.ts +++ b/B08_Quantity/B08_Quantity_UI_Page.ts @@ -11,6 +11,8 @@ import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale"; import { createButton, showToast } from "@ui/ui_template_elements"; import { API_BASE_URL, CURRENT_PROJECT_ID_KEY } from "@config/config_frontend"; import { createWorkflowLayout } from "@ui/ui_template_workflow_layout"; +import { attachCollapsible } from "@ui/ui_template_collapsible"; +import { groupPanelSections } from "./B08_Quantity_UI_SidePanel_Sections"; import { workflowSteps } from "../A00_Common/b_page_scaffold"; import { fetchWorkflowState, @@ -353,7 +355,10 @@ function devUnlockRow(projectId: string, reload: () => void): HTMLElement { onClick: () => call("DELETE", relock), }); const buttons = document.createElement("div"); - buttons.className = "b08-quantity__actions ui-sidebar-actions"; + // ⚠ 공용 `ui-sidebar-actions` 를 쓰지 않는다 — 공용 코드가 **첫 번째** 그 클래스를 + // 패널 바닥 액션 줄로 집어(`ui_template_overlay.ts` splitSidebarActions), + // 스크롤 영역이 이 줄 안에 갇히고 아래 칸들이 통째로 잘린다(2026-09-12). + buttons.className = "b08-quantity__dev-actions"; buttons.append(unlock, relock); row.append(buttons); return row; @@ -640,6 +645,8 @@ function buildQuantitySidePanel( }, ), ); + // ⚠ `?.` 이 빠지면 표를 못 받은 때(`table === null`) 여기서 터져 **페이지가 통째로 + // 백지**가 된다 — 정작 보여야 할 「표를 못 불렀다」 안내까지 같이 사라진다(2026-09-12 실측). const placing = ( table as unknown as { concrete_placing?: { @@ -647,8 +654,8 @@ function buildQuantitySidePanel( is_default: boolean; price_hint?: { basis?: string; values?: Record }; }; - } - ).concrete_placing; + } | null + )?.concrete_placing; if (placing) { // ⚠ 방식 이름을 **늘** 값 옆에 보인다 — 코드(`12-01-01`)만으로는 무엇을 쓰는지 모른다. const label = PLACING_LABELS[placing.method] ?? placing.method; @@ -743,6 +750,10 @@ function buildQuantitySidePanel( // TODO(미결) — 설정의 초기값을 무엇으로 볼지 사용자 확인 뒤에 붙인다. actions.append(saveButton, confirmButton); panel.append(actions); + + // 조건 칸을 B03~B07 공통 상자로 묶고 제목 클릭으로 접히게 한다. + groupPanelSections(panel); + attachCollapsible(panel); return panel; } diff --git a/B08_Quantity/B08_Quantity_UI_SidePanel_Sections.ts b/B08_Quantity/B08_Quantity_UI_SidePanel_Sections.ts new file mode 100644 index 00000000..d696cbb0 --- /dev/null +++ b/B08_Quantity/B08_Quantity_UI_SidePanel_Sections.ts @@ -0,0 +1,64 @@ +/* ============================================================================= + * B08_Quantity_UI_SidePanel_Sections.ts + * 좌측 산출조건 패널을 **B03~B07 공통 상자**로 묶는 자리. + * + * 페이지 본문(`B08_Quantity_UI_Page.ts`)이 이미 700줄을 크게 넘어 새 코드를 그리로 + * 보내지 않고 이 파일로 뀜다(CLAUDE.md 4장 700줄 제한). + * ========================================================================== */ + +/** + * 다 쌓인 조건 칸을 「제목 + 그 뒤 칸들」 덩어리로 잘라 **B03~B07 공통 상자**에 담는다. + * + * 왜 다 쌓은 뒤에 한 번 묶나 + * 칸을 쌓는 코드가 400줄에 흩어져 있어 append 를 하나하나 고치면 손댈 자리가 너무 많다. + * 제목은 `field(이름, "")` 이 낸 **값이 빈 줄**이고, 그것이 나올 때마다 새 상자가 열린다. + * 상자 겉모습·접기는 공용 클래스가 전담한다 — B04·B06 과 같은 틀이다. + * + * ⚠ 개발용 줄과 맨 아래 액션 줄은 **상자 밖에 남긴다.** 액션 줄은 공용 코드가 패널 바닥에 + * 고정하는 줄이라 상자 안으로 들어가면 바닥에 안 붙는다. + * ⚠ 첫 제목보다 앞에 오는 것(산출법 한 줄 · 토량환산계수 구획)은 **제목 없는 상자**에 담는다 — + * 토량환산계수는 제 제목을 제 안에 이미 들고 있어 따로 붙이면 제목이 둘이 된다. + */ +export function groupPanelSections(panel: HTMLElement): void { + const isHeading = (node: Element): boolean => { + if (node.tagName !== "DIV" || !node.classList.contains("b08-quantity__field")) return false; + const value = node.querySelector(".b08-quantity__field-value"); + return !value || !value.textContent; + }; + const newSection = (title: string | null): HTMLElement => { + const section = document.createElement("section"); + section.className = title + ? "b08-quantity__section ui-collapsible ui-sidebar-section" + : "b08-quantity__section ui-sidebar-section"; + if (title) { + const heading = document.createElement("p"); + heading.className = "b08-quantity__section-title ui-collapsible__title"; + heading.textContent = title; + section.append(heading); + } + return section; + }; + + let box: HTMLElement | null = null; + for (const node of [...panel.children]) { + // 개발용 줄·바닥 액션 줄은 건너뛰고 상자도 끊는다. + if ( + node.classList.contains("b08-quantity__dev") || + node.classList.contains("ui-sidebar-actions") + ) { + box = null; + continue; + } + if (isHeading(node)) { + box = newSection(node.firstElementChild?.textContent ?? ""); + panel.insertBefore(box, node); + node.remove(); + continue; + } + if (!box) { + box = newSection(null); + panel.insertBefore(box, node); + } + box.append(node); + } +}