Simplify: 로그인 로직 useMutation으로 수정

src/api/authApi.ts

@@ -1,23 +1,62 @@
-import { instance } from './client';
-type RefreshTokenData = {
+import axios from 'axios';
+import { ENDPOINTS } from './apiConfig';
+interface RefreshTokenData {
   token: {
     accessToken: string;
     refreshToken: string;
   };
-};
+}
 
-type RefreshTokenResponse = {
+interface RefreshTokenResponse {
   code: number;
   data: RefreshTokenData;
-};
+}
+
+interface SignInRequestBody {
+  email: string;
+  password: string;
+}
+
+interface SignInResponseData {
+  code: number;
+  message: string;
+  data: {
+    member: {
+      memberId: number;
+      email: string;
+      nickname: string;
+      image: string;
+    };
+    token: {
+      grantType: string;
+      accessToken: string;
+      accessTokenExpiresIn: number;
+      refreshToken: string;
+    };
+  };
+}
+
+const authInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
 
 export const getNewAccessToken = async (accessToken: string, refreshToken: string) => {
-  const response = await instance.post<RefreshTokenResponse>(
-    '/api/v2/refresh',
+  const response = await authInstance.post<RefreshTokenResponse>(
+    `${ENDPOINTS.refreshToken}`,
     { accessToken, refreshToken },
     {
       headers: { Authorization: `Bearer ${refreshToken}` },
     }
   );
   return response.data;
 };
+
+export const userSignIn = async (data: SignInRequestBody) => {
+  const response = await authInstance.post<SignInResponseData>(`${ENDPOINTS.login}`, data);
+
+  return response.data;
+};

src/components/signIn/SignInForm.tsx

@@ -3,20 +3,16 @@ import styles from './signIn.module.scss';
 import Input from '../atoms/input';
 import { PATTERNS } from '@/constants/constants';
 import Button from '../atoms/button';
-import { Link, useNavigate } from 'react-router-dom';
-import { instance } from '@/api/client';
-import { useSetRecoilState } from 'recoil';
-import { userState } from '@/store/store';
-import { setTokenToLocalStorage } from './utils/getToken';
-import { ENDPOINTS } from '@/api/apiConfig';
+import { Link } from 'react-router-dom';
+import useAuth from '@/hooks/useAuth';
 
 interface SignInFormValues {
   email: string;
   password: string;
 }
 
 const SignInForm = () => {
-  const navigate = useNavigate();
+  const { mutate } = useAuth();
   const {
     register,
     watch,
@@ -30,32 +26,8 @@ const SignInForm = () => {
     },
   });
 
-  const setData = useSetRecoilState(userState);
-
   const onSubmit = async (data: SignInFormValues) => {
-    try {
-      const response = await instance.post(ENDPOINTS.login, {
-        email: data.email,
-        password: data.password,
-      });
-
-      if (response.status === 200) {
-        const { data } = response.data;
-        const accessToken = data.token.accessToken;
-        const refreshToken = data.token.refreshToken;
-
-        setTokenToLocalStorage(accessToken, refreshToken);
-        setData({ ...response.data.data, isLogin: true });
-        navigate('/community');
-      }
-    } catch (error: any) {
-      if (error.response && error.response.status === 500) {
-        alert('이메일과 비밀번호를 다시 확인해주세요.');
-      } else {
-        console.error('서버 요청 중 오류가 발생했습니다.', error);
-        alert('서버 요청 중 오류가 발생했습니다.');
-      }
-    }
+    mutate(data);
   };
 
   return (

src/hooks/useAuth.ts

@@ -0,0 +1,28 @@
+import { userSignIn } from '@/api/authApi';
+import { setTokenToLocalStorage } from '@/components/signIn/utils/getToken';
+import { authState } from '@/recoil/authState';
+import { useMutation } from '@tanstack/react-query';
+import toast from 'react-hot-toast';
+import { useNavigate } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
+
+const useAuth = () => {
+  const setUser = useSetRecoilState(authState);
+  const navigate = useNavigate();
+
+  const { mutate } = useMutation({
+    mutationFn: userSignIn,
+    onSuccess: ({ data: { member, token } }) => {
+      setTokenToLocalStorage(token.accessToken, token.refreshToken);
+      setUser({ ...member, loggedIn: true });
+      navigate('/community');
+    },
+    onError: () => {
+      toast.error('로그인에 실패했습니다');
+    },
+  });
+
+  return { mutate };
+};
+
+export default useAuth;