docs: CLAUDE.md·README.md 최신 상태 반영

CLAUDE.md

@@ -25,6 +25,8 @@
 | `/lab/day-calc` | `DayCalc` | 날짜 계산기 |
 | `/lab/music` | `MusicStudio` | AI 음악 생성 스튜디오 (Sonic Forge) |
 | `/todo` | `Todo` | 태스크 보드 |
+| `/blog-lab` | `BlogMarketing` | 블로그 마케팅 수익화 대시보드 |
+| `/agent-office` | `AgentOffice` | AI 에이전트 가상 오피스 (WebSocket + 채팅) |
 
 라우트 정의: `src/routes.jsx` / 라우터 설정: `src/Router.jsx`
 
@@ -99,6 +101,19 @@ proxy: {
 | AI 음악 | GET | `/api/music/status/:task_id` → `{ status, progress, message, audio_url?, error?, track? }` |
 | AI 음악 라이브러리 | GET/POST | `/api/music/library` — response: `{ tracks: [...] }` |
 | AI 음악 라이브러리 | DELETE | `/api/music/library/:id` |
+| 여행 | GET | `/api/travel/regions`, `/api/travel/albums`, `/api/travel/photos` |
+| 여행 | POST | `/api/travel/sync` |
+| 여행 | PUT | `/api/travel/albums/:album/cover`, `/api/travel/albums/:album/region` |
+| 여행 | PUT | `/api/travel/regions/:id` |
+| 블로그마케팅 | POST | `/api/blog-marketing/research`, `/api/blog-marketing/generate` |
+| 블로그마케팅 | GET | `/api/blog-marketing/posts`, `/api/blog-marketing/dashboard` |
+| 블로그마케팅 | POST | `/api/blog-marketing/market/:id`, `/api/blog-marketing/review/:id` |
+| 에이전트 | GET | `/api/agent-office/agents`, `/api/agent-office/states` |
+| 에이전트 | POST | `/api/agent-office/command`, `/api/agent-office/approve` |
+| 에이전트 | WS | `/api/agent-office/ws` |
+| 부동산 | GET | `/api/realestate/announcements`, `/api/realestate/matches` |
+| 부동산 | PUT | `/api/realestate/profile` |
+| AI 큐레이터 | GET | `/api/lotto/briefing/latest`, `/api/lotto/curator/usage` |
 
 ---
 
@@ -260,9 +275,46 @@ handleGenerate()
 
 ## Travel 갤러리 (`/travel`)
 
-- 테마: "Dark Room" (배경 `#0f0c09`, 서체 Cormorant Garamond + Space Mono)
+테마: "Dark Room" (배경 `#0f0c09`, 서체 Cormorant Garamond + Space Mono)
-- 사진 URL: `/media/travel/...` 형식 → `vite.config.js` `/media` 프록시로 처리
+
-- 프로덕션 nginx에도 `location /media/` 프록시 블록 필요
+### 파일 구조
+
+| 파일 | 역할 |
+|------|------|
+| `src/pages/travel/Travel.jsx` | 메인 페이지 — 앨범 카드 목록 + MiniMap |
+| `src/pages/travel/AlbumCard.jsx` | 앨범 썸네일 카드 (커버 이미지 + 사진 수) |
+| `src/pages/travel/AlbumDetail.jsx` | 앨범 상세 오버레이 — 사진/영상 탭 + 지역 편집 |
+| `src/pages/travel/MasonryGrid.jsx` | CSS columns 기반 Masonry 레이아웃 + 무한 스크롤 |
+| `src/pages/travel/HeroLightbox.jsx` | 전체화면 사진 뷰어 — 스와이프/키보드 네비게이션 |
+| `src/pages/travel/MiniMap.jsx` | 접이식 Leaflet 지도 — GeoJSON 지역 + 핀 마커 |
+| `src/pages/travel/RegionPinPicker.jsx` | 지도 핀 위치 지정 모달 (Leaflet 클릭 → 좌표 저장) |
+| `src/pages/travel/VideoTab.jsx` | 영상 탭 (준비 중) |
+
+### 핵심 기능
+
+- **지역 관리**: GeoJSON 기반 지역 선택 → 앨범 필터링 + 지역 변경 + 핀 좌표 지정
+- **앨범 카드**: 커버 사진, 지역 라벨, 사진 수 표시, 접근성 accent 색상
+- **Masonry 그리드**: 40장 단위 청크 로딩, IntersectionObserver 기반 무한 스크롤
+- **Lightbox**: 앨범 커버 지정, 스와이프/키보드 네비게이션, 추가 로딩 지원
+- **MiniMap**: Polygon(기존 지역) + CircleMarker(커스텀 핀) 이중 렌더링
+- **지역 편집**: AlbumDetail에서 인라인 편집 + 자동완성 + "위치 지정" 버튼
+
+### API 연동
+
+| 메서드 | 경로 | 설명 |
+|--------|------|------|
+| GET | `/api/travel/regions` | GeoJSON (커스텀 지역 포함) |
+| GET | `/api/travel/photos?region=X&page=N&size=40` | 사진 페이지네이션 |
+| GET | `/api/travel/albums` | 앨범 목록 + cover + region |
+| POST | `/api/travel/sync` | 폴더 동기화 |
+| PUT | `/api/travel/albums/{album}/cover` | 커버 지정 |
+| PUT | `/api/travel/albums/{album}/region` | 지역 변경 |
+| PUT | `/api/travel/regions/{id}` | 핀 좌표 저장 |
+
+### 미디어 URL
+- 사진: `/media/travel/{album}/{filename}`
+- 썸네일: `/media/travel/.thumb/{album}/{filename}`
+- `vite.config.js` `/media` 프록시로 처리, 프로덕션 nginx에서 직접 서빙
 
 ---
 

README.md

@@ -1,6 +1,6 @@
 # Web UI
 
-개인 대시보드 — 블로그, 로또, 주식, 부동산, 여행, 할 일 등을 한 곳에서 관리하는 개인 웹 UI입니다.
+개인 대시보드 — 블로그, 로또, 주식, 부동산, 여행, AI 음악, AI 에이전트, 할 일 등을 한 곳에서 관리하는 개인 웹 UI입니다.
 
 ## 기술 스택
 
@@ -11,12 +11,13 @@
 | 지도 | react-leaflet + Leaflet |
 | 차트 | Recharts |
 | 3D | Three.js |
+| 제스처 | react-swipeable |
 | 스타일 | 커스텀 CSS (CSS 변수 기반 사이버펑크 다크 테마) |
 | 배포 | Synology NAS (Docker + nginx 리버스 프록시) |
 
 ---
 
-## 페이지 구성
+## 페이지 구성 (13개 라우트)
 
 ### Home (`/`)
 
@@ -39,15 +40,18 @@
 
 ---
 
-### Lotto (`/lotto`)
+### Lotto (`/lotto`) — 14 컴포넌트
 
 로또 번호 추천 및 통계 실험실.
 
-- 최신 로또 당첨 결과 조회
+- **3탭 구조**: 이번 주 브리핑 / 분석·통계 / 구매·성과
+- AI 큐레이터 브리핑 (5세트 + 내러티브 + 토큰·비용 집계)
 - 가중치·최근 회차·회피 수 파라미터 기반 번호 추천
-- 프리셋으로 빠른 추천 생성
+- 몬테카를로 시뮬레이션 최적 번호 표시
-- 추천 히스토리 목록 확인 및 삭제
+- 전략 진화 (EMA+Softmax) 기반 메타 추천
-- 번호 원클릭 복사
+- 주간 리포트 + ConfidenceRing 시각화
+- 구매 이력 CRUD + 성과 통계 (수익률·당첨 현황)
+- 프리셋으로 빠른 추천 생성, 번호 원클릭 복사
 
 ---
 
@@ -60,65 +64,93 @@
 - 미국 10년물 금리, WTI/Brent 유가 등 매크로 지표
 - 국내 / 해외 주식 뉴스 탭 분류 및 필터링
 
-### Stock Trade (`/stock/trade`)
+### Stock Trade (`/stock/trade`) — 7 컴포넌트
 
 포트폴리오 관리 및 트레이딩 데스크.
 
 - **포트폴리오 탭**: 보유 종목 수익률, 자산 구성 차트 (파이/바 차트)
 - **AI 탭**: AI 시장 분석 요약 및 투자 인사이트
 - **리포트 탭**: 자산 스냅샷 히스토리 및 수익 추이
-- 종목 추가/편집/삭제 CRUD
+- **어드바이저 탭**: 투자 조언 및 리밸런싱 제안
-- 현금 잔고(예수금) 관리, 브로커별 분리
+- 종목 추가/편집/삭제 CRUD, 현금 잔고(예수금) 관리
+- 매도 히스토리 드로어 (실현손익 추적)
 
 ---
 
-### Realestate (`/realestate`)
+### Realestate (`/realestate`) — 2 섹션
 
-부동산 청약 통합 관리 — 청약 대시보드와 관심 단지 정보 두 화면으로 구성.
+부동산 청약 통합 관리.
 
 #### 청약 대시보드 (`/realestate`)
 
-- **청약 목록 탭**: 관심 청약 카드 목록 + 상세 패널 (요건/일정/자금 섹션)
+- 관심 청약 카드 목록 + 상세 패널 (요건/일정/자금 섹션)
-- **일정 탭**: 전체 청약 일정 타임라인 (청약 → 계약 → 중도금 → 잔금)
+- 전체 청약 일정 타임라인 (청약 → 계약 → 중도금 → 잔금)
-- **자금 탭**: 단지별 자금 계획 및 총합 분석
+- 가점 계산 엔진 (무주택 32점 + 부양가족 35점 + 통장 17점 = 84점 만점)
-- 가점 계산 엔진 (무주택기간 최대 32점, 부양가족 최대 35점, 통장기간 최대 17점 = 84점 만점)
-- 내 청약 조건 프로필 입력 및 단지별 요건 충족 여부 자동 비교
 - 청약 유형 분류: 줍줍 / 특공 / 일반
-- API 미구현 시 localStorage fallback으로 데이터 유지
 
 #### 부동산 정보 (`/realestate/property`)
 
-- 관심 아파트 단지 카드 그리드 + 지도 통합 뷰 (react-leaflet)
+- 관심 아파트 단지 카드 그리드 + Leaflet 지도 통합 뷰
-- 단지별 상태 마커: 청약예정 / 청약중 / 결과발표 / 완료
+- D-day 카운트다운, 평당가 비교 바 차트 (Recharts)
-- D-day 카운트다운 및 우선순위 배지
+- 모달 기반 단지 추가/편집, 네이버 부동산 바로가기 연동
-- 평당가 비교 바 차트 (Recharts)
-- 일정 탭: 전체 단지 청약 일정 타임라인
-- 분석 탭: 단지별 평당가 비교표
-- 모달 기반 단지 추가/편집 (단지명, 주소, 좌표, 평형, 분양가, 네이버 부동산 URL)
-- 네이버 부동산 바로가기 링크 연동
 
 ---
 
-### Travel (`/travel`)
+### Travel (`/travel`) — 8 컴포넌트
 
-여행 사진 갤러리.
+여행 사진 갤러리 (Dark Room 테마).
 
-- 지도 기반 지역 선택 (GeoJSON)
+- **MiniMap**: GeoJSON 기반 접이식 세계 지도 — Polygon(기존 지역) + CircleMarker(핀)
-- 선택 지역의 사진 목록 로딩 및 캐시
+- **AlbumCard**: 앨범 썸네일 카드 그리드 (커버 이미지 + 지역 라벨 + 사진 수)
-- 스크롤 기반 이미지 추가 로딩 (chunked lazy load)
+- **AlbumDetail**: 앨범 상세 오버레이 — 사진/영상 탭 + 지역 인라인 편집
-- 썸네일 / 모달 뷰, 키보드 및 스와이프 네비게이션
+- **MasonryGrid**: CSS columns Masonry 레이아웃 + IntersectionObserver 무한 스크롤
-- 앨범 및 파일 메타 정보 표시
+- **HeroLightbox**: 전체화면 사진 뷰어 — 스와이프/키보드 네비 + 앨범 커버 지정
+- **RegionPinPicker**: 커스텀 지역 좌표 지정 모달 (Leaflet 클릭 → 핀 저장)
+- 40장 단위 청크 로딩, PullToRefresh 지원
 
 ---
 
-### Lab (`/lab`)
+### Music — Sonic Forge (`/lab/music`) — 8 컴포넌트
+
+AI 음악 생성 스튜디오.
+
+- 듀얼 프로바이더: Suno (보컬/가사) + 로컬 MusicGen (인스트루멘탈)
+- 장르/무드/악기/BPM/키/스케일 설정, 스타일 부스트
+- 생성 진행 폴링 (3초 간격), 라이브러리 자동 등록
+- 가사 관리 + 타임스탬프 동기 재생 (가라오케)
+- 커버 이미지 생성, WAV 변환, 12스템 분리
+- SonicRadar 시각 효과 + WaveformCanvas 오실로스코프
+
+---
+
+### Blog Marketing (`/blog-lab`)
+
+AI 블로그 마케팅 자동화 대시보드.
+
+- 키워드 리서치 (네이버 검색 + 상위 블로그 크롤링)
+- AI 글 생성 → 마케팅 강화 → 품질 리뷰 (6기준 x 10점)
+- 발행 관리 + 브랜드커넥트 링크 + 수익 추적
+- 비동기 작업 상태 폴링
+
+---
+
+### Agent Office (`/agent-office`) — 5 컴포넌트
+
+AI 에이전트 가상 오피스.
+
+- 2D 픽셀아트 사무실에서 4명의 에이전트가 실제 작업 수행
+- WebSocket 실시간 상태 동기화 (에이전트 FSM: idle → working → reporting)
+- 에이전트별 명령 전송 + 작업 승인/거부
+- 채팅 패널 + 문서 패널
+
+---
+
+### Lab (`/lab`) — 3 컴포넌트
 
 실험적 UI/UX 효과 테스트 공간.
 
-- Three.js 기반 실시간 3D 파티클 애니메이션 (1,500개 오브젝트)
+- **SwordStream**: Three.js 1,500개 파티클 3D 애니메이션 (호버/오빗 모드)
-- 호버 모드: 마우스 추적 및 자연스러운 흐름
+- **DayCalc**: 날짜 계산 유틸리티
-- 오빗 모드: 클릭 시 나선형 궤도 회전
-- 동적 스케일, 조명 효과
 
 ---
 
@@ -129,7 +161,23 @@
 - 칸반 레이아웃: 할 일 → 진행 중 → 완료
 - 드래그 앤 드롭으로 상태 변경
 - 태스크 추가/삭제, 완료 항목 일괄 정리
-- 상태별 카운트 및 타임스탬프 표시
+
+---
+
+## 공통 컴포넌트 (`src/components/`)
+
+| 컴포넌트 | 설명 |
+|----------|------|
+| `Navbar` | 상단 네비게이션 바 |
+| `BottomNav` | 모바일 하단 네비게이션 |
+| `PageHeader` | 페이지 헤더 + 브레드크럼 |
+| `SwipeableView` | 스와이프 탭 컨테이너 |
+| `PullToRefresh` | 풀투리프레시 제스처 |
+| `MobileSheet` | 모바일 바텀시트 모달 |
+| `FAB` | 플로팅 액션 버튼 |
+| `FearGreedGauge` | 공포·탐욕 게이지 |
+| `Loading` | 로딩 스피너 |
+| `Icons` | SVG 아이콘 라이브러리 |
 
 ---
 
@@ -161,5 +209,15 @@ NAS_SSH_TARGET=user@gahusb.synology.me NAS_SSH_PORT=22 npm run release:nas
 import { apiGet, apiPost, apiPut, apiDelete } from './api';
 
 apiGet('/api/stock/indices');
-apiPost('/api/subscription/items', { ... });
+apiPost('/api/travel/sync');
 ```
+
+## 프로젝트 통계
+
+| 항목 | 값 |
+|------|-----|
+| 페이지 라우트 | 13개 |
+| JSX 컴포넌트 | 62+ |
+| 공통 컴포넌트 | 10개 |
+| API 헬퍼 함수 | 65+ |
+| 외부 라이브러리 | React, Router, Leaflet, Recharts, Three.js, react-swipeable |