Merge pull request #131 from Kernel360/ui-page-error

페이지 UI: 에러 페이지
Kernel360 · Jan 26, 2024 · e48775a · e48775a
2 parents 964dc3e + 6282ffd
commit e48775a
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 0 deletions.
diff --git a/public/assets/error.png b/public/assets/error.png
diff --git a/src/app/global-error.module.scss b/src/app/global-error.module.scss
@@ -0,0 +1,3 @@
+.container {
+  padding: 0 24px;
+}
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+
+import Button from '@shared/button/Button';
+import Flex from '@shared/flex/Flex';
+import Spacing from '@shared/spacing/Spacing';
+import Text from '@shared/text/Text';
+
+import styles from './global-error.module.scss';
+
+const cx = classNames.bind(styles);
+
+function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  const backToHome = () => {
+    window.location.href = '/';
+  };
+
+  return (
+    <html lang="ko">
+      <body>
+        <Flex className={cx('container')} direction="column" align="center">
+          <Spacing size={155} />
+          <Image src="/assets/error.png" alt="에러페이지" width={250} height={180} />
+          <Text typography="t4">잠시 후 다시 확인해 주세요.</Text>
+          <Text typography="t5" color="tertiary">{error.message}</Text>
+          <Spacing size={16} />
+          <Flex align="center" gap={10}>
+            <Button
+              weak
+              size="medium"
+              onClick={() => { backToHome(); }}
+              css={{
+                display: 'block',
+                width: '100px',
+                height: '40px',
+              }}
+            >
+              홈
+            </Button>
+            <Button
+              size="medium"
+              onClick={() => { return reset(); }}
+              css={{
+                display: 'block',
+                width: '100px',
+                height: '40px',
+              }}
+            >
+              새로고칭
+            </Button>
+          </Flex>
+        </Flex>
+      </body>
+    </html>
+  );
+}
+
+export default GlobalError;