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:
parent
6a96b8a5f9
commit
5f9f9789aa
3 changed files with 101 additions and 1 deletions
|
|
@ -170,7 +170,7 @@ pages/pc/admin/schedules/
|
|||
5. [ ] AlbumForm.jsx 분리
|
||||
|
||||
### Phase 3: 추가 개선
|
||||
1. [ ] 관리자 페이지용 에러 페이지 추가 (404, 500 등)
|
||||
1. [x] 관리자 페이지용 에러 페이지 추가 (404)
|
||||
2. [ ] 모든 페이지 동작 확인
|
||||
3. [ ] 빌드 확인
|
||||
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ import AdminYouTubeEditForm from '@/pages/pc/admin/schedules/edit/YouTubeEditFor
|
|||
import AdminScheduleCategory from '@/pages/pc/admin/schedules/ScheduleCategory';
|
||||
import AdminScheduleDict from '@/pages/pc/admin/schedules/ScheduleDict';
|
||||
import AdminScheduleBots from '@/pages/pc/admin/schedules/ScheduleBots';
|
||||
import AdminNotFound from '@/pages/pc/admin/common/NotFound';
|
||||
|
||||
// Mobile 페이지
|
||||
import MobileHome from '@/pages/mobile/home/Home';
|
||||
|
|
@ -92,6 +93,8 @@ function App() {
|
|||
<Route path="/admin/schedule/categories" element={<AdminScheduleCategory />} />
|
||||
<Route path="/admin/schedule/dict" element={<AdminScheduleDict />} />
|
||||
<Route path="/admin/schedule/bots" element={<AdminScheduleBots />} />
|
||||
{/* 관리자 404 페이지 */}
|
||||
<Route path="/admin/*" element={<AdminNotFound />} />
|
||||
|
||||
{/* 일반 페이지 (레이아웃 포함) */}
|
||||
<Route
|
||||
|
|
|
|||
97
frontend-temp/src/pages/pc/admin/common/NotFound.jsx
Normal file
97
frontend-temp/src/pages/pc/admin/common/NotFound.jsx
Normal 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;
|
||||
Loading…
Add table
Reference in a new issue