260719_1

B05_wf2_Route/B05_wf2_Route_UI_Profile_Panel.ts

@@ -3,6 +3,7 @@ import type {
   SectionDetailResponse,
 } from "../B06_wf3_ProfileCross/B06_wf3_ProfileCross_Api_Fetch";
 import { createLongitudinalProfile } from "../B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Section_View";
+import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
 import "../B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style.css";
 
 const COLLAPSED_KEY = "b05-route-profile-collapsed";
@@ -20,18 +21,15 @@ function normalizedLongitudinal(data: LongitudinalSection): LongitudinalSection
 export function createRouteProfilePanel(onSelectStation: (stationId: string) => void) {
   const root = document.createElement("section");
   root.className = "b05-route-profile";
-  const header = document.createElement("header");
-  const toggle = document.createElement("button");
-  toggle.type = "button";
-  toggle.className = "b05-route-profile__toggle";
+  const panelHandle = createWorkflowPanelHandle("bottom");
+  const toggle = panelHandle.root;
   const body = document.createElement("div");
   body.className = "b05-route-profile__body";
   const empty = document.createElement("p");
   empty.className = "b05-route-profile__empty";
   empty.textContent = "최적 경로를 계산하면 종단면도가 표시됩니다.";
   body.append(empty);
-  header.append(toggle);
-  root.append(header, body);
+  root.append(toggle, body);
   let detail: SectionDetailResponse | null = null;
   let selectedStationId: string | null = null;
   let stationInterval: number | undefined;
@@ -52,9 +50,7 @@ export function createRouteProfilePanel(onSelectStation: (stationId: string) =>
 
   function setCollapsed(collapsed: boolean): void {
     root.classList.toggle("is-collapsed", collapsed);
-    toggle.textContent = collapsed ? "⌃" : "⌄";
-    toggle.setAttribute("aria-label", collapsed ? "종단면도 펼치기" : "종단면도 접기");
-    toggle.setAttribute("aria-expanded", String(!collapsed));
+    panelHandle.setOpen(!collapsed);
     sessionStorage.setItem(COLLAPSED_KEY, String(collapsed));
   }