# web-ui — 구현 현황 & 로드맵

> 최종 갱신: 2026-05-07
> 자세한 페이지·API 표는 [CLAUDE.md](./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)
- 워크스페이스 통합 가이드: `../CLAUDE.md`
- 백엔드 상태: `../web-backend/STATUS.md`
- 백엔드 Spec/Plan 디렉토리: `../web-backend/docs/superpowers/`