From efc6d0651ecff442014a47615d777d901960df82 Mon Sep 17 00:00:00 2001
From: jschoi <jschoi@cuuva.com>
Date: Fri, 19 Sep 2025 09:55:30 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20workflow,=20workflowstep,=20project=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   2 +-
 .../atoms/organisms/WorkflowsBaseDialog.vue   |  53 ++++--
 .../organisms/WorklfowStepBaseDialog.vue      | 178 +++++++++++-------
 .../service/management/workflowService.ts     |   1 -
 .../{ => templates}/home/ListComponent.vue    |  58 +++++-
 .../{Project => projects}/ListComponent.vue   |   0
 .../templates/stepconfig/ListComponent.vue    |  32 ++--
 .../templates/stepconfig/ViewComponent.vue    | 139 +++++++++++---
 src/pages/HomeView.vue                        |   2 +-
 src/pages/ProjectView.vue                     |   2 +-
 src/utils/menuUtils.js                        |   6 -
 11 files changed, 337 insertions(+), 136 deletions(-)
 rename src/components/{ => templates}/home/ListComponent.vue (83%)
 rename src/components/templates/{Project => projects}/ListComponent.vue (100%)

diff --git a/components.d.ts b/components.d.ts
index bc7634c..41a80f1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -25,7 +25,7 @@ declare module 'vue' {
     IconModifyBtn: typeof import('./src/components/atoms/button/IconModifyBtn.vue')['default']
     IconSettingBtn: typeof import('./src/components/atoms/button/IconSettingBtn.vue')['default']
     LayoutComponent: typeof import('./src/components/common/LayoutComponent.vue')['default']
-    ListComponent: typeof import('./src/components/home/ListComponent.vue')['default']
+    ListComponent: typeof import('./src/components/templates/Datasets/ListComponent.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SidebarHeader: typeof import('./src/components/common/SidebarHeader.vue')['default']
diff --git a/src/components/atoms/organisms/WorkflowsBaseDialog.vue b/src/components/atoms/organisms/WorkflowsBaseDialog.vue
index 2b4c3c3..317a652 100644
--- a/src/components/atoms/organisms/WorkflowsBaseDialog.vue
+++ b/src/components/atoms/organisms/WorkflowsBaseDialog.vue
@@ -74,8 +74,8 @@ const nowLocalIso = (): string => {
 
 async function submit() {
   errorMsg.value = "";
-  const name = form.value.name.trim();
 
+  const name = form.value.name.trim();
   if (!name) {
     errorMsg.value = "Workflow Name은 필수입니다.";
     return;
@@ -85,7 +85,6 @@ async function submit() {
   const authObj =
     (typeof storage?.getAuth === "function" ? storage.getAuth() : null) ??
     JSON.parse(localStorage.getItem("autoflow-auth") || "{}");
-
   const regUserId =
     authObj?.userInfo?.username ??
     authObj?.userinfo?.username ??
@@ -98,36 +97,58 @@ async function submit() {
     return;
   }
 
+  if (!projectId.value) {
+    errorMsg.value = "프로젝트가 선택되지 않았습니다.";
+    return;
+  }
+
   const now = nowLocalIso();
-  const payload: Workflow = {
-    workflowName: name,
-    workflowDescription: form.value.description?.trim() || "",
-    uploadYn: "Y",
-    regUserId,
-    regDt: now,
-    modDt: now,
-    projectId: projectId.value,
-  };
 
   try {
     saving.value = true;
 
     if (isEdit.value) {
-      // 수정: id 추출(행에서 넘겨준 deviceKey 또는 id 지원)
+      // ===== 수정 =====
       const rawId = props.editData?.id ?? props.editData?.deviceKey;
       const id = Number(rawId);
-
       if (!id) {
         errorMsg.value = "수정할 ID가 없습니다.";
         return;
       }
 
-      const { data } = await WorkflowService.update(id, payload);
+      // 기존 레코드 먼저 조회해서 보존해야 할 필드 채우기
+      const viewRes = await WorkflowService.view(id);
+      const current = (viewRes?.data ?? viewRes) || {};
+
+      const updatePayload: any = {
+        id,
+        workflowName: name,
+        workflowDescription: form.value.description?.trim() || "",
+        uploadYn: current.uploadYn ?? "Y",
+        // ← 기존 값 유지 (null로 덮어쓰지 않도록)
+        regUserId: current.regUserId ?? regUserId,
+        regDt: current.regDt ?? now,
+        projectId: current.projectId ?? projectId.value,
+        // ← 수정 시각만 갱신
+        modDt: now,
+      };
+
+      const { data } = await WorkflowService.update(id, updatePayload);
       emit("saved", data);
       emit("close-modal");
     } else {
-      // 생성
-      const { data } = await WorkflowService.add(payload);
+      // ===== 생성 =====
+      const createPayload: any = {
+        workflowName: name,
+        workflowDescription: form.value.description?.trim() || "",
+        uploadYn: "Y",
+        regUserId, // 생성자
+        regDt: now, // 생성 시각
+        projectId: projectId.value,
+        // modDt는 보내지 않아도 됨 (서버에서 필요하면 세팅)
+      };
+
+      const { data } = await WorkflowService.add(createPayload);
       emit("saved", data);
       emit("close-modal");
     }
diff --git a/src/components/atoms/organisms/WorklfowStepBaseDialog.vue b/src/components/atoms/organisms/WorklfowStepBaseDialog.vue
index ea509cd..de23b2c 100644
--- a/src/components/atoms/organisms/WorklfowStepBaseDialog.vue
+++ b/src/components/atoms/organisms/WorklfowStepBaseDialog.vue
@@ -5,12 +5,9 @@ import { storeToRefs } from "pinia";
 import { useAutoflowStore } from "@/stores/autoflowStore";
 import type { AxiosError } from "axios";
 import { WorkflowStepService } from "@/components/service/management/workflowStepService";
+import { WorkflowService } from "@/components/service/management/workflowService"; // ⬅️ 추가
 
-const props = defineProps<{
-  editData: any;
-  mode: "create" | "edit";
-}>();
-
+const props = defineProps<{ editData: any; mode: "create" | "edit" }>();
 const emit = defineEmits<{
   (e: "close-modal"): void;
   (e: "saved", value: any): void;
@@ -22,21 +19,71 @@ const { projectId } = storeToRefs(useAutoflowStore());
 const saving = ref(false);
 const errorMsg = ref("");
 
-// 폼 상태(필수 UI만: stepName, status)
+// ===== 워크플로우 드롭다운 상태 =====
+const workflowsLoading = ref(false);
+const workflowOptions = ref<Array<{ title: string; value: number }>>([]);
+const selectedWorkflowId = ref<number | null>(null);
+
+async function fetchWorkflows() {
+  try {
+    workflowsLoading.value = true;
+    // 1) /api/workflows (배열) or 2) search 결과(content) 모두 대응
+    const res =
+      (await (WorkflowService as any).list?.()) ??
+      (await (WorkflowService as any).search?.({ page: 0, size: 1000 }));
+    const raw = res?.data ?? res;
+    const list = Array.isArray(raw?.content)
+      ? raw.content
+      : Array.isArray(raw)
+        ? raw
+        : [];
+
+    const filtered = projectId.value
+      ? list.filter((w: any) => Number(w.projectId) === Number(projectId.value))
+      : list;
+
+    workflowOptions.value = filtered.map((w: any) => ({
+      title:
+        (w.workflowName || w.name || `Workflow #${w.id}`) +
+        (w.version ? ` (v${w.version})` : ""),
+      value: Number(w.id),
+    }));
+
+    // 수정 모드에서 값 복원
+    if (isEdit.value && selectedWorkflowId.value == null) {
+      const wid =
+        props.editData?.workflowStepId ??
+        props.editData?.workflowId ??
+        props.editData?.workflow?.id ??
+        null;
+      if (wid != null) selectedWorkflowId.value = Number(wid);
+    }
+  } catch (e) {
+    console.error("[Dialog] 워크플로우 목록 조회 실패:", e);
+    workflowOptions.value = [];
+  } finally {
+    workflowsLoading.value = false;
+  }
+}
+
+// ===== 폼 =====
 type StepStatus = "Running" | "Success" | "Fail";
-const form = ref({
-  stepName: "",
-  status: "Running" as StepStatus,
-});
+const form = ref({ stepName: "", status: "Running" as StepStatus });
 
 function hydrateFormFromEdit(data: any) {
   if (!data) return;
   form.value.stepName = data?.stepName ?? data?.name ?? "";
   form.value.status = (data?.status as StepStatus) ?? "Running";
+
+  // 드롭다운 값 복원(가능한 키 모두 시도)
+  const wid =
+    data?.workflowStepId ?? data?.workflowId ?? data?.workflow?.id ?? null;
+  selectedWorkflowId.value = wid != null ? Number(wid) : null;
 }
 
 onMounted(() => {
   if (isEdit.value) hydrateFormFromEdit(props.editData);
+  fetchWorkflows();
 });
 watch(
   () => props.editData,
@@ -44,10 +91,11 @@ watch(
     if (isEdit.value) hydrateFormFromEdit(v);
   },
 );
+watch(projectId, () => fetchWorkflows());
 
 const nowLocalIso = (): string => {
   const t = new Date(Date.now() - new Date().getTimezoneOffset() * 60000);
-  return t.toISOString().slice(0, 23); // 'YYYY-MM-DDTHH:mm:ss.SSS'
+  return t.toISOString().slice(0, 23);
 };
 
 const regUserId = (() => {
@@ -55,7 +103,6 @@ const regUserId = (() => {
     const authObj =
       (typeof storage?.getAuth === "function" ? storage.getAuth() : null) ??
       JSON.parse(localStorage.getItem("autoflow-auth") || "{}");
-
     return (
       authObj?.userInfo?.username ??
       authObj?.userinfo?.username ??
@@ -71,62 +118,42 @@ const regUserId = (() => {
 async function submit() {
   errorMsg.value = "";
 
-  // 기본 검증
+  // 검증
   const stepName = form.value.stepName.trim();
-  if (!stepName) {
-    errorMsg.value = "Step Name은 필수입니다.";
-    return;
-  }
-  if (!regUserId) {
-    errorMsg.value = "로그인 사용자 정보를 찾을 수 없습니다.";
-    return;
-  }
-  if (!projectId.value) {
-    errorMsg.value = "프로젝트가 선택되지 않았습니다.";
-    return;
-  }
-
-  // 백엔드 엔티티에 맞춘 payload
-  const now = nowLocalIso();
-  const payload = {
+  if (!stepName) return (errorMsg.value = "Step Name은 필수입니다.");
+  if (!regUserId)
+    return (errorMsg.value = "로그인 사용자 정보를 찾을 수 없습니다.");
+  if (!projectId.value)
+    return (errorMsg.value = "프로젝트가 선택되지 않았습니다.");
+  if (!selectedWorkflowId.value)
+    return (errorMsg.value = "Workflow를 선택해주세요."); // ⬅️ 중요
+
+  // 백엔드 스키마에 맞춤 (NOT NULL 컬럼들 포함)
+  const payload: any = {
     stepName,
-    status: form.value.status, // not null
-    regUserId, // not null
-    regDt: now, // not null (스웨거 요구)
-    version: 1, // not null (초기값)
-    projectId: projectId.value, // not null
-
-    // 선택 항목은 이번 버전에서 제외(pipelineId 없음 = 빈값/누락)
-    // pipelineId: undefined,
-    // startTime: undefined,
-    // endTime: undefined,
-    // logPath: undefined,
+    status: form.value.status,
+    regUserId,
+    regDt: nowLocalIso(),
+    version: 1,
+    projectId: projectId.value,
+    workflowStepId: selectedWorkflowId.value, // ⬅️ 이게 없어서 500났었음
   };
 
   try {
     saving.value = true;
-
     if (isEdit.value) {
-      // 수정: id 추출(행에서 넘어온 deviceKey 또는 id 허용)
       const rawId = props.editData?.id ?? props.editData?.deviceKey;
       const id = Number(rawId);
-
-      if (!id) {
-        errorMsg.value = "수정할 ID가 없습니다.";
-        return;
-      }
-
-      const { data } = await WorkflowStepService.update(id, payload as any);
+      if (!id) return (errorMsg.value = "수정할 ID가 없습니다.");
+      const { data } = await WorkflowStepService.update(id, payload);
       emit("saved", data);
-      emit("close-modal");
     } else {
-      const { data } = await WorkflowStepService.add(payload as any);
+      const { data } = await WorkflowStepService.add(payload);
       emit("saved", data);
-      emit("close-modal");
     }
+    emit("close-modal");
   } catch (e) {
-    const err = e as AxiosError;
-    console.error("워크플로우 스텝 저장 실패:", err);
+    console.error("워크플로우 스텝 저장 실패:", e as AxiosError);
     errorMsg.value = "저장에 실패했습니다. 잠시 후 다시 시도하세요.";
   } finally {
     saving.value = false;
@@ -142,7 +169,6 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onEsc));
 
 <template>
   <v-card>
-    <!-- 타이틀: 동일 스타일 -->
     <v-card-title
       class="text-white font-weight-bold text-h6"
       style="background-color: #1976d2"
@@ -150,17 +176,18 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onEsc));
       {{ isEdit ? "Edit Workflow Step" : "Create Workflow Step" }}
     </v-card-title>
 
-    <!-- 폼 영역 -->
     <v-card-text class="pa-6">
       <div class="text-subtitle-1 font-weight-medium mb-4">
         Workflow Step Information
       </div>
 
       <v-form @submit.prevent="submit">
+        <!-- 워크플로우 드롭다운 -->
+
         <div class="mb-5">
-          <label class="text-subtitle-2 font-weight-medium mb-1 d-block">
-            Step Name
-          </label>
+          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+            >Step Name</label
+          >
           <v-text-field
             v-model="form.stepName"
             variant="outlined"
@@ -170,11 +197,28 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onEsc));
             required
           />
         </div>
+        <div class="mb-5">
+          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+            >Workflow</label
+          >
+          <v-select
+            v-model="selectedWorkflowId"
+            :items="workflowOptions"
+            item-title="title"
+            item-value="value"
+            variant="outlined"
+            :loading="workflowsLoading"
+            :disabled="saving || workflowsLoading"
+            dense
+            hide-details
+            placeholder="워크플로우를 선택하세요"
+          />
+        </div>
 
         <div class="mb-5">
-          <label class="text-subtitle-2 font-weight-medium mb-1 d-block">
-            Status
-          </label>
+          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+            >Status</label
+          >
           <v-select
             v-model="form.status"
             :items="['Running', 'Success', 'Fail']"
@@ -189,19 +233,17 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onEsc));
       </v-form>
     </v-card-text>
 
-    <!-- 액션 영역: 동일 버튼 배치/텍스트 -->
     <v-card-actions class="justify-end" style="padding: 16px 24px">
-      <v-btn color="success" :loading="saving" @click="submit">
-        {{ isEdit ? "Update" : "Save" }}
-      </v-btn>
+      <v-btn color="success" :loading="saving" @click="submit">{{
+        isEdit ? "Update" : "Save"
+      }}</v-btn>
       <v-btn
         text
         class="white--text"
         :disabled="saving"
         @click="$emit('close-modal')"
+        >Close</v-btn
       >
-        Close
-      </v-btn>
     </v-card-actions>
   </v-card>
 </template>
diff --git a/src/components/service/management/workflowService.ts b/src/components/service/management/workflowService.ts
index 2c728d9..b0cf7c8 100644
--- a/src/components/service/management/workflowService.ts
+++ b/src/components/service/management/workflowService.ts
@@ -10,7 +10,6 @@ export const WorkflowService = {
   getAll: () => {
     return request.get("/api/workflows", {});
   },
-
   delete: (id: Number) => {
     return request.delete(`/api/workflows/${id}`, {});
   },
diff --git a/src/components/home/ListComponent.vue b/src/components/templates/home/ListComponent.vue
similarity index 83%
rename from src/components/home/ListComponent.vue
rename to src/components/templates/home/ListComponent.vue
index 800484a..4ef56ea 100644
--- a/src/components/home/ListComponent.vue
+++ b/src/components/templates/home/ListComponent.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import Plotly from "plotly.js-dist-min";
+import { WorkflowService } from "@/components/service/management/workflowService";
 
 const pieChartRef = ref<HTMLElement | null>(null);
+const workflows = ref<any[]>([]);
+const recentLimit = 10;
 
 onMounted(() => {
   if (pieChartRef.value) {
@@ -105,6 +108,43 @@ const getSelectedAllData = () => {
     ? data.value.results.map(({ deviceKey }) => ({ deviceKey }))
     : [];
 };
+
+const getLatestTimestamp = (wf: any): string =>
+  wf?.modDttm || wf?.modDt || wf?.regDttm || wf?.regDt || "";
+
+// "YYYY-MM-DD HH:mm" 포맷
+const formatToYmdHm = (isoString: string): string => {
+  if (!isoString) return "-";
+  const dateObj = new Date(isoString);
+  const pad2 = (n: number) => String(n).padStart(2, "0");
+  return `${dateObj.getFullYear()}-${pad2(dateObj.getMonth() + 1)}-${pad2(dateObj.getDate())} ${pad2(dateObj.getHours())}:${pad2(dateObj.getMinutes())}`;
+};
+
+// 화면에 뿌릴 최근 워크플로우(정렬 + 슬라이스)
+const recentWorkflowList = computed(() => {
+  return (workflows.value ?? [])
+    .map((wf: any) => ({
+      id: wf?.id,
+      title: wf?.workflowName ?? "Untitled",
+      timestamp: getLatestTimestamp(wf),
+    }))
+    .filter((item: { timestamp: string }) => item.timestamp) // 날짜 없는 건 제외
+    .sort(
+      (a, b) =>
+        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
+    )
+    .slice(0, recentLimit);
+});
+
+onMounted(async () => {
+  try {
+    const res = await WorkflowService.getAll();
+    workflows.value = Array.isArray(res?.data) ? res.data : [];
+  } catch (err) {
+    console.error("GET /api/workflows failed:", err);
+    workflows.value = [];
+  }
+});
 </script>
 
 <template>
@@ -138,15 +178,23 @@ const getSelectedAllData = () => {
           </div>
           <div style="overflow-y: auto; max-height: 300px; padding: 8px 16px">
             <v-list density="comfortable" nav>
-              <v-list-item v-for="(item, idx) in dummyWorkflow" :key="idx">
+              <v-list-item v-for="item in recentWorkflowList" :key="item.id">
                 <template #title>
                   <div class="d-flex justify-space-between align-center w-100">
                     <span class="text-body-2 font-weight-medium">{{
                       item.title
                     }}</span>
-                    <span class="text-caption text-grey-lighten-1">{{
-                      item.date
-                    }}</span>
+                    <span class="text-caption text-grey-lighten-1">
+                      {{ formatToYmdHm(item.timestamp) }}
+                    </span>
+                  </div>
+                </template>
+              </v-list-item>
+
+              <v-list-item v-if="recentWorkflowList.length === 0">
+                <template #title>
+                  <div class="text-caption text-grey">
+                    최근 등록/수정된 워크플로우가 없습니다.
                   </div>
                 </template>
               </v-list-item>
diff --git a/src/components/templates/Project/ListComponent.vue b/src/components/templates/projects/ListComponent.vue
similarity index 100%
rename from src/components/templates/Project/ListComponent.vue
rename to src/components/templates/projects/ListComponent.vue
diff --git a/src/components/templates/stepconfig/ListComponent.vue b/src/components/templates/stepconfig/ListComponent.vue
index 30b74e0..efa1371 100644
--- a/src/components/templates/stepconfig/ListComponent.vue
+++ b/src/components/templates/stepconfig/ListComponent.vue
@@ -65,14 +65,15 @@ const data = ref({
 
 const toRow = (s: any, no: number) => ({
   no,
-  stepName: s.stepName ?? "-",
-  type: s.stepType ?? "-",
-  dataset: s.datasetName ?? "-",
-  script: s.scriptName ?? "-",
-  hyperParameters: s.hyperParams ?? "-",
-  resource: s.resource ?? "-",
-  status: (s.status ?? "").toLowerCase() === "success" ? "success" : "warning",
-  workflow: s.workflowName ?? s.pipelineId ?? "-",
+  stepName: s.stepName,
+  type: s.stepType,
+  dataset: s.datasetName,
+  script: s.scriptName,
+  hyperParameters: s.hyperParams,
+  resource: s.resource,
+  status: String(s.status).toLowerCase() === "success" ? "success" : "warning",
+  workflow: s.workflowName,
+  workflowId: s.workflowStepId,
   deviceKey: s.id,
 });
 
@@ -266,14 +267,14 @@ const getSelectedAllData = () => {
     ? data.value.results.map((item: any) => ({ deviceKey: item.deviceKey }))
     : [];
 };
-const closeDetail = () => {
-  openView.value = false;
-};
+
 const openDetailModal = (selectedItem: any) => {
   data.value.selectedData = selectedItem;
   openView.value = true;
 };
-
+const closeDetail = () => {
+  openView.value = false;
+};
 const openCreateModal = () => {
   data.value.selectedData = null;
   data.value.modalMode = "create";
@@ -285,6 +286,7 @@ const openModifyModal = (item: any) => {
     id: item.deviceKey,
     stepName: item.stepName,
     status: item.status,
+    workflowStepId: item.workflowId,
   };
   data.value.modalMode = "edit";
   data.value.isStepVisible = true;
@@ -512,7 +514,11 @@ onMounted(() => {
 
   <!-- 상세 보기 -->
   <div class="w-100" v-else>
-    <ViewComponent @close="closeDetail" />
+    <ViewComponent
+      v-if="data.selectedData"
+      :id="data.selectedData.deviceKey"
+      @close="closeDetail"
+    />
   </div>
 
   <!-- 생성/수정 모달 -->
diff --git a/src/components/templates/stepconfig/ViewComponent.vue b/src/components/templates/stepconfig/ViewComponent.vue
index 325c40d..5662e5a 100644
--- a/src/components/templates/stepconfig/ViewComponent.vue
+++ b/src/components/templates/stepconfig/ViewComponent.vue
@@ -1,3 +1,98 @@
+<script setup lang="ts">
+import { defineProps, onMounted, watch, ref, computed } from "vue";
+import { WorkflowStepService } from "@/components/service/management/workflowStepService";
+import { WorkflowService } from "@/components/service/management/workflowService"; // ⬅️ 추가
+
+const props = defineProps<{ id: number | string }>();
+const emit = defineEmits<{ (e: "close"): void }>();
+
+const loading = ref(false);
+const detailRaw = ref<any | null>(null);
+
+// ⬇️ 워크플로우 이름은 별도 상태로
+const workflowName = ref<string>("-");
+
+const formatIso = (s?: string) => (s ? s.replace("T", " ").slice(0, 19) : "-");
+
+const mapToViewModel = (raw: any) => ({
+  stepName: raw?.stepName ?? raw?.name ?? "-",
+  // 여기 값은 임시, 실제 표시는 아래 computed에서 workflowName ref로 덮어씀
+  workflowName: raw?.workflowName ?? raw?.pipelineName ?? "-",
+  createdDate: formatIso(raw?.regDttm ?? raw?.regDt ?? raw?.createdAt),
+  createdId: raw?.regUserId ?? raw?.createdBy ?? "-",
+});
+
+const info = computed(() => ({
+  ...mapToViewModel(detailRaw.value || {}),
+  workflowName: workflowName.value, // ⬅️ 최종 표시는 이 값
+}));
+
+// ⬇️ id → 워크플로우 이름 조회
+async function resolveWorkflowName(raw: any) {
+  // 1) 응답에 이미 이름이 있으면 그걸 사용
+  const direct =
+    raw?.workflowName ||
+    raw?.pipelineName ||
+    raw?.workflow?.workflowName ||
+    raw?.workflow?.name;
+  if (direct) {
+    workflowName.value = direct;
+    return;
+  }
+
+  // 2) FK 후보에서 워크플로우 id 뽑기 (환경에 따라 필드명이 다를 수 있어 방어적으로)
+  const wfId =
+    raw?.workflowStepId ?? // 지금 콘솔에 보이는 필드
+    raw?.workflowId ??
+    raw?.workflow?.id ??
+    null;
+
+  if (!wfId) {
+    workflowName.value = "-";
+    return;
+  }
+
+  try {
+    const res = await WorkflowService.view(Number(wfId));
+    const w = res?.data ?? res;
+    workflowName.value = w?.workflowName || w?.name || `#${wfId}`;
+  } catch (e) {
+    console.warn("[ViewComponent] workflow fetch failed:", e);
+    workflowName.value = `#${wfId}`; // 최소한 id라도 보여주기
+  }
+}
+
+async function fetchDetail(id: number | string) {
+  const idNum = typeof id === "string" ? Number(id) : id;
+  if (!Number.isFinite(idNum as number)) return;
+
+  loading.value = true;
+  try {
+    const res = await WorkflowStepService.view(idNum as number);
+    const raw = res?.data ?? res;
+    detailRaw.value = raw;
+
+    // ⬇️ 여기서 이름 해석
+    await resolveWorkflowName(raw);
+
+    console.log("[ViewComponent] raw:", raw);
+    console.log("[ViewComponent] info:", info.value);
+  } catch (e) {
+    console.error("[ViewComponent] fetch detail error:", e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => fetchDetail(props.id));
+watch(
+  () => props.id,
+  (now) => {
+    if (now !== undefined && now !== null && now !== "") fetchDetail(now);
+  },
+);
+</script>
+
 <template>
   <v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
     <!-- 상단 타이틀 -->
@@ -17,22 +112,27 @@
       <v-card-text class="py-4">
         <v-row align="center" class="mb-2">
           <v-col cols="3" class="font-weight-bold">Workflow Step Name</v-col>
-          <v-col cols="3">Train Model</v-col>
+          <v-col cols="3">{{ info.stepName }}</v-col>
+
           <v-col cols="3" class="font-weight-bold">Workflow Name</v-col>
-          <v-col cols="3">sentiment-analysis</v-col>
+          <v-col cols="3">{{ info.workflowName }}</v-col>
         </v-row>
         <v-divider />
         <v-row align="center" class="mt-2">
           <v-col cols="3" class="font-weight-bold">Created Date</v-col>
-          <v-col cols="3">2025-02-06</v-col>
+          <v-col cols="3">{{ info.createdDate }}</v-col>
+
           <v-col cols="3" class="font-weight-bold">Created ID</v-col>
-          <v-col cols="3">ADMIN_001</v-col>
+          <v-col cols="3">{{ info.createdId }}</v-col>
         </v-row>
       </v-card-text>
+      <v-sheet class="d-flex justify-end mt-4">
+        <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
+      </v-sheet>
     </v-card>
 
     <!-- Dataset -->
-    <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
+    <!-- <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
       <v-card-title class="grey lighten-4 py-2 px-4">
         <span class="font-weight-bold">Dataset</span>
       </v-card-title>
@@ -44,10 +144,10 @@
           <v-col cols="3">v2.0</v-col>
         </v-row>
       </v-card-text>
-    </v-card>
+    </v-card> -->
 
     <!-- Training Script -->
-    <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
+    <!-- <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
       <v-card-title class="grey lighten-4 py-2 px-4">
         <span class="font-weight-bold">Training Script</span>
       </v-card-title>
@@ -64,10 +164,10 @@
           </v-col>
         </v-row>
       </v-card-text>
-    </v-card>
+    </v-card> -->
 
     <!-- Hyperparameters -->
-    <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
+    <!-- <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
       <v-card-title class="grey lighten-4 py-2 px-4">
         <span class="font-weight-bold">Hyperparameters</span>
       </v-card-title>
@@ -86,10 +186,10 @@
           <v-col cols="3">20</v-col>
         </v-row>
       </v-card-text>
-    </v-card>
+    </v-card> -->
 
     <!-- Resource & Scheduling -->
-    <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
+    <!-- <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
       <v-card-title class="grey lighten-4 py-2 px-4">
         <span class="font-weight-bold">Resource & Scheduling</span>
       </v-card-title>
@@ -106,10 +206,10 @@
           <v-col cols="9">1 (NVIDIA A100)</v-col>
         </v-row>
       </v-card-text>
-    </v-card>
+    </v-card> -->
 
     <!-- Docker image -->
-    <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
+    <!-- <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
       <v-card-title class="grey lighten-4 py-2 px-4">
         <span class="font-weight-bold">Docker image</span>
       </v-card-title>
@@ -118,18 +218,9 @@
           kubeflownotebookswg/jupyter-pytorch-cuda-full:v1.9.2
         </v-sheet>
       </v-card-text>
-      <v-sheet class="d-flex justify-end mt-4">
-        <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
-      </v-sheet>
-    </v-card>
+     
+    </v-card> -->
   </v-container>
 </template>
 
-<script setup lang="ts">
-import { defineEmits } from "vue";
-const emit = defineEmits<{
-  (e: "close"): void;
-}>();
-</script>
-
 <style scoped></style>
diff --git a/src/pages/HomeView.vue b/src/pages/HomeView.vue
index 352f6c7..2da9f2f 100644
--- a/src/pages/HomeView.vue
+++ b/src/pages/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ListComponent from "@/components/home/ListComponent.vue";
+import ListComponent from "@/components/templates/home/ListComponent.vue";
 </script>
 
 <template>
diff --git a/src/pages/ProjectView.vue b/src/pages/ProjectView.vue
index 67cc292..4492698 100644
--- a/src/pages/ProjectView.vue
+++ b/src/pages/ProjectView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ListComponent from "@/components/templates/Project/ListComponent.vue";
+import ListComponent from "@/components/templates/projects/ListComponent.vue";
 </script>
 
 <template>
diff --git a/src/utils/menuUtils.js b/src/utils/menuUtils.js
index 90efece..946e950 100644
--- a/src/utils/menuUtils.js
+++ b/src/utils/menuUtils.js
@@ -6,12 +6,6 @@ export const menuUtils = {
       value: "home",
       icon: "mdi-monitor-multiple",
     },
-    {
-      title: "Project",
-      path: "/project",
-      value: "project",
-      icon: "mdi-folder-cog-outline",
-    },
     {
       title: "Workflows",
       path: "/workflows",