feat: 어드민 화면 에러페이지 추가

GDSC-Hongik · Aug 24, 2024 · b84cd6a · b84cd6a
1 parent 92657e9
commit b84cd6a
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 5 deletions.
diff --git a/apps/admin/app/error.tsx b/apps/admin/app/error.tsx
@@ -1,6 +1,56 @@
 "use client";
-const ErrorPage = () => {
-  return <div>error</div>;
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Header, Text } from "@wow-class/ui";
+import Image from "next/image";
+import Button from "wowds-ui/Button";
+
+const ErrorPage = ({ reset }: { reset: () => void }) => {
+  const handleClickResetButton = () => {
+    reset();
+  };
+
+  return (
+    <html lang="ko">
+      <body>
+        <Flex direction="column" minHeight="100vh">
+          <Header />
+          <main className={errorPageContentStyle}>
+            <Image
+              alt="error"
+              height={344}
+              src="/images/error.svg"
+              width={358}
+            />
+            <Text as="h2" typo="display2">
+              에러가 발생했어요
+            </Text>
+            <Button
+              aria-label="다시 시도"
+              style={buttonStyle}
+              onClick={handleClickResetButton}
+            >
+              다시 시도
+            </Button>
+          </main>
+        </Flex>
+      </body>
+    </html>
+  );
 };
 
 export default ErrorPage;
+
+const errorPageContentStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "48px",
+  height: "100%",
+});
+
+const buttonStyle = {
+  width: 328,
+};
diff --git a/apps/admin/app/global.css b/apps/admin/app/global.css
@@ -6,4 +6,5 @@ body {
   font-family: "SUIT" !important;
   display: flex;
   flex-direction: row;
+  min-height: 100vh;
 }
diff --git a/apps/admin/app/not-found.tsx b/apps/admin/app/not-found.tsx
@@ -1,5 +1,54 @@
-const NotFound = () => {
-  return <div>요청하신 페이지를 찾을 수 없어요.</div>;
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Header, Text } from "@wow-class/ui";
+import { routerPath } from "constants/router/routerPath";
+import Image from "next/image";
+import Link from "next/link";
+import Button from "wowds-ui/Button";
+
+const NotFoundPage = () => {
+  return (
+    <Flex direction="column" minHeight="100vh">
+      <Header />
+      <main className={notFoundPageContentStyle}>
+        <Image
+          alt="not-found"
+          height={344}
+          src="/images/not-found.svg"
+          width={358}
+        />
+        <Flex direction="column" gap="md">
+          <Text as="h2" typo="display2">
+            오류가 발생했어요
+          </Text>
+          <Text color="sub" typo="body0">
+            요청하신 페이지를 찾을 수 없어요
+          </Text>
+        </Flex>
+        <Button
+          aria-label="홈으로 이동"
+          asProp={Link}
+          href={routerPath.root.href}
+          style={buttonStyle}
+        >
+          홈으로 이동
+        </Button>
+      </main>
+    </Flex>
+  );
 };
 
-export default NotFound;
+export default NotFoundPage;
+
+const notFoundPageContentStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "48px",
+  height: "100%",
+});
+
+const buttonStyle = {
+  width: 328,
+};
diff --git a/apps/admin/public/images/error.svg b/apps/admin/public/images/error.svg
diff --git a/apps/admin/public/images/not-found.svg b/apps/admin/public/images/not-found.svg