From 8999e51d4e0adc17b8612e6f71176e0bca0e10ea Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Tue, 30 Jun 2026 22:01:12 +0900
Subject: [PATCH] style: refactor dashboard metrics cards to use admin.css
 design system

---
 .../Components/Admin/Pages/Dashboard.razor    | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/TaxBaik.Web/Components/Admin/Pages/Dashboard.razor b/TaxBaik.Web/Components/Admin/Pages/Dashboard.razor
index 79e2719..50826e1 100644
--- a/TaxBaik.Web/Components/Admin/Pages/Dashboard.razor
+++ b/TaxBaik.Web/Components/Admin/Pages/Dashboard.razor
@@ -26,49 +26,49 @@
     <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="mb-4" />
 }
 
-<!-- Metrics Grid - Pure HTML div instead of MudGrid to ensure proper layout -->
+<!-- Metrics Grid -->
 <div class="admin-metric-grid">
-    <div class="admin-metric-card accent-blue cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/inquiries"))' style="cursor: pointer;">
-        <div style="display: flex; flex-direction: column; gap: 12px; height: 100%;">
-            <span style="font-size: 0.75rem; color: #999; text-transform: uppercase; font-weight: 600;">이번달 문의</span>
-            <div style="display: flex; justify-content: space-between; align-items: center; flex: 1;">
-                <span style="font-size: 2rem; font-weight: 700; color: #1565c0;">@summary.ThisMonthInquiries</span>
-                <span style="font-size: 2.5rem; opacity: 0.15; color: #1976d2;">💬</span>
+    <div class="admin-metric-card accent-blue cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/inquiries"))'>
+        <div class="admin-metric-card-body">
+            <span class="admin-metric-card-label">이번달 문의</span>
+            <div class="admin-metric-card-value-row">
+                <span class="admin-metric-card-value" style="color: var(--primary-dark);">@summary.ThisMonthInquiries</span>
+                <span class="admin-metric-card-icon" style="color: var(--primary-color);">💬</span>
             </div>
-            <span style="font-size: 0.9rem; color: #666;">월간 상담 유입 (클릭 시 이동)</span>
+            <span class="admin-metric-card-caption">월간 상담 유입 (클릭 시 이동)</span>
         </div>
     </div>
 
-    <div class="admin-metric-card accent-amber cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/inquiries?status=new"))' style="cursor: pointer;">
-        <div style="display: flex; flex-direction: column; gap: 12px; height: 100%;">
-            <span style="font-size: 0.75rem; color: #999; text-transform: uppercase; font-weight: 600;">신규 문의</span>
-            <div style="display: flex; justify-content: space-between; align-items: center; flex: 1;">
-                <span style="font-size: 2rem; font-weight: 700; color: #e65100;">@summary.NewInquiries</span>
-                <span style="font-size: 2.5rem; opacity: 0.15; color: #f57c00;">⚠️</span>
+    <div class="admin-metric-card accent-amber cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/inquiries?status=new"))'>
+        <div class="admin-metric-card-body">
+            <span class="admin-metric-card-label">신규 문의</span>
+            <div class="admin-metric-card-value-row">
+                <span class="admin-metric-card-value" style="color: var(--tertiary-dark);">@summary.NewInquiries</span>
+                <span class="admin-metric-card-icon" style="color: var(--tertiary-color);">⚠️</span>
             </div>
-            <span style="font-size: 0.9rem; color: #666;">처리 대기 (클릭 시 이동)</span>
+            <span class="admin-metric-card-caption">처리 대기 (클릭 시 이동)</span>
         </div>
     </div>
 
-    <div class="admin-metric-card accent-slate cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/blog"))' style="cursor: pointer;">
-        <div style="display: flex; flex-direction: column; gap: 12px; height: 100%;">
-            <span style="font-size: 0.75rem; color: #999; text-transform: uppercase; font-weight: 600;">전체 포스트</span>
-            <div style="display: flex; justify-content: space-between; align-items: center; flex: 1;">
-                <span style="font-size: 2rem; font-weight: 700; color: #455a64;">@summary.TotalPosts</span>
-                <span style="font-size: 2.5rem; opacity: 0.15; color: #607d8b;">📄</span>
+    <div class="admin-metric-card accent-slate cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/blog"))'>
+        <div class="admin-metric-card-body">
+            <span class="admin-metric-card-label">전체 포스트</span>
+            <div class="admin-metric-card-value-row">
+                <span class="admin-metric-card-value" style="color: #455a64;">@summary.TotalPosts</span>
+                <span class="admin-metric-card-icon" style="color: #607d8b;">📄</span>
             </div>
-            <span style="font-size: 0.9rem; color: #666;">콘텐츠 자산 (클릭 시 이동)</span>
+            <span class="admin-metric-card-caption">콘텐츠 자산 (클릭 시 이동)</span>
         </div>
     </div>
 
-    <div class="admin-metric-card accent-green cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/blog"))' style="cursor: pointer;">
-        <div style="display: flex; flex-direction: column; gap: 12px; height: 100%;">
-            <span style="font-size: 0.75rem; color: #999; text-transform: uppercase; font-weight: 600;">발행된 포스트</span>
-            <div style="display: flex; justify-content: space-between; align-items: center; flex: 1;">
-                <span style="font-size: 2rem; font-weight: 700; color: #2e7d32;">@summary.PublishedPosts</span>
-                <span style="font-size: 2.5rem; opacity: 0.15; color: #388e3c;">🌐</span>
+    <div class="admin-metric-card accent-green cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/blog"))'>
+        <div class="admin-metric-card-body">
+            <span class="admin-metric-card-label">발행된 포스트</span>
+            <div class="admin-metric-card-value-row">
+                <span class="admin-metric-card-value" style="color: var(--secondary-dark);">@summary.PublishedPosts</span>
+                <span class="admin-metric-card-icon" style="color: var(--secondary-color);">🌐</span>
             </div>
-            <span style="font-size: 0.9rem; color: #666;">검색 노출 대상 (클릭 시 이동)</span>
+            <span class="admin-metric-card-caption">검색 노출 대상 (클릭 시 이동)</span>
         </div>
     </div>
 </div>