From 8114ca58c5a7c31c51bcbb44471923583bbfca49 Mon Sep 17 00:00:00 2001
From: jschoi <jschoi@cuuva.com>
Date: Tue, 30 Sep 2025 17:53:05 +0900
Subject: [PATCH] =?UTF-8?q?=20feat:=20DataGroup=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80,=20Executions=20Status?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95,=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C?=
 =?UTF-8?q?=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B0=94=EC=9D=B8=EB=94=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.dev                                      |    2 +-
 components.d.ts                               |    4 +-
 .../atoms/organisms/DatagroupBaseDoalog.vue   |  210 +++
 .../atoms/organisms/DatasetBaseDoalog.vue     |    5 +-
 .../organisms/TrainingScriptBaseDoalog.vue    |    4 +-
 .../atoms/organisms/WorkflowsBaseDialog.vue   |   27 +-
 src/components/common/LayoutComponent.vue     |   25 +-
 src/components/models/management/Kubeflow.ts  |    4 +-
 .../service/management/DataGroupService.ts    |    5 +-
 .../service/management/kubeflowService.ts     |    2 +-
 .../templates/Datasets/ListComponent.vue      |   45 +-
 .../templates/datagroup/ListComponent.vue     |  460 ++++---
 .../templates/home/ListComponent.vue          | 1218 ++++++++++-------
 .../run/executions/ListComponent.vue          |  247 +---
 .../run/executions/ViewComponent.vue          |    5 -
 .../run/experiment/ViewComponent.vue          |  105 +-
 .../templates/stepconfig/ViewComponent.vue    |    3 -
 .../trainingscript/ListComponent.vue          |   44 +-
 .../trainingscriptgroup/ListComponent.vue     |  570 ++++++++
 .../templates/workflow/ListComponent.vue      |   34 +-
 .../{Datagroup.vue => DatagroupView.vue}      |    0
 src/pages/SignupView.vue                      |    1 -
 src/pages/TrainingscriptgroupView.vue         |    9 +
 src/router/index.js                           |    8 +-
 src/utils/menuUtils.js                        |   35 +-
 typed-router.d.ts                             |    3 +-
 26 files changed, 2058 insertions(+), 1017 deletions(-)
 create mode 100644 src/components/atoms/organisms/DatagroupBaseDoalog.vue
 create mode 100644 src/components/templates/trainingscriptgroup/ListComponent.vue
 rename src/pages/{Datagroup.vue => DatagroupView.vue} (100%)
 create mode 100644 src/pages/TrainingscriptgroupView.vue

diff --git a/.env.dev b/.env.dev
index 7373427..42b5c38 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,3 +1,3 @@
 NODE_ENV = "development"
-VITE_APP_API_SERVER_URL = "http://localhost:80"
+VITE_APP_API_SERVER_URL = "http://localhost:8080"
 VITE_ROOT_PATH = ""
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
index f638129..e95cea5 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppFooter: typeof import('./src/components/AppFooter.vue')['default']
     CompareComponent: typeof import('./src/components/templates/run/executions/CompareComponent.vue')['default']
+    DatagroupBaseDoalog: typeof import('./src/components/atoms/organisms/DatagroupBaseDoalog.vue')['default']
     DatasetBaseDoalog: typeof import('./src/components/atoms/organisms/DatasetBaseDoalog.vue')['default']
     DeploymentDialog: typeof import('./src/components/atoms/organisms/DeploymentDialog.vue')['default']
     DrawerComponent: typeof import('./src/components/common/DrawerComponent.vue')['default']
@@ -26,7 +27,8 @@ declare module 'vue' {
     IconRunBtn: typeof import('./src/components/atoms/button/IconRunBtn.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/templates/Datasets/ListComponent.vue')['default']
+    ListComponent: typeof import('./src/components/templates/datagroup/ListComponent.vue')['default']
+    ListComponentback: typeof import('./src/components/templates/run/executions/ListComponentback.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/DatagroupBaseDoalog.vue b/src/components/atoms/organisms/DatagroupBaseDoalog.vue
new file mode 100644
index 0000000..7ac1510
--- /dev/null
+++ b/src/components/atoms/organisms/DatagroupBaseDoalog.vue
@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import IconArrowDown from "@/components/atoms/button/IconArrowDown.vue";
+import IconArrowUp from "@/components/atoms/button/IconArrowUp.vue";
+import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
+import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
+import { computed, onBeforeUnmount, onMounted, watch, ref } from "vue";
+import { DataGroupService } from "@/components/service/management/DataGroupService";
+import { storage } from "@/utils/storage";
+import { storeToRefs } from "pinia";
+import { useAutoflowStore } from "@/stores/autoflowStore";
+
+const { projectId } = storeToRefs(useAutoflowStore());
+
+const props = defineProps<{ editData: any; mode: "create" | "edit" }>();
+const emit = defineEmits<{
+  (e: "close-modal"): void;
+  (e: "saved", v: any): void;
+}>();
+
+const isEdit = computed(() => props.mode === "edit");
+
+const saving = ref(false);
+const errorMsg = ref("");
+
+const form = ref({ name: "", description: "" });
+
+// 편집 데이터 → 폼
+function hydrateFormFromEdit(data: any) {
+  if (!data) return;
+  form.value.name = data.workflowName ?? data.dsNm ?? data.name ?? "";
+  form.value.description =
+    data.workflowDescription ?? data.dsDesc ?? data.description ?? "";
+}
+onMounted(() => {
+  if (isEdit.value) hydrateFormFromEdit(props.editData);
+});
+watch(
+  () => props.editData,
+  (v) => {
+    if (isEdit.value) hydrateFormFromEdit(v);
+  },
+);
+
+// 유저/프로젝트
+function getAuthUser() {
+  const authObj =
+    (typeof storage?.getAuth === "function" ? storage.getAuth() : null) ??
+    JSON.parse(localStorage.getItem("autoflow-auth") || "{}");
+  const ui = authObj?.userInfo ?? authObj?.userinfo ?? authObj ?? {};
+  return { id: Number(ui.id), username: String(ui.username ?? "").trim() };
+}
+
+function cleanUndefined<T extends Record<string, any>>(obj: T): T {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, v]) => v !== undefined),
+  ) as T;
+}
+
+async function submit() {
+  errorMsg.value = "";
+
+  const name = (form.value.name ?? "").trim(); // ← 제한 없음(한글/특수문자 OK)
+  if (!name) {
+    errorMsg.value = "이름을 입력하세요.";
+    return;
+  }
+
+  const { id: userId, username } = getAuthUser();
+  if (!userId || !username) {
+    errorMsg.value = "로그인 사용자 정보를 찾을 수 없습니다.";
+    return;
+  }
+  if (!projectId.value) {
+    errorMsg.value = "프로젝트가 선택되지 않았습니다.";
+    return;
+  }
+
+  try {
+    saving.value = true;
+
+    if (isEdit.value) {
+      const rawId = props.editData?.id ?? props.editData?.deviceKey;
+      const id = Number(rawId);
+      if (!id) {
+        errorMsg.value = "수정할 ID가 없습니다.";
+        return;
+      }
+
+      const viewRes = await DataGroupService.view(id);
+      const current = (viewRes?.data ?? viewRes) || {};
+
+      const updatePayload = {
+        id,
+        dsNm: name,
+        dsDesc: form.value.description ?? "",
+
+        projectId: current.projectId,
+        regUserId: current.regUserId,
+        regUserNm: current.regUserNm,
+
+        modUserId: userId,
+        modUserNm: username,
+      };
+      console.log(id);
+
+      const { data } = await DataGroupService.update(id, updatePayload);
+      emit("saved", data);
+      emit("close-modal");
+    } else {
+      const createPayload = {
+        dsNm: name,
+        dsDesc: form.value.description ?? "",
+        regUserId: userId,
+        regUserNm: username,
+        projectId: projectId.value!,
+      };
+      const { data } = await DataGroupService.add(createPayload);
+      emit("saved", data);
+      emit("close-modal");
+    }
+  } catch (e: any) {
+    console.error("데이터그룹 저장 실패:", e);
+    const status = e?.response?.status;
+    const raw =
+      (typeof e?.response?.data === "string"
+        ? e?.response?.data
+        : e?.response?.data?.message || e?.response?.data?.error) ||
+      e?.message ||
+      "";
+    if (status === 409)
+      errorMsg.value = "같은 이름의 데이터그룹이 이미 존재합니다.";
+    else if (status === 400) errorMsg.value = "요청 형식이 올바르지 않습니다.";
+    else if (status === 401 || status === 403)
+      errorMsg.value = "권한이 없거나 로그인 정보가 만료되었습니다.";
+    else errorMsg.value = raw || `요청 실패 (HTTP ${status ?? "Error"})`;
+  } finally {
+    saving.value = false;
+  }
+}
+
+function onEsc(e: KeyboardEvent) {
+  if (e.key === "Escape") emit("close-modal");
+}
+onMounted(() => window.addEventListener("keydown", onEsc));
+onBeforeUnmount(() => window.removeEventListener("keydown", onEsc));
+</script>
+
+<template>
+  <v-card>
+    <v-card-title
+      class="text-white font-weight-bold text-h6"
+      style="background-color: #1976d2"
+    >
+      {{ isEdit ? "Edit DataGroup" : "Create DataGroup" }}
+    </v-card-title>
+
+    <v-card-text class="pa-6">
+      <div class="text-subtitle-1 font-weight-medium mb-4">
+        DataGroup Information
+      </div>
+
+      <v-form @submit.prevent="submit">
+        <!-- Name: 제한 없음 -->
+        <div class="mb-5">
+          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+            >DataGroup Name</label
+          >
+          <v-text-field
+            v-model="form.name"
+            variant="outlined"
+            :disabled="saving"
+            dense
+            hide-details="auto"
+            required
+          />
+        </div>
+
+        <!-- Description: 제한 없음 -->
+        <div class="mb-5">
+          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+            >Description</label
+          >
+          <v-textarea
+            v-model="form.description"
+            variant="outlined"
+            :disabled="saving"
+            rows="3"
+            dense
+            hide-details="auto"
+          />
+        </div>
+
+        <div v-if="errorMsg" class="mt-3 text-error">{{ errorMsg }}</div>
+      </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
+        text
+        class="white--text"
+        :disabled="saving"
+        @click="$emit('close-modal')"
+        >Close</v-btn
+      >
+    </v-card-actions>
+  </v-card>
+</template>
diff --git a/src/components/atoms/organisms/DatasetBaseDoalog.vue b/src/components/atoms/organisms/DatasetBaseDoalog.vue
index cd335c6..f78f1ce 100644
--- a/src/components/atoms/organisms/DatasetBaseDoalog.vue
+++ b/src/components/atoms/organisms/DatasetBaseDoalog.vue
@@ -28,6 +28,7 @@ function hydrateFormFromEdit(d: any) {
   form.value.description = (d?.description ?? "") + "";
 }
 
+const getRefId = () => String(props.editData?.refId ?? "0");
 onMounted(() => {
   if (isEdit.value) hydrateFormFromEdit(props.editData);
 });
@@ -39,7 +40,7 @@ watch(
 );
 
 const dialogTitle = computed(() =>
-  isEdit.value ? "Edit Training Script" : "Create Training Script",
+  isEdit.value ? "Edit DataSet Script" : "Create DataSet Script",
 );
 
 // 로그인 사용자
@@ -94,7 +95,7 @@ async function submit() {
         return (errorMsg.value = "프로젝트가 선택되지 않았습니다.");
 
       const fd = new FormData();
-      fd.append("refId", "0");
+      fd.append("refId", getRefId());
       fd.append("refType", "DATASET");
       fd.append("title", title);
       fd.append("description", desc);
diff --git a/src/components/atoms/organisms/TrainingScriptBaseDoalog.vue b/src/components/atoms/organisms/TrainingScriptBaseDoalog.vue
index a616696..02754e3 100644
--- a/src/components/atoms/organisms/TrainingScriptBaseDoalog.vue
+++ b/src/components/atoms/organisms/TrainingScriptBaseDoalog.vue
@@ -28,6 +28,7 @@ function hydrateFormFromEdit(d: any) {
   form.value.description = (d?.description ?? "") + "";
 }
 
+const getRefId = () => String(props.editData?.refId ?? "0");
 onMounted(() => {
   if (isEdit.value) hydrateFormFromEdit(props.editData);
 });
@@ -59,7 +60,6 @@ const regUserId = (() => {
   }
 })();
 
-// ✅ 여기만 변경
 async function submit() {
   errorMsg.value = "";
 
@@ -95,7 +95,7 @@ async function submit() {
         return (errorMsg.value = "프로젝트가 선택되지 않았습니다.");
 
       const fd = new FormData();
-      fd.append("refId", "0");
+      fd.append("refId", getRefId());
       fd.append("refType", "TRAINING_SCRIPT");
       fd.append("title", title);
       fd.append("description", desc);
diff --git a/src/components/atoms/organisms/WorkflowsBaseDialog.vue b/src/components/atoms/organisms/WorkflowsBaseDialog.vue
index 068830b..038aa27 100644
--- a/src/components/atoms/organisms/WorkflowsBaseDialog.vue
+++ b/src/components/atoms/organisms/WorkflowsBaseDialog.vue
@@ -169,14 +169,10 @@ 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 ??
-    authObj?.username ??
-    authObj?.userId ??
-    "";
 
-  if (!regUserId) {
+  const ui = authObj?.userInfo ?? authObj?.userinfo ?? authObj ?? {};
+  const userId = Number(ui.id); // 숫자 ID
+  if (!userId) {
     errorMsg.value = "로그인 사용자 정보를 찾을 수 없습니다.";
     return;
   }
@@ -198,28 +194,21 @@ async function submit() {
         errorMsg.value = "수정할 ID가 없습니다.";
         return;
       }
-
-      // ① 기존 값 조회
       const viewRes = await WorkflowService.view(id);
       const current = (viewRes?.data ?? viewRes) || {};
 
-      // ② name/description만 변경, 그 외는 기존 값 유지해서 null 덮어쓰기 방지
       const updatePayload = cleanUndefined({
         id,
-        name, // 변경
-        description: form.value.description?.trim() || "", // 변경
-
-        // ===== 기존 유지 필드 =====
+        name,
+        description: form.value.description?.trim() || "",
         displayName: current.displayName,
         namespace: current.namespace,
         pipelineId: current.pipelineId,
         kubeflowStatus: current.kubeflowStatus,
         version: current.version,
-
-        regUserId: current.regUserId ?? regUserId,
-        projectId: current.projectId ?? projectId.value,
+        regUserId: current.regUserId,
         regDt: current.regDt,
-        modDt: now,
+        projectId: current.projectId ?? projectId.value,
       });
 
       const { data } = await WorkflowService.update(id, updatePayload);
@@ -236,7 +225,7 @@ async function submit() {
         display_name: name,
         description: form.value.description?.trim() || "",
         namespace: "default",
-        regUserId,
+        regUserId: userId,
         projectId: projectId.value!,
         uploadfile: form.value.file,
       };
diff --git a/src/components/common/LayoutComponent.vue b/src/components/common/LayoutComponent.vue
index b4cc1a2..a9a6049 100644
--- a/src/components/common/LayoutComponent.vue
+++ b/src/components/common/LayoutComponent.vue
@@ -12,12 +12,9 @@ const router = useRouter();
 const username = ref("");
 const projectName = ref(localStorage.getItem("projectName") || "");
 
-// ----------------------
-// Admin 판별 + Admin 모드
-// ----------------------
-const isAdmin = ref(false); // 관리자 계정 여부
-const adminMode = ref(false); // 설정 버튼으로 토글되는 관리자 메뉴 모드
-const lastNonAdminPath = ref("/home"); // 마지막 일반 경로 저장
+const isAdmin = ref(false);
+const adminMode = ref(false);
+const lastNonAdminPath = ref("/home");
 
 function computeIsAdmin() {
   try {
@@ -79,11 +76,19 @@ function updateUsername() {
   const auth = storage.getAuth?.() ?? null;
   username.value = auth?.userInfo?.username ?? auth?.username ?? "";
 }
+function syncAdminModeWithRoute() {
+  const isAdminRoute = route.matched.some((r) => r.meta?.requiresAdmin);
+  if (!isAdminRoute && adminMode.value) {
+    adminMode.value = false;
+  }
+}
+
 function refreshProjectName() {
   const v = localStorage.getItem("projectName");
   projectName.value = v ? v : "";
 }
 function goSelect() {
+  adminMode.value = false;
   router.push("/select");
 }
 function logOut() {
@@ -103,13 +108,17 @@ function logOut() {
 
 // storage 변경 반영
 function onStorage(e) {
-  if (!e.key || e.key === "projectName") refreshProjectName();
+  if (!e.key || e.key === "projectName") {
+    refreshProjectName();
+    adminMode.value = false;
+  }
   if (!e.key || e.key === "autoflow-auth" || e.key === "auth") {
     updateUsername();
     computeIsAdmin();
   }
 }
 const goMain = () => {
+  adminMode.value = false;
   router.push("/home");
 };
 
@@ -120,6 +129,7 @@ watch(
     refreshProjectName();
     const isAdminRoute = route.matched.some((r) => r.meta?.requiresAdmin);
     if (!isAdminRoute) lastNonAdminPath.value = route.fullPath || "/home";
+    syncAdminModeWithRoute();
   },
   { immediate: true },
 );
@@ -130,6 +140,7 @@ onMounted(() => {
   refreshProjectName();
   menu.value = menuItems;
   window.addEventListener("storage", onStorage);
+  syncAdminModeWithRoute();
 });
 onBeforeUnmount(() => {
   window.removeEventListener("storage", onStorage);
diff --git a/src/components/models/management/Kubeflow.ts b/src/components/models/management/Kubeflow.ts
index 9d3be98..f2edec4 100644
--- a/src/components/models/management/Kubeflow.ts
+++ b/src/components/models/management/Kubeflow.ts
@@ -3,13 +3,11 @@ export type KubeflowUploadDto = {
   display_name?: string;
   description?: string;
   namespace?: string;
-  regUserId: string;
+  regUserId: string | number; // number도 허용
   projectId: number | string;
   uploadfile: File | Blob;
 };
 
-export type kubeflow = FormData;
-
 export function toKubeflowForm(dto: KubeflowUploadDto): FormData {
   const fd = new FormData();
   fd.append("name", dto.name);
diff --git a/src/components/service/management/DataGroupService.ts b/src/components/service/management/DataGroupService.ts
index 53ed3ea..c89360d 100644
--- a/src/components/service/management/DataGroupService.ts
+++ b/src/components/service/management/DataGroupService.ts
@@ -2,6 +2,7 @@ import {
   DataGroup,
   DataGroupSearch,
 } from "@/components/models/management/DataGroup";
+
 import { request } from "@/components/service/index";
 export const DataGroupService = {
   add: (payload: DataGroup) => {
@@ -16,8 +17,8 @@ export const DataGroupService = {
   view: (id: Number) => {
     return request.get(`/api/datagroup/${id}`, {});
   },
-  update: (id: number, payload: DataGroup) => {
-    return request.put(`/api/datagroup/${id}`, payload);
+  update: (id: number, updatePayload: DataGroup) => {
+    return request.put(`/api/datagroup/${id}`, updatePayload);
   },
   search: (payload: DataGroupSearch) => {
     return request.get("/api/datagroup/search", payload);
diff --git a/src/components/service/management/kubeflowService.ts b/src/components/service/management/kubeflowService.ts
index dabdf08..d27d7a7 100644
--- a/src/components/service/management/kubeflowService.ts
+++ b/src/components/service/management/kubeflowService.ts
@@ -1,4 +1,4 @@
-import { kubeflow } from "@/components/models/management/Kubeflow";
+import { Kubeflow } from "@/components/models/management/Kubeflow";
 import { request } from "@/components/service/index";
 export const KubeflowService = {
   upload: (payload: kubeflow) => {
diff --git a/src/components/templates/Datasets/ListComponent.vue b/src/components/templates/Datasets/ListComponent.vue
index 7b8db49..98c6c30 100644
--- a/src/components/templates/Datasets/ListComponent.vue
+++ b/src/components/templates/Datasets/ListComponent.vue
@@ -2,13 +2,18 @@
 import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
 import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
 import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { storage } from "@/utils/storage";
 import ViewComponent from "@/components/templates/Datasets/ViewComponent.vue";
 import DatasetBaseDoalog from "@/components/atoms/organisms/DatasetBaseDoalog.vue";
 import { AttachmentsService } from "@/components/service/management/AttachmentsService";
 import { commonStore } from "@/stores/commonStore";
+import { useRoute, useRouter } from "vue-router";
 
+const route = useRoute();
+const router = useRouter();
+const activeRefId = ref<number | null>(null);
+const activeRefName = computed(() => String(route.query.refName));
 const store = commonStore();
 const openView = ref(false);
 const openModify = ref(false);
@@ -69,6 +74,12 @@ const data = ref({
   userOption: [] as any[],
 });
 
+function getRefIdFromRoute(q: any): number | null {
+  const raw = q?.refId;
+  const n = Number(raw);
+  return Number.isFinite(n) && n > 0 ? n : null;
+}
+
 // 유저명
 function readUsernameFromStorage(): string {
   try {
@@ -140,6 +151,7 @@ const fetchList = async () => {
     sortField: "id",
     sortDirection: "DESC",
     refType: "DATASET",
+    refId: activeRefId.value,
   };
 
   try {
@@ -286,6 +298,7 @@ const openCreateModal = () => {
   data.value.selectedData = {
     username: username.value,
     projectId: getProjectId(),
+    refId: activeRefId.value,
   };
   data.value.isCreateVisible = true;
 };
@@ -318,8 +331,18 @@ const getSelectedAllData = () => {
 };
 onMounted(() => {
   username.value = readUsernameFromStorage();
+  activeRefId.value = getRefIdFromRoute(route.query);
   fetchList();
 });
+
+watch(
+  () => route.query.refId,
+  () => {
+    activeRefId.value = getRefIdFromRoute(route.query);
+    data.value.params.pageNum = 1;
+    fetchList();
+  },
+);
 </script>
 
 <template>
@@ -413,6 +436,26 @@ onMounted(() => {
                   />
                 </v-responsive>
               </v-sheet>
+              <v-sheet
+                class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
+              >
+                <v-chip
+                  v-if="activeRefId"
+                  class="ml-2"
+                  color="secondary"
+                  variant="tonal"
+                >
+                  Filter: DataGroup {{ activeRefName }}
+                </v-chip>
+                <v-btn
+                  v-if="activeRefId"
+                  size="small"
+                  variant="text"
+                  @click="router.replace({ path: '/DataGroup' })"
+                >
+                  필터 해제
+                </v-btn>
+              </v-sheet>
             </v-sheet>
 
             <v-sheet class="justify-end mb-2">
diff --git a/src/components/templates/datagroup/ListComponent.vue b/src/components/templates/datagroup/ListComponent.vue
index 1679e9d..478ec53 100644
--- a/src/components/templates/datagroup/ListComponent.vue
+++ b/src/components/templates/datagroup/ListComponent.vue
@@ -3,55 +3,80 @@ import { onMounted, ref, watch } from "vue";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import tz from "dayjs/plugin/timezone";
+import { useRouter } from "vue-router";
 
 import { commonStore } from "@/stores/commonStore";
 import { DataGroupService } from "@/components/service/management/DataGroupService";
 
 import ViewComponent from "@/components/templates/workflow/ViewComponent.vue";
-import WorkflowsBaseDialog from "@/components/atoms/organisms/WorkflowsBaseDialog.vue";
-import WorkflowsUploadDialog from "@/components/atoms/organisms/WorkflowsUploadDialog.vue";
-import WorkflowsRunDialog from "@/components/atoms/organisms/WorkflowsRunDialog.vue";
 import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
 import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
-import IconRunBtn from "@/components/atoms/button/IconRunBtn.vue";
+import DatagroupBaseDoalog from "@/components/atoms/organisms/DatagroupBaseDoalog.vue";
+import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
+
+/* -------------------------
+ * Dayjs & Router
+ * ------------------------*/
 dayjs.extend(utc);
 dayjs.extend(tz);
 const KST = "Asia/Seoul";
-const store = commonStore();
-const openView = ref(false);
-type SearchType = "전체" | "제목" | "작성자";
-
-const isRunVisible = ref(false);
-const selectedRun = ref<any | null>(null);
+const router = useRouter();
 
-const tableHeader = [
-  { label: "No", width: "5%", style: "word-break: keep-all;" },
-  { label: "Workflow Name", width: "18%", style: "word-break: keep-all;" },
-  { label: "Description", width: "28%", style: "word-break: keep-all;" },
-  { label: "Version", width: "10%", style: "word-break: keep-all;" },
-  { label: "Kubeflow Status", width: "12%", style: "word-break: keep-all;" },
-  { label: "Created DateTime", width: "15%", style: "word-break: keep-all;" },
-  { label: "Action", width: "12%", style: "word-break: keep-all;" },
-];
-const searchOptions = [
+/* -------------------------
+ * Types
+ * ------------------------*/
+type SearchType = "전체" | "제목" | "작성자";
+type ApiSearchType = "ALL" | "TITLE" | "AUTHOR";
+
+interface DataGroupRow {
+  no: number;
+  name: string;
+  description: string;
+  author: string;
+  registDt: string | number | Date;
+  deviceKey: number;
+}
+
+/* -------------------------
+ * Constants
+ * ------------------------*/
+const TABLE_HEADERS = [
+  { label: "No", width: "6%", style: "word-break: keep-all;" },
+  { label: "DataGroup Name", width: "24%", style: "word-break: keep-all;" },
+  { label: "Description", width: "32%", style: "word-break: keep-all;" },
+  { label: "Author", width: "14%", style: "word-break: keep-all;" },
+  { label: "Created DateTime", width: "16%", style: "word-break: keep-all;" },
+  { label: "Action", width: "8%", style: "word-break: keep-all;" },
+] as const;
+
+const SEARCH_OPTIONS = [
   { label: "전체", value: "전체" as SearchType },
   { label: "제목", value: "제목" as SearchType },
-  { label: "사용자", value: "작성자" as SearchType },
+  { label: "작성자", value: "작성자" as SearchType },
 ];
 
-const pageSizeOptions = [
+const PAGE_SIZE_OPTIONS = [
   { text: "10 페이지", value: 10 },
   { text: "50 페이지", value: 50 },
   { text: "100 페이지", value: 100 },
 ];
 
-const SEARCH_TYPE_MAP: Record<SearchType | "", "ALL" | "TITLE" | "AUTHOR"> = {
+const SEARCH_TYPE_MAP: Record<SearchType | "", ApiSearchType> = {
   "": "ALL",
   전체: "ALL",
   제목: "TITLE",
   작성자: "AUTHOR",
 };
 
+/* -------------------------
+ * Store & Local State
+ * ------------------------*/
+const store = commonStore();
+const openView = ref(false);
+
+const isRunVisible = ref(false); // 유지 (다른 곳에서 열릴 수 있음)
+const selectedRun = ref<any | null>(null);
+
 const data = ref({
   params: {
     pageNum: 1,
@@ -59,7 +84,7 @@ const data = ref({
     searchType: "전체" as SearchType,
     searchText: "",
   },
-  results: [] as any[],
+  results: [] as DataGroupRow[],
   totalElements: 0,
   pageLength: 0,
   modalMode: "" as "create" | "edit" | "upload" | "",
@@ -73,137 +98,144 @@ const data = ref({
   userOption: [] as any[],
 });
 
+/* -------------------------
+ * Utils
+ * ------------------------*/
 const formatDateTime = (
   v?: string | number | Date,
   fmt = "YYYY-MM-DD HH:mm:ss",
 ) => (v ? dayjs(v).tz(KST).format(fmt) : "");
 
-const toRow = (w: any, no: number) => ({
+const toRow = (g: any, no: number): DataGroupRow => ({
   no,
-  name: w.name,
-  description: w.description,
-  version: w.version,
-  kubeflowStatus: w.kubeflowStatus,
-  registDt: w.regDt,
-  deviceKey: w.id,
-  pipelineId: w.pipelineId ?? w.pipeline_id ?? "",
+  name: g.dsNm,
+  description: g.dsDesc,
+  author: g.regUserNm,
+  registDt: g.regDate,
+  deviceKey: g.id,
 });
 
-const fetchList = () => {
+function onRowClick(row: DataGroupRow) {
+  const id = Number(row?.deviceKey);
+  if (!Number.isFinite(id)) return;
+  router.push({
+    path: "/datasets",
+    query: { refId: String(id), refName: row.name },
+  });
+}
+
+/* -------------------------
+ * Data Loaders
+ * ------------------------*/
+async function fetchList() {
   const projectId = Number(localStorage.getItem("projectId"));
   if (!projectId) {
-    console.warn("[Workflows] projectId 없음 — 프로젝트 먼저 선택");
+    console.warn("[DataGroup] projectId 없음 — 프로젝트 먼저 선택");
     data.value.results = [];
     data.value.totalElements = 0;
     data.value.pageLength = 0;
     return;
   }
 
-  const { pageNum, searchText, searchType } = data.value.params;
-
-  // 매핑 및 로컬 필터링 필요 여부 판단
+  const { pageNum, pageSize, searchType, searchText } = data.value.params;
   const mapped = SEARCH_TYPE_MAP[searchType] || "ALL";
   const keyword = (searchText || "").trim();
   const needLocalFilter = mapped !== "ALL" && keyword.length > 0;
 
-  let reqPage = data.value.params.pageNum;
-  let reqSize = data.value.params.pageSize;
-  if (needLocalFilter) {
-    reqPage = 0;
-    reqSize = 1000;
-  }
-  const payload = {
-    projectId,
-    page: reqPage,
-    size: reqSize,
-    keyword,
-    searchType: mapped,
-  };
-
-  DataGroupService.search(payload)
-    .then((res: any) => {
-      if (res.status !== 200) return;
-
-      const result = res.data;
-      let list = result?.content ?? [];
-
-      if (needLocalFilter) {
-        const kw = keyword.toLowerCase();
-
-        if (mapped === "TITLE") {
-          list = list.filter((w: any) =>
-            String(w?.name ?? "")
-              .toLowerCase()
-              .includes(kw),
-          );
-        } else if (mapped === "AUTHOR") {
-          list = list.filter((w: any) =>
-            String(w?.regUserId ?? "")
-              .toLowerCase()
-              .includes(kw),
-          );
-        }
-
-        const uiSize = data.value.params.pageSize;
-        const totalElements = list.length;
-        const totalPages = Math.max(1, Math.ceil(totalElements / uiSize));
-        const safePage = Math.min(Math.max(1, pageNum), totalPages);
-        const start = (safePage - 1) * uiSize;
-        const pageSlice = list.slice(start, start + uiSize);
-
-        // 이 페이지의 첫 행 번호(내림차순)
-        const firstNo = totalElements - start;
-
-        data.value.results = pageSlice.map((w: any, i: number) =>
-          toRow(w, firstNo - i),
+  // 서버 요청 크기 설정 (로컬 필터가 필요하면 넉넉히 가져옴)
+  const reqPage = needLocalFilter ? 0 : pageNum - 1; // 서버가 0-based 라면 조정
+  const reqSize = needLocalFilter ? 1000 : pageSize;
+
+  try {
+    const payload = {
+      projectId,
+      page: reqPage,
+      size: reqSize,
+      keyword,
+      searchType: mapped,
+    };
+    const res: any = await DataGroupService.search(payload);
+    if (res?.status !== 200) return;
+
+    const result = res.data;
+    let list: any[] = result?.content ?? [];
+
+    // 로컬 필터
+    if (needLocalFilter) {
+      const kw = keyword.toLowerCase();
+      if (mapped === "TITLE") {
+        list = list.filter((w: any) =>
+          String(w?.name ?? "")
+            .toLowerCase()
+            .includes(kw),
+        );
+      } else if (mapped === "AUTHOR") {
+        list = list.filter((w: any) =>
+          String(w?.regUserNm ?? "")
+            .toLowerCase()
+            .includes(kw),
         );
-        data.value.totalElements = totalElements;
-        data.value.pageLength = totalPages;
-        return;
       }
 
-      const totalElements = result.totalElements;
-      const totalPages = result.totalPages;
-      const serverPage = result.pageable.pageNumber;
-      const serverSize = result.pageable.pageSize;
-      const offset =
-        typeof result.pageable.offset === "number"
-          ? result.pageable.offset
-          : serverPage * serverSize;
-      const firstNo = totalElements - offset;
-
-      data.value.results = list.map((w: any, i: number) =>
+      const uiSize = pageSize;
+      const totalElements = list.length;
+      const totalPages = Math.max(1, Math.ceil(totalElements / uiSize));
+      const safePage = Math.min(Math.max(1, pageNum), totalPages);
+      const start = (safePage - 1) * uiSize;
+      const pageSlice = list.slice(start, start + uiSize);
+      const firstNo = totalElements - start;
+
+      data.value.results = pageSlice.map((w: any, i: number) =>
         toRow(w, firstNo - i),
       );
       data.value.totalElements = totalElements;
       data.value.pageLength = totalPages;
-    })
-    .catch((err: any) => console.error("워크플로우 조회 에러:", err));
-};
+      return;
+    }
 
-const doSearch = () => {
+    // 서버 페이징 결과 사용
+    const totalElements = result.totalElements ?? list.length;
+    const totalPages = result.totalPages ?? 1;
+    const serverPage = result.pageable?.pageNumber ?? 0;
+    const serverSize = result.pageable?.pageSize ?? pageSize;
+    const offset =
+      typeof result.pageable?.offset === "number"
+        ? result.pageable.offset
+        : serverPage * serverSize;
+    const firstNo = totalElements - offset;
+
+    data.value.results = list.map((w: any, i: number) => toRow(w, firstNo - i));
+    data.value.totalElements = totalElements;
+    data.value.pageLength = totalPages;
+  } catch (err) {
+    console.error("[DataGroup] 조회 에러:", err);
+  }
+}
+
+/* -------------------------
+ * Actions
+ * ------------------------*/
+function doSearch() {
   data.value.params.pageNum = 1;
   fetchList();
-};
-
-const changePageNum = (page: number) => {
+}
+function changePageNum(page: number) {
   data.value.params.pageNum = page;
   fetchList();
-};
-
-const changePageSize = (size: number) => {
+}
+function changePageSize(size: number) {
   data.value.params.pageSize = size;
   data.value.params.pageNum = 1;
   fetchList();
-};
+}
 
-const removeData = (value?: Array<{ deviceKey: number }>) => {
+function removeData(value?: Array<{ deviceKey: number }>) {
   const removeList = value ?? data.value.selected;
-  if (!removeList || removeList.length === 0) return;
+  if (!removeList?.length) return;
 
   const ids = removeList.map((x) => x.deviceKey);
-  const remove = (id: number) =>
-    DataGroupService.delete(id).then((res) => {
+  const removeOnce = (id: number) =>
+    DataGroupService.delete(id).then((res: any) => {
       if (res.status < 200 || res.status >= 300) return Promise.reject(res);
     });
 
@@ -219,76 +251,73 @@ const removeData = (value?: Array<{ deviceKey: number }>) => {
     data.value.selected = [];
     data.value.allSelected = false;
   };
-  console.log(ids.length);
 
   if (ids.length === 1) {
-    remove(ids[0])
-      .then(() => {
+    removeOnce(ids[0])
+      .then(() =>
         store.setSnackbarMsg({
           color: "success",
           text: "삭제되었습니다.",
           result: 200,
-        });
-        after();
-      })
+        }),
+      )
       .catch((err) => {
+        console.error(err);
         store.setSnackbarMsg({
           color: "warning",
           text: "삭제 실패",
           result: 500,
         });
-        console.error(err);
-      });
+      })
+      .finally(after);
   } else {
-    Promise.all(ids.map(remove))
-      .then(() => {
+    Promise.all(ids.map(removeOnce))
+      .then(() =>
         store.setSnackbarMsg({
           color: "success",
           text: "모두 삭제되었습니다.",
           result: 200,
-        });
-      })
+        }),
+      )
       .catch((err) => {
+        console.error(err);
         store.setSnackbarMsg({
           color: "warning",
           text: "일부 삭제 실패",
           result: 500,
         });
-        console.error(err);
       })
       .finally(after);
   }
-};
+}
 
-const handleRemoveData = () => {
+function handleRemoveData() {
   if (data.value.selected.length === 0) return;
   if (data.value.allSelected || data.value.selected.length !== 1) {
     data.value.isConfirmDialogVisible = true;
     return;
   }
   removeData();
-};
+}
 
-const getSelectedAllData = () => {
+function getSelectedAllData() {
   data.value.selected = data.value.allSelected
     ? data.value.results.map((item) => ({ deviceKey: item.deviceKey }))
     : [];
-};
+}
 
-const openDetailModal = (selectedItem: any) => {
+function openDetailModal(selectedItem: DataGroupRow) {
   data.value.selectedData = selectedItem;
   openView.value = true;
-};
-
+}
 const closeDetail = () => (openView.value = false);
-const closeRunModal = () => (isRunVisible.value = false);
 
-const openRunModal = (item: any) => {
+function openRunModal(item: any) {
   selectedRun.value = item;
   isRunVisible.value = true;
-};
+}
 
-const openModifyModal = (item: any) => {
+function openModifyModal(item: DataGroupRow) {
   data.value.selectedData = {
     id: item.deviceKey,
     workflowName: item.name,
@@ -296,47 +325,42 @@ const openModifyModal = (item: any) => {
   };
   data.value.modalMode = "edit";
   data.value.isCreateVisible = true;
-};
-
-const openCreateModal = () => {
+}
+function openCreateModal() {
   data.value.selectedData = null;
   data.value.modalMode = "create";
   data.value.isCreateVisible = true;
-};
-
-const openUploadModal = () => {
+}
+function openUploadModal() {
   data.value.selectedData = null;
   data.value.modalMode = "upload";
   data.value.isUploadVisible = true;
-};
-
-const closeCreateModal = () => {
+}
+function closeCreateModal() {
   data.value.isModalVisible = false;
   data.value.isCreateVisible = false;
-};
-
-const closeUploadModal = () => {
+}
+function closeUploadModal() {
   data.value.isModalVisible = false;
   data.value.isUploadVisible = false;
-};
+}
 
+/* -------------------------
+ * Watchers & Lifecycle
+ * ------------------------*/
 watch(
   () => data.value.isCreateVisible,
   (now, prev) => {
     if (prev && !now) fetchList();
   },
 );
-
 watch(
   () => data.value.isUploadVisible,
   (now, prev) => {
     if (prev && !now) fetchList();
   },
 );
-
-onMounted(() => {
-  fetchList();
-});
+onMounted(fetchList);
 </script>
 
 <template>
@@ -353,6 +377,8 @@ onMounted(() => {
             </div>
           </v-card-item>
         </v-card>
+
+        <!-- Search -->
         <v-card flat class="bg-shades-transparent w-100">
           <v-card flat class="bg-shades-transparent mb-4">
             <div class="d-flex justify-center flex-wrap align-center">
@@ -365,13 +391,14 @@ onMounted(() => {
                   v-model="data.params.searchType"
                   label="검색조건"
                   density="compact"
-                  :items="searchOptions"
+                  :items="SEARCH_OPTIONS"
                   item-title="label"
                   item-value="value"
                   hide-details
                   @update:model-value="doSearch"
                 />
               </v-responsive>
+
               <v-responsive min-width="540" max-width="540">
                 <v-text-field
                   v-model="data.params.searchText"
@@ -382,7 +409,7 @@ onMounted(() => {
                   class="mt-3 mb-3"
                   hide-details
                   @keyup.enter="doSearch"
-                ></v-text-field>
+                />
               </v-responsive>
 
               <div class="ml-3">
@@ -392,12 +419,13 @@ onMounted(() => {
                   :rounded="5"
                   @click="doSearch"
                 >
-                  <v-icon> mdi-magnify</v-icon>
+                  <v-icon>mdi-magnify</v-icon>
                 </v-btn>
               </div>
             </div>
           </v-card>
 
+          <!-- Toolbar -->
           <v-sheet
             class="bg-shades-transparent d-flex flex-wrap align-center mb-2"
           >
@@ -414,27 +442,25 @@ onMounted(() => {
                   <v-select
                     v-model="data.params.pageSize"
                     density="compact"
-                    :items="pageSizeOptions"
+                    :items="PAGE_SIZE_OPTIONS"
                     item-title="text"
                     item-value="value"
                     variant="outlined"
                     color="primary"
                     hide-details
                     @update:model-value="changePageSize"
-                  ></v-select>
+                  />
                 </v-responsive>
               </v-sheet>
             </v-sheet>
             <v-sheet class="justify-end mb-2">
-              <!-- <v-btn color="info" class="mr-4" @click="openUploadModal"
-                >Upload Workflow
-              </v-btn> -->
               <v-btn color="info" @click="openCreateModal"
-                >Create Workflow
-              </v-btn>
+                >Create DataGroup</v-btn
+              >
             </v-sheet>
           </v-sheet>
 
+          <!-- Table -->
           <v-card class="rounded-lg pa-8">
             <v-col cols="12">
               <v-sheet>
@@ -447,69 +473,52 @@ onMounted(() => {
                   overflow-x-auto
                 >
                   <colgroup>
-                    <col style="width: 5%" />
                     <col
-                      v-for="(item, i) in tableHeader"
+                      v-for="(h, i) in TABLE_HEADERS"
                       :key="i"
-                      :style="`width:${item.width}`"
+                      :style="`width:${h.width}`"
                     />
                   </colgroup>
                   <thead>
                     <tr>
-                      <th>
-                        <v-checkbox
-                          v-model="data.allSelected"
-                          style="min-width: 36px"
-                          :indeterminate="data.allSelected === true"
-                          hide-details
-                          @change="getSelectedAllData"
-                        ></v-checkbox>
-                      </th>
                       <th
-                        v-for="(item, i) in tableHeader"
+                        v-for="(h, i) in TABLE_HEADERS"
                         :key="i"
                         class="text-center font-weight-bold"
-                        :style="`${item.style}`"
+                        :style="h.style"
                       >
-                        {{ item.label }}
+                        {{ h.label }}
                       </th>
                     </tr>
                   </thead>
                   <tbody class="text-body-2">
                     <tr
-                      v-for="(item, i) in data.results"
+                      v-for="(row, i) in data.results"
                       :key="i"
-                      class="text-center"
+                      class="text-center row-hover"
+                      @click="onRowClick(row)"
                     >
-                      <td>
-                        <v-checkbox
-                          v-model="data.selected"
-                          hide-details
-                          :value="{
-                            deviceKey: item.deviceKey,
-                          }"
-                        ></v-checkbox>
-                      </td>
-                      <td>{{ item.no }}</td>
-                      <td>{{ item.name }}</td>
-                      <td>{{ item.description }}</td>
-                      <td>{{ item.version }}</td>
-                      <td>{{ item.kubeflowStatus }}</td>
-                      <td>{{ formatDateTime(item.registDt) }}</td>
-                      <td style="white-space: nowrap">
-                        <IconRunBtn @on-click="openRunModal(item)" />
-                        <IconInfoBtn @on-click="openDetailModal(item)" />
-                        <!-- <IconModifyBtn @on-click="openModifyModal(item)" /> -->
+                      <td>{{ row.no }}</td>
+                      <td>{{ row.name }}</td>
+                      <td>{{ row.description }}</td>
+                      <td>{{ row.author || "-" }}</td>
+                      <td>{{ formatDateTime(row.registDt) }}</td>
+                      <td
+                        style="white-space: nowrap"
+                        @click.stop
+                        @mousedown.stop
+                      >
+                        <IconInfoBtn @on-click="openDetailModal(row)" />
+                        <IconModifyBtn @on-click="openModifyModal(row)" />
                         <IconDeleteBtn
-                          @on-click="
-                            removeData([{ deviceKey: item.deviceKey }])
-                          "
+                          @on-click="removeData([{ deviceKey: row.deviceKey }])"
                         />
                       </td>
                     </tr>
                   </tbody>
                 </v-table>
               </v-sheet>
+
               <v-card-actions class="text-center mt-8 justify-center">
                 <v-pagination
                   v-model="data.params.pageNum"
@@ -518,36 +527,23 @@ onMounted(() => {
                   color="primary"
                   rounded="circle"
                   @update:model-value="changePageNum"
-                ></v-pagination>
+                />
               </v-card-actions>
             </v-col>
           </v-card>
         </v-card>
       </v-card>
     </v-container>
+
+    <!-- Create/Edit Dialog -->
     <v-dialog v-model="data.isCreateVisible" max-width="800" persistent>
-      <WorkflowsBaseDialog
+      <DatagroupBaseDoalog
         :key="data.modalMode + String(data.selectedData?.deviceKey ?? '')"
         :edit-data="data.selectedData"
         :mode="data.modalMode"
         @close-modal="closeCreateModal"
       />
     </v-dialog>
-    <v-dialog v-model="data.isUploadVisible" max-width="800" persistent>
-      <WorkflowsUploadDialog
-        :edit-data="data.selectedData"
-        :mode="data.modalMode"
-        @close-modal="closeUploadModal"
-      />
-    </v-dialog>
-    <v-dialog v-model="isRunVisible" max-width="600" persistent>
-      <WorkflowsRunDialog
-        :pipeline-id="selectedRun?.pipelineId"
-        :display-name="`Run of ${selectedRun?.name ?? 'Pipeline'} (${new Date().toLocaleString()})`"
-        :description="selectedRun?.description || ''"
-        @close-modal="closeRunModal"
-      />
-    </v-dialog>
   </div>
 
   <div class="w-100" v-else>
@@ -559,4 +555,16 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* 행 Hover 효과 */
+.row-hover {
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+tbody tr.row-hover:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+tbody tr.row-hover:active {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>
diff --git a/src/components/templates/home/ListComponent.vue b/src/components/templates/home/ListComponent.vue
index 4becb98..9aaef62 100644
--- a/src/components/templates/home/ListComponent.vue
+++ b/src/components/templates/home/ListComponent.vue
@@ -1,129 +1,159 @@
 <script setup lang="ts">
-import { onMounted, ref, computed, watch } from "vue";
+import { onMounted, onUnmounted, ref, computed, watch, nextTick } from "vue";
 import Plotly from "plotly.js-dist-min";
+import { useAutoflowStore } from "@/stores/autoflowStore";
 import { WorkflowService } from "@/components/service/management/WorkflowService";
 import { ExecutionsService } from "@/components/service/management/ExecutionsService";
 import { AttachmentsService } from "@/components/service/management/AttachmentsService";
-import { useAutoflowStore } from "@/stores/autoflowStore";
 import { KubeflowRunService } from "@/components/service/management/KubeflowRunService";
-const store = useAutoflowStore();
-const currentProjectId = computed(() => store.projectId);
+import { DataGroupService } from "@/components/service/management/DataGroupService";
 
-const pieChartRef = ref<HTMLElement | null>(null);
-const workflows = ref<any[]>([]);
-const recentLimit = 10;
-const runsLoading = ref(false);
-const kfRunsLoading = ref(false);
-const isRefreshing = ref(false);
-const recentRuns = ref<
-  {
-    name: string;
-    status: "success" | "failed" | "running" | "pending";
-    time: string;
-  }[]
->([]);
-
-// dataset
-const dsLoading = ref(false);
-type DsItem = {
+type UiStatus = "success" | "failed" | "running" | "pending";
+type KfFilter = "SUCCEEDED" | "FAILED" | "RUNNING" | "PENDING" | null;
+
+interface RecentRunRow {
+  name: string;
+  status: UiStatus;
+  time: string;
+}
+interface DatasetGroup {
+  groupId: number;
+  groupName: string;
+  items: DatasetRow[];
+}
+interface DatasetRow {
+  groupId: number;
+  groupName: string;
   name: string;
   version: number;
   rows: number;
   last?: string;
   pct: number;
-};
-const dsItems = ref<DsItem[]>([]);
-const dsWindowDays = ref<7 | 30 | 90>(30);
-
-// 날짜 유틸
-const toTime = (x?: string) => new Date(x ?? 0).getTime();
-const fmtYmd = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "-");
-
-type KfRun = {
+}
+interface WorkflowRow {
+  id: string | number;
+  name: string;
+  modDt: string;
+}
+interface KubeflowRunRow {
   runId: string;
   name: string;
-  state: string; // 원본 상태 (SUCCEEDED/FAILED/…)
-  status: "success" | "failed" | "running" | "pending"; // UI용
+  state: string;
+  uiStatus: UiStatus;
   createdAt?: string;
   scheduledAt?: string;
   finishedAt?: string;
   experimentId?: string;
   pipelineName?: string;
   serviceAccount?: string;
+}
+
+const COLOR = {
+  SUCCESS: "#2ecc71",
+  ERROR: "#e74c3c",
+  INFO: "#3498db",
+  WARNING: "#f1c40f",
+  SECONDARY: "#95a5a6",
+  MUTED: "#7f8c8d",
+  NODATA: "#4b4f55",
+} as const;
+
+const STATUS_LABEL: Record<UiStatus, string> = {
+  success: "Succeeded",
+  failed: "Failed",
+  running: "Running",
+  pending: "Pending",
 };
-const kfRuns = ref<KfRun[]>([]);
 
-// ⬇️ 상태 매핑 유틸
-function toUiStatus2(state?: string): KfRun["status"] {
-  switch ((state || "").toUpperCase()) {
-    case "SUCCEEDED":
-      return "success";
-    case "FAILED":
-      return "failed";
-    case "RUNNING":
-      return "running";
-    case "PENDING":
-    case "QUEUED":
-    case "SCHEDULED":
-      return "pending";
-    default:
-      return "pending";
-  }
+function colorChipByUiStatus(status: UiStatus) {
+  if (status === "success") return "success";
+  if (status === "failed") return "error";
+  if (status === "running") return "info";
+  return "grey";
+}
+function avatarColorByUiStatus(status: UiStatus) {
+  if (status === "success") return "green-lighten-1";
+  if (status === "failed") return "red-lighten-1";
+  if (status === "running") return "blue-lighten-1";
+  return "grey-darken-1";
+}
+function avatarIconByUiStatus(status: UiStatus) {
+  if (status === "success") return "mdi-check";
+  if (status === "failed") return "mdi-close";
+  if (status === "running") return "mdi-progress-clock";
+  return "mdi-clock-outline";
 }
 
-async function loadDatasetActivity() {
-  dsLoading.value = true;
+const groupSummaries = ref<Array<{ id: number; name: string }>>([]);
+const datasetsByGroup = ref<Record<number, DatasetRow[]>>({});
+const groupLoading = ref<Record<number, boolean>>({});
+const groupLoaded = ref<Record<number, boolean>>({});
+
+async function loadDatasetsForGroup(groupId: number, groupName: string) {
+  if (groupLoaded.value[groupId] || groupLoading.value[groupId]) return;
+  groupLoading.value[groupId] = true;
   try {
-    const payload = {
+    const res = await AttachmentsService.search({
       projectId: currentProjectId.value,
       page: 0,
-      size: 1000,
+      size: 200,
       refType: "DATASET",
+      refId: groupId,
       sortField: "id",
       sortDirection: "DESC",
-    };
-
-    const res = await AttachmentsService.search(payload as any);
-    const list: any[] = res?.data?.content ?? res?.data ?? [];
-
-    const map = new Map<
-      string,
-      { name: string; version: number; rows: number; last?: string }
-    >();
-
-    for (const a of list) {
-      const name = String(a?.title ?? a?.originalName ?? "(no name)");
-      const v = Number(a?.version) || 1; // null 방어
-      const reg = (a?.modDt ?? a?.regDt ?? a?.createdAt) as string | undefined;
-
-      const cur = map.get(name) ?? {
+    } as any);
+    const content: any[] = res?.data?.content ?? res?.data ?? [];
+
+    // Map → Record 로 변경 (ES5 호환)
+    const byName: Record<string, DatasetRow> = {};
+    for (let i = 0; i < content.length; i++) {
+      const f = content[i];
+      const name = String(f?.title ?? f?.originalName ?? "(no name)");
+      const version = Number(f?.version) || 1;
+      const last = (f?.modDt ?? f?.regDt ?? f?.createdAt) as string | undefined;
+
+      const key = name;
+      const cur = byName[key] ?? {
+        groupId,
+        groupName,
         name,
         version: 0,
         rows: 0,
         last: undefined,
+        pct: 0,
       };
       cur.rows += 1;
-      cur.version = Math.max(cur.version, v); // 최신 버전 반영
-      if (!cur.last || (reg && toTime(reg) > toTime(cur.last))) cur.last = reg;
-      map.set(name, cur);
+      cur.version = Math.max(cur.version, version);
+      if (
+        !cur.last ||
+        (last && new Date(last).getTime() > new Date(cur.last).getTime())
+      ) {
+        cur.last = last;
+      }
+      byName[key] = cur;
     }
 
-    const arr = Array.from(map.values());
-    const maxVer = Math.max(1, ...arr.map((i) => i.version));
+    const rows = Object.values(byName);
+    const maxVer = Math.max(1, ...rows.map((r) => r.version));
+    for (let i = 0; i < rows.length; i++)
+      rows[i].pct = Math.round((rows[i].version / maxVer) * 100);
 
-    dsItems.value = arr
-      .map((i) => ({ ...i, pct: Math.round((i.version / maxVer) * 100) }))
-      .sort((a, b) => toTime(b.last) - toTime(a.last) || b.version - a.version);
+    datasetsByGroup.value[groupId] = rows.sort(
+      (a, b) =>
+        new Date(b.last ?? 0).getTime() - new Date(a.last ?? 0).getTime() ||
+        b.version - a.version,
+    );
+    groupLoaded.value[groupId] = true;
   } catch (e) {
-    console.error("[Home] loadDatasetActivity error:", e);
-    dsItems.value = [];
+    console.error("[Dashboard] loadDatasetsForGroup error:", e);
+    datasetsByGroup.value[groupId] = [];
   } finally {
-    dsLoading.value = false;
+    groupLoading.value[groupId] = false;
   }
 }
 
-function toUiStatus(state?: string) {
-  switch ((state || "").toUpperCase()) {
+function mapRawStateToUiStatus(raw?: string): UiStatus {
+  switch ((raw || "").toUpperCase()) {
     case "SUCCEEDED":
       return "success";
     case "FAILED":
@@ -131,12 +161,17 @@ function toUiStatus(state?: string) {
     case "RUNNING":
       return "running";
     case "PENDING":
+    case "QUEUED":
+    case "SCHEDULED":
       return "pending";
     default:
       return "pending";
   }
 }
 
+const toEpoch = (iso?: string) => new Date(iso ?? 0).getTime();
+const fmtLocalDateTime = (iso?: string) =>
+  iso ? new Date(iso).toLocaleString() : "-";
 function fmtYmdHm(iso?: string) {
   if (!iso) return "-";
   const d = new Date(iso);
@@ -144,130 +179,255 @@ function fmtYmdHm(iso?: string) {
   return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
 }
 
+const store = useAutoflowStore();
+const currentProjectId = computed(() => store.projectId);
+const currentProjectName = computed(
+  () => store.projectName ?? localStorage.getItem("projectName") ?? "",
+);
+
+const workflows = ref<WorkflowRow[]>([]);
+const recentRuns = ref<RecentRunRow[]>([]);
+const datasetRows = ref<DatasetRow[]>([]);
+const kubeflowRuns = ref<KubeflowRunRow[]>([]);
+
+const isRefreshing = ref(false);
+const runsLoading = ref(false);
+const dsLoading = ref(false);
+const kfRunsLoading = ref(false);
+
+const kubeflowDetailsExplicitOpen = ref(false);
+const kubeflowStatusFilter = ref<KfFilter>(null);
+const showKubeflowDetails = computed(
+  () =>
+    kubeflowStatusFilter.value !== null || kubeflowDetailsExplicitOpen.value,
+);
+
+const recentLimit = 10;
+
+const workflowStatusPieRef = ref<HTMLElement | null>(null);
+const kubeflowPieRef = ref<HTMLElement | null>(null);
+const kubeflowPieWrapRef = ref<HTMLElement | null>(null);
+let kubeflowResizeObserver: ResizeObserver | null = null;
+
+/* Map → Record 로 변경 */
+const datasetGroups = computed<DatasetGroup[]>(() => {
+  const dict: Record<number, DatasetGroup> = {};
+  const rows = datasetRows.value || [];
+  for (let i = 0; i < rows.length; i++) {
+    const r = rows[i];
+    if (!dict[r.groupId])
+      dict[r.groupId] = {
+        groupId: r.groupId,
+        groupName: r.groupName,
+        items: [],
+      };
+    dict[r.groupId].items.push(r);
+  }
+  const groups = Object.values(dict);
+  for (let i = 0; i < groups.length; i++) {
+    groups[i].items.sort(
+      (a, b) => toEpoch(b.last) - toEpoch(a.last) || b.version - a.version,
+    );
+  }
+  return groups.sort((a, b) => a.groupName.localeCompare(b.groupName));
+});
+
+const kubeflowCounts = computed(() => {
+  const agg = { SUCCEEDED: 0, FAILED: 0, RUNNING: 0, PENDING: 0 };
+  for (let i = 0; i < kubeflowRuns.value.length; i++) {
+    const raw = (kubeflowRuns.value[i].state || "").toUpperCase();
+    if (raw.includes("SUCCEED")) agg.SUCCEEDED++;
+    else if (raw.includes("FAIL")) agg.FAILED++;
+    else if (raw.includes("RUN")) agg.RUNNING++;
+    else agg.PENDING++;
+  }
+  return agg;
+});
+
+const kubeflowStats = computed(() => ({
+  total: kubeflowCounts.value.SUCCEEDED + kubeflowCounts.value.FAILED,
+  succeeded: kubeflowCounts.value.SUCCEEDED,
+  failed: kubeflowCounts.value.FAILED,
+}));
+
+const kubeflowRunsForList = computed(() => {
+  const list = kubeflowRuns.value.filter((kfRunRow) => {
+    const raw = (kfRunRow.state || "").toUpperCase();
+    if (kubeflowStatusFilter.value === "SUCCEEDED")
+      return raw.includes("SUCCEED");
+    if (kubeflowStatusFilter.value === "FAILED") return raw.includes("FAIL");
+    return raw.includes("SUCCEED") || raw.includes("FAIL");
+  });
+  return list.sort((a, b) => toEpoch(b.createdAt) - toEpoch(a.createdAt));
+});
+
 async function loadRecentRuns() {
   runsLoading.value = true;
   try {
-    const all: any[] = [];
-    const seen = new Set<string>();
+    const allRuns: any[] = [];
+    const seenTokens = new Set<string>();
 
-    // 첫 페이지
     let page = await ExecutionsService.search({ pageSize: 200 });
-    all.push(...(page?.data?.runs ?? []));
+    allRuns.push(...(page?.data?.runs ?? []));
     let token = page?.data?.next_page_token ?? page?.data?.nextPageToken;
 
-    // 다음 페이지들(필요 시)
     let guard = 0;
-    while (token && !seen.has(token) && guard < 20) {
-      seen.add(token);
-
-      // snake_case 우선
+    while (token && !seenTokens.has(token) && guard < 20) {
+      seenTokens.add(token);
       page = await ExecutionsService.search({
         pageToken: token,
         pageSize: 200,
       } as any);
-      all.push(...(page?.data?.runs ?? []));
+      allRuns.push(...(page?.data?.runs ?? []));
       token = page?.data?.next_page_token ?? page?.data?.nextPageToken;
       guard++;
     }
 
-    // 중복 제거
-    const dedup = Array.from(
-      new Map(all.map((r) => [r?.run_id ?? r?.id ?? r?.name, r])).values(),
-    );
-
-    // (선택) 프로젝트 필터가 필요하면 여기에서 필터
-    // const filtered = dedup.filter(r => String(r?.projectId ?? "") === String(currentProjectId.value));
+    // Map → Record (중복 제거)
+    const dict: Record<string, any> = {};
+    for (let i = 0; i < allRuns.length; i++) {
+      const run = allRuns[i];
+      const key = run?.run_id ?? run?.id ?? run?.name;
+      if (key) dict[String(key)] = run;
+    }
+    const deduped: any[] = Object.values(dict);
 
-    const latest = dedup
-      .sort(
-        (a, b) =>
-          new Date(b?.created_at ?? 0).getTime() -
-          new Date(a?.created_at ?? 0).getTime(),
-      )
+    recentRuns.value = deduped
+      .sort((a, b) => toEpoch(b?.created_at) - toEpoch(a?.created_at))
       .slice(0, recentLimit)
-      .map((r) => ({
-        name: r?.display_name ?? r?.name ?? r?.run_id ?? "(no name)",
-        status: toUiStatus(r?.state),
-        time: fmtYmdHm(r?.created_at),
+      .map<RecentRunRow>((run) => ({
+        name: run?.display_name ?? run?.name ?? run?.run_id ?? "(no name)",
+        status: mapRawStateToUiStatus(run?.state),
+        time: fmtYmdHm(run?.created_at),
       }));
-
-    recentRuns.value = latest;
-  } catch (e) {
-    console.error("[Home] loadRecentRuns error:", e);
+  } catch (err) {
+    console.error("[Dashboard] loadRecentRuns error:", err);
     recentRuns.value = [];
   } finally {
     runsLoading.value = false;
   }
 }
 
+async function loadWorkflows() {
+  try {
+    const payload = {
+      page: 0,
+      size: 1000,
+      projectId: currentProjectId.value,
+      sortField: "id",
+      sortDirection: "DESC",
+    };
+    const res = await WorkflowService.search(payload);
+    const list: any[] = Array.isArray(res?.data?.content)
+      ? res.data.content
+      : Array.isArray(res?.data)
+        ? res.data
+        : [];
+
+    const filtered = list.filter(
+      (wf: any) =>
+        String(
+          wf?.projectId ?? wf?.prjId ?? wf?.project_id ?? wf?.project?.id ?? "",
+        ) === String(currentProjectId.value),
+    );
+
+    workflows.value = filtered.map((wf: any) => ({
+      id: wf.id,
+      name: wf.name,
+      modDt: wf.modDt,
+    }));
+    renderWorkflowStatusPie();
+  } catch (err) {
+    console.error("[Dashboard] loadWorkflows error:", err);
+    workflows.value = [];
+    renderWorkflowStatusPie();
+  }
+}
+
+async function loadDatasetActivity() {
+  dsLoading.value = true;
+  try {
+    const dgRes = await DataGroupService.search({
+      projectId: currentProjectId.value,
+      page: 0,
+      size: 200,
+      sortField: "id",
+      sortDirection: "DESC",
+    } as any);
+
+    groupSummaries.value = (dgRes?.data?.content ?? dgRes?.data ?? [])
+      .map((g: any) => ({
+        id: Number(g?.id),
+        name: String(g?.dsNm ?? g?.name ?? `(Group ${g?.id})`),
+      }))
+      .filter((g) => Number.isFinite(g.id));
+
+    datasetsByGroup.value = {};
+    groupLoaded.value = {};
+    groupLoading.value = {};
+  } catch (err) {
+    console.error("[Dashboard] loadDatasetActivity error:", err);
+    groupSummaries.value = [];
+  } finally {
+    dsLoading.value = false;
+  }
+}
+
 async function loadKubeflowRuns() {
   kfRunsLoading.value = true;
   try {
     const res = await KubeflowRunService.getAll();
-    // res.data 가 배열이라고 가정 (Swagger 예시 기반)
-    const arr: any[] = Array.isArray(res?.data) ? res.data : [];
+    const list: any[] = Array.isArray(res?.data) ? res.data : [];
 
-    kfRuns.value = arr
-      .map((r) => {
-        const state = String(r?.state ?? r?.status ?? "PENDING");
+    kubeflowRuns.value = list
+      .map<KubeflowRunRow>((row: any) => {
+        const state = String(row?.state ?? row?.status ?? "PENDING");
         return {
-          runId: r?.runId ?? r?.run_id ?? r?.id ?? "",
+          runId: row?.runId ?? row?.run_id ?? row?.id ?? "",
           name:
-            r?.displayName ??
-            r?.display_name ??
-            r?.name ??
-            r?.run_id ??
+            row?.displayName ??
+            row?.display_name ??
+            row?.name ??
+            row?.run_id ??
             "(no name)",
           state,
-          status: toUiStatus2(state),
-          createdAt: r?.createdAt ?? r?.created_at,
-          scheduledAt: r?.scheduledAt ?? r?.scheduled_at,
-          finishedAt: r?.finishedAt ?? r?.finished_at,
+          uiStatus: mapRawStateToUiStatus(state),
+          createdAt: row?.createdAt ?? row?.created_at,
+          scheduledAt: row?.scheduledAt ?? row?.scheduled_at,
+          finishedAt: row?.finishedAt ?? row?.finished_at,
           experimentId:
-            r?.experimentId ?? r?.experiment_id ?? r?.experimentName,
-          pipelineName: r?.pipelineName ?? r?.pipeline_name ?? r?.pipeline_id,
-          serviceAccount: r?.serviceAccount ?? r?.service_account,
-        } as KfRun;
+            row?.experimentId ?? row?.experiment_id ?? row?.experimentName,
+          pipelineName:
+            row?.pipelineName ?? row?.pipeline_name ?? row?.pipeline_id,
+          serviceAccount: row?.serviceAccount ?? row?.service_account,
+        };
       })
-      .sort(
-        (a, b) =>
-          new Date(b.createdAt || 0).getTime() -
-          new Date(a.createdAt || 0).getTime(),
-      )
-      .slice(0, 20); // 필요 개수만 표시
-  } catch (e) {
-    console.error("[Kubeflow] loadKubeflowRuns error:", e);
-    kfRuns.value = [];
+      .sort((a, b) => toEpoch(b.createdAt) - toEpoch(a.createdAt))
+      .slice(0, 20);
+  } catch (err) {
+    console.error("[Dashboard] loadKubeflowRuns error:", err);
+    kubeflowRuns.value = [];
   } finally {
     kfRunsLoading.value = false;
+    renderKubeflowPie();
   }
 }
 
-function renderStatusPie() {
-  if (!pieChartRef.value) return;
-
-  // 1) 상태별 고정 팔레트
-  const COLOR = {
-    SUCCEEDED: "#2ecc71",
-    FAILED: "#e74c3c",
-    RUNNING: "#3498db",
-    PENDING: "#f1c40f",
-    CREATED: "#3498db",
-    SKIPPED: "#95a5a6",
-    UNKNOWN: "#7f8c8d",
-    NODATA: "#4b4f55",
-  };
-
-  // 2) 집계
-  const counts = new Map<string, number>();
-  for (const wf of workflows.value ?? []) {
-    const raw = (wf?.kubeflowStatus ?? wf?.kubeflow_status ?? "UNKNOWN") + "";
-    const status = raw.toUpperCase().trim();
-    counts.set(status, (counts.get(status) || 0) + 1);
+/* Map → Record 로 변경 (반복자 제거) */
+function renderWorkflowStatusPie() {
+  const container = workflowStatusPieRef.value;
+  if (!container) return;
+
+  const counts: Record<string, number> = {};
+  for (let i = 0; i < workflows.value.length; i++) {
+    const wfRow = workflows.value[i] as any;
+    const raw = wfRow?.kubeflowStatus ?? wfRow?.kubeflow_status ?? "UNKNOWN";
+    const key = String(raw).toUpperCase().trim();
+    counts[key] = (counts[key] || 0) + 1;
   }
 
-  // 3) No Data 전용 처리 (중립 색 + 중앙 텍스트 / 범례 숨김)
-  if (counts.size === 0) {
+  const keys = Object.keys(counts);
+  if (keys.length === 0) {
     const trace: Partial<Plotly.PlotData> = {
       values: [1],
       labels: ["No Data"],
@@ -277,7 +437,6 @@ function renderStatusPie() {
       marker: { colors: [COLOR.NODATA] },
       hoverinfo: "skip",
     };
-
     const layout: Partial<Plotly.Layout> = {
       paper_bgcolor: "#1e1e1e",
       plot_bgcolor: "#1e1e1e",
@@ -287,26 +446,24 @@ function renderStatusPie() {
         {
           text: "<b>No Data</b>",
           showarrow: false,
-          font: { color: "#ffffff", size: 16 },
+          font: { color: "#fff", size: 16 },
         },
       ],
     };
-
-    Plotly.react(pieChartRef.value, [trace], layout, { displayModeBar: false });
+    Plotly.react(container, [trace], layout, { displayModeBar: false });
     return;
   }
 
-  // 4) 데이터가 있을 때: 상태별 색 지정
-  const labels = Array.from(counts.keys());
-  const values = Array.from(counts.values());
+  const labels = keys;
+  const values = labels.map((k) => counts[k]);
   const colors = labels.map((s) => {
-    if (s.includes("SUCCEED")) return COLOR.SUCCEEDED;
-    if (s.includes("FAIL")) return COLOR.FAILED;
-    if (s.includes("RUN")) return COLOR.RUNNING;
-    if (s.includes("CREATE")) return COLOR.CREATED;
-    if (s.includes("PEND")) return COLOR.PENDING;
-    if (s.includes("SKIP")) return COLOR.SKIPPED;
-    return COLOR.UNKNOWN;
+    if (s.includes("SUCCEED")) return COLOR.SUCCESS;
+    if (s.includes("FAIL")) return COLOR.ERROR;
+    if (s.includes("RUN")) return COLOR.INFO;
+    if (s.includes("CREATE")) return COLOR.INFO;
+    if (s.includes("PEND")) return COLOR.WARNING;
+    if (s.includes("SKIP")) return COLOR.SECONDARY;
+    return COLOR.MUTED;
   });
 
   const trace: Partial<Plotly.PlotData> = {
@@ -319,7 +476,6 @@ function renderStatusPie() {
     marker: { colors },
     hovertemplate: "%{label}: %{percent}<extra></extra>",
   };
-
   const layout: Partial<Plotly.Layout> = {
     paper_bgcolor: "#1e1e1e",
     plot_bgcolor: "#1e1e1e",
@@ -333,159 +489,129 @@ function renderStatusPie() {
     },
     margin: { t: 20, b: 40, l: 0, r: 0 },
   };
-
-  Plotly.react(pieChartRef.value, [trace], layout, { displayModeBar: false });
+  Plotly.react(container, [trace], layout, { displayModeBar: false });
 }
 
-const datasetUpdates = [
-  { name: "DrivingLog2025", count: 7 },
-  { name: "CameraFrames", count: 3 },
-  { name: "LidarScans", count: 2 },
-  { name: "Traffic_log", count: 2 },
-  { name: "Traffic_log2", count: 2 },
-];
-
-const tableHeader = [
-  { label: "Model Name", width: "10%", style: "word-break: keep-all;" },
-  { label: "Version", width: "10%", style: "word-break: keep-all;" },
-  { label: "Deployed At", width: "10%", style: "word-break: keep-all;" },
-  { label: "Status", width: "10%", style: "word-break: keep-all;" },
-  { label: "Download", width: "10%", style: "word-break: keep-all;" },
-];
-
-const data = ref({
-  results: [
-    {
-      deviceKey: "1",
-      name: "LaneDetectionModel",
-      version: "v1.2.0",
-      time: "2025-05-13 14:32",
-      status: "Active",
-      download: "Finished",
-    },
-    {
-      deviceKey: "2",
-      name: "TrafficSignClassifier",
-      version: "v0.9.3",
-      time: "2025-05-13 09:00",
-      status: "Pending",
-      download: "-",
-    },
-    {
-      deviceKey: "3",
-      name: "PathPlannerModel",
-      version: "v2.0.1",
-      time: "2025-05-12 17:44",
-      status: "Failed",
-      download: "Failed",
-    },
-  ],
-  allSelected: false,
-  selected: [],
-});
+function renderKubeflowPie() {
+  const plotEl = kubeflowPieRef.value;
+  const wrapEl = kubeflowPieWrapRef.value || plotEl;
+  if (!plotEl || !wrapEl) return;
+
+  const succeeded = kubeflowCounts.value.SUCCEEDED || 0;
+  const failed = kubeflowCounts.value.FAILED || 0;
+  const total = succeeded + failed;
+
+  const hasData = total > 0;
+  const trace: Partial<Plotly.PlotData> = hasData
+    ? {
+        type: "pie",
+        labels: ["SUCCEEDED", "FAILED"],
+        values: [succeeded, failed],
+        textinfo: "label+value",
+        textfont: { color: "#fff", size: 13 },
+        marker: { colors: [COLOR.SUCCESS, COLOR.ERROR] },
+        hovertemplate: "%{label}: %{value} (%{percent})<extra></extra>",
+      }
+    : {
+        type: "pie",
+        labels: ["No Data"],
+        values: [1],
+        textinfo: "none",
+        marker: { colors: [COLOR.NODATA] },
+        hoverinfo: "skip",
+      };
+
+  const width = wrapEl.clientWidth || 300;
+  const height = wrapEl.clientHeight || 220;
+  const layout: Partial<Plotly.Layout> = {
+    width,
+    height,
+    autosize: false,
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    showlegend: false,
+    margin: { t: 8, b: 8, l: 8, r: 8 },
+  };
+
+  Plotly.react(plotEl, [trace], layout, {
+    displayModeBar: false,
+    responsive: true,
+  });
+
+  (plotEl as any).on?.("plotly_click", (ev: any) => {
+    kubeflowDetailsExplicitOpen.value = true;
+    const label = (ev?.points?.[0]?.label ?? "").toUpperCase();
+    if (label === "SUCCEEDED" || label === "FAILED") {
+      kubeflowStatusFilter.value =
+        kubeflowStatusFilter.value === label ? null : (label as KfFilter);
+    }
+  });
+
+  (plotEl as any).on?.("plotly_doubleclick", () => {
+    kubeflowStatusFilter.value = null;
+    kubeflowDetailsExplicitOpen.value = false;
+    return false;
+  });
+
+  if (!kubeflowResizeObserver) {
+    kubeflowResizeObserver = new ResizeObserver(() => {
+      if (kubeflowPieRef.value) Plotly.Plots.resize(kubeflowPieRef.value);
+    });
+    kubeflowResizeObserver.observe(wrapEl);
+    window.addEventListener("orientationchange", () => {
+      if (kubeflowPieRef.value) Plotly.Plots.resize(kubeflowPieRef.value);
+    });
+  }
+}
 
-const handleRefresh = async () => {
+async function handleRefresh() {
   if (isRefreshing.value) return;
   try {
     isRefreshing.value = true;
-
     await Promise.all([
       loadRecentRuns(),
       (async () => {
         await loadWorkflows();
-        renderStatusPie();
+        renderWorkflowStatusPie();
       })(),
       loadDatasetActivity(),
       loadKubeflowRuns(),
     ]);
-  } catch (e) {
-    console.error("[Home] refresh failed:", e);
+  } catch (err) {
+    console.error("[Dashboard] refresh failed:", err);
   } finally {
     isRefreshing.value = false;
   }
-};
-
-const getSelectedAllData = () => {
-  data.value.selected = data.value.allSelected
-    ? data.value.results.map(({ deviceKey }) => ({ deviceKey }))
-    : [];
-};
-
-const getLatestTimestamp = (wf: any): string => wf.modDt;
-
-// "YYYY-MM-DD HH:mm" 포맷
-const formatToYmdHm = (isoString: string): string => {
-  if (!isoString) return "-";
-  const d = new Date(isoString);
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
-};
-
-const recentWorkflowList = computed(() => {
-  return (workflows.value ?? [])
-    .map((wf: any) => ({
-      id: wf.id,
-      title: wf.name,
-      timestamp: getLatestTimestamp(wf),
-    }))
-    .filter((item) => item.title && item.timestamp)
-    .sort(
-      (a, b) =>
-        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
-    )
-    .slice(0, recentLimit);
-});
-
-// ---- 데이터 로드 & 차트 갱신 ----
-async function loadWorkflows() {
-  try {
-    const payload = {
-      page: 0,
-      size: 1000,
-      projectId: currentProjectId.value,
-      sortField: "id",
-      sortDirection: "DESC",
-    };
-
-    const res = await WorkflowService.search(payload);
-    const raw = Array.isArray(res?.data?.content)
-      ? res.data.content
-      : Array.isArray(res?.data)
-        ? res.data
-        : [];
-
-    workflows.value = raw.filter(
-      (wf: any) =>
-        String(
-          wf?.projectId ?? wf?.prjId ?? wf?.project_id ?? wf?.project?.id ?? "",
-        ) === String(currentProjectId.value),
-    );
-
-    renderStatusPie();
-  } catch (err) {
-    console.error("GET /api/workflows failed:", err);
-    workflows.value = [];
-    renderStatusPie();
-  }
 }
 
 onMounted(async () => {
-  renderStatusPie();
+  renderWorkflowStatusPie();
   await loadRecentRuns();
   await loadWorkflows();
   await loadDatasetActivity();
   await loadKubeflowRuns();
 });
 
-// 프로젝트 변경 시 재조회
+onUnmounted(() => {
+  if (kubeflowResizeObserver && kubeflowPieWrapRef.value) {
+    kubeflowResizeObserver.unobserve(kubeflowPieWrapRef.value);
+  }
+  kubeflowResizeObserver = null;
+});
+
 watch(currentProjectId, () => loadWorkflows());
-loadKubeflowRuns();
+watch(kubeflowRuns, () => renderKubeflowPie());
+watch(showKubeflowDetails, async () => {
+  await nextTick();
+  renderKubeflowPie();
+});
 </script>
 
 <template>
   <v-container fluid>
+    <!-- Header -->
     <div class="d-flex justify-space-between align-center mb-6">
-      <h2 class="text-h6 font-weight-bold">배터리 상태 예측 모델 프로젝트</h2>
+      <h2 class="text-h6 font-weight-bold">{{ currentProjectName }}</h2>
       <v-btn
         color="primary"
         prepend-icon="mdi-refresh"
@@ -497,7 +623,9 @@ loadKubeflowRuns();
       </v-btn>
     </div>
 
+    <!-- Top: Recent Runs / Workflows -->
     <v-row>
+      <!-- Recent Run -->
       <v-col cols="12" md="6">
         <v-card class="pa-0" style="min-height: 360px; max-height: 360px">
           <div style="padding: 16px; border-bottom: 1px solid #ccc">
@@ -512,72 +640,48 @@ loadKubeflowRuns();
               v-for="i in 4"
               :key="i"
             />
-
             <v-list v-else density="comfortable">
               <v-list-item
-                v-for="(run, idx) in recentRuns"
+                v-for="(runRow, idx) in recentRuns"
                 :key="idx"
                 class="py-2"
               >
                 <div class="d-flex align-center justify-space-between w-100">
+                  <!-- left: icon + status -->
                   <div class="d-flex align-center ga-2">
                     <v-avatar
                       size="28"
-                      :color="
-                        run.status === 'success'
-                          ? 'green-lighten-1'
-                          : run.status === 'failed'
-                            ? 'red-lighten-1'
-                            : run.status === 'running'
-                              ? 'blue-lighten-1'
-                              : 'grey-darken-1'
-                      "
+                      :color="avatarColorByUiStatus(runRow.status)"
                     >
                       <v-icon size="20" color="white">
-                        {{
-                          run.status === "success"
-                            ? "mdi-check"
-                            : run.status === "failed"
-                              ? "mdi-close"
-                              : run.status === "running"
-                                ? "mdi-progress-clock"
-                                : "mdi-clock-outline"
-                        }}
+                        {{ avatarIconByUiStatus(runRow.status) }}
                       </v-icon>
                     </v-avatar>
                     <v-chip
                       size="small"
-                      :color="
-                        run.status === 'success'
-                          ? 'success'
-                          : run.status === 'failed'
-                            ? 'error'
-                            : run.status === 'running'
-                              ? 'info'
-                              : 'grey'
-                      "
+                      :color="colorChipByUiStatus(runRow.status)"
                       variant="tonal"
                       class="text-uppercase"
                     >
-                      {{ run.status }}
+                      {{ STATUS_LABEL[runRow.status] }}
                     </v-chip>
                   </div>
 
-                  <!-- 오른쪽: 이름/시간(오른쪽 정렬) -->
+                  <!-- right: name & time -->
                   <div
                     class="d-flex flex-column text-right"
                     style="min-width: 220px"
                   >
                     <span class="font-weight-medium text-body-2 truncate">
-                      {{ run.name }}
+                      {{ runRow.name }}
                     </span>
                     <span class="text-caption text-grey-darken-1">
-                      {{ run.time }}
+                      {{ runRow.time }}
                     </span>
                   </div>
                 </div>
               </v-list-item>
-              <!-- 빈 상태 -->
+
               <v-list-item v-if="!runsLoading && recentRuns.length === 0">
                 <template #title>
                   <div class="text-caption text-grey">
@@ -590,6 +694,7 @@ loadKubeflowRuns();
         </v-card>
       </v-col>
 
+      <!-- Workflows -->
       <v-col cols="12" md="6">
         <v-card class="pa-0" style="min-height: 360px; max-height: 360px">
           <div style="padding: 16px; border-bottom: 1px solid #ccc">
@@ -597,22 +702,28 @@ loadKubeflowRuns();
               Recently Registered Workflow
             </h3>
           </div>
+
           <div style="overflow-y: auto; max-height: 300px; padding: 8px 16px">
             <v-list density="comfortable" nav>
-              <v-list-item v-for="item in recentWorkflowList" :key="item.id">
+              <v-list-item
+                v-for="wfRow in workflows
+                  .slice(0, 10)
+                  .sort((a, b) => toEpoch(b.modDt) - toEpoch(a.modDt))"
+                :key="wfRow.id"
+              >
                 <template #title>
                   <div class="d-flex justify-space-between align-center w-100">
                     <span class="text-body-2 font-weight-medium">{{
-                      item.title
+                      wfRow.name
+                    }}</span>
+                    <span class="text-caption text-grey-lighten-1">{{
+                      fmtYmdHm(wfRow.modDt)
                     }}</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">
+              <v-list-item v-if="workflows.length === 0">
                 <template #title>
                   <div class="text-caption text-grey">
                     최근 등록/수정된 워크플로우가 없습니다.
@@ -625,163 +736,260 @@ loadKubeflowRuns();
       </v-col>
     </v-row>
 
+    <!-- Middle: Kubeflow / Dataset -->
     <v-row class="mt-4">
+      <!-- Kubeflow -->
       <v-col cols="12" md="6">
         <v-card class="pa-0" style="min-height: 360px; max-height: 360px">
-          <div style="padding: 16px; border-bottom: 1px solid #ccc">
-            <h3 class="text-subtitle-1 font-weight-bold mb-0">Kubeflow Runs</h3>
+          <div style="padding: 16px; border-bottom: 1px solid #3a3a3a">
+            <div class="d-flex align-center justify-space-between w-100">
+              <h3 class="text-subtitle-1 font-weight-bold mb-0">
+                Kubeflow Runs
+              </h3>
+              <div class="d-flex align-center ga-2">
+                <v-chip size="small" variant="tonal" color="grey"
+                  >Total {{ kubeflowStats.total }}</v-chip
+                >
+                <v-chip size="small" variant="tonal" color="success"
+                  >Succeeded {{ kubeflowStats.succeeded }}</v-chip
+                >
+                <v-chip size="small" variant="tonal" color="error"
+                  >Failed {{ kubeflowStats.failed }}</v-chip
+                >
+
+                <v-chip
+                  v-if="kubeflowStatusFilter"
+                  size="small"
+                  color="secondary"
+                  variant="tonal"
+                  closable
+                  @click:close="
+                    kubeflowStatusFilter = null;
+                    kubeflowDetailsExplicitOpen = false;
+                  "
+                >
+                  Filter: {{ kubeflowStatusFilter }}
+                </v-chip>
+              </div>
+            </div>
           </div>
 
-          <div style="overflow-y: auto; padding: 8px 16px; max-height: 300px">
-            <!-- 로딩 -->
-            <v-skeleton-loader
-              v-if="kfRunsLoading"
-              type="list-item-two-line"
-              class="mb-2"
-              v-for="i in 6"
-              :key="i"
-            />
+          <div style="padding: 8px 12px; height: 260px">
+            <!-- Only Chart -->
+            <div
+              v-if="!showKubeflowDetails"
+              ref="kubeflowPieWrapRef"
+              style="
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              "
+            >
+              <div ref="kubeflowPieRef" style="width: 100%; height: 100%"></div>
+            </div>
 
-            <!-- 리스트 -->
-            <v-list v-else density="comfortable">
-              <v-list-item
-                v-for="(r, idx) in kfRuns"
-                :key="r.runId || idx"
-                class="py-2"
-              >
-                <div class="d-flex align-center justify-space-between w-100">
-                  <!-- 왼쪽: 상태칩 + 이름 -->
-                  <div class="d-flex align-center ga-2">
-                    <v-chip
-                      size="small"
-                      :color="
-                        r.status === 'success'
-                          ? 'success'
-                          : r.status === 'failed'
-                            ? 'error'
-                            : r.status === 'running'
-                              ? 'info'
-                              : 'grey'
-                      "
-                      variant="tonal"
-                      class="text-uppercase"
-                    >
-                      {{ r.state }}
-                    </v-chip>
-                    <div class="d-flex flex-column">
-                      <span
-                        class="text-body-2 font-weight-medium truncate"
-                        style="max-width: 260px"
-                      >
-                        {{ r.name }}
-                      </span>
-                      <span class="text-caption text-grey-darken-1">
-                        {{ fmtYmdHm(r.createdAt) }}
-                        <span v-if="r.finishedAt">
-                          → {{ fmtYmdHm(r.finishedAt) }}</span
-                        >
-                      </span>
-                    </div>
-                  </div>
+            <!-- Split 50/50 (details open) -->
+            <v-row v-else no-gutters class="h-100">
+              <v-col cols="6" class="h-100">
+                <div ref="kubeflowPieWrapRef" style="width: 100%; height: 100%">
+                  <div
+                    ref="kubeflowPieRef"
+                    style="width: 100%; height: 100%"
+                  ></div>
+                </div>
+              </v-col>
 
-                  <!-- 오른쪽: 보조 정보 -->
-                  <div class="text-right" style="min-width: 200px">
-                    <div class="text-caption">
-                      <strong>Experiment</strong>:
-                      <span class="text-medium-emphasis">{{
-                        r.experimentId || "-"
-                      }}</span>
-                    </div>
-                    <div class="text-caption">
-                      <strong>Pipeline</strong>:
-                      <span class="text-medium-emphasis">{{
-                        r.pipelineName || "-"
-                      }}</span>
-                    </div>
-                  </div>
+              <v-col cols="6" class="h-100">
+                <div
+                  class="d-flex align-center ga-2"
+                  style="margin-bottom: 8px"
+                >
+                  <v-btn
+                    v-if="kubeflowStatusFilter"
+                    size="small"
+                    variant="text"
+                    @click="kubeflowStatusFilter = null"
+                  >
+                    Clear
+                  </v-btn>
                 </div>
-              </v-list-item>
 
-              <v-list-item v-if="!kfRunsLoading && kfRuns.length === 0">
-                <template #title>
-                  <div class="text-caption text-grey">
-                    표시할 Kubeflow Run 데이터가 없습니다.
-                  </div>
-                </template>
-              </v-list-item>
-            </v-list>
+                <div style="height: calc(100% - 36px); overflow: auto">
+                  <v-list density="comfortable">
+                    <v-list-item
+                      v-for="kfRunRow in kubeflowRunsForList"
+                      :key="kfRunRow.runId"
+                      class="py-2"
+                    >
+                      <div
+                        class="d-flex align-center justify-space-between w-100"
+                      >
+                        <div class="d-flex align-center ga-2">
+                          <v-chip
+                            size="small"
+                            :color="
+                              (kfRunRow.state || '')
+                                .toUpperCase()
+                                .includes('SUCCEED')
+                                ? 'success'
+                                : 'error'
+                            "
+                            variant="tonal"
+                          >
+                            {{
+                              (kfRunRow.state || "")
+                                .toUpperCase()
+                                .includes("SUCCEED")
+                                ? "Succeeded"
+                                : "Failed"
+                            }}
+                          </v-chip>
+                          <span
+                            class="text-body-2 font-weight-medium truncate"
+                            style="max-width: 220px"
+                          >
+                            {{ kfRunRow.name }}
+                          </span>
+                        </div>
+                        <span class="text-caption text-grey-darken-1">
+                          {{ fmtYmdHm(kfRunRow.createdAt) }}
+                        </span>
+                      </div>
+                    </v-list-item>
+
+                    <v-list-item v-if="kubeflowRunsForList.length === 0">
+                      <template #title>
+                        <div class="text-caption text-grey">
+                          표시할 Run이 없습니다.
+                        </div>
+                      </template>
+                    </v-list-item>
+                  </v-list>
+                </div>
+              </v-col>
+            </v-row>
           </div>
         </v-card>
       </v-col>
+
+      <!-- Dataset (fixed height, inner scroll, compact) -->
       <v-col cols="12" md="6">
-        <v-card class="pa-0" style="min-height: 360px; max-height: 360px">
-          <div style="padding: 16px; border-bottom: 1px solid #ccc">
-            <div class="d-flex align-center justify-space-between w-100">
-              <h3 class="text-subtitle-1 font-weight-bold mb-0">
-                Dataset Update Activity
-              </h3>
-            </div>
+        <v-card class="pa-0 d-flex flex-column" :height="360">
+          <!-- Header (고정 높이) -->
+          <div
+            class="d-flex align-center justify-space-between w-100 pa-4 flex-shrink-0"
+          >
+            <h3 class="text-subtitle-1 font-weight-bold mb-0">
+              Dataset Update Activity
+            </h3>
           </div>
+          <v-divider />
 
-          <div style="overflow-y: auto; max-height: 300px; padding: 8px 16px">
+          <!-- Body (남은 영역만 스크롤) -->
+          <v-sheet class="pa-3 flex-grow-1 overflow-auto">
             <v-skeleton-loader
               v-if="dsLoading"
-              type="list-item-three-line"
+              type="list-item-two-line"
               class="mb-2"
-              v-for="i in 5"
+              v-for="i in 4"
               :key="i"
             />
 
-            <v-list v-else density="comfortable">
-              <v-list-item v-for="it in dsItems" :key="it.name" class="py-2">
-                <div class="d-flex justify-space-between align-center w-100">
-                  <span class="text-body-2 font-weight-medium"
-                    >{{ it.name }}
-                    <v-chip
-                      size="small"
-                      color="primary"
-                      variant="tonal"
-                      class="py-2"
-                    >
-                      v{{ it.version }}
-                    </v-chip></span
-                  >
-
-                  <!-- 최신 버전 칩 -->
+            <v-expansion-panels v-else multiple variant="accordion">
+              <v-expansion-panel
+                v-for="g in groupSummaries"
+                :key="g.id"
+                @group:selected="
+                  async (e: any) => {
+                    if (e.value) await loadDatasetsForGroup(g.id, g.name);
+                  }
+                "
+              >
+                <v-expansion-panel-title density="compact">
                   <div class="d-flex align-center ga-2">
-                    <span class="text-caption text-medium-emphasis">
-                      Last: {{ fmtYmd(it.last) }}
-                    </span>
+                    <span class="font-weight-bold">{{ g.name }}</span>
+                    <v-chip size="x-small" variant="tonal" color="secondary">
+                      {{ (datasetsByGroup[g.id] || []).length }} datasets
+                    </v-chip>
+                  </div>
+                </v-expansion-panel-title>
+
+                <v-expansion-panel-text density="compact" class="py-1">
+                  <div v-if="groupLoading[g.id]" class="pa-2">
+                    <v-skeleton-loader
+                      type="list-item-three-line"
+                      v-for="i in 2"
+                      :key="i"
+                      class="mb-2"
+                    />
                   </div>
-                </div>
 
-                <v-progress-linear
-                  :model-value="it.pct"
-                  height="8"
-                  color="primary"
-                  class="mt-1"
-                />
-                <div class="text-caption text-grey mt-1">
-                  {{ it.version }} Update{{ it.version > 1 ? "s" : "" }}
-                  <span v-if="it.rows && it.rows !== it.version">
-                    • {{ it.rows }} Rows</span
+                  <v-list
+                    v-else-if="(datasetsByGroup[g.id] || []).length > 0"
+                    density="compact"
                   >
-                </div>
-              </v-list-item>
+                    <v-list-item
+                      v-for="row in datasetsByGroup[g.id]"
+                      :key="g.id + '-' + row.name"
+                      density="compact"
+                      class="py-0"
+                    >
+                      <div
+                        class="d-flex justify-space-between align-center w-100"
+                      >
+                        <span
+                          class="text-body-2 font-weight-medium d-flex align-center ga-2"
+                        >
+                          <span
+                            class="text-truncate"
+                            style="max-width: 260px"
+                            >{{ row.name }}</span
+                          >
+                          <v-chip size="x-small" color="primary" variant="tonal"
+                            >v{{ row.version }}</v-chip
+                          >
+                        </span>
+                        <span class="text-caption text-medium-emphasis"
+                          >Last: {{ fmtLocalDateTime(row.last) }}</span
+                        >
+                      </div>
+
+                      <v-progress-linear
+                        :model-value="row.pct"
+                        height="4"
+                        color="primary"
+                        class="mt-1"
+                      />
+                      <div class="text-caption text-grey mt-1">
+                        {{ row.version }} Update{{ row.version > 1 ? "s" : "" }}
+                        <span v-if="row.rows && row.rows !== row.version">
+                          • {{ row.rows }} Rows</span
+                        >
+                      </div>
+                    </v-list-item>
+                  </v-list>
 
-              <v-list-item v-if="!dsLoading && dsItems.length === 0">
-                <template #title>
-                  <div class="text-caption text-grey">
-                    표시할 데이터셋이 없습니다.
+                  <div v-else class="text-caption text-grey px-2 py-1">
+                    이 그룹에 표시할 데이터셋이 없습니다.
                   </div>
-                </template>
-              </v-list-item>
-            </v-list>
-          </div>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+
+              <div
+                v-if="!dsLoading && groupSummaries.length === 0"
+                class="text-caption text-grey px-2 py-1"
+              >
+                표시할 데이터그룹이 없습니다.
+              </div>
+            </v-expansion-panels>
+          </v-sheet>
         </v-card>
       </v-col>
     </v-row>
 
+    <!-- Bottom: Model Deployment (demo) -->
     <v-card class="rounded-lg pa-4 mt-4">
       <div class="d-flex justify-space-between align-center mt-8 mb-2 px-2">
         <div class="d-flex align-center">
@@ -796,56 +1004,62 @@ loadKubeflowRuns();
           Go to Model Deploy
         </v-btn>
       </div>
+
       <v-col cols="12">
         <v-sheet>
           <v-table density="comfortable" fixed-header height="625">
             <colgroup>
               <col style="width: 5%" />
-              <col
-                v-for="(item, i) in tableHeader"
-                :key="i"
-                :style="`width:${item.width}`"
-              />
+              <col style="width: 10%" />
+              <col style="width: 10%" />
+              <col style="width: 10%" />
+              <col style="width: 10%" />
+              <col style="width: 10%" />
             </colgroup>
             <thead>
               <tr>
-                <th>
-                  <v-checkbox
-                    v-model="data.allSelected"
-                    style="min-width: 36px"
-                    :indeterminate="data.allSelected === true"
-                    hide-details
-                    @change="getSelectedAllData"
-                  ></v-checkbox>
+                <th></th>
+                <th class="font-weight-bold" style="word-break: keep-all">
+                  Model Name
                 </th>
-                <th
-                  v-for="(item, i) in tableHeader"
-                  :key="i"
-                  class="text-center font-weight-bold"
-                  :style="item.style"
-                >
-                  {{ item.label }}
+                <th class="font-weight-bold" style="word-break: keep-all">
+                  Version
+                </th>
+                <th class="font-weight-bold" style="word-break: keep-all">
+                  Deployed At
+                </th>
+                <th class="font-weight-bold" style="word-break: keep-all">
+                  Status
+                </th>
+                <th class="font-weight-bold" style="word-break: keep-all">
+                  Download
                 </th>
               </tr>
             </thead>
             <tbody class="text-body-2">
-              <tr
-                v-for="(item, i) in data.results"
-                :key="i"
-                class="text-center"
-              >
-                <td>
-                  <v-checkbox
-                    v-model="data.selected"
-                    hide-details
-                    :value="{ deviceKey: item.deviceKey }"
-                  />
-                </td>
-                <td>{{ item.name }}</td>
-                <td>{{ item.version }}</td>
-                <td>{{ item.time }}</td>
-                <td>{{ item.status }}</td>
-                <td>{{ item.download }}</td>
+              <tr>
+                <td></td>
+                <td>LaneDetectionModel</td>
+                <td>v1.2.0</td>
+                <td>2025-05-13 14:32</td>
+                <td>Active</td>
+                <td>Finished</td>
+              </tr>
+              <tr>
+                <td></td>
+                <td>TrafficSignClassifier</td>
+                <td>v0.9.3</td>
+                <td>2025-05-13 09:00</td>
+                <td>Pending</td>
+                <td>-</td>
+              </tr>
+              <tr>
+                <td></td>
+                <td>PathPlannerModel</td>
+                <td>v2.0.1</td>
+                <td>2025-05-12 17:44</td>
+                <td>Failed</td>
+                <td>Failed</td>
               </tr>
             </tbody>
           </v-table>
diff --git a/src/components/templates/run/executions/ListComponent.vue b/src/components/templates/run/executions/ListComponent.vue
index 2342b91..cfa2f75 100644
--- a/src/components/templates/run/executions/ListComponent.vue
+++ b/src/components/templates/run/executions/ListComponent.vue
@@ -11,19 +11,11 @@ import { KubeflowRunService } from "@/components/service/management/KubeflowRunS
 import IconDownloadBtn from "@/components/atoms/button/IconDownloadBtn.vue";
 
 const store = commonStore();
+
 const openView = ref(false);
-const username = ref<string>("");
-const openCompare = ref(false);
 const execSelected = ref<any>(null);
-const selectedExperiment = ref<{
-  name: string;
-  description: string;
-  createdDate: string;
-  createdID: string;
-  deviceKey: number;
-} | null>(null);
-
-// ===== 헤더 =====
+const username = ref<string>("");
+
 const tableHeader = [
   { label: "No", width: "5%", style: "word-break: keep-all;" },
   { label: "Execution Name", width: "20%", style: "word-break: keep-all;" },
@@ -35,15 +27,13 @@ const tableHeader = [
   { label: "Registry Status", width: "10%", style: "word-break: keep-all;" },
   { label: "Action", width: "10%", style: "word-break: keep-all;" },
 ];
-// ===== 검색/페이지네이션 (데이터셋/워크플로우와 '동일') =====
-type SearchType = "전체" | "제목" | "작성자";
 
+type SearchType = "전체" | "제목" | "작성자";
 const searchOptions = [
   { label: "전체", value: "전체" as SearchType },
   { label: "제목", value: "제목" as SearchType },
   { label: "작성자", value: "작성자" as SearchType },
 ];
-
 const SEARCH_TYPE_MAP: Record<SearchType | "", "ALL" | "TITLE" | "AUTHOR"> = {
   "": "ALL",
   전체: "ALL",
@@ -57,7 +47,6 @@ const pageSizeOptions = [
   { text: "100 페이지", value: 100 },
 ];
 
-// ===== 상태 =====
 const data = ref({
   params: {
     pageNum: 1,
@@ -70,15 +59,9 @@ const data = ref({
   pageLength: 0,
   modalMode: "" as "create" | "edit" | "",
   selectedData: null as any,
-  allSelected: false,
-  selected: [] as any[],
   isCreateVisible: false,
-  isModalVisible: false,
-  isConfirmDialogVisible: false,
-  userOption: [] as any[],
 });
 
-// ===== 유틸 =====
 function readUsernameFromStorage(): string {
   try {
     const raw =
@@ -100,11 +83,7 @@ const getProjectId = (): number => {
   const v = Number(localStorage.getItem("projectId"));
   return Number.isFinite(v) ? v : 0;
 };
-const fmtDate = (v?: string) =>
-  v ? String(v).replace("T", " ").slice(0, 19) : "";
 
-// 서버 → 테이블 Row
-// 서버 Execution → 테이블 Row 변환
 const toRow = (r: any, idx: number) => {
   const fmtStart = (start?: string) => {
     if (!start) return "-";
@@ -155,7 +134,6 @@ const toRow = (r: any, idx: number) => {
     status: toUiStatus(r.state),
     duration: fmtDuration(r.createdAt, r.finishedAt),
     experiment: r.experimentId ?? "-",
-
     workflow: r.pipelineId ?? r.pipelineVersionId ?? "-",
     startTime: fmtStart(r.createdAt),
     registryStatus: r.storageState ?? "-",
@@ -164,95 +142,6 @@ const toRow = (r: any, idx: number) => {
   };
 };
 
-// async function fetchList() {
-//   const { pageNum, pageSize, searchType, searchText } = data.value.params;
-
-//   const mapped = SEARCH_TYPE_MAP[searchType] || "ALL";
-//   const keyword = (searchText || "").trim();
-//   const needLocalFilter = mapped !== "ALL" && keyword.length > 0;
-
-//   // ✅ 필터 있을 땐 크게 가져와서(예: 1000) 클라에서 필터+재페이지
-//   // ✅ 필터 없으면 서버 0-based 페이징 그대로
-//   const reqPage = needLocalFilter ? 0 : pageNum ;
-//   const reqSize = needLocalFilter ? 1000 : pageSize;
-
-//   const payload = {
-//     projectId: getProjectId(),
-//     page: reqPage, // ✅ 버그 수정: 계산한 reqPage 사용
-//     size: reqSize, // ✅ 버그 수정: 계산한 reqSize 사용
-//     keyword,
-//     searchType: mapped,
-//     sortField: "id",
-//     sortDirection: "DESC",
-//   };
-
-//   try {
-//     const res = await kubeflowRunService.search(payload as any);
-//     const result = res?.data ?? res;
-
-//     // ✅ 응답 정규화: content | data | runs | [] 모두 처리
-//     let list: any[] = Array.isArray(result)
-//       ? result
-//       : Array.isArray(result?.data)
-//         ? result.data
-//         : Array.isArray(result?.content)
-//           ? result.content
-//           : Array.isArray(result?.runs)
-//             ? result.runs
-//             : [];
-
-//     if (needLocalFilter) {
-//       const kw = keyword.toLowerCase();
-
-//       if (mapped === "TITLE") {
-//         list = list.filter((r: any) =>
-//           String(r?.displayName ?? r?.name ?? r?.runId ?? "")
-//             .toLowerCase()
-//             .includes(kw),
-//         );
-//       } else if (mapped === "AUTHOR") {
-//         list = list.filter((r: any) =>
-//           String(r?.regUserId ?? r?.createdBy ?? r?.serviceAccount ?? "")
-//             .toLowerCase()
-//             .includes(kw),
-//         );
-//       }
-
-//       // ✅ 로컬 재페이지 (페이지 안전 동기화)
-//       const total = list.length;
-//       const pages = Math.max(1, Math.ceil(total / pageSize));
-//       const safePage = Math.min(Math.max(1, pageNum), pages);
-//       const start = (safePage - 1) * pageSize;
-//       const slice = list.slice(start, start + pageSize);
-
-//       data.value.params.pageNum = safePage;
-//       data.value.results = slice.map((r, i) => toRow(r, i));
-//       data.value.totalElements = total;
-//       data.value.pageLength = pages;
-//       return;
-//     }
-
-//     // ✅ 서버 페이징 그대로 사용
-//     const totalElements =
-//       typeof result?.totalElements === "number"
-//         ? result.totalElements
-//         : list.length;
-//     const totalPages =
-//       typeof result?.totalPages === "number"
-//         ? Math.max(1, result.totalPages)
-//         : Math.max(1, Math.ceil(totalElements / pageSize));
-
-//     data.value.results = list.map((r, i) => toRow(r, i));
-//     data.value.totalElements = totalElements;
-//     data.value.pageLength = totalPages;
-//   } catch (err) {
-//     console.error("[Executions] 조회 에러:", err);
-//     data.value.results = [];
-//     data.value.totalElements = 0;
-//     data.value.pageLength = 1;
-//   }
-// }
-
 async function fetchList() {
   const { pageNum, pageSize, searchType, searchText } = data.value.params;
   const mapped = SEARCH_TYPE_MAP[searchType] || "ALL";
@@ -264,7 +153,7 @@ async function fetchList() {
     size: pageSize,
     keyword,
     searchType: mapped,
-    sortField: "id",
+    sortField: "createdAt",
     sortDirection: "DESC",
   };
 
@@ -272,29 +161,44 @@ async function fetchList() {
     const res = await KubeflowRunService.search(payload as any);
     const result = res?.data ?? res;
 
-    // 1) 응답 정규화
     let list: any[] = [];
     let totalElements: number | undefined;
     let totalPages: number | undefined;
     let isServerPaged = false;
 
-    if (Array.isArray(result)) {
-      // 루트 배열
-      list = result;
-    } else if (Array.isArray(result?.data)) {
-      // data 배열
-      list = result.data;
-    } else if (Array.isArray(result?.content)) {
-      // 서버 페이징 (Page)
+    if (Array.isArray(result)) list = result;
+    else if (Array.isArray(result?.data)) list = result.data;
+    else if (Array.isArray(result?.content)) {
       list = result.content;
       totalElements = result.totalElements;
       totalPages = result.totalPages;
       isServerPaged = true;
-    } else if (Array.isArray(result?.runs)) {
-      list = result.runs;
-    } else {
-      list = [];
-    }
+    } else if (Array.isArray(result?.runs)) list = result.runs;
+
+    // 클라 보정 정렬 (서버 미적용 대비)
+    list.sort((a, b) => {
+      const ta = new Date(
+        a.createdAt ||
+          a.lastUpdateTime ||
+          a.scheduledAt ||
+          a.finishedAt ||
+          a.startTime ||
+          0,
+      ).getTime();
+      const tb = new Date(
+        b.createdAt ||
+          b.lastUpdateTime ||
+          b.scheduledAt ||
+          b.finishedAt ||
+          b.startTime ||
+          0,
+      ).getTime();
+
+      if (tb !== ta) return tb - ta; // 최신순
+      const aid = a.id ?? a.runId ?? a.run_id ?? a.name ?? "";
+      const bid = b.id ?? b.runId ?? b.run_id ?? b.name ?? "";
+      return String(bid).localeCompare(String(aid)); // 안정화
+    });
 
     if (!isServerPaged) {
       const total = list.length;
@@ -307,8 +211,7 @@ async function fetchList() {
       data.value.totalElements = total;
       data.value.pageLength = pages;
     } else {
-      // 3) 서버 페이징 결과 그대로 적용
-      data.value.results = (list as any[]).map((r, i) => toRow(r, i));
+      data.value.results = list.map((r, i) => toRow(r, i));
       data.value.totalElements =
         typeof totalElements === "number" ? totalElements : list.length;
       data.value.pageLength =
@@ -323,7 +226,8 @@ async function fetchList() {
     data.value.pageLength = 1;
   }
 }
-// ===== 검색/페이지 조작 =====
+
+// 검색/페이지 조작
 const doSearch = () => {
   data.value.params.pageNum = 1;
   fetchList();
@@ -338,12 +242,11 @@ const changePageSize = (size: number) => {
   fetchList();
 };
 
-// 삭제/수정 버튼 등(기존 로직 유지)
-const removeData = (value?: Array<{ deviceKey: number }>) => {
-  const removeList = value ?? data.value.selected;
-  if (!removeList || removeList.length === 0) return;
+// 삭제
+const removeData = (value: Array<{ deviceKey: number }>) => {
+  const ids = (value || []).map((x) => x.deviceKey);
+  if (ids.length === 0) return;
 
-  const ids = removeList.map((x) => x.deviceKey);
   const removeOne = (id: number) =>
     ExperimentService.delete(id).then((res) => {
       if (res.status < 200 || res.status >= 300) return Promise.reject(res);
@@ -353,27 +256,20 @@ const removeData = (value?: Array<{ deviceKey: number }>) => {
     if (
       ids.length >= data.value.results.length &&
       data.value.params.pageNum > 1
-    ) {
+    )
       data.value.params.pageNum -= 1;
-    }
-
     fetchList();
-    data.value.isConfirmDialogVisible = false;
-    data.value.selected = [];
-    data.value.allSelected = false;
   };
 
-  // 단건/다건 처리
   if (ids.length === 1) {
     removeOne(ids[0])
-      .then(() => {
+      .then(() =>
         store.setSnackbarMsg({
           color: "success",
           text: "삭제되었습니다.",
           result: 200,
-        });
-        after();
-      })
+        }),
+      )
       .catch((err) => {
         console.error("삭제 실패:", err);
         store.setSnackbarMsg({
@@ -381,16 +277,17 @@ const removeData = (value?: Array<{ deviceKey: number }>) => {
           text: "삭제 실패",
           result: 500,
         });
-      });
+      })
+      .finally(after);
   } else {
     Promise.all(ids.map(removeOne))
-      .then(() => {
+      .then(() =>
         store.setSnackbarMsg({
           color: "success",
           text: "모두 삭제되었습니다.",
           result: 200,
-        });
-      })
+        }),
+      )
       .catch((err) => {
         console.error("일부 삭제 실패:", err);
         store.setSnackbarMsg({
@@ -403,29 +300,15 @@ const removeData = (value?: Array<{ deviceKey: number }>) => {
   }
 };
 
-// ===== 상세 & 생성 모달 (기존 그대로) =====
-const closeDetail = () => {
-  openView.value = false;
-  selectedExperiment.value = null;
-};
+// 상세 모달
 const openInfoModal = (item: any) => {
   execSelected.value = item;
-  console.log("[Parent] 선택된 실행:", item);
   openView.value = true;
-  openCompare.value = false;
 };
 function closeView() {
   openView.value = false;
 }
 const onSaved = () => fetchList();
-const openDetailModal = (selectedItem: any) => {
-  console.log("[Experiment/List] row clicked:", selectedItem);
-  if (!selectedItem?.deviceKey) {
-    console.warn("[Experiment/List] deviceKey 없음!", selectedItem);
-  }
-  data.value.selectedData = selectedItem;
-  openView.value = true;
-};
 const openCreateModal = () => {
   data.value.modalMode = "create";
   data.value.selectedData = {
@@ -534,12 +417,6 @@ onMounted(() => {
                 </v-responsive>
               </v-sheet>
             </v-sheet>
-
-            <!-- <v-sheet class="justify-end mb-2">
-              <v-btn color="primary" @click="openCreateModal"
-                >Create Experiment</v-btn
-              >
-            </v-sheet> -->
           </v-sheet>
 
           <!-- 목록 -->
@@ -586,10 +463,28 @@ onMounted(() => {
                         <v-icon v-else-if="item.status === 'Failed'" color="red"
                           >mdi-close-circle</v-icon
                         >
-                        <v-icon v-else color="grey">mdi-loading</v-icon>
+                        <v-progress-circular
+                          v-else-if="item.status === 'Running'"
+                          indeterminate
+                          size="18"
+                          width="2"
+                          color="info"
+                        />
+
+                        <v-icon
+                          v-else-if="item.status === 'Pending'"
+                          color="grey"
+                          class="mdi-spin"
+                        >
+                          mdi-loading
+                        </v-icon>
+
+                        <!-- 그 외 -->
+                        <v-icon v-else color="grey">mdi-help-circle</v-icon>
                       </td>
                       <td>{{ item.duration }}</td>
                       <td>{{ item.experiment }}</td>
+
                       <td>{{ item.workflow }}</td>
                       <td>{{ item.startTime }}</td>
                       <td>{{ item.registryStatus }}</td>
@@ -640,7 +535,7 @@ onMounted(() => {
   <div class="w-100" v-else>
     <ViewComponent
       v-if="openView"
-      :id="execSelected.deviceKey"
+      :experiment-info="execSelected"
       :onClose="closeView"
     />
   </div>
diff --git a/src/components/templates/run/executions/ViewComponent.vue b/src/components/templates/run/executions/ViewComponent.vue
index a65bba9..258a75d 100644
--- a/src/components/templates/run/executions/ViewComponent.vue
+++ b/src/components/templates/run/executions/ViewComponent.vue
@@ -92,11 +92,6 @@ const segWidthPct = () => 100 / (nSteps - 1);
 
 // 유틸
 const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
-
-// 콘솔로 확인
-onMounted(() => {
-  console.log("[Child] 받은 데이터:", props.experimentInfo);
-});
 </script>
 
 <template>
diff --git a/src/components/templates/run/experiment/ViewComponent.vue b/src/components/templates/run/experiment/ViewComponent.vue
index 80ab707..08080cc 100644
--- a/src/components/templates/run/experiment/ViewComponent.vue
+++ b/src/components/templates/run/experiment/ViewComponent.vue
@@ -3,7 +3,7 @@ import { ref, computed, onMounted, watch } from "vue";
 import { ExperimentService } from "@/components/service/management/ExperimentService";
 import { ProjectService } from "@/components/service/project/projectService";
 
-const props = defineProps<{ id: number | string }>();
+const props = defineProps<{ experimentInfo: any }>();
 const emit = defineEmits<{ (e: "close"): void }>();
 
 const loading = ref(false);
@@ -19,27 +19,67 @@ const experimentInfo = ref({
   mlFlowId: "-",
 });
 
-const formatIso = (s?: string) =>
-  s ? String(s).replace("T", " ").slice(0, 19) : "-";
+function formatIso(s?: string) {
+  return s ? String(s).replace("T", " ").slice(0, 19) : "-";
+}
 
-const mapToViewModel = (raw: any) => ({
-  experimentName: raw.displayName ?? raw.name ?? "-",
-  projectName: "-",
-  createdDate: formatIso(raw.lastUpdateTime),
-  createdId: raw.regUserId ?? "-",
-  description: raw.description ?? "-",
-  kubeFlowId: raw.kubeFlowId ?? "-",
-  mlFlowId: raw.mlFlowId ?? "-",
-});
+function mapToViewModel(raw: any) {
+  const hasRaw = !!raw;
+  const created = hasRaw && (raw.createdAt || raw.lastUpdateTime);
+  const createdId =
+    (hasRaw && (raw.regUserId || raw.createdBy || raw.serviceAccount)) || "-";
+
+  return {
+    experimentName: (hasRaw && (raw.displayName || raw.name)) || "-",
+    projectName: "-",
+    createdDate: formatIso(created as string | undefined),
+    createdId: createdId,
+    description: (hasRaw && raw.description) || "-",
+    kubeFlowId: (hasRaw && (raw.runId || raw.run_id || raw.id)) || "-",
+    mlFlowId: (hasRaw && raw.mlFlowId) || "-",
+  };
+}
 
 const info = computed(() => mapToViewModel(detailRaw.value || {}));
 
+function bindFromProp() {
+  const hasProp =
+    props.experimentInfo !== null && props.experimentInfo !== undefined;
+  if (!hasProp) return;
+
+  const raw =
+    hasProp && props.experimentInfo.raw
+      ? props.experimentInfo.raw
+      : props.experimentInfo;
+
+  if (!raw) return;
+
+  detailRaw.value = raw;
+
+  const vm = mapToViewModel(detailRaw.value);
+  experimentInfo.value = { ...experimentInfo.value, ...vm };
+
+  const prjName = localStorage.getItem("projectName");
+  if (prjName) {
+    experimentInfo.value.projectName = prjName;
+  }
+
+  if (
+    detailRaw.value &&
+    detailRaw.value.projectId !== undefined &&
+    detailRaw.value.projectId !== null
+  ) {
+    fetchProjectName(Number(detailRaw.value.projectId)).catch(function () {});
+  }
+}
+
 async function fetchProjectName(projectId?: number) {
-  if (!projectId && projectId !== 0) return;
+  if (projectId === undefined || projectId === null) return;
   try {
     const res = await ProjectService.fetchProjectById(projectId as number);
-    const prj = res?.data ?? res;
-    experimentInfo.value.projectName = prj?.prjNm ?? prj?.name ?? "-";
+    const prj = res && res.data ? res.data : res;
+    const name = prj && (prj.prjNm || prj.name) ? prj.prjNm || prj.name : "-";
+    experimentInfo.value.projectName = name;
   } catch (e) {
     console.warn("[Experiment/View] project fetch fail:", e);
   }
@@ -52,13 +92,20 @@ async function fetchDetail(id: number | string) {
   loading.value = true;
   try {
     const res = await ExperimentService.view(idNum as number);
-    detailRaw.value = res?.data ?? res;
+    const payload = res && res.data ? res.data : res;
+    detailRaw.value = payload;
 
     const vm = mapToViewModel(detailRaw.value);
     experimentInfo.value = { ...experimentInfo.value, ...vm };
 
-    // 프로젝트명 별도 조회
-    await fetchProjectName(detailRaw.value?.projectId);
+    const hasProjectId =
+      detailRaw.value &&
+      detailRaw.value.projectId !== undefined &&
+      detailRaw.value.projectId !== null;
+
+    if (hasProjectId) {
+      await fetchProjectName(Number(detailRaw.value.projectId));
+    }
   } catch (e) {
     console.error("[Experiment/View] fetch detail error:", e);
   } finally {
@@ -66,11 +113,25 @@ async function fetchDetail(id: number | string) {
   }
 }
 
-onMounted(() => fetchDetail(props.id));
+onMounted(function () {
+  const hasObj =
+    props.experimentInfo && typeof props.experimentInfo === "object";
+  if (hasObj) {
+    bindFromProp();
+  } else {
+    fetchDetail(props.experimentInfo as any);
+  }
+});
+
 watch(
-  () => props.id,
-  (nv) => {
-    if (nv !== undefined && nv !== null && nv !== "") fetchDetail(nv);
+  () => props.experimentInfo,
+  function (nv) {
+    if (nv === null || nv === undefined || nv === "") return;
+    if (typeof nv === "object") {
+      bindFromProp();
+    } else {
+      fetchDetail(nv as any);
+    }
   },
 );
 </script>
diff --git a/src/components/templates/stepconfig/ViewComponent.vue b/src/components/templates/stepconfig/ViewComponent.vue
index d3ecb4b..582cffd 100644
--- a/src/components/templates/stepconfig/ViewComponent.vue
+++ b/src/components/templates/stepconfig/ViewComponent.vue
@@ -74,9 +74,6 @@ async function fetchDetail(id: number | string) {
 
     // ⬇️ 여기서 이름 해석
     await resolveWorkflowName(raw);
-
-    console.log("[ViewComponent] raw:", raw);
-    console.log("[ViewComponent] info:", info.value);
   } catch (e) {
     console.error("[ViewComponent] fetch detail error:", e);
   } finally {
diff --git a/src/components/templates/trainingscript/ListComponent.vue b/src/components/templates/trainingscript/ListComponent.vue
index 77e737e..f132052 100644
--- a/src/components/templates/trainingscript/ListComponent.vue
+++ b/src/components/templates/trainingscript/ListComponent.vue
@@ -2,13 +2,18 @@
 import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
 import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
 import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { storage } from "@/utils/storage";
 import ViewComponent from "@/components/templates/trainingscript/ViewComponent.vue";
 import TrainingScriptBaseDoalog from "@/components/atoms/organisms/TrainingScriptBaseDoalog.vue";
 import { AttachmentsService } from "@/components/service/management/AttachmentsService";
 import { commonStore } from "@/stores/commonStore";
+import { useRoute, useRouter } from "vue-router";
 
+const route = useRoute();
+const router = useRouter();
+const activeRefId = ref<number | null>(null);
+const activeRefName = computed(() => String(route.query.refName ?? ""));
 const store = commonStore();
 const openView = ref(false);
 const openModify = ref(false);
@@ -68,6 +73,12 @@ const data = ref({
   userOption: [] as any[],
 });
 
+function getRefIdFromRoute(q: any): number | null {
+  const raw = q?.refId;
+  const n = Number(raw);
+  return Number.isFinite(n) && n > 0 ? n : null;
+}
+
 // 유저명
 function readUsernameFromStorage(): string {
   try {
@@ -139,6 +150,7 @@ const fetchList = async () => {
     sortField: "id",
     sortDirection: "DESC",
     refType: "TRAINING_SCRIPT",
+    refId: activeRefId.value,
   };
 
   try {
@@ -286,6 +298,7 @@ const openCreateModal = () => {
   data.value.selectedData = {
     username: username.value,
     projectId: getProjectId(),
+    refId: activeRefId.value,
   };
   data.value.isCreateVisible = true;
 };
@@ -318,8 +331,17 @@ const getSelectedAllData = () => {
 };
 onMounted(() => {
   username.value = readUsernameFromStorage();
+  activeRefId.value = getRefIdFromRoute(route.query);
   fetchList();
 });
+watch(
+  () => route.query.refId,
+  () => {
+    activeRefId.value = getRefIdFromRoute(route.query);
+    data.value.params.pageNum = 1;
+    fetchList();
+  },
+);
 </script>
 
 <template>
@@ -413,6 +435,26 @@ onMounted(() => {
                   />
                 </v-responsive>
               </v-sheet>
+              <v-sheet
+                class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
+              >
+                <v-chip
+                  v-if="activeRefId"
+                  class="ml-2"
+                  color="secondary"
+                  variant="tonal"
+                >
+                  Filter: DataGroup {{ activeRefName }}
+                </v-chip>
+                <v-btn
+                  v-if="activeRefId"
+                  size="small"
+                  variant="text"
+                  @click="router.replace({ path: '/TrainingScriptGroup' })"
+                >
+                  필터 해제
+                </v-btn>
+              </v-sheet>
             </v-sheet>
 
             <v-sheet class="justify-end mb-2">
diff --git a/src/components/templates/trainingscriptgroup/ListComponent.vue b/src/components/templates/trainingscriptgroup/ListComponent.vue
new file mode 100644
index 0000000..bdaff10
--- /dev/null
+++ b/src/components/templates/trainingscriptgroup/ListComponent.vue
@@ -0,0 +1,570 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import tz from "dayjs/plugin/timezone";
+import { useRouter } from "vue-router";
+
+import { commonStore } from "@/stores/commonStore";
+import { DataGroupService } from "@/components/service/management/DataGroupService";
+
+import ViewComponent from "@/components/templates/workflow/ViewComponent.vue";
+import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
+import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
+import DatagroupBaseDoalog from "@/components/atoms/organisms/DatagroupBaseDoalog.vue";
+import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
+
+/* -------------------------
+ * Dayjs & Router
+ * ------------------------*/
+dayjs.extend(utc);
+dayjs.extend(tz);
+const KST = "Asia/Seoul";
+const router = useRouter();
+
+/* -------------------------
+ * Types
+ * ------------------------*/
+type SearchType = "전체" | "제목" | "작성자";
+type ApiSearchType = "ALL" | "TITLE" | "AUTHOR";
+
+interface DataGroupRow {
+  no: number;
+  name: string;
+  description: string;
+  author: string;
+  registDt: string | number | Date;
+  deviceKey: number;
+}
+
+/* -------------------------
+ * Constants
+ * ------------------------*/
+const TABLE_HEADERS = [
+  { label: "No", width: "6%", style: "word-break: keep-all;" },
+  { label: "DataGroup Name", width: "24%", style: "word-break: keep-all;" },
+  { label: "Description", width: "32%", style: "word-break: keep-all;" },
+  { label: "Author", width: "14%", style: "word-break: keep-all;" },
+  { label: "Created DateTime", width: "16%", style: "word-break: keep-all;" },
+  { label: "Action", width: "8%", style: "word-break: keep-all;" },
+] as const;
+
+const SEARCH_OPTIONS = [
+  { label: "전체", value: "전체" as SearchType },
+  { label: "제목", value: "제목" as SearchType },
+  { label: "작성자", value: "작성자" as SearchType },
+];
+
+const PAGE_SIZE_OPTIONS = [
+  { text: "10 페이지", value: 10 },
+  { text: "50 페이지", value: 50 },
+  { text: "100 페이지", value: 100 },
+];
+
+const SEARCH_TYPE_MAP: Record<SearchType | "", ApiSearchType> = {
+  "": "ALL",
+  전체: "ALL",
+  제목: "TITLE",
+  작성자: "AUTHOR",
+};
+
+/* -------------------------
+ * Store & Local State
+ * ------------------------*/
+const store = commonStore();
+const openView = ref(false);
+
+const isRunVisible = ref(false); // 유지 (다른 곳에서 열릴 수 있음)
+const selectedRun = ref<any | null>(null);
+
+const data = ref({
+  params: {
+    pageNum: 1,
+    pageSize: 10,
+    searchType: "전체" as SearchType,
+    searchText: "",
+  },
+  results: [] as DataGroupRow[],
+  totalElements: 0,
+  pageLength: 0,
+  modalMode: "" as "create" | "edit" | "upload" | "",
+  selectedData: null as any,
+  allSelected: false,
+  selected: [] as Array<{ deviceKey: number }>,
+  isCreateVisible: false,
+  isUploadVisible: false,
+  isModalVisible: false,
+  isConfirmDialogVisible: false,
+  userOption: [] as any[],
+});
+
+/* -------------------------
+ * Utils
+ * ------------------------*/
+const formatDateTime = (
+  v?: string | number | Date,
+  fmt = "YYYY-MM-DD HH:mm:ss",
+) => (v ? dayjs(v).tz(KST).format(fmt) : "");
+
+const toRow = (g: any, no: number): DataGroupRow => ({
+  no,
+  name: g.dsNm,
+  description: g.dsDesc,
+  author: g.regUserNm,
+  registDt: g.regDate,
+  deviceKey: g.id,
+});
+
+function onRowClick(row: DataGroupRow) {
+  const id = Number(row?.deviceKey);
+  if (!Number.isFinite(id)) return;
+  router.push({
+    path: "/training-script",
+    query: { refId: String(id), refName: row.name },
+  });
+}
+
+/* -------------------------
+ * Data Loaders
+ * ------------------------*/
+async function fetchList() {
+  const projectId = Number(localStorage.getItem("projectId"));
+  if (!projectId) {
+    console.warn("[TrainingscriptGroup] projectId 없음 — 프로젝트 먼저 선택");
+    data.value.results = [];
+    data.value.totalElements = 0;
+    data.value.pageLength = 0;
+    return;
+  }
+
+  const { pageNum, pageSize, searchType, searchText } = data.value.params;
+  const mapped = SEARCH_TYPE_MAP[searchType] || "ALL";
+  const keyword = (searchText || "").trim();
+  const needLocalFilter = mapped !== "ALL" && keyword.length > 0;
+
+  // 서버 요청 크기 설정 (로컬 필터가 필요하면 넉넉히 가져옴)
+  const reqPage = needLocalFilter ? 0 : pageNum - 1; // 서버가 0-based 라면 조정
+  const reqSize = needLocalFilter ? 1000 : pageSize;
+
+  try {
+    const payload = {
+      projectId,
+      page: reqPage,
+      size: reqSize,
+      keyword,
+      searchType: mapped,
+    };
+    const res: any = await DataGroupService.search(payload);
+    if (res?.status !== 200) return;
+
+    const result = res.data;
+    let list: any[] = result?.content ?? [];
+
+    // 로컬 필터
+    if (needLocalFilter) {
+      const kw = keyword.toLowerCase();
+      if (mapped === "TITLE") {
+        list = list.filter((w: any) =>
+          String(w?.name ?? "")
+            .toLowerCase()
+            .includes(kw),
+        );
+      } else if (mapped === "AUTHOR") {
+        list = list.filter((w: any) =>
+          String(w?.regUserNm ?? "")
+            .toLowerCase()
+            .includes(kw),
+        );
+      }
+
+      const uiSize = pageSize;
+      const totalElements = list.length;
+      const totalPages = Math.max(1, Math.ceil(totalElements / uiSize));
+      const safePage = Math.min(Math.max(1, pageNum), totalPages);
+      const start = (safePage - 1) * uiSize;
+      const pageSlice = list.slice(start, start + uiSize);
+      const firstNo = totalElements - start;
+
+      data.value.results = pageSlice.map((w: any, i: number) =>
+        toRow(w, firstNo - i),
+      );
+      data.value.totalElements = totalElements;
+      data.value.pageLength = totalPages;
+      return;
+    }
+
+    // 서버 페이징 결과 사용
+    const totalElements = result.totalElements ?? list.length;
+    const totalPages = result.totalPages ?? 1;
+    const serverPage = result.pageable?.pageNumber ?? 0;
+    const serverSize = result.pageable?.pageSize ?? pageSize;
+    const offset =
+      typeof result.pageable?.offset === "number"
+        ? result.pageable.offset
+        : serverPage * serverSize;
+    const firstNo = totalElements - offset;
+
+    data.value.results = list.map((w: any, i: number) => toRow(w, firstNo - i));
+    data.value.totalElements = totalElements;
+    data.value.pageLength = totalPages;
+  } catch (err) {
+    console.error("[TrainingscriptGroup] 조회 에러:", err);
+  }
+}
+
+/* -------------------------
+ * Actions
+ * ------------------------*/
+function doSearch() {
+  data.value.params.pageNum = 1;
+  fetchList();
+}
+function changePageNum(page: number) {
+  data.value.params.pageNum = page;
+  fetchList();
+}
+function changePageSize(size: number) {
+  data.value.params.pageSize = size;
+  data.value.params.pageNum = 1;
+  fetchList();
+}
+
+function removeData(value?: Array<{ deviceKey: number }>) {
+  const removeList = value ?? data.value.selected;
+  if (!removeList?.length) return;
+
+  const ids = removeList.map((x) => x.deviceKey);
+  const removeOnce = (id: number) =>
+    DataGroupService.delete(id).then((res: any) => {
+      if (res.status < 200 || res.status >= 300) return Promise.reject(res);
+    });
+
+  const after = () => {
+    if (
+      ids.length >= data.value.results.length &&
+      data.value.params.pageNum > 1
+    ) {
+      data.value.params.pageNum -= 1;
+    }
+    fetchList();
+    data.value.isConfirmDialogVisible = false;
+    data.value.selected = [];
+    data.value.allSelected = false;
+  };
+
+  if (ids.length === 1) {
+    removeOnce(ids[0])
+      .then(() =>
+        store.setSnackbarMsg({
+          color: "success",
+          text: "삭제되었습니다.",
+          result: 200,
+        }),
+      )
+      .catch((err) => {
+        console.error(err);
+        store.setSnackbarMsg({
+          color: "warning",
+          text: "삭제 실패",
+          result: 500,
+        });
+      })
+      .finally(after);
+  } else {
+    Promise.all(ids.map(removeOnce))
+      .then(() =>
+        store.setSnackbarMsg({
+          color: "success",
+          text: "모두 삭제되었습니다.",
+          result: 200,
+        }),
+      )
+      .catch((err) => {
+        console.error(err);
+        store.setSnackbarMsg({
+          color: "warning",
+          text: "일부 삭제 실패",
+          result: 500,
+        });
+      })
+      .finally(after);
+  }
+}
+
+function handleRemoveData() {
+  if (data.value.selected.length === 0) return;
+  if (data.value.allSelected || data.value.selected.length !== 1) {
+    data.value.isConfirmDialogVisible = true;
+    return;
+  }
+  removeData();
+}
+
+function getSelectedAllData() {
+  data.value.selected = data.value.allSelected
+    ? data.value.results.map((item) => ({ deviceKey: item.deviceKey }))
+    : [];
+}
+
+function openDetailModal(selectedItem: DataGroupRow) {
+  data.value.selectedData = selectedItem;
+  openView.value = true;
+}
+const closeDetail = () => (openView.value = false);
+
+function openRunModal(item: any) {
+  selectedRun.value = item;
+  isRunVisible.value = true;
+}
+
+function openModifyModal(item: DataGroupRow) {
+  data.value.selectedData = {
+    id: item.deviceKey,
+    workflowName: item.name,
+    workflowDescription: item.description,
+  };
+  data.value.modalMode = "edit";
+  data.value.isCreateVisible = true;
+}
+function openCreateModal() {
+  data.value.selectedData = null;
+  data.value.modalMode = "create";
+  data.value.isCreateVisible = true;
+}
+function openUploadModal() {
+  data.value.selectedData = null;
+  data.value.modalMode = "upload";
+  data.value.isUploadVisible = true;
+}
+function closeCreateModal() {
+  data.value.isModalVisible = false;
+  data.value.isCreateVisible = false;
+}
+function closeUploadModal() {
+  data.value.isModalVisible = false;
+  data.value.isUploadVisible = false;
+}
+
+/* -------------------------
+ * Watchers & Lifecycle
+ * ------------------------*/
+watch(
+  () => data.value.isCreateVisible,
+  (now, prev) => {
+    if (prev && !now) fetchList();
+  },
+);
+watch(
+  () => data.value.isUploadVisible,
+  (now, prev) => {
+    if (prev && !now) fetchList();
+  },
+);
+onMounted(fetchList);
+</script>
+
+<template>
+  <div class="w-100" v-if="!openView">
+    <v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
+      <v-card
+        flat
+        class="bg-shades-transparent d-flex flex-column align-center justify-center w-100"
+      >
+        <v-card flat class="bg-shades-transparent w-100">
+          <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
+            <div class="d-flex flex-row justify-start align-center">
+              <div class="text-primary">TrainingScriptGroup</div>
+            </div>
+          </v-card-item>
+        </v-card>
+
+        <!-- Search -->
+        <v-card flat class="bg-shades-transparent w-100">
+          <v-card flat class="bg-shades-transparent mb-4">
+            <div class="d-flex justify-center flex-wrap align-center">
+              <v-responsive
+                max-width="180"
+                min-width="180"
+                class="mr-3 mt-3 mb-3"
+              >
+                <v-select
+                  v-model="data.params.searchType"
+                  label="검색조건"
+                  density="compact"
+                  :items="SEARCH_OPTIONS"
+                  item-title="label"
+                  item-value="value"
+                  hide-details
+                  @update:model-value="doSearch"
+                />
+              </v-responsive>
+
+              <v-responsive min-width="540" max-width="540">
+                <v-text-field
+                  v-model="data.params.searchText"
+                  label="검색어"
+                  density="compact"
+                  clearable
+                  required
+                  class="mt-3 mb-3"
+                  hide-details
+                  @keyup.enter="doSearch"
+                />
+              </v-responsive>
+
+              <div class="ml-3">
+                <v-btn
+                  size="large"
+                  color="primary"
+                  :rounded="5"
+                  @click="doSearch"
+                >
+                  <v-icon>mdi-magnify</v-icon>
+                </v-btn>
+              </div>
+            </div>
+          </v-card>
+
+          <!-- Toolbar -->
+          <v-sheet
+            class="bg-shades-transparent d-flex flex-wrap align-center mb-2"
+          >
+            <v-sheet class="d-flex flex-wrap me-auto bg-shades-transparent">
+              <v-sheet
+                class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
+              >
+                <v-chip color="primary"
+                  >총 {{ data.totalElements.toLocaleString() }}개</v-chip
+                >
+              </v-sheet>
+              <v-sheet class="bg-shades-transparent">
+                <v-responsive max-width="140" min-width="140" class="mb-2">
+                  <v-select
+                    v-model="data.params.pageSize"
+                    density="compact"
+                    :items="PAGE_SIZE_OPTIONS"
+                    item-title="text"
+                    item-value="value"
+                    variant="outlined"
+                    color="primary"
+                    hide-details
+                    @update:model-value="changePageSize"
+                  />
+                </v-responsive>
+              </v-sheet>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2">
+              <v-btn color="info" @click="openCreateModal"
+                >Create DataGroup</v-btn
+              >
+            </v-sheet>
+          </v-sheet>
+
+          <!-- Table -->
+          <v-card class="rounded-lg pa-8">
+            <v-col cols="12">
+              <v-sheet>
+                <v-table
+                  density="comfortable"
+                  fixed-header
+                  height="625"
+                  col-md-12
+                  col-12
+                  overflow-x-auto
+                >
+                  <colgroup>
+                    <col
+                      v-for="(h, i) in TABLE_HEADERS"
+                      :key="i"
+                      :style="`width:${h.width}`"
+                    />
+                  </colgroup>
+                  <thead>
+                    <tr>
+                      <th
+                        v-for="(h, i) in TABLE_HEADERS"
+                        :key="i"
+                        class="text-center font-weight-bold"
+                        :style="h.style"
+                      >
+                        {{ h.label }}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody class="text-body-2">
+                    <tr
+                      v-for="(row, i) in data.results"
+                      :key="i"
+                      class="text-center row-hover"
+                      @click="onRowClick(row)"
+                    >
+                      <td>{{ row.no }}</td>
+                      <td>{{ row.name }}</td>
+                      <td>{{ row.description }}</td>
+                      <td>{{ row.author || "-" }}</td>
+                      <td>{{ formatDateTime(row.registDt) }}</td>
+                      <td
+                        style="white-space: nowrap"
+                        @click.stop
+                        @mousedown.stop
+                      >
+                        <IconInfoBtn @on-click="openDetailModal(row)" />
+                        <IconModifyBtn @on-click="openModifyModal(row)" />
+                        <IconDeleteBtn
+                          @on-click="removeData([{ deviceKey: row.deviceKey }])"
+                        />
+                      </td>
+                    </tr>
+                  </tbody>
+                </v-table>
+              </v-sheet>
+
+              <v-card-actions class="text-center mt-8 justify-center">
+                <v-pagination
+                  v-model="data.params.pageNum"
+                  :length="data.pageLength"
+                  :total-visible="10"
+                  color="primary"
+                  rounded="circle"
+                  @update:model-value="changePageNum"
+                />
+              </v-card-actions>
+            </v-col>
+          </v-card>
+        </v-card>
+      </v-card>
+    </v-container>
+
+    <!-- Create/Edit Dialog -->
+    <v-dialog v-model="data.isCreateVisible" max-width="800" persistent>
+      <DatagroupBaseDoalog
+        :key="data.modalMode + String(data.selectedData?.deviceKey ?? '')"
+        :edit-data="data.selectedData"
+        :mode="data.modalMode"
+        @close-modal="closeCreateModal"
+      />
+    </v-dialog>
+  </div>
+
+  <div class="w-100" v-else>
+    <ViewComponent
+      v-if="data.selectedData"
+      :id="data.selectedData.deviceKey"
+      @close="closeDetail"
+    />
+  </div>
+</template>
+
+<style scoped>
+/* 행 Hover 효과 */
+.row-hover {
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+tbody tr.row-hover:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+tbody tr.row-hover:active {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>
diff --git a/src/components/templates/workflow/ListComponent.vue b/src/components/templates/workflow/ListComponent.vue
index 8005e61..6c9c5f1 100644
--- a/src/components/templates/workflow/ListComponent.vue
+++ b/src/components/templates/workflow/ListComponent.vue
@@ -25,13 +25,13 @@ const isRunVisible = ref(false);
 const selectedRun = ref<any | null>(null);
 
 const tableHeader = [
-  { label: "No", width: "5%", style: "word-break: keep-all;" },
-  { label: "Workflow Name", width: "18%", style: "word-break: keep-all;" },
-  { label: "Description", width: "28%", style: "word-break: keep-all;" },
-  { label: "Version", width: "10%", style: "word-break: keep-all;" },
-  { label: "Kubeflow Status", width: "12%", style: "word-break: keep-all;" },
-  { label: "Created DateTime", width: "15%", style: "word-break: keep-all;" },
-  { label: "Action", width: "12%", style: "word-break: keep-all;" },
+  { label: "No", width: "6%", style: "white-space: nowrap;" },
+  { label: "Workflow Name", width: "22%", style: "white-space: nowrap;" },
+  { label: "Description", width: "30%", style: "white-space: nowrap;" },
+  { label: "Version", width: "10%", style: "white-space: nowrap;" },
+  { label: "Kubeflow Status", width: "12%", style: "white-space: nowrap;" },
+  { label: "Created DateTime", width: "12%", style: "white-space: nowrap;" },
+  { label: "Action", width: "8%", style: "white-space: nowrap;" },
 ];
 const searchOptions = [
   { label: "전체", value: "전체" as SearchType },
@@ -125,6 +125,7 @@ const fetchList = () => {
       if (res.status !== 200) return;
 
       const result = res.data;
+      console.log("Workflows", result);
       let list = result?.content ?? [];
 
       if (needLocalFilter) {
@@ -447,7 +448,6 @@ onMounted(() => {
                   overflow-x-auto
                 >
                   <colgroup>
-                    <col style="width: 5%" />
                     <col
                       v-for="(item, i) in tableHeader"
                       :key="i"
@@ -456,15 +456,6 @@ onMounted(() => {
                   </colgroup>
                   <thead>
                     <tr>
-                      <th>
-                        <v-checkbox
-                          v-model="data.allSelected"
-                          style="min-width: 36px"
-                          :indeterminate="data.allSelected === true"
-                          hide-details
-                          @change="getSelectedAllData"
-                        ></v-checkbox>
-                      </th>
                       <th
                         v-for="(item, i) in tableHeader"
                         :key="i"
@@ -481,15 +472,6 @@ onMounted(() => {
                       :key="i"
                       class="text-center"
                     >
-                      <td>
-                        <v-checkbox
-                          v-model="data.selected"
-                          hide-details
-                          :value="{
-                            deviceKey: item.deviceKey,
-                          }"
-                        ></v-checkbox>
-                      </td>
                       <td>{{ item.no }}</td>
                       <td>{{ item.name }}</td>
                       <td>{{ item.description }}</td>
diff --git a/src/pages/Datagroup.vue b/src/pages/DatagroupView.vue
similarity index 100%
rename from src/pages/Datagroup.vue
rename to src/pages/DatagroupView.vue
diff --git a/src/pages/SignupView.vue b/src/pages/SignupView.vue
index 4fb0039..f58c7c1 100644
--- a/src/pages/SignupView.vue
+++ b/src/pages/SignupView.vue
@@ -47,7 +47,6 @@ const signUp = () => {
     role: data.value.role ? [data.value.role] : [],
     password: data.value.password,
   };
-  console.log("회원가입 호출 payload:", payload);
 
   UserManagerService.signUp(payload)
     .then((res) => {
diff --git a/src/pages/TrainingscriptgroupView.vue b/src/pages/TrainingscriptgroupView.vue
new file mode 100644
index 0000000..c9e08de
--- /dev/null
+++ b/src/pages/TrainingscriptgroupView.vue
@@ -0,0 +1,9 @@
+<script setup>
+import ListComponent from "@/components/templates/trainingscriptgroup/ListComponent.vue";
+</script>
+
+<template>
+  <ListComponent />
+</template>
+
+<style scoped lang="sass"></style>
diff --git a/src/router/index.js b/src/router/index.js
index 4f29c50..8ef6ab1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,7 +44,13 @@ const routes = [
         name: "dataGroup",
         path: "/datagroup",
         meta: { title: "DataGroup", requiresAuth: false },
-        component: () => import("@/pages/Datagroup.vue"),
+        component: () => import("@/pages/DatagroupView.vue"),
+      },
+      {
+        name: "TrainingScriptGroup",
+        path: "/trainingscriptgroup",
+        meta: { title: "TrainingScriptGroup", requiresAuth: false },
+        component: () => import("@/pages/TrainingscriptgroupView.vue"),
       },
       {
         name: "run",
diff --git a/src/utils/menuUtils.js b/src/utils/menuUtils.js
index c6a6373..2e5b344 100644
--- a/src/utils/menuUtils.js
+++ b/src/utils/menuUtils.js
@@ -12,12 +12,7 @@ export const menuUtils = {
       value: "workflows",
       icon: "mdi-code-braces",
     },
-    {
-      title: "DataGroup",
-      path: "/DataGroup",
-      value: "DataGroup",
-      icon: "mdi-hammer-wrench",
-    },
+
     {
       title: "Run",
       path: "/run",
@@ -34,19 +29,31 @@ export const menuUtils = {
       value: "deployment",
       icon: "mdi-folder-search",
     },
-  ],
-  adminMenuItem: [
     {
-      title: "Training Script",
-      path: "/training-script",
-      value: "training-script",
+      title: "TrainingScriptGroup",
+      path: "/TrainingScriptGroup",
+      value: "TrainingScriptGroup",
       icon: "mdi-file-code-outline",
     },
     {
-      title: "Datasets",
-      path: "/datasets",
-      value: "datasets",
+      title: "DataSetGroup",
+      path: "/DataGroup",
+      value: "DataGroup",
       icon: "mdi-database-outline",
     },
   ],
+  adminMenuItem: [
+    // {
+    //   title: "Training Script",
+    //   path: "/training-script",
+    //   value: "training-script",
+    //   icon: "mdi-file-code-outline",
+    // },
+    // {
+    //   title: "Datasets",
+    //   path: "/datasets",
+    //   value: "datasets",
+    //   icon: "mdi-database-outline",
+    // },
+  ],
 };
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 2232ca6..116a2e4 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -19,7 +19,7 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
-    '/Datagroup': RouteRecordInfo<'/Datagroup', '/Datagroup', Record<never, never>, Record<never, never>>,
+    '/DatagroupView': RouteRecordInfo<'/DatagroupView', '/DatagroupView', Record<never, never>, Record<never, never>>,
     '/DatasetView': RouteRecordInfo<'/DatasetView', '/DatasetView', Record<never, never>, Record<never, never>>,
     '/DeploymentView': RouteRecordInfo<'/DeploymentView', '/DeploymentView', Record<never, never>, Record<never, never>>,
     '/ExecutionsView': RouteRecordInfo<'/ExecutionsView', '/ExecutionsView', Record<never, never>, Record<never, never>>,
@@ -29,6 +29,7 @@ declare module 'vue-router/auto-routes' {
     '/MainView': RouteRecordInfo<'/MainView', '/MainView', Record<never, never>, Record<never, never>>,
     '/ProjectView': RouteRecordInfo<'/ProjectView', '/ProjectView', Record<never, never>, Record<never, never>>,
     '/SignupView': RouteRecordInfo<'/SignupView', '/SignupView', Record<never, never>, Record<never, never>>,
+    '/TrainingscriptgroupView': RouteRecordInfo<'/TrainingscriptgroupView', '/TrainingscriptgroupView', Record<never, never>, Record<never, never>>,
     '/TrainingScriptView': RouteRecordInfo<'/TrainingScriptView', '/TrainingScriptView', Record<never, never>, Record<never, never>>,
     '/UsersView': RouteRecordInfo<'/UsersView', '/UsersView', Record<never, never>, Record<never, never>>,
     '/WorkflowStepConfigView': RouteRecordInfo<'/WorkflowStepConfigView', '/WorkflowStepConfigView', Record<never, never>, Record<never, never>>,