Merge pull request #208 from Team-Lecue/HOTFIX/eunbean

feat: 에러바운더리 컴포넌트 갈아끼우기

src/Router.tsx

@@ -4,6 +4,7 @@ import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { useQueryErrorResetBoundary } from 'react-query';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
+import BoundaryErrorPage from './components/common/BoundaryErrorPage';
 import ErrorPage from './components/common/ErrorPage';
 import LoadingPage from './components/common/LoadingPage';
 import CreateBook from './CreateBook/page';
@@ -56,9 +57,9 @@ function Router() {
 
 export default Router;
 
-function fallbackRender({ error }: FallbackProps) {
+function fallbackRender({ error, resetErrorBoundary }: FallbackProps) {
   if (error.response?.status === 401 || error.response?.status === 403) {
     return <Login />;
   }
-  return <ErrorPage />;
+  return <BoundaryErrorPage resetErrorBoundary={resetErrorBoundary} />;
 }

src/components/common/BoundaryErrorPage/BoundaryErrorPage.style.ts

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+
+export const ErrorPageWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100vw;
+  height: 100dvh;
+`;
+
+export const ErrorPageMessage = styled.p`
+  margin-top: 2.4rem;
+
+  color: ${({ theme }) => theme.colors.BG};
+  ${({ theme }) => theme.fonts.Title2_M_16};
+`;
+
+export const HomeButton = styled.button`
+  padding: 1.4rem 3.2rem;
+  margin-top: 3rem;
+
+  border-radius: 0.4rem;
+  background-color: ${({ theme }) => theme.colors.BG};
+  color: ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts.Title1_SB_16};
+`;

src/components/common/BoundaryErrorPage/index.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useNavigate } from 'react-router-dom';
+
+import { ImgError } from '../../../assets';
+import * as S from './BoundaryErrorPage.style';
+
+interface BoundaryErrorPageProps {
+  resetErrorBoundary: (...args: any[]) => void;
+}
+
+function BoundaryErrorPage({ resetErrorBoundary }: BoundaryErrorPageProps) {
+  const navigate = useNavigate();
+
+  const handleClickHomeButton = () => {
+    resetErrorBoundary();
+    navigate('/', { state: { step: 1 } });
+  };
+
+  return (
+    <S.ErrorPageWrapper>
+      <ImgError />
+      <S.ErrorPageMessage>이런, 오류가 발생했어요</S.ErrorPageMessage>
+      <S.HomeButton onClick={handleClickHomeButton}>홈 화면으로</S.HomeButton>
+    </S.ErrorPageWrapper>
+  );
+}
+
+export default BoundaryErrorPage;