feat: 관리자 404 에러 페이지 추가

- pages/pc/admin/common/NotFound.jsx 생성
- AdminLayout 사용, 대시보드 이동 버튼 포함
- App.jsx에 /admin/* catch-all 라우트 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-01-22 23:03:18 +09:00
parent 6a96b8a5f9
commit 5f9f9789aa
3 changed files with 101 additions and 1 deletions

View file

@ -170,7 +170,7 @@ pages/pc/admin/schedules/
5. [ ] AlbumForm.jsx 분리 5. [ ] AlbumForm.jsx 분리
### Phase 3: 추가 개선 ### Phase 3: 추가 개선
1. [ ] 관리자 페이지용 에러 페이지 추가 (404, 500 등) 1. [x] 관리자 페이지용 에러 페이지 추가 (404)
2. [ ] 모든 페이지 동작 확인 2. [ ] 모든 페이지 동작 확인
3. [ ] 빌드 확인 3. [ ] 빌드 확인

View file

@ -38,6 +38,7 @@ import AdminYouTubeEditForm from '@/pages/pc/admin/schedules/edit/YouTubeEditFor
import AdminScheduleCategory from '@/pages/pc/admin/schedules/ScheduleCategory'; import AdminScheduleCategory from '@/pages/pc/admin/schedules/ScheduleCategory';
import AdminScheduleDict from '@/pages/pc/admin/schedules/ScheduleDict'; import AdminScheduleDict from '@/pages/pc/admin/schedules/ScheduleDict';
import AdminScheduleBots from '@/pages/pc/admin/schedules/ScheduleBots'; import AdminScheduleBots from '@/pages/pc/admin/schedules/ScheduleBots';
import AdminNotFound from '@/pages/pc/admin/common/NotFound';
// Mobile // Mobile
import MobileHome from '@/pages/mobile/home/Home'; import MobileHome from '@/pages/mobile/home/Home';
@ -92,6 +93,8 @@ function App() {
<Route path="/admin/schedule/categories" element={<AdminScheduleCategory />} /> <Route path="/admin/schedule/categories" element={<AdminScheduleCategory />} />
<Route path="/admin/schedule/dict" element={<AdminScheduleDict />} /> <Route path="/admin/schedule/dict" element={<AdminScheduleDict />} />
<Route path="/admin/schedule/bots" element={<AdminScheduleBots />} /> <Route path="/admin/schedule/bots" element={<AdminScheduleBots />} />
{/* 관리자 404 페이지 */}
<Route path="/admin/*" element={<AdminNotFound />} />
{/* 일반 페이지 (레이아웃 포함) */} {/* 일반 페이지 (레이아웃 포함) */}
<Route <Route

View file

@ -0,0 +1,97 @@
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { Home, ArrowLeft } from 'lucide-react';
import { AdminLayout } from '@/components/pc/admin';
import { useAdminAuth } from '@/hooks/pc/admin';
/**
* 관리자 404 페이지
*/
function AdminNotFound() {
const { user } = useAdminAuth();
return (
<AdminLayout user={user}>
<div className="flex-1 flex items-center justify-center min-h-[calc(100vh-200px)]">
<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-[150px] 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">
요청하신 관리자 페이지가 존재하지 않거나 이동되었을 있습니다.
</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-xl font-medium hover:bg-primary hover:text-white transition-colors duration-200"
>
<ArrowLeft size={18} />
이전 페이지
</button>
<Link
to="/admin/dashboard"
className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-white rounded-xl font-medium hover:shadow-lg hover:shadow-primary/30 transition-all duration-200"
>
<Home size={18} />
대시보드로 가기
</Link>
</motion.div>
</div>
</div>
</AdminLayout>
);
}
export default AdminNotFound;