From c29c2098fb274fdf9a85cd9efa2584eb4691add7 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sun, 2 Aug 2026 15:15:19 +0900 Subject: [PATCH] =?UTF-8?q?fix(B06):=20=EC=83=81=EB=8B=A8=20=ED=8C=A8?= =?UTF-8?q?=EB=84=90=20=EC=A0=91=EA=B8=B0=EB=A5=BC=20B05=20=EB=B0=A9?= =?UTF-8?q?=EC=8B=9D=EC=9C=BC=EB=A1=9C=20=EB=A7=9E=EC=B6=94=EA=B3=A0=20?= =?UTF-8?q?=EC=A7=84=EC=9E=85=20=EC=8B=9C=20=EC=9E=90=EB=8F=99=20=EC=B8=A1?= =?UTF-8?q?=EC=A0=90=20=EC=84=A0=ED=83=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 손잡이가 안 보이던 원인은 패널의 overflow: hidden이었다. .b06-section__panel이 .b06-cross-card와 한 규칙으로 묶여 있어 함께 받고 있었고, 손잡이를 패널 경계 밖으로 내보내자 그대로 잘렸다. 패널을 그룹에서 떼어 자체 규칙으로 분리하고 overflow를 걸지 않는다. - 접기/펴기에서 전역 ui-collapsible 의존을 끊고 B05처럼 명시한다: .is-collapsed에 height 0을 걸고 헤더·본문·리사이저만 숨겨 손잡이만 남긴다. 펼칠 때는 다음 프레임에 그린다 — 그래프 몫을 실측하므로 같은 프레임에 그리면 접혀 있던 0 높이를 읽는다. - 진입 시 첫 측점을 자동 선택하던 것을 없앤다. 고르지도 않은 카드가 강조되고 유토곡선 말풍선이 떠 있었다. Co-Authored-By: Claude Opus 5 (1M context) --- .../B06_wf3_ProfileCross_UI_Section_View.ts | 11 ++++-- .../B06_wf3_ProfileCross_UI_Style_Cross.css | 34 ++++++++++--------- 2 files changed, 26 insertions(+), 19 deletions(-) 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 a6125c34..83131a7e 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts @@ -176,7 +176,9 @@ export function createSectionView( * 패널·리사이저는 한 번만 만들고 draw()에서는 차트 내용만 갈아 끼운다. * 매 렌더마다 새로 만들면 리사이저 핸들과 접힘 상태가 초기화된다. */ const panel = document.createElement("section"); - panel.className = "b06-section__panel ui-collapsible"; + // 접기/펴기는 B05 하단 패널과 같은 방식이다 — 전역 `ui-collapsible` 규칙에 기대지 않고 + // `is-collapsed`에 걸 자체 CSS로 높이를 0으로 접고 자식을 숨긴다(손잡이만 남는다). + panel.className = "b06-section__panel"; // 최소 높이는 TS 상수 하나로만 정의하되 **접힘 상태에는 걸리지 않아야** 한다 — 인라인 // min-height를 두면 접어도 그 높이만큼 빈 배경이 남는다. CSS 변수로 넘겨 펼친 상태에만 건다. panel.style.setProperty("--b06-profile-min-height", `${MIN_PANEL_HEIGHT}px`); @@ -207,7 +209,9 @@ export function createSectionView( const collapsed = panel.classList.toggle("is-collapsed"); sessionStorage.setItem(PANEL_COLLAPSED_KEY, String(collapsed)); panelToggle.setOpen(!collapsed); - if (!collapsed) drawPanel(); + // 펼칠 때는 레이아웃이 잡힌 **다음 프레임**에 그린다 — 그래프 몫을 실측으로 잡기 때문에 + // 같은 프레임에 그리면 접혀 있던 0 높이를 읽는다(B05 하단 패널과 같은 처리). + if (!collapsed) requestAnimationFrame(drawPanel); }); const panelResizer = createPanelResizer({ @@ -596,7 +600,8 @@ export function createSectionView( currentStationInterval = stationInterval !== undefined && stationInterval > 0 ? stationInterval : undefined; if (earthworkConversion) currentConversion = earthworkConversion; - selectedStationId ??= detail.longitudinal.stations[0]?.station_id ?? null; + // 진입 시 측점을 자동으로 고르지 않는다(2026-08-02 사용자 지시) — 0측점이 선택된 채로 + // 시작하면 사용자가 고르지도 않은 카드가 강조돼 있고 유토곡선 말풍선도 떠 있다. renderWidth = contentWidth(); draw(); if (renderWidth <= 0) requestAnimationFrame(() => resizeObserver.observe(root)); 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 204232c1..d80fd473 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css @@ -18,7 +18,6 @@ padding-inline: var(--spacing-24); } -.b06-section__panel, /* 상단 패널이 sticky라 카드로 스크롤하면 그 아래로 숨는다. 패널 높이를 JS가 `--b06-cross-scroll-margin`으로 실어 주고, 스크롤 정지 위치를 그만큼 아래로 민다 (패널을 키우거나 줄이면 이 여백도 따라 바뀐다). */ @@ -41,6 +40,12 @@ display: flex; flex-direction: column; height: var(--b06-profile-height, auto); + border: 1px solid var(--color-border); + border-radius: var(--radius-cards); + background: var(--color-surface-raised); + /* `overflow: hidden`을 걸지 않는다 — 접기 손잡이가 패널 경계 **밖 아래**에 떠 있어 + 잘라내면 통째로 사라진다(B05 하단 패널도 같은 이유로 걸지 않는다). 안쪽 스크롤은 + `.b06-section__panel-body`가 맡는다. */ } /* 최소 높이는 **펼친 상태에만** 건다. 접힘에도 걸리면(인라인 min-height가 그랬다) 접어도 @@ -49,15 +54,21 @@ min-height: var(--b06-profile-min-height, 360px); } -/* 접었을 때는 저장된 높이를 무시하고 손잡이 행만 남긴다(클래스 2개라 위 규칙을 이긴다). */ +/* 접으면 높이를 0으로 접고 알맹이를 숨긴다 — 패널 밖 아래에 뜬 손잡이만 남아 다시 펼 수 있다. + (B05 하단 패널과 같은 방식: 전역 `ui-collapsible` 규칙에 기대지 않고 여기서 명시한다.) */ .b06-section__panel.is-collapsed { - height: auto; + height: 0; + min-height: 0; +} + +.b06-section__panel.is-collapsed > header, +.b06-section__panel.is-collapsed > .b06-section__panel-body, +.b06-section__panel.is-collapsed > .ui-resizer { + display: none; } /* 공용 리사이저는 손잡이를 패널 위쪽 경계에 두지만(B05 하단 패널 기준), - 이 패널은 화면 위에 붙어 있으므로 아래쪽 경계로 옮긴다(아래로 끌면 커짐). - 패널이 `overflow: hidden`이라 경계에 걸치게 두면(bottom: -3px) 손잡이 아래 절반이 - 잘려 나가 잡히지 않는다 — 안쪽에 붙여 전체가 클릭 영역으로 남게 한다. */ + 이 패널은 화면 위에 붙어 있으므로 아래쪽 경계로 옮긴다(아래로 끌면 커짐). */ .b06-section__panel > .ui-resizer--vertical { top: auto; /* 경계에 그대로 둔다 — 손잡이가 패널 밖으로 나가 z축으로 덮으므로 자리를 비켜 줄 필요가 없다. */ @@ -97,13 +108,10 @@ border-bottom: 1px solid var(--color-border); } -/* 접기 손잡이 — 패널 하단 가운데. 모양은 좌측 사이드 패널과 같은 삼각형 손잡이를 90° 돌린 - 것이라 공용 컴포넌트를 그대로 쓰고, 위치만 여기서 흐름 배치로 되돌린다(원본은 absolute). - `ui-collapsible__title`이 붙여 주는 캐럿은 삼각형 아이콘과 겹치므로 지운다. */ /* B05 하단 패널 손잡이와 **같은 구조**로, 상하만 뒤집는다: 공용 `--bottom` 손잡이(64×24)를 패널 경계 **바깥**으로 내보내 리사이저를 z축으로 덮는다. 패널 안 흐름에 두면 리사이저와 위아래로 나란히 서서, 손잡이를 누르러 가는 길에 리사이저 hover 색이 먼저 켜진다 - (2026-08-02 사용자 지적). 패널에는 `overflow: hidden`이 없어 밖으로 나가도 잘리지 않는다. */ + (2026-08-02 사용자 지적). 이 때문에 패널에는 `overflow: hidden`을 걸지 않는다. */ .b06-section__panel-toggle { z-index: 3; top: auto; @@ -113,12 +121,6 @@ border-radius: 0 0 var(--radius-buttons) var(--radius-buttons); } -/* 접혀도 손잡이는 남아야 한다. 전역 `.ui-collapsible.is-collapsed > :not(.ui-collapsible__title)`이 - 나머지 자식을 모두 숨기므로 이 하나만 다시 켠다(클래스 3개라 전역보다 특정도가 높다). */ -.b06-section__panel.is-collapsed > .b06-section__panel-toggle { - display: block; -} - /* 종단면도와 유토곡선이 이 컨테이너 하나를 공유한다 — 가로 스크롤을 함께 써야 같은 측점이 두 그래프에서 같은 자리에 선다. wrap을 나누면 정렬이 깨진다. */ .b06-section__chart-wrap {