refactor(react-query): react-query version up

.vscode/settings.json

@@ -2,8 +2,8 @@
   "eslint.validate": ["typescript", "typescriptreact"],
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "editor.formatOnSave": true
 }

next.config.js

@@ -3,8 +3,8 @@ const nextConfig = {
   images: {
     domains: [
       'source.unsplash.com',
-      'toks-api-quiz-image-dev-an2.s3.ap-northeast-2.amazonaws.com',
       'k.kakaocdn.net',
+      'image.tokstudy.com',
       'asset.tokstudy.com',
     ],
   },

package.json

@@ -15,7 +15,7 @@
     "deploy-storybook": "storybook-to-ghpages"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-query": "^5.17.9",
     "@tanstack/react-query-devtools": "^4.32.6",
     "@types/node": "20.4.1",
     "@types/react": "18.2.14",

src/app/nickname/hooks/useCreateNicknameForm.ts

@@ -58,38 +58,40 @@ export const useCreateNicknameForm = ({
     };
   }, []);
 
-  const { mutate: nicknameMutation } = useMutation(async () => {
-    const nickname = getValues('nickname');
-    // 먼저 쿠키 세팅을 해줘야 nickname patch 가능
-    if (accessToken && refreshToken) {
-      setCookie('accessToken', accessToken);
-      setCookie('refreshToken', refreshToken);
-    }
+  const { mutate: nicknameMutation } = useMutation({
+    mutationFn: async () => {
+      const nickname = getValues('nickname');
+      // 먼저 쿠키 세팅을 해줘야 nickname patch 가능
+      if (accessToken && refreshToken) {
+        setCookie('accessToken', accessToken);
+        setCookie('refreshToken', refreshToken);
+      }
 
-    try {
-      const res = await patchNickname(nickname);
-      if (res !== null) {
-        clearSavedToast();
-        saveToastInfo({
-          showOnNextPage: true,
-          isShow: true,
-          direction: 'bottom',
-          type: 'success',
-          title: '닉네임 설정을 완료하였어요.',
-        });
+      try {
+        const res = await patchNickname(nickname);
+        if (res !== null) {
+          clearSavedToast();
+          saveToastInfo({
+            showOnNextPage: true,
+            isShow: true,
+            direction: 'bottom',
+            type: 'success',
+            title: '닉네임 설정을 완료하였어요.',
+          });
 
-        pathName === '/nickname/update'
-          ? router.replace('/my-page')
-          : router.replace('/toks-main');
-      }
-    } catch (err: unknown) {
-      if (isToksError(err) && err.errorCode === 'DUPLICATED_NICKNAME') {
-        setError('nickname', { message: '이미 존재하는 닉네임입니다.' });
+          pathName === '/nickname/update'
+            ? router.replace('/my-page')
+            : router.replace('/toks-main');
+        }
+      } catch (err: unknown) {
+        if (isToksError(err) && err.errorCode === 'DUPLICATED_NICKNAME') {
+          setError('nickname', { message: '이미 존재하는 닉네임입니다.' });
+        }
+        // 에러 발생시 토큰 삭제
+        deleteCookie('accessToken');
+        deleteCookie('refreshToken');
       }
-      // 에러 발생시 토큰 삭제
-      deleteCookie('accessToken');
-      deleteCookie('refreshToken');
-    }
+    },
   });
 
   const isRequiredText = useCallback(() => '닉네임은 2-6글자여야 합니다.', []);

src/app/nickname/update/page.tsx

@@ -19,8 +19,11 @@ const UpdateNickname = () => {
     data: user,
     isSuccess,
     isLoading,
-  } = useQuery(QUERY_KEYS.GET_USER_INFO(accessToken), async () => {
-    return await getUserInfo();
+  } = useQuery({
+    queryKey: QUERY_KEYS.GET_USER_INFO(accessToken),
+    queryFn: async () => {
+      return await getUserInfo();
+    },
   });
 
   const {

src/app/quiz/hooks/useGetCommentListQuery.ts

@@ -6,17 +6,15 @@ import { QUERY_KEYS } from '@/app/quiz/constants/queryKeys';
 import { getCommentsByQuizId } from '@/app/quiz/remotes/comment';
 
 export const useGetCommentListQuery = (quizId: string) => {
-  return useQuery(
-    QUERY_KEYS.GET_COMMENT_LIST(quizId),
-    async () => {
+  return useQuery({
+    queryKey: QUERY_KEYS.GET_COMMENT_LIST(quizId),
+    queryFn: async () => {
       try {
         return await getCommentsByQuizId(quizId);
       } catch {
         throw new Error('퀴즈 댓글을 가져오는데 실패했습니다.');
       }
     },
-    {
-      select: ({ content }) => content,
-    }
-  );
+    select: ({ content }) => content,
+  });
 };

src/app/quiz/hooks/useGetQuizDetailQuery.ts

@@ -6,64 +6,62 @@ import { QUERY_KEYS } from '@/app/quiz/constants/queryKeys';
 import { getQuizDetailByQuizId } from '@/app/quiz/remotes/quiz';
 
 export const useGetQuizDetailQuery = (quizId: string) => {
-  return useQuery(
-    QUERY_KEYS.GET_QUIZ_DETAIL(quizId),
-    async () => {
+  return useQuery({
+    queryKey: QUERY_KEYS.GET_QUIZ_DETAIL(quizId),
+    queryFn: async () => {
       try {
         return await getQuizDetailByQuizId(quizId);
       } catch {
         throw new Error('퀴즈 상세 데이터를 가져오는데 실패했습니다.');
       }
     },
-    {
-      select: ({
-        quiz: {
-          title: quizTitle,
-          tags,
-          question: { imageUrl: oxImageUrl, buttons },
-          quizType,
-          description: oxDescription,
-          answer: oxAnswer,
-        },
-        category: { name: categoryName },
-        quizReply,
-        quizReplyCount: { totalCount, replyCount },
-        isSubmitted,
-      }) => {
-        const buttonLeft = buttons.A ?? buttons.O;
-        const buttonRight = buttons.B ?? buttons.X;
+    select: ({
+      quiz: {
+        title: quizTitle,
+        tags,
+        question: { imageUrl: oxImageUrl, buttons },
+        quizType,
+        description: oxDescription,
+        answer: oxAnswer,
+      },
+      category: { name: categoryName },
+      quizReply,
+      quizReplyCount: { totalCount, replyCount },
+      isSubmitted,
+    }) => {
+      const buttonLeft = buttons.A ?? buttons.O;
+      const buttonRight = buttons.B ?? buttons.X;
 
-        const answerCount = {
-          left: replyCount?.A?.count ?? replyCount?.O?.count ?? 0,
-          right: replyCount?.B?.count ?? replyCount?.X?.count ?? 0,
-        };
+      const answerCount = {
+        left: replyCount?.A?.count ?? replyCount?.O?.count ?? 0,
+        right: replyCount?.B?.count ?? replyCount?.X?.count ?? 0,
+      };
 
-        const answerPercentage = {
-          left: Math.floor((answerCount.left / totalCount) * 100),
-          right: Math.floor((answerCount.right / totalCount) * 100),
-        };
+      const answerPercentage = {
+        left: Math.floor((answerCount.left / totalCount) * 100),
+        right: Math.floor((answerCount.right / totalCount) * 100),
+      };
 
-        const answerParticipationLabel = {
-          left: `${answerPercentage.left}% (${answerCount.left}명)`,
-          right: `${answerPercentage.right}% (${answerCount.right}명)`,
-        };
+      const answerParticipationLabel = {
+        left: `${answerPercentage.left}% (${answerCount.left}명)`,
+        right: `${answerPercentage.right}% (${answerCount.right}명)`,
+      };
 
-        return {
-          quizTitle,
-          tags,
-          oxImageUrl,
-          buttonLeft,
-          buttonRight,
-          quizType,
-          oxDescription,
-          oxAnswer,
-          categoryName,
-          quizReply,
-          answerPercentage,
-          answerParticipationLabel,
-          isSubmitted,
-        };
-      },
-    }
-  );
+      return {
+        quizTitle,
+        tags,
+        oxImageUrl,
+        buttonLeft,
+        buttonRight,
+        quizType,
+        oxDescription,
+        oxAnswer,
+        categoryName,
+        quizReply,
+        answerPercentage,
+        answerParticipationLabel,
+        isSubmitted,
+      };
+    },
+  });
 };