Aislo/docs/raw/verification/2026-08-02_verify_panel_height_first_render.md

검증 보고서 — B06 상단 패널 저장 높이 첫 렌더 미반영 결함 수정

주의: 코드 검증은 프로그래머(메인 스레드)가 커밋 전에 수행했고, 이 문서는 그 결과를 정리·보존한 것이다. 이 보고서를 작성한 역할(위키 관리/아카이빙)은 코드를 재검증하지 않았다.

대상

• 작업명: [C06] B06 상단 패널 — 저장된 높이가 첫 렌더에 반영되지 않는 결함 수정
• 커밋 해시: bc02fcc1d47fe0772470c98cf8ae153ce0620559
• 커밋 제목: fix(B06): 저장된 상단 패널 높이가 첫 렌더에 반영되지 않아 종단면도가 잘리던 문제
• 변경 파일: B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts (5줄 추가, 0줄 삭제)

문제와 원인

출처: C05 검증 보고서 [F1] (docs/raw/verification/2026-08-02_verify_mass_haul_multi_curve.md)

증상: 패널을 줄여 둔 세션에서 B06에 다시 들어오면 패널 높이는 복원되지만 차트 높이 배분이 기본값으로 계산돼 종단면도가 20px로 잘려 사실상 사라진다. 창 크기를 조금이라도 바꾸면 정상으로 잡힌다(자가 치유).

시점	패널	종단도	유토곡선
첫 렌더 직후	296px (정상 복원)	20px	190px
재렌더 후	296px	99px	111px

C05 검증 보고서 [F1] 표에는 종단도 재렌더값이 129px로 적혀 있으나 이는 chartHeights()의 계산값이고 실측 렌더 높이는 99px이다. 결함의 성격과 원인 진단에는 영향이 없다.

원인: B06_wf3_ProfileCross_UI_Section_View.ts의 draw()가 root.replaceChildren(panel, …) 이전에 drawPanel()을 호출한다. 첫 렌더 시점의 panel은 아직 root에 붙기 전(detached)이라 getComputedStyle(panel).getPropertyValue("--b06-profile-height")가 빈 문자열을 반환하고, panelHeight()가 BASE_PANEL_HEIGHT(506)로 폴백한다. 리사이저가 남긴 값은 인라인 스타일에는 정상적으로 들어가 있다.

구조 자체는 C02에서 유입됐으나, C05로 차트가 둘이 되면서 배분 실패가 종단면도 소멸로 확대됐다.

조치 내용

수정 방향 — panelHeight()가 인라인 스타일을 먼저 읽고 없을 때만 computed로 폴백한다 (detached 상태에서도 동작).

const panelHeight = (): number => {
  // 첫 렌더 때 panel은 아직 root에 붙기 전이라 getComputedStyle이 빈 값을 준다.
  // 리사이저가 남긴 인라인 변수부터 읽어야 저장된 높이가 첫 화면부터 반영된다.
  const inline = Number.parseFloat(panel.style.getPropertyValue("--b06-profile-height"));
  if (Number.isFinite(inline) && inline > 0) return inline;
  const raw = Number.parseFloat(getComputedStyle(panel).getPropertyValue("--b06-profile-height"));
  return Number.isFinite(raw) && raw > 0 ? raw : BASE_PANEL_HEIGHT;
};

적용 위치: _UI_Section_View.ts:201-209, 파일 총 437줄.

체크리스트 (전항목 완료)

• panelHeight() 수정 (위 방향)
• sessionStorage["b06:profile-panel-height"]에 값이 있는 상태로 B06 첫 진입 시 종단도/유토곡선 높이가 재렌더 결과와 일치하는지 브라우저로 확인
• 저장값이 없는 기본 상태에서 기존 동작(220/190)이 그대로인지 회귀 확인
• prettier + tsc --noEmit

자체 검증 결과 (프로그래머 수행)

판정 기준은 첫 렌더 = 재렌더다. 결함이 있으면 첫 렌더만 어긋난다.

시나리오	첫 렌더 (패널/종단/유토)	재렌더	판정
저장값 296px (기본 미만)	296 / 99 / 111	296 / 99 / 111	일치
저장값 없음 (기본)	496 / 220 / 190	496 / 220 / 190	일치 (회귀 없음)
저장값 700px (기본 초과)	700 / 220 / 384	700 / 220 / 384	일치

• 기본 초과 시 종단도는 220 고정, 늘어난 몫을 유토곡선이 흡수 — chartHeights()의 설계 의도대로다.
• prettier --write 변경 없음, tsc --noEmit 오류 0건, 파일 437줄(700줄 이하).

판정

PASS — 체크리스트 4항목 전부 완료, 자체 검증 3개 시나리오 전부 첫 렌더/재렌더 일치. 미검증· 미해결 항목 없음.