From 5ba30d729a8941ac8831ba54625866c9cdee6368 Mon Sep 17 00:00:00 2001
From: JaehongDev <println@kakao.com>
Date: Thu, 4 Jul 2024 15:07:46 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=EC=A7=88=EB=AC=B8?=
 =?UTF-8?q?=20=EB=A1=9C=EB=94=A9=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InterviewForm/InterviewForm.tsx           | 29 ++++++++++---------
 .../InterviewForm/useInterviewForm.tsx        |  5 ++--
 .../InterviewQuestionBoard.tsx                |  9 +++---
 .../useInterviewQuestionLoadQuery.ts          |  4 +--
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/InterviewForm/InterviewForm.tsx b/frontend/src/components/InterviewForm/InterviewForm.tsx
index ccfec93..54ae8a3 100644
--- a/frontend/src/components/InterviewForm/InterviewForm.tsx
+++ b/frontend/src/components/InterviewForm/InterviewForm.tsx
@@ -21,6 +21,7 @@ const border = "1px solid rgb(54, 54, 54)";
 const InterviewForm = ({interviewId}: InterviewFormProps) => {
   const {
     interview,
+    interviewLoading,
     handleSubmit,
     handlePass,
     chatList,
@@ -51,25 +52,25 @@ const InterviewForm = ({interviewId}: InterviewFormProps) => {
         borderLeft: border
       }}>
         <div className='p-3'>
-          <InterviewQuestionBoard question={interview.question}
-                                  chatList={chatList}
-                                  remainTailQuestionCount={remainTailQuestionCount}/>
+          <InterviewQuestionBoard
+            isLoading={interviewLoading}
+            question={interview.question}
+            chatList={chatList}
+            remainTailQuestionCount={remainTailQuestionCount}/>
         </div>
 
         <div className="gap-1 h-full flex flex-col max-h-[310px] p-4"  style={{
           borderTop:border
         }}>
-          <div>
-            <Textarea
-              placeholder="여기에 답을 적어주세요"
-              value={answer}
-              onChange={(e) => handleAnswerChange(e.target.value)}
-              minRows={10}
-              rows={10}
-              maxRows={10}
-              disabled={feedbackWaiting}
-            />
-          </div>
+          <Textarea
+            placeholder="여기에 답을 적어주세요"
+            value={answer}
+            onChange={(e) => handleAnswerChange(e.target.value)}
+            minRows={10}
+            rows={10}
+            maxRows={10}
+            disabled={feedbackWaiting}
+          />
           <div className="row-span-1 flex flex-col-reverse" >
             <InterviewController
               onQuit={quit}
diff --git a/frontend/src/components/InterviewForm/useInterviewForm.tsx b/frontend/src/components/InterviewForm/useInterviewForm.tsx
index 026586d..e5bdee5 100644
--- a/frontend/src/components/InterviewForm/useInterviewForm.tsx
+++ b/frontend/src/components/InterviewForm/useInterviewForm.tsx
@@ -23,7 +23,7 @@ interface InterviewForm {
 export const useInterviewForm = (interviewId: number) => {
 
   const navigate = useNavigate();
-  const {interview, refetch, error} = useInterviewQuestionLoadQuery(interviewId);
+  const {interview, refetch, error, isLoading: interviewLoading} = useInterviewQuestionLoadQuery(interviewId);
   const interviewSubmitMutation = useInterviewSubmitMutation();
 
   const answerFeedbackMutation = useAnswerFeedbackMutation();
@@ -228,9 +228,10 @@ export const useInterviewForm = (interviewId: number) => {
 
   return {
     interview,
+    interviewLoading,
     handleSubmit,
     handlePass,
-    feedbackWaiting: answerFeedbackMutation.isPending,
+    feedbackWaiting: answerFeedbackMutation.isPending || (interviewSubmitMutation.isPending || tailQuestionSubmitMutation.isPending),
     remainTailQuestionCount: interviewForm.remainTailQuestionCount,
     chatList: interviewForm.chatList,
     answer: interviewForm.answer,
diff --git a/frontend/src/components/InterviewQuestionBoard/InterviewQuestionBoard.tsx b/frontend/src/components/InterviewQuestionBoard/InterviewQuestionBoard.tsx
index 2683218..47e532b 100644
--- a/frontend/src/components/InterviewQuestionBoard/InterviewQuestionBoard.tsx
+++ b/frontend/src/components/InterviewQuestionBoard/InterviewQuestionBoard.tsx
@@ -4,15 +4,14 @@ import UserChat from "@/components/Chat/UserChat";
 import {Chat} from "@/types/question";
 import {useCallback, useEffect, useRef} from "react";
 
-
 interface InterviewQuestionBoardProps {
   question: string;
   remainTailQuestionCount: number;
-  chatList: Chat[]
+  chatList: Chat[],
+  isLoading: boolean;
 }
 
-const InterviewQuestionBoard = ({question, remainTailQuestionCount, chatList}: InterviewQuestionBoardProps) => {
-
+const InterviewQuestionBoard = ({question, remainTailQuestionCount, chatList, isLoading}: InterviewQuestionBoardProps) => {
   const scrollRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -38,7 +37,7 @@ const InterviewQuestionBoard = ({question, remainTailQuestionCount, chatList}: I
   return (
     <div className="max-w-full min-w-full ">
       <div className='row-span-4 col-auto'>
-        <p className='text-3xl'>{question}</p>
+        <p className='text-3xl'>{isLoading ? "질문을 가져옵니다....": question}</p>
         <TailQuestionMessage/>
 
 
diff --git a/frontend/src/hooks/api/interview/useInterviewQuestionLoadQuery.ts b/frontend/src/hooks/api/interview/useInterviewQuestionLoadQuery.ts
index 893f755..e5aa062 100644
--- a/frontend/src/hooks/api/interview/useInterviewQuestionLoadQuery.ts
+++ b/frontend/src/hooks/api/interview/useInterviewQuestionLoadQuery.ts
@@ -4,14 +4,14 @@ import {loadByCurrentInterviewQuestion} from "@/api/interview/LoadByCurrentInter
 
 export const useInterviewQuestionLoadQuery = (interviewId: number) => {
   // TODO: 변수명 바꾸기
-  const {data: interview, refetch, error} = useSuspenseQuery({
+  const {data: interview, refetch, error, isFetching} = useSuspenseQuery({
     queryKey: ['loadInterviewQuestion', interviewId],
     queryFn: () => loadByCurrentInterviewQuestion(interviewId),
     gcTime: 60 * 60 * 10,
     staleTime: 60* 60 * 10
   });
 
-  return {interview, refetch, error}
+  return {interview, refetch, error, isLoading: isFetching}
 }