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; } /* 종단면도와 유토곡선이 이 컨테이너 하나를 공유한다 — 가로 스크롤을 함께 써야