bandosj/src/pages/NotFound.tsx

import React from 'react';
import { Link } from 'react-router-dom';
import { useScrollAnimation } from '@/hooks/useScrollAnimation';

export default function NotFound() {
  const { ref, isVisible } = useScrollAnimation({ threshold: 0.1 });

  return (
    <div ref={ref} className="min-h-screen flex items-center justify-center bg-gray-50 px-4 sm:px-8">
      <div className={`text-center max-w-md mx-auto transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
        
        {/* 404 숫자 */}
        <div className="mb-8">
          <h1 className="text-6xl sm:text-8xl lg:text-9xl font-bold text-blue-900 font-['Noto_Sans_KR'] antialiased">
            404
          </h1>
        </div>

        {/* 메시지 */}
        <div className="mb-8 space-y-4">
          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800 font-['Noto_Sans_KR'] antialiased">
            페이지를 찾을 수 없습니다
          </h2>
          <p className="text-base sm:text-lg text-gray-600 font-medium font-['Noto_Sans_KR'] antialiased leading-relaxed">
            요청하신 페이지가 존재하지 않거나<br />
            이동되었을 수 있습니다.
          </p>
        </div>

        {/* 버튼 */}
        <div className="space-y-4 sm:space-y-0 sm:space-x-4 sm:flex sm:justify-center">
          <Link 
            to="/" 
            className="inline-block w-full sm:w-auto px-6 py-3 bg-blue-900 text-white font-semibold font-['Noto_Sans_KR'] antialiased rounded-lg hover:bg-blue-800 transition-colors duration-200"
          >
            홈으로 돌아가기
          </Link>
          <button 
            onClick={() => window.history.back()} 
            className="inline-block w-full sm:w-auto px-6 py-3 border-2 border-blue-900 text-blue-900 font-semibold font-['Noto_Sans_KR'] antialiased rounded-lg hover:bg-blue-900 hover:text-white transition-colors duration-200"
          >
            이전 페이지
          </button>
        </div>

        {/* 장식적 요소 */}
        <div className="mt-12">
          <div className="w-20 h-1 bg-blue-900 mx-auto"></div>
        </div>

      </div>
    </div>
  );
}