eomsangdon/Aislo
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(B08): 좌측 산출조건 패널을 B03~B07 공통 상자 틀로 통일하고 짤림 제거

Browse Source 
개발용 「확정 없이 다음으로」 줄이 공용 `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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017RANEBHns1S4tkmsYwewtk
This commit is contained in:
eomsangdon
2026-09-12 14:46:43 +09:00
co-authored by Claude Opus 5
parent 43a9239803
commit 648bc52813
4 changed files with 108 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
B08_Quantity/B08_Quantity_UI_ConversionFactors.ts
+3 -2
View File
@@ -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);
B08_Quantity/B08_Quantity_UI_EarthworkGrid_Style.ts
+27
View File
@@ -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; }
B08_Quantity/B08_Quantity_UI_Page.ts
+14 -3
View File
@@ -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<string, number> };
};
}
).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;
}
B08_Quantity/B08_Quantity_UI_SidePanel_Sections.ts
+64
View File
@@ -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);
}
}