fix: YouTubeEditForm 일정 없을 때 에러 UI 추가

- 존재하지 않는 일정 ID 접근 시 빈 화면 대신 에러 UI 표시
- 이전 페이지/일정 목록 이동 버튼 제공

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-01-22 23:06:54 +09:00
parent 5f9f9789aa
commit cfd14e01e5

View file

@ -11,6 +11,8 @@ import {
ChevronRight, ChevronRight,
Users, Users,
Check, Check,
ArrowLeft,
Calendar,
} from "lucide-react"; } from "lucide-react";
import AdminLayout from "@/components/pc/admin/layout/Layout"; import AdminLayout from "@/components/pc/admin/layout/Layout";
import Toast from "@/components/common/Toast"; import Toast from "@/components/common/Toast";
@ -55,7 +57,7 @@ function YouTubeEditForm() {
const [isInitialized, setIsInitialized] = useState(false); const [isInitialized, setIsInitialized] = useState(false);
// //
const { data: schedule, isLoading: scheduleLoading } = useQuery({ const { data: schedule, isLoading: scheduleLoading, isError: scheduleError } = useQuery({
queryKey: ["schedule", id], queryKey: ["schedule", id],
queryFn: async () => { queryFn: async () => {
const token = localStorage.getItem("adminToken"); const token = localStorage.getItem("adminToken");
@ -66,6 +68,7 @@ function YouTubeEditForm() {
return res.json(); return res.json();
}, },
enabled: isAuthenticated && !!id, enabled: isAuthenticated && !!id,
retry: false,
}); });
// //
@ -173,8 +176,59 @@ function YouTubeEditForm() {
); );
} }
if (!schedule) { if (scheduleError || !schedule) {
return null; 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" const videoUrl = videoType === "shorts"