스크롤 흐름 복원

Reviewed-on: http://178.104.200.7/kjh2064/taxbaik/pulls/8

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.Web/Components/Admin/App.razor

@@ -39,7 +39,7 @@
     <FluentDialogProvider />
     <FluentTooltipProvider />
 
-    <Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
+    <Routes @rendermode="new InteractiveServerRenderMode(prerender: true)" />
 
     <script src="js/admin-session.js"></script>
     <script src="_framework/blazor.web.js"></script>

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

@@ -16,7 +16,7 @@
     <component type="typeof(HeadOutlet)" render-mode="InteractiveServer" />
 </head>
 <body class="site-blazor">
-    <Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
+    <Routes @rendermode="new InteractiveServerRenderMode(prerender: true)" />
     <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>

TaxBaik.Web/Components/Site/Home.razor

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

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/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 */
@@ -407,7 +392,8 @@ textarea:focus-visible {
 .admin-shell {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  min-height: 100vh;
+  height: auto;
   background-color: var(--bg-secondary);
 }
 
@@ -584,6 +570,11 @@ textarea:focus-visible {
   width: 100%;
 }
 
+.admin-main {
+  min-height: 0;
+  overflow-y: auto;
+}
+
 /* ============================================================================
    Dashboard Page Styles
    ============================================================================ */

TaxBaik.Web/wwwroot/css/site.css

@@ -48,6 +48,7 @@
 html {
     font-size: 16px;
     scroll-behavior: smooth;
+    min-height: 100%;
 }
 
 body {
@@ -56,6 +57,8 @@ body {
     line-height: 1.8;
     font-size: clamp(0.9rem, 2.5vw, 1rem);
     letter-spacing: 0.3px;
+    min-height: 100%;
+    overflow-y: auto;
 }
 
 /* ===== 타이포그래피 ===== */
@@ -577,6 +580,13 @@ body.site-blazor {
 
 .site-shell {
     min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.site-main {
+    display: block;
+    overflow: visible;
 }
 
 .site-topbar {

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 컨테이너 자체 클릭 (이벤트 핸들러 직접 격발)