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,6 +162,8 @@ export const CreateSurveyForm = () => {
   function deleteQuestion(): void {}
 
   return (
+    <>
+      {console.log(currentId)}
       <div className="flex flex-col place-items-center">
         <div className="flex flex-col container place-items-center mt-4">
           <input
@@ -175,6 +182,7 @@ export const CreateSurveyForm = () => {
           questionList={questionList}
           QuestionListChange={QuestionListChange}
           addQuestion={addQuestion}
+          changeCurrentId={changeCurrentId}
         />
         <div>
           <button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
@@ -182,5 +190,6 @@ export const CreateSurveyForm = () => {
           </button>
         </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":