MA Touch Alert

선택한 종목의 캔들이 이동평균선에 가까워질 때 알려주는 웹 기반 모니터링 보드입니다.
서버가 감시 조건을 주기적으로 평가하고, 화면은 현재 상태와 차트만 가볍게 보여주도록 분리했습니다.

Why

단순 가격 알림은 많지만, 실제 매매 관찰에서는 “가격이 내가 보는 이동평균선 근처에 왔는지”, “정배열이 깨졌는지”, “시장 대표 지수가 같이 흔들리는지”를 한 화면에서 보고 싶었습니다.

이 프로젝트는 그 문제를 다음 기준으로 풀었습니다.

• 사용자가 고른 종목, 캔들 주기, 이동평균선만 감시한다.
• Yahoo Finance가 직접 제공하는 캔들만 사용하고, 임의 재집계 캔들은 만들지 않는다.
• 알림 판단은 서버가 맡고, 차트는 선택한 조건 하나만 그려 UI 렌더링이 감시 엔진을 방해하지 않게 한다.
• S&P 500, Nasdaq 100, Dow Jones는 항상 고정 감시해 개별 종목 신호를 시장 맥락 안에서 볼 수 있게 한다.

Features

• 종목별 이동평균선 터치 알림
• 지원 캔들: 1m, 2m, 5m, 15m, 30m, 60m, 1d, 1wk
• MA 기간 선택: 기본 20, 60, 120, 200
• 정배열, 역배열, 혼조 상태 판정
• 추세 이탈 감지: 정배열 이탈, 단기선 하향, 장기선 하향
• S&P 500(^GSPC), Nasdaq 100(^NDX), Dow Jones(^DJI) 고정 모니터링
• 선택한 감시 조건의 캔들 차트와 이동평균선 표시
• Slack Webhook 알림
• 브라우저 알림, 탭 제목 깜빡임, 소리 알림
• WebSocket 기반 실시간 이벤트 반영
• 모바일 대응 UI

Screenshots

Desktop	Mobile

Tech Stack

• Frontend: React, TypeScript, Vite
• Chart: TradingView Lightweight Charts
• Backend: Node.js, Express, WebSocket
• Validation: Zod
• Data source: Yahoo Finance chart endpoint
• Notification: Slack Incoming Webhook, Browser Notification API, Web Audio API
• Persistence: local JSON state file

Architecture

flowchart LR
  UI["React dashboard"] --> API["Express API"]
  API --> Store["data/state.json"]
  Engine["Alert engine"] --> Yahoo["Yahoo Finance chart data"]
  Engine --> Store
  Engine --> Slack["Slack webhook"]
  Engine --> WS["WebSocket broadcast"]
  WS --> UI
  API --> Chart["Chart payload with candles and MA series"]
  Chart --> UI

Loading

Alert Logic

1. 서버가 감시 조건별로 다음 확인 시간을 계산합니다.
2. Yahoo Finance에서 해당 심볼과 캔들 주기의 데이터를 가져옵니다.
3. 선택된 이동평균선을 계산합니다.
4. 최신 캔들의 고가/저가/종가가 이동평균선 근처에 있는지 판단합니다.
5. 배열 상태가 바뀌었거나 추세 이탈 기준에 걸리면 이벤트를 생성합니다.
6. 중복 알림과 쿨다운을 적용한 뒤 Slack, 브라우저, WebSocket으로 전달합니다.

Design Decisions

• 임의 캔들 재집계 제거
  10m, 4h처럼 Yahoo가 직접 제공하지 않는 주기는 만들지 않습니다. 알림 시스템에서는 데이터 신뢰성과 지연 관리가 더 중요하다고 판단했습니다.

• 서버 중심 감시 엔진
  브라우저 탭이 열려 있지 않아도 감시 로직이 돌아가도록 서버가 판단과 알림을 담당합니다.

• 차트는 선택 조건 1개만 렌더링
  감시 목록 전체에 차트를 그리지 않고, 사용자가 선택한 조건만 상세 차트로 보여줍니다.

• 시장 대표 지수 고정 감시
  개별 종목 신호를 볼 때 시장 전체 흐름을 같이 확인할 수 있도록 미국 대표 지수 3개는 삭제/비활성화할 수 없는 기준선으로 둡니다.

Getting Started

pnpm install
pnpm dev

개발 서버:

• UI: http://localhost:5173
• API: http://localhost:8787

프로덕션 빌드:

pnpm build
pnpm start

Environment Variables

PORT=8787
CLIENT_ORIGIN=http://localhost:5173
SLACK_WEBHOOK_URL=

SLACK_WEBHOOK_URL은 UI에서 저장할 수도 있습니다.

Symbol Format

Yahoo Finance 심볼을 사용합니다.

• 미국 주식: AAPL, TSLA, MSFT
• 한국 주식: 005930.KS, 035720.KQ
• 지수: ^GSPC, ^NDX, ^DJI

Project Notes

이 프로젝트를 만들며 정리한 문제 정의, 의사결정, 이력서용 문장은 docs/PORTFOLIO.md에 따로 정리했습니다.

Limitations

• Yahoo Finance 데이터는 실시간 틱 데이터가 아닙니다.
• 거래소별 지연, 누락, 심볼 지원 여부는 Yahoo Finance에 의존합니다.
• 이 앱은 투자 판단을 자동화하지 않고, 사용자가 정한 조건을 감시하고 알려주는 도구입니다.