Skip to content

GitLab

Commit f067e7f1 authored by Lee SeoYeon's avatar Lee SeoYeon
Browse files

설문조사 유형 답변 보이기

parent eeb9a28a
Show whitespace changes
Inline Side-by-side
frontend/src/commons/ACheckbox.tsx
View file @ f067e7f1
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 @ f067e7f1
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 @ f067e7f1
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 @ f067e7f1
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 @ f067e7f1
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>
); );
}; };
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