[Task] 학습 진행률 바 및 상태 관리

[DDINGJOO]

상위 Story

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

목표

학습 진행률 바 표시 및 학습 세션 상태 관리

화면 구성

← 뒤로    오늘의 학습 (23/55)          [🔊 자동재생 ON]
━━━━━━━━━━━━━━━━━━━━━━━░░░░░░░░░░░░░  42%

상태 관리 (useFlashCard 훅)

const useFlashCard = (words) => {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isFlipped, setIsFlipped] = useState(false)
  const [learnedWords, setLearnedWords] = useState([])
  const [autoPlay, setAutoPlay] = useState(false)
  
  const progress = (learnedWords.length / words.length) * 100
  const currentWord = words[currentIndex]
  const isCompleted = learnedWords.length === words.length
  
  const handleAnswer = async (isCorrect) => { ... }
  const handleFlip = () => setIsFlipped(!isFlipped)
  const handleSkip = () => { ... }
  
  return { ... }
}

MUI 컴포넌트

• LinearProgress (진행률 바)
• IconButton (자동재생 토글)
• Typography

완료 조건

• useFlashCard 커스텀 훅 구현
• 진행률 바 컴포넌트 구현
• 현재 단어 인덱스 관리
• 자동재생 토글 기능

[github-actions]

Closed by PR #101