Feat: 에러 및 로딩 컴포넌트 구현 (#70)

* feat: 에러 바운더리 구현 * fix: 에러 페이지로 변경 * fix: 테스트 api 수정 * feat: 페이지 로딩 컴포넌트 구현 * feat: 로딩 컴포넌트 구현 * chore: 패키지 의존성 삭제 * feat: 파비콘 추가
TEAM-UNITRIP · Oct 1, 2024 · 1b6fdbc · 1b6fdbc
1 parent 192fea7
commit 1b6fdbc
Show file tree

Hide file tree

Showing 14 changed files with 197 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/unitrip-icon.svg" />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo.css"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/unitrip-icon.svg b/public/unitrip-icon.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -1,5 +1,6 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
+import Error from './components/Error';
 import Settings from './components/Settings';
 import Review from './views/Detail/components/Review';
 import DetailPage from './views/Detail/pages/DetailPage';
@@ -21,36 +22,16 @@ const router = createBrowserRouter([
       { path: '/auth/callback', element: <LoginCallBack /> },
       { path: '/detail', element: <DetailPage /> },
       { path: '/sign-up', element: <SignUpPage /> },
+      { path: '/detail', element: <DetailPage /> },
+      { path: '/detail/review/write', element: <WriteReviewPage /> },
+      { path: '/search', element: <SearchPage /> },
+      { path: '/search/:word', element: <SearchResultPage /> },
+      { path: '/mypage', element: <Mypage /> },
+      { path: '/error-report', element: <ErrorReportPage /> },
+      { path: '/map', element: <MapPage /> },
+      { path: '/error', element: <Error /> },
     ],
   },
-  {
-    path: '/:contentId',
-    element: <DetailPage />,
-    children: [{ path: 'review', element: <Review /> }],
-  },
-  { path: '/:contentId/review/write', element: <WriteReviewPage /> },
-  {
-    path: '/search',
-    element: <SearchPage />,
-    children: [{}],
-  },
-  {
-    path: '/search/:word',
-    element: <SearchResultPage />,
-  },
-  {
-    path: '/mypage',
-    element: <Mypage />,
-  },
-  { path: '/error-report', element: <ErrorReportPage /> },
-  {
-    path: '/map',
-    element: <MapPage />,
-  },
-  // {
-  //   path: "*",
-  //   element: <ErrorPage />,
-  // },
 ]);
 
 const Router = () => {

diff --git a/src/assets/icon/error_icon.svg b/src/assets/icon/error_icon.svg
diff --git a/src/assets/icon/index.ts b/src/assets/icon/index.ts
@@ -37,6 +37,7 @@ export { default as ToggleXIcon } from './toggle-x.svg?react';
 export { default as ArrowRightIcon } from './icon-arrow-right.svg?react';
 export { default as HeaderBackIcon } from './icon_header_back.svg?react';
 export { default as MypageHeartIcon } from './icon_mypage_heart.svg?react';
+export { default as ErrorIcon } from './error_icon.svg?react';
 
 export { default as CheckEmptyIcon } from './icon-check-empty.svg?react';
 export { default as CheckFilledYellowIcon } from './icon-check-fill-yellow.svg?react';

diff --git a/src/assets/image/black-spinner.gif b/src/assets/image/black-spinner.gif
diff --git a/src/assets/image/index.ts b/src/assets/image/index.ts
@@ -17,3 +17,5 @@ export { default as KakaoMarkerImage } from './img_kakaomap_marker.png';
 export { default as MapImage } from './img_map.png';
 export { default as ProfileImg } from './img_profile_default.png';
 export { default as RequestImage } from './img_request_outline.png';
+export { default as WhiteSpinnerGIF } from './white-spinner.gif';
+export { default as BlackSpinnerGIF } from './black-spinner.gif';
diff --git a/src/assets/image/white-spinner.gif b/src/assets/image/white-spinner.gif
diff --git a/src/components/Error.tsx b/src/components/Error.tsx
@@ -0,0 +1,54 @@
+import { css } from '@emotion/react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { ErrorIcon } from '@/assets/icon';
+import { COLORS, FONTS } from '@/styles/constants';
+
+const Error = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const message = location.state?.message || '알 수 없는 오류가 발생했습니다.';
+
+  return (
+    <div css={errorContainer}>
+      <ErrorIcon />
+      <span css={errorDetail}>{message}</span>
+      <button
+        css={moveBtn}
+        onClick={() => {
+          navigate(-1);
+        }}>
+        이전 페이지로
+      </button>
+    </div>
+  );
+};
+
+export default Error;
+
+const errorContainer = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  height: 100dvh;
+`;
+
+const errorDetail = css`
+  margin: 1.6rem 0 2.4rem;
+
+  color: ${COLORS.gray9};
+  ${FONTS.Body2};
+`;
+
+const moveBtn = css`
+  padding: 1rem 1.6rem;
+  border-radius: 10px;
+
+  background-color: ${COLORS.brand1};
+
+  color: ${COLORS.white};
+  ${FONTS.Body3};
+`;
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+
+import { BlackSpinnerGIF } from '@/assets/image';
+
+const Loading = () => {
+  return (
+    <div css={dataContainer}>
+      <img css={img} src={BlackSpinnerGIF} alt="spinner" />
+    </div>
+  );
+};
+
+export default Loading;
+
+const dataContainer = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  padding: 2rem;
+`;
+
+const img = css`
+  width: 8rem;
+  height: 8rem;
+`;
diff --git a/src/components/PageLoading.tsx b/src/components/PageLoading.tsx
@@ -0,0 +1,55 @@
+import { css } from '@emotion/react';
+import { useEffect } from 'react';
+
+import { WhiteSpinnerGIF } from '@/assets/image';
+import { COLORS, FONTS } from '@/styles/constants';
+
+const PageLoading = () => {
+  useEffect(() => {
+    // 스크롤 방지
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, []);
+  return (
+    <div css={dataContainer}>
+      <img css={img} src={WhiteSpinnerGIF} alt="spinner" />
+      <p css={text}>여행지를 찾고 있어요!</p>
+    </div>
+  );
+};
+
+export default PageLoading;
+
+const dataContainer = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  z-index: 999;
+
+  width: 100dvw;
+  width: 100%;
+  height: 100dvh;
+  height: 100%;
+
+  background-color: rgb(82 82 82 / 72%);
+`;
+
+const img = css`
+  width: 16rem;
+  height: 16rem;
+`;
+
+const text = css`
+  padding-top: 2rem;
+  margin-left: 2rem;
+
+  color: ${COLORS.white};
+
+  ${FONTS.H5};
+`;
diff --git a/src/views/Main/pages/MainPage.tsx b/src/views/Main/pages/MainPage.tsx
@@ -22,7 +22,7 @@ const MainPage = () => {
       const response = await getUserData(Number(isLoggedIn));
       setUserData(response);
     } catch (err) {
-      throw new Error('오류가 발생했습니다');
+      console.log(err);
     }
   }, [isLoggedIn]);
 
@@ -44,7 +44,6 @@ const MainPage = () => {
           region={userData?.region}
           favoriteList={userData?.favorite_list}
         />
-
         <div css={graySpacing} />
         <RecommendedTravel />
       </main>