From 6bc9cc408055bc73434d97c02e94afb0ba4b20eb Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sun, 2 Aug 2026 09:40:34 +0900 Subject: [PATCH] =?UTF-8?q?fix(B06):=20=EC=9C=A0=ED=86=A0=EA=B3=A1?= =?UTF-8?q?=EC=84=A0=20=ED=8C=A8=EB=84=90=20=EB=A6=AC=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EC=A0=80=EA=B0=80=20=EC=9E=A1=ED=9E=88=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20+=20=EC=83=81=ED=95=9C=C2=B7?= =?UTF-8?q?=EB=88=88=EA=B8=88=20=EB=B3=B4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 헤드리스 브라우저로 실화면을 확인하다 드래그가 전혀 먹지 않는 것을 발견했다. 손잡이 중심의 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) --- .../B06_wf3_ProfileCross_UI_MassHaul_View.ts | 4 +++- .../B06_wf3_ProfileCross_UI_Section_View.ts | 4 +++- .../B06_wf3_ProfileCross_UI_Style_Cross.css | 7 +++++-- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_MassHaul_View.ts b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_MassHaul_View.ts index f1fc03de..1c89a957 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_MassHaul_View.ts +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_MassHaul_View.ts @@ -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( diff --git a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts index cd6220a9..c6434dbb 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts @@ -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를 다시 그리면 손이 늦게 따라온다 — 멈춘 뒤 한 번만 그린다. diff --git a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css index 034275bd..5edc4a1d 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css @@ -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 {