feat: add mixed boundary (#11)

axios instance 추가

resolve: #11

host/config-overrides.js

@@ -39,6 +39,7 @@ module.exports = function (config, env) {
         "@layouts": path.resolve(__dirname, "src/layouts"),
         "@hooks": path.resolve(__dirname, "src/hooks"),
         "@utils": path.resolve(__dirname, "src/utils"),
+        "@api": path.resolve(__dirname, "src/api")
      }),
     )(config, env)
   );

host/src/api/core/index.tsx

@@ -0,0 +1,41 @@
+import axios from "axios";
+
+const request = axios.create({
+  baseURL: "http://localhost:8123"
+})
+
+//요청 타임아웃 설정
+request.defaults.timeout = 2500;
+request.defaults.withCredentials = true;
+// request.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
+
+//요청 인터셉터 추가
+request.interceptors.request.use(
+  config => { //요청을 보내기 전에 수행할 로직
+    return config
+  },
+  error => {
+    //요청 에러가 발생했을 때 수행할 로직
+    console.log(error); //디버깅
+    return Promise.reject(error);
+  }
+);
+
+//응답 인터셉터 추가
+request.interceptors.response.use(
+  response => {
+    //응답에 대한 로직 작성
+    //const res = response.data
+    //return res
+    return response
+  },
+
+  error => {
+    //응답 에러가 발생했을 때 수행할 로직
+    console.log(error); //디버깅
+    return Promise.reject(error);
+  }
+);
+
+
+export default request; //axios 인스턴스를 내보낸다.

host/src/api/main.tsx

@@ -0,0 +1,30 @@
+import request from "./core";
+
+
+export const login = (email: string, password: string) => {
+  return request(
+    {
+      method: 'POST',
+      url: '/login',
+      data: {
+        email: email,
+        password: password
+      }
+    }
+  )
+}
+
+export const loginsuccess = () => {
+  return request({
+    // method: 'GET',
+    url: '/login/success'
+  });
+}
+
+export const logout = () => {
+  return request({
+    method: 'POST',
+    url: '/logout'
+  });
+}
+

host/src/pages/LogIn/index.tsx

@@ -4,30 +4,21 @@ import fetcher from '@utils/fetcher';
 import axios from 'axios';
 import React, { useCallback, useState } from 'react';
 import useSWR from 'swr';
+import { login } from "@api/main"
 
 const LogIn = () => {
   // const { data: userData, error, mutate } = useSWR('/api/users', fetcher);
   const [logInError, setLogInError] = useState(false);
   const [email, onChangeEmail] = useInput('');
   const [password, onChangePassword] = useInput('');
 
-  const onSubmit = useCallback((e) => {
+  const onSubmit = useCallback(async (e) => {
     e.preventDefault();
     setLogInError(false);
-    axios.post('/login', // 임시 server 
-      { email, password }, {
-      withCredentials: true
-    })
-      .then((response) => {
-        if (response.status === 200) {
-          // axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
-          window.open('/', '_self')
-        }
-      })
-      .catch((error) => {
-        console.log("error")
-        setLogInError(error.response?.data?.code === 401);
-      });
+    const response = await login(email, password)
+    if (response.status === 200) {
+      window.open('/', '_self')
+    }
   },
     [email, password],
   );

host/src/pages/Main/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import axios from "axios";
 import { useRecoilState } from 'recoil';
 import { userState } from "../../store/atoms";
-
+import { loginsuccess, logout } from "@api/main"
 
 const Main = () => {
   const [isLogin, setIsLogin] = useState(false);
@@ -15,36 +15,28 @@ const Main = () => {
       return { default: module.Menu };
     })
   );
-  
+
   useEffect(() => {
-    (async() => {
-        const {data} = await axios.get("/login/success");
-        try{
-        if(data){
+    (async () => {
+      const { data } = await loginsuccess();
+      try {
+        if (data) {
           setIsLogin(true);
-          setUser({email : data.email, username : data.username});
+          setUser({ email: data.email, username: data.username });
         }
-      }catch(error){
+      } catch (error) {
         console.log(error);
       }
     })();
   }, []);
 
-  useEffect(()=> {
-    console.log(user);
-  },[user])
-
 
-  const logout = () => {
-    axios({
-      url: "/logout",
-      method: "POST",
-      withCredentials: true,
-    }).then((result) => {
-      if (result.status === 200) {
-        window.open("/login", "_self");
-      }
-    });
+  const logoutPage = async () => {
+    const data = await logout();
+    if (data.status === 200) {
+      window.open("/login", "_self");
+    }
+
   };
 
   return (
@@ -55,7 +47,7 @@ const Main = () => {
       <p>Age: {user.username}</p> */}
       <div>
         {isLogin && <div>
-          <button onClick={logout} className="loginButton">
+          <button onClick={logoutPage} className="loginButton">
             Logout
           </button>
         </div>}

host/tsconfig.json

@@ -26,6 +26,7 @@
       "@pages/*": ["pages/*"],
       "@utils/*": ["utils/*"],
       "@hooks/*": ["hooks/*"],
+      "@api/*": ["api/*"]
     }
   },
   "include": [