✨ feat: fallback 페이지 생성 #67

dnd-side-project · Oct 13, 2024 · c7189d5 · c7189d5
1 parent 0c66353
commit c7189d5
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 0 deletions.
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { Metadata } from "next";
+
+import { BasicButton } from "@/components/core/Button";
+
+export const metadata: Metadata = {
+  title: "페이지를 찾을 수 없습니다.",
+};
+export default function NotFoundPage() {
+  return (
+    <section className="flex h-screen w-full items-center justify-center">
+      <div className="flex flex-col items-center justify-center gap-[16px]">
+        <svg
+          width="62"
+          height="62"
+          viewBox="0 0 62 62"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M31 49.5767C30.5929 49.5767 30.1898 49.4966 29.8137 49.3408C29.4376 49.185 29.0958 48.9566 28.808 48.6688C28.5201 48.3809 28.2918 48.0392 28.136 47.6631C27.9802 47.2869 27.9 46.8838 27.9 46.4767C27.9 46.0696 27.9802 45.6665 28.136 45.2904C28.2918 44.9143 28.5201 44.5726 28.808 44.2847C29.0958 43.9968 29.4376 43.7685 29.8137 43.6127C30.1898 43.4569 30.5929 43.3767 31 43.3767C31.8222 43.3767 32.6107 43.7033 33.192 44.2847C33.7734 44.8661 34.1 45.6546 34.1 46.4767C34.1 47.2989 33.7734 48.0874 33.192 48.6688C32.6107 49.2501 31.8222 49.5767 31 49.5767ZM28.4167 23.7873C28.4167 23.1022 28.6888 22.4451 29.1733 21.9606C29.6578 21.4762 30.3149 21.204 31 21.204C31.6851 21.204 32.3422 21.4762 32.8267 21.9606C33.3112 22.4451 33.5833 23.1022 33.5833 23.7873V36.704C33.5833 37.3891 33.3112 38.0462 32.8267 38.5307C32.3422 39.0151 31.6851 39.2873 31 39.2873C30.3149 39.2873 29.6578 39.0151 29.1733 38.5307C28.6888 38.0462 28.4167 37.3891 28.4167 36.704V23.7873ZM59.1945 48.6054L36.3708 9.07266C33.9838 4.93932 28.0163 4.93932 25.6293 9.07266L2.8055 48.6054C0.421085 52.7387 3.39967 57.9054 8.17625 57.9054H53.8237C58.5977 57.9054 61.5789 52.7387 59.1945 48.6054Z"
+            fill="#9B91FA"
+          />
+        </svg>
+        <p className="text-subtitle-semi text-gray-scale-600">
+          일시적인 오류로 서비스에 접속할 수 없어요
+        </p>
+      </div>
+
+      <BasicButton
+        as="a"
+        href="/"
+        className="fixed bottom-[30px] w-[calc(100vw-20px)] max-w-[430px]"
+        label="메인 페이지로 이동"
+      />
+    </section>
+  );
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,39 @@
+import { Metadata } from "next";
+
+import { BasicButton } from "@/components/core/Button";
+
+export const metadata: Metadata = {
+  title: "페이지를 찾을 수 없습니다.",
+};
+export default function NotFoundPage() {
+  return (
+    <section className="flex h-screen w-full items-center justify-center">
+      <div className="flex flex-col items-center justify-center gap-[16px]">
+        <svg
+          width="62"
+          height="62"
+          viewBox="0 0 62 62"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M31 49.5767C30.5929 49.5767 30.1898 49.4966 29.8137 49.3408C29.4376 49.185 29.0958 48.9566 28.808 48.6688C28.5201 48.3809 28.2918 48.0392 28.136 47.6631C27.9802 47.2869 27.9 46.8838 27.9 46.4767C27.9 46.0696 27.9802 45.6665 28.136 45.2904C28.2918 44.9143 28.5201 44.5726 28.808 44.2847C29.0958 43.9968 29.4376 43.7685 29.8137 43.6127C30.1898 43.4569 30.5929 43.3767 31 43.3767C31.8222 43.3767 32.6107 43.7033 33.192 44.2847C33.7734 44.8661 34.1 45.6546 34.1 46.4767C34.1 47.2989 33.7734 48.0874 33.192 48.6688C32.6107 49.2501 31.8222 49.5767 31 49.5767ZM28.4167 23.7873C28.4167 23.1022 28.6888 22.4451 29.1733 21.9606C29.6578 21.4762 30.3149 21.204 31 21.204C31.6851 21.204 32.3422 21.4762 32.8267 21.9606C33.3112 22.4451 33.5833 23.1022 33.5833 23.7873V36.704C33.5833 37.3891 33.3112 38.0462 32.8267 38.5307C32.3422 39.0151 31.6851 39.2873 31 39.2873C30.3149 39.2873 29.6578 39.0151 29.1733 38.5307C28.6888 38.0462 28.4167 37.3891 28.4167 36.704V23.7873ZM59.1945 48.6054L36.3708 9.07266C33.9838 4.93932 28.0163 4.93932 25.6293 9.07266L2.8055 48.6054C0.421085 52.7387 3.39967 57.9054 8.17625 57.9054H53.8237C58.5977 57.9054 61.5789 52.7387 59.1945 48.6054Z"
+            fill="#9B91FA"
+          />
+        </svg>
+        <p className="text-subtitle-semi text-gray-scale-600">
+          존재하지 않는 페이지입니다.
+        </p>
+      </div>
+
+      <BasicButton
+        as="a"
+        href="/"
+        className="fixed bottom-[30px] w-[calc(100vw-20px)] max-w-[430px]"
+        label="메인 페이지로 이동"
+      />
+    </section>
+  );
+}