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