Merge branch 'develop'

frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx

 import React, { useState } from "react";
 import { Question } from "./Question";
+import { QuestionProvider } from "./question.context";
 
 export interface BasicQuestionType {
   type: string;
-  id: string;
+  _id: string;
   title: string;
   isRequired: boolean;
   comment: string;
@@ -38,8 +39,10 @@ export interface FileType extends BasicQuestionType {
 }
 export interface RatingType extends BasicQuestionType {
   content: {
-    rateMin: number;
-    rateMax: number;
+    rateValues: {
+      value: number;
+      text: string;
+    }[];
     minRateDescription: string;
     maxRateDescription: string;
   };
@@ -47,7 +50,7 @@ export interface RatingType extends BasicQuestionType {
 
 const EssayQ: EssayType = {
   type: "essay",
-  id: "000000000000",
+  _id: "000000000000",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -55,7 +58,7 @@ const EssayQ: EssayType = {
 };
 const RadioQ: RadioType = {
   type: "radio",
-  id: "000000000001",
+  _id: "000000000001",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -67,7 +70,7 @@ const RadioQ: RadioType = {
 };
 const CheckboxQ: CheckboxType = {
   type: "checkbox",
-  id: "000000000002",
+  _id: "000000000002",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -78,7 +81,7 @@ const CheckboxQ: CheckboxType = {
 };
 const DropdownQ: DropdownType = {
   type: "dropdown",
-  id: "000000000003",
+  _id: "000000000003",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -89,7 +92,7 @@ const DropdownQ: DropdownType = {
 };
 const FileQ: FileType = {
   type: "file",
-  id: "000000000004",
+  _id: "000000000004",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -100,82 +103,52 @@ const FileQ: FileType = {
 };
 const RatingQ: RatingType = {
   type: "rating",
-  id: "000000000005",
+  _id: "000000000005",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
   content: {
-    rateMin: 0,
-    rateMax: 10,
+    rateValues: [
+      { value: 1, text: "1" },
+      { value: 2, text: "2" },
+      { value: 3, text: "3" },
+    ],
     minRateDescription: "가장 낮음",
     maxRateDescription: "가장 높음",
   },
 };
 
 export const CreateSurveyForm = () => {
-  const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>([
-    EssayQ,
-    RadioQ,
-    CheckboxQ,
-  ]);
   const [survey, setSurvey] = useState();
-
-  function QuestionListChange(e: React.ChangeEvent<HTMLInputElement>): void {
-    const newList: BasicQuestionType[] = [...questionList];
-    const targetId: any = e.target.name;
-    const obj: any = newList.find((a) => a.id === e.target.id);
-    obj[targetId] = e.target.value;
-    setQuestionList(newList);
-  }
-
-  function addQuestion(): void {
-    //무작위로 12자리 ID제공, 추후에 질문을 DB에 생성하고 _id를 DB에서 가져오는 것으로 교체할 예정
-    function getRandomInt(min: number, max: number): string {
-      min = Math.ceil(min);
-      max = Math.floor(max);
-      const randomNum: number = Math.floor(Math.random() * (max - min)) + min;
-      return randomNum.toString();
-    }
-    const randomId: string = getRandomInt(100000000000, 999999999999);
-    //새로운 질문 생성
-    const newQ: EssayType = {
-      type: "essay",
-      id: randomId,
-      title: "Question",
-      isRequired: false,
-      comment: "질문에 대한 설명을 입력해주세요",
-      content: null,
-    };
-    setQuestionList([...questionList, newQ]);
-  }
-
-  function deleteQuestion(): void {}
+  const [error, setError] = useState("");
+  const [disabled, setDisabled] = useState(false);
+  const [success, setSuccess] = useState(false);
 
   return (
-    <div className="flex flex-col place-items-center">
-      <div className="flex flex-col container place-items-center mt-4">
-        <input
-          type="text"
-          className="font-bold text-4xl text-center m-2 border-b-2"
-          placeholder="설문지 제목"
-        ></input>
-        <textarea
-          className="font-bold text-1xl text-center m-2 resize-none"
-          placeholder="설문조사에 대한 설명을 입력해주세요"
-          rows={2}
-          cols={60}
-        ></textarea>
-      </div>
-      <Question
-        questionList={questionList}
-        QuestionListChange={QuestionListChange}
-        addQuestion={addQuestion}
-      />
-      <div>
-        <button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
-          설문조사 생성
-        </button>
-      </div>
-    </div>
+    <>
+      <QuestionProvider>
+        <div className="flex flex-col place-items-center">
+          <div className="flex flex-col container place-items-center mt-4">
+            <input
+              type="text"
+              className="font-bold text-4xl text-center m-2 border-b-2"
+              placeholder="설문지 제목"
+            ></input>
+            <textarea
+              className="font-bold text-1xl text-center m-2 resize-none"
+              placeholder="설문조사에 대한 설명을 입력해주세요"
+              rows={2}
+              cols={60}
+            ></textarea>
+          </div>
+          <Question />
+          <div>
+            <button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
+              설문조사 생성
+            </button>
+          </div>
+        </div>
+      </QuestionProvider>
+    </>
   );
 };

frontend/src/CreateSurveyForm/Edit.tsx

+import React from "react";
+import { useQuestion } from "./question.context";
+
+type Props = {
+  id: string;
+};
+
+export const Edit = ({ id }: Props) => {
+  const { editClick } = useQuestion();
+
+  return (
+    <button id={id} className="w-1/12" onClick={editClick}>
+      수정
+    </button>
+  );
+};

frontend/src/CreateSurveyForm/QCheckbox.tsx

 import React from "react";
 import { CheckboxType } from "./CreateSurveyFormPage";
+import { useQuestion } from "./question.context";
+import { Edit } from "./Edit";
 
 type Props = {
   element: CheckboxType;
-  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const QCheckbox = ({ element, QuestionListChange }: Props) => (
-  <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
-    <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-      <input
-        type="text"
-        name={element.name}
-        id="title"
-        className="text-xl font-bold ml-6 border-b-2 w-1/2"
-        placeholder={element.title}
-        onChange={QuestionListChange}
-      ></input>
-      <select
-        id="Questions"
-        className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
-      >
-        <option>질문종류</option>
-        <option value="essay">주관식</option>
-        <option value="radio">객관식</option>
-        <option value="dropdown">드롭다운(객관식)</option>
-        <option value="checkbox" selected>
-          체크박스(객관식)
-        </option>
-        <option value="file">파일업로드</option>
-        <option value="rating">선형</option>
-        <option value="grid">그리드</option>
-        <option value="date">날짜</option>
-      </select>
-    </div>
-    <div className="flex w-full justify-center">
-      <input
-        type="text"
-        name={element.name}
-        id="comment"
-        className="border w-11/12"
-        placeholder="질문에 대한 설명을 입력해주세요"
-        onChange={QuestionListChange}
-      ></input>
-    </div>
-    <div id="commentarea" className="flex mt-4">
-      {element.content.choices.map((e: string) => (
-        <div>
-          <input type="checkbox" checked={false}></input>
-          <input
-            type="text"
-            className="mx-2 border-b-2"
-            placeholder={e}
-          ></input>
-        </div>
-      ))}
-    </div>
-    <div className="flex w-full flex-row justify-end py-2">
-      <button className="w-1/12">필수</button>
-      <button className="w-1/12">옵션</button>
-      <button className="w-1/12">삭제</button>
+export const QCheckbox = ({ element }: Props) => {
+  const { questionListChange } = useQuestion();
+
+  return (
+    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
+      <div className="flex flexgi-row h-16 w-full place-content-between items-center">
+        <input
+          type="text"
+          name="title"
+          id={element._id}
+          className="text-xl font-bold ml-6 border-b-2 w-1/2"
+          placeholder={element.title}
+          onChange={questionListChange}
+        ></input>
+        <select
+          id="Questions"
+          className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
+        >
+          <option>질문종류</option>
+          <option value="essay">주관식</option>
+          <option value="radio">객관식</option>
+          <option value="dropdown">드롭다운(객관식)</option>
+          <option value="checkbox" selected>
+            체크박스(객관식)
+          </option>
+          <option value="file">파일업로드</option>
+          <option value="rating">선형</option>
+          <option value="grid">그리드</option>
+          <option value="date">날짜</option>
+        </select>
+      </div>
+      <div className="flex w-full justify-center">
+        <input
+          type="text"
+          name="comment"
+          id={element._id}
+          className="border w-11/12"
+          placeholder="질문에 대한 설명을 입력해주세요"
+          onChange={questionListChange}
+        ></input>
+      </div>
+      <div id="commentarea" className="flex mt-4">
+        {element.content.choices.map((e: string) => (
+          <div>
+            <input type="checkbox" checked={false}></input>
+            <input
+              type="text"
+              className="mx-2 border-b-2"
+              placeholder={e}
+            ></input>
+          </div>
+        ))}
+      </div>
+      <div className="flex w-full flex-row justify-end py-2">
+        <button className="w-1/12">필수</button>
+        <button className="w-1/12">옵션</button>
+        <button className="w-1/12">삭제</button>
+        <Edit id={element._id} />
+      </div>
     </div>
-  </div>
-);
+  );
+};

frontend/src/CreateSurveyForm/QDate.tsx

+import { useQuestion } from "./question.context";

frontend/src/CreateSurveyForm/QDropdown.tsx

 import React from "react";
 import { DropdownType } from "./CreateSurveyFormPage";
+import { useQuestion } from "./question.context";
 
 type Props = {
   element: DropdownType;
-  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const QDropdown = ({ element, QuestionListChange }: Props) => (
-  <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
-    <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-      <input
-        type="text"
-        name={element.name}
-        id="title"
-        className="text-xl font-bold ml-6 border-b-2 w-1/2"
-        placeholder={element.title}
-        onChange={QuestionListChange}
-      ></input>
-      <select
-        id="Questions"
-        className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
-      >
-        <option>질문종류</option>
-        <option value="essay">주관식</option>
-        <option value="radio">객관식</option>
-        <option value="dropdown" selected>
-          드롭다운(객관식)
-        </option>
-        <option value="checkbox">체크박스(객관식)</option>
-        <option value="file">파일업로드</option>
-        <option value="rating">선형</option>
-        <option value="grid">그리드</option>
-        <option value="date">날짜</option>
-      </select>
+export const QDropdown = ({ element }: Props) => {
+  const { questionListChange } = useQuestion();
+  return (
+    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
+      <div className="flex flexgi-row h-16 w-full place-content-between items-center">
+        <input
+          type="text"
+          name="title"
+          id={element._id}
+          className="text-xl font-bold ml-6 border-b-2 w-1/2"
+          placeholder={element.title}
+          onChange={questionListChange}
+        ></input>
+        <select
+          id="Questions"
+          className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
+        >
+          <option>질문종류</option>
+          <option value="essay">주관식</option>
+          <option value="radio">객관식</option>
+          <option value="dropdown" selected>
+            드롭다운(객관식)
+          </option>
+          <option value="checkbox">체크박스(객관식)</option>
+          <option value="file">파일업로드</option>
+          <option value="rating">선형</option>
+          <option value="grid">그리드</option>
+          <option value="date">날짜</option>
+        </select>
+      </div>
+      <div className="flex w-full justify-center">
+        <input
+          type="text"
+          name="comment"
+          id={element._id}
+          className="border w-11/12"
+          placeholder="질문에 대한 설명을 입력해주세요"
+          onChange={questionListChange}
+        ></input>
+      </div>
+      <div id="commentarea" className="flex mt-4">
+        {element.content.choices.map((e: string) => (
+          <div>
+            <input type="checkbox" checked={false}></input>
+            <input
+              type="text"
+              className="mx-2 border-b-2"
+              placeholder={e}
+            ></input>
+          </div>
+        ))}
+      </div>
+      <div className="flex w-full flex-row justify-end py-2">
+        <button className="w-1/12">필수</button>
+        <button className="w-1/12">옵션</button>
+        <button className="w-1/12">삭제</button>
+      </div>
     </div>
-    <div className="flex w-full justify-center">
-      <input
-        type="text"
-        name={element.name}
-        id="comment"
-        className="border w-11/12"
-        placeholder="질문에 대한 설명을 입력해주세요"
-        onChange={QuestionListChange}
-      ></input>
-    </div>
-    <div id="commentarea" className="flex mt-4">
-      {element.content.choices.map((e: string) => (
-        <div>
-          <input type="checkbox" checked={false}></input>
-          <input
-            type="text"
-            className="mx-2 border-b-2"
-            placeholder={e}
-          ></input>
-        </div>
-      ))}
-    </div>
-    <div className="flex w-full flex-row justify-end py-2">
-      <button className="w-1/12">필수</button>
-      <button className="w-1/12">옵션</button>
-      <button className="w-1/12">삭제</button>
-    </div>
-  </div>
-);
+  );
+};

frontend/src/CreateSurveyForm/QEssay.tsx

 import React, { useState } from "react";
 import { EssayType } from "./CreateSurveyFormPage";
+import { useQuestion } from "./question.context";
+import { Edit } from "./Edit";
 
 type Props = {
   element: EssayType;
-  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const QEssay = ({ element, QuestionListChange }: Props) => {
+export const QEssay = ({ element }: Props) => {
+  const { questionListChange } = useQuestion();
+
   return (
     <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
       <div className="flex h-16 w-full place-content-between items-center">
         <input
           type="text"
           name="title"
-          id={element.id}
+          id={element._id}
           className="text-xl font-bold ml-6 border-b-2 w-1/2"
           placeholder={element.title}
-          onChange={QuestionListChange}
+          onChange={questionListChange}
         ></input>
         <select
           id="Questions"
@@ -39,10 +42,10 @@ export const QEssay = ({ element, QuestionListChange }: Props) => {
         <input
           type="text"
           name="comment"
-          id={element.id}
+          id={element._id}
           className="border w-11/12"
           placeholder="질문에 대한 설명을 입력해주세요"
-          onChange={QuestionListChange}
+          onChange={questionListChange}
         ></input>
       </div>
       <div id="commentarea" className="flex mt-4 w-full justify-center">
@@ -52,6 +55,7 @@ export const QEssay = ({ element, QuestionListChange }: Props) => {
         <button className="w-1/12">필수</button>
         <button className="w-1/12">옵션</button>
         <button className="w-1/12">삭제</button>
+        <Edit id={element._id} />
       </div>
     </div>
   );

frontend/src/CreateSurveyForm/QFile.tsx

 import React, { useState } from "react";
 import { FileType } from "./CreateSurveyFormPage";
+import { useQuestion } from "./question.context";
 
 type Props = {
   element: FileType;
-  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const QFile = ({ element, QuestionListChange }: Props) => {
+export const QFile = ({ element }: Props) => {
+  const { questionListChange } = useQuestion();
+
   return (
     <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
       <div className="flex h-16 w-full place-content-between items-center">
         <input
           type="text"
-          name={element.name}
-          id="title"
+          name="title"
+          id={element._id}
           className="text-xl font-bold ml-6 border-b-2 w-1/2"
           placeholder={element.title}
-          onChange={QuestionListChange}
+          onChange={questionListChange}
         ></input>
         <select
           id="Questions"
@@ -38,11 +40,11 @@ export const QFile = ({ element, QuestionListChange }: Props) => {
       <div className="flex w-full justify-center">
         <input
           type="text"
-          name={element.name}
-          id="comment"
+          name="comment"
+          id={element._id}
           className="border w-11/12"
           placeholder="질문에 대한 설명을 입력해주세요"
-          onChange={QuestionListChange}
+          onChange={questionListChange}
         ></input>
       </div>
       <div id="commentarea" className="flex mt-4 w-full justify-center">

frontend/src/CreateSurveyForm/QMatrix.tsx

+import { useQuestion } from "./question.context";

frontend/src/CreateSurveyForm/QRadio.tsx

 import React from "react";
 import { RadioType } from "./CreateSurveyFormPage";
+import { useQuestion } from "./question.context";
 
 type Props = {
   element: RadioType;
-  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const QRadio = ({ element, QuestionListChange }: Props) => (
-  <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
-    <div className="flex h-16 w-full place-content-between items-center">
-      <input
-        type="text"
-        id={element.id}
-        name="title"
-        className="text-xl font-bold ml-6 border-b-2 w-1/2"
-        placeholder={element.title}
-        onChange={QuestionListChange}
-      ></input>
-      <select
-        id="Questions"
-        className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor focus:themeColor block w-full mr-3 p-2.5"
-      >
-        <option>질문종류</option>
-        <option value="Essay">주관식</option>
-        <option value="MultipleChoice" selected>
-          객관식
-        </option>
-        <option value="Dropdown">드롭다운(객관식)</option>
-        <option value="CheckBox">체크박스(객관식)</option>
-        <option value="Rating">선형</option>
-        <option value="Grid">그리드</option>
-        <option value="Date">날짜</option>
-      </select>
-    </div>
-    <div className="flex w-full justify-center">
-      <input
-        type="text"
-        id={element.id}
-        name="comment"
-        className="border w-11/12"
-        placeholder="질문에 대한 설명을 입력해주세요"
-        onChange={QuestionListChange}
-      ></input>
-    </div>
-    <div className="flex mt-4">
-      {element.content.choices.map((e: string) => (
-        <div>
-          <input type="radio" id={e} name="choice" value={e} checked={false} />
-          <input
-            type="text"
-            name="content"
-            className="mx-2 border-b-2"
-            placeholder={e}
-            onChange={QuestionListChange}
-          ></input>
-          <button></button>
-        </div>
-      ))}
-      {/* <button className="border rounded-full border-green-500 border-4 text-green-500 font-bold px-2">
+export const QRadio = ({ element }: Props) => {
+  const { questionListChange } = useQuestion();
+  return (
+    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
+      <div className="flex h-16 w-full place-content-between items-center">
+        <input
+          type="text"
+          name="title"
+          id={element._id}
+          className="text-xl font-bold ml-6 border-b-2 w-1/2"
+          placeholder={element.title}
+          onChange={questionListChange}
+        ></input>
+        <select
+          id="Questions"
+          className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor focus:themeColor block w-full mr-3 p-2.5"
+        >
+          <option>질문종류</option>
+          <option value="Essay">주관식</option>
+          <option value="MultipleChoice" selected>
+            객관식
+          </option>
+          <option value="Dropdown">드롭다운(객관식)</option>
+          <option value="CheckBox">체크박스(객관식)</option>
+          <option value="Rating">선형</option>
+          <option value="Grid">그리드</option>
+          <option value="Date">날짜</option>
+        </select>
+      </div>
+      <div className="flex w-full justify-center">
+        <input
+          type="text"
+          name="comment"
+          id={element._id}
+          className="border w-11/12"
+          placeholder="질문에 대한 설명을 입력해주세요"
+          onChange={questionListChange}
+        ></input>
+      </div>
+      <div className="flex mt-4">
+        {element.content.choices.map((e: string, index: number) => (
+          <div>
+            <input
+              type="radio"
+              id={element._id}
+              name="choice"
+              value={e}
+              disabled
+            />
+            <input
+              type="text"
+              name={"choice" + `${index}`}
+              // key={`${index}`}
+              className="mx-2 border-b-2"
+              placeholder={e}
+              onChange={questionListChange}
+            ></input>
+            <button></button>
+          </div>
+        ))}
+        {/* <button className="border rounded-full border-green-500 border-4 text-green-500 font-bold px-2">
         +
       </button> */}
+      </div>
+      <div className="flex w-full flex-row justify-end py-2">
+        <button className="w-1/12">필수</button>
+        <button className="w-1/12">옵션</button>
+        <button className="w-1/12">삭제</button>
+      </div>
     </div>
-    <div className="flex w-full flex-row justify-end py-2">
-      <button className="w-1/12">필수</button>
-      <button className="w-1/12">옵션</button>
-      <button className="w-1/12">삭제</button>
-    </div>
-  </div>
-);
+  );
+};

frontend/src/CreateSurveyForm/QRating.tsx

+import React from "react";
+import { RatingType } from "./CreateSurveyFormPage";
+import { useQuestion } from "./question.context";
+
+type Props = {
+  element: RatingType;
+  //   deleteValue: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+export const QRating = ({ element }: Props) => {
+  const { questionListChange } = useQuestion();
+
+  return (
+    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
+      <div className="flex h-16 w-full place-content-between items-center">
+        <input
+          type="text"
+          name="title"
+          id={element._id}
+          className="text-xl font-bold ml-6 border-b-2 w-1/2"
+          placeholder={element.title}
+          onChange={questionListChange}
+        ></input>
+        <select
+          id={element._id}
+          className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
+        >
+          <option>질문종류</option>
+          <option value="essay">주관식</option>
+          <option value="radio">객관식</option>
+          <option value="dropdown">드롭다운(객관식)</option>
+          <option value="checkbox">체크박스(객관식)</option>
+          <option value="file">파일업로드</option>
+          <option value="rating" selected>
+            선형
+          </option>
+          <option value="grid">그리드</option>
+          <option value="date">날짜</option>
+        </select>
+      </div>
+      <div className="flex w-full justify-center">
+        <input
+          type="text"
+          name="comment"
+          id={element._id}
+          className="border w-11/12"
+          placeholder="질문에 대한 설명을 입력해주세요"
+          onChange={questionListChange}
+        ></input>
+      </div>
+      <div className="flex place-content-between items-center p-5">
+        <input
+          name="minRateDescription"
+          id={element._id}
+          className="border-b-2 text-center"
+          size={10}
+          placeholder={element.content.minRateDescription}
+        ></input>
+        {element.content.rateValues.map((e) => (
+          <input
+            name="text"
+            id={element._id}
+            type="text"
+            className="border border-black rounded-full py-1 m-2 text-center"
+            size={1}
+            placeholder={e.text}
+          ></input>
+        ))}
+        <input
+          name="maxRateDescription"
+          id={element._id}
+          className="border-b-2 text-center"
+          size={10}
+          placeholder={element.content.maxRateDescription}
+        ></input>
+      </div>
+      <div>
+        <button
+          //   type="button"
+          name="rateValues"
+          id={element._id}
+          className="border border-red-500 rounded mx-2 px-2"
+          //   onClick={deleteValue}
+        >
+          삭제
+        </button>
+        <button className="border border-blue-500 rounded mx-2 px-2">
+          추가
+        </button>
+      </div>
+      <div className="flex w-full justify-end py-2">
+        <button className="w-1/12">필수</button>
+        <button className="w-1/12">옵션</button>
+        <button className="w-1/12">삭제</button>
+      </div>
+    </div>
+  );
+};

frontend/src/CreateSurveyForm/Question.tsx

 import React, { useState } from "react";
-import { BasicQuestionType } from "./CreateSurveyFormPage";
 import { QEssay } from "./QEssay";
 import { QCheckbox } from "./QCheckbox";
 import { QRadio } from "./QRadio";
 import { QDropdown } from "./QDropdown";
 import { QFile } from "./QFile";
+import { QRating } from "./QRating";
+import { useQuestion } from "./question.context";
 
-type Props = {
-  questionList: BasicQuestionType[];
-  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  addQuestion: () => void;
-};
+type Props = {};
+
+export const Question = ({}: Props) => {
+  const { addQuestion, questionList, currentId } = useQuestion();
 
-export const Question = ({
-  questionList,
-  QuestionListChange,
-  addQuestion,
-}: Props) => {
   return (
     <>
-      {console.log(questionList)}
+      {console.log(questionList, currentId)}
       {questionList.map((element) => {
         switch (element.type) {
           case "essay":
-            return (
-              <QEssay
-                element={element}
-                QuestionListChange={QuestionListChange}
-              />
-            );
+            return <QEssay element={element} />;
           case "radio":
-            return (
-              <QRadio
-                element={element}
-                QuestionListChange={QuestionListChange}
-              />
-            );
+            return <QRadio element={element} />;
           case "checkbox":
-            return (
-              <QCheckbox
-                element={element}
-                QuestionListChange={QuestionListChange}
-              />
-            );
+            return <QCheckbox element={element} />;
           case "dropdown":
-            return (
-              <QDropdown
-                element={element}
-                QuestionListChange={QuestionListChange}
-              />
-            );
+            return <QDropdown element={element} />;
           case "file":
-            return (
-              <QFile
-                element={element}
-                QuestionListChange={QuestionListChange}
-              />
-            );
-
+            return <QFile element={element} />;
+          case "rating":
+            return <QRating element={element} />;
           default:
             break;
         }

frontend/src/CreateSurveyForm/question.context.tsx

+import React, {
+  createContext,
+  FC,
+  ReactNode,
+  useContext,
+  useState,
+} from "react";
+import axios from "axios";
+import { BasicQuestionType } from "./CreateSurveyFormPage";
+
+interface IQuestionContext {
+  questionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  questionList: BasicQuestionType[];
+  editClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  currentId: string;
+  addQuestion: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+}
+
+const QuestionContext = createContext<IQuestionContext>({
+  questionListChange: () => {},
+  questionList: [],
+  editClick: () => {},
+  currentId: "",
+  addQuestion: async () => {},
+});
+
+export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>(
+    []
+  );
+  const [currentId, setCurrentId] = useState<string>("");
+
+  function questionListChange(e: React.ChangeEvent<HTMLInputElement>): void {
+    const newList: BasicQuestionType[] = [...questionList];
+    const obj: any = newList.find((a) => a._id === e.target.id); //고유 _id로 질문찾기
+    const targetKey: any = e.target.name;
+    obj[targetKey] = e.target.value;
+    setQuestionList(newList);
+  }
+
+  async function addQuestion(e: React.MouseEvent<HTMLButtonElement>) {
+    try {
+      const res = await axios.post("/api/questions/create", {
+        type: "essay",
+        title: "Question Title",
+        isRequired: false,
+        comment: "질문에 대한 설명을 입력해주세요",
+        content: null,
+      });
+      console.log(res.data);
+      setQuestionList([...questionList, res.data]);
+      // setSuccess(true);
+      // setError("");
+    } catch (error) {
+      console.log("에러발생");
+      // catchErrors(error, setError)
+    } finally {
+      // setLoading(false);
+    }
+  }
+
+  function editClick(e: React.MouseEvent<HTMLButtonElement>) {
+    setCurrentId(e.currentTarget.id);
+  }
+
+  return (
+    <QuestionContext.Provider
+      value={{
+        questionListChange,
+        addQuestion,
+        questionList,
+        editClick,
+        currentId,
+      }}
+    >
+      {children}
+    </QuestionContext.Provider>
+  );
+};
+
+export const useQuestion = () => useContext(QuestionContext);

frontend/src/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Webpack TypeScript React TailwindCSS Template</title>
+    <title>Simple Survey Form</title>
   </head>
   <body>
     <div id="root"></div>

src/controllers/index.ts

 export * as authCtrl from "./auth.controller";
+export * as questionCtrl from "./question.controller";
 export * as roleCtrl from "./role.controller";
 export * as userCtrl from "./user.controller";

src/controllers/question.controller.ts

+import { questionDb } from "../db";
+import { asyncWrap } from "../helpers/asyncWrap";
+
+export const createQuestion = asyncWrap(async (req, res) => {
+  const question = req.body;
+  console.log("question body", question);
+  const newQuestion = await questionDb.createQuestion(question);
+  return res.json(newQuestion);
+});

src/db/index.ts

-export * as userDb from "./user.db";
 export * as roleDb from "./role.db";
+export * as questionDb from "./question.db";
+export * as userDb from "./user.db";

src/db/question.db.ts

+import { Question, IQuestion } from "../models";
+
+export const createQuestion = async (question: IQuestion) => {
+  const newQuestion = await Question.create(question);
+  const newQ = {
+    _id: newQuestion._id,
+    type: newQuestion.type,
+    title: newQuestion.title,
+    isRequired: newQuestion.isRequired,
+    comment: newQuestion.comment,
+    content: newQuestion.content,
+  }
+  return newQ;
+};

src/models/index.ts

-export { default as User, IUser } from "./user.model";
+export { default as Question, IQuestion } from "./question.model";
 export { default as Role } from "./role.model";
+export { default as User, IUser } from "./user.model";

src/models/question.model.ts

+import { model, Schema, Types } from "mongoose";
+
+export interface IQuestion {
+    type: string;
+    // id: string;
+    title?: string;
+    isRequired: boolean;
+    comment?: string;
+    content?: any;
+  }
+  
+  const schema = new Schema<IQuestion>({
+    // id: {type:String},
+    type:{type:String},
+    title: {type:String},
+    isRequired: {type:Boolean},
+    comment:{type: String},
+    content:{type: Object},
+  });
+  
+  export default model<IQuestion>("Question", schema);
+  
\ No newline at end of file

src/models/user.model.ts

@@ -16,7 +16,7 @@ const schema = new Schema<IUser>(
   {
     email: {
       type: String,
-      rquired: true,
+      required: true,
       unique: true,
       validate: [validateEmail, "이메일을 입력해주세요"],
     },