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 분리
|
5. [ ] AlbumForm.jsx 분리
|
||||||
|
|
||||||
### Phase 3: 추가 개선
|
### Phase 3: 추가 개선
|
||||||
1. [ ] 관리자 페이지용 에러 페이지 추가 (404, 500 등)
|
1. [x] 관리자 페이지용 에러 페이지 추가 (404)
|
||||||
2. [ ] 모든 페이지 동작 확인
|
2. [ ] 모든 페이지 동작 확인
|
||||||
3. [ ] 빌드 확인
|
3. [ ] 빌드 확인
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
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