[Story] 일일 학습 (플래시카드) 구현

[DDINGJOO]

상위 Epic

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

목표

플래시카드 기반 일일 단어 학습 페이지 구현 (/vocab/daily)

화면 구성

┌─────────────────────────────────────────────────────────────┐
│  ← 뒤로    오늘의 학습 (23/55)          [🔊 자동재생 ON]   │
├─────────────────────────────────────────────────────────────┤
│  ━━━━━━━━━━━━━━━━━━━━━━━░░░░░░░░░░░░░  42%                 │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                    hypothesis                        │   │
│  │                      [🔊]                            │   │
│  │         I have a hypothesis about this.             │   │
│  │           ─────────── 탭하여 뜻 보기 ───────────     │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  ┌──────────────────┐      ┌──────────────────┐            │
│  │    ❌ 모르겠어요   │      │    ✅ 알고있어요    │            │
│  └──────────────────┘      └──────────────────┘            │
│                                                             │
│  [⭐ 북마크]  [📝 어려움 표시]  [⏭️ 건너뛰기]               │
└─────────────────────────────────────────────────────────────┘

인터랙션

• 카드 탭/클릭 → 뜻 공개 (flip 애니메이션)
• "모르겠어요" → PUT /vocab/users/{userId}/words/{wordId} (isCorrect: false)
• "알고있어요" → PUT /vocab/users/{userId}/words/{wordId} (isCorrect: true)
• 스와이프 지원 (선택적)

사용 API

• GET /vocab/daily/{userId} - 오늘 학습 단어 조회
• PUT /vocab/users/{userId}/words/{wordId} - 정답/오답 업데이트
• PUT /vocab/users/{userId}/words/{wordId}/tag - 북마크/난이도
• POST /vocab/voice/synthesize - TTS 발음

하위 태스크

• DailyLearning 페이지 컴포넌트 생성
• FlashCard 컴포넌트 구현 (flip 애니메이션)
• 진행률 바 컴포넌트 구현
• 정답/오답 버튼 및 API 연동
• TTS 재생 기능 연동
• 북마크/난이도 태그 기능 구현
• 학습 완료 화면 구현
• 라우팅 설정 (/vocab/daily)

완료 조건

• 55개 단어 순차 학습 가능
• 카드 플립 애니메이션 동작
• 정답/오답 시 다음 카드로 이동
• 학습 완료 시 결과 요약 표시