From 25e86d31a9162bb7547fab56ab57cafaddcc17e3 Mon Sep 17 00:00:00 2001
From: jschoi <jschoi@cuuva.com>
Date: Mon, 14 Jul 2025 10:33:39 +0900
Subject: [PATCH] =?UTF-8?q?[ADD]=20home,run=20page=20=ED=8D=BC=EB=B8=94?=
 =?UTF-8?q?=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LayoutComponent.vue     |  39 +-
 src/components/home/ListComponent.vue         | 308 ++++++++++
 .../run/excutions/ListComponent.vue           | 563 ++++++++++++++++++
 .../run/experiment/FormComponent.vue          |  73 +++
 .../run/experiment/ListComponent.vue          | 504 ++++++++++++++++
 .../run/experiment/ViewComponent.vue          | 386 ++++++++++++
 src/components/workflow/ListComponent.vue     | 218 ++++---
 src/pages/ExcutionsView.vue                   |   7 +-
 src/pages/ExperimentView.vue                  |   7 +-
 src/pages/HomeView.vue                        |   9 +-
 src/pages/WorkflowView.vue                    |   8 +-
 src/router/index.js                           |  19 +-
 src/views/Select.vue                          |  92 +++
 13 files changed, 2080 insertions(+), 153 deletions(-)
 create mode 100644 src/components/home/ListComponent.vue
 create mode 100644 src/components/run/excutions/ListComponent.vue
 create mode 100644 src/components/run/experiment/FormComponent.vue
 create mode 100644 src/components/run/experiment/ListComponent.vue
 create mode 100644 src/components/run/experiment/ViewComponent.vue
 create mode 100644 src/views/Select.vue

diff --git a/src/components/common/LayoutComponent.vue b/src/components/common/LayoutComponent.vue
index 898508d..bf5d0b7 100644
--- a/src/components/common/LayoutComponent.vue
+++ b/src/components/common/LayoutComponent.vue
@@ -1,8 +1,9 @@
 <script setup>
-import {useRoute, useRouter} from "vue-router";
-import {storage} from "@/utils/storage.js";
+import { useRoute, useRouter } from "vue-router";
+import { storage } from "@/utils/storage.js";
 import DrawerComponent from "@/components/common/DrawerComponent.vue";
-import {watchEffect} from "vue";
+import { watchEffect } from "vue";
+import Select from "@/views/Select.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -12,6 +13,9 @@ const menu = ref([]);
 const menuItems = [
   {
     title: "Select Project",
+    click: () => {
+      goSelect();
+    },
   },
   {
     title: "Change Password",
@@ -52,6 +56,10 @@ const pageTitle = computed(() => {
 const pagePath = computed(() => {
   return route.path;
 });
+const goSelect = () => {
+  storage.clearAuth();
+  router.push("/select");
+};
 
 const logOut = () => {
   storage.clearAuth();
@@ -68,19 +76,18 @@ const selectedUserData = ref({});
 watchEffect(() => {
   // const auth = storage.getAuth().auth;
   // if (auth === "ADMIN") {
-    menu.value = menuItems;
+  menu.value = menuItems;
   // } else {
   //   menu.value = userMenuItems;
   // }
 });
-
 </script>
 
 <template>
   <v-app>
-      <v-navigation-drawer v-model="drawer" border="0" hide-overlay permanent>
-        <DrawerComponent />
-      </v-navigation-drawer>
+    <v-navigation-drawer v-model="drawer" border="0" hide-overlay permanent>
+      <DrawerComponent />
+    </v-navigation-drawer>
 
     <v-app-bar class="bg-shades-transparent" flat>
       <v-spacer></v-spacer>
@@ -88,23 +95,18 @@ watchEffect(() => {
         <template v-slot:activator="{ props }">
           <v-tooltip location="bottom" text="settings">
             <template #activator="{ props }">
-              <v-btn
-                icon
-                color="primary"
-                class="mr-3"
-                v-bind="props"
-              >
+              <v-btn icon color="primary" class="mr-3" v-bind="props">
                 <v-icon>mdi-cog</v-icon>
               </v-btn>
             </template>
           </v-tooltip>
-          <v-tooltip location="bottom" text="home">
+          <v-tooltip location="bottom" text="Projact">
             <template #activator="{ props }">
               <v-btn
                 icon
                 color="primary"
                 class="mr-3"
-                @click="goHome"
+                @click="goSelect"
                 v-bind="props"
               >
                 <v-icon>mdi-home</v-icon>
@@ -142,10 +144,7 @@ watchEffect(() => {
         <slot></slot>
       </v-container>
     </v-main>
-
   </v-app>
 </template>
 
-<style scoped lang="sass">
-
-</style>
+<style scoped lang="sass"></style>
diff --git a/src/components/home/ListComponent.vue b/src/components/home/ListComponent.vue
new file mode 100644
index 0000000..de25302
--- /dev/null
+++ b/src/components/home/ListComponent.vue
@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import Plotly from "plotly.js-dist-min";
+
+const pieChartRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  if (pieChartRef.value) {
+    Plotly.newPlot(
+      pieChartRef.value,
+      [
+        {
+          values: [40, 25, 20, 15],
+          labels: ["Success", "Pending", "Failed", "Cancelled"],
+          type: "pie",
+          marker: {
+            colors: ["#4caf50", "#ff9800", "#f44336", "#9e9e9e"],
+          },
+          textinfo: "label+percent",
+          textfont: { color: "#fff", size: 14 },
+          hole: 0.4,
+        },
+      ],
+      {
+        paper_bgcolor: "#1e1e1e",
+        plot_bgcolor: "#1e1e1e",
+        showlegend: true,
+        legend: {
+          font: { color: "#ffffff", size: 12 },
+          orientation: "h",
+          x: 0.5,
+          xanchor: "center",
+          y: -0.2,
+        },
+        margin: { t: 20, b: 40, l: 0, r: 0 },
+      },
+      { displayModeBar: false },
+    );
+  }
+});
+
+const recentRuns = [
+  { name: "Model A - v1", status: "success", time: "2025-05-12 09:12" },
+  { name: "Model B - tuning", status: "success", time: "2025-05-14 08:59" },
+  { name: "Model C - test run", status: "failed", time: "2025-05-13 18:13" },
+];
+
+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 dummyWorkflow = [
+  { title: "Volcano Test Pipeline", date: "2025-05-13 08:12" },
+  { title: "Volcano Test Pipeline", date: "2025-05-13 08:12" },
+  { title: "XGBoost Training", date: "2025-05-13 08:12" },
+  { title: "Data Preprocess Flow", date: "2025-05-13 08:12" },
+];
+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: [],
+});
+
+const getSelectedAllData = () => {
+  data.value.selected = data.value.allSelected
+    ? data.value.results.map(({ deviceKey }) => ({ deviceKey }))
+    : [];
+};
+</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">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, idx) in dummyWorkflow" :key="idx">
+                <template #title>
+                  <div class="d-flex justify-space-between align-center w-100">
+                    <span class="text-body-2 font-weight-medium">{{
+                      item.title
+                    }}</span>
+                    <span class="text-caption text-grey-lighten-1">{{
+                      item.date
+                    }}</span>
+                  </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">Recent Run</h3>
+          </div>
+          <div style="overflow-y: auto; max-height: 300px; padding: 8px 16px">
+            <v-list density="comfortable">
+              <v-list-item
+                v-for="(run, idx) in recentRuns"
+                :key="idx"
+                class="py-2"
+              >
+                <div class="d-flex align-center">
+                  <v-avatar
+                    size="28"
+                    :color="
+                      run.status === 'success'
+                        ? 'green lighten-1'
+                        : 'red lighten-1'
+                    "
+                  >
+                    <v-icon size="20" color="white">
+                      {{ run.status === "success" ? "mdi-check" : "mdi-close" }}
+                    </v-icon>
+                  </v-avatar>
+
+                  <div
+                    class="d-flex flex-column text-right ml-4"
+                    style="flex: 1"
+                  >
+                    <span class="font-weight-medium text-body-2">
+                      {{ run.name }}
+                    </span>
+                    <span class="text-caption text-grey-darken-1">
+                      {{ run.time }}
+                    </span>
+                  </div>
+                </div>
+              </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">
+            <h3 class="text-subtitle-1 font-weight-bold mb-0">
+              Dataset Update Activity
+            </h3>
+          </div>
+          <div style="overflow-y: auto; max-height: 300px; padding: 8px 16px">
+            <v-list dense>
+              <v-list-item v-for="(data, idx) in datasetUpdates" :key="idx">
+                <v-list-item-title>{{ data.name }}</v-list-item-title>
+                <v-progress-linear
+                  :model-value="data.count * 10"
+                  height="8"
+                  color="primary"
+                  class="mt-1"
+                />
+                <v-list-item-subtitle
+                  >{{ data.count }} updates</v-list-item-subtitle
+                >
+              </v-list-item>
+            </v-list>
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <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">
+          <span class="text-subtitle-1 font-weight-bold">Model Deployment</span>
+        </div>
+        <v-btn
+          variant="text"
+          class="text-caption font-weight-bold"
+          append-icon="mdi-arrow-right"
+          style="text-transform: none"
+        >
+          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}`"
+              />
+            </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 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>
+            </tbody>
+          </v-table>
+        </v-sheet>
+      </v-col>
+    </v-card>
+  </v-container>
+</template>
+
+<style scoped>
+ul {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 8px;
+}
+li {
+  margin-bottom: 8px;
+}
+</style>
diff --git a/src/components/run/excutions/ListComponent.vue b/src/components/run/excutions/ListComponent.vue
new file mode 100644
index 0000000..2bbce78
--- /dev/null
+++ b/src/components/run/excutions/ListComponent.vue
@@ -0,0 +1,563 @@
+<script setup lang="ts">
+import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
+import { onMounted, ref, watch } from "vue";
+import FormComponent from "../experiment/FormComponent.vue";
+import IconDownloadBtn from "@/components/button/IconDownloadBtn.vue";
+
+// const store = commonStore();
+
+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 searchExperimentOptions = [{ searchType: "Experiment", searchText: "" }];
+const searchWorkflowOptions = [{ searchType: "Workflow", searchText: "" }];
+const pageSizeOptions = [
+  { text: "10 페이지", value: 10 },
+  { text: "50 페이지", value: 50 },
+  { text: "100 페이지", value: 100 },
+];
+
+const data = ref({
+  params: {
+    pageNum: 1,
+    pageSize: 10,
+    searchType: "",
+    searchText: "",
+  },
+  results: [],
+  totalDataLength: 0,
+  pageLength: 0,
+  modalMode: "",
+  selectedData: null,
+  allSelected: false,
+  selected: [],
+  isModalVisible: false,
+  isConfirmDialogVisible: false,
+  userOption: [],
+});
+
+const getCodeList = () => {
+  // UserService.search(data.value.params).then((d) => {
+  //   if (d.status === 200) {
+  //     data.value.userOption = d.data.userList;
+  //   }
+  // });
+};
+
+const getData = () => {
+  const params = { ...data.value.params };
+  if (params.searchType === "" || params.searchText === "") {
+    delete params.searchType;
+    delete params.searchText;
+  }
+  data.value.results = [
+    {
+      no: 11,
+      name: "run-batch32-lr0.001",
+      status: "Succeeded",
+      duration: "0:00:21",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-20 10:12",
+      registryStatus: "Registered",
+    },
+    {
+      no: 10,
+      name: "run-batch64-lr0.001",
+      status: "Failed",
+      duration: "0:00:20",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-20 09:10",
+      registryStatus: "Not Registered",
+    },
+    {
+      no: 9,
+      name: "run-batch32-lr0.0005",
+      status: "Succeeded",
+      duration: "0:00:21",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-19 10:12",
+      registryStatus: "Registered",
+    },
+    {
+      no: 8,
+      name: "run-batch64-lr0.0005",
+      status: "Running",
+      duration: "0:00:20",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-18 11:50",
+      registryStatus: "Not Registered",
+    },
+    {
+      no: 7,
+      name: "run-augmented-data",
+      status: "Succeeded",
+      duration: "0:00:20",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-17 09:12",
+      registryStatus: "Registered",
+    },
+    {
+      no: 6,
+      name: "run-augmented-data",
+      status: "Succeeded",
+      duration: "0:00:20",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-17 09:12",
+      registryStatus: "Registered",
+    },
+    {
+      no: 5,
+      name: "run-augmented-data",
+      status: "Succeeded",
+      duration: "0:00:20",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-17 09:12",
+      registryStatus: "Registered",
+    },
+  ];
+  data.value.totalDataLength = data.value.results.length;
+  setPaginationLength();
+  // DeviceService.search(params).then((d) => {
+  //   if (d.status === 200) {
+  //     data.value.results = d.data.deviceList;
+  //     data.value.totalDataLength = d.data.totalCount;
+  //     setTimeout(() => {
+  //       setPaginationLength();
+  //     }, 200);
+  //   } else {
+  //     store.setSnackbarMsg({
+  //       text: "디바이스 조회 실패",
+  //       color: "error",
+  //     });
+  //   }
+  // });
+  // DeviceService.search().then((d) => {
+  //   data.value.totalDataLength = d.data.totalCount;
+  //   setTimeout(() => {
+  //     setPaginationLength();
+  //   }, 200);
+  // });
+};
+
+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 saveData = (formData) => {
+  if (data.value.modalMode === "create") {
+    // DeviceService.add(formData).then((d) => {
+    //   if (d.status === 200) {
+    //     data.value.isModalVisible = false;
+    //     store.setSnackbarMsg({
+    //       text: "등록 되었습니다.",
+    //       result: 200,
+    //     });
+    //     changePageNum(1);
+    //   } else {
+    //     store.setSnackbarMsg({
+    //       text: d,
+    //       result: 500,
+    //     });
+    //   }
+    // });
+  } else {
+    // DeviceService.update(formData.deviceKey, formData).then((d) => {
+    //   if (d.status === 200) {
+    //     data.value.isModalVisible = false;
+    //     store.setSnackbarMsg({
+    //       text: "수정 되었습니다.",
+    //       result: 200,
+    //     });
+    //     changePageNum();
+    //   } else {
+    //     store.setSnackbarMsg({
+    //       text: d,
+    //       result: 500,
+    //     });
+    //   }
+    // });
+  }
+};
+
+const removeData = (value) => {
+  let removeList = value ? value : data.value.selected;
+  const remove = (code) => {
+    // return DeviceService.delete(code).then((d) => {
+    //   if (d.status !== 200) {
+    //     store.setSnackbarMsg({
+    //       text: d,
+    //       result: 500,
+    //     });
+    //   }
+    // });
+  };
+
+  if (removeList.length === 1) {
+    remove(removeList[0].deviceKey).then(() => {
+      // store.setSnackbarMsg({
+      //   text: "삭제되었습니다.",
+      //   result: 200,
+      // });
+      changePageNum();
+      data.value.isConfirmDialogVisible = false;
+      data.value.selected = [];
+      data.value.allSelected = false;
+    });
+  } else {
+    Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
+      () => {
+        // store.setSnackbarMsg({
+        //   text: "모두 삭제되었습니다.",
+        //   result: 200,
+        // });
+        changePageNum();
+        data.value.isConfirmDialogVisible = false;
+        data.value.selected = [];
+        data.value.allSelected = false;
+      },
+    );
+  }
+};
+
+const handleRemoveData = () => {
+  if (data.value.selected.length === 0) {
+    // store.setSnackbarMsg({
+    //   text: "삭제 할 데이터를 선택해주세요. ",
+    //   result: 500,
+    // });
+    return;
+  }
+  if (data.value.allSelected || data.value.selected.length !== 1) {
+    data.value.isConfirmDialogVisible = true;
+    return;
+  }
+  //리스트로 삭제 할때
+  removeData(undefined);
+};
+
+const changePageNum = (page) => {
+  data.value.params.pageNum = page;
+  getData();
+};
+
+const openInfoModal = (selectedItem) => {
+  data.value.modalMode = "info";
+};
+const openModifyModal = (selectedItem) => {
+  data.value.selectedData = selectedItem;
+  data.value.modalMode = "modify";
+};
+
+const openDownloadModal = () => {
+  data.value.selectedData = null;
+  data.value.modalMode = "download";
+};
+
+const closeModal = () => {
+  data.value.isModalVisible = false;
+  data.value.selectedData = null;
+};
+
+const getSelectedAllData = () => {
+  data.value.selected = data.value.allSelected
+    ? data.value.results.map((item) => {
+        return {
+          deviceKey: item.deviceKey,
+        };
+      })
+    : [];
+};
+
+onMounted(() => {
+  getData();
+  getCodeList();
+});
+</script>
+
+<template>
+  <!-- <v-dialog v-model="data.isModalVisible" max-width="600" persistent>
+    <FormComponent
+      :edit-data="data.selectedData"
+      :mode="data.modalMode"
+      @close-modal="closeModal"
+      @handle-data="saveData"
+      :user-option="data.userOption"
+    />
+  </v-dialog>
+  <v-dialog v-model="data.isConfirmDialogVisible" persistent max-width="300">
+    <ConfirmDialogComponent
+      @cancel="data.isConfirmDialogVisible = false"
+      @delete="removeData(undefined)"
+      @init="((data.selected = []), (data.allSelected = false))"
+    />
+  </v-dialog> -->
+  <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">Excutions</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">
+            <v-btn color="primary" @click="openCreateModal">Terminate </v-btn>
+          </v-sheet>
+          <v-sheet class="justify-end mb-2 mr-3">
+            <v-btn color="primary" @click="openCreateModal">Retry </v-btn>
+          </v-sheet>
+          <v-sheet class="justify-end mb-2 mr-3">
+            <v-btn color="primary" @click="openCreateModal">Clone </v-btn>
+          </v-sheet>
+          <v-sheet class="justify-end mb-2 mr-3">
+            <v-btn color="primary" @click="openCreateModal">Compare </v-btn>
+          </v-sheet>
+          <v-sheet class="justify-end mb-2">
+            <v-btn color="primary" @click="openCreateModal">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 data.results"
+                    :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>
+                      <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="getData"
+              ></v-pagination>
+            </v-card-actions>
+          </v-col>
+        </v-card>
+      </v-card>
+    </v-card>
+  </v-container>
+  <v-dialog v-model="data.isModalVisible" max-width="600" persistent>
+    <FormComponent
+      :edit-data="data.selectedData"
+      :mode="data.modalMode"
+      @close-modal="closeModal"
+      @handle-data="saveData"
+      :user-option="data.userOption"
+    />
+  </v-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/components/run/experiment/FormComponent.vue b/src/components/run/experiment/FormComponent.vue
new file mode 100644
index 0000000..4b3d387
--- /dev/null
+++ b/src/components/run/experiment/FormComponent.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  editData: Object,
+  mode: String,
+  userOption: Array,
+});
+
+const emit = defineEmits(["handle-data", "close-modal"]);
+
+const visible = ref(true);
+
+const form = ref({
+  name: "",
+  description: "",
+});
+
+const submit = () => {
+  emit("handle-data", form.value);
+};
+</script>
+
+<template>
+  <v-dialog v-model="visible" max-width="500" persistent>
+    <v-card class="rounded-lg overflow-hidden">
+      <!-- 타이틀 영역 -->
+      <v-card-title
+        class="text-white font-weight-bold text-h6"
+        style="background-color: #1976d2"
+      >
+        Create Experiment
+      </v-card-title>
+
+      <v-card-text class="pa-6">
+        <v-form @submit.prevent="submit">
+          <div class="mb-5">
+            <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+              >Experiment Name</label
+            >
+            <v-text-field
+              v-model="form.name"
+              variant="outlined"
+              dense
+              hide-details
+              required
+            />
+          </div>
+
+          <div>
+            <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+              >Description</label
+            >
+            <v-textarea
+              v-model="form.description"
+              variant="outlined"
+              rows="3"
+              dense
+              hide-details
+            />
+          </div>
+        </v-form>
+      </v-card-text>
+
+      <v-card-actions class="justify-end px-6 pb-4">
+        <v-btn color="primary" class="mr-2" @click="submit" variant="flat">
+          CREATE
+        </v-btn>
+        <v-btn variant="text" @click="$emit('close-modal')">CANCEL</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/src/components/run/experiment/ListComponent.vue b/src/components/run/experiment/ListComponent.vue
new file mode 100644
index 0000000..39a0807
--- /dev/null
+++ b/src/components/run/experiment/ListComponent.vue
@@ -0,0 +1,504 @@
+<script setup lang="ts">
+import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
+import IconInfoBtn from "@/components/button/IconInfoBtn.vue";
+import { onMounted, ref, watch } from "vue";
+import FormComponent from "@/components/run/experiment/FormComponent.vue";
+import ViewComponent from "@/components/run/experiment/ViewComponent.vue";
+
+// const store = commonStore();
+const detailDialog = ref(false);
+const viewComponent = ref(false);
+const selectedExperiment = ref<{
+  name: string;
+  description: string;
+  createdDate: string;
+  createdID: string;
+} | null>(null);
+const tableHeader = [
+  {
+    label: "Experiment Name",
+    width: "20%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Description",
+    width: "20%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Created Date",
+    width: "20%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Created ID",
+    width: "20%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Action",
+    width: "20%",
+    style: "word-break: keep-all;",
+  },
+];
+
+const searchOptions = [
+  { searchType: "All", searchText: "" },
+  { searchType: "Experiment Name", searchText: "name" },
+  { searchType: "Description", searchText: "description" },
+  { searchType: "Created Date", searchText: "createdDate" },
+  { searchType: "Created ID", searchText: "createdID" },
+];
+const pageSizeOptions = [
+  { text: "10 페이지", value: 10 },
+  { text: "50 페이지", value: 50 },
+  { text: "100 페이지", value: 100 },
+];
+
+const data = ref({
+  params: {
+    pageNum: 1,
+    pageSize: 10,
+    searchType: "",
+    searchText: "",
+  },
+  results: [],
+  totalDataLength: 0,
+  pageLength: 0,
+  modalMode: "",
+  selectedData: null,
+  allSelected: false,
+  selected: [],
+  isModalVisible: false,
+  isConfirmDialogVisible: false,
+  userOption: [],
+});
+
+const getCodeList = () => {
+  // UserService.search(data.value.params).then((d) => {
+  //   if (d.status === 200) {
+  //     data.value.userOption = d.data.userList;
+  //   }
+  // });
+};
+
+const getData = () => {
+  const params = { ...data.value.params };
+  if (params.searchType === "" || params.searchText === "") {
+    delete params.searchType;
+    delete params.searchText;
+  }
+  data.value.results = [
+    {
+      name: "Baseline Model Training",
+      description: "기본 모델 구조로 학습 성능 측정",
+      createdDate: "2025-04-28",
+      createdID: "ADMIN_001",
+    },
+    {
+      name: "Batch Size Tuning",
+      description: "배치 사이즈 변경에 따른 학습 성능",
+      createdDate: "2025-04-20",
+      createdID: "ADMIN_001",
+    },
+    {
+      name: "Learning Rate Sweep",
+      description: "러닝레이트 변경에 따른 손실 ",
+      createdDate: "2025-04-20",
+      createdID: "ADMIN_001",
+    },
+    {
+      name: "Optimizer Comparison",
+      description: "Adam, SGD 등 옵티마이저 종류",
+      createdDate: "2025-04-20",
+      createdID: "ADMIN_001",
+    },
+    {
+      name: "Model Architecture A vs B",
+      description: "서로 다른 모델 구조",
+      createdDate: "2025-01-28",
+      createdID: "ADMIN_001",
+    },
+  ];
+  data.value.totalDataLength = data.value.results.length;
+  setPaginationLength();
+  // DeviceService.search(params).then((d) => {
+  //   if (d.status === 200) {
+  //     data.value.results = d.data.deviceList;
+  //     data.value.totalDataLength = d.data.totalCount;
+  //     setTimeout(() => {
+  //       setPaginationLength();
+  //     }, 200);
+  //   } else {
+  //     store.setSnackbarMsg({
+  //       text: "디바이스 조회 실패",
+  //       color: "error",
+  //     });
+  //   }
+  // });
+  // DeviceService.search().then((d) => {
+  //   data.value.totalDataLength = d.data.totalCount;
+  //   setTimeout(() => {
+  //     setPaginationLength();
+  //   }, 200);
+  // });
+};
+
+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 saveData = (formData) => {
+  if (data.value.modalMode === "create") {
+    // DeviceService.add(formData).then((d) => {
+    //   if (d.status === 200) {
+    //     data.value.isModalVisible = false;
+    //     store.setSnackbarMsg({
+    //       text: "등록 되었습니다.",
+    //       result: 200,
+    //     });
+    //     changePageNum(1);
+    //   } else {
+    //     store.setSnackbarMsg({
+    //       text: d,
+    //       result: 500,
+    //     });
+    //   }
+    // });
+  } else {
+    // DeviceService.update(formData.deviceKey, formData).then((d) => {
+    //   if (d.status === 200) {
+    //     data.value.isModalVisible = false;
+    //     store.setSnackbarMsg({
+    //       text: "수정 되었습니다.",
+    //       result: 200,
+    //     });
+    //     changePageNum();
+    //   } else {
+    //     store.setSnackbarMsg({
+    //       text: d,
+    //       result: 500,
+    //     });
+    //   }
+    // });
+  }
+};
+
+const removeData = (value) => {
+  let removeList = value ? value : data.value.selected;
+  const remove = (code) => {
+    // return DeviceService.delete(code).then((d) => {
+    //   if (d.status !== 200) {
+    //     store.setSnackbarMsg({
+    //       text: d,
+    //       result: 500,
+    //     });
+    //   }
+    // });
+  };
+
+  if (removeList.length === 1) {
+    remove(removeList[0].deviceKey).then(() => {
+      // store.setSnackbarMsg({
+
+      //   text: "삭제되었습니다.",
+      //   result: 200,
+      // });
+      changePageNum();
+      data.value.isConfirmDialogVisible = false;
+      data.value.selected = [];
+      data.value.allSelected = false;
+    });
+  } else {
+    Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
+      () => {
+        // store.setSnackbarMsg({
+        //   text: "모두 삭제되었습니다.",
+        //   result: 200,
+        // });
+        changePageNum();
+        data.value.isConfirmDialogVisible = false;
+        data.value.selected = [];
+        data.value.allSelected = false;
+      },
+    );
+  }
+};
+
+const handleRemoveData = () => {
+  if (data.value.selected.length === 0) {
+    // store.setSnackbarMsg({
+    //   text: "삭제 할 데이터를 선택해주세요. ",
+    //   result: 500,
+    // });
+    return;
+  }
+  if (data.value.allSelected || data.value.selected.length !== 1) {
+    data.value.isConfirmDialogVisible = true;
+    return;
+  }
+  //리스트로 삭제 할때
+  removeData(undefined);
+};
+
+const changePageNum = (page) => {
+  data.value.params.pageNum = page;
+  getData();
+};
+
+const openDetail = (item: {
+  name: string;
+  description: string;
+  createdDate: string;
+  createdID: string;
+}) => {
+  selectedExperiment.value = item;
+  viewComponent.value = true;
+};
+const closeDetail = () => {
+  viewComponent.value = false;
+  selectedExperiment.value = null;
+};
+const openCreateModal = () => {
+  data.value.selectedData = null;
+  data.value.modalMode = "create";
+  data.value.isModalVisible = true;
+};
+
+const closeModal = () => {
+  data.value.isModalVisible = false;
+  data.value.selectedData = null;
+};
+
+const getSelectedAllData = () => {
+  data.value.selected = data.value.allSelected
+    ? data.value.results.map((item) => {
+        return {
+          deviceKey: item.deviceKey,
+        };
+      })
+    : [];
+};
+
+onMounted(() => {
+  getData();
+  getCodeList();
+});
+</script>
+
+<template>
+  <div class="w-100" v-if="!viewComponent">
+    <!-- <v-dialog v-model="data.isModalVisible" max-width="600" persistent>
+    <FormComponent
+      :edit-data="data.selectedData"
+      :mode="data.modalMode"
+      @close-modal="closeModal"
+      @handle-data="saveData"
+      :user-option="data.userOption"
+    />
+  </v-dialog>
+  <v-dialog v-model="data.isConfirmDialogVisible" persistent max-width="300">
+    <ConfirmDialogComponent
+      @cancel="data.isConfirmDialogVisible = false"
+      @delete="removeData(undefined)"
+      @init="((data.selected = []), (data.allSelected = false))"
+    />
+  </v-dialog> -->
+    <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">Experiment</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 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">
+              <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>
+                <v-table
+                  density="comfortable"
+                  fixed-header
+                  height="625"
+                  col-md-12
+                  col-12
+                  overflow-x-auto
+                >
+                  <colgroup>
+                    <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 data.results"
+                      :key="i"
+                      class="text-center"
+                    >
+                      <!-- <td>
+                      <v-checkbox
+                        v-model="data.selected"
+                        hide-details
+                        :value="{
+                          deviceKey: item.deviceKey,
+                        }"
+                      ></v-checkbox>
+                    </td> -->
+                      <td>{{ item.name }}</td>
+                      <td>{{ item.description }}</td>
+                      <td>{{ item.createdDate }}</td>
+                      <td>{{ item.createdID }}</td>
+                      <td style="white-space: nowrap">
+                        <IconInfoBtn @on-click="openDetail(item)" />
+                        <IconDeleteBtn
+                          @on-click="
+                            removeData([{ deviceKey: item.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="getData"
+                ></v-pagination>
+              </v-card-actions>
+            </v-col>
+          </v-card>
+        </v-card>
+      </v-card>
+    </v-container>
+    <v-dialog v-model="data.isModalVisible" max-width="600" persistent>
+      <FormComponent
+        :edit-data="data.selectedData"
+        :mode="data.modalMode"
+        @close-modal="closeModal"
+        @handle-data="saveData"
+        :user-option="data.userOption"
+      />
+    </v-dialog>
+  </div>
+  <div class="w-100" v-else>
+    <ViewComponent :experiment="selectedExperiment" @close="closeDetail" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/run/experiment/ViewComponent.vue b/src/components/run/experiment/ViewComponent.vue
new file mode 100644
index 0000000..e12dfe9
--- /dev/null
+++ b/src/components/run/experiment/ViewComponent.vue
@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
+import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
+// import FormComponent from "@/components/device/FormComponent.vue";
+import { onMounted, ref, watch } from "vue";
+
+// const store = commonStore();
+
+const tableHeader = [
+  {
+    label: "Run Name",
+    width: "20%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Status",
+    width: "20%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Duration",
+    width: "20%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Pipeline",
+    width: "20%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Start Time",
+    width: "20%",
+    style: "word-break: keep-all;",
+  },
+];
+const experimentInfo = ref({
+  experimentName: "Baseline Model Training",
+  projectName: "배터리 상태 예측 모델 프로젝트",
+  createdDate: "2025-02-06",
+  createdId: "ADMIN_001",
+  description: "기본 모델 구조로 학습 성능 측정",
+});
+
+const data = ref({
+  params: {
+    pageNum: 1,
+    pageSize: 10,
+    searchType: "",
+    searchText: "",
+  },
+  results: [],
+  totalDataLength: 0,
+  pageLength: 0,
+  modalMode: "",
+  selectedData: null,
+  allSelected: false,
+  selected: [],
+  isModalVisible: false,
+  isConfirmDialogVisible: false,
+  userOption: [],
+});
+
+const getCodeList = () => {
+  // UserService.search(data.value.params).then((d) => {
+  //   if (d.status === 200) {
+  //     data.value.userOption = d.data.userList;
+  //   }
+  // });
+};
+
+const getData = () => {
+  const params = { ...data.value.params };
+  if (params.searchType === "" || params.searchText === "") {
+    delete params.searchType;
+    delete params.searchText;
+  }
+  data.value.results = [
+    {
+      name: "run-batch32-lr0.001",
+      status: "Succeeded",
+      Duration: "0:00:21",
+      configProgress: "0/2",
+      Pipeline: "baseline_train_pipeline",
+      registDt: "2025-06-10T00:00:00Z",
+    },
+    {
+      name: "run-batch64-lr0.001",
+      status: "Failed",
+      Duration: "0:00:21",
+      configProgress: "1/3",
+      Pipeline: "baseline_train_pipeline",
+      registDt: "2025-06-09T00:00:00Z",
+    },
+    {
+      name: "run-batch32-lr0.0005",
+      status: "Succeeded",
+      Duration: "0:00:21",
+      configProgress: "0/3",
+      Pipeline: "baseline_train_pipeline",
+      registDt: "2025-06-01T00:00:00Z",
+    },
+    {
+      name: "run-batch64-lr0.0005",
+      status: "Running",
+      Duration: "0:00:21",
+      configProgress: "1/3",
+      Pipeline: "baseline_train_pipeline",
+      registDt: "2025-05-29T00:00:00Z",
+    },
+    {
+      name: "run-augmented-data",
+      status: "Succeeded",
+      Duration: "0:00:21",
+      configProgress: "0/3",
+      Pipeline: "baseline_train_pipeline",
+      registDt: "2025-05-31T00:00:00Z",
+    },
+  ];
+  data.value.totalDataLength = 5;
+  // DeviceService.search(params).then((d) => {
+  //   if (d.status === 200) {
+  //     data.value.results = d.data.deviceList;
+  //     data.value.totalDataLength = d.data.totalCount;
+  //     setTimeout(() => {
+  //       setPaginationLength();
+  //     }, 200);
+  //   } else {
+  //     store.setSnackbarMsg({
+  //       text: "디바이스 조회 실패",
+  //       color: "error",
+  //     });
+  //   }
+  // });
+  // DeviceService.search().then((d) => {
+  //   data.value.totalDataLength = d.data.totalCount;
+  //   setTimeout(() => {
+  //     setPaginationLength();
+  //   }, 200);
+  // });
+};
+
+// 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 saveData = (formData) => {
+  if (data.value.modalMode === "create") {
+    // DeviceService.add(formData).then((d) => {
+    //   if (d.status === 200) {
+    //     data.value.isModalVisible = false;
+    //     store.setSnackbarMsg({
+    //       text: "등록 되었습니다.",
+    //       result: 200,
+    //     });
+    //     changePageNum(1);
+    //   } else {
+    //     store.setSnackbarMsg({
+    //       text: d,
+    //       result: 500,
+    //     });
+    //   }
+    // });
+  } else {
+    // DeviceService.update(formData.deviceKey, formData).then((d) => {
+    //   if (d.status === 200) {
+    //     data.value.isModalVisible = false;
+    //     store.setSnackbarMsg({
+    //       text: "수정 되었습니다.",
+    //       result: 200,
+    //     });
+    //     changePageNum();
+    //   } else {
+    //     store.setSnackbarMsg({
+    //       text: d,
+    //       result: 500,
+    //     });
+    //   }
+    // });
+  }
+};
+
+const removeData = (value) => {
+  let removeList = value ? value : data.value.selected;
+  const remove = (code) => {
+    // return DeviceService.delete(code).then((d) => {
+    //   if (d.status !== 200) {
+    //     store.setSnackbarMsg({
+    //       text: d,
+    //       result: 500,
+    //     });
+    //   }
+    // });
+  };
+
+  if (removeList.length === 1) {
+    remove(removeList[0].deviceKey).then(() => {
+      // store.setSnackbarMsg({
+      //   text: "삭제되었습니다.",
+      //   result: 200,
+      // });
+      changePageNum();
+      data.value.isConfirmDialogVisible = false;
+      data.value.selected = [];
+      data.value.allSelected = false;
+    });
+  } else {
+    Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
+      () => {
+        // store.setSnackbarMsg({
+        //   text: "모두 삭제되었습니다.",
+        //   result: 200,
+        // });
+        changePageNum();
+        data.value.isConfirmDialogVisible = false;
+        data.value.selected = [];
+        data.value.allSelected = false;
+      },
+    );
+  }
+};
+
+const changePageNum = (page) => {
+  data.value.params.pageNum = page;
+  getData();
+};
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+
+onMounted(() => {
+  getData();
+  getCodeList();
+});
+</script>
+
+<template>
+  <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 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">View Details</div>
+          </div>
+        </v-card-item>
+      </v-card>
+
+      <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
+        <v-card-title class="grey lighten-4 py-2 px-4">
+          <span class="font-weight-bold">Experiment Information</span>
+        </v-card-title>
+        <v-card-text class="px-4 pb-4 pt-2 d-flex justify-center">
+          <tbody>
+            <tr>
+              <th class="text-center pa-3">Experiment Name</th>
+              <td class="text-left" colspan="3">
+                {{ experimentInfo.experimentName }}
+              </td>
+            </tr>
+            <tr>
+              <th class="text-center pa-3">Project Name</th>
+              <td class="text-left" colspan="3">
+                {{ experimentInfo.projectName }}
+              </td>
+            </tr>
+            <tr>
+              <th class="text-center pa-3">Created Date</th>
+              <td class="text-left">{{ experimentInfo.createdDate }}</td>
+              <th class="text-center pa-3">Created ID</th>
+              <td class="text-left">{{ experimentInfo.createdId }}</td>
+            </tr>
+            <tr>
+              <th class="text-center pa-3">Description</th>
+              <td class="text-left" colspan="3">
+                {{ experimentInfo.description }}
+              </td>
+            </tr>
+          </tbody>
+        </v-card-text>
+      </v-card>
+      <v-card flat class="bg-shades-transparent w-100">
+        <v-card class="rounded-lg pa-8">
+          <v-card-title class="grey lighten-4 py-2 px-4">
+            <span class="font-weight-bold">Runs</span>
+          </v-card-title>
+          <v-col cols="12">
+            <v-sheet>
+              <v-table
+                density="comfortable"
+                fixed-header
+                height="300"
+                col-md-12
+                col-12
+                overflow-x-auto
+              >
+                <colgroup>
+                  <col
+                    v-for="(item, i) in tableHeader"
+                    :key="i"
+                    :style="`width:${item.width}`"
+                  />
+                </colgroup>
+                <thead>
+                  <tr>
+                    <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 data.results"
+                    :key="i"
+                    class="text-center"
+                  >
+                    <td>{{ item.name }}</td>
+                    <td>{{ item.status }}</td>
+                    <td>{{ item.Duration }}</td>
+                    <td>{{ item.Pipeline }}</td>
+                    <td>{{ item.registDt }}</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="getData"
+              ></v-pagination>
+            </v-card-actions>
+          </v-col>
+          <v-sheet class="d-flex justify-end mb-2">
+            <v-btn color="primary" @click="emit('close')"> Back to List </v-btn>
+          </v-sheet>
+        </v-card>
+      </v-card>
+    </v-card>
+  </v-container>
+</template>
+
+<style scoped>
+.v-card-text {
+  width: 100% !important;
+  border-collapse: collapse;
+  /* 전체 테이블 1px 테두리 */
+}
+
+.v-card-text th {
+  font-size: 20px;
+  min-width: 400px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background-color: rgba(255, 255, 255, 0.05);
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+}
+.v-card-text td {
+  font-size: 16px;
+  min-width: 600px;
+  padding: 12px 16px;
+  text-align: left;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+.v-card-text tr:nth-child(odd) {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+</style>
diff --git a/src/components/workflow/ListComponent.vue b/src/components/workflow/ListComponent.vue
index aa881d8..1a1ad67 100644
--- a/src/components/workflow/ListComponent.vue
+++ b/src/components/workflow/ListComponent.vue
@@ -78,10 +78,6 @@ const searchOptions = [
     searchType: "디바이스 OS",
     searchText: "deviceOs",
   },
-  {
-    searchType: "디바이스 버전",
-    searchText: "deviceVersion",
-  },
 ];
 
 const pageSizeOptions = [
@@ -123,52 +119,54 @@ const getData = () => {
     delete params.searchType;
     delete params.searchText;
   }
-  data.value.results = [{
-    "no":5,
-    "name": "sentiment-analysis",
-    "version": "v2.0",
-    "stepCount": 2,
-    "configProgress": "0/2",
-    "kubeflowStatus": "Not Uploaded",
-    "registDt": "2025-06-10T00:00:00Z",
-  },
+  data.value.results = [
     {
-      "no":4,
-      "name": "image-classfier",
-      "version": "v2.0",
-      "stepCount": 3,
-      "configProgress": "1/3",
-      "kubeflowStatus": "Not Uploaded",
-      "registDt": "2025-06-09T00:00:00Z",
+      no: 5,
+      name: "sentiment-analysis",
+      version: "v2.0",
+      stepCount: 2,
+      configProgress: "0/2",
+      kubeflowStatus: "Not Uploaded",
+      registDt: "2025-06-10T00:00:00Z",
     },
     {
-      "no":3,
-      "name": "user-clustering",
-      "version": "v1.0",
-      "stepCount": 3,
-      "configProgress": "0/3",
-      "kubeflowStatus": "Not Uploaded",
-      "registDt": "2025-06-01T00:00:00Z",
+      no: 4,
+      name: "image-classfier",
+      version: "v2.0",
+      stepCount: 3,
+      configProgress: "1/3",
+      kubeflowStatus: "Not Uploaded",
+      registDt: "2025-06-09T00:00:00Z",
     },
     {
-      "no":2,
-      "name": "time-series-train",
-      "version": "v1.0",
-      "stepCount": 2,
-      "configProgress": "1/3",
-      "kubeflowStatus": "Not Uploaded",
-      "registDt": "2025-05-29T00:00:00Z",
+      no: 3,
+      name: "user-clustering",
+      version: "v1.0",
+      stepCount: 3,
+      configProgress: "0/3",
+      kubeflowStatus: "Not Uploaded",
+      registDt: "2025-06-01T00:00:00Z",
     },
     {
-      "no":1,
-      "name": "customer-churn-pred",
-      "version": "v1.0",
-      "stepCount": 3,
-      "configProgress": "0/3",
-      "kubeflowStatus": "Not Uploaded",
-      "registDt": "2025-05-31T00:00:00Z",
-    }];
-  data.value.totalDataLength =5;
+      no: 2,
+      name: "time-series-train",
+      version: "v1.0",
+      stepCount: 2,
+      configProgress: "1/3",
+      kubeflowStatus: "Not Uploaded",
+      registDt: "2025-05-29T00:00:00Z",
+    },
+    {
+      no: 1,
+      name: "customer-churn-pred",
+      version: "v1.0",
+      stepCount: 3,
+      configProgress: "0/3",
+      kubeflowStatus: "Not Uploaded",
+      registDt: "2025-05-31T00:00:00Z",
+    },
+  ];
+  data.value.totalDataLength = 5;
   // DeviceService.search(params).then((d) => {
   //   if (d.status === 200) {
   //     data.value.results = d.data.deviceList;
@@ -319,10 +317,10 @@ const closeModal = () => {
 const getSelectedAllData = () => {
   data.value.selected = data.value.allSelected
     ? data.value.results.map((item) => {
-      return {
-        deviceKey: item.deviceKey,
-      };
-    })
+        return {
+          deviceKey: item.deviceKey,
+        };
+      })
     : [];
 };
 
@@ -333,22 +331,22 @@ onMounted(() => {
 </script>
 
 <template>
-<!--  <v-dialog v-model="data.isModalVisible" max-width="600" persistent>-->
-<!--    <FormComponent-->
-<!--      :edit-data="data.selectedData"-->
-<!--      :mode="data.modalMode"-->
-<!--      @close-modal="closeModal"-->
-<!--      @handle-data="saveData"-->
-<!--      :user-option="data.userOption"-->
-<!--    />-->
-<!--  </v-dialog>-->
-<!--  <v-dialog v-model="data.isConfirmDialogVisible" persistent max-width="300">-->
-<!--    <ConfirmDialogComponent-->
-<!--      @cancel="data.isConfirmDialogVisible = false"-->
-<!--      @delete="removeData(undefined)"-->
-<!--      @init="(data.selected = []), (data.allSelected = false)"-->
-<!--    />-->
-<!--  </v-dialog>-->
+  <!--  <v-dialog v-model="data.isModalVisible" max-width="600" persistent>-->
+  <!--    <FormComponent-->
+  <!--      :edit-data="data.selectedData"-->
+  <!--      :mode="data.modalMode"-->
+  <!--      @close-modal="closeModal"-->
+  <!--      @handle-data="saveData"-->
+  <!--      :user-option="data.userOption"-->
+  <!--    />-->
+  <!--  </v-dialog>-->
+  <!--  <v-dialog v-model="data.isConfirmDialogVisible" persistent max-width="300">-->
+  <!--    <ConfirmDialogComponent-->
+  <!--      @cancel="data.isConfirmDialogVisible = false"-->
+  <!--      @delete="removeData(undefined)"-->
+  <!--      @init="(data.selected = []), (data.allSelected = false)"-->
+  <!--    />-->
+  <!--  </v-dialog>-->
   <v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
     <v-card
       flat
@@ -413,7 +411,7 @@ onMounted(() => {
               class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
             >
               <v-chip color="primary"
-              >총 {{ data.totalDataLength.toLocaleString() }}개
+                >총 {{ data.totalDataLength.toLocaleString() }}개
               </v-chip>
             </v-sheet>
             <v-sheet class="bg-shades-transparent">
@@ -434,7 +432,7 @@ onMounted(() => {
           </v-sheet>
           <v-sheet class="justify-end mb-2">
             <v-btn color="error" class="mr-4" @click="handleRemoveData"
-            >선택 삭제
+              >선택 삭제
             </v-btn>
             <v-btn color="success" @click="openCreateModal">등록</v-btn>
           </v-sheet>
@@ -460,55 +458,55 @@ 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}`"
-                  >
-                    {{ item.label }}
-                  </th>
-                </tr>
+                  <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 data.results"
-                  :key="i"
-                  class="text-center"
-                >
-                  <td>
-                    <v-checkbox
-                      v-model="data.selected"
-                      hide-details
-                      :value="{
+                  <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,
                         }"
-                    ></v-checkbox>
-                  </td>
-                  <td>{{ item.no }}</td>
-                  <td>{{ item.name }}</td>
-                  <td>{{ item.version }}</td>
-                  <td>{{ item.stepCount }}</td>
-                  <td>{{ item.configProgress }}</td>
-                  <td>{{ item.kubeflowStatus }}</td>
-                  <td>{{ item.registDt }}</td>
-                  <td style="white-space: nowrap">
-                    <IconModifyBtn @on-click="openModifyModal(item)" />
-                    <IconDeleteBtn
-                      @on-click="removeData([{ deviceKey: item.deviceKey }])"
-                    />
-                  </td>
-                </tr>
+                      ></v-checkbox>
+                    </td>
+                    <td>{{ item.no }}</td>
+                    <td>{{ item.name }}</td>
+                    <td>{{ item.version }}</td>
+                    <td>{{ item.stepCount }}</td>
+                    <td>{{ item.configProgress }}</td>
+                    <td>{{ item.kubeflowStatus }}</td>
+                    <td>{{ item.registDt }}</td>
+                    <td style="white-space: nowrap">
+                      <IconModifyBtn @on-click="openModifyModal(item)" />
+                      <IconDeleteBtn
+                        @on-click="removeData([{ deviceKey: item.deviceKey }])"
+                      />
+                    </td>
+                  </tr>
                 </tbody>
               </v-table>
             </v-sheet>
diff --git a/src/pages/ExcutionsView.vue b/src/pages/ExcutionsView.vue
index 52dbf2f..88b551d 100644
--- a/src/pages/ExcutionsView.vue
+++ b/src/pages/ExcutionsView.vue
@@ -1,10 +1,9 @@
 <script setup>
-
+import ListComponent from "@/components/run/excutions/ListComponent.vue";
 </script>
 
 <template>
+  <ListComponent />
 </template>
 
-<style scoped lang="sass">
-
-</style>
+<style scoped lang="sass"></style>
diff --git a/src/pages/ExperimentView.vue b/src/pages/ExperimentView.vue
index 52dbf2f..c5f3ccb 100644
--- a/src/pages/ExperimentView.vue
+++ b/src/pages/ExperimentView.vue
@@ -1,10 +1,9 @@
 <script setup>
-
+import ListComponent from "@/components/run/experiment/ListComponent.vue";
 </script>
 
 <template>
+  <ListComponent />
 </template>
 
-<style scoped lang="sass">
-
-</style>
+<style scoped lang="sass"></style>
diff --git a/src/pages/HomeView.vue b/src/pages/HomeView.vue
index 52dbf2f..352f6c7 100644
--- a/src/pages/HomeView.vue
+++ b/src/pages/HomeView.vue
@@ -1,10 +1,9 @@
-<script setup>
-
+<script setup lang="ts">
+import ListComponent from "@/components/home/ListComponent.vue";
 </script>
 
 <template>
+  <ListComponent />
 </template>
 
-<style scoped lang="sass">
-
-</style>
+<style scoped></style>
diff --git a/src/pages/WorkflowView.vue b/src/pages/WorkflowView.vue
index bffabe2..444b477 100644
--- a/src/pages/WorkflowView.vue
+++ b/src/pages/WorkflowView.vue
@@ -1,11 +1,9 @@
 <script setup>
-
+import ListComponent from "@/components/workflow/ListComponent.vue";
 </script>
 
 <template>
-<ListComponent/>
+  <ListComponent />
 </template>
 
-<style scoped lang="sass">
-
-</style>
+<style scoped lang="sass"></style>
diff --git a/src/router/index.js b/src/router/index.js
index f667d2e..1c3cf2f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,13 +1,12 @@
 import { createRouter, createWebHistory } from "vue-router";
 import { storage } from "@/utils/storage";
 
-
 const rootPath = import.meta.env.VITE_ROOT_PATH;
 
 const routes = [
   {
     path: `/`,
-    component: () => import('@/layouts/default.vue'),
+    component: () => import("@/layouts/default.vue"),
     redirect: { name: "signin" },
     children: [
       {
@@ -17,7 +16,7 @@ const routes = [
           title: "",
           requiresAuth: false,
         },
-        component: () => import('@/pages/MainView.vue'),
+        component: () => import("@/pages/MainView.vue"),
       },
       {
         name: "home",
@@ -28,6 +27,15 @@ const routes = [
         },
         component: () => import("@/pages/HomeView.vue"),
       },
+      {
+        name: "select",
+        path: `/select`,
+        meta: {
+          title: "select",
+          requiresAuth: false,
+        },
+        component: () => import("@/views/Select.vue"),
+      },
       {
         name: "workflows",
         path: `/workflows`,
@@ -48,7 +56,7 @@ const routes = [
       },
       {
         name: "run",
-        path: `/run`,
+        path: `/run/experiment`,
         meta: {
           title: "Run",
           requiresAuth: false,
@@ -75,6 +83,7 @@ const routes = [
           },
         ],
       },
+
       {
         name: "deployment",
         path: `/deployment`,
@@ -111,7 +120,7 @@ const routes = [
       title: "로그인",
       requiresAuth: false,
     },
-    component: () => import('@/pages/LoginView.vue'),
+    component: () => import("@/pages/LoginView.vue"),
   },
 ];
 
diff --git a/src/views/Select.vue b/src/views/Select.vue
new file mode 100644
index 0000000..1393eba
--- /dev/null
+++ b/src/views/Select.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const projects = ref([
+  {
+    title: "배터리 상태 예측 모델 프로젝트",
+    creator: "ADMIN_001",
+    date: "2025-04-22",
+    description:
+      "센서 데이터를 기반으로 배터리 상태를 예측하는 프로젝트입니다.",
+  },
+  {
+    title: "운전행동 예측 모델 프로젝트",
+    creator: "ADMIN_001",
+    date: "2025-03-02",
+    description: "급가속, 급제동 등 운전 행동을 기반으로 모델을 예측합니다.",
+  },
+  {
+    title: "강화학습 기반 경로 생성 모델 프로젝트",
+    creator: "ADMIN_001",
+    date: "2025-01-20",
+    description: "지도 기반 환경에서 최적 경로를 생성하는 모델입니다.",
+  },
+  {
+    title: "교통 표지판 인식모델 프로젝트",
+    creator: "USER_001",
+    date: "2024-12-12",
+    description: "지도 기반 환경에서 최적 경로를 생성하는 모델입니다.",
+  },
+]);
+</script>
+
+<template>
+  <v-container class="mt-12" style="max-width: 1600px">
+    <v-row class="mb-6" align="center" justify="space-between">
+      <v-col cols="auto">
+        <h2 class="font-weight-bold text-h5">Project Selection</h2>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn
+          color="secondary"
+          variant="flat"
+          class="text-white font-weight-bold"
+          @click="onAddProject"
+        >
+          <v-icon left icon="mdi-plus" size="20" />
+          Create Project
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row dense>
+      <v-col
+        v-for="(project, index) in projects"
+        :key="index"
+        cols="12"
+        sm="6"
+        md="6"
+        lg="6"
+      >
+        <v-card
+          class="pa-4"
+          color="primary"
+          variant="elevated"
+          elevation="6"
+          rounded="lg"
+          @click="() => console.log(`Selected: ${project.title}`)"
+        >
+          <v-card-title class="d-flex align-center">
+            <v-icon color="#6EC1E4" icon="mdi-file" start size="18" />
+            <h4>{{ project.title }}</h4>
+          </v-card-title>
+
+          <v-card-subtitle
+            class="text-white text-caption d-flex justify-space-between"
+          >
+            <span>생성자: {{ project.creator }}</span>
+            <span>등록일: {{ project.date }}</span>
+          </v-card-subtitle>
+
+          <v-card-text
+            class="text-white mt-3 text-body-2"
+            style="white-space: normal"
+          >
+            {{ project.description }}
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped></style>