Merge branch 'axios-error-handling'

frontend/src/apis/answer.api.ts

-import axios from "axios";
+import axios from "./axios.config";
 import { IAnswer, IAnswerRequestData } from "../types";
 import baseUrl from "./baseUrl";
 

frontend/src/apis/auth.api.ts

-import axios from "axios";
+import axios from "./axios.config";
 import { SignupUser } from "../types";
 import baseUrl from "./baseUrl";
 

frontend/src/apis/axios.config.ts

+import axios from "axios";
+
+const customAxios = axios.create();
+
+export default customAxios;

frontend/src/apis/index.ts

@@ -3,3 +3,5 @@ export * as questionApi from "./question.api";
 export * as surveyApi from "./survey.api";
 export * as answerApi from "./answer.api";
 export { baseImageUrl } from "./baseUrl";
+export { default as customAxios } from "./axios.config";
+export { useAxiosInterceptor } from "./useAxiosInterceptor";

frontend/src/apis/question.api.ts

-import axios from "axios";
+import axios from "./axios.config";
 import { IQuestionData } from "../types";
 import baseUrl from "./baseUrl";
 

frontend/src/apis/survey.api.ts

-import axios from "axios";
+import axios from "./axios.config";
 import { CreateQuestionData, IQuestionData, ISurvey } from "../types";
 import baseUrl from "./baseUrl";
 

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 />