SIGMA
Signals & Indicators for Global Market Analysis — 환율 · 원자재 · 주가지수 · 개별 종목 · 금리 등 주요 시장 지표를 한눈에 보는 실시간 대시보드.
- Next.js (App Router) + TypeScript, 외부 UI 라이브러리 없음
- 데이터: Yahoo Finance 차트 API (API 키 불필요),
/api/quotes에서 서버 측 조회. 한글 종목 검색은 네이버 증권 자동완성 사용
- Vercel CDN 캐시 (1일 30초 ~ 장기 1시간,
lib/ranges.ts) + 클라이언트 30초 자동 갱신
- 기간 선택: 1일 · 1주 · 1년 · 3년 · 10년 (등락은 기간 시작 대비)
- 구간 확대: 1주는 일별, 1년·3년은 주별, 10년은 연도별로 골라 해당 구간만 더 촘촘한 데이터로 보기
- 토·일(거래소 현지 시각 기준) 데이터는 제외하고, 차트에서도 주말 구간을 접어서 표시
- 직접 비교: 카테고리와 상관없이 최대 8개 자산을 골라 한 그래프로 비교 (예: 삼성전자 vs 코스피 vs 애플)
- 개별 종목 추가: 웹에서 한글명 · 영문명 · 종목코드로 검색해 추가 (예: 엔비디아, 000660, toyota). 목록은 브라우저에 저장
- 장외 시세: 미국 개별 주식은 프리 · 애프터마켓 시세를 차트에 점선으로 표시하고 카드에 시간외 가격 표시
- 화면 상태(카테고리 · 기간 · 보기 · 구간 · 비교 자산)가 URL에 남아 공유 · 즐겨찾기 · 뒤로 가기 가능
- 비교 보기: 같은 카테고리 자산을 기간 시작 대비 등락률(%)로 한 그래프에 겹쳐 비교 (범례 클릭으로 숨김, 등락 폭 차이가 크면 로그 축)
- 한국식 색상 표기 (상승 빨강 / 하락 파랑), 다크 모드 · 모바일 대응
로컬 실행
npm install
npm run dev # http://localhost:3000
테스트
npm test # 단위 + E2E (프로덕션 빌드 후 실행, 시세 API는 모킹)
npm run test:unit # 단위 테스트만
로컬에서는 설치된 Chrome을 사용합니다. GitHub Actions가 push · PR마다 같은 테스트를 실행합니다.
지표 추가/변경
lib/symbols.ts의 SYMBOLS 배열에 Yahoo Finance 티커를 추가하면 됩니다 (예: 삼성전자 005930.KS, 애플 AAPL). 비교 차트 색상이 8개라 한 카테고리에는 8개까지 넣을 수 있습니다.
배포
- GitHub에 저장소를 만들고 push
- https://vercel.com/new 에서 해당 저장소 Import → Deploy (설정 변경 불필요)
시세는 거래소 사정에 따라 지연될 수 있으며 투자 판단의 근거로 사용할 수 없습니다.
