usecontext

frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx

 import React, { useState } from "react";
 import { Question } from "./Question";
-import axios from "axios";
+import { QuestionProvider } from "./question.context";
 
 export interface BasicQuestionType {
   type: string;
-  id: string;
+  _id: string;
   title: string;
   isRequired: boolean;
   comment: string;
@@ -50,7 +50,7 @@ export interface RatingType extends BasicQuestionType {
 
 const EssayQ: EssayType = {
   type: "essay",
-  id: "000000000000",
+  _id: "000000000000",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -58,7 +58,7 @@ const EssayQ: EssayType = {
 };
 const RadioQ: RadioType = {
   type: "radio",
-  id: "000000000001",
+  _id: "000000000001",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -70,7 +70,7 @@ const RadioQ: RadioType = {
 };
 const CheckboxQ: CheckboxType = {
   type: "checkbox",
-  id: "000000000002",
+  _id: "000000000002",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -81,7 +81,7 @@ const CheckboxQ: CheckboxType = {
 };
 const DropdownQ: DropdownType = {
   type: "dropdown",
-  id: "000000000003",
+  _id: "000000000003",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -92,7 +92,7 @@ const DropdownQ: DropdownType = {
 };
 const FileQ: FileType = {
   type: "file",
-  id: "000000000004",
+  _id: "000000000004",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -103,7 +103,7 @@ const FileQ: FileType = {
 };
 const RatingQ: RatingType = {
   type: "rating",
-  id: "000000000005",
+  _id: "000000000005",
   title: "Question Title",
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
@@ -119,94 +119,36 @@ const RatingQ: RatingType = {
 };
 
 export const CreateSurveyForm = () => {
-  const [currentId, setCurrentId] = useState<string>("");
+  const [survey, setSurvey] = useState();
   const [error, setError] = useState("");
   const [disabled, setDisabled] = useState(false);
   const [success, setSuccess] = useState(false);
-  const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>([
-    EssayQ,
-    RadioQ,
-    CheckboxQ,
-  ]);
-  const [survey, setSurvey] = useState();
-
-  function changeCurrentId(event: React.MouseEvent<HTMLButtonElement>): void {
-    setCurrentId(event.currentTarget.id);
-  }
-
-  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(event: React.MouseEvent<HTMLButtonElement>) {
-    event.preventDefault();
-    try {
-      const res = await axios.post("/api/question/create");
-      console.log("서버연결됬나요", res);
-      console.log("회원가입");
-      setSuccess(true);
-      setError("");
-    } catch (error) {
-      console.log("에러발생");
-      // catchErrors(error, setError)
-    } finally {
-      // setLoading(false);
-    }
-    //무작위로 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 {}
 
   return (
     <>
-      {console.log(currentId)}
-      <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}
-          changeCurrentId={changeCurrentId}
-        />
-        <div>
-          <button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
-            설문조사 생성
-          </button>
+      <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>
-      </div>
+      </QuestionProvider>
     </>
   );
 };

frontend/src/CreateSurveyForm/Edit.tsx

 import React from "react";
+import { useQuestion } from "./question.context";
 
 type Props = {
   id: string;
-  changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
-export const Edit = ({ id, changeCurrentId }: Props) => {
+export const Edit = ({ id }: Props) => {
+  const { editClick } = useQuestion();
+
   return (
-    <button id={id} className="" onClick={changeCurrentId}>
+    <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;
-  changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
-export const QEssay = ({
-  element,
-  QuestionListChange,
-  changeCurrentId,
-}: 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"
@@ -45,10 +42,10 @@ export const QEssay = ({
         <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">
@@ -58,7 +55,7 @@ export const QEssay = ({
         <button className="w-1/12">필수</button>
         <button className="w-1/12">옵션</button>
         <button className="w-1/12">삭제</button>
-        <Edit id={element.id} changeCurrentId={changeCurrentId} />
+        <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, 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">
+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;
-  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   //   deleteValue: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
-export const QRating = ({ element, QuestionListChange }: Props) => {
+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}
+          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={element.id}
+          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>
@@ -40,16 +42,16 @@ export const QRating = ({ 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 className="flex place-content-between items-center p-5">
         <input
           name="minRateDescription"
-          id={element.id}
+          id={element._id}
           className="border-b-2 text-center"
           size={10}
           placeholder={element.content.minRateDescription}
@@ -57,7 +59,7 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
         {element.content.rateValues.map((e) => (
           <input
             name="text"
-            id={element.id}
+            id={element._id}
             type="text"
             className="border border-black rounded-full py-1 m-2 text-center"
             size={1}
@@ -66,7 +68,7 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
         ))}
         <input
           name="maxRateDescription"
-          id={element.id}
+          id={element._id}
           className="border-b-2 text-center"
           size={10}
           placeholder={element.content.maxRateDescription}
@@ -76,7 +78,7 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
         <button
           //   type="button"
           name="rateValues"
-          id={element.id}
+          id={element._id}
           className="border border-red-500 rounded mx-2 px-2"
           //   onClick={deleteValue}
         >

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: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
-};
+type Props = {};
+
+export const Question = ({}: Props) => {
+  const { addQuestion, questionList, currentId } = useQuestion();
 
-export const Question = ({
-  questionList,
-  QuestionListChange,
-  addQuestion,
-  changeCurrentId,
-}: Props) => {
   return (
     <>
-      {console.log(questionList)}
+      {console.log(questionList, currentId)}
       {questionList.map((element) => {
         switch (element.type) {
           case "essay":
-            return (
-              <QEssay
-                element={element}
-                QuestionListChange={QuestionListChange}
-                changeCurrentId={changeCurrentId}
-              />
-            );
+            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}
-                QuestionListChange={QuestionListChange}
-              />
-            );
+            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/question.controller.ts

@@ -5,5 +5,5 @@ 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(question);
+  return res.json(newQuestion);
 });

src/db/question.db.ts

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

src/models/question.model.ts

@@ -2,7 +2,7 @@ import { model, Schema, Types } from "mongoose";
 
 export interface IQuestion {
     type: string;
-    id: string;
+    // id: string;
     title?: string;
     isRequired: boolean;
     comment?: string;
@@ -10,7 +10,7 @@ export interface IQuestion {
   }
   
   const schema = new Schema<IQuestion>({
-    id: {type:String},
+    // id: {type:String},
     type:{type:String},
     title: {type:String},
     isRequired: {type:Boolean},

src/routes/index.ts

@@ -7,6 +7,6 @@ const router = express.Router();
 
 router.use("/users", userRouter);
 router.use("/auth", authRouter);
-router.use("/question", questionRouter)
+router.use("/questions", questionRouter)
 
 export default router;

src/routes/question.route.ts

@@ -5,7 +5,6 @@ const router = express.Router();
 
 router
   .route("/create")
-  .get()
   .post(questionCtrl.createQuestion);
 
 export default router;