caadiq
94fc7b4c7f
- PC/모바일 각각 사이트 스타일에 맞는 404 페이지 생성 - framer-motion 애니메이션 적용 - PC Layout 수정으로 푸터 하단 고정 - 모바일은 100dvh로 스크롤 없이 전체 화면 사용 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
90 lines
3 KiB
JavaScript
90 lines
3 KiB
JavaScript
import { motion } from "framer-motion";
|
|
import { Link } from "react-router-dom";
|
|
import { Home, ArrowLeft } from "lucide-react";
|
|
|
|
function MobileNotFound() {
|
|
return (
|
|
<div className="h-[100dvh] flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 px-6">
|
|
<div className="text-center">
|
|
{/* 404 숫자 */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.5 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
|
|
className="mb-6"
|
|
>
|
|
<h1 className="text-[120px] 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-6"
|
|
>
|
|
<h2 className="text-xl font-bold text-gray-800 mb-2">
|
|
페이지를 찾을 수 없습니다
|
|
</h2>
|
|
<p className="text-sm 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-8"
|
|
>
|
|
{[...Array(5)].map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="w-1.5 h-1.5 rounded-full bg-primary"
|
|
animate={{
|
|
y: [0, -6, 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 flex-col gap-3"
|
|
>
|
|
<Link
|
|
to="/"
|
|
className="flex items-center justify-center gap-2 px-6 py-3.5 bg-gradient-to-r from-primary to-primary-dark text-white rounded-full font-medium shadow-lg shadow-primary/20 active:scale-95 transition-transform"
|
|
>
|
|
<Home size={18} />
|
|
홈으로 가기
|
|
</Link>
|
|
<button
|
|
onClick={() => window.history.back()}
|
|
className="flex items-center justify-center gap-2 px-6 py-3.5 border-2 border-primary text-primary rounded-full font-medium active:bg-primary/5 transition-colors"
|
|
>
|
|
<ArrowLeft size={18} />
|
|
이전 페이지
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MobileNotFound;
|