Merge pull request #73 from softeerbootcamp4th/feat/CLAP-137

feat(CLAP-137): Suspense, ErrorBoundary 구성

packages/service/package.json

@@ -15,6 +15,7 @@
     "@emotion/styled": "^11.11.5",
     "@react-three/drei": "^9.108.4",
     "@react-three/fiber": "^8.16.8",
+    "@tanstack/react-query": "^5.51.11",
     "@tsparticles/react": "^3.0.0",
     "@tsparticles/slim": "^3.5.0",
     "@types/canvas-confetti": "^1.6.4",
@@ -27,6 +28,7 @@
     "react": "^18.3.1",
     "react-countdown": "^2.3.5",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.24.1",
     "react-slick": "^0.30.2",

packages/service/src/App.tsx

@@ -1,12 +1,20 @@
 import { Outlet } from "react-router-dom";
 import { GlobalNavigationBar } from "./common/components/GlobalNavigationBar";
 import { Footer } from "./common/components/Footer";
+import { Error } from "./pages/Error";
+import { Loading } from "./pages/Loading";
+import { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 
 export const App = () => {
   return (
     <div>
       <GlobalNavigationBar />
-      <Outlet />
+      <ErrorBoundary FallbackComponent={Error}>
+        <Suspense fallback={<Loading />}>
+          <Outlet />
+        </Suspense>
+      </ErrorBoundary>
       <Footer />
     </div>
   );

packages/service/src/common/utils/customFetch.ts

@@ -0,0 +1,11 @@
+export const customFetch = async (
+  url: string,
+  options?: RequestInit,
+): Promise<any> => {
+  return fetch(url, options).then((response) => {
+    if (!response.ok) {
+      throw new Error(`${response.status}`);
+    }
+    return response;
+  });
+};

packages/service/src/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import { Global } from "@emotion/react";
@@ -7,13 +6,20 @@ import { RouterProvider } from "react-router-dom";
 import { ModalProvider } from "./common/providers/ModalProvider.tsx";
 import { ModalContainer } from "./common/components/ModalContainer";
 import { globalStyles } from "@watermelon-clap/core";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { retry: 0 },
+  },
+});
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
+  <QueryClientProvider client={queryClient}>
     <ModalProvider>
       <Global styles={globalStyles} />
       <RouterProvider router={router} />
       <ModalContainer />
     </ModalProvider>
-  </React.StrictMode>,
+  </QueryClientProvider>,
 );

packages/service/src/pages/Error/Error.css.ts

@@ -0,0 +1,19 @@
+import { css } from "@emotion/react";
+import { theme } from "@watermelon-clap/core";
+
+export const errorContainerStyle = css`
+  background-image: url("/images/parts/background.svg");
+  background-size: cover;
+  background-position: center;
+
+  ${theme.flex.center}
+  ${theme.flex.column}
+  ${theme.gap.gap32}
+
+  height: 100vh;
+`;
+
+export const errorMessageStyle = css`
+  ${theme.font.preB24}
+  color: ${theme.color.white};
+`;

packages/service/src/pages/Error/Error.tsx

@@ -0,0 +1,44 @@
+import { FallbackProps } from "react-error-boundary";
+import { errorContainerStyle, errorMessageStyle } from "./Error.css";
+import { Button } from "@service/common/components/Button";
+import { theme } from "@watermelon-clap/core";
+import { useNavigate } from "react-router-dom";
+
+export const Error = ({ error, resetErrorBoundary }: FallbackProps) => {
+  const navigate = useNavigate();
+  let errorMessage;
+
+  switch (error.message) {
+    case "403":
+      errorMessage = "접근 금지: 이 리소스에 접근할 권한이 없습니다.";
+      break;
+    case "404":
+      errorMessage =
+        "페이지를 찾을 수 없습니다: 요청하신 리소스를 찾을 수 없습니다.";
+      break;
+    case "400":
+      errorMessage =
+        "잘못된 요청: 요청이 이해되지 않거나 필요한 매개변수가 누락되었습니다.";
+      break;
+    case "500":
+      errorMessage = "서버 오류: 잠시 후 다시 시도해 주세요.";
+      break;
+    default:
+      errorMessage = "예기치 못한 오류가 발생했습니다.";
+  }
+
+  const handleHomeRedirect = () => {
+    navigate("/");
+    window.location.reload();
+  };
+
+  return (
+    <div role="alert" css={errorContainerStyle}>
+      <pre css={errorMessageStyle}>{errorMessage}</pre>
+      <div css={[theme.flex.center, theme.gap.gap24]}>
+        <Button onClick={handleHomeRedirect}>홈으로</Button>
+        <Button onClick={resetErrorBoundary}>다시 시도</Button>
+      </div>
+    </div>
+  );
+};

packages/service/src/pages/Error/index.ts

@@ -0,0 +1 @@
+export { Error } from "./Error";

packages/service/src/pages/Loading/Loading.css.ts

@@ -0,0 +1,15 @@
+import { css } from "@emotion/react";
+import { theme } from "@watermelon-clap/core";
+
+export const loadingStyle = css`
+  background-image: url("/images/parts/background.svg");
+  background-size: cover;
+  background-position: center;
+
+  ${theme.flex.center}
+  ${theme.flex.column}
+  ${theme.gap.gap32}
+
+  height: 100vh;
+  color: ${theme.color.white};
+`;

packages/service/src/pages/Loading/Loading.tsx

@@ -0,0 +1,5 @@
+import { loadingStyle } from "./Loading.css";
+
+export const Loading = () => {
+  return <div css={loadingStyle}>loading...</div>;
+};

packages/service/src/pages/Loading/index.ts

@@ -0,0 +1 @@
+export { Loading } from "./Loading";