eomsangdonandClaude Opus 5
648bc52813
개발용 「확정 없이 다음으로」 줄이 공용 `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
65 lines
2.8 KiB
TypeScript
65 lines
2.8 KiB
TypeScript
/* =============================================================================
|
|
* 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);
|
|
}
|
|
}
|