diff --git a/docs/MUDBLAZOR_UI_COMPLETION_WBS.md b/docs/MUDBLAZOR_UI_COMPLETION_WBS.md new file mode 100644 index 0000000..518563c --- /dev/null +++ b/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 +**상태**: 🎯 실행 중