📋 Create QuantEngine MudBlazor UI Completion Roadmap

Architecture Decision:
✅ QuantEngine UI = MudBlazor + Blazor Interactive WebAssembly
❌ SmartAdmin Bootstrap = NOT USED (archived as reference)

WBS Breakdown (63 hours, 15-21 days):

Phase 1: Basic UI Structure (10h)
- MainLayout improvements (responsive sidebar, top nav, dark mode)
- AuthLayout redesign (login, register, password recovery)
- Theme & styling (MudTheme, global styles)

Phase 2: Admin UI (16h)
- Dashboard enhancements (KPI cards, charts, activity feed)
- User management (list, detail, edit pages)
- Data collection monitoring (Collection dashboard)
- Settings pages (general, security, notifications, data)

Phase 3: User UI (12h)
- Portfolio dashboard (assets, performance, composition)
- Asset detail pages
- Reports (generation, download, archive)
- Profile & settings

Phase 4: Common Components (6h)
- Form components (builder, validation, errors)
- Tables/DataGrid (filters, export, batch ops)
- Modals & dialogs
- Legal pages (privacy, terms, contact)

Phase 5: API Integration (8h)
- Auth & permissions (RBAC)
- API client expansion
- State management
- Notifications & toasts

Phase 6: Testing & Optimization (7h)
- Unit tests (bUnit)
- Integration tests
- Performance tuning
- Accessibility (WCAG AA)

Phase 7: Deployment & Documentation (4h)
- Build optimization
- Documentation & Storybook
- Deployment pipeline

Current Status:
✅ 5 Razor pages (Login, Dashboard, Collection, Operations, NotFound)
✅ 10 Components already
✅ MudBlazor integrated
⏳ Ready for Phase 1 implementation

Technical Stack:
- Framework: Blazor Interactive WebAssembly
- UI: MudBlazor
- Architecture: API-First
- Database: PostgreSQL
- Backend: .NET 9 Web API

Timeline:
- Estimated: 15-21 days
- Daily capacity: 4-6 hours per day
- Next milestone: Phase 1 complete (2-3 days)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

docs/MUDBLAZOR_UI_COMPLETION_WBS.md

@@ -0,0 +1,476 @@
+# QuantEngine MudBlazor UI — 완성 로드맵
+
+**프로젝트**: QuantEngine v0.1  
+**시작일**: 2026-07-05  
+**목표 완료**: 2026-07-20  
+**상태**: 🚀 본격 실행
+
+---
+
+## 📊 현재 상태
+
+| 항목 | 상태 | 진행률 |
+|------|------|--------|
+| **기본 구조** | ✅ 완료 | 100% |
+| **MudBlazor 통합** | ✅ 완료 | 100% |
+| **기본 페이지** | 🔄 진행 중 | 60% |
+| **관리자 UI** | ⬜ 대기 | 0% |
+| **사용자 UI** | ⬜ 대기 | 0% |
+| **기능 통합** | ⬜ 대기 | 0% |
+| **테스트 & 배포** | ⬜ 대기 | 0% |
+
+**현존 페이지 (5개)**:
+- ✅ Login.razor (4.7KB)
+- ✅ Dashboard.razor (4.6KB) 
+- ✅ Collection.razor (5.5KB)
+- ✅ Operations.razor (4.6KB)
+- ✅ NotFound.razor (126B)
+
+---
+
+## 🎯 Phase별 상세 WBS
+
+### **Phase 1: 기본 UI 구조 강화** (2-3일)
+
+#### 1.1: MainLayout 개선 (4시간)
+- 반응형 사이드바 추가 (모바일 햄버거 메뉴)
+- 탑 네비게이션 개선
+- 다크모드 토글 추가
+- 사용자 프로필 메뉴
+
+**파일**:
+- `Layouts/MainLayout.razor`
+- `Components/Navigation/SideNav.razor` (신규)
+- `Components/Navigation/TopNav.razor` (신규)
+- `Components/Navigation/UserMenu.razor` (신규)
+
+**기술**:
+- MudDrawer (반응형 사이드바)
+- MudAppBar + MudNavMenu
+- Dark mode: `@inject MudTheme`
+
+---
+
+#### 1.2: AuthLayout 개선 (3시간)
+- 로그인 페이지 리디자인
+- 회원가입 페이지 추가
+- 비밀번호 복구 페이지
+- 일관된 인증 UI 패턴
+
+**파일**:
+- `Layouts/AuthLayout.razor` (수정)
+- `Pages/Auth/Register.razor` (신규)
+- `Pages/Auth/ForgotPassword.razor` (신규)
+
+**컴포넌트**:
+- `Components/Auth/LoginForm.razor`
+- `Components/Auth/RegisterForm.razor`
+- `Components/Auth/PasswordRecoveryForm.razor`
+
+---
+
+#### 1.3: 테마 & 스타일링 (3시간)
+- MudTheme 색상 정의 (QuantEngine 브랜딩)
+- 글로벌 스타일시트 설정
+- 반응형 그리드 레이아웃
+- 로딩 상태 스타일 (MudSkeleton)
+
+**파일**:
+- `wwwroot/css/quantengine-theme.css`
+- `Components/Common/ThemeProvider.razor`
+
+---
+
+### **Phase 2: 관리자 UI** (3-4일)
+
+#### 2.1: 대시보드 고급화 (4시간)
+- 통계 카드 개선 (KPI 트렌드)
+- 차트 통합 (ApexCharts via MudBlazor)
+- 활동 로그 및 알림
+- 실시간 데이터 업데이트
+
+**파일**:
+- `Pages/Admin/Dashboard.razor` (확장)
+- `Components/Dashboard/StatCard.razor`
+- `Components/Dashboard/ActivityFeed.razor`
+- `Components/Dashboard/AlertsPanel.razor`
+
+**기술**:
+- MudDataGrid (활동 로그)
+- MudChart (차트)
+- SignalR (실시간 업데이트)
+
+---
+
+#### 2.2: 사용자 관리 (5시간)
+- 사용자 목록 페이지 (검색/필터/정렬)
+- 사용자 상세 정보 페이지
+- 사용자 추가/편집 모달
+- 역할 및 권한 관리
+
+**페이지**:
+- `Pages/Admin/Users/List.razor` (신규)
+- `Pages/Admin/Users/Detail.razor` (신규)
+- `Pages/Admin/Users/Edit.razor` (신규)
+
+**컴포넌트**:
+- `Components/User/UserTable.razor`
+- `Components/User/UserForm.razor`
+- `Components/User/RoleSelector.razor`
+
+**기술**:
+- MudDataGrid (고급 테이블)
+- MudDialog (추가/편집)
+- MudChip (태그/역할)
+
+---
+
+#### 2.3: 데이터 수집 모니터링 (4시간)
+- Collection 대시보드 개선
+- 실시간 진행률 표시
+- 오류 로그 및 재시도
+- 내보내기 기능
+
+**파일**:
+- `Pages/Admin/Collection/Dashboard.razor` (확장)
+- `Pages/Admin/Collection/Runs.razor` (신규)
+- `Pages/Admin/Collection/Errors.razor` (신규)
+
+---
+
+#### 2.4: 설정 페이지 (3시간)
+- 일반 설정 (회사명, 로고, 시간대)
+- 보안 설정 (2FA, API 키)
+- 알림 설정
+- 데이터 내보내기/삭제
+
+**페이지**:
+- `Pages/Admin/Settings/General.razor` (신규)
+- `Pages/Admin/Settings/Security.razor` (신규)
+- `Pages/Admin/Settings/Notifications.razor` (신규)
+- `Pages/Admin/Settings/Data.razor` (신규)
+
+---
+
+### **Phase 3: 사용자 UI** (3-4일)
+
+#### 3.1: 포트폴리오 대시보드 (4시간)
+- 자산 현황 (MudCard 그리드)
+- 성과 차트 (수익률, 변동률)
+- 포트폴리오 구성 (파이 차트)
+- 목표 추적
+
+**페이지**:
+- `Pages/User/Portfolio/Dashboard.razor` (신규)
+- `Pages/User/Portfolio/Performance.razor` (신규)
+
+**컴포넌트**:
+- `Components/Portfolio/AssetGrid.razor`
+- `Components/Portfolio/PerformanceChart.razor`
+
+---
+
+#### 3.2: 자산 상세 페이지 (3시간)
+- 종목별 상세 정보
+- 가격 히스토리 (차트)
+- 거래 내역
+- 목표 설정
+
+**페이지**:
+- `Pages/User/Assets/Detail.razor` (신규)
+
+---
+
+#### 3.3: 보고서 페이지 (3시간)
+- 월간 보고서 생성
+- 세금 보고 자료
+- PDF 다운로드
+- 보고서 아카이브
+
+**페이지**:
+- `Pages/User/Reports/List.razor` (신규)
+- `Pages/User/Reports/View.razor` (신규)
+
+---
+
+#### 3.4: 프로필 & 설정 (2시간)
+- 프로필 정보 수정
+- 비밀번호 변경
+- 알림 선호도
+- 계정 삭제
+
+**페이지**:
+- `Pages/User/Profile/Edit.razor` (신규)
+- `Pages/User/Profile/Security.razor` (신규)
+
+---
+
+### **Phase 4: 공통 컴포넌트 & 유틸리티** (2-3일)
+
+#### 4.1: 폼 컴포넌트 (2시간)
+- 재사용 가능한 폼 빌더
+- 입력 검증 (서버/클라이언트)
+- 에러 메시지 표시
+- 로딩 상태
+
+**컴포넌트**:
+- `Components/Forms/FormField.razor`
+- `Components/Forms/FormSection.razor`
+- `Components/Forms/SubmitButton.razor`
+
+---
+
+#### 4.2: 테이블/데이터그리드 (2시간)
+- 고급 필터링
+- 페이지네이션
+- 내보내기 (CSV, Excel)
+- 일괄 작업
+
+**컴포넌트**:
+- `Components/Tables/DataTableWithFilters.razor`
+- `Components/Tables/ExportMenu.razor`
+
+---
+
+#### 4.3: 모달/다이얼로그 (1시간)
+- 확인 다이얼로그
+- 알림 모달
+- 에러 디스플레이
+- 로딩 오버레이
+
+**컴포넌트**:
+- `Components/Dialogs/ConfirmDialog.razor`
+- `Components/Dialogs/AlertDialog.razor`
+- `Components/Dialogs/LoadingOverlay.razor`
+
+---
+
+#### 4.4: 푸터 & 법적 페이지 (1시간)
+- 글로벌 푸터
+- 개인정보처리방침 페이지
+- 이용약관 페이지
+- 연락처/지원 페이지
+
+**페이지**:
+- `Pages/Legal/PrivacyPolicy.razor` (신규)
+- `Pages/Legal/Terms.razor` (신규)
+- `Pages/Legal/Contact.razor` (신규)
+
+---
+
+### **Phase 5: 기능 통합 & API 연결** (3-4일)
+
+#### 5.1: 인증 & 권한 (2시간)
+- JWT 토큰 관리
+- 역할 기반 접근 제어 (RBAC)
+- 페이지 권한 보호
+- 로그아웃 기능
+
+**파일**:
+- `Services/AuthService.cs` (확장)
+- `Components/Security/AuthorizeView.razor` (커스텀)
+
+---
+
+#### 5.2: API 클라이언트 확장 (2시간)
+- 모든 엔드포인트 구현
+- 에러 처리 및 재시도 로직
+- 요청 취소 토큰
+- 요청 로깅
+
+**파일**:
+- `Services/ApiClient.cs` (확장)
+
+---
+
+#### 5.3: 상태 관리 (2시간)
+- 전역 상태 관리 (세션, 사용자, 알림)
+- 페이지 상태 저장
+- 임시 데이터 캐싱
+
+**파일**:
+- `Services/StateService.cs` (신규)
+
+---
+
+#### 5.4: 알림 & 토스트 (2시간)
+- 알림 메시지 (MudMessageBox)
+- 토스트 알림 (MudSnackbar)
+- 에러 메시지 표시
+- 성공/경고 메시지
+
+**컴포넌트**:
+- `Components/Notifications/NotificationService.razor`
+
+---
+
+### **Phase 6: 테스트 & 최적화** (2-3일)
+
+#### 6.1: 단위 테스트 (2시간)
+- 페이지 렌더링 테스트 (bUnit)
+- 컴포넌트 상호작용 테스트
+- API 클라이언트 테스트
+- 서비스 테스트
+
+**테스트 파일**:
+- `tests/ui/Pages/*Tests.cs`
+- `tests/ui/Components/*Tests.cs`
+
+---
+
+#### 6.2: 통합 테스트 (2시간)
+- E2E 시나리오 (로그인 → 대시보드)
+- 사용자 워크플로우 테스트
+- 권한 접근 테스트
+
+---
+
+#### 6.3: 성능 최적화 (2시간)
+- 번들 사이즈 최적화
+- 로딩 시간 개선
+- 이미지 최적화
+- 캐싱 전략
+
+---
+
+#### 6.4: 접근성 (1시간)
+- WCAG 2.1 AA 준수
+- 키보드 네비게이션
+- 스크린 리더 테스트
+- 색상 대비 확인
+
+---
+
+### **Phase 7: 배포 & 문서화** (1-2일)
+
+#### 7.1: 배포 준비 (1시간)
+- 빌드 최적화
+- CDN 설정
+- 환경 변수 설정
+
+---
+
+#### 7.2: 문서화 (2시간)
+- 컴포넌트 문서 (Storybook 또는 컴포넌트 갤러리)
+- 개발자 가이드
+- 배포 가이드
+- API 문서
+
+---
+
+#### 7.3: 배포 (1시간)
+- 개발 환경 배포
+- 스테이징 배포
+- 프로덕션 배포
+- 모니터링 설정
+
+---
+
+## 📅 타임라인
+
+| Phase | 작업 | 예상 시간 | 기간 |
+|-------|------|----------|------|
+| 1 | 기본 UI 구조 | 10시간 | 2-3일 |
+| 2 | 관리자 UI | 16시간 | 3-4일 |
+| 3 | 사용자 UI | 12시간 | 3-4일 |
+| 4 | 공통 컴포넌트 | 6시간 | 1-2일 |
+| 5 | API 통합 | 8시간 | 2-3일 |
+| 6 | 테스트 & 최적화 | 7시간 | 2-3일 |
+| 7 | 배포 & 문서 | 4시간 | 1-2일 |
+| **Total** | | **63시간** | **15-21일** |
+
+---
+
+## 🎨 MudBlazor 컴포넌트 매핑
+
+### UI 요소별 권장 MudBlazor 컴포넌트
+
+| UI 요소 | MudBlazor 컴포넌트 | 용도 |
+|---------|-----------------|------|
+| **레이아웃** | MudAppBar, MudDrawer, MudLayout | 전체 구조 |
+| **네비게이션** | MudNavMenu, MudNavLink, MudBreadcrumbs | 페이지 네비게이션 |
+| **입력** | MudTextField, MudSelect, MudDatePicker | 폼 입력 |
+| **데이터** | MudDataGrid, MudTable | 데이터 표시 |
+| **정보** | MudCard, MudAlert, MudProgressLinear | 정보 표시 |
+| **상호작용** | MudButton, MudIconButton, MudChip | 사용자 동작 |
+| **피드백** | MudSnackbar, MudMessageBox, MudDialog | 메시지/다이얼로그 |
+| **로딩** | MudProgressCircular, MudSkeleton | 로딩 상태 |
+| **스타일** | MudText, MudPaper, MudStack, MudGrid | 기본 스타일 |
+
+---
+
+## ✅ 성공 기준
+
+### Phase별 완료 체크리스트
+
+- **Phase 1** ✅
+  - [ ] 반응형 네비게이션 (모바일 테스트)
+  - [ ] 다크모드 토글 (저장 및 로드)
+  - [ ] 일관된 레이아웃 (모든 페이지)
+
+- **Phase 2** ✅
+  - [ ] 관리자 대시보드 (실시간 데이터)
+  - [ ] 사용자 관리 (검색/필터 작동)
+  - [ ] 데이터 수집 모니터링 (진행률 표시)
+  - [ ] 설정 페이지 (저장 기능)
+
+- **Phase 3** ✅
+  - [ ] 포트폴리오 대시보드 (성과 차트)
+  - [ ] 자산 상세 페이지 (가격 히스토리)
+  - [ ] 보고서 생성 및 다운로드
+  - [ ] 프로필 관리
+
+- **Phase 4** ✅
+  - [ ] 폼 컴포넌트 (검증 작동)
+  - [ ] 테이블 (필터/정렬/내보내기)
+  - [ ] 모달 및 다이얼로그
+  - [ ] 법적 페이지
+
+- **Phase 5** ✅
+  - [ ] 인증 & 권한 (API 연결)
+  - [ ] 모든 API 엔드포인트 작동
+  - [ ] 상태 관리 시스템
+  - [ ] 알림 시스템
+
+- **Phase 6** ✅
+  - [ ] 단위 테스트 (80% 커버리지)
+  - [ ] 통합 테스트 (주요 워크플로우)
+  - [ ] 성능 테스트 (번들 < 500KB)
+  - [ ] 접근성 테스트 (WCAG AA)
+
+- **Phase 7** ✅
+  - [ ] 배포 스크립트 준비
+  - [ ] 문서 완성
+  - [ ] 모니터링 설정
+  - [ ] 라이브 배포
+
+---
+
+## 📚 참고 자료
+
+- [MudBlazor 공식 문서](https://mudblazor.com/)
+- [Blazor 공식 문서](https://learn.microsoft.com/en-us/aspnet/core/blazor/)
+- [CLAUDE.md - QuantEngine 표준](../CLAUDE.md)
+
+---
+
+## 🎯 우선순위
+
+**1차 (필수)**:
+1. Phase 1: 기본 UI 구조 (모든 페이지의 기반)
+2. Phase 2.1-2.2: 관리자 대시보드 + 사용자 관리
+3. Phase 5: API 통합 (기능 연결)
+
+**2차 (중요)**:
+4. Phase 3: 사용자 UI
+5. Phase 4: 공통 컴포넌트
+6. Phase 6: 테스트
+
+**3차 (배포)**:
+7. Phase 7: 배포 & 문서
+
+---
+
+**생성일**: 2026-07-05  
+**작성자**: Claude Code  
+**상태**: 🎯 실행 중