AI 차트 컴포넌트

AI 분석 결과를 제품 UI에 바로 반영할 수 있도록 예측선, 비교 막대, 리스크 카드 샘플을 제공합니다.

AI 생성 프롬프트

새로운 대시보드 화면에 차트 UI를 처음 만들 때

신규 AI 차트 컴포넌트 생성

너는 시니어 프론트엔드 엔지니어다.
React + TypeScript + CSS modules(또는 Tailwind) 기준으로 AI 차트 컴포넌트를 설계/구현해줘.

[요구사항]
1) 차트 타입: line, bar, donut, radar, heatmap
2) 공통 props:
   - title: string
   - description?: string
   - data: number[] | Record<string, number>
   - labels?: string[]
   - onPointHover?: (payload) => void
3) 접근성:
   - aria-label, 키보드 포커스, 색상 대비 준수
4) 기능:
   - legend 토글
   - tooltip
   - empty/loading state
5) 결과물:
   - 컴포넌트 코드
   - 타입 정의
   - 사용 예제
   - 성능/확장 포인트 설명
이미 만든 차트에 구조화/재사용성을 올릴 때

기존 차트 컴포넌트 개선

현재 차트 코드를 리팩터링해줘.

[개선 목표]
- 차트별 중복 로직 제거
- Tooltip/Legend/Theme를 공통 훅으로 분리
- 데이터 변환 유틸 분리 (linePath, radarPath, arcPath)
- 반응형 레이아웃 개선
- 테스트 가능한 구조로 함수 분리

[출력 형식]
1) 문제점 진단 5개
2) 리팩터링 후 파일 구조
3) 핵심 코드 diff 형태
4) 테스트 시나리오 5개
차트를 하드코딩이 아닌 API 데이터로 연결할 때

실데이터/API 연동 프롬프트

다음 차트 화면을 실데이터와 연동해줘.

[환경]
- Next.js App Router
- /api/analytics endpoint 제공
- 응답: { series: number[], labels: string[], summary: { ... } }

[요구사항]
1) 서버 fetch + 캐싱 전략 제안
2) 로딩/에러/재시도 UX 구현
3) 데이터 검증(zod) 추가
4) 값 이상치(outlier) 강조 표시
5) 컴포넌트 props와 API 모델 매핑 표 제공

최종적으로 page.tsx 예시와 chart component 예시를 함께 작성해줘.

샘플 데이터 편집

전환율 예측

최근 7일 AI 인사이트
D1
D2
D3
D4
D5
D6
D7
AI 요약

핵심 지표 변화

상향 추세가 유지되고 있습니다.

추천 액션

다음 실험

상위 변동 구간을 대상으로 A/B 실험을 실행해 원인 가설을 검증하세요.

주의 포인트

리스크 감시

주말 트래픽 구간에서 변동성이 높아 임계치 재조정이 필요합니다.