91 lines
3 KiB
React
91 lines
3 KiB
React
|
import { motion } from "framer-motion";
|
||
|
|
import { Link } from "react-router-dom";
|
||
|
|
import { Home, ArrowLeft } from "lucide-react";
|
||
|
|
|
||
|
|
function NotFound() {
|
||
|
|
return (
|
||
|
|
<div className="flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
|
||
|
|
<div className="text-center px-6">
|
||
|
|
{/* 404 숫자 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.5 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
|
||
|
|
className="mb-8"
|
||
|
|
>
|
||
|
|
<h1 className="text-[180px] font-bold leading-none bg-gradient-to-br from-primary to-primary-dark bg-clip-text text-transparent select-none">
|
||
|
|
404
|
||
|
|
</h1>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* 메시지 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.2, duration: 0.5 }}
|
||
|
|
className="mb-8"
|
||
|
|
>
|
||
|
|
<h2 className="text-2xl font-bold text-gray-800 mb-3">
|
||
|
|
페이지를 찾을 수 없습니다
|
||
|
|
</h2>
|
||
|
|
<p className="text-gray-500 leading-relaxed">
|
||
|
|
요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다.
|
||
|
|
<br />
|
||
|
|
주소를 다시 확인해 주세요.
|
||
|
|
</p>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* 장식 요소 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
transition={{ delay: 0.4, duration: 0.5 }}
|
||
|
|
className="flex justify-center gap-2 mb-10"
|
||
|
|
>
|
||
|
|
{[...Array(5)].map((_, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={i}
|
||
|
|
className="w-2 h-2 rounded-full bg-primary"
|
||
|
|
animate={{
|
||
|
|
y: [0, -8, 0],
|
||
|
|
opacity: [0.3, 1, 0.3],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 1.2,
|
||
|
|
repeat: Infinity,
|
||
|
|
delay: i * 0.15,
|
||
|
|
ease: "easeInOut",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* 버튼들 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.5, duration: 0.5 }}
|
||
|
|
className="flex justify-center gap-4"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
onClick={() => window.history.back()}
|
||
|
|
className="flex items-center gap-2 px-6 py-3 border-2 border-primary text-primary rounded-full font-medium hover:bg-primary hover:text-white transition-colors duration-200"
|
||
|
|
>
|
||
|
|
<ArrowLeft size={18} />
|
||
|
|
이전 페이지
|
||
|
|
</button>
|
||
|
|
<Link
|
||
|
|
to="/"
|
||
|
|
className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-white rounded-full font-medium hover:shadow-lg hover:shadow-primary/30 transition-all duration-200"
|
||
|
|
>
|
||
|
|
<Home size={18} />
|
||
|
|
홈으로 가기
|
||
|
|
</Link>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default NotFound;
|