[#43] 로그인 성공 시 쿠키 저장

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

package.json

@@ -15,6 +15,7 @@
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^5.17.9",
     "@tanstack/react-query-devtools": "^5.17.9",
+    "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",

src/api/index.ts

@@ -1,2 +1,3 @@
 export { default as instance } from './lib/instance';
 export { default as getExample } from './lib/getExample';
+export { default as postLogin } from './lib/postLogin';

src/api/lib/instance.ts

@@ -1,5 +1,30 @@
-const instance = () => {
-  return 'instance';
-};
+import { getCookies } from '@utils/lib/cookies';
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: import.meta.env.VITE_SERVER_URL,
+  headers: {
+    'Content-Type': import.meta.env.VITE_CONTENT_TYPE
+  }
+});
+
+// 요청 인터셉터 추가
+instance.interceptors.request.use(
+  (config: any): any => {
+    const accessToken = getCookies('accessToken');
+
+    if (accessToken) {
+      config.headers['Authorization'] = `Bearer ${accessToken}`;
+    }
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);
+
+// TODO : 응답 인터셉터 추가
+instance.interceptors.response.use((response: any): any => {
+  return response;
+});
 
 export default instance;

src/api/lib/postLogin.ts

@@ -0,0 +1,9 @@
+import { LoginData } from '@/types/auth';
+import { instance } from '..';
+
+const postLogin = async (loginData: LoginData) => {
+  const response = await instance.post('/v1/member/login', loginData);
+  return response.data;
+};
+
+export default postLogin;

src/components/Login/LoginForm/index.tsx

@@ -7,16 +7,41 @@ import {
   AuthInputNormal,
   AuthInputPassword
 } from '@components/common/Auth';
+import { LoginData } from '@/types/auth';
+import { postLogin } from 'src/api';
+import { setCookies } from '@utils/lib/cookies';
 
 const LoginForm = () => {
   const navigate = useNavigate();
+
+  // HACK : 추후 useState로 입력 데이터 관리할 예쩡
+  const formData: LoginData = {
+    email: '[email protected]',
+    password: 'qqqq1111!'
+  };
+
   // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
   const isInvalid = true;
 
   const movetoSignUp = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     navigate('/signup');
   };
+
+  const handleLoginSubmit = async (
+    event: React.FormEvent<HTMLButtonElement>
+  ) => {
+    event.preventDefault();
+    const response = await postLogin(formData);
+    setCookies(
+      response.name,
+      response.email,
+      response.access_token,
+      response.refresh_token,
+      response.expires_in
+    );
+  };
+
   return (
     <form>
       <Inputs $isInvalid={isInvalid}>
@@ -44,9 +69,7 @@ const LoginForm = () => {
           size="large"
           variant="navy"
           text="로그인"
-          buttonFunc={() => {
-            // TODO : 로그인 API 요청
-          }}
+          buttonFunc={handleLoginSubmit}
         />
         <AuthButton
           size="large"

src/types/auth.ts

@@ -29,3 +29,18 @@ export type AuthButton = {
 };
 
 export type AuthButtonStyleProps = { $size: string; $variant: string };
+
+export type LoginData = {
+  email: string;
+  password: string;
+};
+
+export type SetCookies = (
+  userName: string,
+  userEmail: string,
+  accessToken: string,
+  refreshToken: string,
+  expiresIn: number
+) => void;
+
+export type GetCookies = (name: string) => string | undefined;

src/utils/lib/cookies.ts

@@ -0,0 +1,28 @@
+import { SetCookies, GetCookies } from '@/types/auth';
+
+export const setCookies: SetCookies = (
+  userName,
+  userEmail,
+  accessToken,
+  refreshToken,
+  expiresIn
+) => {
+  try {
+    document.cookie = `userName=${userName};max-age=${expiresIn};path=/;secure`;
+    document.cookie = `userEmail=${userEmail};max-age=${expiresIn};path=/;secure`;
+    document.cookie = `accessToken=${accessToken};max-age=${expiresIn};path=/;secure`;
+    document.cookie = `refreshToken=${refreshToken};max-age=${expiresIn};path=/;secure`;
+    console.log('쿠키설정 성공');
+  } catch (error) {
+    console.log(error);
+    alert('쿠키설정에 실패했습니다.');
+  }
+};
+
+export const getCookies: GetCookies = name => {
+  const cookieValue = document.cookie
+    .split('; ')
+    .find(row => row.startsWith(`${name}=`))
+    ?.split('=')[1];
+  return cookieValue;
+};