설문 응답 폴더 구조 변경

frontend/src/commons/ACheckboxForm.tsx → frontend/src/answers/ACheckboxForm.tsx

 import React, { useState } from "react";
-import { CheckboxType, AnswersType } from "../types";
+import { CheckboxType, AnswersType, AnswerProps } from "../types";
 
-type Props = {
+interface Props extends AnswerProps {
   element: CheckboxType;
-  answers: AnswersType | undefined;
-  handleAnswer: () => void;
-};
+}
 
 export const ACheckboxForm = ({ element, answers, handleAnswer }: Props) => {
   const [answer, setAnswer] = useState("");
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.currentTarget;
-    // response.answers.map((a) => {
-    //   if (a.questionId === element._id) {
-    //     a.answer = value;
-    //   }
-    // });
     answers && (answers.answer = value);
     setAnswer(value);
     handleAnswer();

frontend/src/commons/ADateForm.tsx → frontend/src/answers/ADateForm.tsx

 import React, { useState } from "react";
-import { DateType, AnswersType } from "../types";
-type Props = {
-  element: DateType;
-  answers: AnswersType | undefined;
-  handleAnswer: () => void;
-};
-export const ADateForm = ({ element, answers, handleAnswer }: Props) => {
+import { AnswerProps } from "../types";
+
+export const ADateForm = ({ element, answers, handleAnswer }: AnswerProps) => {
   const [answer, setAnswer] = useState("");
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.currentTarget;

frontend/src/commons/ADropdownForm.tsx → frontend/src/answers/ADropdownForm.tsx

 import React, { useState } from "react";
-import { DropdownType, AnswersType } from "../types";
+import { DropdownType, AnswerProps } from "../types";
 
-type Props = {
+interface Props extends AnswerProps {
   element: DropdownType;
-  answers: AnswersType | undefined;
-  handleAnswer: () => void;
-};
+}
 
 export const ADropdownForm = ({ element, handleAnswer, answers }: Props) => {
   const [answer, setAnswer] = useState("");
 
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const { value } = event.currentTarget;
-    // response.answers.map((a) => {
-    //   if (a.questionId === element._id) {
-    //     a.answer = value;
-    //   }
-    // });
     answers && (answers.answer = value);
     setAnswer(value);
     handleAnswer();

frontend/src/commons/AEssayForm.tsx → frontend/src/answers/AEssayForm.tsx

 import React, { useState } from "react";
-import { EssayType, AnswersType } from "../types";
+import { AnswerProps } from "../types";
 
-type Props = {
-  element: EssayType;
-  answers: AnswersType | undefined;
-  handleAnswer: () => void;
-};
-
-export const AEssayForm = ({ element, handleAnswer, answers }: Props) => {
+export const AEssayForm = ({ element, handleAnswer, answers }: AnswerProps) => {
   const [answer, setAnswer] = useState("");
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.currentTarget;
-    // response.answers.map((a) => {
-    //   if (a.questionId === element._id) {
-    //     a.answer = value;
-    //   }
-    // });
     answers && (answers.answer = value);
     setAnswer(value);
     handleAnswer();

frontend/src/commons/AFileForm.tsx → frontend/src/answers/AFileForm.tsx

 import React, { useState } from "react";
-import { FileType, AnswersType } from "../types";
+import { FileType, AnswersType, AnswerProps } from "../types";
 
-type Props = {
+interface Props extends AnswerProps {
   element: FileType;
-  answers: AnswersType | undefined;
-  handleAnswer: () => void;
   addFiles: (oneFile: { questionId: string; file: File }) => void;
-};
+}
 
 export const AFileForm = ({
   element,
@@ -18,11 +16,6 @@ export const AFileForm = ({
     if (event.currentTarget.files) {
       const uploadFile = event.currentTarget.files[0];
       addFiles({ questionId: element._id, file: uploadFile });
-      // response.answers.map((a) => {
-      //   if (a.questionId === element._id) {
-      //     a.answer = uploadFile.name;
-      //   }
-      // });
       answers && (answers.answer = uploadFile.name);
       handleAnswer();
     }

frontend/src/commons/AQuestion.tsx → frontend/src/answers/AQuestion.tsx

 import React from "react";
-import { BasicQuestionType, AnswersType } from "../types";
+import { BasicQuestionType, AnswersType, AnswerProps } from "../types";
 import { ACheckboxForm } from "./ACheckboxForm";
 import { ADateForm } from "./ADateForm";
 import { ADropdownForm } from "./ADropdownForm";
@@ -8,16 +8,14 @@ import { AFileForm } from "./AFileForm";
 import { ARadioForm } from "./ARadioForm";
 import { ARatingForm } from "./ARatingForm";
 
-type Props = {
-  question: BasicQuestionType;
-  answer: AnswersType | undefined;
-  handleAnswer: () => void;
+interface Props extends AnswerProps {
   addFiles: (oneFile: { questionId: string; file: File }) => void;
-};
+}
+
 export const AQuestion = ({
-  question,
+  element,
   handleAnswer,
-  answer,
+  answers,
   addFiles,
 }: Props) => {
   function getContent(question: BasicQuestionType) {
@@ -26,7 +24,7 @@ export const AQuestion = ({
         return (
           <AEssayForm
             element={question}
-            answers={answer}
+            answers={answers}
             handleAnswer={handleAnswer}
           />
         );
@@ -34,7 +32,7 @@ export const AQuestion = ({
         return (
           <ARadioForm
             element={question}
-            answers={answer}
+            answers={answers}
             handleAnswer={handleAnswer}
           />
         );
@@ -42,7 +40,7 @@ export const AQuestion = ({
         return (
           <ACheckboxForm
             element={question}
-            answers={answer}
+            answers={answers}
             handleAnswer={handleAnswer}
           />
         );
@@ -50,7 +48,7 @@ export const AQuestion = ({
         return (
           <ADropdownForm
             element={question}
-            answers={answer}
+            answers={answers}
             handleAnswer={handleAnswer}
           />
         );
@@ -58,7 +56,7 @@ export const AQuestion = ({
         return (
           <AFileForm
             element={question}
-            answers={answer}
+            answers={answers}
             handleAnswer={handleAnswer}
             addFiles={addFiles}
           />
@@ -67,7 +65,7 @@ export const AQuestion = ({
         return (
           <ARatingForm
             element={question}
-            answers={answer}
+            answers={answers}
             handleAnswer={handleAnswer}
           />
         );
@@ -75,7 +73,7 @@ export const AQuestion = ({
         return (
           <ADateForm
             element={question}
-            answers={answer}
+            answers={answers}
             handleAnswer={handleAnswer}
           />
         );
@@ -87,10 +85,10 @@ export const AQuestion = ({
   return (
     <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-4">
       <div className="flex flexgi-row my-1 w-11/12 place-content-between items-center">
-        <div className="text-xl font-bold">{question.title}</div>
+        <div className="text-xl font-bold">{element.title}</div>
       </div>
-      <div className="w-11/12 text-slate-500">{question.comment}</div>
-      {getContent(question)}
+      <div className="w-11/12 text-slate-500">{element.comment}</div>
+      {getContent(element)}
     </div>
   );
 };

frontend/src/commons/ARadioForm.tsx → frontend/src/answers/ARadioForm.tsx

 import React, { useState } from "react";
-import { RadioType, AnswersType } from "../types";
+import { RadioType, AnswersType, AnswerProps } from "../types";
 
-type Props = {
+interface Props extends AnswerProps {
   element: RadioType;
-  answers: AnswersType | undefined;
-  handleAnswer: () => void;
-};
+}
 
 export const ARadioForm = ({ element, answers, handleAnswer }: Props) => {
   const [answer, setAnswer] = useState("");
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.currentTarget;
-    // response.answers.map((a) => {
-    //   if (a.questionId === element._id) {
-    //     a.answer = value;
-    //   }
-    // });
     answers && (answers.answer = value);
     setAnswer(value);
     handleAnswer();
@@ -24,7 +17,7 @@ export const ARadioForm = ({ element, answers, handleAnswer }: Props) => {
   return (
     <div className="flex w-full gap-2 justify-around my-3">
       {element.content.choices.map((choice) => (
-        <div>
+        <div key={choice.text}>
           <input
             className="mr-2"
             type="radio"

frontend/src/commons/ARatingForm.tsx → frontend/src/answers/ARatingForm.tsx

 import React, { useState } from "react";
-import { RatingType, AnswersType } from "../types";
+import { RatingType, AnswersType, AnswerProps } from "../types";
 
-type Props = {
+interface Props extends AnswerProps {
   element: RatingType;
-  answers: AnswersType | undefined;
-  handleAnswer: () => void;
-};
+}
 
 export const ARatingForm = ({ element, answers, handleAnswer }: Props) => {
   const [selectedchoice, setSelectedchoice] = useState("");
@@ -14,11 +12,6 @@ export const ARatingForm = ({ element, answers, handleAnswer }: Props) => {
   function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
     event.preventDefault();
     const { name } = event.currentTarget;
-    // response.answers.map((a) => {
-    //   if (a.questionId === element._id) {
-    //     a.answer = name;
-    //   }
-    // });
     answers && (answers.answer = name);
     setAnswer(name);
     setSelectedchoice(event.currentTarget.name);

frontend/src/commons/SurveyForm.tsx → frontend/src/answers/AnswerSurveyForm.tsx

@@ -5,7 +5,7 @@ import { catchErrors } from "../helpers";
 import { AnswerType, SurveyType } from "../types";
 import { AQuestion } from "./AQuestion";
 
-export const SurveyForm = () => {
+export const AnswerSurveyForm = () => {
   let { surveyId } = useParams<{ surveyId: string }>();
   const [files, setFiles] = useState<{ questionId: string; file: File }[]>([]);
   const [error, setError] = useState("");
@@ -41,11 +41,6 @@ export const SurveyForm = () => {
         });
         console.log(questionIds);
         if (answersurvey) {
-          // setResponse({
-          //   ...answer,
-          //   surveyId: answersurvey._id,
-          //   answers: questionIds,
-          // });
           answer.current.surveyId = answersurvey._id;
           answer.current.guestId = answersurvey.guestId;
           answer.current.answers = questionIds;
@@ -108,8 +103,9 @@ export const SurveyForm = () => {
             {survey.questions.map((question) => {
               return (
                 <AQuestion
-                  question={question}
-                  answer={answer.current.answers.find(
+                  key={question._id}
+                  element={question}
+                  answers={answer.current.answers.find(
                     (ans) => ans.questionId === question._id
                   )}
                   addFiles={addFiles}

frontend/src/answers/index.tsx

+export { AnswerSurveyForm } from "./AnswerSurveyForm";

frontend/src/commons/index.tsx

 export { Header } from "./Header";
-export { SurveyForm } from "./SurveyForm";
\ No newline at end of file

frontend/src/questions/Question.tsx

@@ -167,6 +167,7 @@ export const Question = ({
         >
           {Array.from(typeDropDown.entries()).map(([key, value]) => (
             <option
+              key={key}
               id={element._id}
               value={key}
               selected={key === element.type}

frontend/src/types/index.ts

@@ -44,22 +44,21 @@ export interface RadioType extends BasicQuestionType {
   };
 }
 
+interface IChoices {
+  value: number;
+  text: string;
+}
+
 export interface CheckboxType extends BasicQuestionType {
   content: {
-    choices: {
-      value: number;
-      text: string;
-    }[];
+    choices: IChoices[];
     maxCount: number;
   };
 }
 
 export interface DropdownType extends BasicQuestionType {
   content: {
-    choices: {
-      value: number;
-      text: string;
-    }[];
+    choices: IChoices[];
     hasNone: boolean;
   };
 }
@@ -93,3 +92,9 @@ export interface AnswerType {
   guestId: string;
   answers: AnswersType[];
 }
+
+export interface AnswerProps {
+  element: BasicQuestionType;
+  answers: AnswersType | undefined;
+  handleAnswer: () => void;
+}