Type, 함수들 Question->Page

frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx

-import React from "react";
+import React, { useState } from "react";
 import { Question } from "./Question";
 
-interface BasicQuestionType {
+export interface BasicQuestionType {
   type: string;
-  name: string;
+  id: string;
   title: string;
   isRequired: boolean;
+  comment: string;
+  content: any;
+  [key: string]: string | number | boolean | any;
+}
+export interface EssayType extends BasicQuestionType {}
+export interface RadioType extends BasicQuestionType {
+  content: {
+    hasOther: boolean;
+    choices: string[];
+    otherText: string;
+  };
+}
+export interface CheckboxType extends BasicQuestionType {
+  content: {
+    choices: string[];
+    maxCount: number;
+  };
+}
+export interface DropdownType extends BasicQuestionType {
+  content: {
+    choices: string[];
+    hasNone: boolean;
+  };
+}
+export interface FileType extends BasicQuestionType {
+  content: {
+    filename: string;
+    value: string;
+  };
+}
+export interface RatingType extends BasicQuestionType {
+  content: {
+    rateMin: number;
+    rateMax: number;
+    minRateDescription: string;
+    maxRateDescription: string;
+  };
 }
 
-interface EssayType extends BasicQuestionType {}
-let EssayQ: EssayType = {
-  type: "comment",
-  name: "Question1",
-  title: "제목을 입력하세요",
+const EssayQ: EssayType = {
+  type: "essay",
+  id: "000000000000",
+  title: "Question1",
+  isRequired: false,
+  comment: "질문에 대한 설명을 입력해주세요",
+  content: null,
+};
+const RadioQ: RadioType = {
+  type: "radio",
+  id: "000000000001",
+  title: "Question2",
+  isRequired: false,
+  comment: "질문에 대한 설명을 입력해주세요",
+  content: {
+    hasOther: false,
+    otherText: "",
+    choices: ["radio1", "radio2", "radio3"],
+  },
+};
+const CheckboxQ: CheckboxType = {
+  type: "checkbox",
+  id: "000000000002",
+  title: "Question3",
+  isRequired: false,
+  comment: "질문에 대한 설명을 입력해주세요",
+  content: {
+    choices: ["check1", "check2", "check3"],
+    maxCount: 2,
+  },
+};
+const DropdownQ: DropdownType = {
+  type: "dropdown",
+  id: "000000000003",
+  title: "Question4",
+  isRequired: false,
+  comment: "질문에 대한 설명을 입력해주세요",
+  content: {
+    choices: ["drop1", "drop2", "drop3"],
+    hasNone: false,
+  },
+};
+const FileQ: FileType = {
+  type: "file",
+  id: "000000000004",
+  title: "Question5",
+  isRequired: false,
+  comment: "질문에 대한 설명을 입력해주세요",
+  content: {
+    filename: "",
+    value: "",
+  },
+};
+const RatingQ: RatingType = {
+  type: "rating",
+  id: "000000000005",
+  title: "Question6",
   isRequired: false,
+  comment: "질문에 대한 설명을 입력해주세요",
+  content: {
+    rateMin: 0,
+    rateMax: 10,
+    minRateDescription: "가장 낮음",
+    maxRateDescription: "가장 높음",
+  },
 };
 
-interface MultiChoiceType extends BasicQuestionType {
-  hasOther: boolean;
-  choices: any;
-  otherText: string;
-}
+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);
+  }
 
-export const CreateSurveyForm = () => (
+  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 {}
+
+  return (
     <div className="flex flex-col place-items-center">
       <div className="flex flex-col container place-items-center">
         <input
@@ -37,11 +166,11 @@ export const CreateSurveyForm = () => (
           cols={60}
         ></textarea>
       </div>
-
-    <Question />
-
-    <div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
-      질문 추가 +
-    </div>
+      <Question
+        questionList={questionList}
+        QuestionListChange={QuestionListChange}
+        addQuestion={addQuestion}
+      />
     </div>
-);
+  );
+};

frontend/src/CreateSurveyForm/QCheckbox.tsx

 import React from "react";
-import { CheckboxType } from "./Question";
+import { CheckboxType } from "./CreateSurveyFormPage";
 
 type Props = {
   element: CheckboxType;
@@ -19,18 +19,19 @@ export const QCheckbox = ({ element, QuestionListChange }: Props) => (
       ></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"
+        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="MultipleChoice">객관식</option>
-        <option value="Dropdown">드롭다운(객관식)</option>
-        <option value="CheckBox" selected>
+        <option value="essay">주관식</option>
+        <option value="radio">객관식</option>
+        <option value="dropdown">드롭다운(객관식)</option>
+        <option value="checkbox" selected>
           체크박스(객관식)
         </option>
-        <option value="Rating">선형</option>
-        <option value="Grid">그리드</option>
-        <option value="Date">날짜</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">

frontend/src/CreateSurveyForm/QDropdown.tsx

 import React from "react";
-import { DropdownType } from "./Question";
+import { DropdownType } from "./CreateSurveyFormPage";
 
 type Props = {
   element: DropdownType;
@@ -19,18 +19,19 @@ export const QDropdown = ({ element, QuestionListChange }: Props) => (
       ></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"
+        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="MultipleChoice">객관식</option>
-        <option value="Dropdown">드롭다운(객관식)</option>
-        <option value="CheckBox" selected>
-          체크박스(객관식)
+        <option value="essay">주관식</option>
+        <option value="radio">객관식</option>
+        <option value="dropdown" selected>
+          드롭다운(객관식)
         </option>
-        <option value="Rating">선형</option>
-        <option value="Grid">그리드</option>
-        <option value="Date">날짜</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">

frontend/src/CreateSurveyForm/QAssay.tsx → frontend/src/CreateSurveyForm/QEssay.tsx

 import React, { useState } from "react";
-import { EssayType } from "./Question";
+import { EssayType } from "./CreateSurveyFormPage";
 
 type Props = {
   element: EssayType;
   QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const QAssay = ({ element, QuestionListChange }: Props) => {
+export const QEssay = ({ element, QuestionListChange }: Props) => {
   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}
@@ -23,22 +23,23 @@ export const QAssay = ({ element, QuestionListChange }: Props) => {
           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 value="essay" selected>
             주관식
           </option>
-          <option value="MultipleChoice">객관식</option>
-          <option value="Dropdown">드롭다운(객관식)</option>
-          <option value="CheckBox">체크박스(객관식)</option>
-          <option value="Rating">선형</option>
-          <option value="Grid">그리드</option>
-          <option value="Date">날짜</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>
       </div>
       <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}

frontend/src/CreateSurveyForm/QFile.tsx

 import React, { useState } from "react";
-import { FileType } from "./Question";
+import { FileType } from "./CreateSurveyFormPage";
 
 type Props = {
   element: FileType;
@@ -23,15 +23,16 @@ export const QFile = ({ element, QuestionListChange }: Props) => {
           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 value="essay">주관식</option>
+          <option value="radio">객관식</option>
+          <option value="dropdown">드롭다운(객관식)</option>
+          <option value="checkbox">체크박스(객관식)</option>
+          <option value="file" selected>
+            파일업로드
           </option>
-          <option value="MultipleChoice">객관식</option>
-          <option value="Dropdown">드롭다운(객관식)</option>
-          <option value="CheckBox">체크박스(객관식)</option>
-          <option value="Rating">선형</option>
-          <option value="Grid">그리드</option>
-          <option value="Date">날짜</option>
+          <option value="rating">선형</option>
+          <option value="grid">그리드</option>
+          <option value="date">날짜</option>
         </select>
       </div>
       <div className="flex w-full justify-center">

frontend/src/CreateSurveyForm/QRadio.tsx

 import React from "react";
-import { RadioType } from "./Question";
+import { RadioType } from "./CreateSurveyFormPage";
 
 type Props = {
   element: RadioType;
@@ -11,8 +11,8 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
     <div className="flex h-16 w-full place-content-between items-center">
       <input
         type="text"
-        name={element.name}
-        id="title"
+        id={element.id}
+        name="title"
         className="text-xl font-bold ml-6 border-b-2 w-1/2"
         placeholder={element.title}
         onChange={QuestionListChange}
@@ -36,8 +36,8 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
     <div className="flex w-full justify-center">
       <input
         type="text"
-        name={element.name}
-        id="comment"
+        id={element.id}
+        name="comment"
         className="border w-11/12"
         placeholder="질문에 대한 설명을 입력해주세요"
         onChange={QuestionListChange}

frontend/src/CreateSurveyForm/Question.tsx

 import React, { useState } from "react";
-import { QAssay } from "./QAssay";
+import { BasicQuestionType } from "./CreateSurveyFormPage";
+import { QEssay } from "./QEssay";
 import { QCheckbox } from "./QCheckbox";
 import { QRadio } from "./QRadio";
 import { QDropdown } from "./QDropdown";
 import { QFile } from "./QFile";
 
-export interface BasicQuestionType {
-  type: string;
-  name: string;
-  title: string;
-  isRequired: boolean;
-  comment: string;
-  content: any;
-  [key: string]: string | number | boolean | any;
-}
-export interface EssayType extends BasicQuestionType {}
-export interface RadioType extends BasicQuestionType {
-  content: {
-    hasOther: boolean;
-    choices: string[];
-    otherText: string;
-  };
-}
-export interface CheckboxType extends BasicQuestionType {
-  content: {
-    choices: string[];
-    maxCount: number;
-  };
-}
-export interface DropdownType extends BasicQuestionType {
-  content: {
-    choices: string[];
-    hasNone: boolean;
-  };
-}
-export interface FileType extends BasicQuestionType {
-  content: {
-    filename: string;
-    value: string;
-  };
-}
-const EssayQ: EssayType = {
-  type: "assay",
-  name: "Question1",
-  title: "Question1",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: null,
+type Props = {
+  questionList: BasicQuestionType[];
+  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  addQuestion: () => void;
 };
-const RadioQ: RadioType = {
-  type: "radio",
-  name: "Question2",
-  title: "Question2",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: {
-    hasOther: false,
-    otherText: "",
-    choices: ["radio1", "radio2", "radio3"],
-  },
-};
-const CheckboxQ: CheckboxType = {
-  type: "checkbox",
-  name: "Question3",
-  title: "Question3",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: {
-    choices: ["check1", "check2", "check3"],
-    maxCount: 2,
-  },
-};
-const DropdownQ: DropdownType = {
-  type: "dropdown",
-  name: "Question4",
-  title: "Question4",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: {
-    choices: ["drop1", "drop2", "drop3"],
-    hasNone: false,
-  },
-};
-const FileQ: FileType = {
-  type: "file",
-  name: "Question5",
-  title: "Question5",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: {
-    filename: "",
-    value: "",
-  },
-};
-
-// const questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
-
-export const Question = () => {
-  const [questionList, setQuestionList] = useState<BasicQuestionType[]>([
-    EssayQ,
-    RadioQ,
-    CheckboxQ,
-    DropdownQ,
-    FileQ,
-  ]);
-  // const [survey, setSurvey] = useState();
-
-  function QuestionListChange(e: React.ChangeEvent<HTMLInputElement>): void {
-    const newList: BasicQuestionType[] = [...questionList];
-    const targetId: any = e.target.id;
-    const obj: any = newList.find((a) => a.name === e.target.name);
-    obj[targetId] = e.target.value;
-    setQuestionList(newList);
-  }
 
+export const Question = ({
+  questionList,
+  QuestionListChange,
+  addQuestion,
+}: Props) => {
   return (
     <>
       {console.log(questionList)}
       {questionList.map((element) => {
         switch (element.type) {
-          case "assay":
+          case "essay":
             return (
-              <QAssay
+              <QEssay
                 element={element}
                 QuestionListChange={QuestionListChange}
               />
@@ -154,10 +57,14 @@ export const Question = () => {
                 QuestionListChange={QuestionListChange}
               />
             );
+
           default:
             break;
         }
       })}
+      <div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
+        <button onClick={addQuestion}>질문 추가</button>
+      </div>
     </>
   );
 };

src/config.ts

-export const mongoUri = "mongodb://localhost/survey";
+export const mongoUri = "mongodb://localhost:27017/survey";
 
 export const jwtCofig = {
   secret: "HelloSecretString",