web-ui — 구현 현황 & 로드맵
최종 갱신: 2026-05-07
자세한 페이지·API 표는 CLAUDE.md 참조.
1. 구현 완료
1-1. 메인 페이지
| 경로 |
상태 |
비고 |
/ Home |
✅ |
메인 허브 |
/blog Blog |
✅ |
마크다운 기반 |
/portfolio Portfolio |
✅ |
프로필·경력·프로젝트·자기소개 |
/todo Todo |
✅ |
태스크 보드 |
1-2. 로또 (/lotto)
| 영역 |
상태 |
| 3탭 구조 (브리핑 / 분석·통계 / 구매·성과) |
✅ |
| AI 큐레이터 브리핑 탭 |
✅ |
| 성과 배너 + ReportPanel + ConfidenceRing |
✅ |
| 개인 분석 패널 |
✅ |
| 구매 내역 CRUD + 성과 통계 |
✅ |
1-3. 주식 (/stock, /stock/trade)
| 영역 |
상태 |
| 뉴스·지수 |
✅ |
| 트레이딩 + 잔고 |
✅ |
| 포트폴리오 (수동 입력 종목 + 예수금 + 자산 추이) |
✅ |
| 자산 스냅샷 + 7/30/90일 차트 |
✅ |
| 실현손익(매도이력) Drawer |
✅ |
| 포트폴리오 카드 모바일 금액 줄바꿈 대응 |
✅ (2026-05-06) |
1-4. 청약 (/realestate, /realestate/property)
| 영역 |
상태 |
| 자치구 5티어 (S/A/B/C/D) 드래그&드롭 + 슬라이더 + 토글 |
✅ |
| 카드/매칭 결과에 district 뱃지 + 5티어 뱃지 |
✅ |
| AnnouncementDetail 매칭 분석 섹션 |
✅ |
| 5축 점수 breakdown 시각화 + 알림 대상 카운트 |
✅ |
| 청약 일정 캘린더 뷰 |
✅ |
| 프로필 완성도 힌트 배너 + 소득 기준 힌트 |
✅ |
1-5. 여행 (/travel)
| 영역 |
상태 |
| Dark Room 테마 갤러리 |
✅ |
| 앨범 카드 + Masonry + Lightbox + MiniMap |
✅ |
| 지역 변경 + 핀 좌표 지정 |
✅ |
| 영상(VideoTab) |
🚧 준비 중 |
1-6. 음악 스튜디오 (/lab/music — Sonic Forge)
| 영역 |
상태 |
| Create 탭 (장르/무드/악기/BPM/Key) + 트랙 제목 직접 입력 |
✅ |
| Library 탭 + 트랙 카드 + 삭제/재생 |
✅ |
| YouTube 탭 (서브탭 4개: VideoProjects / Trends / Revenue / Compile) |
✅ (2026-05-01~05-06) |
| 다중 트랙 컴파일 (FFmpeg concat → MP4) |
✅ |
| 시장 트렌드 리포트 (장르/추천수/이력) |
✅ |
1-7. 기타 Lab
| 경로 |
상태 |
/lab/sword-stream Three.js 파티클 |
✅ |
/lab/day-calc 날짜 계산기 |
✅ |
/agent-office 에이전트 가상 오피스 (WebSocket) |
✅ |
/blog-lab 블로그 마케팅 수익화 대시보드 |
✅ |
1-8. 인프라 / DX
| 항목 |
상태 |
Vite 개발 서버 프록시 (/api, /media, /ext) |
✅ |
Windows robocopy + macOS SSH/SMB 배포 (scripts/deploy-nas.cjs) |
✅ |
| Mac SSH 배포 + tar|ssh 전환 (Synology rsync 우회) |
✅ |
| 반응형 웹 디자인 패스 |
✅ |
2. 진행 중 / 향후 계획
2-1. Travel 영상 탭 완성
- 현재 "준비 중" 플레이스홀더 → 실제 영상 업로드/재생 UI 구현
- 백엔드
travel-proxy에 영상 메타·썸네일 API 필요
2-2. 로또 프리미엄 구독 UI (백엔드 Phase 3 연동)
- 회원 가입/로그인 UI (JWT)
- 구독 플랜 선택 + Toss/Stripe 결제 플로우
- 구독자 전용 리포트·알림 영역
- 백엔드 로드맵:
web-backend/docs/lotto-premium-roadmap.md
2-3. Music YouTube 탭 후속
- VideoProjects 실제 렌더링 진행률 시각화 강화
- Compile 탭에 트랙 트림/페이드 옵션
- Revenue 대시보드 차트 강화
2-4. 청약 후속
- 알림 dry-run 미리보기 UI (어떤 공고가 매칭됐을지 사전 확인)
- 모바일 5티어 편집 모드 (현재 PC 전용)
2-5. 포트폴리오/주식 후속
- 종목별 평균 매입가 분할 입력 UI
- 매도 시뮬레이터 (수익률 시나리오 비교)
2-6. 일반
- 다크/라이트 테마 토글 (현재 다크 단일)
- PWA 설치 + 홈화면 단축 (모바일 사용 빈도 증가)
3. 참고 문서
- 페이지·라우트·API 전체 표: CLAUDE.md
- 워크스페이스 통합 가이드:
../CLAUDE.md
- 백엔드 상태:
../web-backend/STATUS.md
- 백엔드 Spec/Plan 디렉토리:
../web-backend/docs/superpowers/
gahusb
397257cf3b