29. 퀴즈 풀기 페이지 분기처리 해결과정
2025년 10월 21일
이게머니
학습기록페이지 api 연동 후, 한가지 문제가 있었습니다.
학습기록페이지(오답노트, 방명록) 에서 칸을 클릭하면, 해당 퀴즈 푸는 페이지로 네비게이트 되는데,
퀴즈 결과 페이지의 기존 로직은
해당 토픽의 다음문제로 가는 다음 문제 버튼, 해당 토픽의 목록으로 가는 목록 가기 버튼이 있습니다.
하지만 학습 기록페이지 → 퀴즈 → 해당 토픽의 다음페이지? 는 로직이 이상합니다.
이에 퀴즈 결과 페이지에서 분기처를 진행했습니다.
먼저 퀴즈 풀기 페이지의 url을 이용하여 분기처를 진행했습니다.
url 형식은 다음과 같습니다.
/topics/${topicId}/quizzes/${quizId}
이에, 의도적으로
북마크에서 들어왔을 땐 topicId에 bookmark
오답노트에서 들어왔을 땐 review
라는 문자열을 넘겨줍니다.
const isRecordPage = topicId === 'review' || topicId === 'bookmark';
그리고 퀴즈 결과페이지에서 다음과 같이 boolean값을 받아서
const handleBackToList = () => { if (isRecordPage) { navigate('/record'); queryClient.invalidateQueries({ queryKey: ['learningRecord', 'review'] }); queryClient.invalidateQueries({ queryKey: ['learningRecord', 'bookmark'] }); } else { navigate(`/topics/${topicId}/quizzes`); queryClient.invalidateQueries({ queryKey: ['topics', topicId] }); } };
다음과 같이 분기처리 및
다음 문제 버튼과 마지막문제입니다 문구는 불린값을 통해 렌더링 여부를 결정하게 수정하였습니다.