Skip to content

GitLab

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

Merge branch 'develop0718' into jiwon0718

parents 8acd2dec c69e04ec
Hide 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) => { ...@@ -11,10 +11,12 @@ export const getSurvey = async (surveyId: string) => {
const { data } = await axios.get(`${baseUrl}/surveys/edit/${surveyId}`); const { data } = await axios.get(`${baseUrl}/surveys/edit/${surveyId}`);
return data; 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; return data;
}; };
//동혁 //동혁
export const getSurveys = async () => { export const getSurveys = async () => {
const { data } = await axios.get(`${baseUrl}/surveys/`); 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 ( 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 w-full gap-4 justify-around my-3">
<div className="flex flexgi-row h-16 w-full place-content-between items-center"> {element.content.choices.map((choice) => (
<form className="text-xl font-bold ml-6 w-1/2">checkbox</form> <div>
</div> <input className="mr-2" type="checkbox" />
<form className="border w-11/12 my-4">설문조사 설명</form> <label className="text-lg">{choice.text}</label>
<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>
</div> ))}
</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 ( 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 flex-col container w-4/5 h-auto 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>
<select className="py-2 hover:bg-themeColor bg-gray-200 rounded "> <select className="py-2 hover:bg-themeColor bg-gray-200 rounded ">
<option selected>choose answer</option> {element.content.choices.map((choice) => (
<option>first</option> <option>{choice.text}</option>
<option>second</option> ))}
</select> </select>
</div> </div>
); );
......
frontend/src/commons/AEssayForm.tsx
View file @ cc4db4af
import React from "react"; import React from "react";
import { EssayType } from "../types";
export const AEssayForm = () => { type Props = {
element: EssayType;
};
export const AEssayForm = ({ element }: Props) => {
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 mt-4 w-full justify-center">
<div className="flex flexgi-row h-16 w-full place-content-between items-center"> <input className="border w-11/12 h-36 my-3"></input>
<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> </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 React from "react";
import { RadioType } from "../types"; import { RadioType } from "../types";
// type Props = { type Props = {
// element: RadioType; element: RadioType;
// }; };
export const ARadioForm = () => { export const ARadioForm = ({ element }: Props) => {
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 w-full gap-4 justify-around my-3">
<div className="flex flexgi-row h-16 w-full place-content-between items-center"> {element.content.choices.map((choice) => (
<form className="text-xl font-bold ml-6 w-1/2">radio</form> <div>
</div> <input className="mr-2" type="radio"></input>
<form className="border w-11/12 my-4">설문조사 설명</form> <label className="text-lg">{choice.value}</label>
<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>
</div> ))}
</div> </div>
); );
}; };
frontend/src/commons/SurveyForm.tsx
View file @ cc4db4af
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { surveyApi } from "../apis"; import { surveyApi } from "../apis";
import { Question } from "../questions"; import { catchErrors } from "../helpers";
import { SurveyType } from "../types"; import { SurveyType } from "../types";
import { ACheckboxForm } from "./ACheckbox"; import { AQuestion } from "./AQuestion";
import { ADropdownForm } from "./ADropdown";
import { AEssayForm } from "./AEssayForm";
import { ARadioForm } from "./ARadioForm"; import { ARadioForm } from "./ARadioForm";
export const SurveyForm = () => { export const SurveyForm = () => {
let { surveyId } = useParams<{ surveyId: string }>(); let { surveyId } = useParams<{ surveyId: string }>();
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [survey, setSurvey] = useState<SurveyType>({ const [survey, setSurvey] = useState<SurveyType>({
_id: surveyId, _id: surveyId,
user: {}, user: {},
...@@ -17,36 +18,37 @@ export const SurveyForm = () => { ...@@ -17,36 +18,37 @@ export const SurveyForm = () => {
comment: "", comment: "",
questions: [], questions: [],
}); });
useEffect(() => { useEffect(() => {
getSurvey(); ansSurvey();
}, [surveyId]); }, [surveyId]);
async function getSurvey() {
async function ansSurvey() {
try { try {
if (surveyId) { if (surveyId) {
const thisSurvey: SurveyType = await surveyApi.getASurvey(surveyId); const answersurvey: SurveyType = await surveyApi.ansSurvey(surveyId);
console.log(thisSurvey); console.log(answersurvey);
setSurvey(thisSurvey); setSurvey(answersurvey);
// setSuccess(true); setSuccess(true);
// setError(""); setError("");
} else { } else {
// setLoading(true); setLoading(true);
} }
} catch (error) { } catch (error) {
// catchErrors(error, setError); catchErrors(error, setError);
} finally { } finally {
// setLoading(false); setLoading(false);
} }
} }
return ( return (
<div className="flex flex-col place-items-center"> <div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center mt-4"> <div className="flex flex-col container place-items-center mt-4">
<form className="font-bold text-4xl text-center m-2">설문지 제목</form> <p className="font-bold text-4xl text-center m-2">{survey.title}</p>
<textarea <p className="font-bold text-1xl text-center m-2">{survey.comment}</p>
className="font-bold text-1xl text-center m-2 resize-none" {survey.questions.map((question) => {
placeholder="설문조사에 대한 설명을 입력해주세요" return <AQuestion question={question}></AQuestion>;
rows={2} })}
cols={60}
></textarea>
<div> <div>
<button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white"> <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); ...@@ -7,6 +7,9 @@ router.route("/").get(authCtrl.requireLogin, surveyCtrl.getSurveys);
router.route("/:surveyId").get(surveyCtrl.getSurveyById); router.route("/:surveyId").get(surveyCtrl.getSurveyById);
router.route("/create").post(authCtrl.requireLogin, surveyCtrl.createSurvey); router.route("/create").post(authCtrl.requireLogin, surveyCtrl.createSurvey);
router
.route("/:surveyId")
.get(surveyCtrl.getSurveyById);
router router
.route("/edit/:surveyId") .route("/edit/:surveyId")
.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