Merge pull request #616 from TEAM-TATTOUR/S1/#612-Login-Error

[S1] 로그인 관련 예외 처리

src/Router.tsx

@@ -23,10 +23,12 @@ import MagazinePage from './page/MagazinePage';
 import CartPage from './page/CartPage';
 import ExpirationPage from './page/Expiration/ExpirationPage';
 import OrderDepositPage from './page/Order/OrderDepositPage';
+import Interceptors from './libs/hooks/Interceptors';
 
 const Router = () => {
   return (
     <BrowserRouter>
+      <Interceptors />
       <ScrollToTop />
       <Routes>
         <Route path='/list' element={<ListPage />} />

src/common/SideMenu.tsx

@@ -25,7 +25,11 @@ const SideMenu = ({ isSideMenuOpen, setIsSideMenuOpen }: SideMenuProps) => {
   };
 
   const handleClickMyTattooButton = () => {
-    navigate('/my-tattoo');
+    isLogin ? navigate('/my-tattoo') : navigate('/login');
+  };
+
+  const handleClickCartButton = () => {
+    isLogin ? navigate('/cart') : navigate('/login');
   };
 
   const NAV_MENU_ITEM = [
@@ -47,9 +51,7 @@ const SideMenu = ({ isSideMenuOpen, setIsSideMenuOpen }: SideMenuProps) => {
     {
       icon: <IcCart />,
       text: '장바구니',
-      clickHandler: () => {
-        navigate('/cart');
-      },
+      clickHandler: handleClickCartButton,
     },
   ];
 

src/components/Detail/DetailFooter.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { IcHeartDark, IcHeartLight } from '../../assets/icon';
 import { useNavigate } from 'react-router-dom';
-import { api } from '../../libs/api';
+import { api, getAccessToken } from '../../libs/api';
 import { useState } from 'react';
 import Toast from '../../common/ToastMessage/Toast';
 
@@ -28,12 +28,16 @@ const DetailFooter = ({
   const navigate = useNavigate();
   const [toast, setToast] = useState(false);
 
-  const handleClickButton = () => {
-    if (like === null) {
+  const checkLogin = () => {
+    if (!getAccessToken()) {
       // 로그인 상태가 아닌 경우
       setToast(true);
-      return;
+      return false;
     }
+  };
+
+  const handleClickButton = () => {
+    if (!checkLogin()) return;
     if (isSecond) {
       // state로 OrderPage에서 필요한 정보 넘겨주기
       navigate(`/order`, {
@@ -90,10 +94,8 @@ const DetailFooter = ({
   };
 
   const handleClickLike = () => {
-    if (like === null) {
-      // 로그인 상태가 아닌 경우
-      setToast(true);
-    } else if (like) {
+    if (!checkLogin()) return;
+    if (like) {
       // 로그인 상태인 경우
       // 만약 원래 좋아요가 눌린 상태면
       postDisliked();
@@ -105,11 +107,6 @@ const DetailFooter = ({
   };
 
   const handleCartButton = () => {
-    if (like === null) {
-      // 로그인 상태가 아닌 경우
-      setToast(true);
-      return;
-    }
     postCart();
   };
 

src/libs/hooks/Interceptors.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api, removeAccessToken } from '../api';
+
+const Interceptors = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    api.interceptors.response.use(
+      (res) => res,
+      (err) => {
+        console.log(err);
+        if (err.response.status === 401) {
+          removeAccessToken();
+          navigate('/expired');
+          return new Promise(() => null);
+        }
+        return Promise.reject(err);
+      },
+    );
+  }, []);
+
+  return null;
+};
+
+export default Interceptors;