Feature 076 : 전화번호 중복 처리

src/apis/sms.ts

@@ -10,6 +10,10 @@ export const sendSMSAPI = (data: sendSMSRequest) => {
 
   };
 
+export const sendSMSFindAPI = (data : sendSMSRequest) => {
+  return axios.post<APIResponse<smsResponse>>(PREFIX + '/sendSMS-find', data);
+}
+
 export const checkSMSAPI = (data : checkSMSRequest, token : string) => {
     return axios.post<APIResponse<smsResponse>>(PREFIX + '/checkSMS', data, {
       headers : { Authorization : `Bearer ${token}`}

src/components/PhoneCheck.tsx

@@ -1,15 +1,16 @@
 import React, { useState, useEffect } from "react";
-import { sendSMSAPI, checkSMSAPI } from '@/apis/sms';
+import { sendSMSAPI, checkSMSAPI, sendSMSFindAPI } from '@/apis/sms';
 import Container from '@/styles/PhoneCheck';
 
 
 interface PhoneCheckProps {
     setCheck : (value: boolean) => void;
     tel : string;
     setTel : (value : string) => void;
+    type : boolean; // true : 회원가입  false : 이메일 비밀번호 찾기 페이지
 }
 
-const PhoneCheck : React.FC<PhoneCheckProps> = ({setCheck, tel, setTel}) => {
+const PhoneCheck : React.FC<PhoneCheckProps> = ({setCheck, tel, setTel, type}) => {
     const [certifyNum, setCertifyNum] = useState('');
     const [token, setToken] = useState('');
 
@@ -21,6 +22,7 @@ const PhoneCheck : React.FC<PhoneCheckProps> = ({setCheck, tel, setTel}) => {
     const [isTel, setIsTel] = useState(false);
     const [isTimer, setIsTimer] = useState(false);
     const [isSuccess, setIsSuccess] = useState(false);
+    const [phoneCertify, setPhoneCertify] = useState(false);
 
     useEffect(() => {
             if (isTimer) {
@@ -64,33 +66,46 @@ const PhoneCheck : React.FC<PhoneCheckProps> = ({setCheck, tel, setTel}) => {
       const handleCheckCertify = async () => {
             setIsTimer(false);
             SetIsCheck(true);
-            const response = (await checkSMSAPI({
-            verification_code : Number(certifyNum),
-            }, token))
-            if(response.data.success){
-                setIsSuccess(true);
-                setCheck(true);
-            } else {
-                setIsSuccess(false);
+            try{
+                const {data} = (await checkSMSAPI({
+                    verification_code : Number(certifyNum),
+                    }, token));
+
+                    if(data.success){
+                        setIsSuccess(true);
+                        setCheck(true);
+                    } else {
+                        setIsSuccess(false);
+                    }
+            } catch(e){
+                setIsSuccess(false)
             }
       }
 
       const handleCertifyNum = async () => {
-            setIsSend(true)
-            setIsTimer(true);
             if(isSend){
                 SetIsCheck(false);
                 setTime(10);
             }
-            const response = (await sendSMSAPI({
-            phone_number : tel
-            }))
-
-            if(response.data.success){
-                setToken(response.data.result.token);
+            try{
+                const {data} = type === true ? (await sendSMSAPI({
+                    phone_number : tel
+                    })) : (await sendSMSFindAPI({
+                        phone_number : tel
+                    }));
+
+                    if(data.success){
+                        setIsSend(true)
+                        setIsTimer(true);
+                        setPhoneCertify(false);
+                        setToken(data.result.token);
+                    }
+            } catch(e){
+                setPhoneCertify(true);
             }
+
       }
-      
+
     const minutes = Math.floor(time / 60); // 분
     const seconds = time % 60; 
 
@@ -110,6 +125,7 @@ const PhoneCheck : React.FC<PhoneCheckProps> = ({setCheck, tel, setTel}) => {
                     />
                     <button onClick = {handleCertifyNum} disabled = {!isTel || isSuccess}>{isSend? '인증번호 재전송':'인증번호 전송'}</button>
                     </div>
+            {phoneCertify && <span className="msg">전화번호가 중복되었습니다.</span>}
             {isSend ? <div className="inputwrap">
                       <input
                       type='text'

src/pages/FindEmailPage.tsx

@@ -67,7 +67,7 @@ return (
                   ></InputBox>
                   </Label>
                   <TwoLabel>
-                    <PhoneCheck setCheck={setAllChecked} tel={tel} setTel={setTel}/>
+                    <PhoneCheck setCheck={setAllChecked} tel={tel} setTel={setTel} type = {false}/>
                     </TwoLabel>
                   <FindButton disabled={!allChecked} onClick={findBtnHandler}>
                     찾아보기

src/pages/FindPasswordPage.tsx

@@ -86,7 +86,7 @@ return (
                   ></InputBox>
                   </Label>
                   <TwoLabel>
-                    <PhoneCheck setCheck={setAllChecked} tel={tel} setTel={setTel}/>
+                    <PhoneCheck setCheck={setAllChecked} tel={tel} setTel={setTel} type={false}/>
                     </TwoLabel>
                   <FindButton disabled={!allChecked} onClick={findBtnHandler}>
                     찾아보기

src/pages/SignUpPage.tsx

@@ -256,6 +256,7 @@ const SignUp = () => {
                 tel={phonenumber}
                 setTel={setPhonenumber}
                 setCheck={setIsCertify}
+                type={true}
               />
             </SignupPageStyles.Label>
             <SignupPageStyles.Label>