[feat]: error page add (#38)

* [feat]: error page add

* [feat]: LoadingPage add

package.json

@@ -15,10 +15,12 @@
     "@tanstack/react-query": "^5.28.4",
     "@types/qs": "^6.9.15",
     "axios": "^1.6.8",
+    "lottie-react": "^2.4.0",
     "qs": "^6.13.0",
     "react": "^18.2.0",
     "react-calendar": "^4.8.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-router": "^6.22.3",
     "react-router-dom": "^6.22.3",
     "socket.io-client": "^4.7.5",

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { RootRouter } from './router/RootRouter';
 import { setUserAuth } from './stores/useAuthStore';
 import { showiOSInfo, webviewInit } from './webview/utils';

src/components/Layout/RootLayout/RootLayout.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import styles from './RootLayout.module.scss';
 import { Outlet } from 'react-router-dom';
 import { useAuthStore } from '@/stores/useAuthStore';
 import { showiOSInfo, webviewInit } from '@/webview/utils';
+import { ErrorBoundary } from 'react-error-boundary';
+import ErrorPage from '@/pages/Error/ErrorPage';
+import LoadingSpinner from '@/pages/Loading/LoadingSpinner';
 
 const RootLayout = () => {
   const { accessToken, uuid } = useAuthStore((state) => state);
@@ -17,7 +20,11 @@ const RootLayout = () => {
         </button>
         <button onClick={webviewInit}>초기설정</button>
       </div>
-      <Outlet />
+      <ErrorBoundary fallback={<ErrorPage />}>
+        <Suspense fallback={<LoadingSpinner />}>
+          <Outlet />
+        </Suspense>
+      </ErrorBoundary>
     </div>
   );
 };

src/hooks/api/useChat.ts

@@ -1,17 +1,17 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { fetchChatRoomMessages, fetchChatRooms } from './services/chat';
 import { ReqChatRoomMessages } from './types/chat';
 import { useAuthStore } from '@/stores/useAuthStore';
 
 export const useChatRooms = () => {
   const token = useAuthStore((state) => state.accessToken);
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: ['chatRooms', token],
     queryFn: () => {
       const res = fetchChatRooms();
       return res;
     },
-    enabled: !!token,
+    retry: 0,
   });
 };
 

src/icons/logo/ErrorLogoIcon.tsx

@@ -0,0 +1,8 @@
+import ErrorLogoSvg from '@/assets/logo/error.svg?react';
+import { IconProps } from '../types';
+
+const ErrorLogoIcon = ({ width, height, className }: IconProps) => {
+  return <ErrorLogoSvg className={className} width={width} height={height} />;
+};
+
+export default ErrorLogoIcon;

src/icons/logo/index.ts

@@ -1,2 +1,3 @@
 export { default as ReactLogoIcon } from './ReactLogoIcon';
 export { default as ViteLogoIcon } from './ViteLogoIcon';
+export { default as ErrorLogoIcon } from './ErrorLogoIcon';

src/pages/Error/Error.module.scss

@@ -0,0 +1,23 @@
+@import '@/styles/theme.scss';
+
+.ErrorWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100dvh;
+
+  > .ErrorContent {
+    margin-top: 29px;
+    text-align: center;
+
+    color: $gray600;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 32px;
+
+    > .ErrorTitle {
+      font-size: 20px;
+    }
+  }
+}

src/pages/Error/ErrorPage.tsx

@@ -0,0 +1,26 @@
+import { ErrorLogoIcon } from '@/icons/logo';
+import React from 'react';
+import styles from './Error.module.scss';
+
+interface ErrorProps {
+  type?: 'notFound' | 'error';
+}
+
+const ErrorPage = ({ type = 'error' }: ErrorProps) => {
+  const errorType = {
+    notFound: '페이지를 찾을 수 없습니다.',
+    error: '비정상적인 접근입니다.',
+  };
+  return (
+    <div className={styles.ErrorWrapper}>
+      <ErrorLogoIcon width={66} height={64} />
+      <div className={styles.ErrorContent}>
+        <div className={styles.ErrorTitle}>불편을 드려 죄송합니다</div>
+        <div>{errorType[type]}</div>
+        <div>잠시후, 다시 시도해 주세요.</div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorPage;

src/pages/Loading/LoadingSpinner.module.scss

@@ -0,0 +1,12 @@
+.LoadingSpinnerWrapper {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  width: 100dvw;
+  height: 100dvh;
+  background-color: rgba($color: #fff, $alpha: 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+}

src/pages/Loading/LoadingSpinner.tsx

@@ -0,0 +1,13 @@
+import Lottie from 'lottie-react';
+import spinnerData from './mongleloading.json';
+import styles from './Loading.module.scss';
+
+const LoadingSpinner = () => {
+  return (
+    <div className={styles.LoadingSpinnerWrapper}>
+      <Lottie loop={true} animationData={spinnerData} />
+    </div>
+  );
+};
+
+export default LoadingSpinner;

src/router/RootRouter.tsx

@@ -14,6 +14,7 @@ import {
 import LocationPage from '@/pages/Location/Location/Location';
 import ReviewPage from '@/pages/Review/Review';
 import VersionPage from '@/pages/Version/Version';
+import ErrorPage from '@/pages/Error/ErrorPage';
 
 export const RootRouter = () => {
   const router = createBrowserRouter(
@@ -30,6 +31,7 @@ export const RootRouter = () => {
         <Route path="review" element={<ReviewPage />} />
         <Route path="location" element={<LocationPage />} />
         <Route path="version" element={<VersionPage />} />
+        <Route path="*" element={<ErrorPage type="notFound" />} />
       </Route>
     )
   );

yarn.lock

@@ -131,6 +131,13 @@
   dependencies:
     "@babel/types" "^7.25.4"
 
+"@babel/runtime@^7.12.5":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.25.0":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
@@ -2070,6 +2077,18 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-react@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lottie-react/-/lottie-react-2.4.0.tgz#f7249eee2b1deee70457a2d142194fdf2456e4bd"
+  integrity sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==
+  dependencies:
+    lottie-web "^5.10.2"
+
+lottie-web@^5.10.2:
+  version "5.12.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
@@ -2466,6 +2485,13 @@ react-dom@^18.2.0:
     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:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -2509,6 +2535,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+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==
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"