feat: axios 세팅

.eslintrc

@@ -59,13 +59,15 @@
     "@typescript-eslint/method-signature-style": [ // 특정 메서드 syntax 사용해서 시행
       "error"
     ],
+    "@typescript-eslint/no-explicit-any": "off",
     "unused-imports/no-unused-imports": [ // 사용하지 않는 es6 모듈 import를 찾아 제거
       "error"
     ],
     "react/jsx-indent-props": [ // JSX에서 props 들여쓰기 유효성 검사
       "error",
       "first"
     ],
+    "no-restricted-globals": "off",
     "react/jsx-curly-newline": "off", // jsx curly 내에서 일관된 줄 바꿈 적용
     "react/jsx-one-expression-per-line": "off", // JSX에서 한 줄에 하나의 표현식으로 제한
     "react/jsx-props-no-spreading": "off", // JSX props 확산 방지

package.json

@@ -19,6 +19,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "axios": "^1.4.0",
+    "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.0",

src/api/client.ts

@@ -0,0 +1,64 @@
+import axios, { AxiosError, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import qs from 'query-string';
+import { API_TIMEOUT, BASE_URL } from '@lib/const/config';
+
+type APIResponse<T = unknown> = {
+  success: boolean;
+  msg: string;
+  data?: T;
+};
+
+export const client = axios.create({
+  baseURL: BASE_URL,
+  timeout: API_TIMEOUT,
+  timeoutErrorMessage: '서버 요청 시간 초과',
+  paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'comma' }),
+});
+
+const handleHeadersWithAccessToken = (config: AxiosRequestConfig): InternalAxiosRequestConfig => {
+  const accessToken = localStorage.getItem('ACCESS_TOKEN') || '';
+  config.headers = {
+    ...config.headers,
+    Authorization: `Bearer ${accessToken}`,
+    'Content-Type': 'application/json',
+  };
+
+  return config as InternalAxiosRequestConfig;
+};
+
+client.interceptors.request.use(handleHeadersWithAccessToken);
+client.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  (error: AxiosError) => Promise.reject(error),
+);
+
+export const http = {
+  get: function get<Response = unknown>(url: string, config?: AxiosRequestConfig) {
+    return client.get<APIResponse<Response>>(url, config).then((res) => res.data);
+  },
+  post: function post<Response = unknown, Request = any>(url: string, data?: Request, config?: AxiosRequestConfig) {
+    return client.post<APIResponse<Response>>(url, data, config).then((res) => res.data);
+  },
+  put: function put<Response = unknown, Request = any>(url: string, data?: Request, config?: AxiosRequestConfig) {
+    return client.put<APIResponse<Response>>(url, data, config).then((res) => res.data);
+  },
+  patch: function patch<Response = unknown, Request = any>(url: string, data?: Request, config?: AxiosRequestConfig) {
+    return client.patch<APIResponse<Response>>(url, data, config).then((res) => res.data);
+  },
+  delete: function del<Response = unknown>(url: string, config?: AxiosRequestConfig) {
+    return client.delete<APIResponse<Response>>(url, config).then((res) => res.data);
+  },
+};
+
+export const handleAxiosError = (error: any) => {
+  if (axios.isAxiosError(error)) {
+    const axiosError = error as AxiosError;
+    console.error('Axios Error:', axiosError);
+    return axiosError.response?.data as APIResponse;
+  }
+  console.log('Unknown Error: ', error);
+  return {
+    success: false,
+    msg: '알 수 없는 오류가 발생했습니다.',
+  };
+};

src/lib/const/config.ts

@@ -0,0 +1,2 @@
+export const BASE_URL = 'http://133.186.144.153:3001/api';
+export const API_TIMEOUT = 3000;

src/pages/SettingPage.tsx

@@ -1,13 +1,56 @@
-import Header from '@ui/components/layout/Header';
 import Body from '@ui/components/layout/Body';
 import Menu from '@ui/components/layout/Menu';
+import SignButton from '@ui/components/SignButton';
+import styleTokenCss from '@ui/styles/styleToken.css';
+import styled from '@emotion/styled';
+import { useNavigate } from 'react-router';
+import { PATH } from '@lib/const/path';
 
 export default function SettingPage() {
+  const navigate = useNavigate();
+
+  const handleClickLogout = () => {
+    const isLogout = confirm('로그아웃 하시겠습니까?');
+    if (isLogout) {
+      localStorage.removeItem('ACCESS_TOKEN');
+      navigate(PATH.HOME);
+    }
+  };
+
   return (
     <>
-      <Header />
-      <Body>setting page</Body>
+      <Title>마이 페이지</Title>
+      <Container>
+        <SignButton
+          text="로그아웃"
+          backgroundColor={styleTokenCss.color.secondaryActive}
+          color={styleTokenCss.color.white}
+          onClick={handleClickLogout}
+        />
+      </Container>
       <Menu />
     </>
   );
 }
+
+const Title = styled.h2`
+  background-color: ${styleTokenCss.color.background};
+  color: ${styleTokenCss.color.gray2};
+  font-size: 24px;
+  font-weight: 600;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 100px;
+  padding: 35px;
+`;
+
+const Container = styled(Body)`
+  padding: 35px;
+  justify-content: flex-start;
+  align-items: center;
+  overflow-y: auto;
+`;

src/pages/SigninPage.tsx

@@ -1,14 +1,15 @@
 import Body from '@ui/components/layout/Body';
 import styled from '@emotion/styled';
 import styleTokenCss from '@ui/styles/styleToken.css';
-import React, { ChangeEvent, useMemo, useState } from 'react';
+import React, { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { PATH } from '@lib/const/path';
 import { User, UserValidation } from '@lib/types/user';
 import NavigationHeader from '@ui/components/layout/NavigationHeader';
 import getValidationUser from '@lib/utils/getValidationUser';
 import SignButton from '@ui/components/SignButton';
 import InputBox from '@ui/components/InputBox';
+import { handleAxiosError, http } from '../api/client';
 
 export default function SigninPage() {
   const navigate = useNavigate();
@@ -41,19 +42,34 @@ export default function SigninPage() {
     [userValidation.email, userValidation.password],
   );
 
+  const handleClickSignIn = async () => {
+    if (!isDisabledSubmit) {
+      try {
+        const response = await http.post('/user/signin', {
+          email: user.email,
+          password: user.password,
+        });
+        const accessToken = response.data.user.user_token;
+        localStorage.setItem('ACCESS_TOKEN', JSON.stringify(accessToken));
+        navigate(PATH.CALENDAR);
+      } catch (e) {
+        const error = handleAxiosError(e);
+        alert(error.msg);
+      }
+    }
+  };
+
   const handlePageSignup = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
     navigate(PATH.SIGN_UP);
   };
 
-  const handleClickSignin = () => {
-    if (!isDisabledSubmit) {
-      alert('로그인에 성공했습니다.');
+  useEffect(() => {
+    const isAccessToken = localStorage.getItem('ACCESS_TOKEN');
+    if (isAccessToken) {
       navigate(PATH.CALENDAR);
-    } else {
-      alert('이메일, 비밀번호를 확인해 주세요.');
     }
-  };
+  }, [navigate]);
 
   return (
     <>
@@ -82,7 +98,7 @@ export default function SigninPage() {
         </InputContainer>
         <SignButton
           text="로그인"
-          onClick={handleClickSignin}
+          onClick={handleClickSignIn}
           disabled={isDisabledSubmit}
           backgroundColor={styleTokenCss.color.secondaryActive}
           color={styleTokenCss.color.white}

src/pages/SignupPage.tsx

@@ -1,14 +1,15 @@
 import Body from '@ui/components/layout/Body';
 import styled from '@emotion/styled';
 import styleTokenCss from '@ui/styles/styleToken.css';
-import { ChangeEvent, useMemo, useState } from 'react';
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { PATH } from '@lib/const/path';
 import { User, UserValidation } from '@lib/types/user';
 import NavigationHeader from '@ui/components/layout/NavigationHeader';
 import getValidationUser from '@lib/utils/getValidationUser';
 import SignButton from '@ui/components/SignButton';
 import InputBox from '@ui/components/InputBox';
+import { handleAxiosError, http } from '../api/client';
 
 export default function SignupPage() {
   const navigate = useNavigate();
@@ -64,9 +65,20 @@ export default function SignupPage() {
     [userValidation.email, userValidation.password, userValidation.passwordCheck, userValidation.name, isChecked],
   );
 
-  const handlePageSignUp = () => {
-    alert('회원가입에 성공했습니다!');
-    navigate(PATH.CALENDAR);
+  const handleClickSignUp = async () => {
+    try {
+      const response = await http.post('/user/signup', {
+        email: user.email,
+        password: user.password,
+        name: user.name,
+      });
+      const accessToken = response.data.user.user_token;
+      localStorage.setItem('ACCESS_TOKEN', JSON.stringify(accessToken));
+      navigate(PATH.CALENDAR);
+    } catch (e) {
+      const error = handleAxiosError(e);
+      alert(error.msg);
+    }
   };
 
   const isError = {
@@ -76,6 +88,13 @@ export default function SignupPage() {
     name: user.name.length > 0 && user.name.length < 2,
   };
 
+  useEffect(() => {
+    const isAccessToken = localStorage.getItem('ACCESS_TOKEN');
+    if (isAccessToken) {
+      navigate(PATH.CALENDAR);
+    }
+  }, [navigate]);
+
   return (
     <>
       <NavigationHeader />
@@ -139,7 +158,7 @@ export default function SignupPage() {
         <SignButton
           text="회원가입"
           disabled={isDisabledSubmit}
-          onClick={handlePageSignUp}
+          onClick={handleClickSignUp}
           backgroundColor={styleTokenCss.color.secondaryActive}
           color={styleTokenCss.color.white}
         />