Files
Aislo/docs/raw/verification/2026-08-02_verify_panel_height_first_render.md
T
eomsangdonandClaude Opus 5 eb30b774f8 chore(docs): docs 폴더 git 추적 전환 · PLAN·OWNERS 최상위 이관
- `docs/` 를 .gitignore 에서 빼 git 추적 대상으로 전환 (위키·완료 이력·검증 기록)
- `docs/raw/PLAN.md` · `docs/raw/OWNERS.md` 를 저장소 최상위로 이동 후 .gitignore 에 등록
  — 창끼리 공유하되 저장소에는 안 올리는 장부
- 살아 있는 경로 참조 7개 파일 정정 (아카이브 107건은 그때 사실이라 그대로 둠)
- graphify 날짜별 산출물(`docs/wiki/graphify-out/20*/`) 제외 — `graphify update` 가 다시 만듦

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-09 18:19:07 +09:00

4.3 KiB

검증 보고서 — 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개 시나리오 전부 첫 렌더/재렌더 일치. 미검증· 미해결 항목 없음.