224 lines
7.0 KiB
Markdown
224 lines
7.0 KiB
Markdown
# 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 |
|