Merge branch 'main' into edit-ui

frontend/src/surveys/EditSurvey.tsx

@@ -26,10 +26,10 @@ export const EditSurvey = () => {
   //   return result;
   // };
 
-  const handleTitle = (title: string) => {
-    console.log("title in handle title:", title);
+  const handleTitleComment = (state: { title: string; comment: string }) => {
+    console.log("title in handle title and comment:", state);
     // survey.title = title
-    update({ ...survey, title: title });
+    update({ ...survey, title: state.title, comment: state.comment });
   };
 
   /**
@@ -86,7 +86,7 @@ export const EditSurvey = () => {
       addQuestion={addQuestion}
       deleteQuestion={deleteQuestion}
       handleQuestion={updateQuestion}
-      handleTitle={handleTitle}
+      handleTitleComment={handleTitleComment}
       // callApi={update}
     />
   );

frontend/src/surveys/ModifySurveyView.tsx

@@ -5,6 +5,7 @@ import { SpinnerIcon } from "../icons";
 import { CreateQuestionData, ISurvey } from "../types";
 import { QuestionsList } from "./QuestionsList";
 import { SurveyTitle } from "./SurveyTitle";
+import { SurveyTitleAndComment } from "./SurveyTitleAndComment";
 
 type Props = {
   questions: CreateQuestionData[];
@@ -12,7 +13,7 @@ type Props = {
   addQuestion: () => void;
   deleteQuestion: (id: string) => void;
   handleQuestion: (question: CreateQuestionData) => void;
-  handleTitle: Function;
+  handleTitleComment: Function;
   // callApi: (surveyData: ISurvey) => Promise<any>;
 };
 
@@ -22,7 +23,7 @@ export const ModifySurveyView = ({
   addQuestion,
   deleteQuestion,
   handleQuestion,
-  handleTitle,
+  handleTitleComment,
 }: // callApi,
 Props) => {
   const [error, setError] = useState("");
@@ -104,8 +105,13 @@ Props) => {
       )}
       <form>
         <div className="flex flex-col place-items-center">
-          <SurveyTitle text={survey.title} handleTitle={handleTitle} />
-          <div className="flex flex-col container place-items-center mt-4">
+          {/* <SurveyTitle text={survey.title} handleTitle={handleTitle} /> */}
+          <SurveyTitleAndComment
+            title={survey.title}
+            comment={survey.comment}
+            handleTitleComment={handleTitleComment}
+          />
+          {/* <div className="flex flex-col container place-items-center mt-4">
             <input
               type="text"
               name="title"
@@ -125,7 +131,7 @@ Props) => {
               value={survey.comment}
               onChange={handleChange}
             ></input>
-          </div>
+          </div> */}
           <QuestionsList
             questions={questions}
             handleQuestion={handleQuestion}

frontend/src/surveys/SurveyTitleAndComment.tsx

+import React, {
+  ChangeEvent,
+  ChangeEventHandler,
+  MouseEventHandler,
+  useState,
+} from "react";
+
+type Props = {
+  // isEditing: boolean;
+  title: string;
+  comment: string;
+  handleTitleComment: Function;
+};
+
+export const SurveyTitleAndComment = ({
+  comment,
+  title,
+  handleTitleComment,
+}: Props) => {
+  const [state, setState] = useState({ title: title, comment: comment });
+  const [disabled, setDisabled] = useState(true);
+
+  console.log("title:", title, "comment:", comment, "state:", state);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setState({ ...state, [name]: value });
+  };
+
+  const onEdit = () => {
+    setDisabled(false);
+  };
+
+  const onCancel = () => {
+    setDisabled(true);
+    setState({ title, comment });
+  };
+
+  const handleConfirm = () => {
+    setDisabled(true);
+    handleTitleComment(state);
+  };
+
+  return (
+    <div
+      className={`flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg ${
+        disabled ? "border-themeColor" : "border-red-500"
+      }`}
+    >
+      <input
+        type="text"
+        name="title"
+        className="font-bold text-4xl text-center m-2 border-b-2"
+        placeholder="설문지 제목"
+        autoComplete="on"
+        value={state.title}
+        disabled={disabled}
+        onChange={handleChange}
+      />
+      <input
+        type="text"
+        name="comment"
+        className="font-bold text-1xl text-center m-2 border-b-2 resize-none"
+        placeholder="설문조사에 대한 설명을 입력해주세요"
+        autoComplete="on"
+        size={50}
+        value={state.comment}
+        disabled={disabled}
+        onChange={handleChange}
+      />
+
+      <div className="flex w-11/12 justify-end">
+        {disabled ? (
+          <>
+            <button type="button" className="px-1" onClick={onEdit}>
+              수정
+            </button>
+          </>
+        ) : (
+          <>
+            <button type="button" className="px-1" onClick={onCancel}>
+              취소
+            </button>
+            <button type="button" className="px-1" onClick={handleConfirm}>
+              확인
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

src/controllers/survey.controller.ts

@@ -67,8 +67,8 @@ export const getSurveys = asyncWrap(async (reqExp: Request, res: Response) => {
 
 export const updateSurvey = asyncWrap(async (req, res) => {
   const survey = req.body;
-  const newSurvey = await surveyDb.updateSurvey(survey);
-  return res.json(newSurvey);
+  const updatedSurvey = await surveyDb.updateSurvey(survey);
+  return res.json(updatedSurvey);
 });
 
 export const userBySurveyId = async (

src/db/survey.db.ts

@@ -75,18 +75,22 @@ export const getSurveys = async (userId: string) => {
 
 export const updateSurvey = async (survey: HydratedDocument<ISurvey>) => {
   console.log("update survey", survey);
-  await Promise.all(
-    survey.questions.map(
-      async (question) =>
-        await Question.findOneAndUpdate({ _id: question._id }, question, {
-          upsert: true,
-        })
-    )
-  );
-  const newSurvey = await Survey.findOneAndUpdate({ _id: survey._id }, survey, {
-    new: true,
-  }).populate("questions");
-  return newSurvey;
+  // await Promise.all(
+  //   survey.questions.map(
+  //     async (question) =>
+  //       await Question.findOneAndUpdate({ _id: question._id }, question, {
+  //         upsert: true,
+  //       })
+  //   )
+  // );
+  const updatedSurvey = await Survey.findOneAndUpdate(
+    { _id: survey._id },
+    survey,
+    {
+      new: true,
+    }
+  ).populate("questions");
+  return updatedSurvey;
 };
 
 export const putNewQuestion = async (newQuestion: any, surveyId: string) => {