Merge remote-tracking branch 'origin/develope' into yeon

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/QAssay.tsx

+import React, { useState } from "react";
+import { EssayType } from "./Question";
+
+type Props = {
+  element: EssayType;
+  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const QAssay = ({ 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 className="border 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/QCheckbox.tsx

+import React from "react";
+import { CheckboxType } from "./Question";
+
+type Props = {
+  element: CheckboxType;
+};
+
+export const QCheckbox = ({ 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="text-xl font-bold ml-6 border-b-2">
+        <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>
+      <button className="w-1/12">삭제</button>
+    </div>
+  </div>
+);

frontend/src/CreateSurveyForm/QRadio.tsx

+import React from "react";
+import { RadioType } from "./Question";
+
+type Props = {
+  element: RadioType;
+  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const QRadio = ({ 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 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" 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 w-full justify-center">
+      <input
+        type="text"
+        name={element.name}
+        id="comment"
+        className="border w-11/12"
+        placeholder="질문에 대한 설명을 입력해주세요"
+        onChange={QuestionListChange}
+      ></input>
+    </div>
+    <div 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"
+            name="content"
+            className="mx-2 border-b-2"
+            placeholder={e}
+            onChange={QuestionListChange}
+          ></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>
+      <button className="w-1/12">삭제</button>
+    </div>
+  </div>
+);

frontend/src/CreateSurveyForm/Question.tsx

+import React, { useState } from "react";
+import { QAssay } from "./QAssay";
+import { QCheckbox } from "./QCheckbox";
+import { QRadio } from "./QRadio";
+
+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: any[];
+    otherText: string;
+  };
+}
+export interface CheckboxType extends BasicQuestionType {
+  content: {
+    choices: any[];
+    maxCount: number;
+  };
+}
+
+const EssayQ: EssayType = {
+  type: "assay",
+  name: "Question1",
+  title: "Question1",
+  isRequired: false,
+  comment: "질문에 대한 설명을 입력해주세요",
+  content: null,
+};
+const RadioQ: RadioType = {
+  type: "radio",
+  name: "Question2",
+  title: "Question2",
+  isRequired: false,
+  comment: "질문에 대한 설명을 입력해주세요",
+  content: {
+    hasOther: false,
+    otherText: "",
+    choices: ["1", "2", "3"],
+  },
+};
+const CheckboxQ: CheckboxType = {
+  type: "checkbox",
+  name: "Question3",
+  title: "Question3",
+  isRequired: false,
+  comment: "질문에 대한 설명을 입력해주세요",
+  content: {
+    choices: ["ch1", "ch2", "ch3"],
+    maxCount: 2,
+  },
+};
+
+// const questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
+
+export const Question = () => {
+  const [questionList, setQuestionList] = useState<BasicQuestionType[]>([
+    EssayQ,
+    RadioQ,
+  ]);
+  // 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);
+  }
+
+  return (
+    <>
+      {console.log(questionList)}
+      {questionList.map((element) => {
+        switch (element.type) {
+          case "assay":
+            return (
+              <QAssay
+                element={element}
+                QuestionListChange={QuestionListChange}
+              />
+            );
+          case "radio":
+            return (
+              <QRadio
+                element={element}
+                QuestionListChange={QuestionListChange}
+              />
+            );
+          case "checkbox":
+            return <QCheckbox element={element} />;
+          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} />;
+        // }
+      })}
+    </>
+  );
+};

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