초기 예상한 데이터 구조는, 각 항목별 choiceId라는 속성이 존재한다고 가정했습니다.

그러나 실제 API응답데이터 구조는 다음과 같았습니다.

{
  "quizId": 94,
  "questionTitle": "다음 중 '소형테마주(잡주)'에 해당하는 특징은?",
  "questionType": "MULTIPLE_CHOICE",
  "questionData": {
    "choices": [
      {
        "text": "시총이 크고 거래량 많음",
        "correctAnswer": false
      },
      {
        "text": "재무구조 탄탄함", 
        "correctAnswer": false
      },
      {
        "text": "급등락 심하고 정보 부족",
        "correctAnswer": true
      },
      {
        "text": "배당금 지급 확실함",
        "correctAnswer": false
      }
    ]
  },
  "difficultyLevel": "MEDIUM",
  "explanation": "잡주는 기업 규모가 작고, 정보가 부족하며, 가격 변동성이 커 투기성 매매 대상이 되는 종목이다.",
  "questionOrder": 28,
  "correctRate": 0.00,
  "topicId": 2,
  "topicName": "주식투자"
}

배열값으로 넘어오기에, 인덱스로 식별해야 한다고 판단할 수 있습니다.

기존에는 각 데이터에 대해 map 함수의 key값을 choiceId로 고려하고 있었습니다.

{questionData.choices?.map((choice) => (
  <QuestionButton
    key={choice.choiceId}                    
    text={choice.text}
    isSelected={selectedAnswer === choice.choiceId} 
    onClick={() => handleAnswerSelect(choice.choiceId)} 
  />
))}

이에 , 타입정의 부터 코드를 수정하기 시작했습니다.

export interface QuizData {
  questionData: {
    correctAnswer?: boolean;
    choices?: {
      text: string;
      correctAnswer: boolean;
    }[];
  };
}

export interface QuizResultState {
  selectedAnswer: string | boolean | number; 
  isCorrect: boolean;
  quizData: QuizData;
}

selectedAnswer값을 인덱스로 구분하기 위해서, number타입이 가능하게 넣었습니다.

{questionData.choices?.map((choice, index) => (
  <QuestionButton
    key={index}                              // 배열 인덱스 사용
    text={choice.text}
    isSelected={selectedAnswer === index}   // 인덱스로 비교
    onClick={() => handleAnswerSelect(index)} // 인덱스 전달
  />
))}

그리고 다음과 같이, 배열 인덱스를 기반으로 순회하도록 했고, 선택을 했을 때 넘겨주는 값도 인덱스 값을 넘어주게 구현했습니다.

const checkAnswer = (selectedAnswer: string | boolean | number, quizData: QuizData): boolean => {
  if (quizData.questionType === 'OX') {
    return selectedAnswer === quizData.questionData.correctAnswer;
  } else if (quizData.questionType === 'MULTIPLE_CHOICE') {
    const choiceIndex = selectedAnswer as number;
    return quizData.questionData.choices?.[choiceIndex]?.correctAnswer === true; 
  }
  return false;
};

정답확인 코드도, 넘겨준 인덱스 값의 correctAnswer속성이 true인지를 확인하는 로직으로 수정하였습니다.

또한 이 인덱스값을 결과페이지에 location.state로 전달하고, 결과페이지에서도 인덱스로 직접 접근하여 비교하도록 수정하였습니다.