feat: 현재 질문 로딩 기능 추가

Invincible-Backend-Study · Jul 4, 2024 · 5ba30d7 · 5ba30d7
1 parent 3d7b67e
commit 5ba30d7
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}
 }