fix: AI 퀴즈 생성 모달 Loading 화면 추가

boostcampwm-2024 · Feb 6, 2025 · 6af270e · 6af270e
1 parent a41c396
commit 6af270e
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/packages/client/src/pages/quiz-list/ui/AiQuizModal.tsx b/packages/client/src/pages/quiz-list/ui/AiQuizModal.tsx
@@ -3,6 +3,7 @@ import { LightbulbIcon } from 'lucide-react';
 import { useCreateAIQuiz } from '@/shared/hooks/quizzes';
 import { useParams } from 'react-router-dom';
 import { useQuizContext } from '@/pages/quiz-create/contexts/useQuizContext';
+import QuizLoading from '@/pages/quiz-session/ui/QuizLoading';
 
 interface AIQuizModalProps {
   onClose: () => void;
@@ -12,19 +13,23 @@ export default function AIQuizModal({ onClose }: AIQuizModalProps) {
   const { setQuizzes } = useQuizContext();
   const [prompt, setPrompt] = useState('');
   const { classId } = useParams();
-  const { mutate } = useCreateAIQuiz();
+  const { mutate, isPending } = useCreateAIQuiz();
   const handleConfirmClick = () => {
     mutate(
-      { classId: Number(classId), text: prompt},
+      { classId: Number(classId), text: prompt },
       {
         onSuccess: (data) => {
           setQuizzes(data.data.quizzes);
           onClose();
-        }
-      }
+        },
+      },
     );
   };
 
+  if (isPending) {
+    return <QuizLoading />;
+  }
+
   return (
     <form
       className="flex flex-col gap-6 bg-white rounded-lg p-8 w-full max-w-2xl mx-auto shadow-md"