Merge pull request #120 from codeit-2team/feat/119

feat/119 404, 에러 페이지 제작

Author: BokyungCodes

public/assets/img/404-image.png

@@ -0,0 +1,28 @@
+'use client';
+
+import Button from '@/components/Button';
+
+export default function errorPage() {
+  return (
+    <main
+      className="relative flex h-screen w-screen items-center justify-center px-10 md:justify-end bg-none md:bg-[url('/assets/img/404-image.png')] bg-no-repeat bg-cover md:bg-center"
+    >
+      <div className="relative z-10 w-full max-w-1200 mx-auto px-6 md:px-12 flex justify-center md:justify-end">
+        <div className="flex flex-col items-center md:items-start gap-8 md:gap-20 text-center md:text-left max-w-xl">
+          <h1 className="text-5xl md:text-8xl font-extrabold text-nomad">OPPS!</h1>
+          <p className="text-base md:text-xl text-nomad mb-6 leading-relaxed">
+            서비스 이용에 불편을 드려 죄송합니다.<br />
+            잠시 후 다시 시도해 주세요.
+          </p>
+          <Button
+            className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-colors duration-300 bg-nomad text-white text-base"
+            variant="primary"
+            onClick={() => (window.location.href = '/')}
+          >
+            홈으로 돌아가기
+          </Button>
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/error.tsx

@@ -4,24 +4,25 @@ import Button from '@/components/Button';
 
 export default function NotFoundPage() {
   return (
-    <div className='fixed inset-0 z-[9999] flex h-screen w-screen flex-col items-center justify-center overflow-hidden bg-gray-300 text-center'>
-      <div className='z-10 w-full max-w-xl items-center justify-center space-y-6'>
-        <div className='mb-2 flex w-full items-center justify-center'></div>
-        <div className='space-y-6'>
-          <h1 className='text-primary-100 text-3xl font-bold'>
-            존재하지 않는 페이지입니다
-          </h1>
-        </div>
-        <div className='mt-12 flex w-full items-center justify-center'>
+    <main
+      className="relative flex h-screen w-screen items-center justify-center px-10 md:justify-end bg-none md:bg-[url('/assets/img/404-image.png')] bg-no-repeat bg-cover md:bg-center"
+    >
+      <div className="relative z-10 w-full max-w-1200 mx-auto px-6 md:px-12 flex justify-center md:justify-end">
+        <div className="flex flex-col items-center md:items-start gap-8 md:gap-20 text-center md:text-left max-w-xl">
+          <h1 className="text-5xl md:text-8xl font-extrabold text-nomad">404 ERROR</h1>
+          <p className="text-base md:text-xl text-nomad mb-6 leading-relaxed">
+            존재하지 않는 주소를 입력하셨거나,<br />
+            요청하신 페이지의 주소가 변경 또는 삭제되었을 수 있습니다.
+          </p>
           <Button
-            className='cursor-pointer rounded-lg border border-gray-300 bg-gray-700 py-4 text-xl font-bold text-gray-100 transition-colors hover:bg-gray-600 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-none'
-            variant='primary'
+            className="w-full max-w-200 px-30 py-16 rounded-[10px] shadow-lg hover:opacity-80 transition-colors duration-300 bg-nomad text-white text-base"
+            variant="primary"
             onClick={() => (window.location.href = '/')}
           >
             홈으로 돌아가기
           </Button>
         </div>
       </div>
-    </div>
+    </main>
   );
 }

src/app/not-found.tsx

@@ -33,4 +33,4 @@
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
-}
+}