260717_0

ui_template/ui_template_elements.ts

@@ -298,10 +298,6 @@ export function showToast(message: string, kind: ToastKind = "info", durationMs
 export interface WorkflowShellOptions {
   /** 상단 페이지 타이틀 (i18n 결과) */
   title: string;
-  /** 상단 진행 단계 라벨 배열 (i18n 결과) */
-  steps?: string[];
-  /** 현재 활성 단계 인덱스 */
-  activeStep?: number;
 }
 
 export interface WorkflowShellHandle {
@@ -315,23 +311,7 @@ export interface WorkflowShellHandle {
 export function createWorkflowShell(opts: WorkflowShellOptions): WorkflowShellHandle {
   // 상단 헤더
   const titleEl = el("h2", { className: "ui-wf__title", text: opts.title });
-  const headerChildren: HTMLElement[] = [titleEl];
-
-  if (opts.steps && opts.steps.length > 0) {
-    const stepsEl = el("div", { className: "ui-wf__steps" });
-    opts.steps.forEach((label, idx) => {
-      const isActive = idx === (opts.activeStep ?? 0);
-      stepsEl.append(
-        el("span", {
-          className: `ui-wf__step${isActive ? " is-active" : ""}`,
-          text: label,
-        }),
-      );
-    });
-    headerChildren.push(stepsEl);
-  }
-
-  const header = el("header", { className: "ui-wf__header", children: headerChildren });
+  const header = el("header", { className: "ui-wf__header", children: [titleEl] });
   const leftPanel = el("div", { className: "ui-wf__left" });
   const rightArea = el("div", { className: "ui-wf__right" });
   const bodyRow = el("div", { className: "ui-wf__body", children: [leftPanel, rightArea] });
@@ -523,6 +503,8 @@ export function createLineChart(opts: LineChartOptions): HTMLDivElement {
 const BASE_STYLE_ID = "ui-template-elements-style";
 
 const BASE_CSS = `
+[hidden] { display: none !important; }
+
 /* --- Button --- */
 .ui-btn {
   display: inline-flex;
@@ -721,19 +703,6 @@ const BASE_CSS = `
   background-color: var(--color-surface-raised);
 }
 .ui-wf__title { font-size: var(--text-subheading); }
-.ui-wf__steps { display: flex; gap: var(--spacing-8); }
-.ui-wf__step {
-  padding: var(--spacing-4) var(--spacing-16);
-  border-radius: var(--radius-pills);
-  font-size: var(--text-caption);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-slate);
-  background-color: var(--color-paper);
-}
-.ui-wf__step.is-active {
-  color: var(--color-royal-amethyst);
-  background-color: var(--color-mist-violet);
-}
 .ui-wf__body { display: flex; flex: 1; min-height: 0; }
 .ui-wf__left {
   width: var(--wf-left-panel-width);