From 7d8fb8b8af0ae133491be62e518556f30ef1ac23 Mon Sep 17 00:00:00 2001
From: jschoi <jschoi@cuuva.com>
Date: Wed, 5 Nov 2025 14:44:49 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8B=A4=ED=81=AC=20=EB=AA=A8=EB=93=9C?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=99=94=EC=9D=B4=ED=8A=B8=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B0=B0=EA=B2=BD=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LayoutComponent.vue     | 34 +++-----
 .../templates/Datasets/ListComponent.vue      |  2 +-
 .../templates/datagroup/ListComponent.vue     |  2 +-
 .../templates/deployment/ListComponent.vue    |  2 +-
 .../templates/home/ListComponent.vue          | 82 +++++++++++--------
 .../templates/projects/ListComponent.vue      |  2 +-
 .../run/executions/ListComponent.vue          |  2 +-
 .../run/experiment/ListComponent.vue          |  2 +-
 .../templates/stepconfig/ListComponent.vue    |  2 +-
 .../trainingscript/ListComponent.vue          |  2 +-
 .../trainingscriptgroup/ListComponent.vue     |  2 +-
 .../templates/users/ListComponent.vue         |  2 +-
 .../templates/workflow/ListComponent.vue      |  2 +-
 src/pages/LoginView.vue                       |  8 +-
 src/pages/SignupView.vue                      | 10 +--
 src/plugins/vuetify.js                        | 24 +++---
 16 files changed, 96 insertions(+), 84 deletions(-)

diff --git a/src/components/common/LayoutComponent.vue b/src/components/common/LayoutComponent.vue
index f10b122..3212dcf 100644
--- a/src/components/common/LayoutComponent.vue
+++ b/src/components/common/LayoutComponent.vue
@@ -211,7 +211,7 @@ onBeforeUnmount(() => {
       <div
         variant="text"
         size="large"
-        class="brand-btn text-h5 text-primary"
+        class="brand-btn text-h5"
         @click="goMain"
         aria-label="Home"
       >
@@ -220,8 +220,6 @@ onBeforeUnmount(() => {
 
       <!-- 중앙: 메뉴 그룹 (Settings 전/후 분기) -->
       <div class="center-nav d-none d-md-flex" v-if="!hideAllMenus">
-        <!-- 관리자 메뉴: showAdminTabs 조건으로 표시 -->
-        <!-- 관리자 메뉴바: 기본 메뉴바와 1:1 동일 구조 -->
         <template v-if="showAdminTabs">
           <template v-for="(m, i) in adminMenus" :key="'am_' + i">
             <!-- 드롭다운 있는 항목 -->
@@ -308,12 +306,7 @@ onBeforeUnmount(() => {
                   (m.path && m.path.startsWith('/run'))
                 "
               >
-                <v-card
-                  rounded="lg"
-                  elevation="12"
-                  color="surface"
-                  class="px-2 py-2"
-                >
+                <v-card rounded="lg" elevation="12" class="px-2 py-2">
                   <v-list density="comfortable" lines="one" class="min-w-48">
                     <template v-for="(d, j) in m.depth" :key="'run_' + j">
                       <v-hover v-slot="{ isHovering, props: liProps }">
@@ -322,14 +315,13 @@ onBeforeUnmount(() => {
                           :title="d.title"
                           :to="d.path"
                           :active="isLinkActive(d.path)"
-                          color="primary"
                           :rounded="'lg'"
                           :variant="
                             isHovering || isLinkActive(d.path)
                               ? 'tonal'
                               : 'text'
                           "
-                          class="mx-2 my-1 text-white"
+                          class="mx-2 my-1"
                         />
                       </v-hover>
                     </template>
@@ -337,7 +329,6 @@ onBeforeUnmount(() => {
                 </v-card>
               </template>
 
-              <!-- 기본 하위메뉴 (Run 이외는 기존 그대로) -->
               <template v-else>
                 <v-list density="compact" class="min-w-48 subnav-list">
                   <v-list-item
@@ -345,7 +336,7 @@ onBeforeUnmount(() => {
                     :key="'d_' + j"
                     :title="d.title"
                     :to="d.path"
-                    class="submenu-item text-white"
+                    class="submenu-item"
                     :class="{ 'submenu-active': isLinkActive(d.path) }"
                   />
                 </v-list>
@@ -373,8 +364,7 @@ onBeforeUnmount(() => {
         <template #activator="{ props }" v-if="!hideAllMenus">
           <v-btn
             icon
-            color="primary"
-            class="mr-2"
+            class="mr-2 text-white"
             v-bind="props"
             @click="toggleAdmin"
             aria-label="Settings"
@@ -388,8 +378,7 @@ onBeforeUnmount(() => {
         <template #activator="{ props }">
           <v-btn
             icon
-            color="primary"
-            class="mr-2"
+            class="mr-2 text-white"
             @click="goSelect"
             v-bind="props"
             aria-label="Project"
@@ -400,15 +389,17 @@ onBeforeUnmount(() => {
       </v-tooltip>
 
       <div class="d-none d-md-flex flex-column align-end userbox">
-        <div class="font-weight-black">{{ username || "GUEST" }}</div>
-        <div class="text-subtitle-2">
+        <div class="font-weight-black text-white">
+          {{ username || "GUEST" }}
+        </div>
+        <div class="text-subtitle-2 text-white">
           {{ projectName || "No Project Selected" }}
         </div>
       </div>
 
       <v-menu location="bottom end">
         <template #activator="{ props }">
-          <v-btn icon color="primary" v-bind="props" class="mr-1">
+          <v-btn icon v-bind="props" class="mr-1 text-white">
             <v-icon>mdi-arrow-down-drop-circle-outline</v-icon>
           </v-btn>
         </template>
@@ -441,7 +432,7 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .topbar {
-  background: rgba(18, 18, 18, 0.7) !important;
+  background: #121212 !important;
   backdrop-filter: saturate(140%) blur(8px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
@@ -451,6 +442,7 @@ onBeforeUnmount(() => {
   font-weight: 800;
   letter-spacing: 0.08em;
   padding: 0 14px;
+  color: #fff;
 }
 
 /* 중앙 고정 네비게이션 */
diff --git a/src/components/templates/Datasets/ListComponent.vue b/src/components/templates/Datasets/ListComponent.vue
index 0230459..42d5f2b 100644
--- a/src/components/templates/Datasets/ListComponent.vue
+++ b/src/components/templates/Datasets/ListComponent.vue
@@ -484,7 +484,7 @@ watch(
           </v-sheet>
 
           <!-- 목록 -->
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/components/templates/datagroup/ListComponent.vue b/src/components/templates/datagroup/ListComponent.vue
index 8196f14..7ea0868 100644
--- a/src/components/templates/datagroup/ListComponent.vue
+++ b/src/components/templates/datagroup/ListComponent.vue
@@ -462,7 +462,7 @@ onMounted(fetchList);
           </v-sheet>
 
           <!-- Table -->
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/components/templates/deployment/ListComponent.vue b/src/components/templates/deployment/ListComponent.vue
index 743c720..7f58af1 100644
--- a/src/components/templates/deployment/ListComponent.vue
+++ b/src/components/templates/deployment/ListComponent.vue
@@ -424,7 +424,7 @@ const getSelectedAllData = () => {
             </v-sheet>
           </v-sheet>
 
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/components/templates/home/ListComponent.vue b/src/components/templates/home/ListComponent.vue
index 48ebc72..a8619c9 100644
--- a/src/components/templates/home/ListComponent.vue
+++ b/src/components/templates/home/ListComponent.vue
@@ -679,10 +679,15 @@ watch(showKubeflowDetails, async () => {
     <v-row>
       <!-- Recent Run -->
       <v-col cols="12" md="6">
-        <v-card class="pa-0" style="min-height: 450px; max-height: 450px">
+        <v-card
+          class="pa-0"
+          :elevation="0"
+          color="grey-lighten-4"
+          style="min-height: 450px; max-height: 450px"
+        >
           <div
             class="d-flex align-center justify-space-between w-100"
-            style="padding: 16px; border-bottom: 1px solid #ccc"
+            style="padding: 16px"
           >
             <h3 class="text-subtitle-1 font-weight-bold mb-0">Recent Run</h3>
 
@@ -696,7 +701,7 @@ watch(showKubeflowDetails, async () => {
               Go to Executions
             </v-btn>
           </div>
-
+          <v-divider />
           <div style="overflow-y: auto; max-height: 380px; padding: 8px 16px">
             <v-skeleton-loader
               v-if="runsLoading"
@@ -705,7 +710,7 @@ watch(showKubeflowDetails, async () => {
               v-for="i in 4"
               :key="i"
             />
-            <v-list v-else density="comfortable">
+            <v-list v-else density="comfortable" class="bg-transparent">
               <v-list-item
                 v-for="(runRow, idx) in recentRuns"
                 :key="idx"
@@ -761,10 +766,15 @@ watch(showKubeflowDetails, async () => {
 
       <!-- Workflows -->
       <v-col cols="12" md="6">
-        <v-card class="pa-0" style="min-height: 450px; max-height: 450px">
+        <v-card
+          class="pa-0"
+          :elevation="0"
+          color="grey-lighten-4"
+          style="min-height: 450px; max-height: 450px"
+        >
           <div
             class="d-flex align-center justify-space-between w-100"
-            style="padding: 16px; border-bottom: 1px solid #ccc"
+            style="padding: 16px"
           >
             <h3 class="text-subtitle-1 font-weight-bold mb-0">
               Recently Registered Workflow
@@ -779,9 +789,9 @@ watch(showKubeflowDetails, async () => {
               Go to Workflows
             </v-btn>
           </div>
-
+          <v-divider />
           <div style="overflow-y: auto; max-height: 380px; padding: 8px 16px">
-            <v-list density="comfortable" nav>
+            <v-list density="comfortable" class="bg-transparent" nav>
               <v-list-item
                 v-for="wfRow in workflows
                   .slice(0, 10)
@@ -793,7 +803,7 @@ watch(showKubeflowDetails, async () => {
                     <span class="text-body-2 font-weight-medium">{{
                       wfRow.name
                     }}</span>
-                    <span class="text-caption text-grey-lighten-1">{{
+                    <span class="text-caption text-body-2">{{
                       fmtYmdHm(wfRow.modDt)
                     }}</span>
                   </div>
@@ -818,8 +828,13 @@ watch(showKubeflowDetails, async () => {
       <!-- Kubeflow -->
 
       <v-col cols="12" md="6">
-        <v-card class="pa-0" style="min-height: 450px; max-height: 450px">
-          <div style="padding: 16px; border-bottom: 1px solid #3a3a3a">
+        <v-card
+          class="pa-0"
+          :elevation="0"
+          color="grey-lighten-4"
+          style="min-height: 450px; max-height: 450px"
+        >
+          <div style="padding: 16px">
             <div class="d-flex align-center justify-space-between w-100">
               <h3 class="text-subtitle-1 font-weight-bold mb-0">
                 Run Status Overview
@@ -860,7 +875,7 @@ watch(showKubeflowDetails, async () => {
               </v-btn>
             </div>
           </div>
-
+          <v-divider />
           <div style="height: 380px">
             <!-- Only Chart -->
             <div
@@ -963,28 +978,30 @@ watch(showKubeflowDetails, async () => {
 
       <!-- Dataset (fixed height, inner scroll, compact) -->
       <v-col cols="12" md="6">
-        <v-card class="pa-0 d-flex flex-column" :height="450">
-          <!-- Header (고정 높이) -->
-          <div
-            class="d-flex align-center justify-space-between w-100 pa-4 flex-shrink-0"
-          >
-            <h3 class="text-subtitle-1 font-weight-bold mb-0">
-              DataGroup Update Activity
-            </h3>
-            <v-btn
-              variant="text"
-              class="text-caption font-weight-bold"
-              append-icon="mdi-arrow-right"
-              style="text-transform: none"
-              @click="goDatasets"
-            >
-              Go to DataGroup
-            </v-btn>
+        <v-card
+          class="pa-0"
+          :elevation="0"
+          color="grey-lighten-4"
+          style="min-height: 450px; max-height: 450px"
+        >
+          <div style="padding: 16px">
+            <div class="d-flex align-center justify-space-between w-100">
+              <h3 class="text-subtitle-1 font-weight-bold mb-0">
+                DataGroup Update Activity
+              </h3>
+              <v-btn
+                variant="text"
+                class="text-caption font-weight-bold"
+                append-icon="mdi-arrow-right"
+                style="text-transform: none"
+                @click="goDatasets"
+              >
+                Go to DataGroup
+              </v-btn>
+            </div>
           </div>
           <v-divider />
-
-          <!-- Body (남은 영역만 스크롤) -->
-          <v-sheet class="pa-3 flex-grow-1 overflow-auto">
+          <v-sheet class="pa-3 flex-grow-1 overflow-auto bg-transparent">
             <v-skeleton-loader
               v-if="dsLoading"
               type="list-item-two-line"
@@ -997,6 +1014,7 @@ watch(showKubeflowDetails, async () => {
               <v-expansion-panel
                 v-for="g in groupSummaries"
                 :key="g.id"
+                :elevation="3"
                 @group:selected="
                   async (e: any) => {
                     if (e.value) await loadDatasetsForGroup(g.id, g.name);
diff --git a/src/components/templates/projects/ListComponent.vue b/src/components/templates/projects/ListComponent.vue
index 204628e..0e4df16 100644
--- a/src/components/templates/projects/ListComponent.vue
+++ b/src/components/templates/projects/ListComponent.vue
@@ -588,7 +588,7 @@ onMounted(async () => {
           </v-sheet>
 
           <!-- 테이블 -->
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/components/templates/run/executions/ListComponent.vue b/src/components/templates/run/executions/ListComponent.vue
index 504d30c..09ecaca 100644
--- a/src/components/templates/run/executions/ListComponent.vue
+++ b/src/components/templates/run/executions/ListComponent.vue
@@ -632,7 +632,7 @@ onMounted(() => {
           </v-sheet>
 
           <!-- 목록 -->
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/components/templates/run/experiment/ListComponent.vue b/src/components/templates/run/experiment/ListComponent.vue
index bf11a34..bd1e37f 100644
--- a/src/components/templates/run/experiment/ListComponent.vue
+++ b/src/components/templates/run/experiment/ListComponent.vue
@@ -390,7 +390,7 @@ onMounted(() => {
           </v-sheet>
 
           <!-- 목록 -->
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/components/templates/stepconfig/ListComponent.vue b/src/components/templates/stepconfig/ListComponent.vue
index 7653716..12ca144 100644
--- a/src/components/templates/stepconfig/ListComponent.vue
+++ b/src/components/templates/stepconfig/ListComponent.vue
@@ -407,7 +407,7 @@ onMounted(() => {
           </v-sheet>
 
           <!-- 테이블 -->
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/components/templates/trainingscript/ListComponent.vue b/src/components/templates/trainingscript/ListComponent.vue
index db83db8..7d85ca9 100644
--- a/src/components/templates/trainingscript/ListComponent.vue
+++ b/src/components/templates/trainingscript/ListComponent.vue
@@ -463,7 +463,7 @@ watch(
           </v-sheet>
 
           <!-- 목록 -->
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/components/templates/trainingscriptgroup/ListComponent.vue b/src/components/templates/trainingscriptgroup/ListComponent.vue
index 540a466..6ddf45e 100644
--- a/src/components/templates/trainingscriptgroup/ListComponent.vue
+++ b/src/components/templates/trainingscriptgroup/ListComponent.vue
@@ -462,7 +462,7 @@ onMounted(fetchList);
           </v-sheet>
 
           <!-- Table -->
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/components/templates/users/ListComponent.vue b/src/components/templates/users/ListComponent.vue
index 4eef9e3..f8f01f8 100644
--- a/src/components/templates/users/ListComponent.vue
+++ b/src/components/templates/users/ListComponent.vue
@@ -484,7 +484,7 @@ onMounted(async () => {
           </v-sheet>
 
           <!-- 테이블 -->
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/components/templates/workflow/ListComponent.vue b/src/components/templates/workflow/ListComponent.vue
index 770652d..280b925 100644
--- a/src/components/templates/workflow/ListComponent.vue
+++ b/src/components/templates/workflow/ListComponent.vue
@@ -432,7 +432,7 @@ onMounted(() => {
             </v-sheet>
           </v-sheet>
 
-          <v-card class="rounded-lg pa-8">
+          <v-card class="rounded-lg pa-8" color="grey-lighten-4">
             <v-col cols="12">
               <v-sheet>
                 <v-table
diff --git a/src/pages/LoginView.vue b/src/pages/LoginView.vue
index 8ad73a7..335d4ca 100644
--- a/src/pages/LoginView.vue
+++ b/src/pages/LoginView.vue
@@ -89,7 +89,7 @@ const signIn = () => {
             <v-text-field
               v-model="data.username"
               :readonly="data.loading"
-              class="mb-2"
+              class="mb-2 text-white"
               variant="outlined"
               color="secondary"
               placeholder="아이디를 입력해주세요."
@@ -98,10 +98,10 @@ const signIn = () => {
             <v-text-field
               v-model="data.password"
               :readonly="data.loading"
-              type="password"
+              type="password "
               variant="outlined"
               color="secondary"
-              class="mb-2"
+              class="mb-2 text-white"
               placeholder="비밀번호를 입력해주세요."
             ></v-text-field>
 
@@ -118,7 +118,7 @@ const signIn = () => {
             </v-btn>
           </v-form>
 
-          <div class="mt-4 text-center">
+          <div class="mt-4 text-center text-white">
             <span>계정이 없으십니까?</span>
             <router-link
               to="/signup"
diff --git a/src/pages/SignupView.vue b/src/pages/SignupView.vue
index f58c7c1..36e04f6 100644
--- a/src/pages/SignupView.vue
+++ b/src/pages/SignupView.vue
@@ -96,7 +96,7 @@ const signUp = () => {
             <v-text-field
               v-model="data.username"
               :readonly="data.loading"
-              class="mb-2"
+              class="mb-2 text-white"
               variant="outlined"
               color="secondary"
               placeholder="아이디를 입력해주세요."
@@ -104,7 +104,7 @@ const signUp = () => {
             <v-text-field
               v-model="data.email"
               :readonly="data.loading"
-              class="mb-2"
+              class="mb-2 text-white"
               variant="outlined"
               color="secondary"
               placeholder="이메일을 입력해주세요."
@@ -115,7 +115,7 @@ const signUp = () => {
               :rules="[(v) => !!v || '역할을 선택해주세요.']"
               variant="outlined"
               placeholder="Role"
-              class="mb-2"
+              class="mb-2 text-white"
             />
             <v-text-field
               v-model="data.password"
@@ -123,7 +123,7 @@ const signUp = () => {
               type="password"
               variant="outlined"
               color="secondary"
-              class="mb-2"
+              class="mb-2 text-white"
               placeholder="비밀번호를 입력해주세요."
             ></v-text-field>
 
@@ -140,7 +140,7 @@ const signUp = () => {
             </v-btn>
           </v-form>
 
-          <div class="mt-4 text-center">
+          <div class="mt-4 text-center text-white">
             <span>계정이 있으십니까?</span>
             <router-link
               to="/login"
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 825a9f5..c81c7d1 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,19 +1,21 @@
-/**
- * plugins/vuetify.js
- *
- * Framework documentation: https://vuetifyjs.com`
- */
-
-// Styles
 import "@mdi/font/css/materialdesignicons.css";
 import "vuetify/styles";
-
-// Composables
 import { createVuetify } from "vuetify";
 
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: "dark",
+    defaultTheme: "light",
+    themes: {
+      light: {
+        colors: {
+          background: "#ffffff", // ⬅️ 페이지 배경을 흰색으로
+          surface: "#ffffff", // 기본 표면도 흰색
+          card: "#f7f8fa", // 카드만 아주 연한 회색(원하면 #ffffff로)
+          border: "#e7e9ee",
+          text: "#2b2f33",
+          muted: "#6b7280",
+        },
+      },
+    },
   },
 });