From 7020794addf484b28c0153c8937da26f3225302d Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Fri, 17 Apr 2026 22:05:33 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9C=A0=ED=8B=B8=EB=A6=AC=ED=8B=B0=20?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=ED=85=8C=EB=A7=88=20=ED=86=A0=ED=81=B0?=
 =?UTF-8?q?=ED=99=94=20+=20=ED=98=B8=EB=B2=84/=EA=B7=B8=EB=A6=BC=EC=9E=90?=
 =?UTF-8?q?=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 카드/아이콘 박스/구분선에 semantic 토큰 적용
- 호버: emerald 색상 변화 대신 scale-[1.02]
- 카드 그림자 추가로 라이트 배경과 구분

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/index.css      | 38 +++++++++++++++++++
 frontend/src/pages/Home.jsx | 75 +++++++++++++++++++++++++++++--------
 2 files changed, 98 insertions(+), 15 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 18107a4..2c2b863 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -30,6 +30,25 @@
   --toggle-thumb-from: #e5e7eb;
   --toggle-thumb-to: #9ca3af;
   --toggle-thumb-icon: #0f172a;
+
+  --card-bg-from: rgba(17, 24, 39, 0.8);
+  --card-bg-to: rgba(17, 24, 39, 0.4);
+  --card-border: rgba(255, 255, 255, 0.05);
+  --card-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+
+  --icon-box-from: #1f2937;
+  --icon-box-to: #111827;
+  --icon-box-border: rgba(255, 255, 255, 0.05);
+
+  --divider-line: rgba(255, 255, 255, 0.1);
+  --skeleton-bg: rgba(255, 255, 255, 0.02);
+
+  --empty-bg: rgba(17, 24, 39, 0.4);
+  --empty-border: rgba(255, 255, 255, 0.05);
+
+  --accent: #10b981;
+  --accent-hover-text: #6ee7b7;
+  --accent-glow: rgba(16, 185, 129, 0.1);
 }
 
 /* 테마 토큰 - light */
@@ -56,6 +75,25 @@
   --toggle-thumb-from: #fde68a;
   --toggle-thumb-to: #f59e0b;
   --toggle-thumb-icon: #78350f;
+
+  --card-bg-from: #ffffff;
+  --card-bg-to: #ffffff;
+  --card-border: rgba(0, 0, 0, 0.06);
+  --card-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
+
+  --icon-box-from: #f3f4f6;
+  --icon-box-to: #e5e7eb;
+  --icon-box-border: rgba(0, 0, 0, 0.06);
+
+  --divider-line: rgba(0, 0, 0, 0.1);
+  --skeleton-bg: rgba(0, 0, 0, 0.05);
+
+  --empty-bg: rgba(249, 250, 251, 0.9);
+  --empty-border: rgba(0, 0, 0, 0.06);
+
+  --accent: #059669;
+  --accent-hover-text: #047857;
+  --accent-glow: rgba(16, 185, 129, 0.12);
 }
 
 html, body, #root {
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index cf52ad3..fbbb9e7 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -13,9 +13,20 @@ export default function Home() {
     <div className="space-y-10 max-w-5xl mx-auto pt-6">
       {/* 구분선 */}
       <div className="flex items-center gap-4">
-        <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
-        <span className="text-xs text-gray-500 uppercase tracking-widest">Utilities</span>
-        <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+        <div
+          className="h-px flex-1 transition-colors duration-300"
+          style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
+        />
+        <span
+          className="text-xs uppercase tracking-widest transition-colors duration-300"
+          style={{ color: 'var(--text-dim)' }}
+        >
+          Utilities
+        </span>
+        <div
+          className="h-px flex-1 transition-colors duration-300"
+          style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
+        />
       </div>
 
       {/* 메뉴 그리드 */}
@@ -23,13 +34,25 @@ export default function Home() {
         {loading ? (
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="h-32 rounded-2xl bg-white/[0.02] animate-pulse" />
+              <div
+                key={i}
+                className="h-32 rounded-2xl animate-pulse transition-colors duration-300"
+                style={{ background: 'var(--skeleton-bg)' }}
+              />
             ))}
           </div>
         ) : menus.length === 0 ? (
-          <div className="rounded-2xl border border-white/5 bg-gray-900/40 p-16 text-center">
+          <div
+            className="rounded-2xl border p-16 text-center transition-colors duration-300"
+            style={{ background: 'var(--empty-bg)', borderColor: 'var(--empty-border)' }}
+          >
             <div className="text-5xl mb-4 opacity-50">🍁</div>
-            <p className="text-gray-400">아직 등록된 기능이 없습니다</p>
+            <p
+              className="transition-colors duration-300"
+              style={{ color: 'var(--text-muted)' }}
+            >
+              아직 등록된 기능이 없습니다
+            </p>
           </div>
         ) : (
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -37,16 +60,27 @@ export default function Home() {
               <Link
                 key={menu.id}
                 to={menu.url}
-                className="group relative overflow-hidden rounded-2xl border border-white/5 bg-gradient-to-br from-gray-900/80 to-gray-900/40 p-6 hover:border-emerald-500/30 transition-all duration-300"
+                className="relative rounded-2xl border p-6 transition-transform duration-300 hover:scale-[1.02] border-[var(--card-border)]"
+                style={{
+                  backgroundImage: 'linear-gradient(to bottom right, var(--card-bg-from), var(--card-bg-to))',
+                  boxShadow: 'var(--card-shadow)',
+                }}
               >
-                <div className="absolute -top-16 -right-16 w-40 h-40 rounded-full bg-emerald-500/0 group-hover:bg-emerald-500/10 blur-3xl transition-all duration-500" />
-                <div className="relative space-y-3">
-                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 border border-white/5 flex items-center justify-center overflow-hidden group-hover:scale-110 group-hover:border-emerald-500/30 transition-all duration-300">
+                <div className="space-y-3">
+                  <div
+                    className="w-12 h-12 rounded-xl border flex items-center justify-center overflow-hidden border-[var(--icon-box-border)]"
+                    style={{ backgroundImage: 'linear-gradient(to bottom right, var(--icon-box-from), var(--icon-box-to))' }}
+                  >
                     <img src={menu.image?.url || '/default.png'} alt={menu.title} className="w-9 h-9 object-contain" />
                   </div>
                   <div>
-                    <h2 className="font-semibold group-hover:text-emerald-300 transition">{menu.title}</h2>
-                    <p className="text-sm text-gray-400 mt-1 leading-relaxed">{menu.description}</p>
+                    <h2 className="font-medium">{menu.title}</h2>
+                    <p
+                      className="text-sm mt-1 leading-relaxed transition-colors duration-300"
+                      style={{ color: 'var(--text-muted)' }}
+                    >
+                      {menu.description}
+                    </p>
                   </div>
                 </div>
               </Link>
@@ -57,9 +91,20 @@ export default function Home() {
 
       {/* 구분선 */}
       <div className="flex items-center gap-4">
-        <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
-        <span className="text-xs text-gray-500 uppercase tracking-widest">Notices</span>
-        <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+        <div
+          className="h-px flex-1 transition-colors duration-300"
+          style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
+        />
+        <span
+          className="text-xs uppercase tracking-widest transition-colors duration-300"
+          style={{ color: 'var(--text-dim)' }}
+        >
+          Notices
+        </span>
+        <div
+          className="h-px flex-1 transition-colors duration-300"
+          style={{ backgroundImage: 'linear-gradient(to right, transparent, var(--divider-line), transparent)' }}
+        />
       </div>
 
       {/* 메이플 공지 */}