Merge pull request #67 from Invincible-Backend-Study/fe/dev

fix: suspense query 리랜더링 막기
Invincible-Backend-Study · Jul 9, 2024 · b378a1c · b378a1c
2 parents ba74b0f + 080417b
commit b378a1c
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 18 deletions.
diff --git a/frontend/src/api/Interceptors.ts b/frontend/src/api/Interceptors.ts
@@ -46,7 +46,8 @@ export const handleTokenError = async(error: AxiosError<ErrorResponseData>) => {
   }
 
   if (
-    status === 400 && (data.code >= 10000 && data.code <= 10006)
+    (status === 401 || status === 400) &&
+    (data.code >= 10000 && data.code <= 10007)
   ) {
     localStorage.removeItem(TOKEN.ACCESS);
     window.location.href = PATH.AUTH;

diff --git a/frontend/src/components/InterviewForm/useInterviewForm.tsx b/frontend/src/components/InterviewForm/useInterviewForm.tsx
@@ -129,10 +129,12 @@ export const useInterviewForm = (interviewId: number) => {
       return ;
     }
     if(interviewForm.submitType === 'TailQuestion'){
+
       handleAppendUserChat({answer:interviewForm.answer})
 
       requestAiFeedback({answer: interviewForm.answer, question: interviewForm.currentTailQuestion,}, {
-        onSuccess: ({tailQuestion, feedback,score}) => {
+        onSuccess: ({tailQuestion, feedback,score, referenceLinks}) => {
+
           if(interviewForm.tailQuestionId === undefined) {
             throw Error("알 수 없는 에러가 발생했습니다")
           }
@@ -142,6 +144,7 @@ export const useInterviewForm = (interviewId: number) => {
             answerContent: interviewForm.answer,
             answerState: "COMPLETE",
             interviewQuestionId: interview.interviewQuestionId,
+            referenceLinks,
             tailQuestion: tailQuestion,
             tailQuestionId:  interviewForm.tailQuestionId,
             timeToAnswer: 1,
@@ -162,16 +165,14 @@ export const useInterviewForm = (interviewId: number) => {
 
     if(interviewForm.submitType === 'Question') {
       handleAppendUserChat({answer: interviewForm.answer});
-
       requestAiFeedback({
         answer: interviewForm.answer,
         question: interview.question
       }, {
-        onSuccess: ({ tailQuestion, feedback,score }) => {
-
-
+        onSuccess: ({ tailQuestion, feedback,score , referenceLinks}) => {
           interviewSubmitMutation.mutate({
             ...interview,
+            referenceLinks,
             answerState: "COMPLETE",
             answerContent: interviewForm.answer,
             timeToAnswer: 0,
@@ -204,6 +205,7 @@ export const useInterviewForm = (interviewId: number) => {
         answerContent: "",
         timeToAnswer: 0,
         aiFeedback: "",
+        referenceLinks: [],
         currentIndex: interview.index,
         tailQuestion: "",
         score: 0
@@ -227,6 +229,7 @@ export const useInterviewForm = (interviewId: number) => {
         answerContent: interviewForm.answer,
         answerState: "PASS",
         interviewQuestionId: interview.interviewQuestionId,
+        referenceLinks: [],
         tailQuestion: "",
         tailQuestionId:  interviewForm.tailQuestionId,
         timeToAnswer: 0,

diff --git a/frontend/src/components/InterviewResultView/InterviewResultView.tsx b/frontend/src/components/InterviewResultView/InterviewResultView.tsx
@@ -1,5 +1,5 @@
 import {useInterviewResultQuery} from "@/hooks/api/interview/useInterviewResultQuery";
-import {Chip, Spacer} from "@nextui-org/react";
+import {Chip, Link, Snippet, Spacer} from "@nextui-org/react";
 import {Fragment} from "react";
 
 
@@ -8,12 +8,12 @@ interface InterviewItemBlockProps {
   answerState: "INIT" | "PASS" | "COMPLETE",
   question: string;
   answer: string;
-  referenceLinks?: string;
+  referenceLinks: string[];
   feedback: string;
   score: number;
 }
 
-const InterviewItemBlock = ({id, answer, question, answerState, feedback, score}: InterviewItemBlockProps) => {
+const InterviewItemBlock = ({id, answer, question, answerState, feedback, score, referenceLinks}: InterviewItemBlockProps) => {
   return <section id={question} key={id} className='mb-8'>
     <h2 className='text-3xl font-semibold mb-3 flex items-center gap-1'>
       <span>{question}</span>
@@ -28,6 +28,19 @@ const InterviewItemBlock = ({id, answer, question, answerState, feedback, score}
         <span className="text-2xl">AI 피드백</span>
         <br/>{feedback}</p>
     }
+    <p className="mb-4">
+      <span className='text-2xl'>참고링크</span>
+      <br/>
+      <span className='text-sm text-danger'>해당 링크가 유효하지 않을 수 있습니다.</span>
+      <br/>
+      <div className="flex flex-col">
+        {referenceLinks.map((link, key) => <Fragment key={key}>
+          <Link href={link} key={key}>참고링크{key+1}</Link>
+          <Snippet>{link}</Snippet>
+        </Fragment>)
+        }
+      </div>
+    </p>
   </section>
 }
 
@@ -45,6 +58,7 @@ const InterviewResultView = ({interviewId}: InterviewResultViewProps) => {
         <h2 className='text-2xl font-semibold mb-2'>질문목록</h2>
         <ul className='list-disc list-inside'>
         {interviewResult.interviewQuestions.map(({interviewQuestionId, question, tailQuestions}) => (
+
             <li key={interviewQuestionId}>
               <a href={`#${question}`} className='text-blue-500 hover:underline'>{question}</a>
               <ul className='list-disc list-inside ml-4'>

diff --git a/frontend/src/components/QuestionSetItem/QuestionSetItem.tsx b/frontend/src/components/QuestionSetItem/QuestionSetItem.tsx
@@ -10,7 +10,6 @@ interface QuestionSetItemProps {
 }
 
 const QuestionSetItem = ({questionSet:{questionSetId, title, description, tailQuestionDepth, count, thumbnailUrl}, openInterviewSetting}: QuestionSetItemProps) => {
-
   const handleOpenSettings = useCallback(() => {
     openInterviewSetting({
       questionSetId,

diff --git a/frontend/src/hooks/api/interview/useInterviewQuestionLoadQuery.ts b/frontend/src/hooks/api/interview/useInterviewQuestionLoadQuery.ts
@@ -4,14 +4,20 @@ import {loadByCurrentInterviewQuestion} from "@/api/interview/LoadByCurrentInter
 
 export const useInterviewQuestionLoadQuery = (interviewId: number) => {
   // TODO: 변수명 바꾸기
-  const {data: interview, refetch, error, isFetching} = useSuspenseQuery({
+  const { data: interview, refetch, error, isFetching } = useSuspenseQuery({
     queryKey: ['loadInterviewQuestion', interviewId],
     queryFn: () => loadByCurrentInterviewQuestion(interviewId),
-    gcTime: 60 * 60 * 10,
-    staleTime: 60* 60 * 10
+    refetchOnWindowFocus:false,
+    gcTime: Infinity,
+    staleTime: Infinity
   });
 
-  return {interview, refetch, error, isLoading: isFetching}
+  return {
+    interview,
+    refetch,
+    error,
+    isLoading: isFetching
+  };
 }
 
 

diff --git a/frontend/src/types/interview.ts b/frontend/src/types/interview.ts
@@ -62,7 +62,6 @@ export interface InterviewSubmitRequest {
    */
   tailQuestion: string;
 
-
   /**
    * 답변에 걸린 시간
    */
@@ -72,12 +71,12 @@ export interface InterviewSubmitRequest {
    * 내가 작성한 답변
    */
   answerContent: string;
-
-
   /**
    * 몇점인지
    */
   score: number;
+
+  referenceLinks: string[];
 }
 
 export interface InterviewSubmitResponse {
@@ -143,7 +142,7 @@ export interface InterviewQuestionDetail {
   answerState: "INIT" | "PASS" | "COMPLETE",
   question: string;
   answer: string;
-  referenceLinks: string;
+  referenceLinks: string[];
   feedback: string;
   remainTailQuestionCount: number;
   score: number;
@@ -157,6 +156,7 @@ export interface TailQuestionDetail {
   answer: string;
   score: number;
   feedback: string;
+  referenceLinks: string[]
 }
 
 
@@ -171,4 +171,5 @@ export interface FeedbackResponse {
   score: number;
   feedback: string;
   tailQuestion: string;
+  referenceLinks: string[];
 }
diff --git a/frontend/src/types/tailQuestion.ts b/frontend/src/types/tailQuestion.ts
@@ -41,6 +41,11 @@ export interface TailQuestionSubmitRequest {
    * 내 답변에 대한 점수
    */
   score: number;
+
+  /**
+   * 참고 링크
+   */
+  referenceLinks: string[];
 }
 
 export interface TailQuestionSubmitResponse {