diff --git a/CLAUDE.md b/CLAUDE.md index 2ca21ae..e010530 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -12,6 +12,14 @@ Blazor (UI만, 사용자 액션 후 API 재조회) ← API (모든 로직) ← D Blazor 데이터 변경 자동 push/broadcast 금지 ``` +### UI 기준 원칙 (2026-06-29 추가) +- 기본 디자인 템플릿은 `https://v5.fluentui-blazor.net/` 기준으로 한다. +- 신규 또는 리팩토링 UI는 Fluent UI Blazor v5 패턴을 우선 적용한다. +- MudBlazor는 기존 호환 레거시로만 유지하고, 새 UI는 Fluent v5 또는 순수 HTML/CSS로 작성한다. +- 기본 로딩 상태는 `Skeleton`이다. `MudProgressCircular` / `MudProgressLinear`는 예외적으로만 사용한다. +- 목록, 카드, 대시보드, 상세 페이지의 초기 데이터 상태는 스켈톤으로 먼저 렌더링하고, 데이터 수신 후 실제 UI로 교체한다. +- 로딩 중 블로킹 스피너보다 스켈톤을 우선한다. + ### SOLID 기반 순차 마이그레이션 전략 #### Phase 1-3: API Foundations ✅ @@ -29,6 +37,7 @@ Blazor (UI만, 사용자 액션 후 API 재조회) ← API (모든 로직) ← D - AdminDashboardClient 구현 - 서비스 inject → API 호출로 변경 - 에러 처리 & 로딩 상태 + - 기본 로딩은 Skeleton 적용 - [x] 구조: IAdminDashboardClient → HttpClient 추상화 **완료**: 2026-06-28 / Blazor 컴포넌트가 API 클라이언트를 통해 RESTful 엔드포인트 호출 @@ -964,6 +973,8 @@ Admin 로그인 페이지만 [AllowAnonymous]: - 전역 상태 불필요 (세션 → DB에서 읽음) - 페이지 로드 시 `OnInitializedAsync`에서 데이터 가져오기 - 업데이트는 `StateHasChanged()` 호출 +- 초기 렌더는 Skeleton 우선 +- 로딩이 필요한 목록/카드/대시보드는 `items == null` 또는 `summary == null` 패턴으로 스켈톤 렌더링 ### 8.6 어드민 그리드 UX (Dorsum ERP 수준) @@ -983,7 +994,7 @@ Admin 로그인 페이지만 [AllowAnonymous]: - **페이징**: 하단 "1/10" 표시 + 이전/다음 버튼 (기본 20행/페이지) - **검색**: 우상단 검색 박스 (실시간 필터링, 하이라이트 처리) -#### MudBlazor 적용 패턴 +#### UI 적용 패턴 ```razor @if (items == null) { - + } else if (items.Count == 0) @@ -1288,7 +1299,7 @@ else - [ ] @inject로 필요한 Client 주입 - [ ] 추가 - [ ]
(캡션, 제목, 부제, 추가 버튼) -- [ ] 로딩 상태 (MudProgressCircular) +- [ ] 로딩 상태 기본값은 `Skeleton` - [ ] 빈 상태 (MudAlert) - [ ] MudDataGrid (Dense=true, Virtualize=true, RowsPerPage=30, admin-grid 클래스) - [ ] MudDialog (Create/Edit 모달) diff --git a/README.md b/README.md index 4e99196..961b8fe 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ TaxBaik는 세무사 백원숙의 전문성을 온라인으로 표현하기 위 |-----|------| | **백엔드** | ASP.NET Core 10, C# | | **공개 사이트** | Razor Pages (SSR) | -| **관리자** | Blazor Server + MudBlazor | +| **관리자** | Blazor Server + Fluent UI Blazor v5 | | **데이터베이스** | PostgreSQL 18.4 | | **ORM** | Dapper | | **리버스 프록시** | Nginx | @@ -98,6 +98,11 @@ TaxBaik/ - 연락처 정보 - 소셜 미디어 링크 +- **UI 기준** + - 기본 디자인 템플릿은 `https://v5.fluentui-blazor.net/` + - 기본 로딩 상태는 `Skeleton` + - 기존 MudBlazor 패턴은 레거시 호환용으로만 유지 + --- ## 빠른 시작