260717_0

B03_FileInput/B03_FileInput_UI_Page.ts

@@ -1,13 +1,15 @@
 import {
   CURRENT_PROJECT_ID_KEY,
   PROGRESS_UPDATE_INTERVAL_MS,
+  ROUTES,
   UPLOAD_ALLOWED_EXT,
   UPLOAD_CHUNK_SIZE_MB,
   UPLOAD_MAX_FILES,
   UPLOAD_MAX_MB,
 } from "@config/config_frontend";
 import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
-import { createButton, createTag, createWorkflowShell, showToast } from "@ui/ui_template_elements";
+import { createButton, createTag, showToast } from "@ui/ui_template_elements";
+import { createWorkflowLayout } from "@ui/ui_template_workflow_layout";
 import {
   checkWF1AnalysisStatus,
   createUploadSession,
@@ -16,7 +18,12 @@ import {
   type UploadedFileResult,
 } from "./B03_FileInput_Api_Fetch";
 import { navigateTo } from "../A00_Common/router";
-import { ROUTES } from "@config/config_frontend";
+import { workflowSteps } from "../A00_Common/b_page_scaffold";
+import {
+  fetchWorkflowState,
+  goToWorkflowStage,
+  WORKFLOW_STEP_ROUTES,
+} from "../A00_Common/b_workflow_nav";
 import {
   restoreB03ProjectState,
   saveB03UploadedFile,
@@ -167,7 +174,7 @@ function createFileCardTemplate(): HTMLTemplateElement {
   return template;
 }
 
-export function renderB03FileInput(root: HTMLElement): void {
+export async function renderB03FileInput(root: HTMLElement): Promise<void> {
   const slots = initializeSlots();
   const cardMap = new Map<FileSlot, HTMLElement>();
   const resultList = document.createElement("ul");
@@ -176,26 +183,6 @@ export function renderB03FileInput(root: HTMLElement): void {
   let resumeBanner: HTMLDivElement;
   let activeProjectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY) ?? "";
 
-  const shell = createWorkflowShell({
-    title: L("B03_File_Title"),
-    steps: [
-      L("B03_File_Title"),
-      L("WF_Step_Surface"),
-      L("WF_Step_Route"),
-      L("WF_Step_ProfileCross"),
-      L("WF_Step_DesignDetail"),
-      L("WF_Step_Quantity"),
-      L("WF_Step_Estimation"),
-    ],
-    activeStep: 0,
-  });
-  shell.root.classList.add("b03-file");
-
-  shell.leftPanel.remove();
-
-  const contentContainer = document.createElement("div");
-  contentContainer.className = "b03-file__main-layout";
-
   const subtitle = document.createElement("p");
   subtitle.className = "b03-file__subtitle";
   subtitle.textContent = L("B03_File_Subtitle");
@@ -673,13 +660,30 @@ export function renderB03FileInput(root: HTMLElement): void {
   const filesGroup = createCardGroup("", ["las_laz", "prj", "tfw", "tif"]); // 타이틀 공백으로 전달
 
   const cardsContainer = document.createElement("div");
-  cardsContainer.className = "b03-file__control-panel b03-file__cards-container-panel"; // 동일한 양식으로 감싸기
+  cardsContainer.className =
+    "b03-file__main-layout b03-file__control-panel b03-file__cards-container-panel"; // 동일한 양식으로 감싸기
   cardsContainer.append(filesGroup);
 
-  contentContainer.append(uploadControlPanel, cardsContainer);
-
-  shell.rightArea.replaceChildren(contentContainer);
-  root.replaceChildren(shell.root);
+  const workflowState = activeProjectId
+    ? await fetchWorkflowState(activeProjectId).catch(() => undefined)
+    : undefined;
+  const layout = createWorkflowLayout({
+    title: L("B03_File_Title"),
+    steps: workflowSteps(),
+    activeStep: 0,
+    leftPanel: uploadControlPanel,
+    mainContent: cardsContainer,
+    stages: workflowState?.stages,
+    currentStage: workflowState?.current_stage,
+    routes: WORKFLOW_STEP_ROUTES,
+    onStepClick: (stepIndex) => {
+      if (activeProjectId) {
+        goToWorkflowStage(activeProjectId, WORKFLOW_STEP_ROUTES[stepIndex]);
+      }
+    },
+  });
+  layout.root.classList.add("b03-file");
+  root.replaceChildren(layout.root);
 
   for (const slot of slots.keys()) renderSlot(slot);
   void registerB03ServiceWorker();