README.md 업데이트
This commit is contained in:
172
README.md
172
README.md
@@ -1,27 +1,165 @@
|
|||||||
# Web UI
|
# Web UI
|
||||||
|
|
||||||
블로그, 로또 추천 실험, 여행 기록을 한 곳에서 모아 보는 개인 웹 UI입니다.
|
개인 대시보드 — 블로그, 로또, 주식, 부동산, 여행, 할 일 등을 한 곳에서 관리하는 개인 웹 UI입니다.
|
||||||
|
|
||||||
## 블로그
|
## 기술 스택
|
||||||
|
|
||||||
- 마크다운 기반 글 작성 및 자동 목록화 (`src/content/blog`)
|
| 분류 | 사용 기술 |
|
||||||
- 태그 기반 카테고리 분류와 카테고리별 목록 뷰
|
|------|-----------|
|
||||||
- 목록/본문 분리 UI, 페이지네이션 지원
|
| 프레임워크 | React 18 + Vite |
|
||||||
- 인라인 스타일(링크/강조/코드/이미지) 렌더링 지원
|
| 라우팅 | react-router-dom v6 |
|
||||||
|
| 지도 | react-leaflet + Leaflet |
|
||||||
|
| 차트 | Recharts |
|
||||||
|
| 3D | Three.js |
|
||||||
|
| 스타일 | 커스텀 CSS (CSS 변수 기반 사이버펑크 다크 테마) |
|
||||||
|
| 배포 | Synology NAS (Docker + nginx 리버스 프록시) |
|
||||||
|
|
||||||
## Lotto Lab
|
---
|
||||||
|
|
||||||
- 최신 로또 결과 조회
|
## 페이지 구성
|
||||||
- 추천 번호 생성 (가중치/최근 회차/회피 수 등 파라미터 반영)
|
|
||||||
- 프리셋 파라미터로 빠른 추천 생성
|
### Home (`/`)
|
||||||
|
|
||||||
|
개인 아카이브 허브.
|
||||||
|
|
||||||
|
- 전체 페이지 네비게이션 카드 그리드
|
||||||
|
- 최근 업데이트 및 할 일 목록 미리보기
|
||||||
|
- 사이트 소개 및 최신 활동 요약
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blog (`/blog`)
|
||||||
|
|
||||||
|
마크다운 기반 개인 블로그.
|
||||||
|
|
||||||
|
- `src/content/blog/` 폴더의 마크다운 파일 자동 목록화
|
||||||
|
- 태그 기반 카테고리 분류 및 필터링
|
||||||
|
- 목록 / 본문 분리 UI, 페이지네이션 지원
|
||||||
|
- 인라인 스타일(링크, 강조, 코드, 이미지) 렌더링
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Lotto (`/lotto`)
|
||||||
|
|
||||||
|
로또 번호 추천 및 통계 실험실.
|
||||||
|
|
||||||
|
- 최신 로또 당첨 결과 조회
|
||||||
|
- 가중치·최근 회차·회피 수 파라미터 기반 번호 추천
|
||||||
|
- 프리셋으로 빠른 추천 생성
|
||||||
- 추천 히스토리 목록 확인 및 삭제
|
- 추천 히스토리 목록 확인 및 삭제
|
||||||
- 번호 복사 기능
|
- 번호 원클릭 복사
|
||||||
- API 스펙 다운로드 링크 제공 (`public/lotto-api.md`)
|
|
||||||
|
|
||||||
## 여행 기록 (Travel Archive)
|
---
|
||||||
|
|
||||||
|
### Stock (`/stock`)
|
||||||
|
|
||||||
|
주식 시장 모니터링 대시보드.
|
||||||
|
|
||||||
|
- KOSPI, KOSDAQ, 나스닥, S&P500 등 주요 지수 현황
|
||||||
|
- Fear & Greed 지수 및 VIX 변동성 지표 시각화
|
||||||
|
- 미국 10년물 금리, WTI/Brent 유가 등 매크로 지표
|
||||||
|
- 국내 / 해외 주식 뉴스 탭 분류 및 필터링
|
||||||
|
|
||||||
|
### Stock Trade (`/stock/trade`)
|
||||||
|
|
||||||
|
포트폴리오 관리 및 트레이딩 데스크.
|
||||||
|
|
||||||
|
- **포트폴리오 탭**: 보유 종목 수익률, 자산 구성 차트 (파이/바 차트)
|
||||||
|
- **AI 탭**: AI 시장 분석 요약 및 투자 인사이트
|
||||||
|
- **리포트 탭**: 자산 스냅샷 히스토리 및 수익 추이
|
||||||
|
- 종목 추가/편집/삭제 CRUD
|
||||||
|
- 현금 잔고(예수금) 관리, 브로커별 분리
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Realestate (`/realestate`)
|
||||||
|
|
||||||
|
부동산 청약 통합 관리 — 청약 대시보드와 관심 단지 정보 두 화면으로 구성.
|
||||||
|
|
||||||
|
#### 청약 대시보드 (`/realestate`)
|
||||||
|
|
||||||
|
- **청약 목록 탭**: 관심 청약 카드 목록 + 상세 패널 (요건/일정/자금 섹션)
|
||||||
|
- **일정 탭**: 전체 청약 일정 타임라인 (청약 → 계약 → 중도금 → 잔금)
|
||||||
|
- **자금 탭**: 단지별 자금 계획 및 총합 분석
|
||||||
|
- 가점 계산 엔진 (무주택기간 최대 32점, 부양가족 최대 35점, 통장기간 최대 17점 = 84점 만점)
|
||||||
|
- 내 청약 조건 프로필 입력 및 단지별 요건 충족 여부 자동 비교
|
||||||
|
- 청약 유형 분류: 줍줍 / 특공 / 일반
|
||||||
|
- API 미구현 시 localStorage fallback으로 데이터 유지
|
||||||
|
|
||||||
|
#### 부동산 정보 (`/realestate/property`)
|
||||||
|
|
||||||
|
- 관심 아파트 단지 카드 그리드 + 지도 통합 뷰 (react-leaflet)
|
||||||
|
- 단지별 상태 마커: 청약예정 / 청약중 / 결과발표 / 완료
|
||||||
|
- D-day 카운트다운 및 우선순위 배지
|
||||||
|
- 평당가 비교 바 차트 (Recharts)
|
||||||
|
- 일정 탭: 전체 단지 청약 일정 타임라인
|
||||||
|
- 분석 탭: 단지별 평당가 비교표
|
||||||
|
- 모달 기반 단지 추가/편집 (단지명, 주소, 좌표, 평형, 분양가, 네이버 부동산 URL)
|
||||||
|
- 네이버 부동산 바로가기 링크 연동
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Travel (`/travel`)
|
||||||
|
|
||||||
|
여행 사진 갤러리.
|
||||||
|
|
||||||
- 지도 기반 지역 선택 (GeoJSON)
|
- 지도 기반 지역 선택 (GeoJSON)
|
||||||
- 선택한 지역의 사진 목록 로딩 및 캐시
|
- 선택 지역의 사진 목록 로딩 및 캐시
|
||||||
- 스크롤 기반 사진 추가 로딩 (chunked lazy load)
|
- 스크롤 기반 이미지 추가 로딩 (chunked lazy load)
|
||||||
- 썸네일/모달 뷰, 키보드/스와이프 네비게이션
|
- 썸네일 / 모달 뷰, 키보드 및 스와이프 네비게이션
|
||||||
- 앨범/파일 메타 정보 표시
|
- 앨범 및 파일 메타 정보 표시
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Lab (`/lab`)
|
||||||
|
|
||||||
|
실험적 UI/UX 효과 테스트 공간.
|
||||||
|
|
||||||
|
- Three.js 기반 실시간 3D 파티클 애니메이션 (1,500개 오브젝트)
|
||||||
|
- 호버 모드: 마우스 추적 및 자연스러운 흐름
|
||||||
|
- 오빗 모드: 클릭 시 나선형 궤도 회전
|
||||||
|
- 동적 스케일, 조명 효과
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Todo (`/todo`)
|
||||||
|
|
||||||
|
태스크 관리 보드.
|
||||||
|
|
||||||
|
- 칸반 레이아웃: 할 일 → 진행 중 → 완료
|
||||||
|
- 드래그 앤 드롭으로 상태 변경
|
||||||
|
- 태스크 추가/삭제, 완료 항목 일괄 정리
|
||||||
|
- 상태별 카운트 및 타임스탬프 표시
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 개발 환경
|
||||||
|
|
||||||
|
```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/subscription/items', { ... });
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user