Merge pull request #168 from boostcampwm-2024/fe/feature/signup_update

[FE/feat] 회원가입 이메일 체크 로직 추가
boostcampwm-2024 · Dec 4, 2024 · 97f9346 · 97f9346
2 parents 6c67b05 + 37e5507
commit 97f9346
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 4 deletions.
diff --git a/apps/frontend/src/components/Intro/SignUpModal.tsx b/apps/frontend/src/components/Intro/SignUpModal.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ModalStep } from '@/constants/ModalConstants';
-import { signUp, login } from '@/services/AuthApi';
+import { signUp, login, dupAccount } from '@/services/AuthApi';
 import { AlertContext } from '@/components/public/AlertContext';
 
 interface SignUpModalProps {
@@ -23,7 +23,7 @@ const SignUpModal: React.FC<SignUpModalProps> = ({ step, setModalStep }) => {
   const pwCheckInputRef = useRef<HTMLInputElement>(null);
   const idInputRef = useRef<HTMLInputElement>(null);
 
-  const handleSign1 = () => {
+  const handleSign1 = async () => {
     const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
     if (!email || !emailRegex.test(email)) {
       setError('유효한 이메일을 입력해주세요.');
@@ -43,8 +43,17 @@ const SignUpModal: React.FC<SignUpModalProps> = ({ step, setModalStep }) => {
       return;
     }
 
-    setError(null);
-    setModalStep(ModalStep.SignUpStep2);
+    try {
+      const dupCheck = await dupAccount(email);
+      if (dupCheck.success) {
+        setError(null);
+        setModalStep(ModalStep.SignUpStep2);
+      } else {
+        setError(dupCheck.message);
+      }
+    } catch {
+      setError('회원가입 중 오류가 발생했습니다. 다시 시도해주세요.');
+    }
   };
 
   const handleSign2 = async () => {

diff --git a/apps/frontend/src/services/AuthApi.tsx b/apps/frontend/src/services/AuthApi.tsx
@@ -17,6 +17,8 @@ export const login = async (data: Login) => {
         message: response.data.message,
         nickname: nickname
       };
+    } else if (response.data.code === 400 || response.data.code === 401) {
+      return { success: false, message: response.data.message };
     }
 
     return { success: false, message: '알 수 없는 오류가 발생했습니다.' };
@@ -25,12 +27,28 @@ export const login = async (data: Login) => {
   }
 };
 
+export const dupAccount = async (email: string) => {
+  try {
+    const response = await api.post('auth/emailcheck', { email });
+
+    if (response.data.code === 200) {
+      return { success: true, message: response.data.message };
+    }
+
+    return { success: false, message: '알 수 없는 오류가 발생했습니다.' };
+  } catch (error) {
+    return handleError(error, '회원가입 중 오류가 발생했습니다.');
+  }
+};
+
 export const signUp = async (data: SignUp) => {
   try {
     const response = await api.post('auth/signup', data);
 
     if (response.data.code === 201) {
       return { success: true, message: response.data.message };
+    } else if (response.data.code === 400) {
+      return { success: false, message: response.data.message };
     }
 
     return { success: false, message: response.data.message };
@@ -49,6 +67,8 @@ export const logout = async () => {
       localStorage.removeItem('nickname');
 
       return { success: true, message: response.data.message };
+    } else if (response.data.code === 401) {
+      return { success: false, message: response.data.message };
     }
 
     return { success: false, message: '알 수 없는 오류가 발생했습니다.' };
@@ -83,7 +103,10 @@ export const updateNickname = async (data: Nickname) => {
 
     if (response.data.code === 200) {
       return { success: true, message: response.data.message };
+    } else if (response.data.code === 400 || response.data.code === 401) {
+      return { success: false, message: response.data.message };
     }
+
     return { success: false, message: '알 수 없는 오류가 발생했습니다.' };
   } catch (error) {
     return handleError(error, '닉네임 변경 중 오류가 발생했습니다.');
@@ -96,6 +119,8 @@ export const updateIntroduce = async (data: Introduce) => {
 
     if (response.data.code === 200) {
       return { success: true, message: response.data.message };
+    } else if (response.data.code === 401) {
+      return { success: false, message: response.data.message };
     }
 
     return { success: false, message: '알 수 없는 오류가 발생했습니다.' };

diff --git a/apps/frontend/src/services/LotteryApi.tsx b/apps/frontend/src/services/LotteryApi.tsx
@@ -14,7 +14,10 @@ export const getLottoResult = async () => {
         remainCash: remainCash,
         rank: rank
       };
+    } else if (response.data.code === 400) {
+      return { success: false, message: response.data.message };
     }
+
     return { success: false, message: '알 수 없는 오류가 발생했습니다.' };
   } catch (error) {
     return handleError(error, '데이터 로딩 중 오류가 발생했습니다.');

diff --git a/apps/frontend/src/services/MailApi.tsx b/apps/frontend/src/services/MailApi.tsx
@@ -13,7 +13,10 @@ export const getAlarm = async () => {
         message: response.data.message,
         alarm: alarm
       };
+    } else if (response.data.code === 400) {
+      return { success: false, message: response.data.message };
     }
+
     return { success: false, message: '알 수 없는 오류가 발생했습니다.' };
   } catch (error) {
     return handleError(error, '데이터 로딩 중 오류가 발생했습니다.');
@@ -26,7 +29,10 @@ export const clearAlarm = async () => {
 
     if (response.data.code === 200) {
       return { success: true, message: response.data.message };
+    } else if (response.data.code === 400) {
+      return { success: false, message: response.data.message };
     }
+
     return { success: false, message: '알 수 없는 오류가 발생했습니다.' };
   } catch (error) {
     return handleError(error, '데이터 로딩 중 오류가 발생했습니다.');

diff --git a/apps/frontend/src/services/RankApi.tsx b/apps/frontend/src/services/RankApi.tsx
@@ -13,6 +13,8 @@ export const getTop5 = async () => {
         message: response.data.message,
         top5: top5
       };
+    } else if (response.data.code === 401) {
+      return { success: false, message: response.data.message };
     }
 
     return { success: false, message: '알 수 없는 오류가 발생했습니다.' };
@@ -34,6 +36,8 @@ export const getMyRank = async () => {
         rank: rank,
         percentage: percentage
       };
+    } else if (response.data.code === 401) {
+      return { success: false, message: response.data.message };
     }
 
     return { success: false, message: '알 수 없는 오류가 발생했습니다.' };