feat: 에러 페이지 구현 (#809)

* feat: 에러 페이지 구현

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

* feat: 대체 이미지 png로 설정

client/src/components/AppErrorBoundary/ErrorCatcher.test.tsx

@@ -86,7 +86,7 @@ describe('ErrorCatcher', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('알 수 없는 오류입니다.')).toBeInTheDocument();
+      expect(screen.getByText('알 수 없는 오류가 발생했습니다.')).toBeInTheDocument();
     });
   });
 });

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