From 227b563ba25a7b07b7215dccc001cae469041c0e Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Tue, 30 Jun 2026 18:03:26 +0900 Subject: [PATCH] =?UTF-8?q?docs(ui):=20UI=20=ED=91=9C=EC=A4=80=EC=9D=84=20?= =?UTF-8?q?MudBlazor=20+=20Interactive=20WebAssembly=20+=20API-First=20?= =?UTF-8?q?=EB=A1=9C=20=EC=A0=84=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- AGENTS.md | 3 +- CLAUDE.md | 57 +++--- docs/ROADMAP_WBS.md | 2 + ...0_DOTNET_MIGRATION_HARDENING_2026_06_30.md | 190 ++++++++++++++++++ 4 files changed, 224 insertions(+), 28 deletions(-) create mode 100644 docs/WBS_10_DOTNET_MIGRATION_HARDENING_2026_06_30.md diff --git a/AGENTS.md b/AGENTS.md index 44eee9c..1cecc0f 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -135,7 +135,8 @@ - **임시 파일 관리**: 개발/디버깅 목적의 모든 휘발성 임시 파일 및 로그는 반드시 `Temp/` 디렉토리 하위에서만 생성해야 하며, 루트나 다른 패키지 경로에 임시 파일을 만드는 것은 금지한다. 불가피하게 생성할 경우 반드시 접두사/접미사 규칙(`debug_*`, `tmp_*`, `mock_*`, `*_temp.*`)을 준수하여 `.gitignore`에 필터링되도록 한다. ## 5b. Blazor & API-First 개발 규칙 (TaxBaik 참조 모델 적용) -- **API-First 아키텍처**: Blazor Server UI 계층은 비즈니스 로직이나 DB에 직접 결합되지 않고, `IXxxBrowserClient` 등의 추상화된 API 클라이언트(HTTP/RESTful)를 통해서만 백엔드 API와 통신한다. +- **렌더 모드 표준**: Blazor **Interactive WebAssembly** 를 기본 렌더 모드로 한다. InteractiveServer 는 사용하지 않으며, UI 컴포넌트는 **MudBlazor** 로 통일한다 (Fluent UI 는 폐기). +- **API-First 아키텍처**: Blazor Interactive WebAssembly UI 계층은 비즈니스 로직이나 DB에 직접 결합되지 않고, `IXxxBrowserClient` 등의 추상화된 API 클라이언트(HTTP/RESTful)를 통해서만 백엔드 API와 통신한다. - **이중 토큰 인증 패턴**: Access Token(15분) 및 Refresh Token(7일) 이중 토큰 패턴을 적용하며, HttpClient 요청 시 401 Unauthorized를 가로채어 자동으로 localStorage의 Refresh Token으로 토큰을 자동 갱신 및 재시도하는 `TokenRefreshHandler` (DelegatingHandler) 구조를 준수한다. - **실시간 알림 (SignalR)**: 실시간 알림 기능은 상태를 직접 동기화하는 용도가 아닌 단순 Event-driven 브로드캐스트 알림으로 설계하며, 클라이언트는 알림 수신 후 API 호출을 통해 최종 데이터를 검증 및 동기화한다. - **UI/UX 구현**: diff --git a/CLAUDE.md b/CLAUDE.md index f138850..f9b8581 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -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): - - `` — **Default** for lists, cards, dashboards, detail pages + - `` — **Default** for lists, cards, dashboards, detail pages - Pure HTML `
` — For custom layouts - - `MudProgressCircular` / `MudProgressLinear` — Exception only (existing legacy) + - `` / `` — 명시적 진행 표시가 필요한 경우 - 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 | `` | - | -| Input field | `` | HTML `` | -| Dropdown | `` | HTML `` | +| Dropdown | `` | HTML `