From 1fbc0626877d0780e091932239229d3effda34e3 Mon Sep 17 00:00:00 2001
From: jschoi <jschoi@cuuva.com>
Date: Wed, 23 Jul 2025 17:16:46 +0900
Subject: [PATCH] =?UTF-8?q?Execution,Experiment=20=ED=8D=BC=EB=B8=94?=
 =?UTF-8?q?=EB=A6=AC=EC=8B=B1=20=EB=B0=8F=20=20monaco-editor=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   3 +-
 package-lock.json                             |   7 +
 package.json                                  |   1 +
 src/components/button/IconSettingBtn.vue      |  27 +
 .../ListComponent.vue                         | 447 ++++++++--------
 .../run/executions/ViewComponent.vue          | 372 +++++++++++++
 .../run/experiment/ListComponent.vue          |  24 +-
 .../run/experiment/ViewComponent.vue          |  93 ++--
 src/components/workflow/ListComponent.vue     | 380 ++++++-------
 src/components/workflow/ViewComponent.vue     | 497 ++++++++++++++++++
 .../{ExcutionsView.vue => ExecutionsView.vue} |   2 +-
 src/router/index.js                           |   8 +-
 src/utils/menuUtils.js                        |   2 +-
 typed-router.d.ts                             |   2 +-
 14 files changed, 1395 insertions(+), 470 deletions(-)
 create mode 100644 src/components/button/IconSettingBtn.vue
 rename src/components/run/{excutions => executions}/ListComponent.vue (53%)
 create mode 100644 src/components/run/executions/ViewComponent.vue
 create mode 100644 src/components/workflow/ViewComponent.vue
 rename src/pages/{ExcutionsView.vue => ExecutionsView.vue} (58%)

diff --git a/components.d.ts b/components.d.ts
index 032d8a5..e769ff9 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -17,10 +17,11 @@ declare module 'vue' {
     IconDownloadBtn: typeof import('./src/components/button/IconDownloadBtn.vue')['default']
     IconInfoBtn: typeof import('./src/components/button/IconInfoBtn.vue')['default']
     IconModifyBtn: typeof import('./src/components/button/IconModifyBtn.vue')['default']
+    IconSettingBtn: typeof import('./src/components/button/IconSettingBtn.vue')['default']
     LayoutComponent: typeof import('./src/components/common/LayoutComponent.vue')['default']
     ListComponent: typeof import('./src/components/home/ListComponent.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    ViewComponent: typeof import('./src/components/run/experiment/ViewComponent.vue')['default']
+    ViewComponent: typeof import('./src/components/run/executions/ViewComponent.vue')['default']
   }
 }
diff --git a/package-lock.json b/package-lock.json
index ff10a4f..4919381 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@fontsource/roboto": "5.2.5",
         "@mdi/font": "7.4.47",
+        "monaco-editor": "^0.52.2",
         "plotly.js-dist-min": "^3.0.1",
         "prettier": "^3.5.3",
         "vue": "^3.5.13",
@@ -4166,6 +4167,12 @@
         "pathe": "^2.0.1"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 9507b67..9fd5be0 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@fontsource/roboto": "5.2.5",
     "@mdi/font": "7.4.47",
+    "monaco-editor": "^0.52.2",
     "plotly.js-dist-min": "^3.0.1",
     "prettier": "^3.5.3",
     "vue": "^3.5.13",
diff --git a/src/components/button/IconSettingBtn.vue b/src/components/button/IconSettingBtn.vue
new file mode 100644
index 0000000..858592f
--- /dev/null
+++ b/src/components/button/IconSettingBtn.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { defineEmits } from "vue";
+
+const emit = defineEmits(["onClick"]);
+
+const onClick = () => {
+  emit("onClick");
+};
+</script>
+
+<template>
+  <v-tooltip location="bottom" text="설정">
+    <template v-slot:activator="{ props }">
+      <v-btn
+        @click="onClick"
+        class="ma-1"
+        icon="mdi-cog-play-outline"
+        color="info"
+        density="comfortable"
+        elevation="0"
+        size="small"
+        v-bind="props"
+      >
+      </v-btn>
+    </template>
+  </v-tooltip>
+</template>
diff --git a/src/components/run/excutions/ListComponent.vue b/src/components/run/executions/ListComponent.vue
similarity index 53%
rename from src/components/run/excutions/ListComponent.vue
rename to src/components/run/executions/ListComponent.vue
index 2bbce78..c0702d1 100644
--- a/src/components/run/excutions/ListComponent.vue
+++ b/src/components/run/executions/ListComponent.vue
@@ -3,9 +3,10 @@ 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";
-
+import ViewComponent from "@/components/run/executions/ViewComponent.vue";
 // const store = commonStore();
 
+const openView = ref(false);
 const tableHeader = [
   { label: "No", width: "5%", style: "word-break: keep-all;" },
   { label: "Execution Name", width: "20%", style: "word-break: keep-all;" },
@@ -273,8 +274,9 @@ const changePageNum = (page) => {
   getData();
 };
 
-const openInfoModal = (selectedItem) => {
+const openInfoModal = () => {
   data.value.modalMode = "info";
+  openView.value = true;
 };
 const openModifyModal = (selectedItem) => {
   data.value.selectedData = selectedItem;
@@ -285,7 +287,10 @@ const openDownloadModal = () => {
   data.value.selectedData = null;
   data.value.modalMode = "download";
 };
-
+const closeDetail = () => {
+  openView.value = false;
+  selectedExperiment.value = null;
+};
 const closeModal = () => {
   data.value.isModalVisible = false;
   data.value.selectedData = null;
@@ -308,7 +313,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <!-- <v-dialog v-model="data.isModalVisible" max-width="600" persistent>
+  <div class="w-100" v-if="!openView">
+    <!-- <v-dialog v-model="data.isModalVisible" max-width="600" persistent>
     <FormComponent
       :edit-data="data.selectedData"
       :mode="data.modalMode"
@@ -324,240 +330,235 @@ onMounted(() => {
       @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>
+    <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>
-          </div>
+          </v-card-item>
         </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-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.pageSize"
+                  v-model="data.params.searchType"
+                  label="검색조건"
                   density="compact"
-                  :items="pageSizeOptions"
-                  item-title="text"
-                  item-value="value"
-                  variant="outlined"
-                  color="primary"
+                  :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
-                  @update:model-value="changePageNum(1)"
                 ></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">Terminate </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2 mr-3">
+              <v-btn color="primary">Retry </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2 mr-3">
+              <v-btn color="primary">Clone </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2 mr-3">
+              <v-btn color="primary">Compare </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2">
+              <v-btn color="primary">Execution </v-btn>
             </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-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"
-                      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
+                      :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}`"
                       >
-                      <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>
+                        {{ 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-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>
+    </v-container>
+  </div>
+  <div class="w-100" v-else>
+    <ViewComponent @close="closeDetail" />
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/components/run/executions/ViewComponent.vue b/src/components/run/executions/ViewComponent.vue
new file mode 100644
index 0000000..1cf10d3
--- /dev/null
+++ b/src/components/run/executions/ViewComponent.vue
@@ -0,0 +1,372 @@
+<script setup lang="ts">
+// import FormComponent from "@/components/device/FormComponent.vue";
+import { onMounted, ref, watch, onBeforeUnmount } from "vue";
+import "monaco-editor/min/vs/editor/editor.main.css";
+// const store = commonStore();
+const activeTab = ref<"details" | "visualizations">("details");
+
+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 runA = {
+  id: "77578d20d81542f387149c1e3474f633",
+  name: "defiant-horse-63",
+  start: "2025-02-13 15:12",
+  end: "2025-02-13 15:14",
+  duration: "2.0s",
+  params: { alpha: 0.2, l1_ratio: 0.2 },
+  metrics: { mae: 0.564, r2: 0.237, rmse: 0.734 },
+  tags: {
+    estimator_class: "sklearn.pipeline.Pipeline",
+    estimator_name: "Pipeline",
+  },
+  artifacts: ["estimator.html", "metrics.json"],
+};
+const runB = {
+  id: "9a5da7476f0f4ad28117e0b2e8d58515",
+  name: "magnificent-eel-8",
+  start: "2025-02-13 15:12",
+  end: "2025-02-13 15:13",
+  duration: "1.9s",
+  params: { alpha: 0.1, l1_ratio: 0.1 },
+  metrics: { mae: 0.546, r2: 0.28, rmse: 0.713 },
+  tags: {
+    estimator_class: "sklearn.pipeline.Pipeline",
+    estimator_name: "Pipeline",
+  },
+  artifacts: ["estimator.html", "metrics.json"],
+};
+// 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 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"
+    >
+      <!-- 1) Workflow Information -->
+      <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">Compare Executions</div>
+          </div>
+        </v-card-item>
+      </v-card>
+      <v-tabs
+        v-model="activeTab"
+        background-color="grey lighten-4"
+        style="max-width: 360px"
+        grow
+      >
+        <v-tab value="details">Details</v-tab>
+        <v-tab value="Visualizations">Visualizations</v-tab>
+      </v-tabs>
+      <div v-if="activeTab === 'details'" fluid flat>
+        <v-card 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">Run Detail </span>
+          </v-card-title>
+          <v-card-text class="px-6 pb-6 pt-4">
+            <!-- Workflow Name / Version -->
+            <v-row align="center" class="py-2">
+              <v-col cols="2" class="text-h6 font-weight-bold"> Run ID: </v-col>
+              <v-col cols="5">{{ runA.id }}</v-col>
+              <v-col cols="5">{{ runB.id }}</v-col>
+              <v-col cols="2" class="text-h6 font-weight-bold">
+                Run Name:
+              </v-col>
+              <v-col cols="5">{{ runA.name }}</v-col>
+              <v-col cols="5">{{ runB.name }}</v-col>
+              <v-col cols="2" class="text-h6 font-weight-bold">
+                Start Name:
+              </v-col>
+              <v-col cols="5">{{ runA.start }}</v-col>
+              <v-col cols="5">{{ runB.start }}</v-col>
+              <v-col cols="2" class="text-h6 font-weight-bold">
+                End Name:
+              </v-col>
+              <v-col cols="5">{{ runA.end }}</v-col>
+              <v-col cols="5">{{ runB.end }}</v-col>
+              <v-col cols="2" class="text-h6 font-weight-bold">
+                Duration:
+              </v-col>
+              <v-col cols="5">{{ runA.duration }}</v-col>
+              <v-col cols="5">{{ runB.duration }}</v-col>
+            </v-row>
+            <v-divider class="my-2" />
+          </v-card-text>
+          <v-card-title class="grey lighten-4 py-2 px-4">
+            <span class="font-weight-bold">Parameters </span>
+          </v-card-title>
+          <v-card-text class="px-6 pb-6 pt-4">
+            <!-- Workflow Name / Version -->
+            <v-row align="center" class="py-2">
+              <v-col cols="2" class="text-h6 font-weight-bold"> alpha </v-col>
+              <v-col cols="5">{{ runA.params.alpha }}</v-col>
+              <v-col cols="5">{{ runB.params.alpha }}</v-col>
+
+              <v-col cols="2" class="text-h6 font-weight-bold">
+                l1_ratio
+              </v-col>
+              <v-col cols="5">{{ runA.params.l1_ratio }}</v-col>
+              <v-col cols="5">{{ runB.params.l1_ratio }}</v-col>
+            </v-row>
+            <v-divider class="my-2" />
+          </v-card-text>
+          <v-card-title class="grey lighten-4 py-2 px-4">
+            <span class="font-weight-bold">Metrics</span>
+          </v-card-title>
+          <v-card-text class="px-6 pb-6 pt-4">
+            <!-- Workflow Name / Version -->
+            <v-row align="center" class="py-2">
+              <v-col cols="2" class="text-h6 font-weight-bold"> mae </v-col>
+              <v-col cols="5">{{ runA.metrics.mae }}</v-col>
+              <v-col cols="5">{{ runA.metrics.mae }}</v-col>
+
+              <v-col cols="2" class="text-h6 font-weight-bold"> r2 </v-col>
+              <v-col cols="5">{{ runA.metrics.r2 }}</v-col>
+              <v-col cols="5">{{ runA.metrics.r2 }}</v-col>
+              <v-col cols="2" class="text-h6 font-weight-bold"> rmse </v-col>
+              <v-col cols="5">{{ runA.metrics.rmse }}</v-col>
+              <v-col cols="5">{{ runA.metrics.rmse }}</v-col>
+            </v-row>
+            <v-divider class="my-2" />
+          </v-card-text>
+
+          <v-card-title class="grey lighten-4 py-2 px-4">
+            <span class="font-weight-bold">Tags </span>
+          </v-card-title>
+          <v-card-text class="px-6 pb-6 pt-4">
+            <!-- Workflow Name / Version -->
+            <v-row align="center" class="py-2">
+              <v-col cols="2" class="text-h6 font-weight-bold">
+                estimator_class
+              </v-col>
+              <v-col cols="5">{{ runA.tags.estimator_class }}</v-col>
+              <v-col cols="5">{{ runA.tags.estimator_class }}</v-col>
+              <v-col cols="2" class="text-h6 font-weight-bold">
+                estimator_name
+              </v-col>
+              <v-col cols="5">{{ runA.tags.estimator_name }}</v-col>
+              <v-col cols="5">{{ runA.tags.estimator_name }}</v-col>
+            </v-row>
+            <v-divider class="my-2" />
+          </v-card-text>
+          <v-card-title class="grey lighten-4 py-2 px-4">
+            <span class="font-weight-bold">Artifacts</span>
+          </v-card-title>
+          <div class="" style="width: 400px"></div>
+          <v-sheet class="d-flex justify-end mt-4">
+            <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
+          </v-sheet>
+        </v-card>
+      </div>
+      <div v-show="activeTab === 'visualizations'"><div>123213</div></div>
+    </v-card>
+  </v-container>
+</template>
+
+<style scoped>
+.editor-container {
+  width: 100%;
+  height: 900px;
+  max-height: 900px;
+  border: 1px solid #444;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/components/run/experiment/ListComponent.vue b/src/components/run/experiment/ListComponent.vue
index 39a0807..7eed1b7 100644
--- a/src/components/run/experiment/ListComponent.vue
+++ b/src/components/run/experiment/ListComponent.vue
@@ -7,7 +7,7 @@ import ViewComponent from "@/components/run/experiment/ViewComponent.vue";
 
 // const store = commonStore();
 const detailDialog = ref(false);
-const viewComponent = ref(false);
+const openView = ref(false);
 const selectedExperiment = ref<{
   name: string;
   description: string;
@@ -260,10 +260,10 @@ const openDetail = (item: {
   createdID: string;
 }) => {
   selectedExperiment.value = item;
-  viewComponent.value = true;
+  openView.value = true;
 };
 const closeDetail = () => {
-  viewComponent.value = false;
+  openView.value = false;
   selectedExperiment.value = null;
 };
 const openCreateModal = () => {
@@ -294,23 +294,7 @@ onMounted(() => {
 </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> -->
+  <div class="w-100" v-if="!openView">
     <v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
       <v-card
         flat
diff --git a/src/components/run/experiment/ViewComponent.vue b/src/components/run/experiment/ViewComponent.vue
index e12dfe9..1b680d0 100644
--- a/src/components/run/experiment/ViewComponent.vue
+++ b/src/components/run/experiment/ViewComponent.vue
@@ -33,6 +33,7 @@ const tableHeader = [
     style: "word-break: keep-all;",
   },
 ];
+
 const experimentInfo = ref({
   experimentName: "Baseline Model Training",
   projectName: "배터리 상태 예측 모델 프로젝트",
@@ -117,6 +118,7 @@ const getData = () => {
     },
   ];
   data.value.totalDataLength = 5;
+  setPaginationLength();
   // DeviceService.search(params).then((d) => {
   //   if (d.status === 200) {
   //     data.value.results = d.data.deviceList;
@@ -139,16 +141,16 @@ const getData = () => {
   // });
 };
 
-// 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 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") {
@@ -259,33 +261,50 @@ onMounted(() => {
         <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 class="px-6 pb-6 pt-4">
+          <!-- Experiment Name -->
+          <v-row align="center" class="py-2">
+            <v-col cols="3" class="text-h6 font-weight-bold"
+              >Experiment Name</v-col
+            >
+            <v-col cols="9" class="pa-2">{{
+              experimentInfo.experimentName
+            }}</v-col>
+          </v-row>
+          <VDivider class="my-2" />
+
+          <!-- Project Name -->
+          <v-row align="center" class="py-2">
+            <v-col cols="3" class="text-h6 font-weight-bold"
+              >Project Name</v-col
+            >
+            <v-col cols="9" class="pa-2">{{
+              experimentInfo.projectName
+            }}</v-col>
+          </v-row>
+          <VDivider class="my-2" />
+
+          <!-- Created Date / ID -->
+          <v-row align="center" class="py-2">
+            <v-col cols="3" class="text-h6 font-weight-bold"
+              >Created Date</v-col
+            >
+            <v-col cols="3" class="pa-2">{{
+              experimentInfo.createdDate
+            }}</v-col>
+            <v-col cols="3" class="text-h6 font-weight-bold">Created ID</v-col>
+            <v-col cols="3" class="pa-2">{{ experimentInfo.createdId }}</v-col>
+          </v-row>
+          <VDivider class="my-2" />
+
+          <!-- Description -->
+          <v-row align="center" class="py-2">
+            <v-col cols="3" class="text-h6 font-weight-bold">Description</v-col>
+            <v-col cols="9" class="pa-2">{{
+              experimentInfo.description
+            }}</v-col>
+          </v-row>
         </v-card-text>
       </v-card>
       <v-card flat class="bg-shades-transparent w-100">
diff --git a/src/components/workflow/ListComponent.vue b/src/components/workflow/ListComponent.vue
index 1a1ad67..2fd6d9c 100644
--- a/src/components/workflow/ListComponent.vue
+++ b/src/components/workflow/ListComponent.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
 import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
+import IconSettingBtn from "@/components/button/IconSettingBtn.vue";
 // import FormComponent from "@/components/device/FormComponent.vue";
 import { onMounted, ref, watch } from "vue";
-
+import ViewComponent from "@/components/workflow/ViewComponent.vue";
 // const store = commonStore();
 
+const openView = ref(false);
 const tableHeader = [
   {
     label: "No",
@@ -291,12 +293,18 @@ const handleRemoveData = () => {
   //리스트로 삭제 할때
   removeData(undefined);
 };
-
+const closeDetail = () => {
+  openView.value = false;
+};
 const changePageNum = (page) => {
   data.value.params.pageNum = page;
   getData();
 };
-
+const openSettingModal = (selectedItem) => {
+  data.value.selectedData = selectedItem;
+  data.value.modalMode = "setting";
+  openView.value = true;
+};
 const openModifyModal = (selectedItem) => {
   data.value.selectedData = selectedItem;
   data.value.modalMode = "modify";
@@ -331,200 +339,208 @@ 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-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">Workflows</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 class="w-100" v-if="!openView">
+    <!--  <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">Workflows</div>
             </div>
-          </div>
+          </v-card-item>
         </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-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.pageSize"
+                  v-model="data.params.searchType"
+                  label="검색조건"
                   density="compact"
-                  :items="pageSizeOptions"
-                  item-title="text"
-                  item-value="value"
-                  variant="outlined"
-                  color="primary"
+                  :items="searchOptions"
+                  item-title="searchType"
+                  item-value="searchText"
                   hide-details
-                  @update:model-value="changePageNum(1)"
                 ></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="error" class="mr-4" @click="handleRemoveData"
+                >선택 삭제
+              </v-btn>
+              <v-btn color="success" @click="openCreateModal">등록</v-btn>
             </v-sheet>
           </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>
-        </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-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"
-                      class="text-center font-weight-bold"
-                      :style="`${item.style}`"
+                      :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"
                     >
-                      {{ 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>{{ 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>
-            <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>
+                      <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">
+                        <IconSettingBtn @on-click="openSettingModal(item)" />
+                        <IconModifyBtn @on-click="openModifyModal(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-card>
-  </v-container>
+    </v-container>
+  </div>
+  <div class="w-100" v-else>
+    <ViewComponent @close="closeDetail" />
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/components/workflow/ViewComponent.vue b/src/components/workflow/ViewComponent.vue
new file mode 100644
index 0000000..e924bdb
--- /dev/null
+++ b/src/components/workflow/ViewComponent.vue
@@ -0,0 +1,497 @@
+<script setup lang="ts">
+// import FormComponent from "@/components/device/FormComponent.vue";
+import { onMounted, ref, watch, onBeforeUnmount } from "vue";
+import * as monaco from "monaco-editor";
+import "monaco-editor/min/vs/editor/editor.main.css";
+// const store = commonStore();
+const activeTab = ref<"details" | "yaml">("details");
+const editorRef = ref<HTMLDivElement | null>(null);
+let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
+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({
+  workflowName: "sentiment-analysis",
+  version: "v2.0",
+  workflowDescription: "감정 분석 모델 학습 워크플로우",
+  createdDate: "2025-02-06",
+  createdId: "ADMIN_001",
+});
+const stepHeaders = [
+  { title: "Order", key: "order", width: "10%", align: "center" },
+  { title: "Step Name", key: "name", width: "40%", align: "center" },
+  {
+    title: "Component Type",
+    key: "componentType",
+    width: "30%",
+    align: "center",
+  },
+  { title: "Status", key: "status", width: "20%", align: "center" },
+];
+
+const steps = ref([
+  { name: "Data loading", componentType: "DataPrep", status: "Configured" },
+  {
+    name: "Preprocessing",
+    componentType: "Preprocess",
+    status: "Not Configured",
+  },
+  {
+    name: "Preprocessing",
+    componentType: "Preprocess",
+    status: "Not Configured",
+  },
+  {
+    name: "Preprocessing",
+    componentType: "Preprocess",
+    status: "Not Configured",
+  },
+
+  { name: "Train Model", componentType: "Train", status: "Not Configured" },
+]);
+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 yamlContent = `apiVersion: argoproj.io/v1alpha1
+kind: Workflow
+metadata:
+  generateName: dummy-workflow-
+  namespace: default
+  labels:
+    workflows.argoproj.io/archive-strategy: "true"
+spec:
+  entrypoint: main
+  arguments:
+    parameters:
+      - name: message
+        value: "Hello, Monaco YAML Highlight!"
+  templates:
+
+    # 1) Main steps orchestration
+    - name: main
+      steps:
+        - - name: print
+            template: whalesay
+            arguments:
+              parameters:
+                - name: message
+                  value: "{{workflow.parameters.message}}"
+        - - name: wait
+            template: sleep
+            arguments:
+              parameters:
+                - name: duration
+                  value: "5"
+        - - name: finalize
+            template: next
+
+    # 2) Whalesay container
+    - name: whalesay
+      inputs:
+        parameters:
+          - name: message
+      container:
+        image: docker/whalesay:latest
+        command: [cowsay]
+        args: ["{{inputs.parameters.message}}"]
+        resources:
+          limits:
+            memory: "64Mi"
+            cpu: "100m"
+
+    # 3) Simple sleep step
+    - name: sleep
+      inputs:
+        parameters:
+          - name: duration
+      container:
+        image: alpine:latest
+        command: [sh, -c]
+        args:
+          - |
+            echo "Sleeping for {{inputs.parameters.duration}} seconds..."
+            sleep {{inputs.parameters.duration}}
+
+    # 4) Final step
+    - name: next
+      container:
+        image: alpine:latest
+        command: [sh, -c]
+        args:
+          - echo "Workflow complete at $(date)!"
+
+  # Optional: retention policy
+  ttlStrategy:
+    secondsAfterCompletion: 3600
+`;
+
+onMounted(() => {
+  if (editorRef.value) {
+    editorInstance = monaco.editor.create(editorRef.value, {
+      value: yamlContent,
+      language: "yaml",
+      theme: "vs-dark",
+      readOnly: true,
+      automaticLayout: true,
+      minimap: { enabled: false },
+      lineNumbers: "on",
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  if (editorInstance) {
+    editorInstance.dispose();
+    editorInstance = null;
+  }
+});
+
+// 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 class="h-100 w-100 pa-5 d-flex flex-column align-center">
+    <v-card
+      flat
+      class="bg-shades-transparent d-flex flex-column justify-center w-100"
+    >
+      <!-- 1) Workflow Information -->
+      <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-tabs
+        v-model="activeTab"
+        background-color="grey lighten-4"
+        style="max-width: 360px"
+        grow
+      >
+        <v-tab value="details">Details</v-tab>
+        <v-tab value="yaml">YAML</v-tab>
+      </v-tabs>
+      <template v-if="activeTab === 'details'" fluid flat>
+        <v-card 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">Workflow Information</span>
+          </v-card-title>
+          <v-card-text class="px-6 pb-6 pt-4">
+            <!-- Workflow Name / Version -->
+            <v-row align="center" class="py-2">
+              <v-col cols="3" class="text-h6 font-weight-bold">
+                Workflow Name
+              </v-col>
+              <v-col cols="3">{{ experimentInfo.workflowName }}</v-col>
+              <v-col cols="3" class="text-h6 font-weight-bold"> Version </v-col>
+              <v-col cols="3">{{ experimentInfo.version }}</v-col>
+            </v-row>
+            <v-divider class="my-2" />
+
+            <!-- Description -->
+            <v-row align="center" class="py-2">
+              <v-col cols="3" class="text-h6 font-weight-bold">
+                Workflow Description
+              </v-col>
+              <v-col cols="9">{{ experimentInfo.workflowDescription }}</v-col>
+            </v-row>
+            <v-divider class="my-2" />
+
+            <!-- Created Date / ID -->
+            <v-row align="center" class="py-2">
+              <v-col cols="3" class="text-h6 font-weight-bold">
+                Created Date
+              </v-col>
+              <v-col cols="3">{{ experimentInfo.createdDate }}</v-col>
+              <v-col cols="3" class="text-h6 font-weight-bold">
+                Created ID
+              </v-col>
+              <v-col cols="3">{{ experimentInfo.createdId }}</v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+
+        <!-- 2) Step Overview -->
+        <v-card
+          flat
+          class="bordered-box mb-6 w-100 rounded-lg pa-8"
+          style="min-height: 500px"
+        >
+          <v-card-title class="grey lighten-4 py-2 px-4">
+            <span class="font-weight-bold">Step Overview</span>
+          </v-card-title>
+
+          <v-data-table
+            :headers="stepHeaders"
+            :items="steps"
+            dense
+            class="text-center"
+            hide-default-footer
+            :items-per-page="5"
+            header-color="primary"
+            disable-sort
+          >
+            <!-- 순번을 직접 렌더링 -->
+            <template #item.order="{ index }">
+              {{ index + 1 }}
+            </template>
+            <!-- 상태에 따라 색을 다르게 -->
+            <template #item.status="{ item }">
+              <v-chip
+                :color="
+                  {
+                    Configured: 'success',
+                    'Not Configured': 'warning',
+                  }[item.status]
+                "
+                small
+                dark
+              >
+                {{ item.status }}
+              </v-chip>
+            </template>
+          </v-data-table>
+
+          <v-sheet class="d-flex justify-end mt-4">
+            <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
+          </v-sheet>
+        </v-card>
+      </template>
+
+      <div
+        v-show="activeTab === 'yaml'"
+        ref="editorRef"
+        class="editor-container"
+      ></div>
+    </v-card>
+  </v-container>
+</template>
+
+<style scoped>
+.editor-container {
+  width: 100%;
+  height: 900px;
+  max-height: 900px;
+  border: 1px solid #444;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/pages/ExcutionsView.vue b/src/pages/ExecutionsView.vue
similarity index 58%
rename from src/pages/ExcutionsView.vue
rename to src/pages/ExecutionsView.vue
index 88b551d..510834b 100644
--- a/src/pages/ExcutionsView.vue
+++ b/src/pages/ExecutionsView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ListComponent from "@/components/run/excutions/ListComponent.vue";
+import ListComponent from "@/components/run/executions/ListComponent.vue";
 </script>
 
 <template>
diff --git a/src/router/index.js b/src/router/index.js
index 1c3cf2f..aaa01c3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -73,13 +73,13 @@ const routes = [
             component: () => import("@/pages/ExperimentView.vue"),
           },
           {
-            name: "Excutions",
-            path: `/run/excutions`,
+            name: "Executions",
+            path: `/run/executions`,
             meta: {
-              title: "Excutions",
+              title: "Executions",
               requiresAuth: false,
             },
-            component: () => import("@/pages/ExcutionsView.vue"),
+            component: () => import("@/pages/ExecutionsView.vue"),
           },
         ],
       },
diff --git a/src/utils/menuUtils.js b/src/utils/menuUtils.js
index fc71f9e..aaaac7c 100644
--- a/src/utils/menuUtils.js
+++ b/src/utils/menuUtils.js
@@ -25,7 +25,7 @@ export const menuUtils = {
       icon: "mdi-format-list-bulleted-square",
       depth: [
         { title: "Experiment", path: "/run/experiment" },
-        { title: "Excutions", path: "/run/excutions" },
+        { title: "Executions", path: "/run/executions" },
       ],
     },
     {
diff --git a/typed-router.d.ts b/typed-router.d.ts
index e544b87..3a9e6f4 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -21,7 +21,7 @@ declare module 'vue-router/auto-routes' {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
     '/DatasetView': RouteRecordInfo<'/DatasetView', '/DatasetView', Record<never, never>, Record<never, never>>,
     '/DeploymentView': RouteRecordInfo<'/DeploymentView', '/DeploymentView', Record<never, never>, Record<never, never>>,
-    '/ExcutionsView': RouteRecordInfo<'/ExcutionsView', '/ExcutionsView', Record<never, never>, Record<never, never>>,
+    '/ExecutionsView': RouteRecordInfo<'/ExecutionsView', '/ExecutionsView', Record<never, never>, Record<never, never>>,
     '/ExperimentView': RouteRecordInfo<'/ExperimentView', '/ExperimentView', Record<never, never>, Record<never, never>>,
     '/HomeView': RouteRecordInfo<'/HomeView', '/HomeView', Record<never, never>, Record<never, never>>,
     '/LoginView': RouteRecordInfo<'/LoginView', '/LoginView', Record<never, never>, Record<never, never>>,