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

AQuestion ui수정중

parent c4dd6b9e
......@@ -49,7 +49,7 @@ export const ACheckbox = ({
// console.log("content:", content);
return (
<div className="flex w-full gap-2 justify-center my-3">
<div className="md:flex gap-2 justify-center my-3">
{element.content.choices.map((choice) => (
<div key={choice.value} className="mx-2">
<input
......@@ -58,7 +58,7 @@ export const ACheckbox = ({
value={choice.text}
onChange={handleChange}
/>
<label className="text-lg">{choice.text}</label>
<label className="md:text-lg text-base">{choice.text}</label>
</div>
))}
</div>
......
......@@ -16,7 +16,7 @@ export const ARadio = ({ element, answer: answerQuestion }: IAnswerProps) => {
console.log(answerQuestion);
};
return (
<div className="flex w-full gap-2 justify-center my-3">
<div className="md:flex gap-2 justify-center my-3">
{element.content.choices.map((choice) => (
<div key={choice.value} className="mx-2">
<input
......@@ -27,7 +27,7 @@ export const ARadio = ({ element, answer: answerQuestion }: IAnswerProps) => {
onChange={handleChange}
value={choice.text}
></input>
<label className="text-lg" id={choice.text}>
<label className="md:text-lg text-base" id={choice.text}>
{choice.text}
</label>
</div>
......
......@@ -9,16 +9,18 @@ type Props = {
export const AQuestion = ({ question, answer }: Props) => {
return (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-4 rounded-lg">
<div className="flex my-1 w-11/12 place-content-between items-center">
<div className="text-xl font-bold">{question.title}</div>
<div className="w-4/5 border-2 border-themeColor m-3 p-4 rounded-lg">
<div className="md:flex w-full flex-row-reverse my-1 justify-between">
{question.isRequired ? (
<div className="text-xs text-red-600">* 필수질문</div>
<div className="text-xs text-red-600 justify-end">* 필수질문</div>
) : (
<></>
)}
<div className="md:text-xl text-base font-bold">{question.title}</div>
</div>
<div className="md:text-base text-sm w-11/12 text-slate-500">
{question.comment}
</div>
<div className="w-11/12 text-slate-500">{question.comment}</div>
{getAnswerElementByType(question, answer)}
</div>
);
......
......@@ -114,8 +114,12 @@ export const AnswerSurvey = () => {
<form onSubmit={handleSubmit}>
<div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center mt-4">
<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>
<p className="font-bold md:text-4xl text-2xl text-center m-2">
{survey.title}
</p>
<p className="font-bold md:text-1xl text-center m-2">
{survey.comment}
</p>
{answers.map((answer) => {
return (
<AQuestion
......
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