Recharts Quick Chart

Recharts Quick Chart — 실전 적용 구조와 코드 예시

언제 쓰나 · 대시보드에 "작지만 쓸모 있는" 차트(시계열 바/파이/라인)를 빠르게 붙이고 싶을 때 · 무거운 시각화 라이브러리(D3, echarts)를 풀 설치할 필요는 없고 React-친화 선언형 API면 충분할 때 · 차트 bar 클릭 등 이벤트로 상위 필터/상태와 양방향 연결하고 싶을 때

# Recharts Quick Chart

## 언제 쓰는가
- 대시보드에 "작지만 쓸모 있는" 차트(시계열 바/파이/라인)를 빠르게 붙이고 싶을 때
- 무거운 시각화 라이브러리(D3, echarts)를 풀 설치할 필요는 없고 React-친화 선언형 API면 충분할 때
- 차트 bar 클릭 등 이벤트로 상위 필터/상태와 양방향 연결하고 싶을 때

## 핵심 구조
- **개별 import**: `import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, CartesianGrid } from 'recharts'` — 번들 tree-shaking 효과
- **ResponsiveContainer 필수**: 부모가 명시 height 가진 컨테이너 안에 넣고 `<ResponsiveContainer width="100%" height="100%">` 로 감쌈
- **데이터는 배열**: `[{ date, resolved, unresolved }, ...]` 형태. 상단에서 `useMemo`로 집계
- **버킷 단위 전략**: 기간이 길면 주 단위, 짧으면 일 단위 — 컨테이너에서 자동 판정해 prop으로 내림
- **스택바**: 같은 `stackId="a"` 를 주면 한 막대 안에 여러 값이 적층됨
- **다크 스타일 Tooltip**: `contentStyle` prop에 배경/테두리/폰트 지정
- **이벤트 훅**: `<BarChart onClick={e => e.activeLabel && onSelect(e.activeLabel)}>` 로 클릭한 X축 값을 상위에 전달

## 코드 예시
```jsx
import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, CartesianGrid } from 'recharts'

export default function TimelineChart({ data, onBucketSelect }) {
  return (
    <div className="h-56">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} onClick={(e) => e?.activeLabel && onBucketSelect?.(e.activeLabel)}>
          <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
          <XAxis dataKey="date" stroke="#9ca3af" fontSize={10} />
          <YAxis stroke="#9ca3af" fontSize={10} allowDecimals={false} />
          <Tooltip contentStyle={{ background: 'rgba(20,20,25,0.95)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8, fontSize: 11 }} />
          <Legend wrapperStyle={{ fontSize: 11 }} />
          <Bar dataKey="unresolved" stackId="a" fill="#fbbf24" name="Unresolved" />
          <Bar dataKey="resolved"   stackId="a" fill="#34d399" name="Resolved" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}
```

## 주의사항
- **번들 크기**: recharts는 d3를 일부 포함해 300~500KB 수준 기여. SPA에서 차트가 많지 않다면 dynamic import / code-split 권장
- **ResponsiveContainer 없이 고정 width/height 주면** 반응형이 깨지기 쉽다
- **Y축 정수 라벨**: 소수점이 필요 없는 카운트 데이터는 `allowDecimals={false}`
- **X축이 날짜 문자열**일 때 정렬이 알파벳 기준. ISO 형식(YYYY-MM-DD)으로 두면 문자열 정렬 = 날짜 정렬
- **onClick 이벤트 타입 불안정**: `e.activeLabel`, `e.activePayload` 등이 undefined 일 수 있으니 optional chaining 필수
- **스택 순서**: Bar 정의 순서가 아래 → 위. 시각적 중요도가 높은 항목을 아래로

## 재사용 방법
1. `npm i recharts` (^2.x)
2. 위 코드 스니펫을 복사, `dataKey`/`fill`/`name`만 바꿈
3. 컨테이너에서 `useMemo`로 버킷 집계한 배열을 `data` prop으로 전달
4. 다크/라이트 테마는 `stroke`, `fill`, `contentStyle`의 색상 토큰을 프로젝트 theme 변수로 치환
5. 참고 구현: `Obsidian_manage/src/components/growth/patterns/PatternTimelineChart.jsx`