feat: add SiteMapErrorFallback component for enhanced error handling in SiteMapErrorBoundary

Author: pepperdad

apps/ticket/src/app/(pages)/event/[eventId]/time-table/site-map/_clientBoundary/SiteMapErrorBoundary/index.tsx

@@ -2,43 +2,26 @@
 
 import { ReactNode } from "react";
 
-import { Button, Flex, Typography } from "@permit/design-system";
 import { ErrorBoundary, ErrorHandler } from "@/shared/clientBoundary/ErrorBoundary";
 import { AxiosErrorResponse, isAxiosErrorResponse } from "@/shared/types/axioxError";
 
+import { SiteMapErrorFallback } from "../SiteMapErrorFallback";
+
 type Props = {
   children: ReactNode;
+  eventId: string;
 };
 
 const NOT_FOUND_SITE_MAP_ERROR_CODE = 40429;
 
-export const SiteMapErrorBoundary = ({ children }: Props) => {
-  return <ErrorBoundary handlers={siteMapErrorHandlers}>{children}</ErrorBoundary>;
+export const SiteMapErrorBoundary = ({ children, eventId }: Props) => {
+  return <ErrorBoundary handlers={siteMapErrorHandlers({ eventId })}>{children}</ErrorBoundary>;
 };
 
-const siteMapErrorHandlers: ErrorHandler[] = [
+const siteMapErrorHandlers = ({ eventId }: { eventId: string }): ErrorHandler[] => [
   {
     isError: (error) => isSiteMapNotRegisteredError(error as AxiosErrorResponse),
-    fallback: () => (
-      <Flex
-        direction="column"
-        align="center"
-        justify="center"
-        gap={16}
-        style={{ height: "calc(100vh - 150px)" }}
-      >
-        <Typography type="title20">아직 사이트맵이 등록되지 않았어요.</Typography>
-        <Button
-          variant="primary"
-          size="md"
-          onClick={() => {
-            window.location.href = "/";
-          }}
-        >
-          홈으로 이동
-        </Button>
-      </Flex>
-    ),
+    fallback: () => <SiteMapErrorFallback eventId={eventId} />,
   },
 ];
 

apps/ticket/src/app/(pages)/event/[eventId]/time-table/site-map/_clientBoundary/SiteMapErrorFallback/index.module.scss

@@ -0,0 +1,9 @@
+.header {
+  // margin-bottom: 8px;
+  padding: 12px 16px;
+}
+
+.back_button {
+  width: 90px;
+  height: 32px;
+}

apps/ticket/src/app/(pages)/event/[eventId]/time-table/site-map/_clientBoundary/SiteMapErrorFallback/index.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import classNames from "classnames/bind";
+
+import { Button, Flex, Typography } from "@permit/design-system";
+import { useEventDetailQuery } from "@/data/events/getEventDetail/queries";
+import { LoadingWithLayout } from "@/shared/components/LoadingWithLayout";
+
+import styles from "./index.module.scss";
+
+const cx = classNames.bind(styles);
+
+type Props = {
+  eventId: string;
+};
+
+export const SiteMapErrorFallback = ({ eventId }: Props) => {
+  const router = useRouter();
+
+  const {
+    data: eventDetailData,
+    isLoading,
+    error,
+  } = useEventDetailQuery({
+    eventId,
+  });
+
+  const handleBackButtonClick = () => {
+    router.push(`/event/${eventId}`);
+  };
+
+  if (isLoading) {
+    return <LoadingWithLayout />;
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  return (
+    <>
+      <header className={cx("header")}>
+        <Flex gap={8} justify="space-between">
+          <Flex direction="column" gap={16}>
+            <Typography type="title20">{eventDetailData?.eventName}</Typography>
+
+            <Button
+              className={cx("back_button")}
+              variant="secondary"
+              onClick={handleBackButtonClick}
+            >
+              {"< back"}
+            </Button>
+
+            <Flex gap={8}>
+              <Button
+                variant="secondary"
+                onClick={() => router.push(`/event/${eventId}/time-table`)}
+              >
+                {"Timetable"}
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={() => router.push(`/event/${eventId}/time-table/site-map`)}
+              >
+                {"Sitemap"}
+              </Button>
+            </Flex>
+          </Flex>
+          <></>
+        </Flex>
+      </header>
+
+      <Flex
+        direction="column"
+        align="center"
+        justify="center"
+        gap={16}
+        style={{ height: "calc(100vh - 150px)" }}
+      >
+        <Typography type="title20">아직 사이트맵이 등록되지 않았어요.</Typography>
+        <Button
+          variant="primary"
+          size="md"
+          onClick={() => {
+            window.location.href = `/event/${eventId}`;
+          }}
+        >
+          이벤트 보기
+        </Button>
+      </Flex>
+    </>
+  );
+};

apps/ticket/src/app/(pages)/event/[eventId]/time-table/site-map/page.tsx

@@ -20,7 +20,7 @@ export default async function SiteMapPage({ params }: Props) {
   qc.prefetchQuery(siteMapOptions({ eventId }));
 
   return (
-    <SiteMapErrorBoundary>
+    <SiteMapErrorBoundary eventId={eventId}>
       <HydrationBoundary state={dehydrate(qc)}>
         <Suspense fallback={<LoadingWithLayout />}>
           <SiteMapClient eventId={eventId} />