Refactor: #175 기존 닉네임 트래킹 변수를 커스텀 훅으로 이동

GU-99 · Oct 1, 2024 · 1795918 · 1795918
1 parent 219a6e9
commit 1795918
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/src/hooks/useNicknameDuplicateCheck.ts b/src/hooks/useNicknameDuplicateCheck.ts
@@ -3,21 +3,26 @@ import { AxiosError } from 'axios';
 import { checkNicknameDuplicate } from '@services/authService';
 import useToast from '@hooks/useToast';
 
-export default function useNicknameDuplicateCheck(nickname: string, errorMessage?: string) {
+export default function useNicknameDuplicateCheck(
+  nickname: string,
+  nicknameError?: string,
+  initialLastCheckedNickname?: string,
+) {
   const { toastSuccess, toastError } = useToast();
   const [checkedNickname, setCheckedNickname] = useState(false);
-  const [lastCheckedNickname, setLastCheckedNickname] = useState('');
+  const [lastCheckedNickname, setLastCheckedNickname] = useState(initialLastCheckedNickname);
 
-  // 닉네임 중복 확인 함수
-  const checkNickname = async () => {
-    if (!nickname || errorMessage) return;
+  const handleCheckNickname = async () => {
+    if (!nickname || nicknameError || nickname === lastCheckedNickname) return;
 
+    // ToDo: useAxios 훅을 이용한 네트워크 로직으로 변경
     try {
       await checkNicknameDuplicate({ nickname });
       toastSuccess('사용 가능한 닉네임입니다.');
       setCheckedNickname(true);
       setLastCheckedNickname(nickname);
     } catch (error) {
+      setCheckedNickname(false);
       if (error instanceof AxiosError && error.response) {
         toastError(error.response.data.message);
       } else {
@@ -33,6 +38,7 @@ export default function useNicknameDuplicateCheck(nickname: string, errorMessage
 
   return {
     checkedNickname,
-    checkNickname,
+    lastCheckedNickname,
+    handleCheckNickname,
   };
 }
diff --git a/src/pages/setting/UserSettingPage.tsx b/src/pages/setting/UserSettingPage.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { AxiosError } from 'axios';
 import { FormProvider, useForm } from 'react-hook-form';
 import { USER_AUTH_VALIDATION_RULES } from '@constants/formValidationRules';
@@ -8,13 +7,12 @@ import LinkContainer from '@components/user/auth-form/LinkContainer';
 import { useStore } from '@stores/useStore';
 import { patchUserInfo } from '@services/userService';
 import useToast from '@hooks/useToast';
-import useNicknameDuplicateCheck from '@/hooks/useNicknameDuplicateCheck';
+import useNicknameDuplicateCheck from '@hooks/useNicknameDuplicateCheck';
 import type { EditUserInfoForm } from '@/types/UserType';
 
 export default function UserSettingPage() {
   const { userInfo: userInfoData, editUserInfo } = useStore();
   const { toastError, toastSuccess, toastWarn } = useToast();
-  const [lastCheckedNickname] = useState(userInfoData.nickname);
 
   const methods = useForm<EditUserInfoForm>({
     mode: 'onChange',
@@ -29,10 +27,17 @@ export default function UserSettingPage() {
 
   const { formState, register, setValue, watch, handleSubmit } = methods;
   const nickname = watch('nickname');
-  const { checkedNickname, checkNickname } = useNicknameDuplicateCheck(nickname, formState.errors.nickname?.message);
+
+  const { checkedNickname, lastCheckedNickname, handleCheckNickname } = useNicknameDuplicateCheck(
+    nickname,
+    formState.errors.nickname?.message,
+    userInfoData.nickname,
+  );
 
   const onSubmit = async (data: EditUserInfoForm) => {
-    if (lastCheckedNickname !== nickname && !checkedNickname) return toastWarn('닉네임 중복 체크를 진행해 주세요.');
+    if (lastCheckedNickname !== nickname && !checkedNickname) {
+      return toastWarn('닉네임 중복 체크를 진행해 주세요.');
+    }
 
     const editUserData = {
       nickname: data.nickname,
@@ -86,7 +91,7 @@ export default function UserSettingPage() {
             isButtonInput
             buttonLabel="중복확인"
             buttonDisabled={checkedNickname}
-            onButtonClick={checkNickname}
+            onButtonClick={handleCheckNickname}
           />
 
           {/* 자기소개 */}

diff --git a/src/pages/user/SignUpPage.tsx b/src/pages/user/SignUpPage.tsx
@@ -7,9 +7,9 @@ import VerificationButton from '@components/user/auth-form/VerificationButton';
 import LinkContainer from '@components/user/auth-form/LinkContainer';
 import useToast from '@hooks/useToast';
 import useEmailVerification from '@hooks/useEmailVerification';
+import useNicknameDuplicateCheck from '@hooks/useNicknameDuplicateCheck';
 import { signUp } from '@services/authService';
 import type { UserSignUpForm } from '@/types/UserType';
-import useNicknameDuplicateCheck from '@/hooks/useNicknameDuplicateCheck';
 
 export default function SignUpPage() {
   const navigate = useNavigate();
@@ -32,7 +32,10 @@ export default function SignUpPage() {
 
   const { watch, handleSubmit, formState, register, setValue } = methods;
   const nickname = watch('nickname');
-  const { checkedNickname, checkNickname } = useNicknameDuplicateCheck(nickname, formState.errors.nickname?.message);
+  const { checkedNickname, handleCheckNickname } = useNicknameDuplicateCheck(
+    nickname,
+    formState.errors.nickname?.message,
+  );
 
   const handleRequestVerificationCode = () => {
     if (!checkedNickname) return toastWarn('닉네임 중복 체크를 진행해 주세요.');
@@ -97,7 +100,7 @@ export default function SignUpPage() {
           isButtonInput
           buttonLabel="중복확인"
           buttonDisabled={checkedNickname}
-          onButtonClick={checkNickname}
+          onButtonClick={handleCheckNickname}
         />
 
         {/* 비밀번호 */}