answer type 배열로 변경

frontend/src/commons/ACheckboxForm.tsx

@@ -3,7 +3,7 @@ import { CheckboxType, AnswersType } from "../types";
 
 type Props = {
   element: CheckboxType;
-  answers: AnswersType;
+  answers: AnswersType | undefined;
   handleAnswer: () => void;
 };
 
@@ -17,7 +17,7 @@ export const ACheckboxForm = ({ element, answers, handleAnswer }: Props) => {
     //     a.answer = value;
     //   }
     // });
-    answers[element._id] = value;
+    answers && (answers.answer = value);
     setAnswer(value);
     handleAnswer();
   };

frontend/src/commons/ADateForm.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { DateType, AnswersType } from "../types";
 type Props = {
   element: DateType;
-  answers: AnswersType;
+  answers: AnswersType | undefined;
   handleAnswer: () => void;
 };
 export const ADateForm = ({ element, answers, handleAnswer }: Props) => {
@@ -14,7 +14,7 @@ export const ADateForm = ({ element, answers, handleAnswer }: Props) => {
     //     a.answer = value;
     //   }
     // });
-    answers[element._id] = value;
+    answers && (answers.answer = value);
     setAnswer(value);
     handleAnswer();
   };

frontend/src/commons/ADropdownForm.tsx

@@ -3,7 +3,7 @@ import { DropdownType, AnswersType } from "../types";
 
 type Props = {
   element: DropdownType;
-  answers: AnswersType;
+  answers: AnswersType | undefined;
   handleAnswer: () => void;
 };
 
@@ -17,7 +17,7 @@ export const ADropdownForm = ({ element, handleAnswer, answers }: Props) => {
     //     a.answer = value;
     //   }
     // });
-    answers[element._id] = value;
+    answers && (answers.answer = value);
     setAnswer(value);
     handleAnswer();
   };

frontend/src/commons/AEssayForm.tsx

@@ -3,15 +3,11 @@ import { EssayType, AnswersType } from "../types";
 
 type Props = {
   element: EssayType;
-  answers: AnswersType;
+  answers: AnswersType | undefined;
   handleAnswer: () => void;
 };
 
-export const AEssayForm = ({
-  element,
-  handleAnswer,
-  answers: answers,
-}: Props) => {
+export const AEssayForm = ({ element, handleAnswer, answers }: Props) => {
   const [answer, setAnswer] = useState("");
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -21,7 +17,7 @@ export const AEssayForm = ({
     //     a.answer = value;
     //   }
     // });
-    answers[element._id] = value;
+    answers && (answers.answer = value);
     setAnswer(value);
     handleAnswer();
   };

frontend/src/commons/AFileForm.tsx

@@ -3,7 +3,7 @@ import { FileType, AnswersType } from "../types";
 
 type Props = {
   element: FileType;
-  answers: AnswersType;
+  answers: AnswersType | undefined;
   handleAnswer: () => void;
   addFiles: (oneFile: { questionId: string; file: File }) => void;
 };
@@ -23,7 +23,7 @@ export const AFileForm = ({
       //     a.answer = uploadFile.name;
       //   }
       // });
-      answers[element._id] = uploadFile.name;
+      answers && (answers.answer = uploadFile.name);
       handleAnswer();
     }
   };

frontend/src/commons/AQuestion.tsx

@@ -10,14 +10,14 @@ import { ARatingForm } from "./ARatingForm";
 
 type Props = {
   question: BasicQuestionType;
-  answers: AnswersType;
+  answer: AnswersType | undefined;
   handleAnswer: () => void;
   addFiles: (oneFile: { questionId: string; file: File }) => void;
 };
 export const AQuestion = ({
   question,
   handleAnswer,
-  answers: answers,
+  answer,
   addFiles,
 }: Props) => {
   function getContent(question: BasicQuestionType) {
@@ -26,7 +26,7 @@ export const AQuestion = ({
         return (
           <AEssayForm
             element={question}
-            answers={answers}
+            answers={answer}
             handleAnswer={handleAnswer}
           />
         );
@@ -34,7 +34,7 @@ export const AQuestion = ({
         return (
           <ARadioForm
             element={question}
-            answers={answers}
+            answers={answer}
             handleAnswer={handleAnswer}
           />
         );
@@ -42,7 +42,7 @@ export const AQuestion = ({
         return (
           <ACheckboxForm
             element={question}
-            answers={answers}
+            answers={answer}
             handleAnswer={handleAnswer}
           />
         );
@@ -50,7 +50,7 @@ export const AQuestion = ({
         return (
           <ADropdownForm
             element={question}
-            answers={answers}
+            answers={answer}
             handleAnswer={handleAnswer}
           />
         );
@@ -58,7 +58,7 @@ export const AQuestion = ({
         return (
           <AFileForm
             element={question}
-            answers={answers}
+            answers={answer}
             handleAnswer={handleAnswer}
             addFiles={addFiles}
           />
@@ -67,7 +67,7 @@ export const AQuestion = ({
         return (
           <ARatingForm
             element={question}
-            answers={answers}
+            answers={answer}
             handleAnswer={handleAnswer}
           />
         );
@@ -75,7 +75,7 @@ export const AQuestion = ({
         return (
           <ADateForm
             element={question}
-            answers={answers}
+            answers={answer}
             handleAnswer={handleAnswer}
           />
         );

frontend/src/commons/ARadioForm.tsx

@@ -3,7 +3,7 @@ import { RadioType, AnswersType } from "../types";
 
 type Props = {
   element: RadioType;
-  answers: AnswersType;
+  answers: AnswersType | undefined;
   handleAnswer: () => void;
 };
 
@@ -17,7 +17,7 @@ export const ARadioForm = ({ element, answers, handleAnswer }: Props) => {
     //     a.answer = value;
     //   }
     // });
-    answers[element._id] = value;
+    answers && (answers.answer = value);
     setAnswer(value);
     handleAnswer();
   };

frontend/src/commons/ARatingForm.tsx

@@ -3,7 +3,7 @@ import { RatingType, AnswersType } from "../types";
 
 type Props = {
   element: RatingType;
-  answers: AnswersType;
+  answers: AnswersType | undefined;
   handleAnswer: () => void;
 };
 
@@ -19,7 +19,7 @@ export const ARatingForm = ({ element, answers, handleAnswer }: Props) => {
     //     a.answer = name;
     //   }
     // });
-    answers[element._id] = name;
+    answers && (answers.answer = name);
     setAnswer(name);
     setSelectedchoice(event.currentTarget.name);
     handleAnswer();

frontend/src/commons/SurveyForm.tsx

@@ -22,25 +22,22 @@ export const SurveyForm = () => {
   const answer = useRef<AnswerType>({
     surveyId: "surveyId",
     guestId: "",
-    answers: {},
+    answers: [],
   });
 
-  useEffect(() => {
-    ansSurvey();
-  }, [surveyId]);
-
   const addFiles = (oneFile: { questionId: string; file: File }) => {
     if (!files.find((a) => a.questionId === oneFile.questionId)) {
       setFiles([...files, oneFile]);
     }
   };
+
   async function ansSurvey() {
     try {
       if (surveyId) {
         const answersurvey: any = await surveyApi.ansSurvey(surveyId);
         console.log(answersurvey);
         const questionIds = answersurvey.questions.map((el: any) => {
-          return { questionId: el._id, answer: "" };
+          return { questionId: el._id, type: el.type, answer: "" };
         });
         console.log(questionIds);
         if (answersurvey) {
@@ -49,6 +46,10 @@ export const SurveyForm = () => {
           //   surveyId: answersurvey._id,
           //   answers: questionIds,
           // });
+          answer.current.surveyId = answersurvey._id;
+          answer.current.guestId = answersurvey.guestId;
+          answer.current.answers = questionIds;
+
           setSurvey(answersurvey);
           setSuccess(true);
           setError("");
@@ -63,6 +64,10 @@ export const SurveyForm = () => {
     }
   }
 
+  useEffect(() => {
+    ansSurvey();
+  }, [surveyId]);
+
   async function handleSubmit(event: FormEvent) {
     event.preventDefault();
     try {
@@ -104,7 +109,9 @@ export const SurveyForm = () => {
               return (
                 <AQuestion
                   question={question}
-                  answers={answer.current.answers}
+                  answer={answer.current.answers.find(
+                    (ans) => ans.questionId === question._id
+                  )}
                   addFiles={addFiles}
                   handleAnswer={handleAnswer}
                 ></AQuestion>

frontend/src/types/index.ts

@@ -83,11 +83,13 @@ export interface RatingType extends BasicQuestionType {
 }
 
 export interface AnswersType {
-  [questionId: string]: any;
+  questionId: string;
+  type: string;
+  answer: any;
 }
 
 export interface AnswerType {
   surveyId: string;
   guestId: string;
-  answers: AnswersType;
+  answers: AnswersType[];
 }