지침의 MudDataGrid와 MudDialog 예시 정리

CLAUDE.md

@@ -90,8 +90,8 @@ _refreshTokenExpirationMinutes = 10080;
 - 모든 API 엔드포인트 구현됨
 - 모든 Browser Client 구현됨
 - 16개 Blazor 페이지 API-First 마이그레이션 완료
-- MudDataGrid Douzone ERP 수준 UX 적용
+- 과거 기록: 관리 화면에서 그리드/모달 UX를 빠르게 안정화한 단계
-- MudDialog 모달 패턴 (흰 화면 플래시 제거)
+- 모달 패턴 (흰 화면 플래시 제거)
 - ConfirmDialog 삭제 확인 컴포넌트
 
 ### 2026-06-29 운영 기준 업데이트
@@ -141,7 +141,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 | 핵심 기능 |
@@ -153,8 +153,8 @@ _refreshTokenExpirationMinutes = 10080;
 | RevenueTrackings | ✅ RevenueTrackingController | ✅ IRevenueTrackingBrowserClient | ✅ List + Modal | 청구/납부 추적, 상태 관리 |
 
 **UI 특성**:
-- MudDataGrid Dense (행높이 32px) + Virtualize (1000+ 행 성능)
+- Dense 그리드 + Virtualize (1000+ 행 성능)
-- MudDialog Create/Edit (흰 화면 플래시 방지)
+- Create/Edit 모달 (흰 화면 플래시 방지)
 - ConfirmDialog Delete (사용자 확인)
 - Status Color Chips (Error/Warning/Success)
 - Client 링크 (상세 페이지 연동)
@@ -212,8 +212,8 @@ PostgreSQL Database
 
 **Blazor 페이지 & UI 고도화 (Phase 7-4)**:
 - [x] 5개 CRM/세무관리 Blazor 페이지
-- [x] MudDataGrid Dense + Virtualize (32px 행 높이)
+- [x] Dense 그리드 + Virtualize (32px 행 높이)
-- [x] MudDialog 모달 Create/Edit (흰 화면 플래시 제거)
+- [x] 모달 Create/Edit (흰 화면 플래시 제거)
 - [x] ConfirmDialog 삭제 확인
 - [x] 상태별 컬러 칩 (Status/Risk Level)
 - [x] 클라이언트 링크 (상세 페이지 연동)
@@ -1010,7 +1010,9 @@ Admin 로그인 페이지만 [AllowAnonymous]:
 
 #### UI 적용 패턴
 ```razor
-<MudDataGrid T="YourItem" 
+```razor
+<!-- 과거 예시: 현재는 Fluent v5 표나 HTML table로 대체 -->
+<YourGridComponent T="YourItem"
     Dense="true"
     Hover="true"
     Striped="true"
@@ -1036,7 +1038,8 @@ Admin 로그인 페이지만 [AllowAnonymous]:
             </CellTemplate>
         </TemplateColumn>
     </Columns>
-</MudDataGrid>
+</YourGridComponent>
+```
 ```
 
 #### 색상 & 상태 표시
@@ -1161,7 +1164,9 @@ else if (items.Count == 0)
 <!-- 데이터 그리드 -->
 else
 {
-    <MudDataGrid T="YourEntity"
+```razor
+<!-- 과거 예시: 현재는 Fluent v5 표나 HTML table로 대체 -->
+    <YourGridComponent T="YourEntity"
         Items="@items"
         Dense="true"
         Hover="true"
@@ -1172,13 +1177,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>
@@ -1191,7 +1199,8 @@ else
         <MudButton OnClick="CloseDialog">취소</MudButton>
         <MudButton Color="Color.Primary" OnClick="SaveItem">저장</MudButton>
     </DialogActions>
-</MudDialog>
+</YourDialogComponent>
+```
 ```
 
 **Step 4: @code 섹션 구조**
@@ -1315,8 +1324,8 @@ else
 - [ ] <section class="admin-page-hero"> (캡션, 제목, 부제, 추가 버튼)
 - [ ] 로딩 상태 기본값은 `Skeleton`
 - [ ] 빈 상태 (MudAlert)
-- [ ] MudDataGrid (Dense=true, Virtualize=true, RowsPerPage=30, admin-grid 클래스)
+- [ ] Dense 그리드 (Virtualize=true, RowsPerPage=30, admin-grid 클래스)
-- [ ] MudDialog (Create/Edit 모달)
+- [ ] 모달 (Create/Edit)
 - [ ] ConfirmDialog (Delete 확인)
 - [ ] @code 섹션: OnInitializedAsync → LoadData() 패턴
 - [ ] 모든 에러 처리 (try-catch, Snackbar 메시지)
@@ -1327,7 +1336,7 @@ else
 ❌ **이 패턴을 따르지 않는 페이지는 실시간 코드 리뷰 대상:**
 - 페이지 헤더 (admin-page-hero) 누락
 - 인라인 스타일로 레이아웃 구성
-- MudDialog 없이 별도 라우트로 Create/Edit 처리 (흰 화면 플래시)
+- 별도 라우트로 Create/Edit 처리 (흰 화면 플래시)
 - @code 섹션 구조 다름
 - 모달에서 직접 onSubmit 대신 Snackbar 피드백 미제공
 
@@ -1748,7 +1757,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>
@@ -1763,7 +1774,8 @@ public async Task NotifyDeploymentStart()
             <MudButton Color="Color.Primary" OnClick="RefreshNow">지금 새로고침</MudButton>
             <MudButton Color="Color.Default" OnClick="DismissNotification">나중에</MudButton>
         </DialogActions>
-    </MudDialog>
+    </YourDialogComponent>
+```
 }
 
 @code {