diff --git a/CLAUDE.md b/CLAUDE.md index ecb0e48..42e93fe 100644 --- a/CLAUDE.md +++ b/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) -- 사진 URL: `/media/travel/...` 형식 → `vite.config.js` `/media` 프록시로 처리 -- 프로덕션 nginx에도 `location /media/` 프록시 블록 필요 +테마: "Dark Room" (배경 `#0f0c09`, 서체 Cormorant Garamond + Space Mono) + +### 파일 구조 + +| 파일 | 역할 | +|------|------| +| `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에서 직접 서빙 --- diff --git a/README.md b/README.md index 2301284..1c0d84f 100644 --- a/README.md +++ b/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) -- 단지별 상태 마커: 청약예정 / 청약중 / 결과발표 / 완료 -- D-day 카운트다운 및 우선순위 배지 -- 평당가 비교 바 차트 (Recharts) -- 일정 탭: 전체 단지 청약 일정 타임라인 -- 분석 탭: 단지별 평당가 비교표 -- 모달 기반 단지 추가/편집 (단지명, 주소, 좌표, 평형, 분양가, 네이버 부동산 URL) -- 네이버 부동산 바로가기 링크 연동 +- 관심 아파트 단지 카드 그리드 + Leaflet 지도 통합 뷰 +- D-day 카운트다운, 평당가 비교 바 차트 (Recharts) +- 모달 기반 단지 추가/편집, 네이버 부동산 바로가기 연동 --- -### Travel (`/travel`) +### Travel (`/travel`) — 8 컴포넌트 -여행 사진 갤러리. +여행 사진 갤러리 (Dark Room 테마). -- 지도 기반 지역 선택 (GeoJSON) -- 선택 지역의 사진 목록 로딩 및 캐시 -- 스크롤 기반 이미지 추가 로딩 (chunked lazy load) -- 썸네일 / 모달 뷰, 키보드 및 스와이프 네비게이션 -- 앨범 및 파일 메타 정보 표시 +- **MiniMap**: GeoJSON 기반 접이식 세계 지도 — Polygon(기존 지역) + CircleMarker(핀) +- **AlbumCard**: 앨범 썸네일 카드 그리드 (커버 이미지 + 지역 라벨 + 사진 수) +- **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 |