# 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 **상태**: 🎯 실행 중