From 62434aba575f5212d9cbfe85565235418debfdfe Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Mon, 12 Aug 2024 12:15:31 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20error=20boundary=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/package.json | 1 + admin/src/components/Layout/index.tsx | 14 +++++++++----- admin/src/hooks/useFetch.ts | 4 ++++ admin/src/hooks/useInfiniteFetch.ts | 4 ++++ admin/src/pages/ErrorElement/index.tsx | 22 ++++++++++++++++++++++ admin/src/router.tsx | 2 ++ admin/yarn.lock | 19 +++++++++++++++++++ 7 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 admin/src/pages/ErrorElement/index.tsx diff --git a/admin/package.json b/admin/package.json index 12509be1..1a605372 100644 --- a/admin/package.json +++ b/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": { diff --git a/admin/src/components/Layout/index.tsx b/admin/src/components/Layout/index.tsx index 2d599896..e9cc53d5 100644 --- a/admin/src/components/Layout/index.tsx +++ b/admin/src/components/Layout/index.tsx @@ -1,13 +1,17 @@ +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 ( -
-
-
- + }> +
+
+
+ +
-
+ ); } diff --git a/admin/src/hooks/useFetch.ts b/admin/src/hooks/useFetch.ts index db697c6a..3859a150 100644 --- a/admin/src/hooks/useFetch.ts +++ b/admin/src/hooks/useFetch.ts @@ -1,6 +1,9 @@ import { useState } from "react"; +import { useErrorBoundary } from "react-error-boundary"; export default function useFetch(fetch: (params: P) => Promise) { + const { showBoundary } = useErrorBoundary(); + const [data, setData] = useState(null); const [isSuccess, setIsSuccess] = useState(false); const [isError, setIsError] = useState(false); @@ -12,6 +15,7 @@ export default function useFetch(fetch: (params: P) => Promise) setIsSuccess(!!data); } catch (error) { setIsError(true); + showBoundary(error); console.error(error); } }; diff --git a/admin/src/hooks/useInfiniteFetch.ts b/admin/src/hooks/useInfiniteFetch.ts index 57b86809..fa432e48 100644 --- a/admin/src/hooks/useInfiniteFetch.ts +++ b/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 { @@ -24,6 +25,8 @@ export default function useInfiniteFetch({ getNextPageParam, startFetching = true, }: UseInfiniteFetchProps>): InfiniteScrollData { + const { showBoundary } = useErrorBoundary(); + const [data, setData] = useState([]); const [currentPageParam, setCurrentPageParam] = useState(initialPageParam); const [isLoading, setIsLoading] = useState(false); @@ -46,6 +49,7 @@ export default function useInfiniteFetch({ setTotalLength(lastPage.totalParticipants); setIsSuccess(true); } catch (error) { + showBoundary(error); setIsError(true); setIsSuccess(false); } finally { diff --git a/admin/src/pages/ErrorElement/index.tsx b/admin/src/pages/ErrorElement/index.tsx new file mode 100644 index 00000000..16b2637a --- /dev/null +++ b/admin/src/pages/ErrorElement/index.tsx @@ -0,0 +1,22 @@ +import { useNavigate } from "react-router-dom"; +import Button from "@/components/Button"; + +interface ErrorElementProps { + fallbackUrl?: string; +} + +export default function ErrorElement({ fallbackUrl = "/" }: ErrorElementProps) { + const navigate = useNavigate(); + + return ( +
+

+ 문제가 발생했습니다. 잠시 후 다시 시도해 보세요. +

+
+ +
+ ); +} diff --git a/admin/src/router.tsx b/admin/src/router.tsx index 1c9291dc..eee0db38 100644 --- a/admin/src/router.tsx +++ b/admin/src/router.tsx @@ -3,6 +3,7 @@ import { LotteryAPI } from "./apis/lotteryAPI"; import Layout from "./components/Layout"; import { ProtectedRoute, UnProtectedRoute } from "./components/Route"; import RushLayout from "./features/Rush/Layout"; +import ErrorElement from "./pages/ErrorElement"; import Login from "./pages/Login"; import Lottery from "./pages/Lottery"; import LotteryWinner from "./pages/LotteryWinner"; @@ -73,4 +74,5 @@ export const router = createBrowserRouter([ }, ], }, + { path: "*", element: }, ]); diff --git a/admin/yarn.lock b/admin/yarn.lock index 4ad19454..21ce7a5e 100644 --- a/admin/yarn.lock +++ b/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" From 55dc5ebf8cb14d2aef92329fe49c7b99ec623361 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Mon, 12 Aug 2024 12:17:37 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20Not=20Found=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/src/components/Route/index.tsx | 2 +- admin/src/pages/NotFound/index.tsx | 5 +++++ admin/src/router.tsx | 6 +++--- 3 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 admin/src/pages/NotFound/index.tsx diff --git a/admin/src/components/Route/index.tsx b/admin/src/components/Route/index.tsx index 3fc05ffb..c9877dea 100644 --- a/admin/src/components/Route/index.tsx +++ b/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]) { diff --git a/admin/src/pages/NotFound/index.tsx b/admin/src/pages/NotFound/index.tsx new file mode 100644 index 00000000..17690db7 --- /dev/null +++ b/admin/src/pages/NotFound/index.tsx @@ -0,0 +1,5 @@ +import { Navigate } from "react-router-dom"; + +export default function NotFound() { + return ; +} diff --git a/admin/src/router.tsx b/admin/src/router.tsx index eee0db38..0a2d5471 100644 --- a/admin/src/router.tsx +++ b/admin/src/router.tsx @@ -3,11 +3,11 @@ import { LotteryAPI } from "./apis/lotteryAPI"; import Layout from "./components/Layout"; import { ProtectedRoute, UnProtectedRoute } from "./components/Route"; import RushLayout from "./features/Rush/Layout"; -import ErrorElement from "./pages/ErrorElement"; import Login from "./pages/Login"; import Lottery from "./pages/Lottery"; 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 +22,7 @@ export const router = createBrowserRouter([ element: , children: [ { - path: "login/", + index: true, element: , }, ], @@ -74,5 +74,5 @@ export const router = createBrowserRouter([ }, ], }, - { path: "*", element: }, + { path: "*", element: }, ]); From e0ce8515095ad7b3d90b710239f38822fea24484 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Mon, 12 Aug 2024 12:22:26 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=EB=88=84=EB=9D=BD=EB=90=9C=20Cookie?= =?UTF-8?q?sProvider=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/src/components/Layout/index.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/admin/src/components/Layout/index.tsx b/admin/src/components/Layout/index.tsx index e9cc53d5..5a180cf9 100644 --- a/admin/src/components/Layout/index.tsx +++ b/admin/src/components/Layout/index.tsx @@ -1,3 +1,4 @@ +import { CookiesProvider } from "react-cookie"; import { ErrorBoundary } from "react-error-boundary"; import { Outlet } from "react-router-dom"; import ErrorElement from "@/pages/ErrorElement"; @@ -6,12 +7,14 @@ import Header from "../Header"; export default function Layout() { return ( }> -
-
-
- + +
+
+
+ +
-
+ ); } From dc3a541f06cfb495ad18ad108c520e8c5397a49e Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Mon, 12 Aug 2024 17:35:28 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=8B=9C=20=EC=83=88=EB=A1=9C=EA=B3=A0?= =?UTF-8?q?=EC=B9=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/src/pages/ErrorElement/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/admin/src/pages/ErrorElement/index.tsx b/admin/src/pages/ErrorElement/index.tsx index 16b2637a..22d78c0f 100644 --- a/admin/src/pages/ErrorElement/index.tsx +++ b/admin/src/pages/ErrorElement/index.tsx @@ -1,4 +1,3 @@ -import { useNavigate } from "react-router-dom"; import Button from "@/components/Button"; interface ErrorElementProps { @@ -6,7 +5,9 @@ interface ErrorElementProps { } export default function ErrorElement({ fallbackUrl = "/" }: ErrorElementProps) { - const navigate = useNavigate(); + const handleClickButton = () => { + window.location.href = fallbackUrl; + }; return (
@@ -14,7 +15,7 @@ export default function ErrorElement({ fallbackUrl = "/" }: ErrorElementProps) { 문제가 발생했습니다. 잠시 후 다시 시도해 보세요.
-