260717_0

A00_Common/b_page_scaffold.ts

@@ -1,18 +1,25 @@
 /* =============================================================================
  * b_page_scaffold.ts
- * B 그룹 페이지 공통 스캐폴드 — "헤더 + 준비 중 안내" 및 워크플로우 셸 래퍼
+ * B 그룹 페이지 공통 스캐폴드 — "헤더 + 준비 중 안내" 및 워크플로우 레이아웃 래퍼
  *
  * B03~B06 등 본문 미구현 페이지에서 헤더/푸터(공통 셸)를 제외한 콘텐츠 영역을
  * 일관된 형태로 채우기 위한 헬퍼. 실제 본문은 0_old 참고하여 추후 구체화.
  *
  * 제약 준수 (frontend.md):
  *   - 문구는 호출측에서 locale 참조 후 문자열로 전달 (§3).
- *   - 공통 워크플로우 셸(createWorkflowShell) 재사용 (§2 3단 레이아웃).
+ *   - 공통 워크플로우 레이아웃(createWorkflowLayout) 재사용 (§2 3단 레이아웃).
  *   - 색상/간격은 theme.css 변수만 사용 (§1).
  * ========================================================================== */
 
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
-import { createWorkflowShell } from "@ui/ui_template_elements";
+import { CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
+import { createWorkflowLayout } from "@ui/ui_template_workflow_layout";
+import {
+  fetchWorkflowState,
+  goToWorkflowStage,
+  WORKFLOW_STEP_ROUTES,
+  type WorkflowState,
+} from "./b_workflow_nav";
 
 /** locale 헬퍼 */
 function L(key: keyof typeof ui_locales): string {
@@ -77,20 +84,35 @@ export interface PendingWorkflowOptions {
   activeStep: number;
 }
 
-export function renderPendingWorkflow(root: HTMLElement, opts: PendingWorkflowOptions): void {
+export async function renderPendingWorkflow(
+  root: HTMLElement,
+  opts: PendingWorkflowOptions,
+): Promise<void> {
   injectScaffoldStyles();
-  const shell = createWorkflowShell({
+  const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY);
+  let workflowState: WorkflowState | undefined;
+  if (projectId) {
+    try {
+      workflowState = await fetchWorkflowState(projectId);
+    } catch {
+      /* 조회 실패 시 stages 미전달 → 전체 이동 허용 */
+    }
+  }
+  const layout = createWorkflowLayout({
     title: opts.title,
     steps: opts.steps,
     activeStep: opts.activeStep,
+    leftPanel: buildPendingBlock(),
+    mainContent: buildPendingBlock(),
+    stages: workflowState?.stages,
+    currentStage: workflowState?.current_stage,
+    routes: WORKFLOW_STEP_ROUTES,
+    onStepClick: (stepIndex) => {
+      if (projectId) goToWorkflowStage(projectId, WORKFLOW_STEP_ROUTES[stepIndex]);
+    },
   });
-  shell.root.classList.add("b-scaffold-wf");
-
-  // 좌측/우측 모두 준비 중 안내로 채움 (본문은 추후 구체화)
-  shell.leftPanel.append(buildPendingBlock());
-  shell.rightArea.append(buildPendingBlock());
-
-  root.append(shell.root);
+  layout.root.classList.add("b-scaffold-wf");
+  root.append(layout.root);
 }
 
 /** 워크플로우 스텝 라벨 7종 (locale 결과) — B03~B09 공용.

A00_Common/b_workflow_nav.ts

@@ -0,0 +1,40 @@
+import {
+  API_BASE_URL,
+  CURRENT_PROJECT_ID_KEY,
+  ROUTES,
+  type RoutePath,
+} from "@config/config_frontend";
+import type { WorkflowStage } from "@ui/ui_template_workflow_layout";
+import { navigateTo } from "./router";
+
+export interface WorkflowState {
+  project_id: string;
+  current_stage: number;
+  stages: WorkflowStage[];
+}
+
+export const WORKFLOW_STEP_ROUTES: readonly RoutePath[] = [
+  ROUTES.B03_FILE_INPUT,
+  ROUTES.B04_WF1_SURFACE,
+  ROUTES.B05_WF2_ROUTE,
+  ROUTES.B06_WF3_PROFILE_CROSS,
+  ROUTES.B07_WF4_DESIGN_DETAIL,
+  ROUTES.B08_WF5_QUANTITY,
+  ROUTES.B09_WF6_ESTIMATION,
+];
+
+export async function fetchWorkflowState(projectId: string): Promise<WorkflowState> {
+  const response = await fetch(`${API_BASE_URL}/projects/${projectId}/workflow-state`, {
+    credentials: "include",
+  });
+  if (!response.ok) {
+    throw new Error(`Workflow state request failed: ${response.status}`);
+  }
+  const data = await response.json();
+  return data.workflow_state ?? data;
+}
+
+export function goToWorkflowStage(projectId: string, route: RoutePath): void {
+  localStorage.setItem(CURRENT_PROJECT_ID_KEY, projectId);
+  navigateTo(route);
+}