edit survey update title comment 위로 올림

docs/overview.md

 # 개관
 
 ![설치](./install.drawio.svg)
+
+## 클라이언트
+
+### `/surveys` 라우트
+
+`SurveysLayout`으로 둘러 싸여 있습니다.
+
+**SurveysLayout**
+
+```js
+useEffect(() => {
+  await getSurveys()
+}, [])
+```
+
+`surveysList` 상태를 초기화 하는 과정입니다. 이곳에서 `Outlet context`를 통해서 `surveys`를 내보냅니다.
+
+### `/surveys/:surveyId` 라우트
+
+`SurveyLayout`으로 둘러 싸여 있습니다.
+
+**SurveyLayout**
+
+`SurveysLayout context`로부터 `surveys`를 받아 `surveyId`에 해당하는 `survey` 상태를 뽑아내서 `Outlet context`로 `survey`를 내보냅니다.

frontend/src/layouts/SurveyLayout.tsx

@@ -13,10 +13,10 @@ import { surveyApi } from "../apis";
 
 type SurveyContextType = {
   survey: ICreateSurvey;
-  update: (survey: ISurvey) => Promise<any>;
   createQuestion: (question: IQuestionData) => Promise<any>;
   removeQuestion: (questionId: string) => Promise<any>;
   updateQuestion: (question: CreateQuestionData) => Promise<any>;
+  updateTitleComment: (state: { title: string; comment: string }) => void;
 };
 
 const activeStyle =
@@ -58,6 +58,11 @@ export const SurveyLayout = () => {
     updateLocalSurveysList(survey);
   };
 
+  /**
+   * 수정된 질문을 입력받아 기존 질문을 대체합니다.
+   * @param question 수정할 질문
+   * @returns 없음
+   */
   const updateQuestion = async (question: CreateQuestionData) => {
     const updatedQuestion = await surveyApi.updateQuestion(
       survey._id!,
@@ -71,11 +76,21 @@ export const SurveyLayout = () => {
     }
     questions[index] = question;
     console.log("questions in update question:", questions);
-    // setQuestions([...questions]);
     survey.questions = questions;
     updateLocalSurveysList(survey);
   };
 
+  const updateTitleComment = async (state: {
+    title: string;
+    comment: string;
+  }) => {
+    survey.title = state.title;
+    survey.comment = state.comment;
+    console.log("title in handle title and comment:", state);
+    const result = await surveyApi.updateSurvey(survey);
+    updateLocalSurveysList(survey);
+  };
+
   return (
     <div>
       <div className="flex justify-center items-center mt-6">
@@ -112,8 +127,8 @@ export const SurveyLayout = () => {
           survey,
           createQuestion,
           removeQuestion,
-          update,
           updateQuestion,
+          updateTitleComment,
         }}
       />
     </div>

frontend/src/layouts/SurveysLayout.tsx

@@ -50,6 +50,10 @@ export const SurveysLayout = () => {
     // return result;
   };
 
+  /**
+   * 로컬 설문데이터 상태 업데이트
+   * @param surveyData 로컬 설문데이터
+   */
   const updateLocalSurveysList = (surveyData: ICreateSurvey) => {
     const index = surveys.findIndex((survey) => survey._id === surveyData._id);
     surveys[index] = surveyData;

frontend/src/surveys/EditSurvey.tsx

@@ -8,47 +8,24 @@ import { SpinnerIcon } from "../icons";
 import { ModifySurveyView } from "./ModifySurveyView";
 
 export const EditSurvey = () => {
-  const { survey, createQuestion, removeQuestion, update, updateQuestion } =
-    useSurvey();
-  // const [survey, setSurvey] = useState<ISurvey>(surveyData);
-  // const [questions, setQuestions] = useState<CreateQuestionData[]>(() => {
-  //   const questions = survey.questions;
-  //   return questions.map((question) => ({ ...question, isEditing: false }));
-  // });
+  const {
+    survey,
+    createQuestion,
+    removeQuestion,
+    updateQuestion,
+    updateTitleComment,
+  } = useSurvey();
 
   const questions = survey.questions;
 
   console.log("survey", survey);
   console.log("questions", questions);
 
-  // const update = async (surveyData: ISurvey) => {
-  //   const result = await surveyApi.updateSurvey(surveyData);
-  //   return result;
-  // };
-
   const handleTitleComment = (state: { title: string; comment: string }) => {
     console.log("title in handle title and comment:", state);
-    // survey.title = title
-    update({ ...survey, title: state.title, comment: state.comment });
+    updateTitleComment(state);
   };
 
-  /**
-   * 수정된 질문을 입력받아 기존 질문을 대체합니다.
-   * @param question 수정할 질문
-   * @returns 없음
-   */
-  // const updateQuestion = (question: CreateQuestionData) => {
-  //   const index = questions.findIndex((q) => q._id === question._id);
-  //   if (index < 0) {
-  //     return;
-  //   }
-  //   questions[index] = question;
-  //   console.log("questions in update question:", questions);
-  //   // setQuestions([...questions]);
-  //   survey.questions = questions;
-  //   update(survey);
-  // };
-
   const addQuestion = async () => {
     const question: IQuestionData = {
       order: questions.length,
@@ -58,17 +35,11 @@ export const EditSurvey = () => {
       isRequired: false,
       content: { choices: [] },
     };
-    // const updatedSurvey = await surveyApi.addQuestion(survey._id!, question);
     await createQuestion(question);
-    // console.log("new question:", updatedSurvey);
-    // await update(updatedSurvey);
-    // setQuestions([...questions, question]);
   };
 
   async function deleteQuestion(id: string) {
     await removeQuestion(id);
-    // const delQuestions = questions.filter((question) => question._id !== id);
-    // setQuestions(delQuestions);
   }
 
   if (!survey) {
@@ -87,7 +58,6 @@ export const EditSurvey = () => {
       deleteQuestion={deleteQuestion}
       handleQuestion={updateQuestion}
       handleTitleComment={handleTitleComment}
-      // callApi={update}
     />
   );
 };

frontend/src/surveys/ModifySurveyView.tsx

@@ -14,7 +14,6 @@ type Props = {
   deleteQuestion: (id: string) => void;
   handleQuestion: (question: CreateQuestionData) => void;
   handleTitleComment: Function;
-  // callApi: (surveyData: ISurvey) => Promise<any>;
 };
 
 export const ModifySurveyView = ({
@@ -24,79 +23,9 @@ export const ModifySurveyView = ({
   deleteQuestion,
   handleQuestion,
   handleTitleComment,
-}: // callApi,
-Props) => {
+}: Props) => {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
-  // const [survey, setSurvey] = useState<ISurvey>(surveyData);
-  // const [questions, setQuestions] = useState<CreateQuestionData[]>(() => {
-  //   const questions = survey.questions;
-  //   return questions.map((question) => ({ ...question, isEditing: false }));
-  // });
-  // const navigate = useNavigate();
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    // setSurvey({ ...survey, [name]: value });
-  };
-
-  // const hasIncompleteEditing = () => {
-  // if (questions.length <= 0) {
-  //   return true;
-  // }
-  // const incompleted = questions.some((question) => question.isEditing);
-  // return incompleted;
-  // };
-
-  // /**
-  //  * 수정된 질문을 입력받아 기존 질문을 대체합니다.
-  //  * @param question 수정할 질문
-  //  * @returns 없음
-  //  */
-  // const handleQuestion = (question: CreateQuestionData) => {
-  //   const index = questions.findIndex((q) => q._id === question._id);
-  //   if (index < 0) {
-  //     return;
-  //   }
-  //   questions[index] = question;
-  //   console.log("handle question questions:", questions);
-  //   setQuestions([...questions]);
-  // };
-
-  // const addQuestion = () => {
-  //   const question: CreateQuestionData = {
-  //     _id: Math.random().toString(),
-  //     order: questions.length,
-  //     type: "singletext",
-  //     title: "",
-  //     comment: "",
-  //     isRequired: false,
-  //     content: { choices: [] },
-  //     isEditing: true,
-  //   };
-  //   setQuestions([...questions, question]);
-  // };
-
-  // async function deleteQuestion(id: string) {
-  //   const delQuestions = questions.filter((question) => question._id !== id);
-  //   setQuestions(delQuestions);
-  // }
-
-  // const handleSubmit = async (e: FormEvent) => {
-  //   e.preventDefault();
-  //   // survey.questions = questions;
-  //   try {
-  //     setLoading(true);
-  //     const result = await callApi(survey);
-  //     console.log("result:", result);
-  //     navigate(-1);
-  //   } catch (error) {
-  //     setLoading(false);
-  //     catchErrors(error, setError);
-  //   }
-  // };
-
-  // const disabled = hasIncompleteEditing();
 
   return (
     <>
@@ -105,33 +34,11 @@ Props) => {
       )}
       <form>
         <div className="flex flex-col place-items-center">
-          {/* <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"
-              className="font-bold text-4xl text-center m-2 border-b-2"
-              placeholder="설문지 제목"
-              autoComplete="on"
-              value={survey.title}
-              onChange={handleChange}
-            ></input>
-            <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={survey.comment}
-              onChange={handleChange}
-            ></input>
-          </div> */}
           <QuestionsList
             questions={questions}
             handleQuestion={handleQuestion}
@@ -149,14 +56,6 @@ Props) => {
               <p>{error}</p>
             </div>
           )}
-          {/* <button
-            type="submit"
-            disabled={disabled}
-            title={`${disabled ? "완성되지 않은 부분이 존재합니다" : ""}`}
-            className="border bg-themeColor my-5 py-2 px-3 disabled:opacity-60 font-bold text-white"
-          >
-            저장
-          </button> */}
         </div>
       </form>
     </>