[Story] 학습 통계 기능 구현

[DDINGJOO]

상위 Epic

• [Epic] 단어 암기 서비스 구현 #57 [Epic] 단어 암기 서비스 구현

목표

학습 통계 및 분석 페이지 구현 (/vocab/stats)

화면 구성

┌─────────────────────────────────────────────────────────────┐
│  ← 뒤로              학습 통계                              │
├─────────────────────────────────────────────────────────────┤
│  📊 전체 현황                                                │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐       │
│  │ 학습 단어 │ │ 정확도   │ │ 시험횟수  │ │ 연속학습  │       │
│  │   150    │ │  83.3%  │ │   15회   │ │  25일    │       │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘       │
│                                                             │
│  📈 학습 상태 분포 (도넛/바 차트)                            │
│  ░░ NEW   ▓▓ LEARNING   ▓▓ REVIEWING   ▓▓ MASTERED         │
│                                                             │
│  📅 월간 학습 캘린더 (히트맵)                                │
│                                                             │
│  🎯 카테고리별 정확도 (수평 바 차트)                         │
│  DAILY 87%  |  BUSINESS 75%  |  ACADEMIC 67% ⚠️            │
│                                                             │
│  💡 AI 학습 조언                                             │
│  • ACADEMIC 카테고리 정확도가 낮습니다. 집중 학습 권장       │
└─────────────────────────────────────────────────────────────┘

사용 API

• GET /vocab/stats/{userId} - 전체 통계
• GET /vocab/stats/{userId}/daily - 일별 통계 (캘린더)
• GET /vocab/stats/{userId}/weakness - 약점 분석

차트 라이브러리

• Recharts 또는 MUI X Charts 사용 권장

하위 태스크

• StatsPage 컴포넌트 생성
• 통계 요약 카드 구현 (4개)
• 학습 상태 분포 차트 구현
• 월간 학습 캘린더 히트맵 구현
• 카테고리별 정확도 바 차트 구현
• AI 학습 조언 표시 컴포넌트
• 라우팅 설정 (/vocab/stats)

완료 조건

• 전체 통계 요약 표시
• 학습 상태 분포 차트 렌더링
• 월간 캘린더 히트맵 표시
• 카테고리별 정확도 표시
• AI 조언 메시지 표시