Merge branch 'seoyeon_' into develop0727

frontend/src/SurveyRouter.tsx

@@ -11,6 +11,7 @@ import { EditSurvey } from "./survey/EditSurvey";
 import { ResultSurvey } from "./survey/ResultSurvey";
 import { CompleteSurvey } from "./survey/CompleteSurvey";
 import { SameSurvey } from "./survey/SameSurvey";
+import { CreateSurvey } from "./survey/CreateSurvey";
 
 export const SurveyRouter = () => {
   return (
@@ -20,6 +21,7 @@ export const SurveyRouter = () => {
           <Route index element={<Home />} />
           <Route path="login" element={<Login />} />
           <Route path="signup" element={<SignUp />} />
+          <Route path="surveys/:surveyId/create" element={<CreateSurvey />} />
           <Route path="surveys/:surveyId/" element={<EditResultButton />}>
             <Route path="edit" element={<EditSurvey />} />
             <Route path="result" element={<ResultSurvey />} />

frontend/src/answers/ADropdownForm.tsx

@@ -22,7 +22,7 @@ export const ADropdownForm = ({ element, answerQuestion }: Props) => {
   return (
     <div className="flex flex-col container w-11/12 h-auto m-3 py-3">
       <select
-        className="place-self-center py-2 w-48 hover:bg-gray-200 border border-black rounded"
+        className="py-2 w-48 hover:bg-gray-200 border border-black rounded"
         onChange={handleChange}
       >
         {element.content.choices.map((choice) => (

frontend/src/profile/Profile.tsx

@@ -21,7 +21,7 @@ export const Profile = () => {
 
   async function createSurvey() {
     const newSurvey: SurveyType = await surveyApi.createSurvey(survey);
-    navigate(`/surveys/${newSurvey._id}/edit`, {
+    navigate(`/surveys/${newSurvey._id}/create`, {
       replace: true,
     });
   }
@@ -39,7 +39,7 @@ export const Profile = () => {
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-6">
         <button
           onClick={createSurvey}
-          className="flex w-40 h-48 md:h-60 md:w-52 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
+          className="flex w-40 h-48 md:h-60 md:w-52 items-center font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
         >
           <div className="text-center md:px-6 md:py-6 font-xs md:font-bold text-gray-500 place-items-center hover:text-white">
             CREATE NEW SURVEY!

frontend/src/questions/MatrixForm.tsx

-// import { useQuestion } from "./question.context";

frontend/src/questions/Question.tsx

@@ -30,7 +30,7 @@ Props) => {
     try {
       console.log(question);
       const newQuestion: BasicQuestionType = await questionApi.updateQuestion(
-        element
+        question
       );
       // console.log(newQuestion);
       handleQuestion(question);
@@ -184,7 +184,7 @@ Props) => {
               key={key}
               id={question._id}
               value={key}
-              // selected={key === element.type}
+              selected={key === element.type}
             >
               {value}
             </option>

frontend/src/survey/CreateSurvey.tsx

+import React, { FormEvent, useEffect, useState } from "react";
+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 { catchErrors } from "../helpers";
+
+export const CreateSurvey = () => {
+  let { surveyId } = useParams<{ surveyId: string }>();
+  interface CustomizedState {
+    save: boolean;
+  }
+  const location = useLocation();
+  const state = location.state as CustomizedState;
+
+  useEffect(() => {
+    getSurvey();
+  }, [surveyId]);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const navigate = useNavigate();
+  const [survey, setSurvey] = useState<SurveyType>({
+    _id: surveyId || "",
+    user: {},
+    title: "",
+    comment: "",
+    questions: [],
+  });
+  async function getSurvey() {
+    try {
+      if (surveyId) {
+        const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId);
+        setSurvey(thisSurvey);
+        setSuccess(true);
+        setError("");
+      } else {
+        setLoading(true);
+      }
+    } catch (error) {
+      catchErrors(error, setError);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  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 });
+  };
+
+  const handleSurvey = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.currentTarget;
+    setSurvey({ ...survey, [name]: value });
+  };
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    try {
+      const newSurvey: SurveyType = await surveyApi.editSurvey(survey);
+      console.log(newSurvey);
+      setSuccess(true);
+      alert("저장되었습니다");
+      navigate("/profile");
+      setError("");
+    } catch (error) {
+      catchErrors(error, setError);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function addQuestion() {
+    try {
+      if (surveyId) {
+        const questions: BasicQuestionType[] = await questionApi.createQuestion(
+          surveyId
+        );
+        console.log(questions);
+        setSurvey({ ...survey, questions: questions });
+        setSuccess(true);
+        setError("");
+      } else {
+        setLoading(true);
+      }
+    } catch (error) {
+      catchErrors(error, setError);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function deleteQuestion(id: string) {
+    const newList: BasicQuestionType[] = [...survey.questions];
+    try {
+      const newQuestion: BasicQuestionType = await questionApi.deleteQuestion(
+        id
+      );
+      setSurvey({ ...survey, questions: newList.filter((a) => a._id !== id) });
+      setSuccess(true);
+      setError("");
+    } catch (error) {
+      catchErrors(error, setError);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const questions = survey.questions;
+  console.log(questions);
+  console.log(state);
+  return (
+    <>
+      {error ? alert(error) : <></>}
+      {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="설문지 제목"
+              value={survey.title}
+              onChange={handleSurvey}
+            ></input>
+            <input
+              type="text"
+              name="comment"
+              className="font-bold text-1xl text-center m-2 border-b-2   resize-none"
+              placeholder="설문조사에 대한 설명을 입력해주세요"
+              size={50}
+              value={survey.comment}
+              onChange={handleSurvey}
+            ></input>
+          </div>
+          {questions.map((question) => (
+            <Question
+              key={question._id}
+              element={question}
+              // isSave={state ? true : false}
+              handleQuestion={handleQuestion}
+              deleteQuestion={deleteQuestion}
+            />
+          ))}
+          <div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
+            <button type="button" onClick={addQuestion}>
+              질문 추가
+            </button>
+          </div>
+          <div>
+            <button
+              type="submit"
+              className="border bg-themeColor my-5 py-2 px-3 font-bold text-white"
+            >
+              저장하기
+            </button>
+          </div>
+        </div>
+      </form>
+    </>
+  );
+};

frontend/src/survey/EditSurvey.tsx

@@ -28,6 +28,7 @@ export const EditSurvey = () => {
     comment: "",
     questions: [],
   });
+
   async function getSurvey() {
     try {
       if (surveyId) {
@@ -115,7 +116,6 @@ export const EditSurvey = () => {
 
   const questions = survey.questions;
   console.log(questions);
-  console.log(state);
   return (
     <>
       {error ? alert(error) : <></>}
@@ -136,7 +136,7 @@ export const EditSurvey = () => {
             <input
               type="text"
               name="comment"
-              className="font-bold text-1xl text-center m-2 resize-none"
+              className="font-bold text-1xl text-center m-2 border-b-2   resize-none"
               placeholder="설문조사에 대한 설명을 입력해주세요"
               size={50}
               value={survey.comment}
@@ -147,7 +147,6 @@ export const EditSurvey = () => {
             <Question
               key={question._id}
               element={question}
-              // isSave={state ? true : false}
               handleQuestion={handleQuestion}
               deleteQuestion={deleteQuestion}
             />

frontend/src/survey/ResultSurvey.tsx

@@ -43,7 +43,7 @@ export const ResultSurvey = () => {
         <div className="font-bold text-4xl text-center m-2 border-b-2">
           {survey.title}
         </div>
-        <div className="font-bold text-1xl text-center m-2 resize-none">
+        <div className="font-bold text-xl text-center m-2 resize-none">
           {survey.comment}
         </div>
       </div>

src/controllers/auth.controller.ts

@@ -72,7 +72,7 @@ export const login = asyncWrap(async (req, res) => {
   const user = await userDb.findUserByEmail(email, true);
   console.log("user =", user);
   if (!user) {
-    return res.status(422).send(`${email} 사용자가 존재하지 않습니다`);
+    return res.status(422).send(`${email} 사용자가 존재하지않습니다 회원가입을 해주세요`);
   }
   // 2) 비밀번호 확인
   const passwordMatch = await bcrypt.compare(password, user.password);

src/routes/survey.route.ts

@@ -4,15 +4,10 @@ import { authCtrl, surveyCtrl, questionCtrl } from "../controllers";
 const router = express.Router();
 
 router.route("/").get(authCtrl.requireLogin, surveyCtrl.getSurveys);
-router.route("/:surveyId")
-.get(surveyCtrl.getSurveyById);
-
-
 
 router.route("/create").post(authCtrl.requireLogin, surveyCtrl.createSurvey);
-router
-  .route("/:surveyId")
-  .get(surveyCtrl.getSurveyById);
+
+router.route("/:surveyId").get(surveyCtrl.getSurveyById);
 router
   .route("/:surveyId/edit")
   .get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById)