Commit 34c9b310 authored by Lee SeoYeon's avatar Lee SeoYeon
Browse files

버튼 크기 조정

parent 6d47b858
......@@ -7,10 +7,10 @@ type Props = {
export const ACheckboxForm = ({ element }: Props) => {
return (
<div className="flex w-full gap-4 justify-around my-3">
<div className="flex w-full gap-2 justify-around my-3">
{element.content.choices.map((choice) => (
<div>
<input className="mr-2" type="checkbox" />
<input className="mr-2 w-4 h-4" type="checkbox" />
<label className="text-lg">{choice.text}</label>
</div>
))}
......
import React from "react";
export const ADateForm = () => {
return (
<div>
<input type="date"></input>
</div>
);
};
......@@ -7,8 +7,8 @@ type Props = {
export const ADropdownForm = ({ element }: Props) => {
return (
<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 ">
<div className="flex flex-col container w-4/5 h-auto mb-3 py-3">
<select className="py-2 w-48 hover:bg-themeColor bg-gray-200 rounded ">
{element.content.choices.map((choice) => (
<option>{choice.text}</option>
))}
......
import React from "react";
import { FileType } from "../types";
type Props = {
element: FileType;
};
export const AFileForm = ({ element }: Props) => {
return (
<div className="flex w-full gap-4 justify-around my-3">
{/* {element.content.choices.map((choice) => (
<div>
<input className="mr-2"></input>
<label className="text-lg">{choice.text}</label>
</div>
))} */}
</div>
);
};
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 { ACheckboxForm } from "./ACheckboxForm";
import { ADateForm } from "./ADateForm";
import { ADropdownForm } from "./ADropdownForm";
import { AEssayForm } from "./AEssayForm";
import { AFileForm } from "./AFileForm";
// import { AMatrixForm } from "./AMatrixForm";
import { ARadioForm } from "./ARadioForm";
import { ARatingForm } from "./ARatingForm";
type PropsType = {
question: BasicQuestionType;
};
export const AQuestion = ({ question }: PropsType) => {
function getContent(question: BasicQuestionType) {
switch (question.type) {
......@@ -20,16 +25,14 @@ export const AQuestion = ({ question }: PropsType) => {
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}
// />
// );
case "file":
return <AFileForm element={question} />;
case "rating":
return <ARatingForm element={question} />;
case "date":
return <ADateForm />;
// case "matrix":
// return <AMatrixForm />;
default:
return <></>;
}
......@@ -38,9 +41,9 @@ export const AQuestion = ({ question }: PropsType) => {
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 className="text-xl font-bold ml-6 w-1/2">{question.title}</div>
</div>
<div className="border w-11/12 my-3">내용</div>
<div className="w-11/12 my-3">{question.comment}</div>
{getContent(question)}
</div>
);
......
......@@ -7,11 +7,11 @@ type Props = {
export const ARadioForm = ({ element }: Props) => {
return (
<div className="flex w-full gap-4 justify-around my-3">
<div className="flex w-full gap-2 justify-around my-3">
{element.content.choices.map((choice) => (
<div>
<input className="mr-2" type="radio"></input>
<label className="text-lg">{choice.value}</label>
<input className="mr-2 w-4 h-4" type="radio"></input>
<label className="text-lg">{choice.text}</label>
</div>
))}
</div>
......
import React from "react";
import { RatingType } from "../types";
type Props = {
element: RatingType;
};
export const ARatingForm = ({ element }: Props) => {
return (
<div className="flex w-full gap-4 justify-around my-3">
{element.content.choices.map((choice) => (
<div>
<input className="mr-2"></input>
<label className="text-lg">{choice.text}</label>
</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