changeDD함수로 questionList접근해서 type바꾸기

frontend/src/CreateSurveyForm/QCheckbox.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { CheckboxType } from "./CreateSurveyFormPage";
 import { useQuestion } from "./question.context";
 import { Edit } from "./Edit";
+import { TypeChange } from "./typeDD";
 
 type Props = {
   element: CheckboxType;
@@ -21,22 +22,7 @@ export const QCheckbox = ({ element }: Props) => {
           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>
+        <TypeChange tt="checkbox" />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/QDropdown.tsx

 import React from "react";
 import { DropdownType } from "./CreateSurveyFormPage";
 import { useQuestion } from "./question.context";
+import { TypeChange } from "./typeDD";
 
 type Props = {
   element: DropdownType;
@@ -19,22 +20,7 @@ export const QDropdown = ({ element }: Props) => {
           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>
+        <TypeChange tt="dropdown" />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/QEssay.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { EssayType } from "./CreateSurveyFormPage";
 import { useQuestion } from "./question.context";
 import { Edit } from "./Edit";
+import { TypeChange } from "./typeDD";
 
 type Props = {
   element: EssayType;
@@ -21,22 +22,8 @@ export const QEssay = ({ element }: Props) => {
           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" selected>
-            주관식
-          </option>
-          <option value="radio">객관식</option>
-          <option value="dropdown">드롭다운(객관식)</option>
-          <option value="checkbox">체크박스(객관식)</option>
-          <option value="file">파일업로드</option>
-          <option value="rating">선형</option>
-          <option value="grid">그리드</option>
-          <option value="date">날짜</option>
-        </select>
+        {/* <TypeChange tt={"essay"} id={element._id} /> */}
+        <TypeChange tt={"essay"} />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/QFile.tsx

 import React, { useState } from "react";
 import { FileType } from "./CreateSurveyFormPage";
 import { useQuestion } from "./question.context";
+import { TypeChange } from "./typeDD";
 
 type Props = {
   element: FileType;
@@ -20,22 +21,7 @@ export const QFile = ({ element }: Props) => {
           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">체크박스(객관식)</option>
-          <option value="file" selected>
-            파일업로드
-          </option>
-          <option value="rating">선형</option>
-          <option value="grid">그리드</option>
-          <option value="date">날짜</option>
-        </select>
+        <TypeChange tt="file" />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/QRadio.tsx

 import React from "react";
 import { RadioType } from "./CreateSurveyFormPage";
 import { useQuestion } from "./question.context";
+import { TypeChange } from "./typeDD";
 
 type Props = {
   element: RadioType;
@@ -19,21 +20,7 @@ export const QRadio = ({ element }: Props) => {
           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>
+        <TypeChange tt="radio" />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/QRating.tsx

 import React from "react";
 import { RatingType } from "./CreateSurveyFormPage";
 import { useQuestion } from "./question.context";
+import { TypeChange } from "./typeDD";
 
 type Props = {
   element: RatingType;
@@ -21,22 +22,7 @@ export const QRating = ({ element }: Props) => {
           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>
+        <TypeChange tt="rating" />
       </div>
       <div className="flex w-full justify-center">
         <input

frontend/src/CreateSurveyForm/question.context.tsx

@@ -7,6 +7,7 @@ import React, {
 } from "react";
 import axios from "axios";
 import { BasicQuestionType } from "./CreateSurveyFormPage";
+import e from "express";
 
 interface IQuestionContext {
   questionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -14,6 +15,7 @@ interface IQuestionContext {
   editClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
   currentId: string;
   addQuestion: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+  questionTypeChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 
 const QuestionContext = createContext<IQuestionContext>({
@@ -22,6 +24,7 @@ const QuestionContext = createContext<IQuestionContext>({
   editClick: () => {},
   currentId: "",
   addQuestion: async () => {},
+  questionTypeChange: () => {},
 });
 
 export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
@@ -37,6 +40,13 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
     obj[targetKey] = e.target.value;
     setQuestionList(newList);
   }
+  function questionTypeChange(e: React.ChangeEvent<HTMLSelectElement>): void {
+    const newType: BasicQuestionType[] = [...questionList];
+    const objType: any = newType.find((t) => t._id === e.target.id);
+    const targetType: string = e.target.name;
+    objType[targetType] = e.target.value;
+    setQuestionList(newType);
+  }
 
   async function addQuestion(e: React.MouseEvent<HTMLButtonElement>) {
     try {
@@ -71,6 +81,7 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
         questionList,
         editClick,
         currentId,
+        questionTypeChange,
       }}
     >
       {children}

frontend/src/CreateSurveyForm/typeDD.tsx

+import React, { ChangeEvent, useState } from "react";
+import { useQuestion } from "./question.context";
+
+type typeChangeProps = {
+  tt: string;
+};
+
+export function TypeChange({ tt }: typeChangeProps) {
+  const { questionTypeChange } = useQuestion();
+
+  const typeDD = new Map([
+    ["essay", "주관식"],
+    ["radio", "객관식"],
+    ["dropdown", "드롭다운(객관식)"],
+    ["checkbox", "체크박스"],
+    ["file", "파일"],
+    ["rating", "선형"],
+    ["grid", "그리드"],
+    ["date", "날짜"],
+  ]);
+  function changeDD(e: ChangeEvent<HTMLSelectElement>) {
+    const tt = e.target.value;
+    questionTypeChange(e);
+    console.log(tt);
+    //if문으로 type별로 content 바뀌게 해보기
+  }
+
+  return (
+    <select
+      id="Questions"
+      name="type"
+      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"
+      defaultValue={tt}
+      onChange={changeDD}
+    >
+      {Array.from(typeDD.entries()).map(([k, v]) => (
+        <option value={k}>{v}</option>
+      ))}
+    </select>
+  );
+}