Merge pull request #136 from softeerbootcamp4th/feat/#130-error-handling

[Feat] 어드민 - Error handling 구현

admin/package.json

@@ -14,6 +14,7 @@
     "react": "^18.3.1",
     "react-cookie": "^7.2.0",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-router-dom": "^6.25.1"
   },
   "devDependencies": {

admin/src/components/Layout/index.tsx

@@ -1,13 +1,20 @@
+import { CookiesProvider } from "react-cookie";
+import { ErrorBoundary } from "react-error-boundary";
 import { Outlet } from "react-router-dom";
+import ErrorElement from "@/pages/ErrorElement";
 import Header from "../Header";
 
 export default function Layout() {
     return (
-        <div className="overflow-hidden h-screen">
-            <Header />
-            <div className="mb-[80px]">
-                <Outlet />
-            </div>
-        </div>
+        <ErrorBoundary fallback={<ErrorElement />}>
+            <CookiesProvider>
+                <div className="overflow-hidden h-screen">
+                    <Header />
+                    <div className="mb-[80px]">
+                        <Outlet />
+                    </div>
+                </div>
+            </CookiesProvider>
+        </ErrorBoundary>
     );
 }

admin/src/components/Route/index.tsx

@@ -6,7 +6,7 @@ interface RouteProps {
     redirectPath?: string;
 }
 
-export function ProtectedRoute({ redirectPath = "/login" }: RouteProps) {
+export function ProtectedRoute({ redirectPath = "/" }: RouteProps) {
     const [cookies] = useCookies([COOKIE_KEY.ACCESS_TOKEN]);
 
     if (!cookies[COOKIE_KEY.ACCESS_TOKEN]) {

admin/src/hooks/useFetch.ts

@@ -1,6 +1,9 @@
 import { useState } from "react";
+import { useErrorBoundary } from "react-error-boundary";
 
 export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>) {
+    const { showBoundary } = useErrorBoundary();
+
     const [data, setData] = useState<T | null>(null);
     const [isSuccess, setIsSuccess] = useState<boolean>(false);
     const [isError, setIsError] = useState<boolean>(false);
@@ -12,6 +15,7 @@ export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>)
             setIsSuccess(!!data);
         } catch (error) {
             setIsError(true);
+            showBoundary(error);
             console.error(error);
         }
     };

admin/src/hooks/useInfiniteFetch.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { useErrorBoundary } from "react-error-boundary";
 import { InfiniteListData } from "@/types/common";
 
 interface UseInfiniteFetchProps<R> {
@@ -24,6 +25,8 @@ export default function useInfiniteFetch<T>({
     getNextPageParam,
     startFetching = true,
 }: UseInfiniteFetchProps<InfiniteListData<T>>): InfiniteScrollData<T> {
+    const { showBoundary } = useErrorBoundary();
+
     const [data, setData] = useState<T[]>([]);
     const [currentPageParam, setCurrentPageParam] = useState<number | undefined>(initialPageParam);
     const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -46,6 +49,7 @@ export default function useInfiniteFetch<T>({
             setTotalLength(lastPage.totalParticipants);
             setIsSuccess(true);
         } catch (error) {
+            showBoundary(error);
             setIsError(true);
             setIsSuccess(false);
         } finally {

admin/src/pages/ErrorElement/index.tsx

@@ -0,0 +1,23 @@
+import Button from "@/components/Button";
+
+interface ErrorElementProps {
+    fallbackUrl?: string;
+}
+
+export default function ErrorElement({ fallbackUrl = "/" }: ErrorElementProps) {
+    const handleClickButton = () => {
+        window.location.href = fallbackUrl;
+    };
+
+    return (
+        <div className="fixed z-10 h-screen w-full bg-n-neutral-950 flex flex-col justify-center items-center">
+            <h3 className="h-heading-3-bold text-n-white">
+                문제가 발생했습니다. 잠시 후 다시 시도해 보세요.
+            </h3>
+            <div className="mt-12" />
+            <Button buttonSize="lg" onClick={handleClickButton}>
+                돌아가기
+            </Button>
+        </div>
+    );
+}

admin/src/pages/NotFound/index.tsx

@@ -0,0 +1,5 @@
+import { Navigate } from "react-router-dom";
+
+export default function NotFound() {
+    return <Navigate to="/" replace />;
+}

admin/src/router.tsx

@@ -8,6 +8,7 @@ import Lottery from "./pages/Lottery";
 import LotteryParticipantList from "./pages/LotteryParticipantList";
 import LotteryWinner from "./pages/LotteryWinner";
 import LotteryWinnerList from "./pages/LotteryWinnerList";
+import NotFound from "./pages/NotFound";
 import Rush from "./pages/Rush";
 import RushPrizeForm from "./pages/RushPrizeForm";
 import RushSelectForm from "./pages/RushSelectForm";
@@ -22,7 +23,7 @@ export const router = createBrowserRouter([
                 element: <UnProtectedRoute />,
                 children: [
                     {
-                        path: "login/",
+                        index: true,
                         element: <Login />,
                     },
                 ],
@@ -78,4 +79,5 @@ export const router = createBrowserRouter([
             },
         ],
     },
+    { path: "*", element: <NotFound /> },
 ]);

admin/yarn.lock

@@ -192,6 +192,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
+"@babel/runtime@^7.12.5":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
+  integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315"
@@ -2506,6 +2513,13 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-error-boundary@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz#80386b7b27b1131c5fbb7368b8c0d983354c7947"
+  integrity sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -2565,6 +2579,11 @@ reflect.getprototypeof@^1.0.4:
     globalthis "^1.0.3"
     which-builtin-type "^1.1.3"
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regexp.prototype.flags@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"