객관식 choice추가 삭제

frontend/src/questions/CheckboxForm.tsx

@@ -4,9 +4,10 @@ import { CheckboxType } from "../types";
 type Props = {
   element: CheckboxType;
   handleQuestion: (id: string) => void;
+  currentId: string;
 };
 
-export const CheckboxForm = ({ element, handleQuestion }: Props) => {
+export const CheckboxForm = ({ element, handleQuestion, currentId }: Props) => {
   const [choices, setChoices] = useState([...element.content.choices]);
 
   function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
@@ -16,21 +17,55 @@ export const CheckboxForm = ({ element, handleQuestion }: Props) => {
     handleQuestion(element._id);
     console.log(choices);
   }
-
+  function deleteValue() {
+    //제일 마지막 index 제거
+    choices.splice(-1, 1);
+    element.content.choices = choices;
+    handleQuestion(element._id);
+  }
+  function addValue() {
+    choices.push({ text: "", value: choices.length });
+    element.content.choices = choices;
+    handleQuestion(element._id);
+  }
   return (
-    <div id="content" className="flex mt-4">
-      {choices.map((choice: any, index: number) => (
-        <div>
-          <input type="checkbox" disabled></input>
-          <input
-            id={`${index}`}
-            type="text"
-            className="mx-2 border-b-2"
-            placeholder={choice.text}
-            onChange={handleContent}
-          ></input>
-        </div>
-      ))}
-    </div>
+    <>
+      <div id="content" className="mt-4 p-5">
+        {choices.map((choice: any, index: number) => (
+          <div className="m-5">
+            <input type="checkbox" disabled></input>
+            <input
+              id={`${index}`}
+              type="text"
+              className="mx-2 border-b-2"
+              placeholder="선택지"
+              value={choice.text}
+              onChange={handleContent}
+              disabled={currentId !== element._id}
+            ></input>
+          </div>
+        ))}
+      </div>
+      <div>
+        <button
+          type="button"
+          name="rateValues"
+          className="border border-red-500 rounded mx-2 px-2"
+          onClick={deleteValue}
+          disabled={currentId !== element._id}
+        >
+          삭제
+        </button>
+        <button
+          type="button"
+          name="rateValues"
+          className="border border-blue-500 rounded mx-2 px-2"
+          onClick={addValue}
+          disabled={currentId !== element._id}
+        >
+          추가
+        </button>
+      </div>
+    </>
   );
 };

frontend/src/questions/DropdownForm.tsx

@@ -4,9 +4,10 @@ import { DropdownType } from "../types";
 type Props = {
   element: DropdownType;
   handleQuestion: (id: string) => void;
+  currentId: string;
 };
 
-export const DropdownForm = ({ element, handleQuestion }: Props) => {
+export const DropdownForm = ({ element, handleQuestion, currentId }: Props) => {
   const [choices, setChoices] = useState([...element.content.choices]);
 
   function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
@@ -16,22 +17,59 @@ export const DropdownForm = ({ element, handleQuestion }: Props) => {
     handleQuestion(element._id);
     console.log(choices);
   }
+  function deleteValue() {
+    //제일 마지막 index 제거
+    choices.splice(-1, 1);
+    element.content.choices = choices;
+    handleQuestion(element._id);
+  }
+  function addValue() {
+    choices.push({ text: "", value: choices.length });
+    element.content.choices = choices;
+    handleQuestion(element._id);
+  }
   return (
-    <div id="content" className="flex mt-4">
-      <select className="mr-3">
+    <>
+      <div id="content" className="flex-row mt-4 p-5">
+        <select className="mr-3">
+          {choices.map((choice: any, index: number) => (
+            <option>{choice.text}</option>
+          ))}
+        </select>
         {choices.map((choice: any, index: number) => (
-          <option>{choice.text}</option>
+          <div className="my-5">
+            <input
+              id={`${index}`}
+              type="text"
+              className="mx-2 border-b-2"
+              placeholder="선택지"
+              value={choice.text}
+              onChange={handleContent}
+              disabled={currentId !== element._id}
+            ></input>
+          </div>
         ))}
-      </select>
-      {choices.map((choice: any, index: number) => (
-        <input
-          id={`${index}`}
-          type="text"
-          className="mx-2 border-b-2"
-          placeholder={choice.text}
-          onChange={handleContent}
-        ></input>
-      ))}
-    </div>
+      </div>
+      <div>
+        <button
+          type="button"
+          name="rateValues"
+          className="border border-red-500 rounded mx-2 px-2"
+          onClick={deleteValue}
+          disabled={currentId !== element._id}
+        >
+          삭제
+        </button>
+        <button
+          type="button"
+          name="rateValues"
+          className="border border-blue-500 rounded mx-2 px-2"
+          onClick={addValue}
+          disabled={currentId !== element._id}
+        >
+          추가
+        </button>
+      </div>
+    </>
   );
 };

frontend/src/questions/EssayForm.tsx

@@ -3,9 +3,10 @@ import { EssayType } from "../types";
 
 type Props = {
   element: EssayType;
+  currentId: string;
 };
 
-export const EssayForm = ({ element }: Props) => {
+export const EssayForm = ({ element, currentId }: Props) => {
   return (
     <div id="commentarea" className="flex mt-4 w-full justify-center">
       <input className="border w-11/12 h-16" disabled></input>

frontend/src/questions/FileForm.tsx

@@ -3,9 +3,10 @@ import { FileType } from "../types";
 
 type Props = {
   element: FileType;
+  currentId: string;
 };
 
-export const FileForm = ({ element }: Props) => {
+export const FileForm = ({ element, currentId }: Props) => {
   return (
     <div id="content" className="flex mt-4 w-full justify-center">
       <input type="file" className=" w-11/12 h-16" disabled></input>

frontend/src/questions/Question.tsx

@@ -34,12 +34,10 @@ export const Question = ({
   changeCurrentId,
   currentId,
 }: Props) => {
-  const handleEdit = () => {
-    //setCurrentId해주고 currentId===element._id가 같은 input들만 disabled=false
+  const handleEditClick = () => {
     changeCurrentId(element._id);
   };
-  async function handleComplete() {
-    //db에서 element._id인 애를 findOneAndUpdate() 해준다.
+  async function handleEditComplete() {
     try {
       const newQuestion: BasicQuestionType = await questionApi.updateQuestion(
         element
@@ -65,21 +63,21 @@ export const Question = ({
     ) {
       element.content = {
         choices: [
-          { text: "선택지1", value: "1" },
-          { text: "선택지2", value: "2" },
-          { text: "선택지3", value: "3" },
+          { text: "", value: 0 },
+          { text: "", value: 1 },
+          { text: "", value: 2 },
         ],
       };
     } else if (selectedType === "essay") {
       element.content = { choices: [] };
     } else if (selectedType === "rating") {
       element.content = {
-        minRateDescription: "가장 낮음",
-        maxRateDescription: "가장 높음",
+        minRateDescription: "",
+        maxRateDescription: "",
         choices: [
-          { text: "1", value: "1" },
-          { text: "2", value: "2" },
-          { text: "3", value: "3" },
+          { text: "", value: 0 },
+          { text: "", value: 1 },
+          { text: "", value: 2 },
         ],
       };
     }
@@ -100,21 +98,41 @@ export const Question = ({
   function getContent(element: BasicQuestionType) {
     switch (element.type) {
       case "essay":
-        return <EssayForm element={element} />;
+        return <EssayForm element={element} currentId={currentId} />;
       case "radio":
-        return <RadioForm handleQuestion={handleQuestion} element={element} />;
+        return (
+          <RadioForm
+            handleQuestion={handleQuestion}
+            element={element}
+            currentId={currentId}
+          />
+        );
       case "checkbox":
         return (
-          <CheckboxForm handleQuestion={handleQuestion} element={element} />
+          <CheckboxForm
+            handleQuestion={handleQuestion}
+            element={element}
+            currentId={currentId}
+          />
         );
       case "dropdown":
         return (
-          <DropdownForm handleQuestion={handleQuestion} element={element} />
+          <DropdownForm
+            handleQuestion={handleQuestion}
+            element={element}
+            currentId={currentId}
+          />
         );
       case "file":
-        return <FileForm element={element} />;
+        return <FileForm element={element} currentId={currentId} />;
       case "rating":
-        return <RatingForm handleQuestion={handleQuestion} element={element} />;
+        return (
+          <RatingForm
+            handleQuestion={handleQuestion}
+            element={element}
+            currentId={currentId}
+          />
+        );
       default:
         return <></>;
     }
@@ -131,6 +149,7 @@ export const Question = ({
           placeholder={"Question Title"}
           value={element.title}
           onChange={handleQuestionInfo}
+          disabled={currentId !== element._id}
         ></input>
         <select
           id={element._id}
@@ -158,6 +177,7 @@ export const Question = ({
           placeholder="질문에 대한 설명을 입력해주세요"
           value={element.comment}
           onChange={handleQuestionInfo}
+          disabled={currentId !== element._id}
         ></input>
       </div>
       {getContent(element)}
@@ -173,11 +193,11 @@ export const Question = ({
           삭제
         </button>
         {currentId === element._id ? (
-          <button type="button" className="px-1" onClick={handleComplete}>
+          <button type="button" className="px-1" onClick={handleEditComplete}>
             수정완료
           </button>
         ) : (
-          <button type="button" className="px-1" onClick={handleEdit}>
+          <button type="button" className="px-1" onClick={handleEditClick}>
             수정하기
           </button>
         )}

frontend/src/questions/RadioForm.tsx

@@ -4,9 +4,10 @@ import { RadioType } from "../types";
 type Props = {
   element: RadioType;
   handleQuestion: (id: string) => void;
+  currentId: string;
 };
 
-export const RadioForm = ({ element, handleQuestion }: Props) => {
+export const RadioForm = ({ element, handleQuestion, currentId }: Props) => {
   const [choices, setChoices] = useState([...element.content.choices]);
 
   function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
@@ -16,20 +17,56 @@ export const RadioForm = ({ element, handleQuestion }: Props) => {
     handleQuestion(element._id);
     console.log(choices);
   }
+  function deleteValue() {
+    //제일 마지막 index 제거
+    choices.splice(-1, 1);
+    element.content.choices = choices;
+    handleQuestion(element._id);
+  }
+  function addValue() {
+    choices.push({ text: "", value: choices.length });
+    element.content.choices = choices;
+    handleQuestion(element._id);
+  }
+
   return (
-    <div id="content" className="flex mt-4">
-      {choices.map((choice: any, index: number) => (
-        <div>
-          <input type="radio" disabled></input>
-          <input
-            id={`${index}`}
-            type="text"
-            className="mx-2 border-b-2"
-            placeholder={choice.text}
-            onChange={handleContent}
-          ></input>
-        </div>
-      ))}
-    </div>
+    <>
+      <div id="content" className="mt-4 p-5">
+        {choices.map((choice: any, index: number) => (
+          <div className="m-5">
+            <input type="radio" disabled></input>
+            <input
+              id={`${index}`}
+              type="text"
+              className="mx-2 border-b-2"
+              placeholder="선택지"
+              value={choice.text}
+              onChange={handleContent}
+              disabled={currentId !== element._id}
+            ></input>
+          </div>
+        ))}
+      </div>
+      <div>
+        <button
+          type="button"
+          name="rateValues"
+          className="border border-red-500 rounded mx-2 px-2"
+          onClick={deleteValue}
+          disabled={currentId !== element._id}
+        >
+          삭제
+        </button>
+        <button
+          type="button"
+          name="rateValues"
+          className="border border-blue-500 rounded mx-2 px-2"
+          onClick={addValue}
+          disabled={currentId !== element._id}
+        >
+          추가
+        </button>
+      </div>
+    </>
   );
 };

frontend/src/questions/RatingForm.tsx

@@ -4,9 +4,10 @@ import { RatingType } from "../types";
 type Props = {
   element: RatingType;
   handleQuestion: (id: string) => void;
+  currentId: string;
 };
 
-export const RatingForm = ({ element, handleQuestion }: Props) => {
+export const RatingForm = ({ element, handleQuestion, currentId }: Props) => {
   const [choices, setChoices] = useState([...element.content.choices]);
 
   function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
@@ -30,7 +31,7 @@ export const RatingForm = ({ element, handleQuestion }: Props) => {
     handleQuestion(element._id);
   }
   function addValue() {
-    choices.push({ text: "0", value: 0 });
+    choices.push({ text: "0", value: choices.length });
     element.content.choices = choices;
     handleQuestion(element._id);
   }
@@ -42,26 +43,32 @@ export const RatingForm = ({ element, handleQuestion }: Props) => {
           name="minRateDescription"
           className="border-b-2 text-center"
           size={10}
-          placeholder={element.content.minRateDescription}
+          placeholder="비동의"
+          value={element.content.minRateDescription}
           onChange={handleContent}
+          disabled={currentId !== element._id}
         ></input>
-        {choices.map((e: any, index: number) => (
+        {choices.map((choice: any, index: number) => (
           <input
             name="text"
             id={`${index}`}
             type="text"
             className="border border-black rounded-full py-1 m-2 text-center"
             size={1}
-            placeholder={e.text}
+            placeholder="0"
+            value={choice.text}
             onChange={handleContent}
+            disabled={currentId !== element._id}
           ></input>
         ))}
         <input
           name="maxRateDescription"
           className="border-b-2 text-center"
           size={10}
-          placeholder={element.content.maxRateDescription}
+          placeholder="동의"
+          value={element.content.maxRateDescription}
           onChange={handleContent}
+          disabled={currentId !== element._id}
         ></input>
       </div>
       <div>
@@ -70,6 +77,7 @@ export const RatingForm = ({ element, handleQuestion }: Props) => {
           name="rateValues"
           className="border border-red-500 rounded mx-2 px-2"
           onClick={deleteValue}
+          disabled={currentId !== element._id}
         >
           삭제
         </button>
@@ -78,6 +86,7 @@ export const RatingForm = ({ element, handleQuestion }: Props) => {
           name="rateValues"
           className="border border-blue-500 rounded mx-2 px-2"
           onClick={addValue}
+          disabled={currentId !== element._id}
         >
           추가
         </button>