fix: Admin CSS 링크 추가 및 스타일시트 생성

## 문제 App.razor에 Bootstrap/MudBlazor CSS 링크 없음 → Admin 페이지가 완전히 스타일 없는 상태 ## 해결 1. App.razor에 필요한 CSS 링크 추가: - Bootstrap 5.3.0 CDN - Material UI 기본 스타일 - Material Icons - admin.css (커스텀 스타일) 2. admin.css 생성: - 색상 변수 정의 - MudBlazor 커스터마이징 - 한국어 폰트 (Noto Sans KR) - 반응형 디자인 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-06-26 19:05:39 +09:00
parent 25095bbdc4
commit 73a4abc4e1
2 changed files with 70 additions and 0 deletions
@@ -6,10 +6,15 @@
    <title>백원숙 세무회계 - 관리자</title>
    <base href="/taxbaik/admin/" />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/@mui/material@latest/umd/material-ui.production.min.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link rel="stylesheet" href="~/css/admin.css" />
    <component type="typeof(HeadOutlet)" render-mode="InteractiveServer" />
 </head>
 <body>
    <Routes />
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="_framework/blazor.web.js"></script>
 </body>
 </html>
@@ -0,0 +1,65 @@
+/* TaxBaik Admin - 기본 스타일 */
+
+:root {
+    --color-primary: #1B4F8A;
+    --color-primary-dark: #133970;
+    --color-accent: #C9A227;
+    --color-cta: #E05A2B;
+    --color-bg: #F7F9FC;
+    --color-text: #1A1A2E;
+    --color-text-muted: #5A6A7A;
+}
+
+body {
+    font-family: 'Noto Sans KR', sans-serif;
+    color: var(--color-text);
+    background-color: var(--color-bg);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Noto Sans KR', sans-serif;
+    color: var(--color-text);
+}
+
+/* MudBlazor 커스터마이징 */
+.mud-appbar {
+    background-color: var(--color-primary) !important;
+}
+
+.mud-appbar .mud-button-root {
+    color: white;
+}
+
+.mud-button-contained-primary {
+    background-color: var(--color-primary) !important;
+}
+
+.mud-button-contained-primary:hover {
+    background-color: var(--color-primary-dark) !important;
+}
+
+.mud-button-outlined-primary {
+    color: var(--color-primary) !important;
+    border-color: var(--color-primary) !important;
+}
+
+.mud-card {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 테이블 스타일 */
+.mud-table {
+    font-family: 'Noto Sans KR', sans-serif;
+}
+
+/* 폼 요소 */
+.mud-input-control .mud-input-slot {
+    font-family: 'Noto Sans KR', sans-serif;
+}
+
+/* 반응형 */
+@media (max-width: 768px) {
+    body {
+        font-size: 14px;
+    }
+}