Qcheckbox, QFile

frontend/src/CreateSurveyForm/QCheckbox.tsx

@@ -3,14 +3,20 @@ import { CheckboxType } from "./Question";
 
 type Props = {
   element: CheckboxType;
+  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const QCheckbox = ({ element }: Props) => (
+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">
-      <p className="text-xl font-bold ml-6 border-b-2">
-        <input type="text" placeholder={element.title}></input>
-      </p>
+      <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 focus:themeColor block w-full mr-3 p-2.5"
@@ -27,13 +33,15 @@ export const QCheckbox = ({ element }: Props) => (
         <option value="Date">날짜</option>
       </select>
     </div>
-    <div className="flex ">
-      <textarea
-        className="border"
-        rows={1}
-        cols={80}
+    <div className="flex w-full justify-center">
+      <input
+        type="text"
+        name={element.name}
+        id="comment"
+        className="border w-11/12"
         placeholder="질문에 대한 설명을 입력해주세요"
-      ></textarea>
+        onChange={QuestionListChange}
+      ></input>
     </div>
     <div id="commentarea" className="flex mt-4">
       {element.content.choices.map((e: string) => (

frontend/src/CreateSurveyForm/QDropdown.tsx

+import React from "react";
+import { DropdownType } from "./Question";
+
+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 focus:themeColor block 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>
+        <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>
+    </div>
+  </div>
+);

frontend/src/CreateSurveyForm/QFile.tsx

+import React, { useState } from "react";
+import { FileType } from "./Question";
+
+type Props = {
+  element: FileType;
+  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const QFile = ({ 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"
+          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" 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>
+        </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 w-full justify-center">
+        <input type="file" className=" w-11/12 h-16" disabled></input>
+      </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

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { QAssay } from "./QAssay";
 import { QCheckbox } from "./QCheckbox";
 import { QRadio } from "./QRadio";
+import { QDropdown } from "./QDropdown";
+import { QFile } from "./QFile";
 
 export interface BasicQuestionType {
   type: string;
@@ -16,17 +18,28 @@ export interface EssayType extends BasicQuestionType {}
 export interface RadioType extends BasicQuestionType {
   content: {
     hasOther: boolean;
-    choices: any[];
+    choices: string[];
     otherText: string;
   };
 }
 export interface CheckboxType extends BasicQuestionType {
   content: {
-    choices: any[];
+    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",
@@ -44,7 +57,7 @@ const RadioQ: RadioType = {
   content: {
     hasOther: false,
     otherText: "",
-    choices: ["1", "2", "3"],
+    choices: ["radio1", "radio2", "radio3"],
   },
 };
 const CheckboxQ: CheckboxType = {
@@ -54,10 +67,32 @@ const CheckboxQ: CheckboxType = {
   isRequired: false,
   comment: "질문에 대한 설명을 입력해주세요",
   content: {
-    choices: ["ch1", "ch2", "ch3"],
+    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];
 
@@ -65,6 +100,9 @@ export const Question = () => {
   const [questionList, setQuestionList] = useState<BasicQuestionType[]>([
     EssayQ,
     RadioQ,
+    CheckboxQ,
+    DropdownQ,
+    FileQ,
   ]);
   // const [survey, setSurvey] = useState();
 
@@ -96,19 +134,29 @@ export const Question = () => {
               />
             );
           case "checkbox":
-            return <QCheckbox element={element} />;
+            return (
+              <QCheckbox
+                element={element}
+                QuestionListChange={QuestionListChange}
+              />
+            );
+          case "dropdown":
+            return (
+              <QDropdown
+                element={element}
+                QuestionListChange={QuestionListChange}
+              />
+            );
+          case "file":
+            return (
+              <QFile
+                element={element}
+                QuestionListChange={QuestionListChange}
+              />
+            );
           default:
             break;
         }
-        // if (element.type === "assay") {
-        //   return (
-        //     <QAssay element={element} QuestionListChange={QuestionListChange} />
-        //   );
-        // } else if (element.type === "radio") {
-        //   return <QRadio element={element} />;
-        // } else if (element.type === "checkbox") {
-        //   return <QCheckbox element={element} />;
-        // }
       })}
     </>
   );