answer survey 로직 변경

frontend/src/surveys/Accordion.tsx

 import React, { useState, useRef, useEffect } from "react";
 import { IQuestionData } from "../types";
-// import {
-//   REssay,
-//   RCheckbox,
-//   RRadio,
-//   RDropdown,
-//   RFile,
-//   RRating,
-//   RDate,
-// } from "../forms";
 import { getResultElementByType } from "../helpers/question.helper";
 
 type AccordionProps = {
@@ -20,36 +11,14 @@ export const Accordion = ({ question }: AccordionProps) => {
   const [height, setHeight] = useState<string>("0px");
   const contentElement = useRef<HTMLDivElement>(null);
 
-  const HandleOpening = () => {
+  const handleOpening = () => {
     setOpened(!isOpened);
     setHeight(!isOpened ? `${contentElement.current?.scrollHeight}px` : "0px");
   };
-  // function getContent(question: IQuestionData) {
-  //   switch (question.type) {
-  //     case "singletext":
-  //       return <REssay question={question} />;
-  //     case "radio":
-  //       return <RRadio question={question} />;
-  //     case "checkbox":
-  //       return <RCheckbox question={question} />;
-  //     case "dropdown":
-  //       return <RDropdown question={question} />;
-  //     case "file":
-  //       return <RFile question={question} />;
-  //     case "rating":
-  //       return <RRating question={question} />;
-  //     case "date":
-  //       return <RDate question={question} />;
-  //     default:
-  //       return <></>;
-  //   }
-  // }
-
-  // console.log(question);
 
   return (
     <div className="p-1">
-      <div onClick={HandleOpening}>
+      <div onClick={handleOpening}>
         <div
           className={
             "bg-themeColor rounded-r-lg p-4 flex justify-between text-white"

frontend/src/surveys/AnswerSurvey.tsx

-import React, { useEffect, useState } from "react";
+import React, { FormEvent, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { surveyApi } from "../apis";
+import { answerApi, surveyApi } from "../apis";
 import { catchErrors } from "../helpers";
 import { SpinnerIcon } from "../icons";
-import { ISurvey } from "../types";
+import { IAnswer, ISurvey } from "../types";
+import { AQuestion } from "./AQuestion";
 
 export const AnswerSurvey = () => {
   let { surveyId } = useParams<{ surveyId: string }>();
 
   const [survey, setSurvey] = useState<ISurvey>();
+  const [answers, setAnswers] = useState<IAnswer[]>([]);
   const [error, setError] = useState("");
 
   useEffect(() => {
     surveyId && getSurvey(surveyId);
   }, [surveyId]);
 
-  const handleSubmit = () => {};
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    console.log("answers:", answers);
+    const needAnswer = answers.some((answer) => !answer.requiredCheck);
+    if (needAnswer) {
+      alert("필수질문에 응답하셔야 합니다.");
+      return;
+    }
+    if (!survey) {
+      return;
+    }
+    try {
+      const fileAnswers = answers.filter(
+        (answer) => answer.question.type === "file"
+      );
+      const otherAnswers = answers.filter(
+        (answer) => answer.question.type !== "file"
+      );
+
+      console.log("file answers:", fileAnswers);
+      console.log("other answers:", otherAnswers);
+
+      const forms = fileAnswers.map((answer) => {
+        const formData = new FormData();
+        formData.append("surveyId", survey._id!);
+        formData.append("questionId", answer.question._id!);
+        formData.append("guestId", "guest");
+
+        const files: FileList = answer.content;
+        [...files].map((f) => {
+          formData.append("uploadFiles", f);
+        });
+        return formData;
+      });
+
+      setError("");
+      const results = await answerApi.save(
+        otherAnswers.map((answer) => ({
+          questionId: answer.question._id!,
+          surveyId: survey._id!,
+          questId: "guest",
+          content: answer.content,
+        }))
+      );
+      console.log("results:", results);
+
+      const result = await Promise.all(
+        forms.map(async (form) => await answerApi.saveForm(form))
+      );
+
+      console.log("result:", result);
+
+      // const newAnswer: IAnswer = await answerApi.saveAnswers(formData);
+      // console.log(newAnswer);
+      // sessionStorage.setItem(`survey_${surveyId}`, surveyId ?? "");
+      // navigate("/survey/complete", { replace: false });
+    } catch (error) {
+      catchErrors(error, setError);
+    } finally {
+      // setLoading(false);
+    }
+  };
 
   async function getSurvey(surveyId: string) {
     try {
       setError("");
-      const survey: any = await surveyApi.getSurveyById(surveyId);
+      const survey: ISurvey = await surveyApi.getSurveyById(surveyId);
       console.log("survey가져옴ㅎㅎ", survey);
-      // answerSurvey.current._id = survey._id;
-      // answerSurvey.current.questions = survey.questions;
+      const answers = survey.questions.map((question) => {
+        return {
+          surveyId: survey._id!,
+          question: question,
+          requiredCheck: false,
+          content: null,
+        };
+      });
       setSurvey(survey);
+      setAnswers(answers);
       // setSuccess(true);
     } catch (error) {
       catchErrors(error, setError);
@@ -47,16 +117,15 @@ export const AnswerSurvey = () => {
         <div className="flex flex-col container place-items-center mt-4">
           <p className="font-bold text-4xl text-center m-2">{survey.title}</p>
           <p className="font-bold text-1xl text-center m-2">{survey.comment}</p>
-          {/* {survey.questions.map((question, index) => {
+          {answers.map((answer) => {
             return (
               <AQuestion
-                key={question._id}
-                question={question}
-                answerQuestion={answerSurvey.current.questions[index]}
-                addFiles={addFiles}
-              ></AQuestion>
+                key={answer.question._id}
+                question={answer.question}
+                answer={answer}
+              />
             );
-          })} */}
+          })}
           <div>
             <button
               type="submit"