[Task] FlashCard 컴포넌트 구현 (flip 애니메이션)

[DDINGJOO]

상위 Story

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

목표

플립 애니메이션이 적용된 플래시카드 컴포넌트 구현

화면 구성

앞면 (영어)
┌─────────────────────────────────────────────────────┐
│                                                      │
│                    hypothesis                        │
│                      [🔊]                            │
│         I have a hypothesis about this.             │
│                                                      │
│           ─────────── 탭하여 뜻 보기 ───────────     │
└─────────────────────────────────────────────────────┘

뒷면 (한국어)
┌─────────────────────────────────────────────────────┐
│                                                      │
│                      가설                            │
│               ADVANCED · ACADEMIC                    │
│                                                      │
└─────────────────────────────────────────────────────┘

구현 사항

• 카드 클릭/탭 시 Y축 180도 회전 애니메이션
• CSS transform: rotateY(180deg)
• transition: transform 0.6s ease

Props

{
  word: { wordId, english, korean, example, level, category },
  isFlipped: boolean,
  onFlip: () => void,
  onPlayTTS: () => void,
}

MUI 컴포넌트

• Card, CardContent
• Box (3D transform)
• Typography

완료 조건

• FlashCard 컴포넌트 구현
• 플립 애니메이션 동작
• 앞면/뒷면 콘텐츠 표시

[github-actions]

Closed by PR #101