From 87e61a40816150f00b26b0688a9b69bd4066ec9a Mon Sep 17 00:00:00 2001
From: pakxe <pigkill40@naver.com>
Date: Thu, 24 Oct 2024 21:10:29 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/ErrorPage/ErrorPage.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/ErrorPage/ErrorPage.tsx b/client/src/pages/ErrorPage/ErrorPage.tsx
index 92810e668..9b3cfa733 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')} width="160px" />
+        <Text size="subTitle">알 수 없는 오류가 발생했습니다.</Text>
+        <Text size="body" css={{textAlign: 'center'}}>
+          계속 발생한다면 잠시 후 다시 시도해주세요. <br />
+          인터넷 연결 상태가 좋지 않으면 발생할 수 있습니다.
+        </Text>
+      </Flex>
     </MainLayout>
   );
 };

From 7827e311f0b728f92fa1e6491b17edb18f09f846 Mon Sep 17 00:00:00 2001
From: pakxe <pigkill40@naver.com>
Date: Thu, 24 Oct 2024 21:18:04 +0900
Subject: [PATCH 2/3] =?UTF-8?q?test:=20=EC=97=90=EB=9F=AC=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EA=B0=9C=EC=84=A0=EB=90=9C=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=9D=98=20=ED=85=8D=EC=8A=A4=ED=8A=B8=EB=A5=BC=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/AppErrorBoundary/ErrorCatcher.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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();
     });
   });
 });

From d96de3bc0d1c2bbe1ba8b795673ef6e2749abb18 Mon Sep 17 00:00:00 2001
From: pakxe <pigkill40@naver.com>
Date: Thu, 24 Oct 2024 21:19:10 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EB=8C=80=EC=B2=B4=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20png=EB=A1=9C=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/ErrorPage/ErrorPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/ErrorPage/ErrorPage.tsx b/client/src/pages/ErrorPage/ErrorPage.tsx
index 9b3cfa733..3d7ba9c8a 100644
--- a/client/src/pages/ErrorPage/ErrorPage.tsx
+++ b/client/src/pages/ErrorPage/ErrorPage.tsx
@@ -15,7 +15,7 @@ const ErrorPage = () => {
         height="80vh"
         css={{alignContent: 'center'}}
       >
-        <Image src={getImageUrl('cryingDog', 'webp')} width="160px" />
+        <Image src={getImageUrl('cryingDog', 'webp')} fallbackSrc={getImageUrl('cryingDog', 'png')} width="160px" />
         <Text size="subTitle">알 수 없는 오류가 발생했습니다.</Text>
         <Text size="body" css={{textAlign: 'center'}}>
           계속 발생한다면 잠시 후 다시 시도해주세요. <br />