Merge branch 'develop0727' into main-dev

frontend/src/answers/AEssayForm.tsx

 import React, { useState } from "react";
-import { AnswerProps, AnswerQuestionType, EssayType } from "../types";
+import { AnswerProps } from "../types";
 
 export const AEssayForm = ({ element, answerQuestion }: AnswerProps) => {
   const [answer, setAnswer] = useState("");
@@ -19,7 +19,7 @@ export const AEssayForm = ({ element, answerQuestion }: AnswerProps) => {
     <div className="flex mt-3 w-full justify-center">
       <input
         type="text"
-        className="border w-11/12 h-36 my-3"
+        className="border w-11/12 h-24 my-3"
         id={element._id}
         onChange={handleChange}
         value={answer}

frontend/src/commons/Header.tsx

@@ -42,7 +42,7 @@ export const Header = () => {
                 </button>
               </Link>
               <Link to="/signup">
-                <button className="font-bold text-white hover:bg-blue-500 mx-1 py-2 px-3 bg-themeColor rounded-md ">
+                <button className="font-bold text-white hover:bg-themeColor2 mx-1 py-2 px-3 bg-themeColor rounded-md ">
                   회원가입
                 </button>
               </Link>

frontend/src/home/Home.tsx

 import React, { FormEvent } from "react";
 import { useAuth } from "../auth/auth.context";
-import SurveyImg from "../icons/surveyimg.png";
+import homeImg from "../icons/homeImg.png";
 
 export const Home = () => {
   const { user } = useAuth();
@@ -30,10 +30,10 @@ export const Home = () => {
             +
           </button>
         </div>
-        <p className="text-center text-xl text-black mt-3">Create now!</p>
+        <p className="text-center text-xl text-black my-3">Create now!</p>
       </div>
-      <div className="flex justify-center mt-3">
-        <img src={SurveyImg} className="object-scale-down justify-center" />
+      <div className="flex mt-5 md:px-48 bg-themeColor">
+        <img src={homeImg} className="m-3" />
       </div>
     </div>
   );

frontend/src/questions/Question.tsx

@@ -162,12 +162,12 @@ export const Question = ({
       style={{ borderColor: isEditing ? "red" : "#0A8A8A" }}
       className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg"
     >
-      <div className="flex h-16 w-full place-content-between items-center">
+      <div className="flex h-16 w-full place-content-center items-center">
         <input
           type="text"
           name="title"
           id={question._id}
-          className="text-xl font-bold ml-6 border-b-2 w-1/2"
+          className="text-xl font-bold border-b-2 w-11/12"
           placeholder={"Question Title"}
           value={question.title}
           onChange={handleQuestionInfo}
@@ -206,7 +206,21 @@ export const Question = ({
         ></input>
       </div>
       {getContent(question)}
-
+      <div className="flex flex-row place-content-between w-11/12 py-2">
+        <select
+          id={question._id}
+          name="type"
+          onChange={handleSelect}
+          disabled={!isEditing}
+          value={question.type}
+          className="w-32 h-10 md:w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor"
+        >
+          {Array.from(QUESTION_TYPES.entries()).map(([key, value]) => (
+            <option key={key} id={question._id} value={key}>
+              {value}
+            </option>
+          ))}
+        </select>
         <div className="place-self-end py-2">
           <input
             type="checkbox"
@@ -225,7 +239,11 @@ export const Question = ({
                 취소
               </button>
 
-            <button type="button" className="px-1" onClick={handleEditComplete}>
+              <button
+                type="button"
+                className="px-1"
+                onClick={handleEditComplete}
+              >
                 확인
               </button>
             </>
@@ -241,5 +259,6 @@ export const Question = ({
           )}
         </div>
       </div>
+    </div>
   );
 };

frontend/src/survey/Accordion.tsx → frontend/src/results/Accordion.tsx

 import React, { useState, useRef, useEffect } from "react";
-import { baseImageUrl } from "../apis";
 import { BasicQuestionType } from "../types";
-
+import { REssayForm } from "./REssayForm";
+import { RCheckboxForm } from "./RCheckboxForm";
+import { RRadioForm } from "./RRadioForm";
+import { RDropdownForm } from "./RDropdownForm";
+import { RFileForm } from "./RFileForm";
+import { RRatingForm } from "./RRatingForm";
+import { RDateForm } from "./RDateForm";
 type AccordionProps = {
   question: BasicQuestionType;
 };
-const Accordion = ({ question }: AccordionProps) => {
+export const Accordion = ({ question }: AccordionProps) => {
   const [isOpened, setOpened] = useState<boolean>(false);
   const [height, setHeight] = useState<string>("0px");
   const contentElement = useRef<HTMLDivElement>(null);
@@ -14,7 +19,27 @@ const Accordion = ({ question }: AccordionProps) => {
     setOpened(!isOpened);
     setHeight(!isOpened ? `${contentElement.current?.scrollHeight}px` : "0px");
   };
-
+  function getContent(question: BasicQuestionType) {
+    switch (question.type) {
+      case "essay":
+        return <REssayForm question={question} />;
+      case "radio":
+        return <RRadioForm question={question} />;
+      case "checkbox":
+        return <RCheckboxForm question={question} />;
+      case "dropdown":
+        return <RDropdownForm question={question} />;
+      case "file":
+        return <RFileForm question={question} />;
+      case "rating":
+        return <RRatingForm question={question} />;
+      case "date":
+        return <RDateForm question={question} />;
+      default:
+        return <></>;
+    }
+  }
+  console.log(question);
   return (
     <div className="p-1">
       <div onClick={HandleOpening}>
@@ -31,20 +56,7 @@ const Accordion = ({ question }: AccordionProps) => {
           style={{ height: height }}
           className="bg-gray-100 overflow-hidden transition-all duration-300"
         >
-          {question.answers &&
-            (question.type === "file"
-              ? question.answers.map((answer: any) => (
-                  <img
-                    key={answer.url}
-                    alt="file"
-                    src={`${baseImageUrl}/${answer.url}`}
-                  />
-                ))
-              : question.answers.map((answer: any, index: number) => (
-                  <p key={index} className="p-4">
-                    {answer}
-                  </p>
-                )))}
+          {question.answers && getContent(question)}
         </div>
       </div>
     </div>

frontend/src/results/RCheckboxForm.tsx

+import React from "react";
+import { BasicQuestionType } from "../types";
+
+type Props = {
+  question: BasicQuestionType;
+};
+
+export const RCheckboxForm = ({ question }: Props) => {
+  const result = question.answers.flat().reduce((acc: any, cur: any) => {
+    acc[cur] = (acc[cur] || 0) + 1;
+    return acc;
+  }, {});
+  console.log(result);
+
+  return (
+    <div className="m-5">
+      {question.content.choices.map((choice: any) => (
+        <div className="">
+          <span className="font-bold">{choice.text}</span>
+          <span className="ml-3">
+            - {result[choice.text] ? result[choice.text] : 0}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};

frontend/src/results/RDateForm.tsx

+import React from "react";
+import { BasicQuestionType } from "../types";
+
+type Props = {
+  question: BasicQuestionType;
+};
+
+export const RDateForm = ({ question }: Props) => {
+  return (
+    <div className="m-5">
+      {question.answers.map((answer: any) => (
+        <div className="font-bold">{answer}</div>
+      ))}
+    </div>
+  );
+};

frontend/src/results/RDropdownForm.tsx

+import React from "react";
+import { BasicQuestionType } from "../types";
+
+type Props = {
+  question: BasicQuestionType;
+};
+
+export const RDropdownForm = ({ question }: Props) => {
+  const result = question.answers.reduce((acc: any, cur: any) => {
+    acc[cur] = (acc[cur] || 0) + 1;
+    return acc;
+  }, {});
+  console.log(result);
+  return (
+    <div className="m-5">
+      {question.content.choices.map((choice: any) => (
+        <div className="">
+          <span className="font-bold">{choice.text}</span>
+          <span className="ml-3">
+            - {result[choice.text] ? result[choice.text] : 0}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};

frontend/src/results/REssayForm.tsx

+import React from "react";
+import { BasicQuestionType } from "../types";
+
+type Props = {
+  question: BasicQuestionType;
+};
+
+export const REssayForm = ({ question }: Props) => {
+  return (
+    <div className="m-5">
+      {question.answers.map((answer: any) => (
+        <div className="font-bold">{answer}</div>
+      ))}
+    </div>
+  );
+};

frontend/src/results/RFileForm.tsx

+import React from "react";
+import { baseImageUrl } from "../apis";
+
+type Props = {
+  question: any;
+};
+
+export const RFileForm = ({ question }: Props) => {
+  return (
+    <div className="m-5 flex justify-start items-center">
+      {question.answers.map((answer: any) => (
+        <>
+          <img
+            className="h-14"
+            key={answer.url}
+            alt="file"
+            src={`${baseImageUrl}/${answer.url}`}
+          />
+          <div className="ml-3">{answer.name}</div>
+        </>
+      ))}
+    </div>
+  );
+};

frontend/src/results/RRadioForm.tsx

+import React from "react";
+import { BasicQuestionType } from "../types";
+
+type Props = {
+  question: BasicQuestionType;
+};
+
+export const RRadioForm = ({ question }: Props) => {
+  const result = question.answers.reduce((acc: any, cur: any) => {
+    acc[cur] = (acc[cur] || 0) + 1;
+    return acc;
+  }, {});
+  console.log(result);
+
+  return (
+    <div className="m-5">
+      {question.content.choices.map((choice: any) => (
+        <div className="">
+          <span className="font-bold">{choice.text}</span>
+          <span className="ml-3">
+            - {result[choice.text] ? result[choice.text] : 0}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};

frontend/src/results/RRatingForm.tsx

+import React from "react";
+import { BasicQuestionType } from "../types";
+
+type Props = {
+  question: BasicQuestionType;
+};
+
+export const RRatingForm = ({ question }: Props) => {
+  const result = question.answers.reduce((acc: any, cur: any) => {
+    acc[cur] = (acc[cur] || 0) + 1;
+    return acc;
+  }, {});
+  console.log(result);
+  return (
+    <div className="m-5">
+      <div>{question.content.minRateDescription}</div>
+      {question.content.choices.map((choice: any) => (
+        <div className="">
+          <span className="font-bold">{choice.text}</span>
+          <span className="ml-3">
+            - {result[choice.text] ? result[choice.text] : 0}
+          </span>
+        </div>
+      ))}
+      <div>{question.content.maxRateDescription}</div>
+    </div>
+  );
+};

frontend/src/results/index.tsx

+export { Accordion } from "./Accordion";

frontend/src/survey/CreateSurvey.tsx

@@ -77,6 +77,10 @@ export const CreateSurvey = () => {
 
   async function handleSubmit(event: FormEvent) {
     event.preventDefault();
+    const notEditComplete = isEditing?.find((el) => el.isEditing);
+    if (notEditComplete) {
+      alert("아직 수정이 완료되지 않은 질문이 존재합니다.");
+    } else {
       try {
         const newSurvey: SurveyType = await surveyApi.editSurvey(survey);
         console.log(newSurvey);
@@ -90,6 +94,7 @@ export const CreateSurvey = () => {
         setLoading(false);
       }
     }
+  }
 
   async function addQuestion() {
     try {

frontend/src/survey/EditSurvey.tsx

@@ -79,6 +79,10 @@ export const EditSurvey = () => {
 
   async function handleSubmit(event: FormEvent) {
     event.preventDefault();
+    const notEditComplete = isEditing?.find((el) => el.isEditing);
+    if (notEditComplete) {
+      alert("아직 수정이 완료되지 않은 질문이 존재합니다.");
+    } else {
       try {
         const newSurvey: SurveyType = await surveyApi.editSurvey(survey);
         console.log(newSurvey);
@@ -92,6 +96,7 @@ export const EditSurvey = () => {
         setLoading(false);
       }
     }
+  }
 
   async function addQuestion() {
     try {

frontend/src/survey/ResultSurvey.tsx

 import React, { useEffect, useState } from "react";
 import { answerApi, surveyApi } from "../apis";
 import { catchErrors } from "../helpers";
-import Accordion from "./Accordion";
+import { Accordion } from "../results";
 import { useParams } from "react-router-dom";
 import { SurveyType } from "../types";
 

src/routes/survey.route.ts

@@ -8,6 +8,7 @@ router.route("/").get(authCtrl.requireLogin, surveyCtrl.getSurveys);
 router.route("/create").post(authCtrl.requireLogin, surveyCtrl.createSurvey);
 
 router.route("/:surveyId").get(surveyCtrl.getSurveyById);
+
 router
   .route("/:surveyId/edit")
   .get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById)