kjh2064/QuantEngineByItz

Files

T

kjh2064 98470ad184 📋 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>

2026-07-05 16:10:57 +09:00

11 KiB

Raw Permalink Blame History

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 ✅
- 배포 스크립트 준비
- 문서 완성
- 모니터링 설정
- 라이브 배포

📚 참고 자료

🎯 우선순위

1차 (필수):

Phase 1: 기본 UI 구조 (모든 페이지의 기반)
Phase 2.1-2.2: 관리자 대시보드 + 사용자 관리
Phase 5: API 통합 (기능 연결)

2차 (중요): 4. Phase 3: 사용자 UI 5. Phase 4: 공통 컴포넌트 6. Phase 6: 테스트

3차 (배포): 7. Phase 7: 배포 & 문서

생성일: 2026-07-05
작성자: Claude Code
상태: 🎯 실행 중

11 KiB Raw Permalink Blame History

QuantEngine MudBlazor UI — 완성 로드맵

📊 현재 상태

🎯 Phase별 상세 WBS

Phase 1: 기본 UI 구조 강화 (2-3일)

1.1: MainLayout 개선 (4시간)

1.2: AuthLayout 개선 (3시간)

1.3: 테마 & 스타일링 (3시간)

Phase 2: 관리자 UI (3-4일)

2.1: 대시보드 고급화 (4시간)

2.2: 사용자 관리 (5시간)

2.3: 데이터 수집 모니터링 (4시간)

2.4: 설정 페이지 (3시간)

Phase 3: 사용자 UI (3-4일)

3.1: 포트폴리오 대시보드 (4시간)

3.2: 자산 상세 페이지 (3시간)

3.3: 보고서 페이지 (3시간)

3.4: 프로필 & 설정 (2시간)

Phase 4: 공통 컴포넌트 & 유틸리티 (2-3일)

4.1: 폼 컴포넌트 (2시간)

4.2: 테이블/데이터그리드 (2시간)

4.3: 모달/다이얼로그 (1시간)

4.4: 푸터 & 법적 페이지 (1시간)

Phase 5: 기능 통합 & API 연결 (3-4일)

5.1: 인증 & 권한 (2시간)

5.2: API 클라이언트 확장 (2시간)

5.3: 상태 관리 (2시간)

5.4: 알림 & 토스트 (2시간)

Phase 6: 테스트 & 최적화 (2-3일)

6.1: 단위 테스트 (2시간)

6.2: 통합 테스트 (2시간)

6.3: 성능 최적화 (2시간)

6.4: 접근성 (1시간)

Phase 7: 배포 & 문서화 (1-2일)

7.1: 배포 준비 (1시간)

7.2: 문서화 (2시간)

7.3: 배포 (1시간)

📅 타임라인

🎨 MudBlazor 컴포넌트 매핑

UI 요소별 권장 MudBlazor 컴포넌트

✅ 성공 기준

Phase별 완료 체크리스트

📚 참고 자료

🎯 우선순위

11 KiB

Raw Permalink Blame History