docs(ui): UI 표준을 MudBlazor + Interactive WebAssembly + API-First 로 전환
Fluent UI Blazor v5 / InteractiveServer 방침을 폐기하고 MudBlazor 컴포넌트 + Interactive WebAssembly 렌더 모드 + API-First 를 신규 표준으로 확정한다. 기존 CLAUDE.md(Fluent UI)와 AGENTS.md §5b(MudBlazor)의 상충을 해소한다. - CLAUDE.md: Framework & Design System, Component Rules, 매핑표를 MudBlazor 로 갱신 - AGENTS.md §5b: 렌더 모드 표준(Interactive WebAssembly) 신설, Server 표기 정렬 - ROADMAP_WBS.md: WBS-10 보강 문서 상호 참조 링크 추가 - WBS_10_DOTNET_MIGRATION_HARDENING: 마이그레이션 완성/상용화 로드맵 신규, UI 코드 전환을 WBS-A7 로 등록 코드 전환(csproj/Program.cs/.razor)은 미수행, 본 커밋은 방침 문서만 수정. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -7,18 +7,18 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
|
||||
**QuantEngine v0.1** — A comprehensive quantitative analysis and data collection system for retirement asset portfolio management.
|
||||
|
||||
- **Architecture**: .NET 9 + C# (web UI + APIs), Python (legacy data collection/analysis)
|
||||
- **Web UI**: Blazor WebAssembly (Fluent UI Blazor v5) + ASP.NET Core Web API
|
||||
- **Web UI**: Blazor Interactive WebAssembly (MudBlazor) + ASP.NET Core Web API (API-First)
|
||||
- **Database**: PostgreSQL (Npgsql 8.0), single unified database
|
||||
- **Data Source**: KIS Open API (quotations/ranking read-only), with fallbacks
|
||||
- **Key Runtimes**: .NET 9, Python 3.9+, Node.js 16+
|
||||
|
||||
### Migration Phases Status (2026-06-29)
|
||||
|
||||
**Phase 1: Web UI Migration** ✅ COMPLETE
|
||||
- Blazor WebAssembly with Fluent UI v5 (RC: 5.0.0-rc.4-26177.1)
|
||||
- MudBlazor completely deprecated (0% remaining)
|
||||
**Phase 1: Web UI Migration** 🔄 정책 전환 (2026-06-30)
|
||||
- **신규 표준**: Blazor **Interactive WebAssembly** 렌더 모드 + **MudBlazor** 컴포넌트 + API-First
|
||||
- **이전 표준(폐기)**: Fluent UI Blazor v5 / InteractiveServer 렌더 모드는 더 이상 사용하지 않음
|
||||
- Pages: Home, Workspace, Collection, Tables, MainLayout
|
||||
- Build: 0 errors, 6 Razor RC warnings (acceptable)
|
||||
- 코드 전환 작업은 `docs/WBS_10_DOTNET_MIGRATION_HARDENING_2026_06_30.md` 의 **WBS-A7** 로 추적
|
||||
|
||||
**Phase 2: KIS Data Collection Pipeline** ✅ 95% COMPLETE
|
||||
- ✅ KIS API Client: Full implementation complete
|
||||
@@ -84,22 +84,24 @@ sudo systemctl restart quantengine-api
|
||||
|
||||
### Framework & Design System
|
||||
|
||||
- **Primary Framework**: [Fluent UI Blazor v5](https://v5.fluentui-blazor.net/)
|
||||
- **Design System**: Microsoft Fluent Design System (WCAG 2.1 AA)
|
||||
- **Deprecation**: MudBlazor is deprecated. Migrate all existing pages to Fluent UI v5 progressively.
|
||||
- **Primary Framework**: [MudBlazor](https://mudblazor.com/)
|
||||
- **Design System**: Material Design (MudBlazor), 고밀도/대량 데이터 성능 우선
|
||||
- **Render Mode**: **Interactive WebAssembly** 를 기본 렌더 모드로 한다 (API-First). InteractiveServer 는 사용하지 않는다.
|
||||
- **Deprecation**: **Fluent UI Blazor v5 는 폐기**한다. 기존 Fluent UI 페이지는 MudBlazor 로 점진 이전한다.
|
||||
|
||||
### Component Development Rules
|
||||
|
||||
1. **All UI Development** (New + Refactored):
|
||||
- Use Fluent UI Blazor v5 components exclusively
|
||||
- Fall back to pure HTML/CSS if Fluent v5 doesn't provide
|
||||
- **Never introduce MudBlazor components** (deprecated)
|
||||
- Progressively migrate existing MudBlazor to Fluent v5
|
||||
- Use **MudBlazor** components exclusively
|
||||
- Fall back to pure HTML/CSS if MudBlazor doesn't provide
|
||||
- **Never introduce Fluent UI components** (deprecated)
|
||||
- Progressively migrate existing Fluent UI to MudBlazor
|
||||
- **API-First**: UI 는 DB/비즈니스 로직에 직접 결합하지 않고 추상화된 API 클라이언트(HTTP)로만 통신 (AGENTS.md §5b 준수)
|
||||
|
||||
2. **Loading States** (Priority order):
|
||||
- `<FluentSkeleton>` — **Default** for lists, cards, dashboards, detail pages
|
||||
- `<MudSkeleton>` — **Default** for lists, cards, dashboards, detail pages
|
||||
- Pure HTML `<div class="skeleton">` — For custom layouts
|
||||
- `MudProgressCircular` / `MudProgressLinear` — Exception only (existing legacy)
|
||||
- `<MudProgressCircular>` / `<MudProgressLinear>` — 명시적 진행 표시가 필요한 경우
|
||||
- Blocking spinners — **Avoid**
|
||||
|
||||
3. **Data Rendering Pattern**:
|
||||
@@ -107,21 +109,22 @@ sudo systemctl restart quantengine-api
|
||||
- On data arrival: Replace skeleton with actual UI
|
||||
- Never show blank states while loading
|
||||
|
||||
4. **Component Mapping** (Fluent UI v5):
|
||||
4. **Component Mapping** (MudBlazor):
|
||||
|
||||
| UI Element | Fluent UI Component | Alternative |
|
||||
| UI Element | MudBlazor Component | Alternative |
|
||||
|-----------|-------------------|-------------|
|
||||
| Button | `<FluentButton>` | - |
|
||||
| Input field | `<FluentTextField>` | HTML `<input>` |
|
||||
| Dropdown | `<FluentSelect>` | HTML `<select>` |
|
||||
| Data grid | `<FluentDataGrid>` | HTML `<table>` |
|
||||
| Card | `<FluentCard>` | HTML `<div class="card">` |
|
||||
| Badge/Status | `<FluentBadge>` | HTML `<span>` |
|
||||
| Layout container | `<FluentStack>` | HTML `<div>` |
|
||||
| Accordion | `<FluentAccordion>` | HTML `<details>` |
|
||||
| Navigation | `<FluentNavMenu>` | HTML `<nav>` |
|
||||
| Loading | `<FluentSkeleton>` | CSS skeleton animation |
|
||||
| Icons | `<FluentIcon>` | SVG inline |
|
||||
| Button | `<MudButton>` | - |
|
||||
| Input field | `<MudTextField>` | HTML `<input>` |
|
||||
| Dropdown | `<MudSelect>` | HTML `<select>` |
|
||||
| Data grid | `<MudDataGrid Dense Virtualize>` | HTML `<table>` |
|
||||
| Card | `<MudCard>` | HTML `<div class="card">` |
|
||||
| Badge/Status | `<MudBadge>` / `<MudChip>` | HTML `<span>` |
|
||||
| Layout container | `<MudStack>` / `<MudGrid>` | HTML `<div>` |
|
||||
| Accordion | `<MudExpansionPanels>` | HTML `<details>` |
|
||||
| Navigation | `<MudNavMenu>` | HTML `<nav>` |
|
||||
| Loading | `<MudSkeleton>` | CSS skeleton animation |
|
||||
| Icons | `<MudIcon>` | SVG inline |
|
||||
| Modal/Dialog | `<MudDialog>` (CRUD: 모달 패턴, 삭제: ConfirmDialog) | - |
|
||||
|
||||
## Development Commands (Phase 1 + 2)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user