From 47c08cde54304f11226f21cf32913a53ff1e8ae0 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sun, 2 Aug 2026 14:54:59 +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=EC=97=90=20=EA=B3=B5=EC=9A=A9=20title=20?= =?UTF-8?q?=ED=81=B4=EB=9E=98=EC=8A=A4=EB=A5=BC=20=EB=96=BC=EA=B3=A0=20?= =?UTF-8?q?=EC=9E=90=EC=B2=B4=20=ED=86=A0=EA=B8=80=EB=A1=9C=20=EC=BA=90?= =?UTF-8?q?=EB=9F=BF=20=EC=A4=91=EB=B3=B5=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 전역 규칙 `.ui-collapsible.is-collapsed > .ui-collapsible__title::after`(클래스 3개)가 B06 쪽 무력화 규칙(클래스 2개)보다 특정도가 높아, 접힘 상태에서 캐럿(▸)이 삼각형 아이콘(▼)과 함께 그려졌다. 특정도 싸움을 이어 가는 대신 손잡이에서 `ui-collapsible__title` 클래스를 떼고 토글을 직접 처리한다. 접혔을 때 손잡이가 숨지 않도록 display만 다시 켠다. Co-Authored-By: Claude Opus 5 (1M context) --- .../B06_wf3_ProfileCross_UI_Section_View.ts | 17 ++++++++--------- .../B06_wf3_ProfileCross_UI_Style_Cross.css | 8 ++++---- 2 files changed, 12 insertions(+), 13 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 bd1e263a..82fbf3bb 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View.ts @@ -14,7 +14,6 @@ * ========================================================================== */ import { createPanelResizer } from "@ui/ui_template_resizer"; -import { attachCollapsible } from "@ui/ui_template_collapsible"; import { createWorkflowPanelHandle } from "@ui/ui_template_overlay"; import type { CrossSection, @@ -193,21 +192,21 @@ export function createSectionView( panelBody.append(chartWrap); // 접기 손잡이는 패널 **하단 가운데**에 둔다(2026-08-02 사용자 지시). 모양은 좌측 사이드 // 패널과 같은 삼각형 손잡이를 90° 돌린 것이며, 위로 접히는 패널이라 `collapseToward: "up"`이다. - // `ui-collapsible__title` 클래스를 달아 공용 토글 동작을 그대로 쓰고(접혀도 이 손잡이만 남는다), - // 그 클래스가 붙이는 캐럿은 B06 CSS에서 지운다(삼각형 아이콘과 겹치므로). + // + // 공용 `ui-collapsible__title`은 **쓰지 않는다**. 그 클래스를 달면 전역 규칙이 캐럿(▾/▸)을 + // 하나 더 그리는데, 접힘 상태 전역 선택자(`.ui-collapsible.is-collapsed > .ui-collapsible__title`)가 + // B06 쪽 무력화 규칙보다 특정도가 높아 캐럿이 삼각형 아이콘과 겹쳐 보였다. 토글은 여기서 직접 한다. const panelToggle = createWorkflowPanelHandle("bottom", "up"); - panelToggle.root.classList.add("ui-collapsible__title", "b06-section__panel-toggle"); + panelToggle.root.classList.add("b06-section__panel-toggle"); panel.append(panelHeader, panelBody, panelToggle.root); - attachCollapsible(panel); // 접힘 상태는 세션에만 남긴다(리사이저와 같은 규칙). if (sessionStorage.getItem(PANEL_COLLAPSED_KEY) === "true") panel.classList.add("is-collapsed"); panelToggle.setOpen(!panel.classList.contains("is-collapsed")); - // attachCollapsible보다 **뒤에** 붙여야 토글이 끝난 상태를 읽는다(먼저 붙이면 토글 전 값이 저장된다). - panel.addEventListener("click", (event) => { - if (!(event.target as HTMLElement).closest(".ui-collapsible__title")) return; - const collapsed = panel.classList.contains("is-collapsed"); + panelToggle.root.addEventListener("click", () => { + const collapsed = panel.classList.toggle("is-collapsed"); sessionStorage.setItem(PANEL_COLLAPSED_KEY, String(collapsed)); panelToggle.setOpen(!collapsed); + if (!collapsed) drawPanel(); }); const panelResizer = createPanelResizer({ 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 14fc1a73..8d1da828 100644 --- a/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css +++ b/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_Cross.css @@ -115,10 +115,10 @@ border-radius: 0 0 var(--radius-buttons) var(--radius-buttons); } -/* 전역 `.ui-collapsible__title::after` 캐럿을 지운다. 같은 특정도로 쓰면 로드 순서에 따라 - 전역이 이겨 캐럿(▸)과 삼각형 아이콘(▼)이 **둘 다** 보인다 — 자식 결합자로 특정도를 올린다. */ -.b06-section__panel > .b06-section__panel-toggle::after { - content: none; +/* 접혀도 손잡이는 남아야 한다. 전역 `.ui-collapsible.is-collapsed > :not(.ui-collapsible__title)`이 + 나머지 자식을 모두 숨기므로 이 하나만 다시 켠다(클래스 3개라 전역보다 특정도가 높다). */ +.b06-section__panel.is-collapsed > .b06-section__panel-toggle { + display: flex; } /* 종단면도와 유토곡선이 이 컨테이너 하나를 공유한다 — 가로 스크롤을 함께 써야