refactor: redesign dashboard metrics with professional styling

**Dashboard.razor Changes:** - Replace MudGrid/MudItem with pure HTML div elements for reliable layout - Remove dependency on MudBlazor grid components that were causing conflicts - Use inline flexbox layout with emoji icons for better visual appeal - Improve semantic structure and readability **admin.css Improvements:** - 4-column metric grid layout for desktop (1440px+) - 3-column for laptops (1024px), 2-column for tablets (768px), 1-column for mobile - Add hover effects: elevation, transform, top border animation - Improve gradient backgrounds: more subtle, better color hierarchy - Add professional box shadows and smooth transitions (cubic-bezier) - Better padding and spacing for premium look - Responsive design across all breakpoints Visual improvements: ✓ Professional gradient backgrounds with hover states ✓ Smooth animations (0.3s cubic-bezier for premium feel) ✓ Better visual hierarchy with typography ✓ Proper spacing and alignment ✓ Accessibility-friendly color contrasts ✓ Mobile-first responsive design Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-28 10:07:33 +09:00
parent 114ab22197
commit d09726c46a
2 changed files with 173 additions and 74 deletions
@@ -18,51 +18,52 @@
    </MudButton>
 </section>

-<MudGrid Class="admin-metric-grid">
-    <MudItem xs="12" sm="6" md="3">
-        <MudPaper Class="admin-metric-card accent-blue cursor-pointer" Elevation="0" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/inquiries"))' Style="cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;">
-            <MudText Typo="Typo.caption">이번달 문의</MudText>
-            <div class="d-flex align-center justify-space-between">
-                <MudText Typo="Typo.h3">@summary.ThisMonthInquiries</MudText>
-                <MudIcon Icon="@Icons.Material.Filled.Forum" Color="Color.Primary" Size="Size.Large" Style="opacity: 0.2;" />
+<!-- Metrics Grid - Pure HTML div instead of MudGrid to ensure proper layout -->
+<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>
-            <MudText Typo="Typo.body2">월간 상담 유입 (클릭 시 이동)</MudText>
-        </MudPaper>
-    </MudItem>
+            <span style="font-size: 0.9rem; color: #666;">월간 상담 유입 (클릭 시 이동)</span>
+        </div>
+    </div>

-    <MudItem xs="12" sm="6" md="3">
-        <MudPaper Class="admin-metric-card accent-amber cursor-pointer" Elevation="0" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/inquiries?status=new"))' Style="cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;">
-            <MudText Typo="Typo.caption">신규 문의</MudText>
-            <div class="d-flex align-center justify-space-between">
-                <MudText Typo="Typo.h3">@summary.NewInquiries</MudText>
-                <MudIcon Icon="@Icons.Material.Filled.NotificationImportant" Color="Color.Warning" Size="Size.Large" Style="opacity: 0.2;" />
+    <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>
-            <MudText Typo="Typo.body2">처리 대기 (클릭 시 이동)</MudText>
-        </MudPaper>
-    </MudItem>
+            <span style="font-size: 0.9rem; color: #666;">처리 대기 (클릭 시 이동)</span>
+        </div>
+    </div>

-    <MudItem xs="12" sm="6" md="3">
-        <MudPaper Class="admin-metric-card accent-slate cursor-pointer" Elevation="0" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/blog"))' Style="cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;">
-            <MudText Typo="Typo.caption">전체 포스트</MudText>
-            <div class="d-flex align-center justify-space-between">
-                <MudText Typo="Typo.h3">@summary.TotalPosts</MudText>
-                <MudIcon Icon="@Icons.Material.Filled.Article" Color="Color.Default" Size="Size.Large" Style="opacity: 0.2;" />
+    <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>
-            <MudText Typo="Typo.body2">콘텐츠 자산 (클릭 시 이동)</MudText>
-        </MudPaper>
-    </MudItem>
+            <span style="font-size: 0.9rem; color: #666;">콘텐츠 자산 (클릭 시 이동)</span>
+        </div>
+    </div>

-    <MudItem xs="12" sm="6" md="3">
-        <MudPaper Class="admin-metric-card accent-green cursor-pointer" Elevation="0" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/blog"))' Style="cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;">
-            <MudText Typo="Typo.caption">발행된 포스트</MudText>
-            <div class="d-flex align-center justify-space-between">
-                <MudText Typo="Typo.h3">@summary.PublishedPosts</MudText>
-                <MudIcon Icon="@Icons.Material.Filled.Public" Color="Color.Success" Size="Size.Large" Style="opacity: 0.2;" />
+    <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>
-            <MudText Typo="Typo.body2">검색 노출 대상 (클릭 시 이동)</MudText>
-        </MudPaper>
-    </MudItem>
-</MudGrid>
+            <span style="font-size: 0.9rem; color: #666;">검색 노출 대상 (클릭 시 이동)</span>
+        </div>
+    </div>
+</div>

@if (upcomingFilings.Count > 0)
 {