Skip to content

GitLab

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

Merge branch 'develop0718' into jiwon0718

parents 8acd2dec c69e04ec
Show whitespace changes
Inline Side-by-side
frontend/src/apis/survey.api.ts
View file @ cc4db4af
......@@ -11,10 +11,12 @@ export const getSurvey = async (surveyId: string) => {
const { data } = await axios.get(`${baseUrl}/surveys/edit/${surveyId}`);
return data;
};
export const getASurvey = async (surveyId: string) => {
const { data } = await axios.get(`${baseUrl}/surveys/edit/${surveyId}`);
export const ansSurvey = async (surveyId: string) => {
const { data } = await axios.get(`${baseUrl}/surveys/${surveyId}`);
return data;
};
//동혁
export const getSurveys = async () => {
const { data } = await axios.get(`${baseUrl}/surveys/`);
......
frontend/src/commons/ACheckbox.tsx
View file @ cc4db4af
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
View file @ cc4db4af
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
View file @ cc4db4af
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 0 → 100644
View file @ cc4db4af
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
View file @ cc4db4af
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
View file @ cc4db4af
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
View file @ cc4db4af
......@@ -7,6 +7,9 @@ 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("/edit/:surveyId")
.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