Merge branch 'develop0718' into DH6

frontend/src/apis/survey.api.ts

@@ -11,10 +11,17 @@ export const getSurvey = async (surveyId: string) => {
   const { data } = await axios.get(`${baseUrl}/surveys/${surveyId}/edit`);
   return data;
 };
+<<<<<<< HEAD
 export const getASurvey = async (surveyId: string) => {
   const { data } = await axios.get(`${baseUrl}/surveys/${surveyId}/edit`);
+=======
+
+export const ansSurvey = async (surveyId: string) => {
+  const { data } = await axios.get(`${baseUrl}/surveys/${surveyId}`);
+>>>>>>> develop0718
   return data;
 };
+
 //동혁
 export const getSurveys = async () => {
   const { data } = await axios.get(`${baseUrl}/surveys/`);

frontend/src/commons/ACheckbox.tsx

-import React from "react";
+import React, { useEffect } from "react";
+import { CheckboxType } from "../types";
 
-export const ACheckboxForm = () => {
+type Props = {
+  element: CheckboxType;
+};
+
+export const ACheckboxForm = ({ element }: Props) => {
   return (
-    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
-      <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-        <form className="text-xl font-bold ml-6 w-1/2">checkbox</form>
-      </div>
-      <form className="border w-11/12 my-4">설문조사 설명</form>
-      <div className="flex flex-row items-center m-3">
-        <div className="mb-4 mx-3">
-          <input
-            id="default-checkbox"
-            type="checkbox"
-            className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-          />
-          <input className="ml-2 text-lg font-medium">First checkbox</input>
-        </div>
-        <div className="mb-4 mx-3">
-          <input
-            id="default-checkbox"
-            type="checkbox"
-            className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-          />
-          <label className="ml-2 text-lg font-medium">Second checkbox</label>
-        </div>
-        <div className="mb-4 mx-3">
-          <input
-            id="default-checkbox"
-            type="checkbox"
-            value=""
-            className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-          />
-          <label className="ml-2 text-lg font-medium">Third checkbox</label>
-        </div>
-        <div className="mb-4 mx-4">
-          <input
-            id="default-checkbox"
-            type="checkbox"
-            value=""
-            className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-          />
-          <label className="ml-2 text-lg font-medium">Fourth checkbox</label>
-        </div>
+    <div className="flex w-full gap-4 justify-around my-3">
+      {element.content.choices.map((choice) => (
+        <div>
+          <input className="mr-2" type="checkbox" />
+          <label className="text-lg">{choice.text}</label>
         </div>
+      ))}
     </div>
   );
 };

frontend/src/commons/ADropdown.tsx

-import React from "react";
+import React, { useState } from "react";
+import { DropdownType } from "../types";
 
-export const ADropdownForm = () => {
+type Props = {
+  element: DropdownType;
+};
+
+export const ADropdownForm = ({ element }: Props) => {
   return (
-    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
-      <div className="flex flexgi-row h-16 w-full items-center">
-        <form className="text-xl font-bold ml-6 w-1/2">dropdown</form>
-      </div>
-      <form className="border w-11/12 my-3">설문조사 설명</form>
+    <div className="flex flex-col container w-4/5 h-auto items-center m-3 py-3">
       <select className="py-2 hover:bg-themeColor bg-gray-200 rounded ">
-        <option selected>choose answer</option>
-        <option>first</option>
-        <option>second</option>
+        {element.content.choices.map((choice) => (
+          <option>{choice.text}</option>
+        ))}
       </select>
     </div>
   );

frontend/src/commons/AEssayForm.tsx

 import React from "react";
+import { EssayType } from "../types";
 
-export const AEssayForm = () => {
+type Props = {
+  element: EssayType;
+};
+
+export const AEssayForm = ({ element }: Props) => {
   return (
-    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
-      <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-        <form className="text-xl font-bold ml-6 w-1/2">input</form>
-      </div>
-      <form className="border w-11/12 my-3">설문조사 설명</form>
-      <input className="border w-11/12 h-36 my-3" type="text"></input>
+    <div className="flex mt-4 w-full justify-center">
+      <input className="border w-11/12 h-36 my-3"></input>
     </div>
   );
 };

frontend/src/commons/AQuestion.tsx

+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { BasicQuestionType, SurveyType } from "../types";
+import { ACheckboxForm } from "./ACheckbox";
+import { ADropdownForm } from "./ADropdown";
+import { AEssayForm } from "./AEssayForm";
+import { ARadioForm } from "./ARadioForm";
+
+type PropsType = {
+  question: BasicQuestionType;
+};
+export const AQuestion = ({ question }: PropsType) => {
+  function getContent(question: BasicQuestionType) {
+    switch (question.type) {
+      case "essay":
+        return <AEssayForm element={question} />;
+      case "radio":
+        return <ARadioForm element={question} />;
+      case "checkbox":
+        return <ACheckboxForm element={question} />;
+      case "dropdown":
+        return <ADropdownForm element={question} />;
+      // case "file":
+      //   return <AFileForm element={element} currentId={currentId} />;
+      // case "rating":
+      //   return (
+      //     <ARatingForm
+      //       handleQuestion={handleQuestion}
+      //       element={element}
+      //       currentId={currentId}
+      //     />
+      //   );
+      default:
+        return <></>;
+    }
+  }
+
+  return (
+    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
+      <div className="flex flexgi-row h-16 w-full place-content-between items-center">
+        <div className="text-xl font-bold ml-6 w-1/2">질문</div>
+      </div>
+      <div className="border w-11/12 my-3">내용</div>
+      {getContent(question)}
+    </div>
+  );
+};

frontend/src/commons/ARadioForm.tsx

 import React from "react";
 import { RadioType } from "../types";
 
-// type Props = {
-//   element: RadioType;
-// };
+type Props = {
+  element: RadioType;
+};
 
-export const ARadioForm = () => {
+export const ARadioForm = ({ element }: Props) => {
   return (
-    <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
-      <div className="flex flexgi-row h-16 w-full place-content-between items-center">
-        <form className="text-xl font-bold ml-6 w-1/2">radio</form>
-      </div>
-      <form className="border w-11/12 my-4">설문조사 설명</form>
-      <div className="flex flex-row items-center m-3">
-        <div className="flex items-center mb-4 mx-4">
-          <input
-            id="default-radio-1"
-            type="radio"
-            value=""
-            name="default-radio"
-            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-          />
-          <label className="ml-2 text-lg">First radio</label>
-        </div>
-        <div className="flex items-center mb-4 mx-4">
-          <input
-            id="default-radio-1"
-            type="radio"
-            value=""
-            name="default-radio"
-            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-          />
-          <label className="ml-2 text-lg">Second radio</label>
-        </div>
-        <div className="flex items-center mb-4 mx-4">
-          <input
-            checked
-            id="default-radio-2"
-            type="radio"
-            value=""
-            name="default-radio"
-            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-          />
-          <label className="ml-2 text-lg">Checked state</label>
-        </div>
+    <div className="flex w-full gap-4 justify-around my-3">
+      {element.content.choices.map((choice) => (
+        <div>
+          <input className="mr-2" type="radio"></input>
+          <label className="text-lg">{choice.value}</label>
         </div>
+      ))}
     </div>
   );
 };

frontend/src/commons/SurveyForm.tsx

 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { surveyApi } from "../apis";
-import { Question } from "../questions";
+import { catchErrors } from "../helpers";
 import { SurveyType } from "../types";
-import { ACheckboxForm } from "./ACheckbox";
-import { ADropdownForm } from "./ADropdown";
-import { AEssayForm } from "./AEssayForm";
+import { AQuestion } from "./AQuestion";
 import { ARadioForm } from "./ARadioForm";
 
 export const SurveyForm = () => {
   let { surveyId } = useParams<{ surveyId: string }>();
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
   const [survey, setSurvey] = useState<SurveyType>({
     _id: surveyId,
     user: {},
@@ -17,36 +18,37 @@ export const SurveyForm = () => {
     comment: "",
     questions: [],
   });
+
   useEffect(() => {
-    getSurvey();
+    ansSurvey();
   }, [surveyId]);
-  async function getSurvey() {
+
+  async function ansSurvey() {
     try {
       if (surveyId) {
-        const thisSurvey: SurveyType = await surveyApi.getASurvey(surveyId);
-        console.log(thisSurvey);
-        setSurvey(thisSurvey);
-        // setSuccess(true);
-        // setError("");
+        const answersurvey: SurveyType = await surveyApi.ansSurvey(surveyId);
+        console.log(answersurvey);
+        setSurvey(answersurvey);
+        setSuccess(true);
+        setError("");
       } else {
-        // setLoading(true);
+        setLoading(true);
       }
     } catch (error) {
-      // catchErrors(error, setError);
+      catchErrors(error, setError);
     } finally {
-      // setLoading(false);
+      setLoading(false);
     }
   }
+
   return (
     <div className="flex flex-col place-items-center">
       <div className="flex flex-col container place-items-center mt-4">
-        <form className="font-bold text-4xl text-center m-2">설문지 제목</form>
-        <textarea
-          className="font-bold text-1xl text-center m-2 resize-none"
-          placeholder="설문조사에 대한 설명을 입력해주세요"
-          rows={2}
-          cols={60}
-        ></textarea>
+        <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) => {
+          return <AQuestion question={question}></AQuestion>;
+        })}
         <div>
           <button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white">
             제출하기

src/routes/survey.route.ts

@@ -11,7 +11,10 @@ router.route("/:surveyId")
 
 router.route("/create").post(authCtrl.requireLogin, surveyCtrl.createSurvey);
 router
-  .route("/:surveyId/edit")
+  .route("/:surveyId")
+  .get(surveyCtrl.getSurveyById);
+router
+  .route("/edit/:surveyId")
   .get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById)
   .put(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.updateSurvey);
 router