[Task] TestQuestion 컴포넌트 (4지선다 문제)

[DDINGJOO]

상위 Story

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

목표

4지선다 형식의 시험 문제 컴포넌트 구현

화면 구성

┌─────────────────────────────────────────────────────┐
│                      사과                            │
│            다음 중 올바른 영어 단어는?               │
└─────────────────────────────────────────────────────┘

① apple    ② banana    ③ orange    ④ grape

Props

{
  question: {
    questionId: number,
    wordId: string,
    question: string,  // 문제 텍스트
    options: string[], // 4개 선택지
    type: 'KOREAN_TO_ENGLISH' | 'ENGLISH_TO_KOREAN'
  },
  selectedAnswer: string | null,
  onSelect: (answer: string) => void,
  showResult: boolean,
  correctAnswer: string,
}

상태

• 미선택: 기본 스타일
• 선택됨: primary 색상
• 결과 표시: 정답=초록, 오답=빨강

MUI 컴포넌트

• Paper, Card
• RadioGroup, Radio
• Typography

완료 조건

• TestQuestion 컴포넌트 구현
• 4개 선택지 표시
• 선택 상태 표시
• 결과 모드 (정답/오답 표시)

[github-actions]

Closed by PR #102