🔀 회원가입 페이지 리팩토링 진행

src/entities/signUp/api/getCheckSmsCode.ts

@@ -0,0 +1,14 @@
+import axios from 'axios';
+import { toast } from 'react-toastify';
+
+export const getCheckSmsCode = async (phoneNumber: string, code: string) => {
+  if (!phoneNumber || !code) {
+    toast.error('전화번호와 인증 번호를 입력해주세요.');
+    return;
+  }
+
+  const response = await axios.get(
+    `/api/auth/sms?phoneNumber=${phoneNumber}&code=${code}`,
+  );
+  return response;
+};

src/entities/signUp/api/postSendSms.ts

@@ -0,0 +1,12 @@
+import axios from 'axios';
+import { toast } from 'react-toastify';
+
+export const postSendSms = async (phoneNumber: string) => {
+  if (!phoneNumber) {
+    toast.error('전화번호를 입력해주세요.');
+    return;
+  }
+
+  const response = await axios.post('/api/auth/sms', { phoneNumber });
+  return response;
+};

src/entities/signUp/api/postSignup.ts

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+interface SignUpData {
+  name: string;
+  nickname: string;
+  email: string;
+  password: string;
+  phoneNumber: string;
+}
+
+export const postSignup = async (data: SignUpData) => {
+  const response = await axios.post('/api/auth/signup', data);
+  return response;
+};

src/entities/signUp/model/useCheckSmsCode.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+import { getCheckSmsCode } from '../api/getCheckSmsCode';
+
+export const useCheckSmsCode = (phoneNumber: string, code: string) => {
+  return useQuery({
+    queryKey: ['CheckSmsCode', phoneNumber, code],
+    queryFn: () => getCheckSmsCode(phoneNumber, code),
+    enabled: false,
+  });
+};

src/entities/signUp/model/useSendSms.ts

@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { postSendSms } from '../api/postSendSms';
+
+export const useSendSms = (
+  setIsSmsSent: React.Dispatch<React.SetStateAction<boolean>>,
+  setTimer: React.Dispatch<React.SetStateAction<number>>,
+) => {
+  return useMutation({
+    mutationFn: (phoneNumber: string) => postSendSms(phoneNumber),
+    onSuccess: () => {
+      setIsSmsSent(true);
+      setTimer(180);
+      toast.success('문자 메시지 전송이 완료되었습니다.');
+    },
+    onError: () => {
+      toast.error('문제 매시지 전송에 실패했습니다.');
+    },
+  });
+};

src/entities/signUp/model/useSignup.ts

@@ -0,0 +1,27 @@
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
+import { postSignup } from '../api/postSignup';
+
+interface SignUpData {
+  name: string;
+  nickname: string;
+  email: string;
+  password: string;
+  phoneNumber: string;
+}
+
+export const useSignup = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: (data: SignUpData) => postSignup(data),
+    onSuccess: () => {
+      toast.success('회원가입이 완료되었습니다.');
+      router.push('/signIn');
+    },
+    onError: () => {
+      toast.error('회원가입에 실패했습니다.');
+    },
+  });
+};

src/entities/signUp/model/useTimer.ts

@@ -3,13 +3,17 @@ import { useEffect } from 'react';
 export const useTimer = (
   timer: number,
   setTimer: React.Dispatch<React.SetStateAction<number>>,
+  setIsSmsSent: React.Dispatch<React.SetStateAction<boolean>>, // 추가
 ) => {
   useEffect(() => {
     if (timer > 0) {
       const intervalId = setInterval(() => {
         setTimer((prev) => prev - 1);
       }, 1000);
+
       return () => clearInterval(intervalId);
+    } else if (timer === 0) {
+      setIsSmsSent(false);
     }
-  }, [timer, setTimer]);
+  }, [timer, setTimer, setIsSmsSent]);
 };

src/entities/signUp/ui/SignUpForm/index.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Input } from '@/shared/ui';
-import { checkSmsCode } from '../../api/checkSmsCode';
-import { sendSms } from '../../api/sendSms';
-import { signUp } from '../../api/signup';
 import { showError } from '../../model/showError';
+import { useCheckSmsCode } from '../../model/useCheckSmsCode';
+import { useSendSms } from '../../model/useSendSms';
+import { useSignup } from '../../model/useSignup';
 import { useTimer } from '../../model/useTimer';
 
 type FormData = {
@@ -29,15 +28,19 @@ const SignUpForm = () => {
   } = useForm<FormData>();
   const [isSmsSent, setIsSmsSent] = useState(false);
   const [timer, setTimer] = useState(0);
+  const { mutate: signup } = useSignup();
+  const { mutate: sendSms } = useSendSms(setIsSmsSent, setTimer);
+  const { refetch: checkSmsCode } = useCheckSmsCode(
+    watch('phoneNumber'),
+    watch('code'),
+  );
 
-  useTimer(timer, setTimer);
-
-  const router = useRouter();
+  useTimer(timer, setTimer, setIsSmsSent);
 
   return (
     <form
       onSubmit={handleSubmit(
-        (data) => signUp(data, router),
+        (data) => signup(data),
         (errors) => {
           const firstError = Object.values(errors)[0];
           if (firstError && firstError.message) {
@@ -126,10 +129,10 @@ const SignUpForm = () => {
               type="text"
               placeholder="인증 번호 입력"
               style={{ width: '80%' }}
-              disabled={!isSmsSent}
+              disabled={!isSmsSent && watch('code') !== null}
             />
             <Button
-              onClick={() => checkSmsCode(watch('phoneNumber'), watch('code'))}
+              onClick={() => checkSmsCode()}
               text="확인"
               width="20%"
               disabled={!isSmsSent}
@@ -138,9 +141,7 @@ const SignUpForm = () => {
           </div>
           <button
             type="button"
-            onClick={() =>
-              sendSms(watch('phoneNumber'), setIsSmsSent, setTimer)
-            }
+            onClick={() => sendSms(watch('phoneNumber'))}
             className="text-caption2 text-gray-300"
             disabled={isSmsSent}
           >