CloudStock/한국 히트맵 검토

> [[CloudStock]] 작업공간 문서. 한국장 대시보드에 시장 히트맵을 넣을 수 있는지에 대한 가능성 조사.
> 결론: **기술적으로 가능하나 색상 관례 충돌이 핵심 제약**.
> **결정·적용**: 사용자가 방안 A(TradingView KOSPI200) 채택 → PR #52 에서 적용 완료. 색상 혼동 방지용 안내 문구를 히트맵 헤더에 명시.

## 배경

미국 대시보드(`/us`)에는 TradingView Stock Heatmap 위젯이 들어가 있다(`src/components/Heatmap.astro` + `src/scripts/heatmap.ts`, `dataSource: "NASDAQ100"`). 한국 대시보드(`/`)에 같은 형태의 히트맵을 적용할 수 있는지 조사했다.

## 방안 A — TradingView Stock Heatmap 위젯 재사용 (드롭인)

미장 히트맵과 동일한 위젯에 데이터소스만 한국으로 바꾸는 방법.

- **가능**: TradingView 가 `KRX:KOSPI200` 데이터를 제공하며, Stock Heatmap 위젯은 인덱스 단위 `dataSource` 를 받는다. `dataSource: "KOSPI200"`, `grouping: "sector"`, `blockSize: "market_cap_basic"`, `blockColor: "change"` 로 미장 히트맵과 같은 구성을 만들 수 있다.
- **구현 비용**: 매우 낮음. `Heatmap.astro`/`heatmap.ts` 를 일반화(또는 KR 전용 복제)해 `dataSource` 만 바꾸면 된다. 별도 백엔드/데이터 수집 불필요(위젯이 자체 데이터를 가져옴).

### ⚠️ 핵심 제약 — 색상 관례 충돌

- TradingView 히트맵은 **상승=초록 / 하락=빨강(미국식)** 으로 고정이며, 색을 반전(상승=빨강)하는 옵션이 **없다**.
- 반면 한국 대시보드의 나머지 UI(전 섹터 등락률 바 `renderBars`, 섹터 카드 등)는 **상승=빨강 / 하락=파랑(한국식, `--up`/`--down` CSS 변수)** 을 쓴다.
- 따라서 같은 화면 안에서 히트맵만 색이 정반대로 동작 → 사용자 혼란 우려. 이게 방안 A의 유일하지만 결정적인 단점.

### 기타 참고
- 위젯 종목 수: KOSPI200(200종목)은 NASDAQ100(100종목)보다 블록이 많아 모바일에서 더 빽빽하다. `grouping: "sector"` + 높이 조정으로 완화 가능.
- 라이트/다크 테마: 미장 히트맵처럼 `themechange` 이벤트로 `colorTheme` 재렌더하면 됨(기존 패턴 재사용).

## 방안 B — 자체 데이터 기반 커스텀 히트맵

D1 에 이미 수집 중인 KR 섹터/종목 등락률(`/api/snapshot/kr` 의 `allSectors`·대표주, 또는 비교차트용 종목군)로 직접 히트맵을 그린다.

- **장점**: 색상을 한국식(상승=빨강/하락=파랑)으로 완전 제어. 나머지 UI 와 일관. 외부 위젯 의존/로딩 없음.
- **단점**: 구현 비용 높음(타일 레이아웃·treemap 크기 계산·반응형). 시가총액 기반 블록 크기를 쓰려면 종목별 시총 데이터가 추가로 필요(현재 스냅샷엔 섹터 등락률·대표주 위주). 사실상 섹터 단위 등락률 타일맵(현재 막대 차트의 변형) 수준이 현실적.

## 권고

1. **간단·저비용**으로 시각 효과만 원하면 방안 A(TradingView KOSPI200)를 적용하되, "이 히트맵은 글로벌(미국식) 색상 — 초록=상승" 안내 문구를 헤더에 명시해 색 혼동을 방지한다.
2. **색상 일관성**이 한국 사용자 경험에 중요하다고 판단하면 방안 A 는 부적합. 방안 B(자체 섹터 등락률 타일맵)를 별도 작업으로 검토한다. 다만 이는 기존 "전 섹터 등락률 막대"와 정보가 상당 부분 겹치므로 추가 가치가 제한적일 수 있다.

> 현재 상태: **적용 완료**. PR #51 에서 가능성 조사·기록 → 사용자가 방안 A 채택 → PR #52 에서 KOSPI200 TradingView 히트맵을 한국 대시보드(`/`)의 `KrBoard` 다음에 추가. `Heatmap.astro`/`heatmap.ts` 를 `dataSource`/`title`/`note` prop 으로 일반화해 US(NASDAQ100)/KR(KOSPI200) 가 같은 컴포넌트를 재사용한다. 히트맵 헤더에 "글로벌(미국식) 색상 — 초록=상승" 안내 문구를 명시.