기존 퀴즈 url 구조는 문제가 있는것 같습니다.

/quizList/:topicId
/quizSolve/:quizId
/quizResult/:quizId

이렇게 되면, 퀴즈 풀이와 결과 페이지에서는 topicId에 대한 정보가 사라집니다. 즉 사용자가 어떤 토픽인지 퀴즈를 풀기 시작하면 url에서 알 방법이 없습니다.

이렇게 되면, 퀴즈 결과 페이지에서 토픽에 대한 정보가 필요할때, api 호출을 하거나 이전페이지에서 넘겨준 정보가 아닌 이상 api 호출을 중복해서 불필요한 호출이 필요한 상황이됩니다.

또한 RESTful 원칙에 위반되기도 합니다.

const handleNextQuestion = () => {
    const nextPath = getNextQuizPath(Number(topicId), nextQuiz?.quizId || null);
    navigate(nextPath);
  };

지금 결과페이지에서 다음 문제로 가는 로직을 다음과 같이 작성했는데,

topicId는도 location.state에서 받아온 데이터이고, 만약 state가 없거나 quizData가 없으면 에러가 발생할 수 있는 요소입니다.

큰 문제가 아니라고 할 수 있으나, url에 topicId가 있는게 사용자 경험으로나 성능이나 안정성적으로나 더 좋을 것 같습니다.

---

해결

/topics

/topics/:topicId/quizzes

/topic/:topicId/quizzes/:quizId

/topics/:topicId/quizzes/:quizId/result

와 같이 변경하였습니다.

const { topicId } = useParams<{ topicId: string }>();

// 더 이상 quizData에서 topicId를 추출할 필요 없음
const { data: quizListData } = useQueryApi<QuizListResponse>(
  ['topics', topicId || ''],
  `/topics/${topicId || ''}`,
);

이렇게 변경되면, 단순하게 useParams로 topicID를 가져와서

location.state에 의존되지 않고

에러를 방지합니다

또한 seo에도 도움이 되고, 사용자 경험, 그리고 개발자 경험(백엔드와 경로 유사) 도 좋아질 것 같습니다.