Edit 버튼 생성

frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx

@@ -118,6 +118,7 @@ const RatingQ: RatingType = {
 };
 
 export const CreateSurveyForm = () => {
+  const [currentId, setCurrentId] = useState<string>("");
   const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>([
     EssayQ,
     RadioQ,
@@ -125,11 +126,15 @@ export const CreateSurveyForm = () => {
   ]);
   const [survey, setSurvey] = useState();
 
+  function changeCurrentId(event: React.MouseEvent<HTMLButtonElement>): void {
+    setCurrentId(event.currentTarget.id);
+  }
+
   function QuestionListChange(e: React.ChangeEvent<HTMLInputElement>): void {
     const newList: BasicQuestionType[] = [...questionList];
-    const targetId: any = e.target.name;
-    const obj: any = newList.find((a) => a.id === e.target.id);
-    obj[targetId] = e.target.value;
+    const obj: any = newList.find((a) => a.id === e.target.id); //고유 _id로 질문찾기
+    const targetKey: any = e.target.name;
+    obj[targetKey] = e.target.value;
     setQuestionList(newList);
   }
 
@@ -157,30 +162,34 @@ export const CreateSurveyForm = () => {
   function deleteQuestion(): void {}
 
   return (
-    <div className="flex flex-col place-items-center">
-      <div className="flex flex-col container place-items-center mt-4">
-        <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
-        questionList={questionList}
-        QuestionListChange={QuestionListChange}
-        addQuestion={addQuestion}
-      />
-      <div>
-        <button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
-          설문조사 생성
-        </button>
+    <>
+      {console.log(currentId)}
+      <div className="flex flex-col place-items-center">
+        <div className="flex flex-col container place-items-center mt-4">
+          <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
+          questionList={questionList}
+          QuestionListChange={QuestionListChange}
+          addQuestion={addQuestion}
+          changeCurrentId={changeCurrentId}
+        />
+        <div>
+          <button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
+            설문조사 생성
+          </button>
+        </div>
       </div>
-    </div>
+    </>
   );
 };

frontend/src/CreateSurveyForm/Edit.tsx

+import React from "react";
+
+type Props = {
+  id: string;
+  changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+export const Edit = ({ id, changeCurrentId }: Props) => {
+  return (
+    <button id={id} className="" onClick={changeCurrentId}>
+      수정
+    </button>
+  );
+};

frontend/src/CreateSurveyForm/QEssay.tsx

 import React, { useState } from "react";
 import { EssayType } from "./CreateSurveyFormPage";
+import { Edit } from "./Edit";
 
 type Props = {
   element: EssayType;
   QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
-export const QEssay = ({ element, QuestionListChange }: Props) => {
+export const QEssay = ({
+  element,
+  QuestionListChange,
+  changeCurrentId,
+}: 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">
@@ -52,6 +58,7 @@ export const QEssay = ({ element, QuestionListChange }: Props) => {
         <button className="w-1/12">필수</button>
         <button className="w-1/12">옵션</button>
         <button className="w-1/12">삭제</button>
+        <Edit id={element.id} changeCurrentId={changeCurrentId} />
       </div>
     </div>
   );

frontend/src/CreateSurveyForm/QRadio.tsx

@@ -44,12 +44,19 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
       ></input>
     </div>
     <div className="flex mt-4">
-      {element.content.choices.map((e: string) => (
+      {element.content.choices.map((e: string, index: number) => (
         <div>
-          <input type="radio" id={e} name="choice" value={e} checked={false} />
+          <input
+            type="radio"
+            id={element.id}
+            name="choice"
+            value={e}
+            disabled
+          />
           <input
             type="text"
-            name="content"
+            name={"choice" + `${index}`}
+            // key={`${index}`}
             className="mx-2 border-b-2"
             placeholder={e}
             onChange={QuestionListChange}

frontend/src/CreateSurveyForm/Question.tsx

@@ -11,12 +11,14 @@ type Props = {
   questionList: BasicQuestionType[];
   QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   addQuestion: () => void;
+  changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
 export const Question = ({
   questionList,
   QuestionListChange,
   addQuestion,
+  changeCurrentId,
 }: Props) => {
   return (
     <>
@@ -28,6 +30,7 @@ export const Question = ({
               <QEssay
                 element={element}
                 QuestionListChange={QuestionListChange}
+                changeCurrentId={changeCurrentId}
               />
             );
           case "radio":