result 질문 타입별로 보여주기

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/questions/Question.tsx

@@ -54,7 +54,7 @@ Props) => {
       selectedType === "dropdown" ||
       selectedType === "checkbox"
     ) {
-      element.content = {
+      content = {
         choices: [{ text: "", value: 0 }],
       };
     } else if (selectedType === "essay") {
@@ -180,12 +180,7 @@ Props) => {
           className="w-32 md:w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
         >
           {Array.from(QUESTION_TYPES.entries()).map(([key, value]) => (
-            <option
-              key={key}
-              id={question._id}
-              value={key}
-              selected={key === element.type}
-            >
+            <option key={key} id={question._id} value={key}>
               {value}
             </option>
           ))}

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/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)