# Web UI

개인 대시보드 — 블로그, 로또, 주식, 부동산, 여행, AI 음악, AI 에이전트, 할 일 등을 한 곳에서 관리하는 개인 웹 UI입니다.

## 기술 스택

| 분류 | 사용 기술 |
|------|-----------|
| 프레임워크 | React 18 + Vite |
| 라우팅 | react-router-dom v6 |
| 지도 | react-leaflet + Leaflet |
| 차트 | Recharts |
| 3D | Three.js |
| 제스처 | react-swipeable |
| 스타일 | 커스텀 CSS (CSS 변수 기반 사이버펑크 다크 테마) |
| 배포 | Synology NAS (Docker + nginx 리버스 프록시) |

---

## 페이지 구성 (13개 라우트)

### Home (`/`)

개인 아카이브 허브.

- 전체 페이지 네비게이션 카드 그리드
- 최근 업데이트 및 할 일 목록 미리보기
- 사이트 소개 및 최신 활동 요약

---

### Blog (`/blog`)

마크다운 기반 개인 블로그.

- `src/content/blog/` 폴더의 마크다운 파일 자동 목록화
- 태그 기반 카테고리 분류 및 필터링
- 목록 / 본문 분리 UI, 페이지네이션 지원
- 인라인 스타일(링크, 강조, 코드, 이미지) 렌더링

---

### Lotto (`/lotto`) — 14 컴포넌트

로또 번호 추천 및 통계 실험실.

- **3탭 구조**: 이번 주 브리핑 / 분석·통계 / 구매·성과
- AI 큐레이터 브리핑 (5세트 + 내러티브 + 토큰·비용 집계)
- 가중치·최근 회차·회피 수 파라미터 기반 번호 추천
- 몬테카를로 시뮬레이션 최적 번호 표시
- 전략 진화 (EMA+Softmax) 기반 메타 추천
- 주간 리포트 + ConfidenceRing 시각화
- 구매 이력 CRUD + 성과 통계 (수익률·당첨 현황)
- 프리셋으로 빠른 추천 생성, 번호 원클릭 복사

---

### Stock (`/stock`)

주식 시장 모니터링 대시보드.

- KOSPI, KOSDAQ, 나스닥, S&P500 등 주요 지수 현황
- Fear & Greed 지수 및 VIX 변동성 지표 시각화
- 미국 10년물 금리, WTI/Brent 유가 등 매크로 지표
- 국내 / 해외 주식 뉴스 탭 분류 및 필터링

### Stock Trade (`/stock/trade`) — 7 컴포넌트

포트폴리오 관리 및 트레이딩 데스크.

- **포트폴리오 탭**: 보유 종목 수익률, 자산 구성 차트 (파이/바 차트)
- **AI 탭**: AI 시장 분석 요약 및 투자 인사이트
- **리포트 탭**: 자산 스냅샷 히스토리 및 수익 추이
- **어드바이저 탭**: 투자 조언 및 리밸런싱 제안
- 종목 추가/편집/삭제 CRUD, 현금 잔고(예수금) 관리
- 매도 히스토리 드로어 (실현손익 추적)

---

### Realestate (`/realestate`) — 2 섹션

부동산 청약 통합 관리.

#### 청약 대시보드 (`/realestate`)

- 관심 청약 카드 목록 + 상세 패널 (요건/일정/자금 섹션)
- 전체 청약 일정 타임라인 (청약 → 계약 → 중도금 → 잔금)
- 가점 계산 엔진 (무주택 32점 + 부양가족 35점 + 통장 17점 = 84점 만점)
- 청약 유형 분류: 줍줍 / 특공 / 일반

#### 부동산 정보 (`/realestate/property`)

- 관심 아파트 단지 카드 그리드 + Leaflet 지도 통합 뷰
- D-day 카운트다운, 평당가 비교 바 차트 (Recharts)
- 모달 기반 단지 추가/편집, 네이버 부동산 바로가기 연동

---

### Travel (`/travel`) — 8 컴포넌트

여행 사진 갤러리 (Dark Room 테마).

- **MiniMap**: GeoJSON 기반 접이식 세계 지도 — Polygon(기존 지역) + CircleMarker(핀)
- **AlbumCard**: 앨범 썸네일 카드 그리드 (커버 이미지 + 지역 라벨 + 사진 수)
- **AlbumDetail**: 앨범 상세 오버레이 — 사진/영상 탭 + 지역 인라인 편집
- **MasonryGrid**: CSS columns Masonry 레이아웃 + IntersectionObserver 무한 스크롤
- **HeroLightbox**: 전체화면 사진 뷰어 — 스와이프/키보드 네비 + 앨범 커버 지정
- **RegionPinPicker**: 커스텀 지역 좌표 지정 모달 (Leaflet 클릭 → 핀 저장)
- 40장 단위 청크 로딩, PullToRefresh 지원

---

### 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 효과 테스트 공간.

- **SwordStream**: Three.js 1,500개 파티클 3D 애니메이션 (호버/오빗 모드)
- **DayCalc**: 날짜 계산 유틸리티

---

### Todo (`/todo`)

태스크 관리 보드.

- 칸반 레이아웃: 할 일 → 진행 중 → 완료
- 드래그 앤 드롭으로 상태 변경
- 태스크 추가/삭제, 완료 항목 일괄 정리

---

## 공통 컴포넌트 (`src/components/`)

| 컴포넌트 | 설명 |
|----------|------|
| `Navbar` | 상단 네비게이션 바 |
| `BottomNav` | 모바일 하단 네비게이션 |
| `PageHeader` | 페이지 헤더 + 브레드크럼 |
| `SwipeableView` | 스와이프 탭 컨테이너 |
| `PullToRefresh` | 풀투리프레시 제스처 |
| `MobileSheet` | 모바일 바텀시트 모달 |
| `FAB` | 플로팅 액션 버튼 |
| `FearGreedGauge` | 공포·탐욕 게이지 |
| `Loading` | 로딩 스피너 |
| `Icons` | SVG 아이콘 라이브러리 |

---

## 개발 환경

```bash
npm install
npm run dev        # localhost:3007
npm run build      # dist/ 빌드
npm run lint       # ESLint
npm run preview    # 빌드 결과 미리보기
```

## NAS 배포

```bash
# 빌드 + NAS 배포 (Windows, Z: 드라이브 마운트 필요)
npm run release:nas

# SSH 배포 (macOS)
NAS_SSH_TARGET=user@gahusb.synology.me NAS_SSH_PORT=22 npm run release:nas
```

## API 설정

모든 API 호출은 상대 경로(`/api/...`)를 사용합니다. 개발 서버에서는 `vite.config.js`의 프록시 설정으로 NAS 백엔드(`gahusb.synology.me`)로 자동 전달됩니다.

```js
import { apiGet, apiPost, apiPut, apiDelete } from './api';

apiGet('/api/stock/indices');
apiPost('/api/travel/sync');
```

## 프로젝트 통계

| 항목 | 값 |
|------|-----|
| 페이지 라우트 | 13개 |
| JSX 컴포넌트 | 62+ |
| 공통 컴포넌트 | 10개 |
| API 헬퍼 함수 | 65+ |
| 외부 라이브러리 | React, Router, Leaflet, Recharts, Three.js, react-swipeable |