refactor: 인터뷰 로딩 기능 구현

Invincible-Backend-Study · Jul 4, 2024 · 672a61f · 672a61f
1 parent a8f42e9
commit 672a61f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 11 deletions.
diff --git a/frontend/src/components/InterviewCreatorForm/InterviewCreateForm.tsx b/frontend/src/components/InterviewCreatorForm/InterviewCreateForm.tsx
@@ -2,7 +2,6 @@ import {Button, ModalBody, ModalContent, ModalHeader, Slider} from "@nextui-org/
 import {problemCount, tailQuestionCount} from "@/components/InterviewCreatorForm/InterviewCreateForm.constant";
 import {InterviewSettings} from "@/types/interview";
 import {useInterviewCreateMutation} from "@/hooks/api/interview/useInterviewCreateMutation";
-import {useCallback} from "react";
 import {useInterviewCreateForm} from "@/components/InterviewCreatorForm/useInterviewCreateForm";
 
 
@@ -46,13 +45,9 @@ interface InterviewCreateFormProps {
 }
 
 const InterviewCreateForm = ({ interviewSettings: {questionSetId, count, tailQuestionDepth}}: InterviewCreateFormProps) => {
-  const {mutate} = useInterviewCreateMutation();
+  const {mutate, isPending,isSuccess} = useInterviewCreateMutation();
   const {interviewCreateForm, handleOnChange} = useInterviewCreateForm({tailQuestionDepth, totalProblemCount:count})
 
-  const handleInterviewCreate = useCallback(() => {
-    mutate({questionSetId, ...interviewCreateForm});
-  }, [interviewCreateForm]);
-
   return (
     <ModalContent>
       {() => (
@@ -78,7 +73,9 @@ const InterviewCreateForm = ({ interviewSettings: {questionSetId, count, tailQue
           <p>*아직 지원하지 않습니다.</p>
           <InterviewSettingsSlider label={"문항 별 대기 시간"} disabled={true}/>
           <InterviewSettingsSlider label={"문항 별 제한 시간"} disabled={true}/>
-          <Button onClick={handleInterviewCreate}>면접 시작</Button>
+          <Button onClick={() => {
+            mutate({questionSetId, ...interviewCreateForm});
+          }} isLoading={isPending || isSuccess}>면접 시작</Button>
         </ModalBody>
         </>
       )}

diff --git a/frontend/src/hooks/api/interview/useInterviewCreateMutation.ts b/frontend/src/hooks/api/interview/useInterviewCreateMutation.ts
@@ -5,6 +5,7 @@ import {PATH} from "@/constants/path";
 import {toast} from "sonner";
 
 
+
 export const useInterviewCreateMutation = () => {
   const navigate = useNavigate();
   return useMutation({
@@ -14,9 +15,7 @@ export const useInterviewCreateMutation = () => {
       navigate(PATH.INTERVIEW(interviewId));
     },
     onError:(error) => {
-      console.log(error.message);
       toast.error(error.message)
     }
-
   })
 }
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -42,8 +42,8 @@ export default function(){
         {isLoading ? <QuestionSetItemListSkeleton/> : <></>}
         <div ref={ref}/>
       </div>
-      <Modal backdrop="blur" isDismissable={false} isKeyboardDismissDisabled={true} isOpen={isOpen} placement={"top"} className={`text-foreground bg-background dark`} onClose={onClose}>
-        <InterviewCreateForm interviewSettings={settings} />
+      <Modal backdrop="opaque" isDismissable={false} isKeyboardDismissDisabled={true} isOpen={isOpen} placement={"top"}  onClose={onClose}>
+        <InterviewCreateForm interviewSettings={settings}/>
       </Modal>
     </div>
   )