From 8a7c88e700695d688f9fe7c8df94b8c664a25951 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sun, 2 Aug 2026 15:04:06 +0900 Subject: [PATCH] =?UTF-8?q?fix(B06):=20=EC=A0=91=EA=B8=B0=20=EC=86=90?= =?UTF-8?q?=EC=9E=A1=EC=9D=B4=EB=A5=BC=20=ED=8C=A8=EB=84=90=20=EB=B0=96?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=82=B4=EB=B3=B4=EB=82=B4=20=EB=A6=AC?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A0=80=20hover=EA=B0=80=20=EB=B9=84?= =?UTF-8?q?=EC=B9=98=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 손잡이 뒤에 보이던 보라색 바는 리사이저의 hover 색이었다. B05 하단 패널은 손잡이를 패널 밖에 두어 리사이저를 z축으로 덮지만, B06은 손잡이를 패널 안 흐름에 넣고 리사이저를 그 위에 나란히 옮겨 놔서 손잡이를 누르러 가는 길에 hover가 먼저 켜졌다. B05와 같은 구조로 상하만 뒤집는다: 공용 --bottom 손잡이를 패널 경계 바깥 아래로 내보내고 (border-top 제거, 아래쪽 모서리 둥금) 리사이저는 경계(bottom: 0)로 되돌린다. 패널에는 overflow: hidden이 없어 밖으로 나가도 잘리지 않는다. 손잡이가 흐름 높이를 먹지 않으므로 PANEL_CHROME_PX를 줄이고, 선택 카드 스크롤 여백은 손잡이가 아래로 나온 만큼 더한다. Co-Authored-By: Claude Opus 5 (1M context) --- .../B06_wf3_ProfileCross_UI_Section_View.ts | 5 ++-- .../B06_wf3_ProfileCross_UI_Style_Cross.css | 24 +++++++++---------- 2 files changed, 14 insertions(+), 15 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 82fbf3bb..b127532d 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts @@ -66,7 +66,7 @@ export type { CrossDesignChange, DesignChangeHandler, RockBoundaryControl }; * 유토곡선 아래에 빈 공간이 남는다). 화면에 붙기 전이라 잴 수 없는 첫 렌더에서만 쓰는 * 출발값이고, 최소 패널 높이 계산의 기준이기도 하다. */ -const PANEL_CHROME_PX = 126; +const PANEL_CHROME_PX = 102; /** 손대지 않았을 때의 패널 높이 — 이 값이 축소 비례의 기준(H₀)이 된다. */ const BASE_PANEL_HEIGHT = LONG_HEIGHT + MASS_HAUL_HEIGHT + PANEL_CHROME_PX; const MIN_LONG_HEIGHT = 110; @@ -489,8 +489,9 @@ export function createSectionView( } chartWrap.scrollLeft = keepScrollLeft; // 상단 패널이 sticky라 선택 카드가 그 아래로 숨는다 — 패널 높이만큼 스크롤 여백을 잡아 준다. + // 접기 손잡이가 패널 아래 24px 밖으로 나와 있으므로 그 몫까지 더한다. const panelPx = panel.getBoundingClientRect().height || panelHeight(); - root.style.setProperty("--b06-cross-scroll-margin", `${Math.round(panelPx + 12)}px`); + root.style.setProperty("--b06-cross-scroll-margin", `${Math.round(panelPx + 32)}px`); // 첫 렌더(detached)나 패널 높이 변경 직후에는 위에서 잰 값이 아직 옛 레이아웃일 수 있다. // 다음 프레임에 한 번만 다시 재서 어긋나면 고쳐 그린다. `chartWrap` 높이는 내용과 무관하니 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 8d1da828..204232c1 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css @@ -60,8 +60,8 @@ 잘려 나가 잡히지 않는다 — 안쪽에 붙여 전체가 클릭 영역으로 남게 한다. */ .b06-section__panel > .ui-resizer--vertical { top: auto; - /* 하단 가운데 접기 손잡이(24px) 위에 얹는다 — 겹치면 어느 쪽이 잡히는지 헷갈린다. */ - bottom: var(--spacing-24); + /* 경계에 그대로 둔다 — 손잡이가 패널 밖으로 나가 z축으로 덮으므로 자리를 비켜 줄 필요가 없다. */ + bottom: 0; height: 8px; } @@ -100,25 +100,23 @@ /* 접기 손잡이 — 패널 하단 가운데. 모양은 좌측 사이드 패널과 같은 삼각형 손잡이를 90° 돌린 것이라 공용 컴포넌트를 그대로 쓰고, 위치만 여기서 흐름 배치로 되돌린다(원본은 absolute). `ui-collapsible__title`이 붙여 주는 캐럿은 삼각형 아이콘과 겹치므로 지운다. */ +/* B05 하단 패널 손잡이와 **같은 구조**로, 상하만 뒤집는다: 공용 `--bottom` 손잡이(64×24)를 + 패널 경계 **바깥**으로 내보내 리사이저를 z축으로 덮는다. 패널 안 흐름에 두면 리사이저와 + 위아래로 나란히 서서, 손잡이를 누르러 가는 길에 리사이저 hover 색이 먼저 켜진다 + (2026-08-02 사용자 지적). 패널에는 `overflow: hidden`이 없어 밖으로 나가도 잘리지 않는다. */ .b06-section__panel-toggle { - position: relative; - inset: auto; z-index: 3; - /* `ui-collapsible__title`이 flex + space-between을 걸어 두므로 아이콘을 가운데로 되돌린다. */ - justify-content: center; - align-self: center; - /* 좌측 사이드 손잡이(24×64, 오른쪽 모서리 둥금)를 시계방향 90° 돌린 값 — - 가로 64 × 세로 24, 아래쪽 모서리가 둥글다. */ - width: var(--spacing-64); - height: var(--spacing-24); - margin-top: auto; + top: auto; + bottom: calc(-1 * var(--spacing-24)); + border-top: 0; + border-bottom: 1px solid var(--color-border); 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: flex; + display: block; } /* 종단면도와 유토곡선이 이 컨테이너 하나를 공유한다 — 가로 스크롤을 함께 써야