Commit 8b54a1b3 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

QRating

parent 551f6358
......@@ -38,8 +38,10 @@ export interface FileType extends BasicQuestionType {
}
export interface RatingType extends BasicQuestionType {
content: {
rateMin: number;
rateMax: number;
rateValues: {
value: number;
text: string;
}[];
minRateDescription: string;
maxRateDescription: string;
};
......@@ -105,8 +107,11 @@ const RatingQ: RatingType = {
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: {
rateMin: 0,
rateMax: 10,
rateValues: [
{ value: 1, text: "1" },
{ value: 2, text: "2" },
{ value: 3, text: "3" },
],
minRateDescription: "가장 낮음",
maxRateDescription: "가장 높음",
},
......
import React from "react";
import { RatingType } from "./CreateSurveyFormPage";
type Props = {
element: RatingType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
// deleteValue: (e: React.MouseEvent<HTMLButtonElement>) => void;
};
export const QRating = ({ element, QuestionListChange }: Props) => {
return (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
<div className="flex h-16 w-full place-content-between items-center">
<input
type="text"
name="title"
id={element.id}
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
></input>
<select
id={element.id}
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
>
<option>질문종류</option>
<option value="essay">주관식</option>
<option value="radio">객관식</option>
<option value="dropdown">드롭다운(객관식)</option>
<option value="checkbox">체크박스(객관식)</option>
<option value="file">파일업로드</option>
<option value="rating" selected>
선형
</option>
<option value="grid">그리드</option>
<option value="date">날짜</option>
</select>
</div>
<div className="flex w-full justify-center">
<input
type="text"
name="comment"
id={element.id}
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
></input>
</div>
<div className="flex place-content-between items-center p-5">
<input
name="minRateDescription"
id={element.id}
className="border-b-2 text-center"
size={10}
placeholder={element.content.minRateDescription}
></input>
{element.content.rateValues.map((e) => (
<input
name="text"
id={element.id}
type="text"
className="border border-black rounded-full py-1 m-2 text-center"
size={1}
placeholder={e.text}
></input>
))}
<input
name="maxRateDescription"
id={element.id}
className="border-b-2 text-center"
size={10}
placeholder={element.content.maxRateDescription}
></input>
</div>
<div>
<button
// type="button"
name="rateValues"
id={element.id}
className="border border-red-500 rounded mx-2 px-2"
// onClick={deleteValue}
>
삭제
</button>
<button className="border border-blue-500 rounded mx-2 px-2">
추가
</button>
</div>
<div className="flex w-full justify-end py-2">
<button className="w-1/12">필수</button>
<button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button>
</div>
</div>
);
};
......@@ -5,6 +5,7 @@ import { QCheckbox } from "./QCheckbox";
import { QRadio } from "./QRadio";
import { QDropdown } from "./QDropdown";
import { QFile } from "./QFile";
import { QRating } from "./QRating";
type Props = {
questionList: BasicQuestionType[];
......@@ -57,7 +58,13 @@ export const Question = ({
QuestionListChange={QuestionListChange}
/>
);
case "rating":
return (
<QRating
element={element}
QuestionListChange={QuestionListChange}
/>
);
default:
break;
}
......
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