From 7b835c9b3017fb2413e0dd36db96dea2de307869 Mon Sep 17 00:00:00 2001
From: Pakxe <64801796+pakxe@users.noreply.github.com>
Date: Thu, 24 Oct 2024 21:21:24 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84=20(#809)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 에러 페이지 구현

* test: 에러 페이지 테스트에서 개선된 페이지의 텍스트를 반영

* feat: 대체 이미지 png로 설정
---
 .../AppErrorBoundary/ErrorCatcher.test.tsx    |  2 +-
 client/src/pages/ErrorPage/ErrorPage.tsx      | 24 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/src/components/AppErrorBoundary/ErrorCatcher.test.tsx b/client/src/components/AppErrorBoundary/ErrorCatcher.test.tsx
index f263e18fb..e4b0bf72d 100644
--- a/client/src/components/AppErrorBoundary/ErrorCatcher.test.tsx
+++ b/client/src/components/AppErrorBoundary/ErrorCatcher.test.tsx
@@ -86,7 +86,7 @@ describe('ErrorCatcher', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('알 수 없는 오류입니다.')).toBeInTheDocument();
+      expect(screen.getByText('알 수 없는 오류가 발생했습니다.')).toBeInTheDocument();
     });
   });
 });
diff --git a/client/src/pages/ErrorPage/ErrorPage.tsx b/client/src/pages/ErrorPage/ErrorPage.tsx
index 92810e668..3d7ba9c8a 100644
--- a/client/src/pages/ErrorPage/ErrorPage.tsx
+++ b/client/src/pages/ErrorPage/ErrorPage.tsx
@@ -1,13 +1,27 @@
-import Top from '@components/Design/components/Top/Top';
+import Image from '@components/Design/components/Image/Image';
 
-import {MainLayout} from '@HDesign/index';
+import {Flex, MainLayout, Text} from '@HDesign/index';
+
+import getImageUrl from '@utils/getImageUrl';
 
 const ErrorPage = () => {
   return (
     <MainLayout>
-      <Top>
-        <Top.Line text="알 수 없는 오류입니다." emphasize={['알 수 없는 오류입니다.']} />
-      </Top>
+      <Flex
+        justifyContent="center"
+        alignItems="center"
+        flexDirection="column"
+        gap="1rem"
+        height="80vh"
+        css={{alignContent: 'center'}}
+      >
+        <Image src={getImageUrl('cryingDog', 'webp')} fallbackSrc={getImageUrl('cryingDog', 'png')} width="160px" />
+        <Text size="subTitle">알 수 없는 오류가 발생했습니다.</Text>
+        <Text size="body" css={{textAlign: 'center'}}>
+          계속 발생한다면 잠시 후 다시 시도해주세요. <br />
+          인터넷 연결 상태가 좋지 않으면 발생할 수 있습니다.
+        </Text>
+      </Flex>
     </MainLayout>
   );
 };