feat: axios 설정 파일 추가

#140

client/src/apis/auth.ts

@@ -1,5 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
-import axios from "axios";
+
+import { useUserActions } from "@src/stores/useUserStore";
+import { fetch, unAuthorizationFetch } from "./axios";
 
 export const useSignupMutation = () => {
   const fetcher = ({
@@ -11,7 +13,7 @@ export const useSignupMutation = () => {
     email: string;
     password: string;
   }) => {
-    return axios.post("/auth/register", { name, email, password });
+    return unAuthorizationFetch.post("/auth/register", { name, email, password });
   };
 
   return useMutation({
@@ -20,16 +22,32 @@ export const useSignupMutation = () => {
 };
 
 export const useLoginMutation = () => {
+  const { setCredentials } = useUserActions();
+
   const fetcher = ({ email, password }: { email: string; password: string }) => {
-    return axios.post("/auth/login", { email, password });
+    return unAuthorizationFetch.post("/auth/login", { email, password });
+  };
+
+  return useMutation({
+    mutationFn: fetcher,
+    onSuccess: (response) => {
+      const { id, name, accessToken } = response.data;
+      setCredentials(id, name, accessToken);
+    },
+  });
+};
+
+export const useLogoutMutation = () => {
+  const { removeCredentials } = useUserActions();
+
+  const fetcher = () => {
+    return fetch.post("/auth/logout");
   };
 
   return useMutation({
     mutationFn: fetcher,
-    // TODO 성공했을 경우 accessToken 저장 (zustand? localStorage? cookie?)
-    // accessToken: cookie (쿠기 다 때려넣기...) / localStorage / zustand (번거로움..귀찮음.. 안해봤음..)
-    // refreshToken: cookie,
-    // onSuccess: (data) => {
-    // },
+    onSuccess: () => {
+      removeCredentials();
+    },
   });
 };

client/src/apis/axios.ts

@@ -0,0 +1,58 @@
+import axios, { CreateAxiosDefaults } from "axios";
+import { useUserInfo } from "@src/stores/useUserStore";
+
+const baseConfig: CreateAxiosDefaults = {
+  baseURL: `${import.meta.env.VITE_API_URL}`,
+  withCredentials: true,
+};
+
+export const unAuthorizationFetch = axios.create(baseConfig);
+
+export const fetch = axios.create(baseConfig);
+
+fetch.interceptors.request.use(
+  function (config) {
+    const { accessToken } = useUserInfo();
+
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+
+    return config;
+  },
+  function (error) {
+    return Promise.reject(error);
+  },
+);
+// response 에러 처리 + access token 재발급
+// fetch.interceptors.response.use(
+//   function (response) {
+//     return response;
+//   },
+//   async function (error: AxiosError) {
+//     const originalRequest: CustomAxiosRequestConfig | undefined = error.config;
+
+//     if (error.response?.status === 401 && originalRequest && !originalRequest._retry) {
+//       originalRequest._retry = true;
+//       try {
+//         const response = await getRefreshToken();
+
+//         const { payload } = response;
+
+//         useUserStore.setState({ user: { accessToken: payload.accessToken } });
+
+//         originalRequest.headers.Authorization = `Bearer ${payload.accessToken}`;
+
+//         return fetch(originalRequest);
+//       } catch (error) {
+//         if (error instanceof AxiosError && error.response?.status === 403) {
+//           useUserStore.getState().removeCredentials();
+//           return;
+//         }
+//       }
+//     }
+
+//     return Promise.reject(error);
+//   },
+// );
+``;

client/src/main.tsx

@@ -1,13 +1,9 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import axios from "axios";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 
-axios.defaults.baseURL = import.meta.env.VITE_API_URL;
-axios.defaults.withCredentials = true;
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {