AI 분석 결과를 제품 UI에 바로 반영할 수 있도록 예측선, 비교 막대, 리스크 카드 샘플을 제공합니다.
너는 시니어 프론트엔드 엔지니어다. 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개
다음 차트 화면을 실데이터와 연동해줘.
[환경]
- 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 예시를 함께 작성해줘.상향 추세가 유지되고 있습니다.
상위 변동 구간을 대상으로 A/B 실험을 실행해 원인 가설을 검증하세요.
주말 트래픽 구간에서 변동성이 높아 임계치 재조정이 필요합니다.