Merge pull request #82 from part3-4team-Taskify/feature/NotFound

[Feat] 404: 시간 경과 시 홈페이지 이동 기능, 홈페이지 이동하기 버튼 추가

Author: gyoyeon-kim

src/pages/404.tsx

@@ -1,10 +1,32 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+
 export default function Custom404() {
+  const router = useRouter();
+
+  const goToMain = () => {
+    router.push("/");
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      router.push("/");
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, [router]);
+
   return (
-    <div className="flex flex-col items-center justify-center h-screen text-center">
-      <h1 className="text-4xl font-bold text-[var(--primary)]">
-        404 Not Found
-      </h1>
-      <p className="mt-2 text-lg text-black3">페이지를 찾을 수 없습니다.</p>
+    <div className="flex flex-col items-center justify-center text-center h-screen bg-[var(--color-gray5)] gap-2">
+      <h1 className="font-24b text-[var(--primary)]">404 Not Found</h1>
+      <p className="font-16r text-black3">페이지를 찾을 수 없습니다.</p>
+      <p className="font-16r text-black3">5초 후 홈페이지로 이동합니다.</p>
+      <button
+        onClick={goToMain}
+        className="w-[200px] h-[50px] bg-[var(--primary)] font-16m text-white rounded-lg cursor-pointer"
+      >
+        홈페이지 이동하기
+      </button>
     </div>
   );
 }