From 672a61f69c7b7e64d61ab83626a7349c6bd9168e Mon Sep 17 00:00:00 2001
From: JaehongDev <println@kakao.com>
Date: Thu, 4 Jul 2024 14:14:42 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=9D=B8=ED=84=B0=EB=B7=B0=20?=
 =?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InterviewCreatorForm/InterviewCreateForm.tsx      | 11 ++++-------
 .../hooks/api/interview/useInterviewCreateMutation.ts |  3 +--
 frontend/src/pages/MainPage.tsx                       |  4 ++--
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/InterviewCreatorForm/InterviewCreateForm.tsx b/frontend/src/components/InterviewCreatorForm/InterviewCreateForm.tsx
index 8f66ce5..96355da 100644
--- 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
index ff89567..bebdcfc 100644
--- 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
index 3a99e9d..56ca22e 100644
--- 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>
   )