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 아이콘 라이브러리

---

개발 환경

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

NAS 배포

# 빌드 + 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)로 자동 전달됩니다.

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