Commit e23d0af8 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

result 질문 타입별로 보여주기

parent a2418d6c
...@@ -42,7 +42,7 @@ export const Header = () => { ...@@ -42,7 +42,7 @@ export const Header = () => {
</button> </button>
</Link> </Link>
<Link to="/signup"> <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> </button>
</Link> </Link>
......
...@@ -54,7 +54,7 @@ Props) => { ...@@ -54,7 +54,7 @@ Props) => {
selectedType === "dropdown" || selectedType === "dropdown" ||
selectedType === "checkbox" selectedType === "checkbox"
) { ) {
element.content = { content = {
choices: [{ text: "", value: 0 }], choices: [{ text: "", value: 0 }],
}; };
} else if (selectedType === "essay") { } else if (selectedType === "essay") {
...@@ -180,12 +180,7 @@ Props) => { ...@@ -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" 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]) => ( {Array.from(QUESTION_TYPES.entries()).map(([key, value]) => (
<option <option key={key} id={question._id} value={key}>
key={key}
id={question._id}
value={key}
selected={key === element.type}
>
{value} {value}
</option> </option>
))} ))}
......
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import { baseImageUrl } from "../apis";
import { BasicQuestionType } from "../types"; 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 = { type AccordionProps = {
question: BasicQuestionType; question: BasicQuestionType;
}; };
const Accordion = ({ question }: AccordionProps) => { export const Accordion = ({ question }: AccordionProps) => {
const [isOpened, setOpened] = useState<boolean>(false); const [isOpened, setOpened] = useState<boolean>(false);
const [height, setHeight] = useState<string>("0px"); const [height, setHeight] = useState<string>("0px");
const contentElement = useRef<HTMLDivElement>(null); const contentElement = useRef<HTMLDivElement>(null);
...@@ -14,7 +19,27 @@ const Accordion = ({ question }: AccordionProps) => { ...@@ -14,7 +19,27 @@ const Accordion = ({ question }: AccordionProps) => {
setOpened(!isOpened); setOpened(!isOpened);
setHeight(!isOpened ? `${contentElement.current?.scrollHeight}px` : "0px"); 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 ( return (
<div className="p-1"> <div className="p-1">
<div onClick={HandleOpening}> <div onClick={HandleOpening}>
...@@ -31,20 +56,7 @@ const Accordion = ({ question }: AccordionProps) => { ...@@ -31,20 +56,7 @@ const Accordion = ({ question }: AccordionProps) => {
style={{ height: height }} style={{ height: height }}
className="bg-gray-100 overflow-hidden transition-all duration-300" className="bg-gray-100 overflow-hidden transition-all duration-300"
> >
{question.answers && {question.answers && getContent(question)}
(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>
)))}
</div> </div>
</div> </div>
</div> </div>
......
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>
);
};
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>
);
};
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>
);
};
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>
);
};
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>
);
};
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>
);
};
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>
);
};
export { Accordion } from "./Accordion";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { answerApi, surveyApi } from "../apis"; import { answerApi, surveyApi } from "../apis";
import { catchErrors } from "../helpers"; import { catchErrors } from "../helpers";
import Accordion from "./Accordion"; import { Accordion } from "../results";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { SurveyType } from "../types"; import { SurveyType } from "../types";
......
...@@ -8,6 +8,7 @@ router.route("/").get(authCtrl.requireLogin, surveyCtrl.getSurveys); ...@@ -8,6 +8,7 @@ router.route("/").get(authCtrl.requireLogin, surveyCtrl.getSurveys);
router.route("/create").post(authCtrl.requireLogin, surveyCtrl.createSurvey); router.route("/create").post(authCtrl.requireLogin, surveyCtrl.createSurvey);
router.route("/:surveyId").get(surveyCtrl.getSurveyById); router.route("/:surveyId").get(surveyCtrl.getSurveyById);
router router
.route("/:surveyId/edit") .route("/:surveyId/edit")
.get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById) .get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment