feat: 참고링크 추가

Author: JaeHongDev

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,

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'>

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[];
 }

frontend/src/types/tailQuestion.ts

@@ -41,6 +41,11 @@ export interface TailQuestionSubmitRequest {
    * 내 답변에 대한 점수
    */
   score: number;
+
+  /**
+   * 참고 링크
+   */
+  referenceLinks: string[];
 }
 
 export interface TailQuestionSubmitResponse {