From 77cb381a2d0f7855897dec890eef449583db40ef Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sun, 2 Aug 2026 09:48:15 +0900 Subject: [PATCH] =?UTF-8?q?fix(B05):=20=EB=B0=B0=EC=88=98=EC=9C=A0?= =?UTF-8?q?=EC=97=AD=20=ED=8C=A8=EB=84=90=20=EA=B8=B0=EB=B3=B8=20=ED=8E=BC?= =?UTF-8?q?=EC=B9=A8=20+=20=EC=A0=91=EA=B8=B0=20=ED=99=94=EC=82=B4?= =?UTF-8?q?=ED=91=9C=20=EB=B0=A9=ED=96=A5=20=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 상세 배수유역 정보는 페이지에 들어오면 바로 보여야 하는데 기본값이 접힘이었고, 접기/펼치기 화살표도 반대를 가리키고 있었다. - 기본값: 저장값이 없을 때 `!== "false"`(접힘)를 `=== "true"`(펼침)로 바꿨다. 같은 페이지 하단 종단 패널(B05_wf2_Route_UI_Profile_Panel.ts:592)이 이미 쓰던 규칙과 같아졌다. - 화살표: 공용 `createWorkflowPanelHandle`은 왼쪽에 도킹해 왼쪽으로 접히는 패널 (제목 카드)을 전제로 회전값을 고정하고 있었다. 배수유역 패널은 오른쪽에 도킹해 오른쪽으로 접히므로 같은 회전을 쓰면 열기/닫기 표시가 정확히 거꾸로 나온다. `collapseToward` 인자를 추가하고 이 패널만 "right"를 넘긴다. 기본값 "left"라 나머지 호출처는 회전값이 이전과 동일하다: - ui_template_overlay.ts:81 제목 카드 — "side" 기본값, 열림 180° / 닫힘 0° 그대로 - B05_wf2_Route_UI_Profile_Panel.ts:244 하단 패널 — "bottom" 배치라 애초에 무관 Co-Authored-By: Claude Opus 5 (1M context) --- .../B05_wf2_Route_UI_Drainage_Panel.ts | 8 ++++++-- ui_template/ui_template_overlay.ts | 18 ++++++++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/B05_wf2_Route/B05_wf2_Route_UI_Drainage_Panel.ts b/B05_wf2_Route/B05_wf2_Route_UI_Drainage_Panel.ts index 9bd8b1ba..c6692c9e 100644 --- a/B05_wf2_Route/B05_wf2_Route_UI_Drainage_Panel.ts +++ b/B05_wf2_Route/B05_wf2_Route_UI_Drainage_Panel.ts @@ -101,7 +101,9 @@ export interface DrainagePanelCallbacks { export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): DrainagePanel { const root = document.createElement("aside"); root.className = "b05-drainage"; - const panelHandle = createWorkflowPanelHandle("side"); + // 이 패널은 하단 패널의 **오른쪽**에 도킹해 오른쪽으로 접힌다(제목 카드와 반대). + // 방향을 넘기지 않으면 화살표가 정확히 거꾸로 나온다. + const panelHandle = createWorkflowPanelHandle("side", "right"); const header = document.createElement("div"); header.className = "b05-drainage__header"; @@ -623,7 +625,9 @@ export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): Dra panelHandle.root.addEventListener("click", () => setCollapsed(!root.classList.contains("is-collapsed")), ); - setCollapsed(sessionStorage.getItem(COLLAPSED_KEY) !== "false"); + // 상세 배수유역 정보는 페이지에 들어오면 바로 보여야 한다 — 저장값이 없으면 펼침이 기본이다 + // (같은 페이지의 하단 종단 패널과 같은 규칙). + setCollapsed(sessionStorage.getItem(COLLAPSED_KEY) === "true"); return { root, diff --git a/ui_template/ui_template_overlay.ts b/ui_template/ui_template_overlay.ts index b157e005..da50d46e 100644 --- a/ui_template/ui_template_overlay.ts +++ b/ui_template/ui_template_overlay.ts @@ -23,7 +23,18 @@ export interface WorkflowPanelHandle { setOpen: (isOpen: boolean) => void; } -export function createWorkflowPanelHandle(placement: "side" | "bottom"): WorkflowPanelHandle { +export function createWorkflowPanelHandle( + placement: "side" | "bottom", + /** + * 패널이 접히면서 사라지는 쪽. 화살표가 항상 그 방향을 가리키게 만든다. + * + * 기본값 `"left"`는 왼쪽에 도킹해 왼쪽으로 접히는 패널(제목 카드)용이다. + * 오른쪽에 도킹해 오른쪽으로 접히는 패널(B05 배수유역도)은 `"right"`를 넘겨야 + * 화살표가 뒤집히지 않는다 — 도킹 방향이 반대인데 같은 회전을 쓰면 열기/닫기 + * 표시가 정확히 거꾸로 보인다. + */ + collapseToward: "left" | "right" = "left", +): WorkflowPanelHandle { const root = document.createElement("button"); root.type = "button"; root.className = `ui-workflow-overlay__handle ui-workflow-overlay__handle--${placement}`; @@ -32,7 +43,10 @@ export function createWorkflowPanelHandle(placement: "side" | "bottom"): Workflo root.append(icon); function setOpen(isOpen: boolean): void { - const rotation = placement === "side" ? (isOpen ? 180 : 0) : isOpen ? 90 : -90; + // 삼각형은 회전 0°에서 오른쪽(▶)을 가리킨다. 펼친 상태면 접히는 쪽을, + // 접힌 상태면 펼쳐질 쪽을 가리키도록 180°를 붙였다 뗀다. + const pointsRight = isOpen === (collapseToward === "right"); + const rotation = placement === "side" ? (pointsRight ? 0 : 180) : isOpen ? 90 : -90; icon.style.transform = `rotate(${rotation}deg)`; root.title = t(isOpen ? "Workflow_Overlay_Collapse" : "Workflow_Overlay_Expand"); root.setAttribute("aria-label", root.title);