fix: enhance error handling in Axios interceptor and add RequiredLoginFallback component for better user experience

Author: pepperdad

apps/ticket/src/lib/axios/clientAxios.ts

@@ -61,37 +61,12 @@ clientAxios.interceptors.response.use(
           } catch (e) {
             redirectToLoginOnce();
 
-            return;
+            return Promise.reject(e);
           }
         }
       }
     }
 
-    // 로그인이 필요한 요청이거나, 리프레시 토큰 모두 만료시 로그인 페이지로 이동
-    if (isAxiosErrorResponse(error)) {
-      const { code } = error.response?.data ?? {};
-
-      // 엑세스 토큰 없음
-      if (code === ERROR_CODE.NO_ACCESS_TOKEN || code === ERROR_CODE.REFRESH_TOKEN_EXPIRED) {
-        redirectToLoginOnce();
-
-        return;
-      }
-
-      if (code === ERROR_CODE.LOGIN_REQUIRED) {
-        // 인증 페이지에서는 로그인 페이지로 이동하지 않음
-        if (window.location.pathname !== "/auth") {
-          redirectToLoginOnce();
-
-          return;
-        }
-      }
-
-      if (code === ERROR_CODE.PAYMENT) {
-        return Promise.reject(error?.response?.data);
-      }
-    }
-
     if (error?.response?.data) {
       return Promise.reject({
         ...error,

apps/ticket/src/shared/clientBoundary/ErrorBoundary/GlobalErrorBoundary/index.tsx

@@ -4,13 +4,16 @@ import { Suspense } from "react";
 
 import { AuthErrorFallback } from "@/shared/components/AuthErrorFallback";
 import { NetworkErrorFallback } from "@/shared/components/NetworkErrorFallback";
-import { isAuthError, isNetworkError } from "@/shared/types/axioxError";
+import { RequiredLoginFallback } from "@/shared/components/RequiredLoginFallback";
+import { isAuthError, isNetworkError, isNotAuthErrorResponse } from "@/shared/types/axioxError";
 
 import { ErrorBoundary, ErrorHandler } from "..";
 import { GlobalErrorPage } from "./components/GlobalErrorPage";
 
 export const GlobalErrorBoundary = ({ children }: { children: React.ReactNode }) => (
-  <ErrorBoundary handlers={[authErrorHandler, networkErrorHandler, globalErrorHandler]}>
+  <ErrorBoundary
+    handlers={[authErrorHandler, requiredLoginHandler, networkErrorHandler, globalErrorHandler]}
+  >
     <Suspense>{children}</Suspense>
   </ErrorBoundary>
 );
@@ -20,6 +23,11 @@ const authErrorHandler: ErrorHandler = {
   fallback: () => <AuthErrorFallback />,
 };
 
+const requiredLoginHandler: ErrorHandler = {
+  isError: (error) => isNotAuthErrorResponse(error),
+  fallback: () => <RequiredLoginFallback />,
+};
+
 const networkErrorHandler: ErrorHandler = {
   isError: (error) => isNetworkError(error),
   fallback: () => <NetworkErrorFallback />,

apps/ticket/src/shared/components/NetworkErrorFallback/index.tsx

@@ -12,7 +12,7 @@ export const NetworkErrorFallback = () => {
       gap={16}
       style={{ height: "calc(100vh - 150px)" }}
     >
-      <Typography type="title24">서비스에 문제가 발생했어요</Typography>
+      <Typography type="title20">네트워크 에러가 발생했어요</Typography>
       <Typography type="body14">잠시 후 다시 시도해주세요</Typography>
       <Button
         variant="primary"

apps/ticket/src/shared/components/RequiredLoginFallback/index.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { Flex, Typography } from "@permit/design-system";
+import { safeLocalStorage } from "@/lib/storage";
+import { PATH } from "@/shared/constants/path";
+import { IS_LOGINED } from "@/shared/constants/storage";
+
+// TODO: 추후 변경
+export const RequiredLoginFallback = () => {
+  useEffect(() => {
+    function redirectToLogin() {
+      alert("로그인 후 이용해 주세요.");
+      safeLocalStorage.remove(IS_LOGINED);
+
+      const redirectUrl = window.location.pathname + window.location.search;
+
+      const loginUrl = `${PATH.LOGIN}?redirectUrl=${encodeURIComponent(redirectUrl)}`;
+
+      window.location.href = loginUrl;
+    }
+
+    redirectToLogin();
+  }, []);
+
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      justify="center"
+      gap={16}
+      style={{ height: "calc(100vh" }}
+    >
+      <Typography type="title20">로그인 화면으로 이동 중이에요</Typography>
+      <Typography type="body14">잠시만 기다려주세요</Typography>
+    </Flex>
+  );
+};

apps/ticket/src/shared/types/axioxError.ts

@@ -27,7 +27,8 @@ export function isAxiosErrorResponse(error: unknown): error is AxiosErrorRespons
 export function isNotAuthErrorResponse(error: unknown): error is AxiosErrorResponse {
   return (
     isAxiosErrorResponse(error) &&
-    (error.response?.data.code === ERROR_CODE.NO_ACCESS_TOKEN ||
+    (error.response?.data.code === ERROR_CODE.LOGIN_REQUIRED ||
+      error.response?.data.code === ERROR_CODE.NO_ACCESS_TOKEN ||
       error.response?.data.code === ERROR_CODE.REFRESH_TOKEN_EXPIRED)
   );
 }