verion 0.1 시작

frontend/src/questions/DropdownForm.tsx

 import React, { useState } from "react";
-import { DropdownType } from "../types";
+import { IDropdown } from "../types";
 
 type Props = {
-  element: DropdownType;
+  element: IDropdown;
   handleQuestion: (id: string) => void;
   isEditing: boolean;
 };

frontend/src/questions/EssayForm.tsx

 import React from "react";
-import { EssayType } from "../types";
+import { IEssay } from "../types";
 
 type Props = {
-  element: EssayType;
+  element: IEssay;
   isEditing: boolean;
 };
 

frontend/src/questions/FileForm.tsx

 import React from "react";
-import { FileType } from "../types";
+import { IFile } from "../types";
 
 type Props = {
-  element: FileType;
+  element: IFile;
   isEditing: boolean;
 };
 

frontend/src/questions/Question.tsx

 import React, { useState } from "react";
-import { BasicQuestionType } from "../types";
+import { IQuestionData } from "../types";
 import { questionApi } from "../apis";
 import { EssayForm } from "./EssayForm";
 import { CheckboxForm } from "./CheckboxForm";
@@ -11,10 +11,10 @@ import { DateForm } from "./DateForm";
 import { QUESTION_TYPES } from "../commons";
 
 type Props = {
-  element: BasicQuestionType;
+  element: IQuestionData;
   isEditing: boolean;
   handleEditing: (qid: string, isEditing: boolean) => void;
-  handleQuestion: (element: BasicQuestionType) => void;
+  handleQuestion: (element: IQuestionData) => void;
   deleteQuestion: (id: string) => void;
 };
 
@@ -33,7 +33,7 @@ export const Question = ({
   async function handleEditComplete() {
     try {
       console.log(question);
-      const newQuestion: BasicQuestionType = await questionApi.updateQuestion(
+      const newQuestion: IQuestionData = await questionApi.updateQuestion(
         question
       );
       // console.log(newQuestion);
@@ -84,7 +84,7 @@ export const Question = ({
     setQuestion({ ...question, [name]: value });
   }
 
-  function getContent(element: BasicQuestionType) {
+  function getContent(element: IQuestionData) {
     switch (element.type) {
       case "essay":
         return <EssayForm element={element} isEditing={isEditing} />;

frontend/src/questions/RadioForm.tsx

 import React, { useState } from "react";
-import { RadioType } from "../types";
+import { IRadio } from "../types";
 
 type Props = {
-  element: RadioType;
+  element: IRadio;
   handleQuestion: (id: string) => void;
   isEditing: boolean;
 };

frontend/src/questions/RatingForm.tsx

 import React, { useState } from "react";
-import { RatingType } from "../types";
+import { IRating } from "../types";
 
 type Props = {
-  element: RatingType;
+  element: IRating;
   handleQuestion: (id: string) => void;
   isEditing: boolean;
 };

frontend/src/results/Accordion.tsx

 import React, { useState, useRef, useEffect } from "react";
-import { BasicQuestionType } from "../types";
+import { IQuestionData } from "../types";
 import { REssayForm } from "./REssayForm";
 import { RCheckboxForm } from "./RCheckboxForm";
 import { RRadioForm } from "./RRadioForm";
@@ -9,7 +9,7 @@ import { RRatingForm } from "./RRatingForm";
 import { RDateForm } from "./RDateForm";
 
 type AccordionProps = {
-  question: BasicQuestionType;
+  question: IQuestionData;
 };
 
 export const Accordion = ({ question }: AccordionProps) => {
@@ -21,7 +21,7 @@ export const Accordion = ({ question }: AccordionProps) => {
     setOpened(!isOpened);
     setHeight(!isOpened ? `${contentElement.current?.scrollHeight}px` : "0px");
   };
-  function getContent(question: BasicQuestionType) {
+  function getContent(question: IQuestionData) {
     switch (question.type) {
       case "essay":
         return <REssayForm question={question} />;

frontend/src/results/RCheckboxForm.tsx

 import React from "react";
-import { BasicQuestionType } from "../types";
+import { IQuestionData } from "../types";
 
 type Props = {
-  question: BasicQuestionType;
+  question: IQuestionData;
 };
 
 export const RCheckboxForm = ({ question }: Props) => {

frontend/src/results/RDateForm.tsx

 import React from "react";
-import { BasicQuestionType } from "../types";
+import { IQuestionData } from "../types";
 
 type Props = {
-  question: BasicQuestionType;
+  question: IQuestionData;
 };
 
 export const RDateForm = ({ question }: Props) => {

frontend/src/results/RDropdownForm.tsx

 import React from "react";
-import { BasicQuestionType } from "../types";
+import { IQuestionData } from "../types";
 
 type Props = {
-  question: BasicQuestionType;
+  question: IQuestionData;
 };
 
 export const RDropdownForm = ({ question }: Props) => {

frontend/src/results/REssayForm.tsx

 import React from "react";
-import { BasicQuestionType } from "../types";
+import { IQuestionData } from "../types";
 
 type Props = {
-  question: BasicQuestionType;
+  question: IQuestionData;
 };
 
 export const REssayForm = ({ question }: Props) => {

frontend/src/results/RRadioForm.tsx

 import React from "react";
-import { BasicQuestionType } from "../types";
+import { IQuestionData } from "../types";
 
 type Props = {
-  question: BasicQuestionType;
+  question: IQuestionData;
 };
 
 export const RRadioForm = ({ question }: Props) => {

frontend/src/results/RRatingForm.tsx

 import React from "react";
-import { BasicQuestionType } from "../types";
+import { IQuestionData } from "../types";
 
 type Props = {
-  question: BasicQuestionType;
+  question: IQuestionData;
 };
 
 export const RRatingForm = ({ question }: Props) => {

frontend/src/survey/CreateSurvey.tsx

@@ -3,7 +3,7 @@ import { useParams, useLocation, useNavigate } from "react-router-dom";
 import { questionApi, surveyApi } from "../apis";
 import { SpinnerIcon } from "../icons";
 import { Question } from "../questions";
-import { BasicQuestionType, SurveyType } from "../types";
+import { IQuestionData, ISurvey } from "../types";
 import { catchErrors } from "../helpers";
 
 export const CreateSurvey = () => {
@@ -15,7 +15,7 @@ export const CreateSurvey = () => {
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
   const navigate = useNavigate();
-  const [survey, setSurvey] = useState<SurveyType>({
+  const [survey, setSurvey] = useState<ISurvey>({
     _id: surveyId || "",
     user: {},
     title: "",
@@ -30,7 +30,7 @@ export const CreateSurvey = () => {
   async function getSurvey() {
     try {
       if (surveyId) {
-        const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId);
+        const thisSurvey: ISurvey = await surveyApi.getSurvey(surveyId);
 
         const initEditing = thisSurvey.questions.map((question) => {
           return { qid: question._id, isEditing: false };
@@ -60,7 +60,7 @@ export const CreateSurvey = () => {
     }
   };
 
-  const handleQuestion = (element: BasicQuestionType) => {
+  const handleQuestion = (element: IQuestionData) => {
     const index = survey.questions.findIndex(
       (question) => question._id === element._id
     );
@@ -82,7 +82,7 @@ export const CreateSurvey = () => {
       alert("아직 수정이 완료되지 않은 질문이 존재합니다.");
     } else {
       try {
-        const newSurvey: SurveyType = await surveyApi.editSurvey(survey);
+        const newSurvey: ISurvey = await surveyApi.editSurvey(survey);
         console.log(newSurvey);
         setSuccess(true);
         alert("저장되었습니다");
@@ -103,7 +103,7 @@ export const CreateSurvey = () => {
         //   surveyId
         // );
         // console.log(questions);
-        const question: BasicQuestionType = await questionApi.createQuestion(
+        const question: IQuestionData = await questionApi.createQuestion(
           surveyId
         );
         console.log(question);
@@ -126,11 +126,9 @@ export const CreateSurvey = () => {
   }
 
   async function deleteQuestion(id: string) {
-    const newList: BasicQuestionType[] = [...survey.questions];
+    const newList: IQuestionData[] = [...survey.questions];
     try {
-      const newQuestion: BasicQuestionType = await questionApi.deleteQuestion(
-        id
-      );
+      const newQuestion: IQuestionData = await questionApi.deleteQuestion(id);
       setSurvey({ ...survey, questions: newList.filter((a) => a._id !== id) });
       setSuccess(true);
       setError("");

frontend/src/survey/EditSurvey.tsx

@@ -3,7 +3,7 @@ import { useParams, useLocation, useNavigate } from "react-router-dom";
 import { questionApi, surveyApi } from "../apis";
 import { SpinnerIcon } from "../icons";
 import { Question } from "../questions";
-import { BasicQuestionType, SurveyType } from "../types";
+import { IQuestionData, ISurvey } from "../types";
 import { catchErrors } from "../helpers";
 
 export const EditSurvey = () => {
@@ -17,7 +17,7 @@ export const EditSurvey = () => {
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
   const navigate = useNavigate();
-  const [survey, setSurvey] = useState<SurveyType>({
+  const [survey, setSurvey] = useState<ISurvey>({
     _id: surveyId || "",
     user: {},
     title: "",
@@ -32,7 +32,7 @@ export const EditSurvey = () => {
   async function getSurvey() {
     try {
       if (surveyId) {
-        const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId);
+        const thisSurvey: ISurvey = await surveyApi.getSurvey(surveyId);
 
         const initEditing = thisSurvey.questions.map((question) => {
           return { qid: question._id, isEditing: false };
@@ -62,7 +62,7 @@ export const EditSurvey = () => {
     }
   };
 
-  const handleQuestion = (element: BasicQuestionType) => {
+  const handleQuestion = (element: IQuestionData) => {
     const index = survey.questions.findIndex(
       (question) => question._id === element._id
     );
@@ -84,7 +84,7 @@ export const EditSurvey = () => {
       alert("아직 수정이 완료되지 않은 질문이 존재합니다.");
     } else {
       try {
-        const newSurvey: SurveyType = await surveyApi.editSurvey(survey);
+        const newSurvey: ISurvey = await surveyApi.editSurvey(survey);
         console.log(newSurvey);
         setSuccess(true);
         alert("저장되었습니다");
@@ -105,7 +105,7 @@ export const EditSurvey = () => {
         //   surveyId
         // );
         // console.log(questions);
-        const question: BasicQuestionType = await questionApi.createQuestion(
+        const question: IQuestionData = await questionApi.createQuestion(
           surveyId
         );
         console.log(question);
@@ -132,11 +132,9 @@ export const EditSurvey = () => {
   }
 
   async function deleteQuestion(id: string) {
-    const newList: BasicQuestionType[] = [...survey.questions];
+    const newList: IQuestionData[] = [...survey.questions];
     try {
-      const newQuestion: BasicQuestionType = await questionApi.deleteQuestion(
-        id
-      );
+      const newQuestion: IQuestionData = await questionApi.deleteQuestion(id);
       setSurvey({ ...survey, questions: newList.filter((a) => a._id !== id) });
       setSuccess(true);
       setError("");

frontend/src/survey/ResultSurvey.tsx

@@ -3,14 +3,14 @@ import { answerApi, surveyApi } from "../apis";
 import { catchErrors } from "../helpers";
 import { Accordion } from "../results";
 import { useParams } from "react-router-dom";
-import { SurveyType } from "../types";
+import { ISurvey } from "../types";
 
 export const ResultSurvey = () => {
   let { surveyId } = useParams<{ surveyId: string }>();
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
-  const [survey, setSurvey] = useState<SurveyType>({
+  const [survey, setSurvey] = useState<ISurvey>({
     _id: surveyId || "",
     user: {},
     title: "",

frontend/src/surveys/AnswerSurvey.tsx

+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { surveyApi } from "../apis";
+import { catchErrors } from "../helpers";
+import { SpinnerIcon } from "../icons";
+import { ISurvey } from "../types";
+
+export const AnswerSurvey = () => {
+  let { surveyId } = useParams<{ surveyId: string }>();
+
+  const [survey, setSurvey] = useState<ISurvey>();
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    surveyId && getSurvey(surveyId);
+  }, [surveyId]);
+
+  const handleSubmit = () => {};
+
+  async function getSurvey(surveyId: string) {
+    try {
+      setError("");
+      const survey: any = await surveyApi.getSurveyById(surveyId);
+      console.log("survey가져옴ㅎㅎ", survey);
+      // answerSurvey.current._id = survey._id;
+      // answerSurvey.current.questions = survey.questions;
+      setSurvey(survey);
+      // setSuccess(true);
+    } catch (error) {
+      catchErrors(error, setError);
+    } finally {
+      // setLoading(false);
+    }
+  }
+
+  if (!survey) {
+    return (
+      <div className="flex justify-center mt-5">
+        <SpinnerIcon className="animate-spin h-10 w-10 mr-1 bg-white text-slate-500" />
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="flex flex-col place-items-center">
+        <div className="flex flex-col container place-items-center mt-4">
+          <p className="font-bold text-4xl text-center m-2">{survey.title}</p>
+          <p className="font-bold text-1xl text-center m-2">{survey.comment}</p>
+          {/* {survey.questions.map((question, index) => {
+            return (
+              <AQuestion
+                key={question._id}
+                question={question}
+                answerQuestion={answerSurvey.current.questions[index]}
+                addFiles={addFiles}
+              ></AQuestion>
+            );
+          })} */}
+          <div>
+            <button
+              type="submit"
+              className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white"
+            >
+              제출하기
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};

frontend/src/surveys/CreateSurvey.tsx

+import React from "react";
+import { surveyApi } from "../apis";
+import { ISurvey } from "../types";
+import { ModifySurvey } from "./ModifySurvey";
+
+export const CreateSurvey = () => {
+  const surveyData = {
+    _id: "",
+    user: "",
+    title: "",
+    comment: "",
+    questions: [],
+  };
+
+  const create = async (surveyData: ISurvey) => {
+    const result = await surveyApi.createSurvey(surveyData);
+    return result;
+  };
+
+  return <ModifySurvey surveyData={surveyData} callApi={create} />;
+};

frontend/src/surveys/EditSurvey.tsx

+import React from "react";
+import { useLocation } from "react-router-dom";
+import { surveyApi } from "../apis";
+import { ISurvey } from "../types";
+import { ModifySurvey } from "./ModifySurvey";
+
+export const EditSurvey = () => {
+  const location = useLocation();
+  const surveyState = location.state as ISurvey;
+  console.log("edit survey:", surveyState);
+
+  const update = async (surveyData: ISurvey) => {
+    const result = await surveyApi.updateSurvey(surveyData);
+    return result;
+  };
+
+  return <ModifySurvey surveyData={surveyState} callApi={update} />;
+};

frontend/src/surveys/ModifySurvey.tsx

+import React, { ChangeEvent, FormEvent, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { catchErrors } from "../helpers";
+import { SpinnerIcon } from "../icons";
+import { CreateQuestionData, ISurvey } from "../types";
+import { QuestionsList } from "./QuestionsList";
+
+type Props = {
+  surveyData: ISurvey;
+  callApi: (surveyData: ISurvey) => Promise<any>;
+};
+
+export const ModifySurvey = ({ surveyData, callApi }: 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;
+  };
+
+  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 handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    survey.questions = questions;
+    try {
+      setLoading(true);
+      const result = await callApi(survey);
+      console.log("result:", result);
+      navigate("/surveys/profile", { replace: true });
+    } catch (error) {
+      setLoading(false);
+      catchErrors(error, setError);
+    }
+  };
+
+  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 disabled = hasIncompleteEditing();
+
+  return (
+    <>
+      {loading && (
+        <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
+      )}
+      <form onSubmit={handleSubmit}>
+        <div className="flex flex-col place-items-center">
+          <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}
+            deleteQuestion={deleteQuestion}
+          />
+          <button
+            type="button"
+            onClick={addQuestion}
+            className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3"
+          >
+            질문 추가
+          </button>
+          {error && (
+            <div className="text-red-500 text-sm mt-3">
+              <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>
+    </>
+  );
+};