editing 상태 변경

frontend/src/questions/CheckboxForm.tsx

@@ -4,10 +4,10 @@ import { CheckboxType } from "../types";
 type Props = {
   element: CheckboxType;
   handleQuestion: (id: string) => void;
-  save: boolean;
+  isEditing: boolean;
 };
 
-export const CheckboxForm = ({ element, handleQuestion, save }: Props) => {
+export const CheckboxForm = ({ element, handleQuestion, isEditing }: Props) => {
   const [choices, setChoices] = useState([...element.content.choices]);
 
   function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
@@ -41,7 +41,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => {
               placeholder="선택지"
               value={choice.text}
               onChange={handleContent}
-              disabled={save}
+              disabled={!isEditing}
             ></input>
           </div>
         ))}
@@ -52,7 +52,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => {
           name="rateValues"
           className="border border-red-500 rounded mx-2 px-2"
           onClick={deleteValue}
-          disabled={save}
+          disabled={!isEditing}
         >
           삭제
         </button>
@@ -61,7 +61,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => {
           name="rateValues"
           className="border border-blue-500 rounded mx-2 px-2"
           onClick={addValue}
-          disabled={save}
+          disabled={!isEditing}
         >
           추가
         </button>

frontend/src/questions/DropdownForm.tsx

@@ -4,10 +4,10 @@ import { DropdownType } from "../types";
 type Props = {
   element: DropdownType;
   handleQuestion: (id: string) => void;
-  save: boolean;
+  isEditing: boolean;
 };
 
-export const DropdownForm = ({ element, handleQuestion, save }: Props) => {
+export const DropdownForm = ({ element, handleQuestion, isEditing }: Props) => {
   const [choices, setChoices] = useState([...element.content.choices]);
 
   function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
@@ -45,7 +45,7 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => {
               placeholder="선택지"
               value={choice.text}
               onChange={handleContent}
-              disabled={save}
+              disabled={!isEditing}
             ></input>
           </div>
         ))}
@@ -56,7 +56,7 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => {
           name="rateValues"
           className="border border-red-500 rounded mx-2 px-2"
           onClick={deleteValue}
-          disabled={save}
+          disabled={!isEditing}
         >
           삭제
         </button>
@@ -65,7 +65,7 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => {
           name="rateValues"
           className="border border-blue-500 rounded mx-2 px-2"
           onClick={addValue}
-          disabled={save}
+          disabled={!isEditing}
         >
           추가
         </button>

frontend/src/questions/EssayForm.tsx

@@ -3,10 +3,10 @@ import { EssayType } from "../types";
 
 type Props = {
   element: EssayType;
-  save: boolean;
+  isEditing: boolean;
 };
 
-export const EssayForm = ({ element, save }: Props) => {
+export const EssayForm = ({ element, isEditing: save }: 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,10 +3,10 @@ import { FileType } from "../types";
 
 type Props = {
   element: FileType;
-  save: boolean;
+  isEditing: boolean;
 };
 
-export const FileForm = ({ element, save }: Props) => {
+export const FileForm = ({ element, isEditing: save }: 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

@@ -12,19 +12,23 @@ import { QUESTION_TYPES } from "../commons";
 
 type Props = {
   element: BasicQuestionType;
+  isEditing: boolean;
+  handleEditing: (qid: string, isEditing: boolean) => void;
   handleQuestion: (element: BasicQuestionType) => void;
   deleteQuestion: (id: string) => void;
-  // isSave: boolean;
 };
 
 export const Question = ({
   element,
+  isEditing,
+  handleEditing,
   handleQuestion,
   deleteQuestion,
-}: // isSave,
-Props) => {
+}: Props) => {
   const [question, setQuestion] = useState({ ...element });
-  const [isSaved, setIsSaved] = useState(false);
+  // const [isEditing, setIsEditing] = useState(false);
+
+  console.log("is editing in question:", isEditing);
 
   async function handleEditComplete() {
     try {
@@ -34,7 +38,8 @@ Props) => {
       );
       // console.log(newQuestion);
       handleQuestion(question);
-      setIsSaved(true);
+      // setIsEditing(true);
+      handleEditing(question._id, false);
       // setSuccess(true);
       // setError("");
     } catch (error) {
@@ -66,9 +71,7 @@ Props) => {
         choices: [{ text: "", value: 0 }],
       };
     }
-    // question.type = selectedType;
     setQuestion({ ...question, type: selectedType, content: content });
-    // handleQuestion(question._id);
   }
 
   const handleElement = () => {
@@ -78,21 +81,19 @@ Props) => {
 
   function handleQuestionInfo(event: React.ChangeEvent<HTMLInputElement>) {
     const { name, value } = event.currentTarget;
-    // question[name] = value;
     setQuestion({ ...question, [name]: value });
-    // handleQuestion(question._id);
   }
 
   function getContent(element: BasicQuestionType) {
     switch (element.type) {
       case "essay":
-        return <EssayForm element={element} save={isSaved} />;
+        return <EssayForm element={element} isEditing={isEditing} />;
       case "radio":
         return (
           <RadioForm
             handleQuestion={handleElement}
             element={element}
-            save={isSaved}
+            isEditing={isEditing}
           />
         );
       case "checkbox":
@@ -100,7 +101,7 @@ Props) => {
           <CheckboxForm
             handleQuestion={handleElement}
             element={element}
-            save={isSaved}
+            isEditing={isEditing}
           />
         );
       case "dropdown":
@@ -108,17 +109,17 @@ Props) => {
           <DropdownForm
             handleQuestion={handleElement}
             element={element}
-            save={isSaved}
+            isEditing={isEditing}
           />
         );
       case "file":
-        return <FileForm element={element} save={isSaved} />;
+        return <FileForm element={element} isEditing={isEditing} />;
       case "rating":
         return (
           <RatingForm
             handleQuestion={handleElement}
             element={element}
-            save={isSaved}
+            isEditing={isEditing}
           />
         );
       case "date":
@@ -132,14 +133,14 @@ Props) => {
     const { checked, value } = event.currentTarget;
     question[value] = checked;
     setQuestion({ ...question, [value]: checked });
-    // handleQuestion(question._id);
   };
 
   const onCancel = () => {
     console.log("element canceled button clicked", element);
     console.log("question canceled button clicked", question);
     setQuestion(element);
-    setIsSaved(true);
+    // setIsEditing(true);
+    handleEditing(question._id, false);
   };
 
   const handleDelete = () => {
@@ -152,12 +153,13 @@ Props) => {
   };
 
   const handleEditClick = () => {
-    setIsSaved(false);
+    // setIsEditing(false);
+    handleEditing(question._id, true);
   };
 
   return (
     <div
-      style={{ borderColor: isSaved ? "#0A8A8A" : "red" }}
+      style={{ borderColor: isEditing ? "red" : "#0A8A8A" }}
       className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg"
     >
       <div className="flex h-16 w-full place-content-between items-center">
@@ -169,13 +171,13 @@ Props) => {
           placeholder={"Question Title"}
           value={question.title}
           onChange={handleQuestionInfo}
-          disabled={isSaved}
+          disabled={!isEditing}
         ></input>
         <select
           id={question._id}
           name="type"
           onChange={handleSelect}
-          disabled={isSaved}
+          disabled={!isEditing}
           value={question.type}
           className="w-32 md: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"
         >
@@ -200,7 +202,7 @@ Props) => {
           placeholder="질문에 대한 설명을 입력해주세요"
           value={question.comment}
           onChange={handleQuestionInfo}
-          disabled={isSaved}
+          disabled={!isEditing}
         ></input>
       </div>
       {getContent(question)}
@@ -211,22 +213,13 @@ Props) => {
           id="isRequired"
           value="isRequired"
           onChange={handleRequired}
-          disabled={isSaved}
+          disabled={!isEditing}
           checked={question.isRequired}
         />
         <label htmlFor="isRequired" className="px-1">
           필수
         </label>
-        {isSaved ? (
-          <>
-            <button type="button" className="px-1" onClick={handleDelete}>
-              삭제
-            </button>
-            <button type="button" className="px-1" onClick={handleEditClick}>
-              수정
-            </button>
-          </>
-        ) : (
+        {isEditing ? (
           <>
             <button type="button" className="px-1" onClick={onCancel}>
               취소
@@ -236,6 +229,15 @@ Props) => {
               확인
             </button>
           </>
+        ) : (
+          <>
+            <button type="button" className="px-1" onClick={handleDelete}>
+              삭제
+            </button>
+            <button type="button" className="px-1" onClick={handleEditClick}>
+              수정
+            </button>
+          </>
         )}
       </div>
     </div>

frontend/src/questions/RadioForm.tsx

@@ -4,10 +4,10 @@ import { RadioType } from "../types";
 type Props = {
   element: RadioType;
   handleQuestion: (id: string) => void;
-  save: boolean;
+  isEditing: boolean;
 };
 
-export const RadioForm = ({ element, handleQuestion, save }: Props) => {
+export const RadioForm = ({ element, handleQuestion, isEditing }: Props) => {
   const [choices, setChoices] = useState([...element.content.choices]);
 
   function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
@@ -42,7 +42,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => {
               placeholder="선택지"
               value={choice.text}
               onChange={handleContent}
-              disabled={save}
+              disabled={!isEditing}
             ></input>
           </div>
         ))}
@@ -53,7 +53,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => {
           name="rateValues"
           className="border border-red-500 rounded mx-2 px-2"
           onClick={deleteValue}
-          disabled={save}
+          disabled={!isEditing}
         >
           삭제
         </button>
@@ -62,7 +62,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => {
           name="rateValues"
           className="border border-blue-500 rounded mx-2 px-2"
           onClick={addValue}
-          disabled={save}
+          disabled={!isEditing}
         >
           추가
         </button>

frontend/src/questions/RatingForm.tsx

@@ -4,10 +4,10 @@ import { RatingType } from "../types";
 type Props = {
   element: RatingType;
   handleQuestion: (id: string) => void;
-  save: boolean;
+  isEditing: boolean;
 };
 
-export const RatingForm = ({ element, handleQuestion, save }: Props) => {
+export const RatingForm = ({ element, handleQuestion, isEditing }: Props) => {
   const [choices, setChoices] = useState([...element.content.choices]);
 
   function handleContent(event: React.ChangeEvent<HTMLInputElement>) {
@@ -46,7 +46,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
           placeholder="비동의"
           value={element.content.minRateDescription}
           onChange={handleContent}
-          disabled={save}
+          disabled={!isEditing}
         ></input>
         {choices.map((choice: any, index: number) => (
           <input
@@ -59,7 +59,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
             placeholder="0"
             value={choice.text}
             onChange={handleContent}
-            disabled={save}
+            disabled={!isEditing}
           ></input>
         ))}
         <input
@@ -69,7 +69,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
           placeholder="동의"
           value={element.content.maxRateDescription}
           onChange={handleContent}
-          disabled={save}
+          disabled={!isEditing}
         ></input>
       </div>
       <div>
@@ -78,7 +78,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
           name="rateValues"
           className="border border-red-500 rounded mx-2 px-2"
           onClick={deleteValue}
-          disabled={save}
+          disabled={!isEditing}
         >
           삭제
         </button>
@@ -87,7 +87,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
           name="rateValues"
           className="border border-blue-500 rounded mx-2 px-2"
           onClick={addValue}
-          disabled={save}
+          disabled={!isEditing}
         >
           추가
         </button>

frontend/src/survey/CreateSurvey.tsx

@@ -8,15 +8,9 @@ import { catchErrors } from "../helpers";
 
 export const CreateSurvey = () => {
   let { surveyId } = useParams<{ surveyId: string }>();
-  interface CustomizedState {
-    save: boolean;
-  }
-  const location = useLocation();
-  const state = location.state as CustomizedState;
+  const [isEditing, setIsEditing] =
+    useState<{ qid: string; isEditing: boolean }[]>();
 
-  useEffect(() => {
-    getSurvey();
-  }, [surveyId]);
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
@@ -28,10 +22,22 @@ export const CreateSurvey = () => {
     comment: "",
     questions: [],
   });
+
+  useEffect(() => {
+    getSurvey();
+  }, [surveyId]);
+
   async function getSurvey() {
     try {
       if (surveyId) {
         const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId);
+
+        const initEditing = thisSurvey.questions.map((question) => {
+          return { qid: question._id, isEditing: false };
+        });
+        console.log("init editing", initEditing);
+        setIsEditing(initEditing);
+
         setSurvey(thisSurvey);
         setSuccess(true);
         setError("");
@@ -45,13 +51,21 @@ export const CreateSurvey = () => {
     }
   }
 
+  const handleEditing = (qid: string, edited: boolean) => {
+    console.log("handle editing:", qid, edited);
+    if (isEditing) {
+      const index = isEditing.findIndex((q) => q.qid === qid);
+      isEditing[index].isEditing = edited;
+      setIsEditing([...isEditing]);
+    }
+  };
+
   const handleQuestion = (element: BasicQuestionType) => {
     const index = survey.questions.findIndex(
       (question) => question._id === element._id
     );
     survey.questions[index] = element;
     const newList = [...survey.questions];
-    // const newList: BasicQuestionType[] = [...survey.questions];
     console.log("new list in handle question", newList);
     setSurvey({ ...survey, questions: newList });
   };
@@ -84,6 +98,12 @@ export const CreateSurvey = () => {
           surveyId
         );
         console.log(questions);
+        const addedEditing = questions.map((question) => {
+          return { qid: question._id, isEditing: false };
+        });
+        console.log("added editing", addedEditing);
+        setIsEditing([...addedEditing]);
+
         setSurvey({ ...survey, questions: questions });
         setSuccess(true);
         setError("");
@@ -115,7 +135,7 @@ export const CreateSurvey = () => {
 
   const questions = survey.questions;
   console.log(questions);
-  console.log(state);
+
   return (
     <>
       {error ? alert(error) : <></>}
@@ -147,7 +167,11 @@ export const CreateSurvey = () => {
             <Question
               key={question._id}
               element={question}
-              // isSave={state ? true : false}
+              isEditing={
+                isEditing?.filter((q) => q.qid === question._id)[0]
+                  ?.isEditing ?? true
+              }
+              handleEditing={handleEditing}
               handleQuestion={handleQuestion}
               deleteQuestion={deleteQuestion}
             />

frontend/src/survey/EditSurvey.tsx

@@ -11,12 +11,8 @@ export const EditSurvey = () => {
   interface CustomizedState {
     save: boolean;
   }
-  const location = useLocation();
-  const state = location.state as CustomizedState;
-
-  useEffect(() => {
-    getSurvey();
-  }, [surveyId]);
+  const [isEditing, setIsEditing] =
+    useState<{ qid: string; isEditing: boolean }[]>();
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
@@ -29,10 +25,21 @@ export const EditSurvey = () => {
     questions: [],
   });
 
+  useEffect(() => {
+    getSurvey();
+  }, [surveyId]);
+
   async function getSurvey() {
     try {
       if (surveyId) {
         const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId);
+
+        const initEditing = thisSurvey.questions.map((question) => {
+          return { qid: question._id, isEditing: false };
+        });
+        console.log("init editing", initEditing);
+        setIsEditing(initEditing);
+
         setSurvey(thisSurvey);
         setSuccess(true);
         setError("");
@@ -46,13 +53,21 @@ export const EditSurvey = () => {
     }
   }
 
+  const handleEditing = (qid: string, edited: boolean) => {
+    console.log("handle editing:", qid, edited);
+    if (isEditing) {
+      const index = isEditing.findIndex((q) => q.qid === qid);
+      isEditing[index].isEditing = edited;
+      setIsEditing([...isEditing]);
+    }
+  };
+
   const handleQuestion = (element: BasicQuestionType) => {
     const index = survey.questions.findIndex(
       (question) => question._id === element._id
     );
     survey.questions[index] = element;
     const newList = [...survey.questions];
-    // const newList: BasicQuestionType[] = [...survey.questions];
     console.log("new list in handle question", newList);
     setSurvey({ ...survey, questions: newList });
   };
@@ -85,6 +100,13 @@ export const EditSurvey = () => {
           surveyId
         );
         console.log(questions);
+
+        const addedEditing = questions.map((question) => {
+          return { qid: question._id, isEditing: false };
+        });
+        console.log("added editing", addedEditing);
+        setIsEditing([...addedEditing]);
+
         setSurvey({ ...survey, questions: questions });
         setSuccess(true);
         setError("");
@@ -116,6 +138,8 @@ export const EditSurvey = () => {
 
   const questions = survey.questions;
   console.log(questions);
+  console.log("isediting", isEditing);
+
   return (
     <>
       {error ? alert(error) : <></>}
@@ -147,6 +171,11 @@ export const EditSurvey = () => {
             <Question
               key={question._id}
               element={question}
+              isEditing={
+                isEditing?.filter((q) => q.qid === question._id)[0]
+                  ?.isEditing ?? false
+              }
+              handleEditing={handleEditing}
               handleQuestion={handleQuestion}
               deleteQuestion={deleteQuestion}
             />