[Task] 시험 진행 상태 관리 (타이머, 현재 문제)

[DDINGJOO]

상위 Story

• [Story] 단어 시험 기능 구현 #61 [Story] 단어 시험 기능 구현

목표

시험 진행 상태 관리 및 타이머 기능 구현

화면 구성

문제 8 / 20                               남은시간 04:32
━━━━━━━━━━━━━━━━━━━━░░░░░░░░░░░░░░░░  40%

상태 관리 (useTest 훅)

const useTest = () => {
  const [testId, setTestId] = useState(null)
  const [questions, setQuestions] = useState([])
  const [currentIndex, setCurrentIndex] = useState(0)
  const [answers, setAnswers] = useState({})
  const [timeRemaining, setTimeRemaining] = useState(0)
  const [isSubmitting, setIsSubmitting] = useState(false)
  
  const startTest = async (options) => {
    const response = await testService.start(userId, options)
    setTestId(response.data.testId)
    setQuestions(response.data.questions)
    setTimeRemaining(options.wordCount * 30) // 문제당 30초
  }
  
  const selectAnswer = (questionId, answer) => { ... }
  const nextQuestion = () => { ... }
  const prevQuestion = () => { ... }
  const submitTest = async () => { ... }
  
  return { ... }
}

타이머 로직

• 1초마다 감소
• 0초 도달 시 자동 제출
• 분:초 형식 표시

MUI 컴포넌트

• LinearProgress
• Typography
• Chip (타이머)

완료 조건

• useTest 커스텀 훅 구현
• 타이머 기능 구현
• 문제 이동 (이전/다음)
• 답안 저장 로직

[github-actions]

Closed by PR #102