feat: Training Script, Datasets 부분 퍼블리싱(급하게 만들어서 api붙이면서 부분 코드 수정 예정)

components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppFooter: typeof import('./src/components/AppFooter.vue')['default']
     CompareComponent: typeof import('./src/components/run/executions/CompareComponent.vue')['default']
+    DatasetsBaseDoalog: typeof import('./src/components/atoms/organisms/DatasetsBaseDoalog.vue')['default']
     DeploymentDialog: typeof import('./src/components/atoms/organisms/DeploymentDialog.vue')['default']
     DrawerComponent: typeof import('./src/components/common/DrawerComponent.vue')['default']
     ExecutionBaseDialog: typeof import('./src/components/atoms/organisms/ExecutionBaseDialog.vue')['default']
@@ -24,11 +25,12 @@ declare module 'vue' {
     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/deployment/ListComponent.vue')['default']
+    ListComponent: typeof import('./src/components/Datasets/ListComponent.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     StapComfigDialog: typeof import('./src/components/atoms/organisms/StapComfigDialog.vue')['default']
-    ViewComponent: typeof import('./src/components/deployment/ViewComponent.vue')['default']
+    TrainingScriptBaseDoalog: typeof import('./src/components/atoms/organisms/TrainingScriptBaseDoalog.vue')['default']
+    ViewComponent: typeof import('./src/components/Datasets/ViewComponent.vue')['default']
     WorkflowDialog: typeof import('./src/components/atoms/organisms/WorkflowDialog.vue')['default']
     WorkflowsCreateDialog: typeof import('./src/components/atoms/organisms/WorkflowsCreateDialog.vue')['default']
     WorkflowsUploadDialog: typeof import('./src/components/atoms/organisms/WorkflowsUploadDialog.vue')['default']

src/components/Datasets/ListComponent.vue

@@ -0,0 +1,519 @@
+<script setup lang="ts">
+import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
+import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
+import IconInfoBtn from "@/components/button/IconInfoBtn.vue";
+// import FormComponent from "@/components/device/FormComponent.vue";
+import { onMounted, ref, watch } from "vue";
+import ViewComponent from "@/components/Datasets/ViewComponent.vue";
+import DatasetsBaseDoalog from "@/components/atoms/organisms/DatasetsBaseDoalog.vue";
+import WorkflowsUploadDialog from "@/components/atoms/organisms/WorkflowsUploadDialog.vue";
+// const store = commonStore();
+
+const openView = ref(false);
+const openModify = ref(false);
+const tableHeader = [
+  {
+    label: "Title",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "File Name",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "File Path",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Description",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Created Data",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Modified Data",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Action",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+];
+
+const searchOptions = [
+  {
+    searchType: "전체",
+    searchText: "",
+  },
+  {
+    searchType: "디바이스 별칭",
+    searchText: "deviceAlias",
+  },
+  {
+    searchType: "디바이스 키",
+    searchText: "deviceKey",
+  },
+  {
+    searchType: "사용자",
+    searchText: "userId",
+  },
+  {
+    searchType: "디바이스 이름",
+    searchText: "deviceName",
+  },
+  {
+    searchType: "디바이스 모델",
+    searchText: "deviceModel",
+  },
+  {
+    searchType: "디바이스 OS",
+    searchText: "deviceOs",
+  },
+];
+
+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: [],
+  isCreateVisible: false,
+  isUploadVisible: false,
+  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 = [
+    {
+      title: "배터리 상태 예측 모델 프로젝트",
+      fileName: "train.py",
+      filePath: "/kubeflow-users/battery/train.py",
+      description: "배터리 상태 예측 스크립트",
+      createdData: "2025-04-28 12:01:00",
+      modifiedData: "2025-04-28 12:01:00",
+    },
+    {
+      title: "상태 추적 모델",
+      fileName: "detection.py",
+      filePath: "/kubeflow-users/status/detection.py",
+      description: "상태 추적 스크립트",
+      createdData: "2025-04-20 12:01:00",
+      modifiedData: "2025-04-28 12:01:00",
+    },
+  ];
+  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 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 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 openCreateModal = () => {
+  data.value.selectedData = null;
+  data.value.modalMode = "create";
+  data.value.isCreateVisible = true;
+};
+
+const openModifyModal = () => {
+  data.value.selectedData = null;
+  data.value.modalMode = "edit";
+  data.value.isUploadVisible = true;
+};
+const closeCreateModal = () => {
+  data.value.isModalVisible = false;
+  data.value.isCreateVisible = null;
+};
+const closeModifyModal = () => {
+  data.value.isModalVisible = false;
+  data.value.isUploadVisible = 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="!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">Datasets</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="info" @click="openCreateModal"
+                >Create Dataset
+              </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-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.title }}</td>
+                      <td>{{ item.fileName }}</td>
+                      <td>{{ item.filePath }}</td>
+                      <td>{{ item.description }}</td>
+                      <td>{{ item.createdData }}</td>
+                      <td>{{ item.modifiedData }}</td>
+                      <td style="white-space: nowrap">
+                        <IconInfoBtn @on-click="openSettingModal(item)" />
+                        <IconModifyBtn @on-click="openModifyModal()" />
+                        <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.isCreateVisible" max-width="600" persistent>
+      <DatasetsBaseDoalog
+        :edit-data="data.selectedData"
+        :mode="data.modalMode"
+        @close-modal="closeCreateModal"
+        @handle-data="saveData"
+        :user-option="data.userOption"
+      />
+    </v-dialog>
+    <v-dialog v-model="data.isUploadVisible" max-width="600" persistent>
+      <DatasetsBaseDoalog
+        :edit-data="data.selectedData"
+        :mode="data.modalMode"
+        @close-modal="closeModifyModal"
+        @handle-data="saveData"
+        :user-option="data.userOption"
+      />
+    </v-dialog>
+  </div>
+
+  <div class="w-100" v-else>
+    <ViewComponent @close="closeDetail" />
+  </div>
+</template>
+
+<style scoped></style>

src/components/Datasets/ViewComponent.vue

@@ -0,0 +1,257 @@
+<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 } from "vue";
+// const store = commonStore();
+const experimentInfo = ref({
+  datasetTitle: "자율주행차량 배터리 상태 예측 모델 구축",
+  projectName: "배터리 상태 예측 모델 프로젝트",
+  version: "2.0",
+  createdDate: "2025-02-06",
+  createdId: "ADMIN_001",
+  modifiedDate: "2025-04-30",
+  modifiedId: "USER_002",
+  description: "날씨, 조도, 도로 상태 등의 주행환경 데이터",
+  fileName: "environment_log.csv",
+  fileSize: "58KB",
+});
+
+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 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,
+      // });
+
+      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,
+        // });
+
+        data.value.isConfirmDialogVisible = false;
+        data.value.selected = [];
+        data.value.allSelected = false;
+      },
+    );
+  }
+};
+
+const changePageNum = (page) => {
+  data.value.params.pageNum = page;
+};
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+
+onMounted(() => {
+  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-text class="px-6 pb-6 pt-4">
+          <v-row align="center" class="py-2">
+            <v-col cols="3" class="text-h6 font-weight-bold"
+              >Dataset Title
+            </v-col>
+            <v-col cols="3" class="pa-2">{{
+              experimentInfo.datasetTitle
+            }}</v-col>
+            <v-col cols="3" class="text-h6 font-weight-bold">Version </v-col>
+            <v-col cols="3" class="pa-2">{{ experimentInfo.version }}</v-col>
+          </v-row>
+          <VDivider class="my-2" />
+          <!-- Experiment 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" />
+          <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" />
+          <v-row align="center" class="py-2">
+            <v-col cols="3" class="text-h6 font-weight-bold"
+              >Modified Date
+            </v-col>
+            <v-col cols="3" class="pa-2">{{
+              experimentInfo.modifiedDate
+            }}</v-col>
+            <v-col cols="3" class="text-h6 font-weight-bold"
+              >Modified ID
+            </v-col>
+            <v-col cols="3" class="pa-2">{{ experimentInfo.modifiedId }}</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>
+          <VDivider class="my-2" />
+          <v-row align="center" class="py-2">
+            <v-col cols="3" class="text-h6 font-weight-bold">File</v-col>
+            <v-col cols="9" class="pa-2">{{ experimentInfo.fileName }}</v-col>
+          </v-row>
+        </v-card-text>
+        <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-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>

src/components/atoms/organisms/DatasetsBaseDoalog.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed, 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 fileInput = ref<HTMLInputElement | null>(null);
+const form = ref({
+  name: "",
+  description: "",
+  file: "",
+});
+
+// 다이얼로그 타이틀
+const dialogTitle = computed(() => {
+  if (props.mode === "create") return "Create Dataset";
+  if (props.mode === "edit") return "Edit Dataset";
+  return "Clone Execution";
+});
+
+const onChooseFile = () => {
+  fileInput.value?.click();
+};
+const submit = () => {
+  emit("handle-data", form.value);
+};
+</script>
+
+<template>
+  <v-card class="rounded-lg overflow-hidden">
+    <!-- 타이틀 영역 -->
+    <v-card-title
+      class="text-white font-weight-bold text-h6"
+      style="background-color: #1976d2"
+    >
+      {{ dialogTitle }}
+    </v-card-title>
+
+    <v-card-text class="pa-6">
+      <v-form @submit.prevent="submit">
+        <v-row dense class="mb-6">
+          <v-col cols="6">
+            <v-subheader class="font-weight-medium white--text mb-2">
+              Dataset Title
+            </v-subheader>
+            <v-text-field
+              v-model="form.name"
+              variant="outlined"
+              dense
+              hide-details
+              outlined
+              style="background: #1e1e1e; color: #fff"
+            />
+          </v-col>
+          <v-col cols="6">
+            <v-subheader class="font-weight-medium white--text mb-2">
+              Dataset Version
+            </v-subheader>
+            <v-text-field
+              variant="outlined"
+              dense
+              hide-details
+              outlined
+              style="background: #1e1e1e; color: #fff"
+            />
+          </v-col>
+        </v-row>
+
+        <div class="mb-5">
+          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+            >Description
+          </label>
+          <v-text-field
+            v-model="form.description"
+            variant="outlined"
+            dense
+            hide-details
+            required
+          />
+        </div>
+        <div class="mb-5">
+          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+            >Upload File
+          </label>
+          <v-file-input
+            v-model="form.file"
+            label="Upload File"
+            @click:append-outer="onChooseFile"
+            outlined
+            dense
+            hide-details
+          />
+        </div>
+      </v-form>
+    </v-card-text>
+
+    <v-card-actions class="justify-end" style="padding: 16px 24px">
+      <v-btn color="success" @click="submit">Save</v-btn>
+      <v-btn text class="white--text" @click="$emit('close-modal')"
+        >Close</v-btn
+      >
+    </v-card-actions>
+  </v-card>
+</template>

src/components/atoms/organisms/ExecutionBaseDialog.vue

@@ -58,14 +58,12 @@ function onClose() {
 </script>
 
 <template>
-  <v-card flat>
+  <v-card class="rounded-lg overflow-hidden">
-    <!-- 툴바 -->
+    <v-card-title
-    <v-toolbar flat color="primary" dark>
+      class="text-white font-weight-bold text-h6"
-      <v-toolbar-title>{{ dialogTitle }}</v-toolbar-title>
+      style="background-color: #1976d2"
-      <v-spacer />
+      >{{ dialogTitle }}</v-card-title
-      <v-btn icon @click="onClose"><v-icon>mdi-close</v-icon></v-btn>
+    >
-    </v-toolbar>
-    <v-divider />
 
     <!-- 본문 -->
     <v-card-text class="white--text pa-6">

src/components/atoms/organisms/StapComfigDialog.vue

@@ -45,15 +45,14 @@ const onClose = () => {
 </script>
 
 <template>
-  <v-card flat>
+  <v-card class="rounded-lg overflow-hidden">
     <!-- 타이틀 바 -->
-    <v-toolbar flat color="primary" dark>
+
-      <v-toolbar-title>Edit Workflow Step Config</v-toolbar-title>
+    <v-card-title
-      <v-spacer />
+      class="text-white font-weight-bold text-h6"
-      <v-btn icon @click="onClose">
+      style="background-color: #1976d2"
-        <v-icon>mdi-close</v-icon>
+      >Edit Workflow Step Config</v-card-title
-      </v-btn>
+    >
-    </v-toolbar>
 
     <!-- 본문 -->
     <v-card-text class="pt-6 px-6 pb-4">

src/components/atoms/organisms/TrainingScriptBaseDoalog.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed, 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 fileInput = ref<HTMLInputElement | null>(null);
+const form = ref({
+  name: "",
+  description: "",
+  file: "",
+});
+
+// 다이얼로그 타이틀
+const dialogTitle = computed(() => {
+  if (props.mode === "create") return "Create Training Script";
+  if (props.mode === "edit") return "Edit Training Script";
+  return "Clone Execution";
+});
+
+const onChooseFile = () => {
+  fileInput.value?.click();
+};
+const submit = () => {
+  emit("handle-data", form.value);
+};
+</script>
+
+<template>
+  <v-card class="rounded-lg overflow-hidden">
+    <!-- 타이틀 영역 -->
+    <v-card-title
+      class="text-white font-weight-bold text-h6"
+      style="background-color: #1976d2"
+    >
+      {{ dialogTitle }}
+    </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"
+            >Training Script Title
+          </label>
+          <v-text-field
+            v-model="form.name"
+            variant="outlined"
+            dense
+            hide-details
+            required
+          />
+        </div>
+        <div class="mb-5">
+          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+            >File
+          </label>
+          <v-file-input
+            v-model="form.file"
+            label="Upload File"
+            @click:append-outer="onChooseFile"
+            outlined
+            dense
+            hide-details
+          />
+        </div>
+        <div class="mb-5">
+          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+            >Description
+          </label>
+          <v-text-field
+            v-model="form.description"
+            variant="outlined"
+            dense
+            hide-details
+            required
+          />
+        </div>
+      </v-form>
+    </v-card-text>
+
+    <v-card-actions class="justify-end" style="padding: 16px 24px">
+      <v-btn color="success" @click="submit">Save</v-btn>
+      <v-btn text class="white--text" @click="$emit('close-modal')"
+        >Close</v-btn
+      >
+    </v-card-actions>
+  </v-card>
+</template>

src/components/models/token/token.ts

@@ -0,0 +1,4 @@
+export interface Token {
+  accessToken: string;
+  refreshToken: string;
+}

src/components/service/index.ts

@@ -73,6 +73,11 @@ export const request = {
       onUploadProgress: progress,
     });
   },
+  postNoParam: (uri: string): any => {
+    // axios.defaults.withCredentials=true 이 켜져 있으니
+    // Set-Cookie 헤더로 내려오는 쿠키를 자동 저장합니다.
+    return axios.post(`${API_URL}${uri}`, null);
+  },
   // postOptimization: (uri: string, param: any): any => {
   //   return axios.post(`${PYTHON_API_URL}${uri}`, param);
   // },

src/components/service/token/tokenService.ts

@@ -0,0 +1,7 @@
+import { request } from "@/components/service/index";
+import { Token } from "@/components/models/token/token";
+
+export const TokenService = {
+  refreshToken: (): Promise<{ data: Token }> =>
+    request.postNoParam("/api/auth/refreshtoken"),
+};

src/components/trainingscript/ListComponent.vue

@@ -0,0 +1,519 @@
+<script setup lang="ts">
+import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
+import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
+import IconInfoBtn from "@/components/button/IconInfoBtn.vue";
+// import FormComponent from "@/components/device/FormComponent.vue";
+import { onMounted, ref, watch } from "vue";
+import ViewComponent from "@/components/trainingscript/ViewComponent.vue";
+import TrainingScriptBaseDoalog from "@/components/atoms/organisms/TrainingScriptBaseDoalog.vue";
+import WorkflowsUploadDialog from "@/components/atoms/organisms/WorkflowsUploadDialog.vue";
+// const store = commonStore();
+
+const openView = ref(false);
+const openModify = ref(false);
+const tableHeader = [
+  {
+    label: "Title",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "File Name",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "File Path",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Description",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Created Data",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Modified Data",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+  {
+    label: "Action",
+    width: "7%",
+    style: "word-break: keep-all;",
+  },
+];
+
+const searchOptions = [
+  {
+    searchType: "전체",
+    searchText: "",
+  },
+  {
+    searchType: "디바이스 별칭",
+    searchText: "deviceAlias",
+  },
+  {
+    searchType: "디바이스 키",
+    searchText: "deviceKey",
+  },
+  {
+    searchType: "사용자",
+    searchText: "userId",
+  },
+  {
+    searchType: "디바이스 이름",
+    searchText: "deviceName",
+  },
+  {
+    searchType: "디바이스 모델",
+    searchText: "deviceModel",
+  },
+  {
+    searchType: "디바이스 OS",
+    searchText: "deviceOs",
+  },
+];
+
+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: [],
+  isCreateVisible: false,
+  isUploadVisible: false,
+  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 = [
+    {
+      title: "배터리 상태 예측 모델 프로젝트",
+      fileName: "train.py",
+      filePath: "/kubeflow-users/battery/train.py",
+      description: "배터리 상태 예측 스크립트",
+      createdData: "2025-04-28 12:01:00",
+      modifiedData: "2025-04-28 12:01:00",
+    },
+    {
+      title: "상태 추적 모델",
+      fileName: "detection.py",
+      filePath: "/kubeflow-users/status/detection.py",
+      description: "상태 추적 스크립트",
+      createdData: "2025-04-20 12:01:00",
+      modifiedData: "2025-04-28 12:01:00",
+    },
+  ];
+  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 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 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 openCreateModal = () => {
+  data.value.selectedData = null;
+  data.value.modalMode = "create";
+  data.value.isCreateVisible = true;
+};
+
+const openModifyModal = () => {
+  data.value.selectedData = null;
+  data.value.modalMode = "edit";
+  data.value.isUploadVisible = true;
+};
+const closeCreateModal = () => {
+  data.value.isModalVisible = false;
+  data.value.isCreateVisible = null;
+};
+const closeModifyModal = () => {
+  data.value.isModalVisible = false;
+  data.value.isUploadVisible = 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="!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">Training Script</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="info" @click="openCreateModal"
+                >Create Script
+              </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-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.title }}</td>
+                      <td>{{ item.fileName }}</td>
+                      <td>{{ item.filePath }}</td>
+                      <td>{{ item.description }}</td>
+                      <td>{{ item.createdData }}</td>
+                      <td>{{ item.modifiedData }}</td>
+                      <td style="white-space: nowrap">
+                        <IconInfoBtn @on-click="openSettingModal(item)" />
+                        <IconModifyBtn @on-click="openModifyModal()" />
+                        <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.isCreateVisible" max-width="600" persistent>
+      <TrainingScriptBaseDoalog
+        :edit-data="data.selectedData"
+        :mode="data.modalMode"
+        @close-modal="closeCreateModal"
+        @handle-data="saveData"
+        :user-option="data.userOption"
+      />
+    </v-dialog>
+    <v-dialog v-model="data.isUploadVisible" max-width="600" persistent>
+      <TrainingScriptBaseDoalog
+        :edit-data="data.selectedData"
+        :mode="data.modalMode"
+        @close-modal="closeModifyModal"
+        @handle-data="saveData"
+        :user-option="data.userOption"
+      />
+    </v-dialog>
+  </div>
+
+  <div class="w-100" v-else>
+    <ViewComponent @close="closeDetail" />
+  </div>
+</template>
+
+<style scoped></style>

src/components/trainingscript/ViewComponent.vue

@@ -0,0 +1,291 @@
+<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 { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import * as monaco from "monaco-editor";
+import "monaco-editor/min/vs/editor/editor.main.css";
+// const store = commonStore();
+const editorRef = ref<HTMLDivElement | null>(null);
+let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
+const experimentInfo = ref({
+  modelName: "ImageClassifier",
+  projectName: "배터리 상태 예측 모델 프로젝트",
+  experimentName: "Baseline Model Training",
+  executionName: "run-batch32-lr0.001",
+  deployDate: "2025-02-06",
+  createdId: "ADMIN_001",
+  description: "기본 모델 구조로 학습 성능 측정",
+});
+
+const yamlContent = `import argparse
+import torch
+import torch.nn as nn
+import torch.optim as optim
+from torch.utils.data import DataLoader, TensorDataset
+import os
+class SimpleNet(nn.Module):
+def __init__(self, input_dim, hidden_dim, output_dim):
+super(SimpleNet, self).__init__()
+self.fc1 = nn.Linear(input_dim, hidden_dim)
+self.relu = nn.ReLU()
+`;
+
+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 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,
+      // });
+
+      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,
+        // });
+
+        data.value.isConfirmDialogVisible = false;
+        data.value.selected = [];
+        data.value.allSelected = false;
+      },
+    );
+  }
+};
+
+const changePageNum = (page) => {
+  data.value.params.pageNum = page;
+};
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+
+onMounted(() => {
+  getCodeList();
+  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;
+  }
+});
+</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">Training Script Information </span>
+        </v-card-title>
+
+        <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"
+              >Training Script Title
+            </v-col>
+            <v-col cols="9" class="pa-2">{{ experimentInfo.modelName }}</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">File Name </v-col>
+            <v-col cols="9" class="pa-2">{{
+              experimentInfo.projectName
+            }}</v-col>
+          </v-row>
+          <VDivider class="my-2" />
+          <v-row align="center" class="py-2">
+            <v-col cols="3" class="text-h6 font-weight-bold">File Path </v-col>
+            <v-col cols="9" class="pa-2">{{
+              experimentInfo.experimentName
+            }}</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.deployDate }}</v-col>
+            <v-col cols="3" class="text-h6 font-weight-bold"
+              >Modified Date
+            </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="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">Training Script Preview </span>
+        </v-card-title>
+        <v-card-text class="px-6 pb-6 pt-4">
+          <div ref="editorRef" class="editor-container"></div
+        ></v-card-text>
+        <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-container>
+</template>
+
+<style scoped>
+.editor-container {
+  width: 100%;
+  height: 400px; /* 원하시는 높이로 설정하세요 */
+}
+.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>

src/pages/DatasetView.vue

@@ -1,10 +1,9 @@
 <script setup>
-
+import ListComponent from "@/components/Datasets/ListComponent.vue";
 </script>
 
 <template>
+  <ListComponent />
 </template>
 
-<style scoped lang="sass">
+<style scoped lang="sass"></style>
-
-</style>

src/pages/TrainingScriptView.vue

@@ -1,10 +1,9 @@
 <script setup>
-
+import ListComponent from "@/components/trainingscript/ListComponent.vue";
 </script>
 
 <template>
+  <ListComponent />
 </template>
 
-<style scoped lang="sass">
+<style scoped lang="sass"></style>
-
-</style>

src/views/Select.vue

@@ -49,7 +49,6 @@ const loadUsers = async () => {
 
 const selectProject = (idx: number): void => {
   const p = projects.value[idx];
-  console.log("Selected project:", p);
   router.push("/home");
 };
 
@@ -172,9 +171,10 @@ onMounted(() => {
         sm="6"
         md="6"
         lg="6"
+        class="d-flex"
       >
         <v-card
-          class="pa-4"
+          class="pa-4 flex-grow-1 d-flex flex-column"
           color="primary"
           variant="elevated"
           elevation="6"
@@ -195,7 +195,7 @@ onMounted(() => {
           </v-card-subtitle>
 
           <v-card-text
-            class="text-white mt-3 text-body-2"
+            class="text-white mt-3 text-body-2 flex-grow-1"
             style="white-space: normal"
           >
             {{ project.description }}