From 349c54ac191d53d15cfb8ec7f1ba13e3fdba4a2c Mon Sep 17 00:00:00 2001
From: jschoi <jschoi@cuuva.com>
Date: Wed, 5 Nov 2025 16:40:25 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/Datasets/ViewComponent.vue      |  10 +-
 .../run/executions/CompareComponent.vue       |   2 +-
 .../run/executions/ViewComponent.vue          | 114 +++++++++---------
 .../run/experiment/ViewComponent.vue          |  11 +-
 .../trainingscript/ViewComponent.vue          |  16 ++-
 .../templates/workflow/ViewComponent.vue      |   5 +-
 6 files changed, 88 insertions(+), 70 deletions(-)

diff --git a/src/components/templates/Datasets/ViewComponent.vue b/src/components/templates/Datasets/ViewComponent.vue
index 5d8a7ac..2c25d8a 100644
--- a/src/components/templates/Datasets/ViewComponent.vue
+++ b/src/components/templates/Datasets/ViewComponent.vue
@@ -192,7 +192,11 @@ watch(
         </v-card-item>
       </v-card>
 
-      <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
+      <v-card
+        flat
+        class="bordered-box mb-6 w-100 rounded-lg pa-8"
+        color="grey-lighten-3"
+      >
         <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"
@@ -254,9 +258,9 @@ watch(
             </v-col>
           </v-row>
         </v-card-text>
-        <v-sheet class="d-flex justify-end mb-2">
+        <div class="d-flex justify-end mb-2">
           <v-btn color="primary" @click="emit('close')"> Back to List </v-btn>
-        </v-sheet>
+        </div>
       </v-card>
     </v-card>
   </v-container>
diff --git a/src/components/templates/run/executions/CompareComponent.vue b/src/components/templates/run/executions/CompareComponent.vue
index 1e58c53..7b509b9 100644
--- a/src/components/templates/run/executions/CompareComponent.vue
+++ b/src/components/templates/run/executions/CompareComponent.vue
@@ -261,7 +261,7 @@ onMounted(() => {
       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 flat class="bg-shades-transparent w-100" color="grey-lighten-3">
         <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>Compare Executions</div>
diff --git a/src/components/templates/run/executions/ViewComponent.vue b/src/components/templates/run/executions/ViewComponent.vue
index e446e23..fe62392 100644
--- a/src/components/templates/run/executions/ViewComponent.vue
+++ b/src/components/templates/run/executions/ViewComponent.vue
@@ -851,7 +851,11 @@ const artifactsLoading = ref(false);
       <v-window v-model="mainTab">
         <!-- ========= Details ========= -->
         <v-window-item value="details">
-          <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
+          <v-card
+            flat
+            class="bordered-box mb-6 w-100 rounded-lg pa-8"
+            color="grey-lighten-3"
+          >
             <v-card-title class="grey lighten-4 py-2 px-4">
               <span class="font-weight-bold">Execution Information</span>
             </v-card-title>
@@ -959,15 +963,15 @@ const artifactsLoading = ref(false);
               </v-row>
             </v-card-text>
 
-            <v-sheet class="d-flex justify-end mb-2">
+            <div class="d-flex justify-end mb-2">
               <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
-            </v-sheet>
+            </div>
           </v-card>
         </v-window-item>
 
         <!-- ========= Visualizations ========= -->
         <v-window-item value="viz">
-          <v-card class="rounded-lg pa-8 w-100">
+          <v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
             <v-window v-model="vizTab">
               <v-window-item value="metrics">
                 <v-card-text>
@@ -1030,15 +1034,28 @@ const artifactsLoading = ref(false);
                   </v-row>
 
                   <!-- Selected Run -->
-                  <v-card class="mb-6" variant="tonal">
-                    <v-card-title class="py-2 px-4">Selected Run</v-card-title>
-                    <v-card-text class="px-4 pb-4">
+                  <!-- Selected Run -->
+                  <v-card flat class="mb-6" color="grey-lighten-3">
+                    <v-card-title
+                      class="py-2 px-0 text-button text-medium-emphasis"
+                    >
+                      Selected Run
+                    </v-card-title>
+
+                    <v-card-text class="px-0">
                       <v-row>
+                        <!-- 기본 정보 -->
                         <v-col cols="12" md="6">
                           <v-table density="comfortable">
+                            <thead>
+                              <tr>
+                                <th style="width: 40%">Field</th>
+                                <th>Value</th>
+                              </tr>
+                            </thead>
                             <tbody>
                               <tr>
-                                <td style="width: 40%">Run ID</td>
+                                <td>Run ID</td>
                                 <td>{{ runDetail?.info?.run_id || "—" }}</td>
                               </tr>
                               <tr>
@@ -1077,12 +1094,17 @@ const artifactsLoading = ref(false);
                           </v-table>
                         </v-col>
 
+                        <!-- 파라미터 + 태그 -->
                         <v-col cols="12" md="6">
-                          <div class="text-subtitle-2 mb-2">Parameters</div>
-                          <v-table density="compact">
+                          <div
+                            class="text-subtitle-2 text-medium-emphasis mb-2"
+                          >
+                            Parameters
+                          </div>
+                          <v-table density="compact" class="mb-4">
                             <thead>
                               <tr>
-                                <th>Key</th>
+                                <th style="width: 40%">Key</th>
                                 <th>Value</th>
                               </tr>
                             </thead>
@@ -1101,42 +1123,16 @@ const artifactsLoading = ref(false);
                               </tr>
                             </tbody>
                           </v-table>
-                        </v-col>
-                      </v-row>
 
-                      <v-row class="mt-4">
-                        <v-col cols="12" md="6">
-                          <div class="text-subtitle-2 mb-2">Metrics</div>
-                          <v-table density="compact">
-                            <thead>
-                              <tr>
-                                <th>Metric</th>
-                                <th>Value</th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr v-if="!runDetail?.data?.metrics?.length">
-                                <td colspan="2" class="text-medium-emphasis">
-                                  No metrics
-                                </td>
-                              </tr>
-                              <tr
-                                v-for="m in runDetail?.data?.metrics || []"
-                                :key="m.key"
-                              >
-                                <td>{{ m.key }}</td>
-                                <td>{{ m.value }}</td>
-                              </tr>
-                            </tbody>
-                          </v-table>
-                        </v-col>
-
-                        <v-col cols="12" md="6">
-                          <div class="text-subtitle-2 mb-2">Tags</div>
+                          <div
+                            class="text-subtitle-2 text-medium-emphasis mb-2"
+                          >
+                            Tags
+                          </div>
                           <v-table density="compact">
                             <thead>
                               <tr>
-                                <th>Key</th>
+                                <th style="width: 40%">Key</th>
                                 <th>Value</th>
                               </tr>
                             </thead>
@@ -1166,7 +1162,7 @@ const artifactsLoading = ref(false);
                   </v-card>
 
                   <!-- Model Metrics table -->
-                  <v-card flat class="mb-6">
+                  <v-card flat class="mb-6" color="grey-lighten-3">
                     <v-card-title
                       class="py-2 px-0 text-button text-medium-emphasis"
                       >Model Metrics (selected run)</v-card-title
@@ -1196,7 +1192,7 @@ const artifactsLoading = ref(false);
                   </v-card>
 
                   <!-- Bar chart -->
-                  <v-card flat class="mb-6">
+                  <v-card flat class="mb-6" color="grey-lighten-3">
                     <v-card-title
                       class="py-2 px-0 text-button text-medium-emphasis"
                       >Metrics (bar chart)</v-card-title
@@ -1226,15 +1222,15 @@ const artifactsLoading = ref(false);
               </v-window-item>
             </v-window>
 
-            <v-sheet class="d-flex justify-end mb-2">
+            <div class="d-flex justify-end mb-2">
               <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
-            </v-sheet>
+            </div>
           </v-card>
         </v-window-item>
 
         <!-- ========= Artifacts (Two-step, Flat) ========= -->
         <v-window-item value="artifacts">
-          <v-card class="rounded-lg pa-8 w-100">
+          <v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
             <v-card-text>
               <v-row class="mb-4" align="center">
                 <v-col
@@ -1278,6 +1274,7 @@ const artifactsLoading = ref(false);
                       <v-icon start size="16">mdi-check-decagram</v-icon>
                       {{ externalAuth?.name || externalAuth?.id }}
                     </v-chip>
+
                     <v-btn
                       size="small"
                       color="primary"
@@ -1287,6 +1284,7 @@ const artifactsLoading = ref(false);
                     >
                       <v-icon start size="16">mdi-rocket-launch</v-icon> Deploy
                     </v-btn>
+
                     <v-btn
                       v-if="isAuthenticated"
                       size="small"
@@ -1325,9 +1323,14 @@ const artifactsLoading = ref(false);
                 {{ twoStepError }}
               </v-alert>
 
-              <v-card variant="tonal">
-                <v-card-title class="py-2 px-4">Artifacts</v-card-title>
-                <v-divider />
+              <!-- 바깥 카드도 flat, 타이틀 톤 통일 -->
+              <v-card flat color="grey-lighten-3" class="mb-2">
+                <v-card-title
+                  class="py-2 px-0 text-button text-medium-emphasis"
+                >
+                  Artifacts
+                </v-card-title>
+
                 <v-card-text class="px-0">
                   <v-table density="comfortable">
                     <thead>
@@ -1338,6 +1341,7 @@ const artifactsLoading = ref(false);
                         <th style="width: 180px" class="text-right">Actions</th>
                       </tr>
                     </thead>
+
                     <tbody>
                       <tr v-if="twoStepLoading">
                         <td
@@ -1413,9 +1417,7 @@ const artifactsLoading = ref(false);
                                 />
                               </template>
                               <template v-else>
-                                <v-btn size="small" variant="text" @click="">
-                                  Open
-                                </v-btn>
+                                <v-btn size="small" variant="text">Open</v-btn>
                               </template>
                             </td>
                           </tr>
@@ -1427,9 +1429,9 @@ const artifactsLoading = ref(false);
               </v-card>
             </v-card-text>
 
-            <v-sheet class="d-flex justify-end mb-2">
+            <div class="d-flex justify-end mb-2">
               <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
-            </v-sheet>
+            </div>
           </v-card>
         </v-window-item>
       </v-window>
diff --git a/src/components/templates/run/experiment/ViewComponent.vue b/src/components/templates/run/experiment/ViewComponent.vue
index 039b985..c7d496d 100644
--- a/src/components/templates/run/experiment/ViewComponent.vue
+++ b/src/components/templates/run/experiment/ViewComponent.vue
@@ -194,6 +194,7 @@ watch(
         <v-card
           flat
           class="bordered-box mb-6 w-100 rounded-lg pa-8 position-relative"
+          color="grey-lighten-3"
         >
           <v-card-title class="grey lighten-4 py-2 px-4">
             <span class="font-weight-bold">Experiment Information</span>
@@ -247,18 +248,18 @@ watch(
         </v-card>
 
         <!-- Runs -->
-        <v-card class="rounded-lg pa-8 w-100">
+        <v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
           <v-card-title class="grey lighten-4 py-2 px-4">
             <span class="font-weight-bold">Runs</span>
           </v-card-title>
 
           <v-card-text class="px-6 pb-2 pt-4">
-            <v-sheet class="d-flex align-center justify-between mb-4">
+            <div class="d-flex align-center justify-between mb-4">
               <div class="text-body-2">
                 총 {{ runRows.length.toLocaleString() }}개 · Experiment ID:
                 <strong>{{ experimentId || "-" }}</strong>
               </div>
-            </v-sheet>
+            </div>
 
             <v-table density="comfortable" fixed-header height="420">
               <colgroup>
@@ -336,9 +337,9 @@ watch(
             </v-card-actions>
           </v-card-text>
 
-          <v-sheet class="d-flex justify-end mb-2">
+          <div class="d-flex justify-end mb-2">
             <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
-          </v-sheet>
+          </div>
         </v-card>
       </v-card>
     </v-container>
diff --git a/src/components/templates/trainingscript/ViewComponent.vue b/src/components/templates/trainingscript/ViewComponent.vue
index a66c87a..c15c988 100644
--- a/src/components/templates/trainingscript/ViewComponent.vue
+++ b/src/components/templates/trainingscript/ViewComponent.vue
@@ -115,7 +115,11 @@ onBeforeUnmount(() => {
       </v-card-item>
     </v-card>
 
-    <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
+    <v-card
+      flat
+      class="bordered-box mb-6 w-100 rounded-lg pa-8"
+      color="grey-lighten-3"
+    >
       <v-card-title class="grey lighten-4 py-2 px-4">
         <span class="font-weight-bold">Training Script Information</span>
       </v-card-title>
@@ -160,16 +164,20 @@ onBeforeUnmount(() => {
     </v-card>
 
     <!-- 미리보기 -->
-    <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
+    <v-card
+      flat
+      class="bordered-box mb-6 w-100 rounded-lg pa-8"
+      color="grey-lighten-3"
+    >
       <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">
+      <div class="d-flex justify-end mb-2">
         <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
-      </v-sheet>
+      </div>
     </v-card>
   </v-container>
 </template>
diff --git a/src/components/templates/workflow/ViewComponent.vue b/src/components/templates/workflow/ViewComponent.vue
index 1ae28c6..048e67d 100644
--- a/src/components/templates/workflow/ViewComponent.vue
+++ b/src/components/templates/workflow/ViewComponent.vue
@@ -222,7 +222,10 @@ const steps = ref<
 
       <!-- Details 탭 -->
       <template v-if="activeTab === 'details'">
-        <v-card class="bordered-box mb-6 w-100 rounded-lg pa-8 step-card">
+        <v-card
+          class="bordered-box mb-6 w-100 rounded-lg pa-8 step-card"
+          color="grey-lighten-3"
+        >
           <v-card-title class="grey lighten-4 py-2 px-4">
             <span class="font-weight-bold">Workflow Information</span>
           </v-card-title>