From ff5dbc275e5969edf56bc89621dde67bc96f83ce Mon Sep 17 00:00:00 2001
From: jschoi <jschoi@cuuva.com>
Date: Mon, 29 Sep 2025 10:21:50 +0900
Subject: [PATCH] =?UTF-8?q?fix=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   3 +-
 .../atoms/organisms/WorkflowsBaseDialog.vue   |   4 +-
 .../atoms/organisms/WorkflowsRunDialog.vue    |   8 +-
 ...liwRunService.ts => KubeflowRunService.ts} |   2 +-
 .../service/management/kubeflowService.ts     |   2 +-
 .../templates/home/ListComponent.vue          | 291 +++++--
 .../run/executions/ListComponent.vue          | 781 ++++++++++--------
 .../run/executions/ListComponentback.vue      | 564 +++++++++++++
 8 files changed, 1242 insertions(+), 413 deletions(-)
 rename src/components/service/management/{KubefliwRunService.ts => KubeflowRunService.ts} (96%)
 create mode 100644 src/components/templates/run/executions/ListComponentback.vue

diff --git a/components.d.ts b/components.d.ts
index 17340ba..7daf980 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,7 +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']
-    copy: typeof import('./src/components/atoms/organisms/TrainingScriptBaseDoalog copy.vue')['default']
+    copy: typeof import('./src/components/templates/run/executions/ListComponent copy.vue')['default']
     DatasetBaseDoalog: typeof import('./src/components/atoms/organisms/DatasetBaseDoalog.vue')['default']
     DatasetsBaseDoalog: typeof import('./src/components/atoms/organisms/DatasetsBaseDoalog.vue')['default']
     DatesetBaseDoalog: typeof import('./src/components/atoms/organisms/DatesetBaseDoalog.vue')['default']
@@ -30,6 +30,7 @@ declare module 'vue' {
     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']
+    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/WorkflowsBaseDialog.vue b/src/components/atoms/organisms/WorkflowsBaseDialog.vue
index 52b0a29..068830b 100644
--- a/src/components/atoms/organisms/WorkflowsBaseDialog.vue
+++ b/src/components/atoms/organisms/WorkflowsBaseDialog.vue
@@ -9,7 +9,7 @@ import { storage } from "@/utils/storage";
 import type { Workflow } from "@/components/models/management/Workflow";
 import { storeToRefs } from "pinia";
 import { useAutoflowStore } from "@/stores/autoflowStore";
-import { kubeflowService } from "@/components/service/management/KubeflowService";
+import { KubeflowService } from "@/components/service/management/KubeflowService";
 import {
   toKubeflowForm,
   type KubeflowUploadDto,
@@ -241,7 +241,7 @@ async function submit() {
         uploadfile: form.value.file,
       };
       const fd = toKubeflowForm(dto);
-      const { data } = await kubeflowService.upload(fd);
+      const { data } = await KubeflowService.upload(fd);
       emit("saved", data);
       emit("close-modal");
     }
diff --git a/src/components/atoms/organisms/WorkflowsRunDialog.vue b/src/components/atoms/organisms/WorkflowsRunDialog.vue
index c1fbdeb..283a81f 100644
--- a/src/components/atoms/organisms/WorkflowsRunDialog.vue
+++ b/src/components/atoms/organisms/WorkflowsRunDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, onBeforeUnmount, ref, watch } from "vue";
-import { kubeflowService } from "@/components/service/management/KubeflowService";
+import { KubeflowService } from "@/components/service/management/KubeflowService";
 
 type RunPayload = {
   display_name: string;
@@ -53,12 +53,12 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onEsc));
 async function loadExperimentsAll() {
   expLoading.value = true;
   try {
-    const first = await kubeflowService.experiments({ pageSize: 500 });
+    const first = await KubeflowService.experiments({ pageSize: 500 });
     const all: any[] = [...(first.data?.experiments ?? [])];
     let token: string | undefined = first.data?.next_page_token;
 
     if (token) {
-      const { data } = await kubeflowService.experiments({
+      const { data } = await KubeflowService.experiments({
         pageSize: 500,
         pageToken: token,
       });
@@ -108,7 +108,7 @@ async function submitRun() {
 
   try {
     loading.value = true;
-    const { data } = await kubeflowService.run(payload);
+    const { data } = await KubeflowService.run(payload);
     emit("submitted", data);
     emit("close-modal");
   } catch (e: any) {
diff --git a/src/components/service/management/KubefliwRunService.ts b/src/components/service/management/KubeflowRunService.ts
similarity index 96%
rename from src/components/service/management/KubefliwRunService.ts
rename to src/components/service/management/KubeflowRunService.ts
index 4125fe4..5f4c4fd 100644
--- a/src/components/service/management/KubefliwRunService.ts
+++ b/src/components/service/management/KubeflowRunService.ts
@@ -11,7 +11,7 @@ export type KubeflowRunSearchParams = {
   sortField?: string; // 정렬 기준 필드명
   sortDirection?: "ASC" | "DESC"; // 정렬 방향
 };
-export const kubeflowRunService = {
+export const KubeflowRunService = {
   getAll: () => {
     return request.get("/api/kubeflow/runs", {});
   },
diff --git a/src/components/service/management/kubeflowService.ts b/src/components/service/management/kubeflowService.ts
index c265548..dabdf08 100644
--- a/src/components/service/management/kubeflowService.ts
+++ b/src/components/service/management/kubeflowService.ts
@@ -1,6 +1,6 @@
 import { kubeflow } from "@/components/models/management/Kubeflow";
 import { request } from "@/components/service/index";
-export const kubeflowService = {
+export const KubeflowService = {
   upload: (payload: kubeflow) => {
     return request.post("/pipelines/upload", payload);
   },
diff --git a/src/components/templates/home/ListComponent.vue b/src/components/templates/home/ListComponent.vue
index 9ad4e93..4becb98 100644
--- a/src/components/templates/home/ListComponent.vue
+++ b/src/components/templates/home/ListComponent.vue
@@ -5,7 +5,7 @@ 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);
 
@@ -13,6 +13,8 @@ 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;
@@ -20,6 +22,7 @@ const recentRuns = ref<
     time: string;
   }[]
 >([]);
+
 // dataset
 const dsLoading = ref(false);
 type DsItem = {
@@ -36,6 +39,38 @@ 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 = {
+  runId: string;
+  name: string;
+  state: string; // 원본 상태 (SUCCEEDED/FAILED/…)
+  status: "success" | "failed" | "running" | "pending"; // UI용
+  createdAt?: string;
+  scheduledAt?: string;
+  finishedAt?: string;
+  experimentId?: string;
+  pipelineName?: string;
+  serviceAccount?: string;
+};
+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";
+  }
+}
+
 async function loadDatasetActivity() {
   dsLoading.value = true;
   try {
@@ -165,6 +200,49 @@ async function loadRecentRuns() {
   }
 }
 
+async function loadKubeflowRuns() {
+  kfRunsLoading.value = true;
+  try {
+    const res = await KubeflowRunService.getAll();
+    // res.data 가 배열이라고 가정 (Swagger 예시 기반)
+    const arr: any[] = Array.isArray(res?.data) ? res.data : [];
+
+    kfRuns.value = arr
+      .map((r) => {
+        const state = String(r?.state ?? r?.status ?? "PENDING");
+        return {
+          runId: r?.runId ?? r?.run_id ?? r?.id ?? "",
+          name:
+            r?.displayName ??
+            r?.display_name ??
+            r?.name ??
+            r?.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,
+          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;
+      })
+      .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 = [];
+  } finally {
+    kfRunsLoading.value = false;
+  }
+}
+
 function renderStatusPie() {
   if (!pieChartRef.value) return;
 
@@ -306,9 +384,27 @@ const data = ref({
   selected: [],
 });
 
-const handleRefresh = () => {
-  alert("Refresh 작업 진행중...");
+const handleRefresh = async () => {
+  if (isRefreshing.value) return;
+  try {
+    isRefreshing.value = true;
+
+    await Promise.all([
+      loadRecentRuns(),
+      (async () => {
+        await loadWorkflows();
+        renderStatusPie();
+      })(),
+      loadDatasetActivity(),
+      loadKubeflowRuns(),
+    ]);
+  } catch (e) {
+    console.error("[Home] refresh failed:", e);
+  } finally {
+    isRefreshing.value = false;
+  }
 };
+
 const getSelectedAllData = () => {
   data.value.selected = data.value.allSelected
     ? data.value.results.map(({ deviceKey }) => ({ deviceKey }))
@@ -378,70 +474,30 @@ onMounted(async () => {
   await loadRecentRuns();
   await loadWorkflows();
   await loadDatasetActivity();
+  await loadKubeflowRuns();
 });
 
 // 프로젝트 변경 시 재조회
 watch(currentProjectId, () => loadWorkflows());
+loadKubeflowRuns();
 </script>
 
 <template>
   <v-container fluid>
     <div class="d-flex justify-space-between align-center mb-6">
       <h2 class="text-h6 font-weight-bold">배터리 상태 예측 모델 프로젝트</h2>
-      <v-btn color="primary" prepend-icon="mdi-refresh" @click="handleRefresh"
-        >Refresh</v-btn
+      <v-btn
+        color="primary"
+        prepend-icon="mdi-refresh"
+        :loading="isRefreshing"
+        :disabled="isRefreshing"
+        @click="handleRefresh"
       >
+        Refresh
+      </v-btn>
     </div>
 
     <v-row>
-      <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">
-              Workflow Success Rate
-            </h3>
-          </div>
-          <div style="overflow-y: auto; padding: 8px 16px">
-            <div ref="pieChartRef" style="height: 280px"></div>
-          </div>
-        </v-card>
-      </v-col>
-      <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">
-              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">
-                <template #title>
-                  <div class="d-flex justify-space-between align-center w-100">
-                    <span class="text-body-2 font-weight-medium">{{
-                      item.title
-                    }}</span>
-                    <span class="text-caption text-grey-lighten-1">
-                      {{ formatToYmdHm(item.timestamp) }}
-                    </span>
-                  </div>
-                </template>
-              </v-list-item>
-
-              <v-list-item v-if="recentWorkflowList.length === 0">
-                <template #title>
-                  <div class="text-caption text-grey">
-                    최근 등록/수정된 워크플로우가 없습니다.
-                  </div>
-                </template>
-              </v-list-item>
-            </v-list>
-          </div>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <v-row class="mt-4">
       <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">
@@ -449,7 +505,6 @@ watch(currentProjectId, () => loadWorkflows());
           </div>
 
           <div style="overflow-y: auto; max-height: 300px; padding: 8px 16px">
-            <!-- 로딩 표시 -->
             <v-skeleton-loader
               v-if="runsLoading"
               type="list-item-two-line"
@@ -458,18 +513,14 @@ watch(currentProjectId, () => loadWorkflows());
               :key="i"
             />
 
-            <!-- 데이터 있을 때 -->
             <v-list v-else density="comfortable">
               <v-list-item
                 v-for="(run, idx) in recentRuns"
                 :key="idx"
                 class="py-2"
               >
-                <!-- 기존 div 대신 이 블록으로 교체 -->
                 <div class="d-flex align-center justify-space-between w-100">
-                  <!-- 왼쪽: 상태칩 + (선택) 아이콘 -->
                   <div class="d-flex align-center ga-2">
-                    <!-- 아이콘을 계속 쓰고 싶으면 유지, 아니면 이 v-avatar는 삭제해도 됨 -->
                     <v-avatar
                       size="28"
                       :color="
@@ -538,6 +589,130 @@ watch(currentProjectId, () => loadWorkflows());
           </div>
         </v-card>
       </v-col>
+
+      <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">
+              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">
+                <template #title>
+                  <div class="d-flex justify-space-between align-center w-100">
+                    <span class="text-body-2 font-weight-medium">{{
+                      item.title
+                    }}</span>
+                    <span class="text-caption text-grey-lighten-1">
+                      {{ formatToYmdHm(item.timestamp) }}
+                    </span>
+                  </div>
+                </template>
+              </v-list-item>
+
+              <v-list-item v-if="recentWorkflowList.length === 0">
+                <template #title>
+                  <div class="text-caption text-grey">
+                    최근 등록/수정된 워크플로우가 없습니다.
+                  </div>
+                </template>
+              </v-list-item>
+            </v-list>
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row class="mt-4">
+      <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>
+
+          <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"
+            />
+
+            <!-- 리스트 -->
+            <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>
+
+                  <!-- 오른쪽: 보조 정보 -->
+                  <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>
+                </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>
+        </v-card>
+      </v-col>
       <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">
diff --git a/src/components/templates/run/executions/ListComponent.vue b/src/components/templates/run/executions/ListComponent.vue
index 5869825..9d908f8 100644
--- a/src/components/templates/run/executions/ListComponent.vue
+++ b/src/components/templates/run/executions/ListComponent.vue
@@ -1,138 +1,29 @@
 <script setup lang="ts">
+import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
 import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
-import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
-import { computed, onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
+import { storage } from "@/utils/storage";
+import ViewComponent from "@/components/templates/run/experiment/ViewComponent.vue";
+import ExperimentCreateDialog from "@/components/atoms/organisms/ExperimentCreateDialog.vue";
+import { ExperimentService } from "@/components/service/management/ExperimentService";
+import { commonStore } from "@/stores/commonStore";
+import { KubeflowRunService } from "@/components/service/management/KubeflowRunService";
 import IconDownloadBtn from "@/components/atoms/button/IconDownloadBtn.vue";
-import CompareComponent from "@/components/templates/run/executions/CompareComponent.vue";
-import ViewComponent from "@/components/templates/run/executions/ViewComponent.vue";
-import ExecutionBaseDialog from "@/components/atoms/organisms/ExecutionBaseDialog.vue";
-import { ExecutionsService } from "@/components/service/management/ExecutionsService";
-// const store = commonStore();
 
-const openCompare = ref(false);
+const store = commonStore();
 const openView = ref(false);
-const runsLoading = ref(false);
-
-// ✅ 파라미터 없이 1회 호출만 해서 콘솔에 출력
-// ✅ 상태 라벨 매핑 (아이콘 로직이 'Succeeded'/'Failed' 기준이라 맞춰줌)
-function toUiStatus(state?: string) {
-  switch ((state || "").toUpperCase()) {
-    case "SUCCEEDED":
-      return "Succeeded";
-    case "FAILED":
-      return "Failed";
-    case "RUNNING":
-      return "Running";
-    case "PENDING":
-      return "Pending";
-    case "SKIPPED":
-      return "Skipped";
-    default:
-      return state || "-";
-  }
-}
-
-// ✅ 시간 포맷/지속시간 유틸
-function fmtStart(start?: string) {
-  if (!start) return "-";
-  const d = new Date(start);
-  if (isNaN(d.getTime())) return start;
-  const yyyy = d.getFullYear();
-  const MM = String(d.getMonth() + 1).padStart(2, "0");
-  const dd = String(d.getDate()).padStart(2, "0");
-  const hh = String(d.getHours()).padStart(2, "0");
-  const mi = String(d.getMinutes()).padStart(2, "0");
-  return `${yyyy}-${MM}-${dd} ${hh}:${mi}`;
-}
-function fmtDuration(start?: string, end?: string) {
-  if (!start || !end) return "-";
-  const ms = new Date(end).getTime() - new Date(start).getTime();
-  if (!isFinite(ms) || ms < 0) return "-";
-  const s = Math.floor(ms / 1000);
-  const h = Math.floor(s / 3600);
-  const m = Math.floor((s % 3600) / 60);
-  const sec = s % 60;
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return `${h}:${pad(m)}:${pad(sec)}`;
-}
-const displayNo = (i: number) => {
-  const start = (data.value.params.pageNum - 1) * data.value.params.pageSize;
-  return data.value.totalDataLength - (start + i);
-};
-async function loadRunsAll() {
-  runsLoading.value = true;
-  try {
-    const all: any[] = [];
-
-    // 1페이지
-    let resp = await ExecutionsService.search({
-      page_size: 500,
-    } as any);
-    all.push(...(resp?.data?.runs ?? []));
-
-    // 다음 토큰 추출(스네이크/카멜 모두 대비)
-    let token: string | undefined =
-      resp?.data?.next_page_token ?? resp?.data?.nextPageToken;
-
-    // 다음 페이지들
-    const seen = new Set<string>();
-    while (token && !seen.has(token)) {
-      seen.add(token);
-
-      // ✅ 무조건 token을 넣어서 호출 (snake/camel 둘 다 넣기)
-      resp = await ExecutionsService.search({
-        page_token: token,
-        pageToken: token,
-        page_size: 500,
-      } as any);
-
-      all.push(...(resp?.data?.runs ?? []));
-      token = resp?.data?.next_page_token ?? resp?.data?.nextPageToken;
-    }
-
-    // 중복 방지
-    const dedup = Array.from(
-      new Map(all.map((r: any) => [r?.run_id ?? r?.id ?? r?.name, r])).values(),
-    );
-
-    // 테이블 행으로 매핑
-    data.value.results = dedup.map((r: any, idx: number) => ({
-      no: idx + 1,
-      name: r?.display_name ?? r?.name ?? r?.run_id ?? "(no name)",
-      status: toUiStatus(r?.state),
-      duration: fmtDuration(r?.created_at, r?.finished_at),
-      experiment: r?.experiment_id ?? "-",
-      workflow:
-        r?.pipeline_version_reference?.pipeline_id ??
-        r?.pipeline_version_reference?.pipeline_version_id ??
-        "-",
-      startTime: fmtStart(r?.created_at),
-      registryStatus: r?.storage_state ?? "-",
-      run_id: r?.run_id,
-      raw: r,
-    }));
-
-    experimentOptions.value = Array.from(
-      new Set(data.value.results.map((r: any) => String(r.experiment || "-"))),
-    ).filter((v) => v && v !== "-");
-
-    workflowOptions.value = Array.from(
-      new Set(data.value.results.map((r: any) => String(r.workflow || "-"))),
-    ).filter((v) => v && v !== "-");
-    data.value.totalDataLength = data.value.results.length;
-    setPaginationLength();
-  } catch (e: any) {
-    console.error("[Runs] 호출 실패:", e?.response?.data ?? e);
-  } finally {
-    runsLoading.value = false;
-  }
-}
-
-const pagedResults = computed(() => {
-  const { pageNum, pageSize } = data.value.params;
-  const start = (pageNum - 1) * pageSize;
-  return data.value.results.slice(start, start + pageSize);
-});
+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 tableHeader = [
   { label: "No", width: "5%", style: "word-break: keep-all;" },
   { label: "Execution Name", width: "20%", style: "word-break: keep-all;" },
@@ -142,29 +33,23 @@ const tableHeader = [
   { label: "Workflow", width: "15%", style: "word-break: keep-all;" },
   { label: "Start Time", width: "15%", style: "word-break: keep-all;" },
   { label: "Registry Status", width: "10%", style: "word-break: keep-all;" },
-  { label: "Action", width: "5%", style: "word-break: keep-all;" },
+  { label: "Action", width: "10%", style: "word-break: keep-all;" },
 ];
+// ===== 검색/페이지네이션 (데이터셋/워크플로우와 '동일') =====
+type SearchType = "전체" | "제목" | "작성자";
 
 const searchOptions = [
-  { searchType: "All", searchText: "" },
-  { searchType: "Execution Name", searchText: "name" },
-  { searchType: "Status", searchText: "status" },
-  { searchType: "Duration", searchText: "duration" },
-  { searchType: "Experiment", searchText: "experiment" },
-  { searchType: "Workflow", searchText: "workflow" },
-  { searchType: "Registry Status", searchText: "registryStatus" },
+  { label: "전체", value: "전체" as SearchType },
+  { label: "제목", value: "제목" as SearchType },
+  { label: "작성자", value: "작성자" as SearchType },
 ];
 
-const experimentOptions = ref<string[]>([]);
-const workflowOptions = ref<string[]>([]);
-const execDialogOpen = ref(false);
-const execMode = ref<"create" | "edit" | "clone">("create");
-const execSelected = ref<any>(null);
-const searchExperimentOptions = [{ searchType: "Experiment", searchText: "" }];
-const searchWorkflowOptions = [{ searchType: "Workflow", searchText: "" }];
-
-const workflowList = ref(["pipeline-a", "pipeline-b", "pipeline-c"]);
-const executionTypes = ref(["One-off", "Recurring"]);
+const SEARCH_TYPE_MAP: Record<SearchType | "", "ALL" | "TITLE" | "AUTHOR"> = {
+  "": "ALL",
+  전체: "ALL",
+  제목: "TITLE",
+  작성자: "AUTHOR",
+};
 
 const pageSizeOptions = [
   { text: "10 페이지", value: 10 },
@@ -172,106 +57,360 @@ const pageSizeOptions = [
   { text: "100 페이지", value: 100 },
 ];
 
+// ===== 상태 =====
 const data = ref({
   params: {
     pageNum: 1,
     pageSize: 10,
-    searchType: "",
+    searchType: "전체" as SearchType,
     searchText: "",
-    experimentFilter: "",
-    workflowFilter: "",
   },
-  results: [],
-  totalDataLength: 0,
+  results: [] as any[],
+  totalElements: 0,
   pageLength: 0,
-  modalMode: "",
-  selectedData: null,
+  modalMode: "" as "create" | "edit" | "",
+  selectedData: null as any,
   allSelected: false,
-  selected: [],
+  selected: [] as any[],
+  isCreateVisible: false,
   isModalVisible: false,
   isConfirmDialogVisible: false,
-  userOption: [],
+  userOption: [] as any[],
 });
 
-const filteredResults = computed(() => {
-  const { searchType, searchText, experimentFilter, workflowFilter } =
-    data.value.params;
+// ===== 유틸 =====
+function readUsernameFromStorage(): string {
+  try {
+    const raw =
+      storage?.get?.("autoflow-auth") ??
+      storage?.getAuth?.() ??
+      localStorage.getItem("autoflow-auth") ??
+      null;
+    const auth = typeof raw === "string" ? JSON.parse(raw) : raw;
+    const u1 = auth?.userInfo?.username;
+    const u2 = auth?.username;
+    const u3 = auth?.userInfo?.userName;
+    const u4 = auth?.userInfo?.email?.split?.("@")?.[0];
+    return (u1 || u2 || u3 || u4 || "").toString();
+  } catch {
+    return "";
+  }
+}
+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 "-";
+    const d = new Date(start);
+    if (isNaN(d.getTime())) return start;
+    const yyyy = d.getFullYear();
+    const MM = String(d.getMonth() + 1).padStart(2, "0");
+    const dd = String(d.getDate()).padStart(2, "0");
+    const hh = String(d.getHours()).padStart(2, "0");
+    const mi = String(d.getMinutes()).padStart(2, "0");
+    return `${yyyy}-${MM}-${dd} ${hh}:${mi}`;
+  };
+
+  const fmtDuration = (start?: string, end?: string) => {
+    if (!start || !end) return "-";
+    const ms = new Date(end).getTime() - new Date(start).getTime();
+    if (!isFinite(ms) || ms < 0) return "-";
+    const s = Math.floor(ms / 1000);
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const sec = s % 60;
+    const pad = (n: number) => String(n).padStart(2, "0");
+    return `${h}:${pad(m)}:${pad(sec)}`;
+  };
+
+  const toUiStatus = (state?: string) => {
+    switch ((state || "").toUpperCase()) {
+      case "SUCCEEDED":
+        return "Succeeded";
+      case "FAILED":
+        return "Failed";
+      case "RUNNING":
+        return "Running";
+      case "PENDING":
+        return "Pending";
+      case "SKIPPED":
+        return "Skipped";
+      default:
+        return state || "-";
+    }
+  };
 
-  let list = data.value.results;
+  const { pageNum, pageSize } = data.value.params;
 
-  // 실드롭다운 필터
-  if (experimentFilter) {
-    list = list.filter((r) => String(r.experiment).includes(experimentFilter));
-  }
-  if (workflowFilter) {
-    list = list.filter((r) => String(r.workflow).includes(workflowFilter));
-  }
+  return {
+    no: (pageNum - 1) * pageSize + (idx + 1),
+    name: r.displayName ?? r.name ?? r.runId ?? "(no name)",
+    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 ?? "-",
+    run_id: r.runId,
+    raw: r,
+  };
+};
 
-  // 텍스트 검색
-  const q = (searchText || "").trim().toLowerCase();
-  if (q) {
-    if (!searchType) {
-      // All: 여러 필드 OR 매칭
-      list = list.filter((r) => {
-        const pool = [
-          r.name,
-          r.status,
-          r.duration,
-          r.experiment,
-          r.workflow,
-          r.registryStatus,
-          r.startTime,
-        ];
-        return pool.some((v) =>
-          String(v ?? "")
-            .toLowerCase()
-            .includes(q),
-        );
-      });
+// 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";
+  const keyword = (searchText || "").trim();
+
+  const payload = {
+    projectId: getProjectId(),
+    page: pageNum - 1, // 0-based
+    size: pageSize,
+    keyword,
+    searchType: mapped,
+    sortField: "id",
+    sortDirection: "DESC",
+  };
+
+  try {
+    const res = await KubeflowRunService.search(payload as any);
+    const result = res?.data ?? res;
+
+    // 1) 응답 정규화
+    //    - Page 객체: { content, totalElements, totalPages }
+    //    - runs 키:   { runs }
+    //    - 루트 배열: []
+    //    - data 배열: { data: [] }
+    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)
+      list = result.content;
+      totalElements = result.totalElements;
+      totalPages = result.totalPages;
+      isServerPaged = true;
+    } else if (Array.isArray(result?.runs)) {
+      list = result.runs;
     } else {
-      list = list.filter((r) =>
-        String(r[searchType] ?? "")
-          .toLowerCase()
-          .includes(q),
-      );
+      list = [];
     }
-  }
 
-  return list;
-});
-const setPaginationLength = () => {
-  if (data.value.totalDataLength % data.value.params.pageSize === 0) {
-    data.value.pageLength =
-      data.value.totalDataLength / data.value.params.pageSize;
-  } else {
-    data.value.pageLength = Math.ceil(
-      data.value.totalDataLength / data.value.params.pageSize,
-    );
-  }
-};
+    if (!isServerPaged) {
+      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);
 
-const handleTerminate = () => {
-  alert("Terminate 작업 진행중...");
+      data.value.results = slice.map((r, i) => toRow(r, i));
+      data.value.totalElements = total;
+      data.value.pageLength = pages;
+    } else {
+      // 3) 서버 페이징 결과 그대로 적용
+      data.value.results = (list as any[]).map((r, i) => toRow(r, i));
+      data.value.totalElements =
+        typeof totalElements === "number" ? totalElements : list.length;
+      data.value.pageLength =
+        typeof totalPages === "number"
+          ? Math.max(1, totalPages)
+          : Math.max(1, Math.ceil((data.value.totalElements || 0) / pageSize));
+    }
+  } catch (err) {
+    console.error("[Executions] 조회 에러:", err);
+    data.value.results = [];
+    data.value.totalElements = 0;
+    data.value.pageLength = 1;
+  }
+}
+// ===== 검색/페이지 조작 =====
+const doSearch = () => {
+  data.value.params.pageNum = 1;
+  fetchList();
 };
-const handleRetry = () => {
-  alert("Retry 작업 진행중...");
+const changePageNum = (page: number) => {
+  data.value.params.pageNum = page;
+  fetchList();
 };
-const handleClone = () => {
-  alert("Clone 작업 진행중...");
+const changePageSize = (size: number) => {
+  data.value.params.pageSize = size;
+  data.value.params.pageNum = 1;
+  fetchList();
 };
 
-const changePageNum = (page) => {
-  data.value.params.pageNum = page;
-};
-const openCreateExecution = () => {
-  execMode.value = "create";
-  execSelected.value = null;
-  execDialogOpen.value = true;
+// 삭제/수정 버튼 등(기존 로직 유지)
+const removeData = (value?: Array<{ deviceKey: number }>) => {
+  const removeList = value ?? data.value.selected;
+  if (!removeList || removeList.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);
+    });
+
+  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) {
+    removeOne(ids[0])
+      .then(() => {
+        store.setSnackbarMsg({
+          color: "success",
+          text: "삭제되었습니다.",
+          result: 200,
+        });
+        after();
+      })
+      .catch((err) => {
+        console.error("삭제 실패:", err);
+        store.setSnackbarMsg({
+          color: "warning",
+          text: "삭제 실패",
+          result: 500,
+        });
+      });
+  } else {
+    Promise.all(ids.map(removeOne))
+      .then(() => {
+        store.setSnackbarMsg({
+          color: "success",
+          text: "모두 삭제되었습니다.",
+          result: 200,
+        });
+      })
+      .catch((err) => {
+        console.error("일부 삭제 실패:", err);
+        store.setSnackbarMsg({
+          color: "warning",
+          text: "일부 삭제 실패",
+          result: 500,
+        });
+      })
+      .finally(after);
+  }
 };
 
-const openComparePage = () => {
-  openCompare.value = true;
+// ===== 상세 & 생성 모달 (기존 그대로) =====
+const closeDetail = () => {
   openView.value = false;
+  selectedExperiment.value = null;
 };
 const openInfoModal = (item: any) => {
   execSelected.value = item;
@@ -279,39 +418,39 @@ const openInfoModal = (item: any) => {
   openView.value = true;
   openCompare.value = false;
 };
-const openModifyModal = (selectedItem) => {
-  execMode.value = "edit";
-  execDialogOpen.value = true;
-};
-
-const openDownloadModal = () => {
-  data.value.selectedData = null;
-  data.value.modalMode = "download";
-};
-function closeCompare() {
-  openCompare.value = false;
-}
 function closeView() {
   openView.value = false;
 }
-
-const getSelectedAllData = () => {
-  data.value.selected = data.value.allSelected
-    ? data.value.results.map((item) => {
-        return {
-          deviceKey: item.deviceKey,
-        };
-      })
-    : [];
+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 = {
+    username: username.value,
+    projectId: getProjectId(),
+  };
+  data.value.isCreateVisible = true;
+};
+const closeModal = () => {
+  data.value.isCreateVisible = false;
+  data.value.selectedData = null;
 };
 
 onMounted(() => {
-  loadRunsAll();
+  username.value = readUsernameFromStorage();
+  fetchList();
 });
 </script>
 
 <template>
-  <div class="w-100" v-if="!openCompare && !openView">
+  <div class="w-100" v-if="!openView">
     <v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
       <v-card
         flat
@@ -324,7 +463,9 @@ onMounted(() => {
             </div>
           </v-card-item>
         </v-card>
+
         <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
@@ -337,41 +478,12 @@ onMounted(() => {
                   label="검색조건"
                   density="compact"
                   :items="searchOptions"
-                  item-title="searchType"
-                  item-value="searchText"
+                  item-title="label"
+                  item-value="value"
                   hide-details
-                ></v-select>
-              </v-responsive>
-              <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="searchExperimentOptions"
-                  item-title="searchType"
-                  item-value="searchText"
-                  hide-details
-                ></v-select>
-              </v-responsive>
-              <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="searchWorkflowOptions"
-                  item-title="searchType"
-                  item-value="searchText"
-                  hide-details
-                ></v-select>
+                />
               </v-responsive>
+
               <v-responsive min-width="540" max-width="540">
                 <v-text-field
                   v-model="data.params.searchText"
@@ -381,8 +493,8 @@ onMounted(() => {
                   required
                   class="mt-3 mb-3"
                   hide-details
-                  @keyup.enter="changePageNum(1)"
-                ></v-text-field>
+                  @keyup.enter="doSearch"
+                />
               </v-responsive>
 
               <div class="ml-3">
@@ -390,14 +502,15 @@ onMounted(() => {
                   size="large"
                   color="primary"
                   :rounded="5"
-                  @click="changePageNum(1)"
+                  @click="doSearch"
                 >
-                  <v-icon> mdi-magnify</v-icon>
+                  <v-icon>mdi-magnify</v-icon>
                 </v-btn>
               </div>
             </div>
           </v-card>
 
+          <!-- 상단 툴바 -->
           <v-sheet
             class="bg-shades-transparent d-flex flex-wrap align-center mb-2"
           >
@@ -406,8 +519,8 @@ onMounted(() => {
                 class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
               >
                 <v-chip color="primary"
-                  >총 {{ data.totalDataLength.toLocaleString() }}개
-                </v-chip>
+                  >총 {{ data.totalElements.toLocaleString() }}개</v-chip
+                >
               </v-sheet>
               <v-sheet class="bg-shades-transparent">
                 <v-responsive max-width="140" min-width="140" class="mb-2">
@@ -420,28 +533,20 @@ onMounted(() => {
                     variant="outlined"
                     color="primary"
                     hide-details
-                    @update:model-value="changePageNum(1)"
-                  ></v-select>
+                    @update:model-value="changePageSize"
+                  />
                 </v-responsive>
               </v-sheet>
             </v-sheet>
-            <v-sheet class="justify-end mb-2 mr-3" @click="handleTerminate">
-              <v-btn color="primary">Terminate </v-btn>
-            </v-sheet>
-            <v-sheet class="justify-end mb-2 mr-3" @click="handleRetry">
-              <v-btn color="primary">Retry </v-btn>
-            </v-sheet>
-            <v-sheet class="justify-end mb-2 mr-3" @click="handleClone">
-              <v-btn color="primary">Clone </v-btn>
-            </v-sheet>
-            <v-sheet class="justify-end mb-2 mr-3" @click="openComparePage">
-              <v-btn color="primary">Compare </v-btn>
-            </v-sheet>
-            <v-sheet class="justify-end mb-2" @click="openCreateExecution">
-              <v-btn color="primary">Execution </v-btn>
-            </v-sheet>
+
+            <!-- <v-sheet class="justify-end mb-2">
+              <v-btn color="primary" @click="openCreateModal"
+                >Create Experiment</v-btn
+              >
+            </v-sheet> -->
           </v-sheet>
 
+          <!-- 목록 -->
           <v-card class="rounded-lg pa-8">
             <v-col cols="12">
               <v-sheet>
@@ -449,12 +554,9 @@ onMounted(() => {
                   density="comfortable"
                   fixed-header
                   height="625"
-                  col-md-12
-                  col-12
                   overflow-x-auto
                 >
                   <colgroup>
-                    <col style="width: 5%" />
                     <col
                       v-for="(item, i) in tableHeader"
                       :key="i"
@@ -463,20 +565,11 @@ 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"
                         class="text-center font-weight-bold"
-                        :style="`${item.style}`"
+                        :style="item.style"
                       >
                         {{ item.label }}
                       </th>
@@ -484,21 +577,12 @@ onMounted(() => {
                   </thead>
                   <tbody class="text-body-2">
                     <tr
-                      v-for="(item, i) in pagedResults"
-                      :key="item.run_id || item.no || i"
+                      v-for="(item, i) in data.results"
+                      :key="i"
                       class="text-center"
                     >
-                      <td>
-                        <v-checkbox
-                          v-model="data.selected"
-                          :value="{ deviceKey: item.deviceKey }"
-                          hide-details
-                          style="min-width: 36px"
-                        />
-                      </td>
-
-                      <td>{{ displayNo(i) }}</td>
-                      <td>{{ item.name }}</td>
+                      <td>{{ item.no }}</td>
+                      <td class="text-truncate">{{ item.name }}</td>
                       <td>
                         <v-icon v-if="item.status === 'Succeeded'" color="green"
                           >mdi-check-circle</v-icon
@@ -515,13 +599,20 @@ onMounted(() => {
                       <td>{{ item.registryStatus }}</td>
                       <td style="white-space: nowrap">
                         <IconInfoBtn @on-click="openInfoModal(item)" />
-                        <IconModifyBtn @on-click="openModifyModal(item)" />
-                        <IconDownloadBtn @on-click="openDownloadModal(item)" />
+                        <IconDownloadBtn />
+                        <IconDeleteBtn
+                          @on-click="
+                            removeData([
+                              { deviceKey: item.raw?.id ?? item.run_id },
+                            ])
+                          "
+                        />
                       </td>
                     </tr>
                   </tbody>
                 </v-table>
               </v-sheet>
+
               <v-card-actions class="text-center mt-8 justify-center">
                 <v-pagination
                   v-model="data.params.pageNum"
@@ -530,33 +621,31 @@ onMounted(() => {
                   color="primary"
                   rounded="circle"
                   @update:model-value="changePageNum"
-                ></v-pagination>
+                />
               </v-card-actions>
             </v-col>
           </v-card>
         </v-card>
       </v-card>
-      <v-dialog v-model="execDialogOpen" max-width="800" persistent>
-        <ExecutionBaseDialog
-          :model-value="execDialogOpen"
-          :mode="execMode"
-          :selectedData="execSelected"
-          :workflowList="workflowList"
-          :executionTypes="executionTypes"
-          @update:modelValue="execDialogOpen = $event"
-        />
-      </v-dialog>
     </v-container>
-  </div>
-  <div class="w-100" v-else-if="openCompare">
-    <CompareComponent @close="closeCompare" />
+
+    <!-- 생성 다이얼로그 -->
+    <v-dialog v-model="data.isCreateVisible" max-width="600" persistent>
+      <ExperimentCreateDialog
+        :edit-data="data.selectedData"
+        :mode="data.modalMode"
+        @close-modal="closeModal"
+        @saved="onSaved"
+        @handle-data="() => {}"
+      />
+    </v-dialog>
   </div>
 
-  <div class="w-100" v-else-if="openView">
+  <div class="w-100" v-else>
     <ViewComponent
       v-if="openView"
-      :experimentInfo="execSelected"
-      @close="closeView"
+      :id="execSelected.deviceKey"
+      :onClose="closeView"
     />
   </div>
 </template>
diff --git a/src/components/templates/run/executions/ListComponentback.vue b/src/components/templates/run/executions/ListComponentback.vue
new file mode 100644
index 0000000..5869825
--- /dev/null
+++ b/src/components/templates/run/executions/ListComponentback.vue
@@ -0,0 +1,564 @@
+<script setup lang="ts">
+import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
+import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
+import { computed, onMounted, ref, watch } from "vue";
+import IconDownloadBtn from "@/components/atoms/button/IconDownloadBtn.vue";
+import CompareComponent from "@/components/templates/run/executions/CompareComponent.vue";
+import ViewComponent from "@/components/templates/run/executions/ViewComponent.vue";
+import ExecutionBaseDialog from "@/components/atoms/organisms/ExecutionBaseDialog.vue";
+import { ExecutionsService } from "@/components/service/management/ExecutionsService";
+// const store = commonStore();
+
+const openCompare = ref(false);
+const openView = ref(false);
+const runsLoading = ref(false);
+
+// ✅ 파라미터 없이 1회 호출만 해서 콘솔에 출력
+// ✅ 상태 라벨 매핑 (아이콘 로직이 'Succeeded'/'Failed' 기준이라 맞춰줌)
+function toUiStatus(state?: string) {
+  switch ((state || "").toUpperCase()) {
+    case "SUCCEEDED":
+      return "Succeeded";
+    case "FAILED":
+      return "Failed";
+    case "RUNNING":
+      return "Running";
+    case "PENDING":
+      return "Pending";
+    case "SKIPPED":
+      return "Skipped";
+    default:
+      return state || "-";
+  }
+}
+
+// ✅ 시간 포맷/지속시간 유틸
+function fmtStart(start?: string) {
+  if (!start) return "-";
+  const d = new Date(start);
+  if (isNaN(d.getTime())) return start;
+  const yyyy = d.getFullYear();
+  const MM = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mi = String(d.getMinutes()).padStart(2, "0");
+  return `${yyyy}-${MM}-${dd} ${hh}:${mi}`;
+}
+function fmtDuration(start?: string, end?: string) {
+  if (!start || !end) return "-";
+  const ms = new Date(end).getTime() - new Date(start).getTime();
+  if (!isFinite(ms) || ms < 0) return "-";
+  const s = Math.floor(ms / 1000);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${h}:${pad(m)}:${pad(sec)}`;
+}
+const displayNo = (i: number) => {
+  const start = (data.value.params.pageNum - 1) * data.value.params.pageSize;
+  return data.value.totalDataLength - (start + i);
+};
+async function loadRunsAll() {
+  runsLoading.value = true;
+  try {
+    const all: any[] = [];
+
+    // 1페이지
+    let resp = await ExecutionsService.search({
+      page_size: 500,
+    } as any);
+    all.push(...(resp?.data?.runs ?? []));
+
+    // 다음 토큰 추출(스네이크/카멜 모두 대비)
+    let token: string | undefined =
+      resp?.data?.next_page_token ?? resp?.data?.nextPageToken;
+
+    // 다음 페이지들
+    const seen = new Set<string>();
+    while (token && !seen.has(token)) {
+      seen.add(token);
+
+      // ✅ 무조건 token을 넣어서 호출 (snake/camel 둘 다 넣기)
+      resp = await ExecutionsService.search({
+        page_token: token,
+        pageToken: token,
+        page_size: 500,
+      } as any);
+
+      all.push(...(resp?.data?.runs ?? []));
+      token = resp?.data?.next_page_token ?? resp?.data?.nextPageToken;
+    }
+
+    // 중복 방지
+    const dedup = Array.from(
+      new Map(all.map((r: any) => [r?.run_id ?? r?.id ?? r?.name, r])).values(),
+    );
+
+    // 테이블 행으로 매핑
+    data.value.results = dedup.map((r: any, idx: number) => ({
+      no: idx + 1,
+      name: r?.display_name ?? r?.name ?? r?.run_id ?? "(no name)",
+      status: toUiStatus(r?.state),
+      duration: fmtDuration(r?.created_at, r?.finished_at),
+      experiment: r?.experiment_id ?? "-",
+      workflow:
+        r?.pipeline_version_reference?.pipeline_id ??
+        r?.pipeline_version_reference?.pipeline_version_id ??
+        "-",
+      startTime: fmtStart(r?.created_at),
+      registryStatus: r?.storage_state ?? "-",
+      run_id: r?.run_id,
+      raw: r,
+    }));
+
+    experimentOptions.value = Array.from(
+      new Set(data.value.results.map((r: any) => String(r.experiment || "-"))),
+    ).filter((v) => v && v !== "-");
+
+    workflowOptions.value = Array.from(
+      new Set(data.value.results.map((r: any) => String(r.workflow || "-"))),
+    ).filter((v) => v && v !== "-");
+    data.value.totalDataLength = data.value.results.length;
+    setPaginationLength();
+  } catch (e: any) {
+    console.error("[Runs] 호출 실패:", e?.response?.data ?? e);
+  } finally {
+    runsLoading.value = false;
+  }
+}
+
+const pagedResults = computed(() => {
+  const { pageNum, pageSize } = data.value.params;
+  const start = (pageNum - 1) * pageSize;
+  return data.value.results.slice(start, start + pageSize);
+});
+const tableHeader = [
+  { label: "No", width: "5%", style: "word-break: keep-all;" },
+  { label: "Execution Name", width: "20%", style: "word-break: keep-all;" },
+  { label: "Status", width: "10%", style: "word-break: keep-all;" },
+  { label: "Duration", width: "10%", style: "word-break: keep-all;" },
+  { label: "Experiment", width: "15%", style: "word-break: keep-all;" },
+  { label: "Workflow", width: "15%", style: "word-break: keep-all;" },
+  { label: "Start Time", width: "15%", style: "word-break: keep-all;" },
+  { label: "Registry Status", width: "10%", style: "word-break: keep-all;" },
+  { label: "Action", width: "5%", style: "word-break: keep-all;" },
+];
+
+const searchOptions = [
+  { searchType: "All", searchText: "" },
+  { searchType: "Execution Name", searchText: "name" },
+  { searchType: "Status", searchText: "status" },
+  { searchType: "Duration", searchText: "duration" },
+  { searchType: "Experiment", searchText: "experiment" },
+  { searchType: "Workflow", searchText: "workflow" },
+  { searchType: "Registry Status", searchText: "registryStatus" },
+];
+
+const experimentOptions = ref<string[]>([]);
+const workflowOptions = ref<string[]>([]);
+const execDialogOpen = ref(false);
+const execMode = ref<"create" | "edit" | "clone">("create");
+const execSelected = ref<any>(null);
+const searchExperimentOptions = [{ searchType: "Experiment", searchText: "" }];
+const searchWorkflowOptions = [{ searchType: "Workflow", searchText: "" }];
+
+const workflowList = ref(["pipeline-a", "pipeline-b", "pipeline-c"]);
+const executionTypes = ref(["One-off", "Recurring"]);
+
+const pageSizeOptions = [
+  { text: "10 페이지", value: 10 },
+  { text: "50 페이지", value: 50 },
+  { text: "100 페이지", value: 100 },
+];
+
+const data = ref({
+  params: {
+    pageNum: 1,
+    pageSize: 10,
+    searchType: "",
+    searchText: "",
+    experimentFilter: "",
+    workflowFilter: "",
+  },
+  results: [],
+  totalDataLength: 0,
+  pageLength: 0,
+  modalMode: "",
+  selectedData: null,
+  allSelected: false,
+  selected: [],
+  isModalVisible: false,
+  isConfirmDialogVisible: false,
+  userOption: [],
+});
+
+const filteredResults = computed(() => {
+  const { searchType, searchText, experimentFilter, workflowFilter } =
+    data.value.params;
+
+  let list = data.value.results;
+
+  // 실드롭다운 필터
+  if (experimentFilter) {
+    list = list.filter((r) => String(r.experiment).includes(experimentFilter));
+  }
+  if (workflowFilter) {
+    list = list.filter((r) => String(r.workflow).includes(workflowFilter));
+  }
+
+  // 텍스트 검색
+  const q = (searchText || "").trim().toLowerCase();
+  if (q) {
+    if (!searchType) {
+      // All: 여러 필드 OR 매칭
+      list = list.filter((r) => {
+        const pool = [
+          r.name,
+          r.status,
+          r.duration,
+          r.experiment,
+          r.workflow,
+          r.registryStatus,
+          r.startTime,
+        ];
+        return pool.some((v) =>
+          String(v ?? "")
+            .toLowerCase()
+            .includes(q),
+        );
+      });
+    } else {
+      list = list.filter((r) =>
+        String(r[searchType] ?? "")
+          .toLowerCase()
+          .includes(q),
+      );
+    }
+  }
+
+  return list;
+});
+const setPaginationLength = () => {
+  if (data.value.totalDataLength % data.value.params.pageSize === 0) {
+    data.value.pageLength =
+      data.value.totalDataLength / data.value.params.pageSize;
+  } else {
+    data.value.pageLength = Math.ceil(
+      data.value.totalDataLength / data.value.params.pageSize,
+    );
+  }
+};
+
+const handleTerminate = () => {
+  alert("Terminate 작업 진행중...");
+};
+const handleRetry = () => {
+  alert("Retry 작업 진행중...");
+};
+const handleClone = () => {
+  alert("Clone 작업 진행중...");
+};
+
+const changePageNum = (page) => {
+  data.value.params.pageNum = page;
+};
+const openCreateExecution = () => {
+  execMode.value = "create";
+  execSelected.value = null;
+  execDialogOpen.value = true;
+};
+
+const openComparePage = () => {
+  openCompare.value = true;
+  openView.value = false;
+};
+const openInfoModal = (item: any) => {
+  execSelected.value = item;
+  console.log("[Parent] 선택된 실행:", item);
+  openView.value = true;
+  openCompare.value = false;
+};
+const openModifyModal = (selectedItem) => {
+  execMode.value = "edit";
+  execDialogOpen.value = true;
+};
+
+const openDownloadModal = () => {
+  data.value.selectedData = null;
+  data.value.modalMode = "download";
+};
+function closeCompare() {
+  openCompare.value = false;
+}
+function closeView() {
+  openView.value = false;
+}
+
+const getSelectedAllData = () => {
+  data.value.selected = data.value.allSelected
+    ? data.value.results.map((item) => {
+        return {
+          deviceKey: item.deviceKey,
+        };
+      })
+    : [];
+};
+
+onMounted(() => {
+  loadRunsAll();
+});
+</script>
+
+<template>
+  <div class="w-100" v-if="!openCompare && !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">Executions</div>
+            </div>
+          </v-card-item>
+        </v-card>
+        <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="searchOptions"
+                  item-title="searchType"
+                  item-value="searchText"
+                  hide-details
+                ></v-select>
+              </v-responsive>
+              <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="searchExperimentOptions"
+                  item-title="searchType"
+                  item-value="searchText"
+                  hide-details
+                ></v-select>
+              </v-responsive>
+              <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="searchWorkflowOptions"
+                  item-title="searchType"
+                  item-value="searchText"
+                  hide-details
+                ></v-select>
+              </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="changePageNum(1)"
+                ></v-text-field>
+              </v-responsive>
+
+              <div class="ml-3">
+                <v-btn
+                  size="large"
+                  color="primary"
+                  :rounded="5"
+                  @click="changePageNum(1)"
+                >
+                  <v-icon> mdi-magnify</v-icon>
+                </v-btn>
+              </div>
+            </div>
+          </v-card>
+
+          <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.totalDataLength.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="pageSizeOptions"
+                    item-title="text"
+                    item-value="value"
+                    variant="outlined"
+                    color="primary"
+                    hide-details
+                    @update:model-value="changePageNum(1)"
+                  ></v-select>
+                </v-responsive>
+              </v-sheet>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2 mr-3" @click="handleTerminate">
+              <v-btn color="primary">Terminate </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2 mr-3" @click="handleRetry">
+              <v-btn color="primary">Retry </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2 mr-3" @click="handleClone">
+              <v-btn color="primary">Clone </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2 mr-3" @click="openComparePage">
+              <v-btn color="primary">Compare </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2" @click="openCreateExecution">
+              <v-btn color="primary">Execution </v-btn>
+            </v-sheet>
+          </v-sheet>
+
+          <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 style="width: 5%" />
+                    <col
+                      v-for="(item, i) in tableHeader"
+                      :key="i"
+                      :style="`width:${item.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"
+                        :key="i"
+                        class="text-center font-weight-bold"
+                        :style="`${item.style}`"
+                      >
+                        {{ item.label }}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody class="text-body-2">
+                    <tr
+                      v-for="(item, i) in pagedResults"
+                      :key="item.run_id || item.no || i"
+                      class="text-center"
+                    >
+                      <td>
+                        <v-checkbox
+                          v-model="data.selected"
+                          :value="{ deviceKey: item.deviceKey }"
+                          hide-details
+                          style="min-width: 36px"
+                        />
+                      </td>
+
+                      <td>{{ displayNo(i) }}</td>
+                      <td>{{ item.name }}</td>
+                      <td>
+                        <v-icon v-if="item.status === 'Succeeded'" color="green"
+                          >mdi-check-circle</v-icon
+                        >
+                        <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>
+                      </td>
+                      <td>{{ item.duration }}</td>
+                      <td>{{ item.experiment }}</td>
+                      <td>{{ item.workflow }}</td>
+                      <td>{{ item.startTime }}</td>
+                      <td>{{ item.registryStatus }}</td>
+                      <td style="white-space: nowrap">
+                        <IconInfoBtn @on-click="openInfoModal(item)" />
+                        <IconModifyBtn @on-click="openModifyModal(item)" />
+                        <IconDownloadBtn @on-click="openDownloadModal(item)" />
+                      </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-pagination>
+              </v-card-actions>
+            </v-col>
+          </v-card>
+        </v-card>
+      </v-card>
+      <v-dialog v-model="execDialogOpen" max-width="800" persistent>
+        <ExecutionBaseDialog
+          :model-value="execDialogOpen"
+          :mode="execMode"
+          :selectedData="execSelected"
+          :workflowList="workflowList"
+          :executionTypes="executionTypes"
+          @update:modelValue="execDialogOpen = $event"
+        />
+      </v-dialog>
+    </v-container>
+  </div>
+  <div class="w-100" v-else-if="openCompare">
+    <CompareComponent @close="closeCompare" />
+  </div>
+
+  <div class="w-100" v-else-if="openView">
+    <ViewComponent
+      v-if="openView"
+      :experimentInfo="execSelected"
+      @close="closeView"
+    />
+  </div>
+</template>
+
+<style scoped></style>