refact: 전화번호 인증 훅으로 분리

hyeeuncho · hyeeuncho · commit c52cf924566f · 2025-07-10T19:45:47.000+09:00
diff --git a/src/entities/user/ui/ProfileInfo.tsx b/src/entities/user/ui/ProfileInfo.tsx
@@ -7,9 +7,10 @@ import ProfileCircle from '../../../../design-system/ui/Profile';
 import TertiaryButton from '../../../../design-system/ui/buttons/TertiaryButton';
 import DefaultTextField from '../../../../design-system/ui/textFields/DefaultTextField';
 import useAuthStore from '../../../app/provider/authStore';
-import { useSendCertificationCode, useUserInfo, useUserUpdate, useVerifyCertificationCode } from '../../../features/join/hooks/useUserHook';
+import { useUserInfo, useUserUpdate} from '../../../features/join/hooks/useUserHook';
 import { formatProfilName } from '../../../shared/lib/formatProfileName';
 import Button from '../../../../design-system/ui/Button';
+import { usePhoneVerification } from '../../../shared/utils/phoneVerification';
 
 const ProfileInfo = () => {
   const isLoggedIn = useAuthStore(state => state.isLoggedIn);
@@ -18,9 +19,17 @@ const ProfileInfo = () => {
   const { mutate: updateUser } = useUserUpdate();
   const [isEditing, setIsEditing] = useState(false);
 
-  const { mutate: sendCode } = useSendCertificationCode();
-  const { mutate: verifyCode } = useVerifyCertificationCode();
-  const [isVerified, setIsVerified] = useState(false);
+  const {
+    isVerified,
+    isVerifyVisible,
+    verificationCode,
+    setVerificationCode,
+    timer,
+    formatTime,
+    requestVerificationCode,
+    submitVerificationCode,
+    resetVerification,
+  } = usePhoneVerification();
 
   const {
     register,
@@ -66,7 +75,6 @@ const ProfileInfo = () => {
         setName(name);
         refetch();
         setIsEditing(false);
-        setIsVerified(false);
         alert('정보가 성공적으로 업데이트 되었습니다.')
       },
       onError: () => {
@@ -75,48 +83,7 @@ const ProfileInfo = () => {
     });
   };
 
-  // 전화번호 인증
-  const [isVerifyVisible, setIsVerifyVisible] = useState(true);
-  const [verificationCode, setVerificationCode] = useState('');
-  const [timer, setTimer] = useState(0);
-  //인증번호 발급
-  const handlePhoneVerifyClick = () => {
-    if (!phoneValue) {
-      alert('연락처를 입력해주세요.');
-      return;
-    }
-    // //인증api호출
-    sendCode({ phoneNumber: phoneValue }, {
-      onSuccess: () => {
-        setIsVerifyVisible(true);
-        setTimer(180);
-      }
-    });
-  };
-  // 인증번호 확인
-  const handleVerifySubmit = () => {
-    if (!verificationCode || verificationCode.length !== 6) {
-      alert('6자리 인증번호를 입력해주세요.');
-      return;
-    }
-    verifyCode({ phoneNumber: phoneValue, certificationCode: verificationCode }, {
-      onSuccess: () => {
-        setIsVerifyVisible(false);
-        setIsVerified(true);
-      }
-    });
-  };
-  useEffect(() => {
-    if (isVerifyVisible && timer > 0) {
-      const interval = setInterval(() => setTimer((prev) => prev - 1), 1000);
-      return () => clearInterval(interval);
-    }
-  }, [timer, isVerifyVisible]);
-  const formatTime = (seconds: number) => {
-    const m = String(Math.floor(seconds / 60)).padStart(2, '0');
-    const s = String(seconds % 60).padStart(2, '0');
-    return `${m}:${s}`;
-  };
+
 
   if (isLoading) {
     return <div>로딩 중...</div>;
@@ -175,7 +142,7 @@ const ProfileInfo = () => {
                     <Button
                       type="button"
                       label="인증하기"
-                      onClick={handlePhoneVerifyClick}
+                      onClick={() => requestVerificationCode(phoneValue)}
                       className="h-9 sm:h-8 rounded-md w-24"
                     />
                   </div>
@@ -192,7 +159,7 @@ const ProfileInfo = () => {
                         <Button
                           type="button"
                           label="확인"
-                          onClick={handleVerifySubmit}
+                          onClick={() => submitVerificationCode(phoneValue)}
                           className="h-9 px-3 rounded-md"
                         />
                       </div>
@@ -208,8 +175,7 @@ const ProfileInfo = () => {
                           setIsEditing(false);
                           setValue('name', data?.name || '');
                           setValue('phone', data?.phoneNumber || '');
-                          setIsVerified(false);
-                          setIsVerifyVisible(false);
+                          resetVerification();
                           setVerificationCode('');
                         }}
                       />
@@ -227,7 +193,7 @@ const ProfileInfo = () => {
                           setIsEditing(false);
                           setValue('name', data?.name || '');
                           setValue('phone', data?.phoneNumber || '');
-                          setIsVerified(false);
+                          resetVerification();
                           setVerificationCode('');
                         }}
                       />
diff --git a/src/features/join/api/user.ts b/src/features/join/api/user.ts
@@ -31,7 +31,7 @@ export const sendCertificationCode = async (data: { phoneNumber: string }) => {
   return response.data;
 };
 //인증번호 검증 
-export const verifyCertificationCode = async (data: {phoneNumber: string, certificationCode: string}): Promise<void> => {
+export const verifyCertificationCode = async (data: {phoneNumber: string, certificationCode: string}) => {
   const response = await axiosClient.post('/sms/verify', data, {
     headers: { isPublicApi: true },
   });
diff --git a/src/pages/join/InfoInputPage.tsx b/src/pages/join/InfoInputPage.tsx
@@ -1,22 +1,30 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import Header from '../../../design-system/ui/Header';
 import Button from '../../../design-system/ui/Button';
 import UnderlineTextField from '../../../design-system/ui/textFields/UnderlineTextField';
 import { FormData, zodValidation } from '../../shared/lib/formValidation';
-import { useAgreeTerms, useSendCertificationCode, useUserInfo, useUserUpdate, useVerifyCertificationCode } from '../../features/join/hooks/useUserHook';
+import { useAgreeTerms, useUserInfo, useUserUpdate } from '../../features/join/hooks/useUserHook';
 import useAuthStore from '../../app/provider/authStore';
 import { formatPhoneNumber } from '../../shared/utils/phoneFormatter';
 import { useAgreementStore } from '../../features/join/model/agreementStore';
+import { usePhoneVerification } from '../../shared/utils/phoneVerification';
 
 const InfoInputPage = () => {
   const { data, isLoading } = useUserInfo();
   const { login, setName } = useAuthStore();
   const { mutate: updateUser } = useUserUpdate();
-  const { mutate: sendCode } = useSendCertificationCode();
-  const { mutate: verifyCode } = useVerifyCertificationCode();
-  const [isVerified, setIsVerified] = useState(false);
+  const {
+    isVerified,
+    isVerifyVisible,
+    verificationCode,
+    setVerificationCode,
+    timer,
+    formatTime,
+    requestVerificationCode,
+    submitVerificationCode,
+  } = usePhoneVerification();
 
   const {
     register,
@@ -45,51 +53,6 @@ const InfoInputPage = () => {
     const formatted = formatPhoneNumber(e.target.value);
     setValue('phone', formatted, { shouldValidate: true });
   };
-  // 전화번호 인증
-  const [isVerifyVisible, setIsVerifyVisible] = useState(true);
-  const [verificationCode, setVerificationCode] = useState('');
-  const [timer, setTimer] = useState(0);
-  //인증번호 발급
-  const handlePhoneVerifyClick = () => {
-    if (!phoneValue) {
-      alert('연락처를 입력해주세요.');
-      return;
-    }
-    //인증api호출
-    sendCode({ phoneNumber: phoneValue }, {
-      onSuccess: () => {
-        setIsVerifyVisible(true);
-        setTimer(180);
-      }
-    });
-  };
-  // 인증번호 확인
-  const handleVerifySubmit = () => {
-    if (!verificationCode || verificationCode.length !== 6) {
-      alert('6자리 인증번호를 입력해주세요.');
-      return;
-    }
-    verifyCode({ phoneNumber: phoneValue, certificationCode: verificationCode }, {
-      onSuccess: () => {
-        setIsVerifyVisible(false);
-        setIsVerified(true);
-      }
-    });
-  };
-
-  useEffect(() => {
-    if (isVerifyVisible && timer > 0) {
-      const interval = setInterval(() => {
-        setTimer(prev => prev - 1);
-      }, 1000);
-      return () => clearInterval(interval);
-    }
-  }, [isVerifyVisible, timer]);
-  const formatTime = (seconds: number) => {
-    const m = String(Math.floor(seconds / 60)).padStart(2, '0');
-    const s = String(seconds % 60).padStart(2, '0');
-    return `${m}:${s}`;
-  };
 
   const onSubmit: SubmitHandler<FormData> = formData => {
     const agreementStates = getAgreementStates();
@@ -170,7 +133,7 @@ const InfoInputPage = () => {
           <Button
             type='button'
             label="인증하기"
-            onClick={handlePhoneVerifyClick}
+            onClick={() => requestVerificationCode(phoneValue)}
             className="h-11 md:h-11 sm:h-8 px-4 rounded-md"
           />
         </div>
@@ -191,7 +154,7 @@ const InfoInputPage = () => {
               <Button
                 type='button'
                 label="인증확인"
-                onClick={handleVerifySubmit}
+                onClick={() => submitVerificationCode(phoneValue)}
                 className="h-11 md:h-11 sm:h-8 px-4 rounded-md"
               />
             </div>
diff --git a/src/shared/types/api/http-client.ts b/src/shared/types/api/http-client.ts
@@ -56,7 +56,6 @@ axiosClient.interceptors.response.use(
     return response;
   },
   async (error: AxiosError<ApiErrorResponse>) => {
-    console.log(error)
     const errorInfo = {
       status: error.response?.status || 'NETWORK_ERROR',
       message: error.response?.data?.message || error.message,
diff --git a/src/shared/utils/phoneVerification.ts b/src/shared/utils/phoneVerification.ts
@@ -0,0 +1,86 @@
+import { useState, useEffect } from 'react';
+import { useSendCertificationCode, useVerifyCertificationCode } from '../../features/join/hooks/useUserHook';
+
+export const usePhoneVerification = () => {
+  const { mutate: sendCode } = useSendCertificationCode();
+  const { mutate: verifyCode } = useVerifyCertificationCode();
+
+  const [isVerified, setIsVerified] = useState(false);
+  const [isVerifyVisible, setIsVerifyVisible] = useState(false);
+  const [verificationCode, setVerificationCode] = useState('');
+  const [timer, setTimer] = useState(0);
+const resetVerification = () => {
+    setIsVerified(false);
+    setIsVerifyVisible(false);
+    setVerificationCode('');
+    setTimer(0);
+  };
+  // 인증번호 발송
+  const requestVerificationCode = (phone: string) => {
+    if (!phone) {
+      alert('연락처를 입력해주세요.');
+      return;
+    }
+
+    sendCode(
+      { phoneNumber: phone },
+      {
+        onSuccess: () => {
+          setIsVerifyVisible(true);
+          setTimer(180);
+        },
+      }
+    );
+  };
+
+  // 인증번호 확인
+  const submitVerificationCode = (phone: string) => {
+    if (!verificationCode || verificationCode.length !== 6) {
+      alert('6자리 인증번호를 입력해주세요.');
+      return;
+    }
+
+    verifyCode(
+      { phoneNumber: phone, certificationCode: verificationCode },
+      {
+        onSuccess: () => {
+          setIsVerifyVisible(false);
+          setIsVerified(true);
+        },
+      }
+    );
+  };
+
+  // 타이머 로직
+  useEffect(() => {
+    if (isVerifyVisible && timer > 0) {
+      const interval = setInterval(() => {
+        setTimer(prev => prev - 1);
+      }, 1000);
+      return () => clearInterval(interval);
+    } else if (isVerifyVisible && timer === 0) {
+      alert('인증 시간이 만료되었습니다. 다시 인증해주세요.');
+      setIsVerifyVisible(false);
+    }
+  }, [isVerifyVisible, timer]);
+
+  const formatTime = (seconds: number) => {
+    const m = String(Math.floor(seconds / 60)).padStart(2, '0');
+    const s = String(seconds % 60).padStart(2, '0');
+    return `${m}:${s}`;
+  };
+
+  return {
+    isVerified,
+    isVerifyVisible,
+    verificationCode,
+    setVerificationCode,
+    timer,
+    formatTime,
+    requestVerificationCode,
+    submitVerificationCode,
+    setIsVerified,
+    setIsVerifyVisible,
+    resetVerification
+  };
+};
