fix: AuthErrorFallback 추가

Author: pepperdad

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

@@ -2,21 +2,27 @@
 
 import { Suspense } from "react";
 
-import { isNetworkError } from "@/shared/types/axioxError";
+import { AuthErrorFallback } from "@/shared/components/AuthErrorFallback";
+import { NetworkErrorFallback } from "@/shared/components/NetworkErrorFallback";
+import { isAuthError, isNetworkError } from "@/shared/types/axioxError";
 
 import { ErrorBoundary, ErrorHandler } from "..";
 import { GlobalErrorPage } from "./components/GlobalErrorPage";
 
 export const GlobalErrorBoundary = ({ children }: { children: React.ReactNode }) => (
-  <ErrorBoundary handlers={[networkErrorHandler, globalErrorHandler]}>
+  <ErrorBoundary handlers={[authErrorHandler, networkErrorHandler, globalErrorHandler]}>
     <Suspense>{children}</Suspense>
   </ErrorBoundary>
 );
 
+const authErrorHandler: ErrorHandler = {
+  isError: (error) => isAuthError(error),
+  fallback: () => <AuthErrorFallback />,
+};
+
 const networkErrorHandler: ErrorHandler = {
   isError: (error) => isNetworkError(error),
-  fallback: () => <GlobalErrorPage />,
-  // TODO: network ErrorFallback 로 변경
+  fallback: () => <NetworkErrorFallback />,
 };
 
 // TODO: 에러바운더리 수정

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

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { LoadingWithLayout } from "../LoadingWithLayout";
+
+export const AuthErrorFallback = () => {
+  const [isLoading, setIsLoaidng] = useState(true);
+
+  useEffect(() => {
+    const tokenReissue = async () => {
+      await fetch("/api/reissue", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+      });
+
+      // 토큰 재발급 후 reload()
+      window.location.reload();
+    };
+
+    tokenReissue();
+  }, []);
+
+  if (isLoading) {
+    return <LoadingWithLayout />;
+  }
+
+  return <div></div>;
+};

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { Button, Flex, Typography } from "@permit/design-system";
+
+// TODO: 추후 변경
+export const NetworkErrorFallback = () => {
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      justify="center"
+      gap={16}
+      style={{ height: "calc(100vh - 150px)" }}
+    >
+      <Typography type="title24">서비스에 문제가 발생했어요</Typography>
+      <Typography type="body14">잠시 후 다시 시도해주세요</Typography>
+      <Button
+        variant="primary"
+        size="md"
+        onClick={() => {
+          window.location.href = "/";
+        }}
+      >
+        홈으로 이동
+      </Button>
+    </Flex>
+  );
+};

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

@@ -32,6 +32,12 @@ export function isNotAuthErrorResponse(error: unknown): error is AxiosErrorRespo
   );
 }
 
+export function isAuthError(error: Error): error is AxiosErrorResponse {
+  return (
+    isAxiosErrorResponse(error) && error.response?.data.code === ERROR_CODE.ACCESS_TOKEN_EXPIRED
+  );
+}
+
 export function isNetworkError(error: Error): error is AxiosErrorResponse {
   return isAxiosErrorResponse(error) && (error.response?.status ?? 0) >= 400;
 }