CreateSurveyFormPage UI, Question Component

frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx

+import React from "react";
+import { Question } from "./Question";
+
+interface BasicQuestionType {
+  type: string;
+  name: string;
+  title: string;
+  isRequired: boolean;
+}
+
+interface EssayType extends BasicQuestionType {}
+let EssayQ: EssayType = {
+  type: "comment",
+  name: "Question1",
+  title: "제목을 입력하세요",
+  isRequired: false,
+};
+
+interface MultiChoiceType extends BasicQuestionType {
+  hasOther: boolean;
+  choices: any;
+  otherText: string;
+}
+
+export const CreateSurveyForm = () => (
+  <div className="flex flex-col place-items-center">
+    <div className="flex flex-col container place-items-center">
+      <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 className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
+      질문 추가 +
+    </div>
+  </div>
+);

frontend/src/CreateSurveyForm/Q_Assay.tsx

+import React, { useState } from "react";
+import { EssayType, BasicQuestionType } from "./Question";
+
+type Props = {
+  element: EssayType;
+  questionList: BasicQuestionType[];
+};
+
+export const Q_Assay = ({ element, questionList }: Props) => {
+  console.log(questionList);
+  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">
+        <p className="text-xl font-bold w-1/2 ml-6">
+          <input type="text" placeholder={element.title}></input>
+        </p>
+        <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" 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 ">
+        <textarea
+          className="border"
+          rows={1}
+          cols={80}
+          placeholder="질문에 대한 설명을 입력해주세요"
+        ></textarea>
+      </div>
+      <div id="commentarea" className="flex border mt-4">
+        <textarea className="resize-none" cols={80} readOnly></textarea>
+      </div>
+      <div className="flex w-full flex-row justify-end py-2">
+        <button className="w-1/12">필수</button>
+        <button className="w-1/12">삭제</button>
+      </div>
+    </div>
+  );
+};

frontend/src/CreateSurveyForm/Q_Checkbox.tsx

+import React from "react";
+import { CheckboxType } from "./Question";
+
+type Props = {
+  element: CheckboxType;
+};
+
+export const Q_Checkbox = ({ element }: 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="underline underline-offset-auto text-xl font-bold w-1/2 ml-6">
+        <input type="text" placeholder={element.title}></input>
+      </p>
+      <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 ">
+      <textarea
+        className="border"
+        rows={1}
+        cols={80}
+        placeholder="질문에 대한 설명을 입력해주세요"
+      ></textarea>
+    </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>
+    </div>
+  </div>
+);

frontend/src/CreateSurveyForm/Q_Radio.tsx

+import React from "react";
+import { RadioType } from "./Question";
+
+type Props = {
+  element: RadioType;
+};
+
+export const Q_Radio = ({ element }: 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="underline underline-offset-auto text-xl font-bold w-1/2 ml-6">
+        <input type="text" placeholder={element.title}></input>
+      </p>
+      <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 ">
+      <textarea
+        className="border"
+        rows={1}
+        cols={80}
+        placeholder="질문에 대한 설명을 입력해주세요"
+      ></textarea>
+    </div>
+    <div id="commentarea" className="flex mt-4">
+      {element.content.choices.map((e: string) => (
+        <div>
+          <input type="radio" id={e} name="choice" value={e} checked={false} />
+          <input
+            type="text"
+            className="mx-2 border-b-2"
+            placeholder={e}
+          ></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>
+    </div>
+  </div>
+);

frontend/src/CreateSurveyForm/Question.tsx

+import React from "react";
+import { Q_Assay } from "./Q_Assay";
+import { Q_Checkbox } from "./Q_Checkbox";
+import { Q_Radio } from "./Q_Radio";
+
+export interface BasicQuestionType {
+  type: string;
+  name: string;
+  title: string;
+  isRequired: boolean;
+  content: any;
+}
+
+export interface EssayType extends BasicQuestionType {}
+let EssayQ: EssayType = {
+  type: "assay",
+  name: "Question1",
+  title: "Question1",
+  isRequired: false,
+  content: null,
+};
+
+export interface RadioType extends BasicQuestionType {
+  content: {
+    hasOther: boolean;
+    choices: any;
+    otherText: string;
+  };
+}
+let RadioQ: RadioType = {
+  type: "radio",
+  name: "Question2",
+  title: "Question2",
+  isRequired: false,
+  content: {
+    hasOther: false,
+    otherText: "",
+    choices: ["1", "2", "3"],
+  },
+};
+
+export interface CheckboxType extends BasicQuestionType {
+  content: {
+    choices: any;
+    maxCount: number;
+  };
+}
+let CheckboxQ: CheckboxType = {
+  type: "checkbox",
+  name: "Question3",
+  title: "Question3",
+  isRequired: false,
+  content: {
+    choices: ["ch1", "ch2", "ch3"],
+    maxCount: 2,
+  },
+};
+
+let questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
+
+export const Question = () => (
+  <>
+    {questionList.map((element) => {
+      if (element.type === "assay") {
+        return <Q_Assay questionList={questionList} element={element} />;
+      } else if (element.type === "radio") {
+        return <Q_Radio element={element} />;
+      } else if (element.type === "checkbox") {
+        return <Q_Checkbox element={element} />;
+      }
+    })}
+  </>
+);

frontend/src/CreateSurveyForm/index.tsx

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

frontend/src/SurveyRouter.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import App from "./App";
 import { Login, SignUp } from "./auth";
-import { CreateSurveyForm, SurveyForm } from "./commons";
+import { SurveyForm } from "./commons";
+import { CreateSurveyForm } from "./CreateSurveyForm";
 import { Home } from "./home";
 
 export const SurveyRouter = () => {

frontend/src/commons/CreateSurveyForm.tsx

-import React from "react";
-
-export const CreateSurveyForm = () => (
-<div className="flex flex-col place-items-center">
-        <div className="flex flex-col container h-1/2 place-items-center">
-
-            <p className="font-bold text-4xl w-2/3">
-                Survey Title
-            </p>
-
-
-            <p className="text-3xl w-2/3">
-                Comment
-            </p>
-        </div>
-
-        <div className="flex flex-col container w-4/5 h-auto border-2 border-black items-center">
-            <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-                <p className="underline underline-offset-auto text-xl font-bold w-1/2 ml-6">
-                    질문
-                </p>
-                <button className="text-center flex border-2 border-black mr-6 place-content-end">
-                    질문종류▽
-                </button>
-
-            </div>
-            <div className="flex border-2 border-black h-96 w-4/5 mt-4">
-                설문내용 뜨는창
-            </div>
-            <div className="flex w-full flex-row justify-end">
-                <button className="w-1/12">필수</button>
-                <button className="w-1/12">삭제</button>
-            </div>
-        </div>
-
-        <div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
-            질문 추가 +
-        </div>
-
-    </div>);

frontend/src/commons/index.tsx

-export { CreateSurveyForm } from "./CreateSurveyForm";
 export { Header } from "./Header";
 export { SurveyForm } from "./SurveyForm";
\ No newline at end of file