260710_1

ui_template/ui_template_workflow_layout.ts

@@ -1,11 +1,20 @@
 import "./ui_template_workflow_layout.css";
 
+export interface WorkflowStage {
+  stage_no: number;
+  stage_key: string;
+  state: string;
+}
+
 export interface WorkflowLayoutOptions {
   title: string;
   steps: string[];
   activeStep: number;
   leftPanel: HTMLElement;
   mainContent: HTMLElement;
+  stages?: WorkflowStage[];
+  routes?: string[];
+  onStepClick?: (stepIndex: number, route: string) => void;
   onMenuToggle?: (isOpen: boolean) => void;
   onHeaderToggle?: (isVisible: boolean) => void;
 }
@@ -16,15 +25,62 @@ export interface WorkflowLayoutHandle {
   setHeaderVisible: (isVisible: boolean) => void;
 }
 
-function createStepBar(steps: readonly string[], activeStep: number): HTMLElement {
+function createStepBar(
+  steps: readonly string[],
+  activeStep: number,
+  options?: {
+    stages?: WorkflowStage[];
+    routes?: string[];
+    onStepClick?: (stepIndex: number, route: string) => void;
+  },
+): HTMLElement {
   const bar = document.createElement("div");
   bar.className = "ui-workflow-layout__steps";
   steps.forEach((step, index) => {
-    const item = document.createElement("span");
-    item.className = "ui-workflow-layout__step";
-    if (index === activeStep) item.classList.add("is-active");
-    item.textContent = step;
-    bar.append(item);
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "ui-workflow-layout__step";
+    if (index === activeStep) button.classList.add("is-active");
+    button.textContent = step;
+
+    // DB state 기반 활성화 로직
+    let enabled = false;
+    if (options?.stages && options.stages.length > 0) {
+      enabled = index === 0 || options.stages[index - 1]?.state === "COMPLETE";
+    } else {
+      enabled = index <= activeStep;
+    }
+
+    button.disabled = !enabled;
+    if (enabled) {
+      button.classList.add("is-enabled");
+    }
+
+    // state 기반 스타일링
+    if (options?.stages && options.stages[index]) {
+      const state = options.stages[index].state;
+      button.classList.add(`state-${state.toLowerCase()}`);
+      if (state === "STALE") {
+        button.title = "Stale (하위 단계 변경으로 무효화됨)";
+      } else if (state === "FAILED") {
+        button.title = "Failed (실패)";
+      } else if (state === "COMPLETE") {
+        button.title = "Complete (완료)";
+      } else if (state === "IN_PROGRESS") {
+        button.title = "In Progress (진행 중)";
+      } else {
+        button.title = "Not Started (미실행)";
+      }
+    }
+
+    // 클릭 이벤트
+    if (enabled && options?.routes && options?.routes[index]) {
+      button.addEventListener("click", () => {
+        options.onStepClick?.(index, options.routes![index]);
+      });
+    }
+
+    bar.append(button);
   });
   return bar;
 }
@@ -47,7 +103,14 @@ export function createWorkflowLayout(options: WorkflowLayoutOptions): WorkflowLa
   const title = document.createElement("h2");
   title.className = "ui-workflow-layout__title";
   title.textContent = options.title;
-  titleWrap.append(title, createStepBar(options.steps, options.activeStep));
+  titleWrap.append(
+    title,
+    createStepBar(options.steps, options.activeStep, {
+      stages: options.stages,
+      routes: options.routes,
+      onStepClick: options.onStepClick,
+    }),
+  );
 
   const headerHideButton = document.createElement("button");
   headerHideButton.type = "button";