퀴즈결과 페이지는 api를 호출하지 않습니다. (퀴즈 상세정보에 대한 api)

그래서 다음과 같은 문제가 있엇습니다.

퀴즈 풀다가 북마크 버튼 클릭 → 퀴즈 결과 페이지로 감 → 최신 북마크 결과 받아오지 못함

즉 풀때 북마크해놨는게 결과페이지보니 버튼이 다시 비활성화 되어있는 경험이 되어버립니다.

이를위해 북마크의 컴포넌트에 인자를 추가했습니다.

export const BookmarkIcon = ({
  quizId,
  isBookMarked,
  onBookmarkChange,
  size = 60,
}: BookmarkIconProps) => {
  const [localBookmarkState, setLocalBookmarkState] = useState(isBookMarked);

  const bookmarkMutation = usePostApi<void, { quizId: number; isBookMarked: boolean }>(
    `/quiz/bookmark/${quizId}`,
  );

  const handleClick = async (e: React.MouseEvent) => {
    e.stopPropagation();

    const newBookmarkState = !localBookmarkState;

    try {
      setLocalBookmarkState(newBookmarkState);

      await bookmarkMutation.mutateAsync({
        quizId,
        isBookMarked: newBookmarkState,
      });

      onBookmarkChange?.(quizId, newBookmarkState);
    } catch {
      setLocalBookmarkState(isBookMarked);
    }
  };

  return (
    <BookmarkBadge onClick={handleClick} $size={size}>
      <BookmarkImage
        src={localBookmarkState ? onBookmark : offBookmark}
        alt={localBookmarkState ? 'on bookmark' : 'off bookmark'}
        $size={size}
      />
    </BookmarkBadge>
  );
};

북마크 아이콘 컴포넌트는 위와 같습니다.

여기서 onBookmarkChange라는 함수를 상위컴포넌트에서 설정할 수 있게 만들었습니다. 이는 다른 상황에서는 사용하지 않지만, QuizSolvePage에서 필요한 요소가 됩니다.

const handleBookmarkChange = (quizId: number) => {
    queryClient.invalidateQueries({ queryKey: ['quiz', String(quizId)] });
  };

//사용하는 곳(퀴즈헤더안에 북마크아이콘 있음)
<QuizHeader
        questionOrder={questionOrder}
        questionText={questionTitle}
        difficultyLevel={difficultyLevel}
        quizId={quizData.quizId}
        isBookMarked={quizData.isBookmarked}
        onBookmarkChange={handleBookmarkChange}
      />

QuizSolvePage에서 다음과 같은 함수를 만들고 연결했습니다.

즉, 퀴즈푸는페이지에서 북마크 버튼을 누르면 바로 새로운 데이터를 받아오게 하였습니다.

이를 통해, 북마크 버튼을 누르면 그 다음 페이지에서도 새로운 북마크 결과가 반영되게 됩니다.