분류	사용 기술
프레임워크	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

README.md

Web UI

기술 스택

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

Home (/)

Blog (/blog)

Lotto (/lotto) — 14 컴포넌트

Stock (/stock)

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

Realestate (/realestate) — 2 섹션

청약 대시보드 (/realestate)

부동산 정보 (/realestate/property)

Travel (/travel) — 8 컴포넌트

Music — Sonic Forge (/lab/music) — 8 컴포넌트

Blog Marketing (/blog-lab)

Agent Office (/agent-office) — 5 컴포넌트

Lab (/lab) — 3 컴포넌트

Todo (/todo)

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