Questions(파일이름변경), 객관식 content choices로 통일

frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx

 import React, { useState } from "react";
-import { Question } from "./Question";
+import { Questions } from "./Questions";
 import { QuestionProvider } from "./question.context";
 
-export interface BasicQuestionType {
-  type: 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: {
-    rateValues: {
-      value: number;
-      text: string;
-    }[];
-    minRateDescription: string;
-    maxRateDescription: string;
-  };
-}
-
-const EssayQ: EssayType = {
-  type: "essay",
-  _id: "000000000000",
-  title: "Question Title",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: null,
-};
-const RadioQ: RadioType = {
-  type: "radio",
-  _id: "000000000001",
-  title: "Question Title",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: {
-    hasOther: false,
-    otherText: "",
-    choices: ["radio1", "radio2", "radio3"],
-  },
-};
-const CheckboxQ: CheckboxType = {
-  type: "checkbox",
-  _id: "000000000002",
-  title: "Question Title",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: {
-    choices: ["check1", "check2", "check3"],
-    maxCount: 2,
-  },
-};
-const DropdownQ: DropdownType = {
-  type: "dropdown",
-  _id: "000000000003",
-  title: "Question Title",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: {
-    choices: ["drop1", "drop2", "drop3"],
-    hasNone: false,
-  },
-};
-const FileQ: FileType = {
-  type: "file",
-  _id: "000000000004",
-  title: "Question Title",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: {
-    filename: "",
-    value: "",
-  },
-};
-const RatingQ: RatingType = {
-  type: "rating",
-  _id: "000000000005",
-  title: "Question Title",
-  isRequired: false,
-  comment: "질문에 대한 설명을 입력해주세요",
-  content: {
-    rateValues: [
-      { value: 1, text: "1" },
-      { value: 2, text: "2" },
-      { value: 3, text: "3" },
-    ],
-    minRateDescription: "가장 낮음",
-    maxRateDescription: "가장 높음",
-  },
-};
-
 export const CreateSurveyForm = () => {
   const [survey, setSurvey] = useState();
   const [error, setError] = useState("");
@@ -141,7 +25,7 @@ export const CreateSurveyForm = () => {
               cols={60}
             ></textarea>
           </div>
-          <Question />
+          <Questions />
           <div>
             <button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
               설문조사 생성

frontend/src/CreateSurveyForm/QCheckbox.tsx

 import React from "react";
-import { CheckboxType } from "./CreateSurveyFormPage";
+import { CheckboxType } from "../types";
 import { useQuestion } from "./question.context";
 import { Edit } from "./Edit";
 
@@ -49,13 +49,13 @@ export const QCheckbox = ({ element }: Props) => {
         ></input>
       </div>
       <div id="commentarea" className="flex mt-4">
-        {element.content.choices.map((e: string) => (
+        {element.content.choices.map((e: any) => (
           <div>
             <input type="checkbox" checked={false}></input>
             <input
               type="text"
               className="mx-2 border-b-2"
-              placeholder={e}
+              placeholder={e.text}
             ></input>
           </div>
         ))}

frontend/src/CreateSurveyForm/QDropdown.tsx

 import React from "react";
-import { DropdownType } from "./CreateSurveyFormPage";
+import { DropdownType } from "../types";
 import { useQuestion } from "./question.context";
 
 type Props = {
@@ -47,13 +47,13 @@ export const QDropdown = ({ element }: Props) => {
         ></input>
       </div>
       <div id="commentarea" className="flex mt-4">
-        {element.content.choices.map((e: string) => (
+        {element.content.choices.map((e: any) => (
           <div>
             <input type="checkbox" checked={false}></input>
             <input
               type="text"
               className="mx-2 border-b-2"
-              placeholder={e}
+              placeholder={e.text}
             ></input>
           </div>
         ))}

frontend/src/CreateSurveyForm/QEssay.tsx

 import React, { useState } from "react";
-import { EssayType } from "./CreateSurveyFormPage";
+import { EssayType } from "../types";
 import { useQuestion } from "./question.context";
 import { Edit } from "./Edit";
 

frontend/src/CreateSurveyForm/QFile.tsx

 import React, { useState } from "react";
-import { FileType } from "./CreateSurveyFormPage";
+import { FileType } from "../types";
 import { useQuestion } from "./question.context";
 
 type Props = {

frontend/src/CreateSurveyForm/QRadio.tsx

 import React from "react";
-import { RadioType } from "./CreateSurveyFormPage";
+import { RadioType } from "../types";
 import { useQuestion } from "./question.context";
 
 type Props = {
@@ -46,21 +46,21 @@ export const QRadio = ({ element }: Props) => {
         ></input>
       </div>
       <div className="flex mt-4">
-        {element.content.choices.map((e: string, index: number) => (
+        {element.content.choices.map((e: any) => (
           <div>
             <input
               type="radio"
               id={element._id}
               name="choice"
-              value={e}
+              value={e.text}
               disabled
             />
             <input
               type="text"
-              name={"choice" + `${index}`}
+              name={"choice"}
               // key={`${index}`}
               className="mx-2 border-b-2"
-              placeholder={e}
+              placeholder={e.text}
               onChange={questionListChange}
             ></input>
             <button></button>

frontend/src/CreateSurveyForm/QRating.tsx

 import React from "react";
-import { RatingType } from "./CreateSurveyFormPage";
+import { RatingType } from "../types";
 import { useQuestion } from "./question.context";
 
 type Props = {
@@ -56,7 +56,7 @@ export const QRating = ({ element }: Props) => {
           size={10}
           placeholder={element.content.minRateDescription}
         ></input>
-        {element.content.rateValues.map((e) => (
+        {element.content.choices.map((e) => (
           <input
             name="text"
             id={element._id}

frontend/src/CreateSurveyForm/Question.tsx → frontend/src/CreateSurveyForm/Questions.tsx

@@ -9,7 +9,7 @@ import { useQuestion } from "./question.context";
 
 type Props = {};
 
-export const Question = ({}: Props) => {
+export const Questions = ({}: Props) => {
   const { addQuestion, questionList, currentId } = useQuestion();
 
   return (

frontend/src/CreateSurveyForm/index.tsx

 export { CreateSurveyForm } from "./CreateSurveyFormPage";
-export { Question } from "./Question";
+export { Questions } from "./Questions";

frontend/src/CreateSurveyForm/question.context.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from "react";
 import axios from "axios";
-import { BasicQuestionType } from "./CreateSurveyFormPage";
+import { BasicQuestionType } from "../types";
 
 interface IQuestionContext {
   questionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;

frontend/src/types/index.ts

@@ -9,3 +9,64 @@ export interface SignupUser {
   name: string;
   password: string;
 }
+
+export interface BasicQuestionType {
+  type: 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: {
+    choices: {
+      value: number;
+      text: string;
+    }[];
+    hasOther: boolean;
+    otherText: string;
+  };
+}
+
+export interface CheckboxType extends BasicQuestionType {
+  content: {
+    choices: {
+      value: number;
+      text: string;
+    }[];
+    maxCount: number;
+  };
+}
+
+export interface DropdownType extends BasicQuestionType {
+  content: {
+    choices: {
+      value: number;
+      text: string;
+    }[];
+    hasNone: boolean;
+  };
+}
+
+export interface FileType extends BasicQuestionType {
+  content: {
+    filename: string;
+    value: string;
+  };
+}
+
+export interface RatingType extends BasicQuestionType {
+  content: {
+    choices: {
+      value: number;
+      text: string;
+    }[];
+    minRateDescription: string;
+    maxRateDescription: string;
+  };
+}
\ No newline at end of file