Merge pull request #89 from Nexters/feat/#74

[Feat/#74] 커스텀 404, 500페이지 추가

Author: Jxxunnn

src/app/error.tsx

@@ -0,0 +1,44 @@
+"use client";
+import InternalServerErrorImage from "@/shared/assets/images/500.png";
+import Button from "@/shared/components/Button";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { css } from "styled-components";
+
+export default function Error() {
+  const router = useRouter();
+
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        margin-top: 150px;
+
+        width: 100%;
+        max-width: 600px;
+        margin-inline: auto;
+      `}
+    >
+      <Image
+        src={InternalServerErrorImage}
+        alt=""
+        style={{ width: "100%", height: "100%" }}
+        css={css`
+          aspect-ratio: 376 / 328;
+        `}
+      />
+      <Button
+        color="grey70"
+        css={css`
+          width: 107px;
+          margin-inline: auto;
+          margin-top: 12px;
+        `}
+        onClick={() => router.push("/")}
+      >
+        돌아가기
+      </Button>
+    </div>
+  );
+}

src/app/not-found.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import NotFoundImage from "@/shared/assets/images/404.png";
+import Button from "@/shared/components/Button";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { css } from "styled-components";
+export default function NotFound() {
+  const router = useRouter();
+
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        margin-top: 150px;
+
+        width: 100%;
+        max-width: 600px;
+        margin-inline: auto;
+      `}
+    >
+      <Image
+        src={NotFoundImage}
+        alt=""
+        style={{ width: "100%", height: "100%" }}
+        css={css`
+          aspect-ratio: 376 / 328;
+        `}
+      />
+      <Button
+        color="grey70"
+        css={css`
+          width: 107px;
+          margin-inline: auto;
+          margin-top: 12px;
+        `}
+        onClick={() => router.push("/")}
+      >
+        돌아가기
+      </Button>
+    </div>
+  );
+}