fix: YouTubeEditForm 일정 없을 때 에러 UI 추가
- 존재하지 않는 일정 ID 접근 시 빈 화면 대신 에러 UI 표시 - 이전 페이지/일정 목록 이동 버튼 제공 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
5f9f9789aa
commit
cfd14e01e5
1 changed files with 57 additions and 3 deletions
|
|
@ -11,6 +11,8 @@ import {
|
|||
ChevronRight,
|
||||
Users,
|
||||
Check,
|
||||
ArrowLeft,
|
||||
Calendar,
|
||||
} from "lucide-react";
|
||||
import AdminLayout from "@/components/pc/admin/layout/Layout";
|
||||
import Toast from "@/components/common/Toast";
|
||||
|
|
@ -55,7 +57,7 @@ function YouTubeEditForm() {
|
|||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
|
||||
// 일정 데이터 로드
|
||||
const { data: schedule, isLoading: scheduleLoading } = useQuery({
|
||||
const { data: schedule, isLoading: scheduleLoading, isError: scheduleError } = useQuery({
|
||||
queryKey: ["schedule", id],
|
||||
queryFn: async () => {
|
||||
const token = localStorage.getItem("adminToken");
|
||||
|
|
@ -66,6 +68,7 @@ function YouTubeEditForm() {
|
|||
return res.json();
|
||||
},
|
||||
enabled: isAuthenticated && !!id,
|
||||
retry: false,
|
||||
});
|
||||
|
||||
// 멤버 목록 로드
|
||||
|
|
@ -173,8 +176,59 @@ function YouTubeEditForm() {
|
|||
);
|
||||
}
|
||||
|
||||
if (!schedule) {
|
||||
return null;
|
||||
if (scheduleError || !schedule) {
|
||||
return (
|
||||
<AdminLayout user={user}>
|
||||
<div className="flex-1 flex items-center justify-center min-h-[calc(100vh-200px)]">
|
||||
<div className="text-center px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.5 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<div className="w-32 h-32 mx-auto bg-gradient-to-br from-primary/10 to-primary/5 rounded-3xl flex items-center justify-center">
|
||||
<Calendar size={64} className="text-primary/40" />
|
||||
</div>
|
||||
</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, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4, 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/schedule"
|
||||
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"
|
||||
>
|
||||
<Calendar size={18} />
|
||||
일정 목록
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
|
||||
const videoUrl = videoType === "shorts"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue