answer handleChange

frontend/src/SurveyRouter.tsx

@@ -21,7 +21,7 @@ export const SurveyRouter = () => {
             <Route path=":surveyId" element={<EditSurvey />} />
             <Route path=":surveyId/response" element />
           </Route>
-          <Route path="survey" element={<SurveyForm />} />
+          <Route path="survey/:surveyId" element={<SurveyForm />} />
           <Route
             path="profile"
             element={

frontend/src/commons/ACheckbox.tsx

-import React, { useEffect } from "react";
-import { CheckboxType } from "../types";
+import React, { useState } from "react";
+import { CheckboxType, AnswerType } from "../types";
 
 type Props = {
   element: CheckboxType;
+  response: AnswerType;
+  handleAnswer: () => void;
 };
 
-export const ACheckboxForm = ({ element }: Props) => {
+export const ACheckboxForm = ({ element, response, 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;
+      }
+    });
+    setAnswer(value);
+    handleAnswer();
+  };
   return (
     <div className="flex w-full gap-4 justify-around my-3">
       {element.content.choices.map((choice) => (
         <div>
-          <input className="mr-2" type="checkbox" />
+          <input
+            className="mr-2"
+            type="checkbox"
+            value={choice.text}
+            onChange={handleChange}
+          />
           <label className="text-lg">{choice.text}</label>
         </div>
       ))}

frontend/src/commons/ADropdown.tsx

 import React, { useState } from "react";
-import { DropdownType } from "../types";
+import { DropdownType, AnswerType } from "../types";
 
 type Props = {
   element: DropdownType;
+  response: AnswerType;
+  handleAnswer: () => void;
 };
 
-export const ADropdownForm = ({ element }: Props) => {
+export const ADropdownForm = ({ element, handleAnswer, response }: 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;
+      }
+    });
+    setAnswer(value);
+    handleAnswer();
+  };
   return (
     <div className="flex flex-col container w-4/5 h-auto items-center m-3 py-3">
-      <select className="py-2 hover:bg-themeColor bg-gray-200 rounded ">
+      <select
+        className="py-2 hover:bg-themeColor bg-gray-200 rounded"
+        onChange={handleChange}
+      >
         {element.content.choices.map((choice) => (
-          <option>{choice.text}</option>
+          <option value={choice.text}>{choice.text}</option>
         ))}
       </select>
     </div>

frontend/src/commons/AEssayForm.tsx

-import React from "react";
-import { EssayType } from "../types";
+import React, { useState } from "react";
+import { EssayType, AnswerType } from "../types";
 
 type Props = {
   element: EssayType;
+  response: AnswerType;
+  handleAnswer: () => void;
 };
 
-export const AEssayForm = ({ element }: Props) => {
+export const AEssayForm = ({ element, handleAnswer, response }: 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;
+      }
+    });
+    setAnswer(value);
+    handleAnswer();
+  };
   return (
-    <div className="flex mt-4 w-full justify-center">
-      <input className="border w-11/12 h-36 my-3"></input>
+    <div className="flex mt-3 w-full justify-center">
+      <input
+        type="text"
+        className="border w-11/12 h-36 my-3"
+        id={element._id}
+        onChange={handleChange}
+        value={answer}
+      ></input>
     </div>
   );
 };

frontend/src/commons/AQuestion.tsx

 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { BasicQuestionType, SurveyType } from "../types";
+import { BasicQuestionType, AnswerType, SurveyType } from "../types";
 import { ACheckboxForm } from "./ACheckbox";
 import { ADropdownForm } from "./ADropdown";
 import { AEssayForm } from "./AEssayForm";
 import { ARadioForm } from "./ARadioForm";
 
-type PropsType = {
+type Props = {
   question: BasicQuestionType;
+  response: AnswerType;
+  handleAnswer: () => void;
 };
-export const AQuestion = ({ question }: PropsType) => {
+export const AQuestion = ({ question, handleAnswer, response }: Props) => {
   function getContent(question: BasicQuestionType) {
     switch (question.type) {
       case "essay":
-        return <AEssayForm element={question} />;
+        return (
+          <AEssayForm
+            element={question}
+            response={response}
+            handleAnswer={handleAnswer}
+          />
+        );
       case "radio":
-        return <ARadioForm element={question} />;
+        return (
+          <ARadioForm
+            element={question}
+            response={response}
+            handleAnswer={handleAnswer}
+          />
+        );
       case "checkbox":
-        return <ACheckboxForm element={question} />;
+        return (
+          <ACheckboxForm
+            element={question}
+            response={response}
+            handleAnswer={handleAnswer}
+          />
+        );
       case "dropdown":
-        return <ADropdownForm element={question} />;
+        return (
+          <ADropdownForm
+            element={question}
+            response={response}
+            handleAnswer={handleAnswer}
+          />
+        );
       // case "file":
       //   return <AFileForm element={element} currentId={currentId} />;
       // case "rating":
@@ -36,11 +62,11 @@ export const AQuestion = ({ question }: PropsType) => {
   }
 
   return (
-    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
-      <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-        <div className="text-xl font-bold ml-6 w-1/2">질문</div>
+    <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>
-      <div className="border w-11/12 my-3">내용</div>
+      <div className="w-11/12 text-slate-500">{question.comment}</div>
       {getContent(question)}
     </div>
   );

frontend/src/commons/ARadioForm.tsx

-import React from "react";
-import { RadioType } from "../types";
+import React, { useState } from "react";
+import { RadioType, AnswerType } from "../types";
 
 type Props = {
   element: RadioType;
+  response: AnswerType;
+  handleAnswer: () => void;
 };
 
-export const ARadioForm = ({ element }: Props) => {
+export const ARadioForm = ({ element, response, 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;
+      }
+    });
+    setAnswer(value);
+    handleAnswer();
+  };
   return (
     <div className="flex w-full gap-4 justify-around my-3">
       {element.content.choices.map((choice) => (
         <div>
-          <input className="mr-2" type="radio"></input>
-          <label className="text-lg">{choice.value}</label>
+          <input
+            className="mr-2"
+            type="radio"
+            id={choice.text}
+            name={element._id}
+            onChange={handleChange}
+            value={choice.text}
+          ></input>
+          <label className="text-lg" id={choice.text}>
+            {choice.text}
+          </label>
         </div>
       ))}
     </div>

frontend/src/commons/SurveyForm.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 { catchErrors } from "../helpers";
-import { SurveyType } from "../types";
+import { AnswerType, SurveyType } from "../types";
 import { AQuestion } from "./AQuestion";
 import { ARadioForm } from "./ARadioForm";
 
@@ -18,6 +18,11 @@ export const SurveyForm = () => {
     comment: "",
     questions: [],
   });
+  const [response, setResponse] = useState<AnswerType>({
+    surveyId: surveyId,
+    guestId: "",
+    answers: [{ questionId: "", answer: "" }],
+  });
 
   useEffect(() => {
     ansSurvey();
@@ -28,6 +33,15 @@ export const SurveyForm = () => {
       if (surveyId) {
         const answersurvey: SurveyType = await surveyApi.ansSurvey(surveyId);
         console.log(answersurvey);
+        const questionIds = answersurvey.questions.map((el) => {
+          return { questionId: el._id, answer: "" };
+        });
+        console.log(questionIds);
+        setResponse({
+          ...response,
+          surveyId: answersurvey._id,
+          answers: questionIds,
+        });
         setSurvey(answersurvey);
         setSuccess(true);
         setError("");
@@ -41,20 +55,45 @@ export const SurveyForm = () => {
     }
   }
 
+  function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+  }
+
+  const handleAnswer = () => {
+    const newList = [...response.answers];
+    setResponse({ ...response, answers: newList });
+  };
+
   return (
-    <div className="flex flex-col place-items-center">
-      <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) => {
-          return <AQuestion question={question}></AQuestion>;
-        })}
-        <div>
-          <button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white">
-            제출하기
-          </button>
+    <>
+      {console.log(response)}
+      <form onSubmit={handleSubmit}>
+        <div className="flex flex-col place-items-center">
+          <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) => {
+              return (
+                <AQuestion
+                  question={question}
+                  response={response}
+                  handleAnswer={handleAnswer}
+                ></AQuestion>
+              );
+            })}
+            <div>
+              <button
+                type="submit"
+                className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white"
+              >
+                제출하기
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </form>
+    </>
   );
 };

frontend/src/types/index.ts

@@ -80,3 +80,9 @@ export interface RatingType extends BasicQuestionType {
     maxRateDescription: string;
   };
 }
+
+export interface AnswerType {
+  surveyId?: string;
+  guestId: string;
+  answers: { questionId: string; answer: any }[];
+}