test: 회원가입 시도 시 이미 있는 이메일일 경우 에러메세지 띄우는 부분 수정 중

apis/api.ts

@@ -15,16 +15,32 @@ export async function getUser() {
   return result;
 }
 
+export async function postValidateSignUp(id: string) {
+  const response = await axios.post(`${BASIC_URL}/check-email`, {
+    email: id,
+  });
+  console.log(response);
+
+  if (response.status < 200 || response.status >= 300) {
+    throw new Error('이미 사용 중인 이메일입니다.');
+  }
+  // const result = response.data.isUsableNickname;
+
+  return response;
+}
+
 export async function postSignUp(id: string, pw: string) {
   const response = await axios.post(`${BASIC_URL}/sign-up`, {
     email: id,
     password: pw,
   });
+  console.log(response);
+
   if (response.status < 200 || response.status >= 300) {
     throw new Error('회원가입에 실패했습니다.');
   }
-  const result = response.data.data;
-  return result;
+  // const result = response.data.data;
+  return response;
 }
 
 export async function postSignIn(id: string, pw: string) {

hooks/useAsync.ts

@@ -1,36 +1,31 @@
-import { useCallback, useState } from 'react';
+import { useState, useCallback } from 'react';
 
-type AsyncFunction<TArgs extends any[], TResult> = (
-  ...args: TArgs
-) => Promise<TResult>;
+type AsyncFunction<T, A extends any[]> = (...args: A) => Promise<T>;
 
-interface UseAsyncResult<TResult> {
-  pending: boolean;
-  error: Error | null;
-  requestFunction: (...args: any[]) => Promise<TResult | undefined>;
-}
-
-export default function useAsync<TArgs extends any[], TResult>(
-  asyncFunction: AsyncFunction<TArgs, TResult>
-): UseAsyncResult<TResult> {
-  const [pending, setPending] = useState(false);
+const useAsync = <T, A extends any[]>(asyncFunction: AsyncFunction<T, A>) => {
+  const [pending, setPending] = useState<boolean>(false);
   const [error, setError] = useState<Error | null>(null);
+  const [result, setResult] = useState<T | null>(null);
 
   const requestFunction = useCallback(
-    async (...args: TArgs): Promise<TResult | undefined> => {
+    async (...args: A) => {
+      setPending(true);
+      setError(null);
       try {
-        setError(null);
-        setPending(true);
-        return await asyncFunction(...args);
-      } catch (error) {
-        setError(error as Error);
-        return;
+        const response = await asyncFunction(...args);
+        setResult(response);
+        return response;
+      } catch (err) {
+        setError(err as Error);
+        return null;
       } finally {
         setPending(false);
       }
     },
     [asyncFunction]
   );
 
-  return { pending, error, requestFunction };
-}
+  return { pending, error, result, requestFunction };
+};
+
+export default useAsync;

pages/signup/index.tsx

@@ -7,13 +7,14 @@ import KakaotalkIcon from '../../src/images/login_kakaotalk.svg';
 import EyeOnIcon from '../../src/images/eye_on.svg';
 import EyeOffIcon from '../../src/images/eye_off.svg';
 import { ChangeEvent, FormEvent, useState } from 'react';
-import { postSignUp } from '@/apis/api';
+import { postSignUp, postValidateSignUp } from '@/apis/api';
 import { useRouter } from 'next/router';
 import {
   validateEmail,
   validateSignUpPassword,
   validatePasswordConform,
 } from '@/utils/validate';
+import useAsync from '@/hooks/useAsync';
 
 export default function SignUpPage() {
   const [email, setEmail] = useState('');
@@ -28,6 +29,16 @@ export default function SignUpPage() {
   const [isVisiblePasswordConform, setIsVisiblePasswordConform] =
     useState(false);
   const router = useRouter();
+  const {
+    pending: validateSignUpPending,
+    error: validateSignUpError,
+    requestFunction: validateSignUpRequest,
+  } = useAsync(postValidateSignUp);
+  const {
+    pending: signUpPending,
+    error: signUpError,
+    requestFunction: signUpRequest,
+  } = useAsync(postSignUp);
 
   const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
@@ -46,15 +57,44 @@ export default function SignUpPage() {
     validateEmail(email, setShowError);
     validateSignUpPassword(password, setShowError);
     validatePasswordConform(passwordConform, password, setShowError);
+
     if (
-      showError.email.error ||
+      (showError.email.error &&
+        showError.email.message !== '이미 사용 중인 이메일입니다.') ||
       showError.password.error ||
       showError.passwordConform.error
-    ) {
+    )
+      return;
+
+    const validateResult = await validateSignUpRequest(email);
+
+    if (validateSignUpError) {
+      setShowError((prev) => ({
+        ...prev,
+        email: {
+          error: true,
+          message: '이미 사용 중인 이메일입니다.',
+        },
+      }));
+      return;
+    }
+
+    if (!validateResult) return;
+
+    const signUpResult = await signUpRequest(email, password);
+
+    if (signUpError) {
+      setShowError((prev) => ({
+        ...prev,
+        email: {
+          error: true,
+          message: '이미 사용 중인 이메일입니다.',
+        },
+      }));
       return;
     }
-    const result = await postSignUp(email, password);
-    localStorage.setItem('accessToken', result?.accessToken);
+
+    localStorage.setItem('accessToken', signUpResult?.data.data.accessToken);
     router.push('/folder');
   };