QuantEngine MudBlazor UI: Complete Phase 1-8 Implementation #14
@@ -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
|
||||
**상태**: 🎯 실행 중
|
||||
Reference in New Issue
Block a user