차트 및 데이터 시각화

차트 및 데이터 시각화은(는) 무엇을 하나요?

규칙

• React 프로젝트에는 Recharts 사용 — 구성 가능, 반응형, 타입 지원
• 차트는 <ResponsiveContainer width="100%" height={300}>로 감싸기 — 고정 픽셀 너비 사용 금지
• 접근 가능한 색상: 색맹 안전 팔레트 사용 (빨강/초록 구분에 의존하지 않음)
• 축 레이블: 항상 두 축에 레이블을 표시하고, 읽기 쉬운 숫자 형식 사용 (1200이 아닌 1.2K)
• 툴팁: 호버 시 정확한 값을 표시 — 단위 및 로케일 인식 숫자 형식 적용
• 로딩 상태: 데이터 로딩 중 스켈레톤 차트 표시
• 데이터 유형에 따른 차트 선택: 선 (시간 경과에 따른 추세), 막대 (비교), 영역 (볼륨), 원형 (전체 대비 비율 — 최대 5개 항목)
• 동적 데이터에 key prop 사용 — 데이터가 변경될 때 Recharts가 올바르게 재렌더링됨

금지 사항

• 3D 차트 — 인식을 왜곡하므로 항상 평면/2D 사용
• 5-6개 이상의 항목을 가진 원형 차트 — 대신 가로 막대 차트 사용
• 축 레이블이나 범례가 없는 차트 — 항상 맥락 제공
• 차트 컴포넌트 내부에서 데이터 가져오기 — 부모에서 데이터를 가져와 props로 전달