api error 발생을 axios interceptor 이용 처리함

frontend/src/apis/useAxiosInterceptor.ts

+import { useEffect } from "react";
+import { NavigateFunction, useLocation } from "react-router-dom";
+import customAxios from "./axios.config";
+
+export const useAxiosInterceptor = (navigate: NavigateFunction) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    const responseInterceptor = customAxios.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response.status === 401) {
+          navigate("/login", {
+            replace: true,
+            state: { from: location.pathname },
+          });
+        }
+        return Promise.reject(error);
+      }
+    );
+
+    return () => {
+      customAxios.interceptors.response.eject(responseInterceptor);
+    };
+  }, []);
+};

frontend/src/layouts/BaseLayout.tsx

 import React from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
+import { useAxiosInterceptor } from "../apis";
 import { AuthProvider } from "../auth";
 import { Header } from "../commons";
 
 export const BaseLayout = () => {
+  const navigate = useNavigate();
+  useAxiosInterceptor(navigate);
+
   return (
     <AuthProvider>
       <Header />