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

개발용 「확정 없이 다음으로」 줄이 공용 `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:
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
@@ -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; }