ReadRiddle 개발기 - 3

구현 사항

• 폼 형식 퀴즈 개발
• 퀴즈 Summary 요약 화면 제공
• 채팅 퀴즈에 API 연결

---

Trouble Shooting 1

문제 : 개별 피드백 화면 연결 못함 문제

원인 : 로직의 복잡성 때문에 프론트에서의 처리에 불편함을 겪었음
과거 개별 피드백 요청 시에 피드백만 나오는 구조였으며 애초에 질문을 생성할 때 모든 선지와 정답을 갖고 있어야 했음

해결 플로우 :

• 개별 피드백 요청 시에만 response에서 정답을 가져옴
• 가시적으로 정답 여부를 표현하기 위해 배경 색으로 정답 구분

해결 코드 1

API 연결

const detail_response = await quizApiRequest.get(`/feedback/detail/${session_no}/`);
      const quizes = detail_response.data;

      const selectedAnswers = quizes.reduce((acc, quiz) => {
        const questionNumber = quiz.question.number;
        const correctChoice = quiz.choice.find(choice => choice.is_correct);

        acc[questionNumber] = correctChoice ? correctChoice.number : null;
        return acc;
      }, {});

      const userPreviousAnswers = quizes.reduce((acc, quiz) => {
        const questionNumber = quiz.question.number;
        acc[questionNumber] = quiz.user_answer?.selected_choice?.number || null;
        return acc;
      }, {});

      const userFeedbackDetails = quizes.reduce((acc, quiz) => {
        const questionNumber = quiz.question.number;
        acc[questionNumber] = quiz.feedback?.feedback || null;
        return acc;
      }, {});

      setHighlightedAnswers(selectedAnswers);
      setPreviousAnswers(userPreviousAnswers);
      setFeedbackDetails(userFeedbackDetails);

정답 여부 확인 코드

  const isCorrected = (quizNumber, choiceNumber) =>
    isHighlighted(quizNumber, choiceNumber) && isPreviousAnswer(quizNumber, choiceNumber);

  const isHighlighted = (quizNumber, choiceNumber) =>
    highlightedAnswers[quizNumber] === choiceNumber;

  const isPreviousAnswer = (quizNumber, choiceNumber) =>
    previousAnswers[quizNumber] === choiceNumber;

---

Trouble Shooting 2

문제 : 채팅형 퀴즈에서 옵션값 변경 오류 해결 (동기성 문제)

원인 : 컴포넌트 끼리의 연결에서 바뀐 값을 동기화가 안됨, const 로는 보장되지 않는 동기성 문제가 있음

해결 플로우 :

• 컴포넌트끼리의 연결은 useEffect로 동기화 적용해줌
• const의 동기성 문제는 버튼을 통해 동기화 적용해줌

컴포넌트 연결

   useEffect(() => {
      setCurrentCategory(category);
  }, [category]);

  useEffect(() => {
      setCurrentTitleNo(title_no);
  }, [title_no]);

const 동기성 문제
문제 코드

const selectTitle = (titleText, titleId) => {
      setSelectedTitle(titleText);
      setSelectedTitleIndex(titleId);
      handleSummary(); 

해결 코드

              <GenerateButtonContainer>
                        <GenerateQuizButton onClick={handleSummary}>
                          <AiOutlineReload 
                            size={24} 
                            style={{
                              cursor: 'pointer',
                              marginRight: '10px', 
                              color: '#ffffff', 
                            }} 
                          />
                          Generate Summary
                        </GenerateQuizButton>
                      </GenerateButtonContainer>