공개 홈 Razor Pages 프리렌더 수정

CLAUDE.md

@@ -15,10 +15,19 @@ Blazor (UI만, 사용자 액션 후 API 재조회) ← API (모든 로직) ← D
 ### UI 기준 원칙 (2026-06-29 추가)
 - 기본 디자인 템플릿은 `https://v5.fluentui-blazor.net/` 기준으로 한다.
 - 신규 또는 리팩토링 UI는 Fluent UI Blazor v5 패턴을 우선 적용한다.
-- MudBlazor는 기존 호환 레거시로만 유지하고, 새 UI는 Fluent v5 또는 순수 HTML/CSS로 작성한다.
+- MudBlazor는 레거시 폐기 대상이다. 새 UI나 리팩토링 UI에서는 사용하지 않는다.
+- 기존 MudBlazor 잔여 코드는 Fluent v5 또는 순수 HTML/CSS로 점진 전환한다.
 - 기본 로딩 상태는 `Skeleton`이다. `MudProgressCircular` / `MudProgressLinear`는 예외적으로만 사용한다.
+- `MudDataGrid`, `MudDialog`, `MudTabs`는 폐기 대상이다. 새 작업에서는 사용하지 말고 Fluent v5 또는 순수 HTML/CSS 패턴으로 대체한다.
 - 목록, 카드, 대시보드, 상세 페이지의 초기 데이터 상태는 스켈톤으로 먼저 렌더링하고, 데이터 수신 후 실제 UI로 교체한다.
 - 로딩 중 블로킹 스피너보다 스켈톤을 우선한다.
+- 관리자와 공개 사이트는 가능한 한 같은 `design-tokens.css` / `ui-primitives.css` 기반으로 구성한다.
+- Blazor 진입점은 중복 매핑하지 말고, 동일 호스트 내에서 라우트 충돌이 없도록 단일 엔트리 기준으로 구성한다.
+- `@page` 중복이나 동일 경로의 Razor Pages + Blazor 중복 선언은 배포 전에 반드시 제거한다.
+
+### 레거시 정책
+- MudBlazor, MudDataGrid, MudDialog, MudTabs는 신규 도입 금지다.
+- 남아 있는 레거시 UI는 우선순위에 따라 Fluent v5 또는 순수 HTML/CSS로 교체한다.
 
 ### SOLID 기반 순차 마이그레이션 전략
 
@@ -85,10 +94,18 @@ _refreshTokenExpirationMinutes = 10080;
 - 모든 API 엔드포인트 구현됨
 - 모든 Browser Client 구현됨
 - 16개 Blazor 페이지 API-First 마이그레이션 완료
-- MudDataGrid Douzone ERP 수준 UX 적용
-- MudDialog 모달 패턴 (흰 화면 플래시 제거)
+- 과거 기록: 관리 화면에서 그리드/모달 UX를 빠르게 안정화한 단계
+- 모달 패턴 (흰 화면 플래시 제거)
 - ConfirmDialog 삭제 확인 컴포넌트
 
+### 2026-06-29 운영 기준 업데이트
+- 관리자 백오피스는 Fluent UI v5 우선 구조로 재정리한다.
+- 기본 로딩은 스피너가 아니라 Skeleton이다.
+- `design-tokens.css`와 `ui-primitives.css`는 사이트/관리자 공통의 기본 계층이다.
+- 라우팅 충돌은 가장 먼저 확인할 항목이며, 동일 경로가 두 번 등록되는 구조를 만들지 않는다.
+- 커밋은 기능/호스팅/UI/CSS처럼 주제별로 분리한다.
+- 레거시 제거 우선순위는 `MudBlazor` 계열 UI가 1순위다.
+
 ---
 
 ## 📊 **전체 프로젝트 완료 현황**
@@ -127,7 +144,7 @@ _refreshTokenExpirationMinutes = 10080;
 **Phase 7-4: CRM & 세무관리 (신규 - 2026-06-28)** ✅
 - 5개 API Controller (TaxProfile, TaxFilingSchedule, ConsultingActivity, Contract, RevenueTracking)
 - 5개 Browser Client (API-First 패턴)
-- 5개 Blazor 페이지 (MudDataGrid Dense, Virtualize, Modal Dialog)
+- 5개 Blazor 페이지 (그리드 Dense, Virtualize, 모달 패턴)
 - Douzone ERP 수준의 그리드 UX (32px 행 높이, 데이터 밀도 최적화)
 
 | 페이지 | API | Client | Blazor | 핵심 기능 |
@@ -139,8 +156,8 @@ _refreshTokenExpirationMinutes = 10080;
 | RevenueTrackings | ✅ RevenueTrackingController | ✅ IRevenueTrackingBrowserClient | ✅ List + Modal | 청구/납부 추적, 상태 관리 |
 
 **UI 특성**:
-- MudDataGrid Dense (행높이 32px) + Virtualize (1000+ 행 성능)
-- MudDialog Create/Edit (흰 화면 플래시 방지)
+- Dense 그리드 + Virtualize (1000+ 행 성능)
+- Create/Edit 모달 (흰 화면 플래시 방지)
 - ConfirmDialog Delete (사용자 확인)
 - Status Color Chips (Error/Warning/Success)
 - Client 링크 (상세 페이지 연동)
@@ -198,8 +215,8 @@ PostgreSQL Database
 
 **Blazor 페이지 & UI 고도화 (Phase 7-4)**:
 - [x] 5개 CRM/세무관리 Blazor 페이지
-- [x] MudDataGrid Dense + Virtualize (32px 행 높이)
-- [x] MudDialog 모달 Create/Edit (흰 화면 플래시 제거)
+- [x] Dense 그리드 + Virtualize (32px 행 높이)
+- [x] 모달 Create/Edit (흰 화면 플래시 제거)
 - [x] ConfirmDialog 삭제 확인
 - [x] 상태별 컬러 칩 (Status/Risk Level)
 - [x] 클라이언트 링크 (상세 페이지 연동)
@@ -996,7 +1013,9 @@ Admin 로그인 페이지만 [AllowAnonymous]:
 
 #### UI 적용 패턴
 ```razor
-<MudDataGrid T="YourItem" 
+```razor
+<!-- 과거 예시: 현재는 Fluent v5 표나 HTML table로 대체 -->
+<YourGridComponent T="YourItem"
     Dense="true"
     Hover="true"
     Striped="true"
@@ -1022,7 +1041,8 @@ Admin 로그인 페이지만 [AllowAnonymous]:
             </CellTemplate>
         </TemplateColumn>
     </Columns>
-</MudDataGrid>
+</YourGridComponent>
+```
 ```
 
 #### 색상 & 상태 표시
@@ -1147,7 +1167,9 @@ else if (items.Count == 0)
 <!-- 데이터 그리드 -->
 else
 {
-    <MudDataGrid T="YourEntity"
+```razor
+<!-- 과거 예시: 현재는 Fluent v5 표나 HTML table로 대체 -->
+    <YourGridComponent T="YourEntity"
         Items="@items"
         Dense="true"
         Hover="true"
@@ -1158,13 +1180,16 @@ else
         <Columns>
             <!-- 필수: 컬럼 정의 -->
         </Columns>
-    </MudDataGrid>
+    </YourGridComponent>
+```
 }
 ```
 
 **Step 3: 모달 다이얼로그 (Create/Edit)**
 ```razor
-<MudDialog @bind-IsVisible="isDialogOpen" Options="new DialogOptions { MaxWidth = MaxWidth.Small, FullWidth = true }">
+```razor
+<!-- 과거 예시: 현재는 Fluent v5 Dialog 또는 별도 라우트로 대체 -->
+<YourDialogComponent @bind-IsVisible="isDialogOpen">
     <TitleContent>
         <MudText Typo="Typo.h6">@(isEditMode ? "항목 수정" : "새 항목 추가")</MudText>
     </TitleContent>
@@ -1177,7 +1202,8 @@ else
         <MudButton OnClick="CloseDialog">취소</MudButton>
         <MudButton Color="Color.Primary" OnClick="SaveItem">저장</MudButton>
     </DialogActions>
-</MudDialog>
+</YourDialogComponent>
+```
 ```
 
 **Step 4: @code 섹션 구조**
@@ -1301,8 +1327,8 @@ else
 - [ ] <section class="admin-page-hero"> (캡션, 제목, 부제, 추가 버튼)
 - [ ] 로딩 상태 기본값은 `Skeleton`
 - [ ] 빈 상태 (MudAlert)
-- [ ] MudDataGrid (Dense=true, Virtualize=true, RowsPerPage=30, admin-grid 클래스)
-- [ ] MudDialog (Create/Edit 모달)
+- [ ] Dense 그리드 (Virtualize=true, RowsPerPage=30, admin-grid 클래스)
+- [ ] 모달 (Create/Edit)
 - [ ] ConfirmDialog (Delete 확인)
 - [ ] @code 섹션: OnInitializedAsync → LoadData() 패턴
 - [ ] 모든 에러 처리 (try-catch, Snackbar 메시지)
@@ -1313,7 +1339,7 @@ else
 ❌ **이 패턴을 따르지 않는 페이지는 실시간 코드 리뷰 대상:**
 - 페이지 헤더 (admin-page-hero) 누락
 - 인라인 스타일로 레이아웃 구성
-- MudDialog 없이 별도 라우트로 Create/Edit 처리 (흰 화면 플래시)
+- 별도 라우트로 Create/Edit 처리 (흰 화면 플래시)
 - @code 섹션 구조 다름
 - 모달에서 직접 onSubmit 대신 Snackbar 피드백 미제공
 
@@ -1734,7 +1760,9 @@ public async Task NotifyDeploymentStart()
 @* Components/Admin/Shared/DeploymentNotification.razor *@
 @if (showNotification)
 {
-    <MudDialog @bind-Visible="showNotification">
+```razor
+<!-- 과거 예시: 현재는 Fluent v5 Dialog 또는 HTML/CSS 패턴으로 대체 -->
+    <YourDialogComponent @bind-Visible="showNotification">
         <TitleContent>
             <MudText Typo="Typo.h6">새 버전 배포</MudText>
         </TitleContent>
@@ -1749,7 +1777,8 @@ public async Task NotifyDeploymentStart()
             <MudButton Color="Color.Primary" OnClick="RefreshNow">지금 새로고침</MudButton>
             <MudButton Color="Color.Default" OnClick="DismissNotification">나중에</MudButton>
         </DialogActions>
-    </MudDialog>
+    </YourDialogComponent>
+```
 }
 
 @code {

README.md

@@ -101,7 +101,10 @@ TaxBaik/
 - **UI 기준**
   - 기본 디자인 템플릿은 `https://v5.fluentui-blazor.net/`
   - 기본 로딩 상태는 `Skeleton`
-  - 기존 MudBlazor 패턴은 레거시 호환용으로만 유지
+  - MudBlazor는 레거시 폐기 대상이며 신규 UI에 사용하지 않음
+  - `MudDataGrid`, `MudDialog`, `MudTabs`는 폐기 대상이며 신규 UI에 사용하지 않음
+  - 사이트와 관리자는 `design-tokens.css` / `ui-primitives.css`를 공유
+  - Blazor 라우트는 중복 선언하지 않고 단일 엔트리 기준으로 관리
 
 ---
 

TaxBaik.Application/Services/RevenueTrackingService.cs

@@ -34,6 +34,9 @@ public class RevenueTrackingService(IRevenueTrackingRepository repository)
     public async Task<IEnumerable<RevenueTracking>> GetByClientIdAsync(int clientId, CancellationToken ct = default) =>
         await repository.GetByClientIdAsync(clientId, ct);
 
+    public async Task<RevenueTracking?> GetByIdAsync(int id, CancellationToken ct = default) =>
+        await repository.GetByIdAsync(id, ct);
+
     public async Task<IEnumerable<RevenueTracking>> GetAllAsync(CancellationToken ct = default) =>
         await repository.GetAllAsync(ct);
 

TaxBaik.Domain/Interfaces/IRevenueTrackingRepository.cs

@@ -5,6 +5,7 @@ using TaxBaik.Domain.Entities;
 public interface IRevenueTrackingRepository
 {
     Task<int> CreateAsync(RevenueTracking revenue, CancellationToken cancellationToken = default);
+    Task<RevenueTracking?> GetByIdAsync(int id, CancellationToken cancellationToken = default);
     Task<IEnumerable<RevenueTracking>> GetAllAsync(CancellationToken cancellationToken = default);
     Task<IEnumerable<RevenueTracking>> GetByClientIdAsync(int clientId, CancellationToken cancellationToken = default);
     Task<IEnumerable<RevenueTracking>> GetPendingPaymentsAsync(CancellationToken cancellationToken = default);

TaxBaik.Infrastructure/Repositories/RevenueTrackingRepository.cs

@@ -24,6 +24,15 @@ public class RevenueTrackingRepository(IDbConnectionFactory connectionFactory) :
               FROM revenue_tracking ORDER BY invoice_date DESC");
     }
 
+    public async Task<RevenueTracking?> GetByIdAsync(int id, CancellationToken cancellationToken = default)
+    {
+        using var conn = Conn();
+        return await conn.QueryFirstOrDefaultAsync<RevenueTracking>(
+            @"SELECT id, client_id, invoice_number, invoice_date, service_type, amount, payment_status, payment_date, due_date, notes, created_at, updated_at
+              FROM revenue_tracking WHERE id = @Id",
+            new { Id = id });
+    }
+
     public async Task<IEnumerable<RevenueTracking>> GetByClientIdAsync(int clientId, CancellationToken cancellationToken = default)
     {
         using var conn = Conn();

TaxBaik.Web/Components/Admin/App.razor

@@ -9,6 +9,8 @@
     <base href="/taxbaik/" />
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link rel="stylesheet" href="css/design-tokens.css" />
+    <link rel="stylesheet" href="css/ui-primitives.css" />
     <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
     <script>
         document.documentElement.classList.toggle(

TaxBaik.Web/Components/Admin/Pages/Login.razor

@@ -12,7 +12,7 @@
 <PageTitle>로그인</PageTitle>
 
 <div class="admin-login-page">
-    <div class="admin-login-card">
+    <div class="admin-login-card admin-surface">
         <div class="admin-login-brand">
             <span class="admin-brand-mark">T</span>
             <div>
@@ -22,14 +22,15 @@
         </div>
 
         <form class="admin-login-form" @onsubmit="HandleLogin" @onsubmit:preventDefault>
-            <FluentTextInput Label="사용자명"
-                             Placeholder="사용자명"
-                             @bind-CurrentValue="model.Username" />
+            <label class="admin-field">
+                <span class="admin-field-label">사용자명</span>
+                <input class="admin-input" type="text" placeholder="사용자명" @bind="model.Username" autocomplete="username" />
+            </label>
 
-            <FluentTextInput Label="비밀번호"
-                             Placeholder="비밀번호"
-                             Type="InputType.Password"
-                             @bind-CurrentValue="model.Password" />
+            <label class="admin-field">
+                <span class="admin-field-label">비밀번호</span>
+                <input class="admin-input" type="password" placeholder="비밀번호" @bind="model.Password" autocomplete="current-password" />
+            </label>
 
             <label class="admin-login-remember">
                 <input type="checkbox" @bind="model.RememberMe" />
@@ -38,10 +39,10 @@
 
             @if (!string.IsNullOrEmpty(errorMessage))
             {
-                <div class="admin-inline-alert error">@errorMessage</div>
+                <div class="admin-inline-alert error" role="alert">@errorMessage</div>
             }
 
-            <button type="submit" class="admin-login-submit" disabled="@isLoading">
+            <button type="submit" class="site-button primary admin-login-submit" disabled="@isLoading">
                 @if (isLoading)
                 {
                     <span>로그인 중...</span>

TaxBaik.Web/Components/Site/App.razor

@@ -8,13 +8,17 @@
     <base href="/taxbaik/" />
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link rel="stylesheet" href="css/design-tokens.css" />
+    <link rel="stylesheet" href="css/ui-primitives.css" />
     <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
     <link rel="stylesheet" href="css/site.css" />
+    <link rel="stylesheet" href="css/admin.css" />
     <component type="typeof(HeadOutlet)" render-mode="InteractiveServer" />
 </head>
 <body class="site-blazor">
     <Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
     <script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/lib.module.js" type="module" async></script>
+    <script src="js/admin-session.js"></script>
     <script src="_framework/blazor.web.js"></script>
 </body>
 </html>

TaxBaik.Web/Components/Site/Home.razor

@@ -1,3 +1,4 @@
+@page "/"
 @using TaxBaik.Application.Seasonal
 @using TaxBaik.Application.Services
 @inject SeasonalMarketingService SeasonalMarketingService

TaxBaik.Web/Controllers/RevenueTrackingController.cs

@@ -41,11 +41,15 @@ public class RevenueTrackingController(RevenueTrackingService service) : Control
     [HttpGet("{id:int}")]
     public async Task<IActionResult> GetById(int id)
     {
-        return StatusCode(StatusCodes.Status501NotImplemented, new
+        try
         {
-            error = "미구현",
-            message = "RevenueTrackingService.GetByIdAsync 구현이 필요합니다."
-        });
+            var revenue = await service.GetByIdAsync(id);
+            return revenue is null ? NotFound(new { error = "조회 실패", message = "해당 청구를 찾을 수 없습니다." }) : Ok(revenue);
+        }
+        catch (Exception ex)
+        {
+            return StatusCode(500, new { error = "조회 실패", message = ex.Message });
+        }
     }
 
     [HttpGet("client/{clientId:int}")]

TaxBaik.Web/Pages/Index.cshtml

@@ -1,5 +1,5 @@
 @page "/"
 @{
     Layout = null;
+    await Html.RenderComponentAsync<TaxBaik.Web.Components.Site.App>(RenderMode.ServerPrerendered);
 }
-<component type="typeof(TaxBaik.Web.Components.Site.App)" render-mode="InteractiveServer" />

TaxBaik.Web/Pages/_ViewImports.cshtml

@@ -0,0 +1,3 @@
+@using TaxBaik.Web
+@namespace TaxBaik.Web.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

TaxBaik.Web/Program.cs

@@ -342,10 +342,6 @@ app.MapRazorPages();
 
 // AllowAnonymous: JWT 미들웨어가 Blazor 셸 요청을 401로 차단하지 않도록 한다.
 // 인증은 Blazor AuthorizeRouteView → RedirectToLogin 에서 처리한다.
-app.MapRazorComponents<TaxBaik.Web.Components.Admin.App>()
-   .AddInteractiveServerRenderMode()
-   .AllowAnonymous();
-
 app.MapRazorComponents<TaxBaik.Web.Components.Site.App>()
    .AddInteractiveServerRenderMode()
    .AllowAnonymous();

TaxBaik.Web/wwwroot/css/admin.css

@@ -221,126 +221,111 @@ textarea:focus-visible {
    Login Page Styles
    ============================================================================ */
 
-.admin-login-page.mud-container {
+.admin-login-page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background:
+    radial-gradient(circle at top left, rgba(200, 157, 110, 0.18), transparent 36%),
+    radial-gradient(circle at bottom right, rgba(46, 92, 78, 0.12), transparent 32%),
+    linear-gradient(180deg, #f9f7f3 0%, #f3ede2 100%);
+}
+
+html.admin-login-route body {
+  background:
+    radial-gradient(circle at top left, rgba(200, 157, 110, 0.18), transparent 36%),
+    radial-gradient(circle at bottom right, rgba(46, 92, 78, 0.12), transparent 32%),
+    linear-gradient(180deg, #f9f7f3 0%, #f3ede2 100%);
+}
+
+.admin-login-card {
+  width: min(440px, 100%);
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  border-radius: 20px;
+}
+
+.admin-login-brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.admin-brand-mark {
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 800;
+  flex: 0 0 auto;
+}
+
+.admin-brand-title {
+  font-size: 1.15rem;
+  font-weight: 800;
+  color: var(--color-text);
+  line-height: 1.2;
+}
+
+.admin-brand-subtitle {
+  margin-top: 2px;
+  color: var(--color-text-light);
+  font-size: 0.92rem;
+}
+
+.admin-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.admin-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.admin-field-label {
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.admin-login-remember {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.95rem;
+  color: var(--color-text-light);
+}
+
+.admin-inline-alert {
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(198, 40, 40, 0.2);
+  background: rgba(198, 40, 40, 0.08);
+  color: var(--color-danger);
+  font-size: 0.95rem;
+}
+
+.admin-login-submit {
   width: 100%;
-  margin: 0 auto;
+  margin-top: 6px;
 }
 
-.admin-login-page.mud-container-maxwidth-small {
-  max-width: 480px !important;
-}
-
-.admin-login-page .mud-paper {
-  background-color: var(--bg-primary);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  padding: var(--space-8);
-}
-
-.admin-login-page .mud-paper.elevation-3 {
-  box-shadow: var(--shadow-lg);
-}
-
-.admin-login-page .mud-typography {
-  color: var(--text-primary);
-  line-height: var(--line-height-normal);
-}
-
-.admin-login-page .mud-typography--h4 {
-  font-size: var(--font-size-3xl);
-  font-weight: var(--font-weight-semibold);
-  color: var(--primary-color);
-  margin-bottom: var(--space-4);
-}
-
-.admin-login-page .mud-typography--body1 {
-  font-size: var(--font-size-base);
-}
-
-.admin-login-page input[type="text"],
-.admin-login-page input[type="password"] {
-  width: 100%;
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-4);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  font-family: inherit;
-  font-size: var(--font-size-base);
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  min-height: 44px;
-}
-
-.admin-login-page input[type="text"]:focus,
-.admin-login-page input[type="password"]:focus {
-  outline: none;
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px var(--primary-light);
-}
-
-.admin-login-page label {
-  display: block;
-  margin-bottom: var(--space-2);
-  font-weight: var(--font-weight-medium);
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-}
-
-.admin-login-page button {
-  width: 100%;
-  padding: var(--space-3) var(--space-6);
-  margin-top: var(--space-4);
-  background-color: var(--primary-color);
-  color: var(--primary-contrast);
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  cursor: pointer;
-  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
-  min-height: 44px;
-}
-
-.admin-login-page button:hover {
-  background-color: var(--primary-dark);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-1px);
-}
-
-.admin-login-page button:active {
-  transform: translateY(0);
-}
-
-.admin-login-page button:disabled {
-  background-color: var(--text-disabled);
+.admin-login-submit:disabled {
+  opacity: 0.7;
   cursor: not-allowed;
   transform: none;
-}
-
-.admin-login-page .mud-alert {
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-4);
-  border-radius: var(--radius-md);
-  border-left: 4px solid transparent;
-}
-
-.admin-login-page .mud-alert--error {
-  background-color: var(--error-light);
-  color: var(--error-dark);
-  border-left-color: var(--error-color);
-}
-
-.admin-login-page .mud-alert--success {
-  background-color: var(--success-light);
-  color: var(--success-dark);
-  border-left-color: var(--success-color);
-}
-
-.admin-login-page .mud-alert--info {
-  background-color: var(--info-light);
-  color: var(--info-dark);
-  border-left-color: var(--info-color);
+  box-shadow: none;
 }
 
 /* Reconnect Modal */
@@ -578,7 +563,7 @@ textarea:focus-visible {
 }
 
 .admin-content {
-  padding: 16px;
+  padding: 12px;
   max-width: 1400px;
   margin: 0 auto;
   width: 100%;
@@ -843,11 +828,6 @@ textarea:focus-visible {
   vertical-align: middle;
 }
 
-.admin-table .mud-chip {
-  font-size: 0.68rem;
-  height: 22px;
-}
-
 .admin-table tbody a {
   color: var(--primary-color);
   text-decoration: none;
@@ -865,16 +845,6 @@ textarea:focus-visible {
   outline-offset: 2px;
 }
 
-.admin-table .mud-chip-small {
-  height: 24px !important;
-  font-size: var(--font-size-xs) !important;
-  font-weight: var(--font-weight-medium);
-  min-width: 60px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
 /* Loading States */
 .admin-skeleton {
   background: linear-gradient(90deg, var(--bg-overlay) 0%, var(--bg-overlay-strong) 50%, var(--bg-overlay) 100%);
@@ -1270,15 +1240,6 @@ textarea:focus-visible {
 
 /* Mobile S: <480px */
 @media (max-width: 479px) {
-  .admin-login-page.mud-container-maxwidth-small {
-    max-width: 100% !important;
-    padding: var(--space-3);
-  }
-
-  .admin-login-page .mud-typography--h4 {
-    font-size: var(--font-size-2xl);
-  }
-
   .admin-shell {
     flex-direction: column;
     height: auto;
@@ -1327,11 +1288,6 @@ textarea:focus-visible {
     overflow-x: auto;
   }
 
-  .admin-nav .mud-nav-link {
-    min-width: 100px;
-    font-size: var(--font-size-xs);
-  }
-
   .admin-drawer-footer {
     display: none;
   }
@@ -1393,10 +1349,6 @@ textarea:focus-visible {
     font-size: var(--font-size-base) !important;
   }
 
-  .admin-section-header .mud-button {
-    width: 100%;
-  }
-
   .admin-table {
     font-size: var(--font-size-xs);
   }
@@ -1416,8 +1368,6 @@ textarea:focus-visible {
   }
 
   /* Touch Target Sizing (WCAG 2.5.5) */
-  .mud-button,
-  .mud-icon-button,
   a,
   input,
   select,
@@ -1622,10 +1572,6 @@ textarea:focus-visible {
   color: var(--text-secondary);
 }
 
-.admin-footer-item .mud-icon {
-  color: var(--primary-color);
-}
-
 /* Responsive Topbar */
 @media (max-width: 600px) {
   .admin-topbar-action {
@@ -1636,8 +1582,4 @@ textarea:focus-visible {
   .admin-topbar-title {
     min-width: 120px;
   }
-
-  .mud-toolbar > :last-child {
-    margin-right: -8px;
-  }
 }

TaxBaik.Web/wwwroot/css/design-tokens.css

@@ -0,0 +1,26 @@
+:root {
+    --color-primary: #C89D6E;
+    --color-primary-dark: #A67C52;
+    --color-secondary: #2E5C4E;
+    --color-secondary-dark: #1F3A30;
+    --color-accent: #E8E4D8;
+    --color-accent-dark: #D9D3C4;
+    --color-bg: #F9F7F3;
+    --color-bg-alt: #EFE9DD;
+    --color-text: #3D2817;
+    --color-text-light: #6B5D4F;
+    --color-border: #D9D3C4;
+    --color-success: #2E7D32;
+    --color-warning: #F57C00;
+    --color-danger: #C62828;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --shadow-sm: 0 1px 3px rgba(61, 40, 23, 0.08);
+    --shadow-md: 0 4px 12px rgba(61, 40, 23, 0.12);
+    --shadow-lg: 0 8px 24px rgba(61, 40, 23, 0.15);
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    --site-font-base: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
+}

TaxBaik.Web/wwwroot/css/site.css

@@ -91,184 +91,6 @@ a:hover {
     text-decoration: none;
 }
 
-/* ===== 버튼 ===== */
-.btn {
-    border-radius: var(--radius-md);
-    font-weight: 600;
-    transition: all var(--transition-normal);
-    cursor: pointer;
-    border: none;
-    padding: 0.75rem 2rem;
-    font-size: 1rem;
-    letter-spacing: 0.3px;
-    display: inline-block;
-    text-align: center;
-    text-decoration: none;
-}
-
-.btn:active {
-    transform: scale(0.98);
-}
-
-.btn-primary {
-    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
-    color: white;
-    box-shadow: var(--shadow-md);
-}
-
-.btn-primary:hover {
-    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #8B5E3C 100%);
-    box-shadow: var(--shadow-lg);
-    transform: translateY(-2px);
-}
-
-.btn-warning {
-    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
-    color: white;
-    box-shadow: var(--shadow-md);
-}
-
-.btn-warning:hover {
-    background: linear-gradient(135deg, var(--color-secondary-dark) 0%, #0D1E1A 100%);
-    box-shadow: var(--shadow-lg);
-    transform: translateY(-2px);
-}
-
-.btn-outline-primary {
-    color: var(--color-primary);
-    border: 2px solid var(--color-primary);
-    background: transparent;
-}
-
-.btn-outline-primary:hover {
-    background-color: var(--color-primary);
-    color: white;
-}
-
-.btn-lg {
-    padding: 1rem 2.5rem;
-    font-size: 1.1rem;
-}
-
-.btn-sm {
-    padding: 0.5rem 1.25rem;
-    font-size: 0.95rem;
-}
-
-/* ===== 카드 ===== */
-.card {
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-xl);
-    transition: all var(--transition-normal);
-    box-shadow: var(--shadow-sm);
-    background: white;
-    overflow: hidden;
-}
-
-.card:hover {
-    transform: translateY(-6px);
-    box-shadow: var(--shadow-lg);
-    border-color: var(--color-primary);
-}
-
-.card-body {
-    padding: var(--spacing-xl);
-}
-
-.card-title {
-    font-weight: 700;
-    color: var(--color-text);
-    margin-bottom: var(--spacing-md);
-    font-size: 1.25rem;
-}
-
-.card-text {
-    color: var(--color-text-light);
-    line-height: 1.8;
-}
-
-/* ===== 히어로 섹션 ===== */
-.hero-section {
-    padding: clamp(3rem, 20vh, 6rem) 0;
-    background: linear-gradient(135deg, var(--color-secondary) 0%, #1F3A30 100%);
-    color: white;
-    position: relative;
-    overflow: hidden;
-    border-bottom: 4px solid var(--color-primary);
-}
-
-.hero-section::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    right: -10%;
-    width: 600px;
-    height: 600px;
-    background: rgba(200, 157, 110, 0.1);
-    border-radius: 50%;
-}
-
-.hero-section::after {
-    content: '';
-    position: absolute;
-    bottom: -30%;
-    left: -10%;
-    width: 500px;
-    height: 500px;
-    background: rgba(232, 228, 216, 0.05);
-    border-radius: 50%;
-}
-
-.hero-section h1 {
-    font-size: clamp(2rem, 8vw, 3.5rem);
-    font-weight: 800;
-    margin-bottom: var(--spacing-lg);
-    position: relative;
-    z-index: 1;
-    color: white;
-}
-
-.hero-section p {
-    font-size: 1.2rem;
-    margin-bottom: var(--spacing-xl);
-    position: relative;
-    z-index: 1;
-    color: rgba(255, 255, 255, 0.95);
-    line-height: 1.8;
-}
-
-/* ===== 섹션 ===== */
-.bg-light {
-    background-color: var(--color-accent) !important;
-}
-
-.bg-primary {
-    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
-}
-
-.section-title {
-    font-size: clamp(1.75rem, 5vw, 2.75rem);
-    font-weight: 800;
-    color: var(--color-text);
-    margin-bottom: var(--spacing-xl);
-    text-align: center;
-    position: relative;
-    display: inline-block;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100%;
-}
-
-.section-title::after {
-    content: '';
-    display: block;
-    width: 60px;
-    height: 4px;
-    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
-    margin: var(--spacing-md) auto 0;
-    border-radius: 2px;
-}
-
 /* ===== 휴스 스트립 (신뢰도) ===== */
 .trust-strip {
     background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-accent) 100%);

TaxBaik.Web/wwwroot/css/ui-primitives.css

@@ -0,0 +1,111 @@
+/* Shared UI primitives for site and admin */
+
+.site-button,
+.admin-icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+    text-decoration: none;
+    font-weight: 700;
+    border-radius: 12px;
+    transition: all var(--transition-normal);
+}
+
+.site-button {
+    padding: 0.9rem 1.4rem;
+}
+
+.site-button.primary {
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+    color: white;
+}
+
+.site-button.secondary {
+    border: 1px solid var(--color-primary);
+    color: var(--color-primary-dark);
+    background: rgba(255,255,255,0.7);
+}
+
+.admin-surface,
+.site-post-card,
+.taxbaik-skeleton-item {
+    background: rgba(255,255,255,0.82);
+    border: 1px solid rgba(0,0,0,0.08);
+    border-radius: 16px;
+    box-shadow: 0 12px 30px rgba(61,40,23,0.08);
+}
+
+.admin-page-hero,
+.site-hero {
+    border-bottom: 1px solid rgba(61, 40, 23, 0.08);
+}
+
+.admin-table,
+.admin-kv-grid,
+.admin-dialog-card,
+.admin-pagination,
+.admin-tabbar {
+    width: 100%;
+}
+
+.admin-table {
+    border-collapse: collapse;
+}
+
+.admin-table th,
+.admin-table td {
+    padding: 0.85rem 0.75rem;
+    border-bottom: 1px solid rgba(61, 40, 23, 0.08);
+}
+
+.status-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.3rem 0.65rem;
+    border-radius: 999px;
+    font-size: 0.82rem;
+    font-weight: 700;
+    background: rgba(61, 40, 23, 0.08);
+}
+
+.admin-input {
+    width: 100%;
+    min-height: 44px;
+    padding: 0.75rem 0.9rem;
+    border-radius: 12px;
+    border: 1px solid rgba(61, 40, 23, 0.16);
+    background: #fff;
+    color: var(--color-text);
+}
+
+.admin-icon-button {
+    min-width: 40px;
+    min-height: 40px;
+    border: 1px solid rgba(61, 40, 23, 0.14);
+    background: rgba(255,255,255,0.8);
+    color: var(--color-text);
+}
+
+.admin-icon-button.danger {
+    color: var(--color-danger);
+}
+
+.admin-page-hero {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+}
+
+.admin-page-title {
+    margin: 0;
+    font-size: 1.45rem;
+}
+
+.admin-page-subtitle,
+.muted {
+    color: var(--color-text-light);
+}

TaxBaik.Web/wwwroot/js/admin-session.js

@@ -1,8 +1,13 @@
 window.taxbaikAdminSession = {
     syncRouteClass: function () {
+        const isLogin = window.location.pathname.toLowerCase().endsWith('/admin/login');
         document.documentElement.classList.toggle(
             'admin-login-route',
-            window.location.pathname.toLowerCase().endsWith('/admin/login'));
+            isLogin);
+
+        if (isLogin) {
+            document.title = '백원숙 세무회계 - 관리자 로그인';
+        }
     },
 
     getViewportWidth: function () {

tests/e2e/admin-crm-pages.spec.ts

@@ -133,7 +133,7 @@ test.describe('admin CRM pages', () => {
     // JS 네이티브 클릭으로 강제 격발하여 오프셋 씹힘 소멸
     await addButton.evaluate(el => (el as HTMLButtonElement).click());
     
-    // 대화상자(MudDialog) 자체의 노출 대기
+    // 편집 모달이 화면에 안정적으로 표시될 때까지 대기
     await expect(page.locator('.mud-dialog')).toBeVisible({ timeout: 5000 });
     
     // mud-select 컨테이너 자체 클릭 (이벤트 핸들러 직접 격발)