onChange함수, UI수정

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

 import React, { useState } from "react";
-import { EssayType, BasicQuestionType } from "./Question";
+import { EssayType } from "./Question";
 
 type Props = {
   element: EssayType;
-  questionList: BasicQuestionType[];
+  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const Q_Assay = ({ element, questionList }: Props) => {
-  console.log(questionList);
+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">
-        <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 w-full mr-3 p-2.5"
@@ -30,16 +34,18 @@ export const Q_Assay = ({ element, questionList }: Props) => {
           <option value="Date">날짜</option>
         </select>
       </div>
-      <div className="flex w-full">
-        <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 border mt-4">
-        <textarea className="resize-none" readOnly></textarea>
+      <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>

frontend/src/CreateSurveyForm/Q_Checkbox.tsx → frontend/src/CreateSurveyForm/QCheckbox.tsx

@@ -5,7 +5,7 @@ type Props = {
   element: CheckboxType;
 };
 
-export const Q_Checkbox = ({ element }: Props) => (
+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">

frontend/src/CreateSurveyForm/Q_Radio.tsx → frontend/src/CreateSurveyForm/QRadio.tsx

@@ -3,14 +3,20 @@ import { RadioType } from "./Question";
 
 type Props = {
   element: RadioType;
+  QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const Q_Radio = ({ element }: Props) => (
+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 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>
+    <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"
@@ -27,22 +33,26 @@ export const Q_Radio = ({ 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">
+    <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>

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";
+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 {}
-let EssayQ: EssayType = {
-  type: "assay",
-  name: "Question1",
-  title: "Question1",
-  isRequired: false,
-  content: null,
-};
-
 export interface RadioType extends BasicQuestionType {
   content: {
     hasOther: boolean;
@@ -27,47 +20,96 @@ export interface RadioType extends BasicQuestionType {
     otherText: string;
   };
 }
-let RadioQ: RadioType = {
+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"],
   },
 };
-
-export interface CheckboxType extends BasicQuestionType {
-  content: {
-    choices: any[];
-    maxCount: number;
-  };
-}
-let CheckboxQ: CheckboxType = {
+const CheckboxQ: CheckboxType = {
   type: "checkbox",
   name: "Question3",
   title: "Question3",
   isRequired: false,
+  comment: "질문에 대한 설명을 입력해주세요",
   content: {
     choices: ["ch1", "ch2", "ch3"],
     maxCount: 2,
   },
 };
 
-let questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
+// const 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} />;
-      }
-    })}
-  </>
-);
+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} />;
+        // }
+      })}
+    </>
+  );
+};