fix(B06): 유토곡선 패널 리사이저가 잡히지 않던 문제 + 상한·눈금 보정

헤드리스 브라우저로 실화면을 확인하다 드래그가 전혀 먹지 않는 것을 발견했다.
손잡이 중심의 hit-test가 손잡이가 아니라 패널을 돌려주고 있었다.

- 손잡이 위치: 패널이 `overflow: hidden`이라 경계에 걸치게 둔 `bottom: -3px`는
  아래 절반이 잘려 나가 클릭 영역이 3px도 남지 않았다. `bottom: 0` + 높이 8px로
  안쪽에 붙여 전체가 잡히게 했다.
- 높이 상한: 부모 `.b06-profile__main`은 횡단 카드까지 담은 스크롤 콘텐츠라
  clientHeight가 5809px였고, 상한이 4647px로 잡혀 사실상 무제한이었다. 이 패널은
  화면 위에 sticky로 붙으므로 상한을 화면 높이 기준으로 바꿨다.
- Y축 눈금: 패널을 줄이면 유토곡선 그래프 몫이 60px대까지 내려가 눈금 5개의
  라벨이 서로 겹쳤다. 그래프가 낮을 때는 3개만 그린다.

실화면 검증(프로젝트 테스트1, route 48, 측점 24개 / 설계 23개):
- 기본 496px → SVG [220, 190]
- 아래로 드래그 694px → SVG [220, 378] (종단도 고정, 유토곡선이 늘어난 몫 흡수)
- 위로 드래그 392px → SVG [170, 147] (기본값 대비 비율만큼 둘 다 축소)
- 접기 35px / 펼치기 복원
- 종단도와 유토곡선의 첫 측점 x=62, 마지막 측점 x=1454로 세 높이 모두에서 일치
- 요약: 절토(자연) 216.1㎥ (토사 14.9 / 리핑암 201.2 / 발파암 0.0),
  절토(다짐환산) 244.8㎥, 성토 321.4㎥, 토취 76.6㎥
  → 14.9×0.90 + 201.2×1.15 = 244.79, 244.8 − 321.4 = −76.6 으로 수식과 일치

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-02 09:40:34 +09:00
co-authored by Claude Opus 5
parent f35ca7e1c9
commit 6bc9cc4080
3 changed files with 11 additions and 4 deletions
@@ -78,7 +78,9 @@ export function createMassHaulChart(
const span = Math.max(max - min, 1e-6);
const y = (volume: number) => LONG_PAD.top + ((max - volume) / span) * plotHeight;
for (const ratio of [0, 0.25, 0.5, 0.75, 1]) {
// 패널을 줄이면 그래프 몫이 60px대까지 내려간다 — 눈금 5개를 그대로 두면 라벨이 서로 겹친다.
const tickRatios = plotHeight < 110 ? [0, 0.5, 1] : [0, 0.25, 0.5, 0.75, 1];
for (const ratio of tickRatios) {
const gridY = LONG_PAD.top + ratio * plotHeight;
const value = max - ratio * span;
svg.append(
@@ -165,7 +165,9 @@ export function createSectionView(
// 손잡이가 패널 아래쪽에 있으므로 아래로 끌면 커진다.
direction: 1,
min: MIN_PANEL_HEIGHT,
max: () => (root.parentElement?.clientHeight ?? window.innerHeight) * MAX_PANEL_HEIGHT_RATIO,
// 부모(`.b06-profile__main`)는 횡단 카드까지 담은 스크롤 콘텐츠라 높이가 수천 px다.
// 이 패널은 화면 위에 sticky로 붙어 있으니 상한은 화면 높이 기준이어야 한다.
max: () => window.innerHeight * MAX_PANEL_HEIGHT_RATIO,
storageKey: PANEL_HEIGHT_KEY,
onResize: () => {
// 끄는 동안 매 프레임 SVG를 다시 그리면 손이 늦게 따라온다 — 멈춘 뒤 한 번만 그린다.
@@ -45,10 +45,13 @@
}
/* 공용 리사이저는 손잡이를 패널 위쪽 경계에 두지만(B05 하단 패널 기준),
이 패널은 화면 위에 붙어 있으므로 아래쪽 경계로 옮긴다(아래로 끌면 커짐). */
이 패널은 화면 위에 붙어 있으므로 아래쪽 경계로 옮긴다(아래로 끌면 커짐).
패널이 `overflow: hidden`이라 경계에 걸치게 두면(bottom: -3px) 손잡이 아래 절반이
잘려 나가 잡히지 않는다 — 안쪽에 붙여 전체가 클릭 영역으로 남게 한다. */
.b06-section__panel > .ui-resizer--vertical {
top: auto;
bottom: -3px;
bottom: 0;
height: 8px;
}
.b06-section__panel-body {