refactor: 중복확인 로직 useMutation으로 변경

src/pages/edit-profile/edit-profile.tsx

@@ -58,8 +58,7 @@ const EditProfile = () => {
   const nicknameVal = watch('nickname', '');
   const introductionVal = watch('introduction', '');
 
-  const { refetch: refetchNicknameCheck } = useQuery(userQueries.NICKNAME_CHECK(nicknameVal));
-
+  const { mutateAsync: checkNickname } = useMutation(userMutations.NICKNAME_CHECK());
   const submitNickname = async () => {
     const ok = await trigger('nickname');
     if (!ok) return;
@@ -113,8 +112,8 @@ const EditProfile = () => {
     if (errors.nickname || nicknameVal.trim().length < 2) return;
     setNicknameStatus('checking');
     try {
-      const { data } = await refetchNicknameCheck();
-      setNicknameStatus(data ? 'available' : 'duplicate');
+      const available = await checkNickname({ nickname: nicknameVal });
+      setNicknameStatus(available ? 'available' : 'duplicate');
     } catch {
       setNicknameStatus('idle');
     }

src/pages/sign-up/components/signup-step.tsx

@@ -1,5 +1,4 @@
 import { userMutations } from '@apis/user/user-mutations';
-import { userQueries } from '@apis/user/user-queries';
 import Button from '@components/button/button/button';
 import Input from '@components/input/input';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -21,7 +20,7 @@ import {
 } from '@pages/sign-up/constants/validation';
 import { type UserInfoFormValues, UserInfoSchema } from '@pages/sign-up/schema/validation-schema';
 import type { NicknameStatus } from '@pages/sign-up/types/nickname-types';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import type { postUserInfoRequest } from '@/shared/types/user-types';
@@ -52,7 +51,7 @@ const SignupStep = () => {
 
   const userInfoMutation = useMutation(userMutations.USER_INFO());
   const agreementInfoMutaion = useMutation(userMutations.AGREEMENT_INFO());
-  const { refetch: refetchNicknameCheck } = useQuery(userQueries.NICKNAME_CHECK(nicknameValue));
+  const { mutateAsync: checkNickname } = useMutation(userMutations.NICKNAME_CHECK());
 
   const informationLength = informationValue.length ?? 0;
 
@@ -103,8 +102,8 @@ const SignupStep = () => {
     if (!isNicknameValid) return;
     setNicknameStatus('checking');
     try {
-      const { data } = await refetchNicknameCheck();
-      setNicknameStatus(data ? 'available' : 'duplicate');
+      const available = await checkNickname({ nickname: nicknameValue });
+      setNicknameStatus(available ? 'available' : 'duplicate');
     } catch {
       setNicknameStatus('idle');
     }

src/pages/sign-up/constants/validation.ts

@@ -40,3 +40,5 @@ export const SIGNUP_STEPS = ['AGREEMENT', 'INFORMATION'];
 
 export const INTRODUCTION_MIN_LENGTH = 1;
 export const INTRODUCTION_MAX_LENGTH = 50;
+
+export const NICKNAME_DUPLICATE_FAILURE_COUNT = 2;

src/shared/apis/user/user-mutations.ts

@@ -1,10 +1,13 @@
-import { patch, post, put } from '@apis/base/http';
+import { get, patch, post, put } from '@apis/base/http';
 import { END_POINT } from '@constants/api';
 import { USER_KEY } from '@constants/query-key';
+import { HTTP_STATUS } from '@constants/response';
 import queryClient from '@libs/query-client';
+import { NICKNAME_DUPLICATE_FAILURE_COUNT } from '@pages/sign-up/constants/validation';
 import { router } from '@routes/router';
 import { ROUTES } from '@routes/routes-config';
 import { mutationOptions } from '@tanstack/react-query';
+import axios from 'axios';
 import type { responseTypes } from '@/shared/types/base-types';
 import type {
   postAgreementInfoRequest,
@@ -68,4 +71,25 @@ export const userMutations = {
       mutationKey: USER_KEY.AGREEMENT(),
       mutationFn: ({ hasAccepted }) => post(END_POINT.AGREEMENT_INFO, { hasAccepted }),
     }),
+
+  NICKNAME_CHECK: () =>
+    mutationOptions<boolean, Error, { nickname: string }>({
+      mutationFn: async ({ nickname }) => {
+        try {
+          await get<void>(END_POINT.GET_NICKNAME_CHECK(nickname));
+          return true;
+        } catch (e) {
+          if (axios.isAxiosError(e) && e.response?.status === HTTP_STATUS.CONFLICT) {
+            return false;
+          }
+          throw e;
+        }
+      },
+      retry: (failureCount, error) => {
+        if (axios.isAxiosError(error) && error.response?.status === HTTP_STATUS.CONFLICT) {
+          return false;
+        }
+        return failureCount < NICKNAME_DUPLICATE_FAILURE_COUNT;
+      },
+    }),
 };

src/shared/apis/user/user-queries.ts

@@ -1,9 +1,7 @@
 import { get } from '@apis/base/http';
 import { END_POINT } from '@constants/api';
 import { USER_KEY } from '@constants/query-key';
-import { HTTP_STATUS } from '@constants/response';
 import { queryOptions } from '@tanstack/react-query';
-import axios from 'axios';
 import type { getMatchConditionResponse, getUserInfoResponse } from '@/shared/types/user-types';
 
 export const userQueries = {
@@ -26,26 +24,4 @@ export const userQueries = {
       queryKey: USER_KEY.MATCH_CONDITION(),
       queryFn: () => get<getMatchConditionResponse>(END_POINT.MATCH_CONDITION),
     }),
-
-  NICKNAME_CHECK: (nickname: string) =>
-    queryOptions<boolean>({
-      queryKey: USER_KEY.NICKNAME_CHECK(nickname),
-      enabled: false,
-      queryFn: async () => {
-        try {
-          await get<void>(END_POINT.GET_NICKNAME_CHECK(nickname));
-          return true;
-        } catch (e) {
-          if (axios.isAxiosError(e) && e.response?.status === HTTP_STATUS.CONFLICT) {
-            return false;
-          }
-          throw e;
-        }
-      },
-      retry: (failureCount, error) => {
-        if (axios.isAxiosError(error) && error.response?.status === HTTP_STATUS.CONFLICT)
-          return false;
-        return failureCount < 2;
-      },
-    }),
 };