Skip to content

GitLab

Commit 6702d090 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Qcheckbox, QFile

parent d24ccceb
Hide whitespace changes
Inline Side-by-side
frontend/src/CreateSurveyForm/QCheckbox.tsx
View file @ 6702d090
......@@ -3,14 +3,20 @@ import { CheckboxType } from "./Question";
type Props = {
element: CheckboxType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const QCheckbox = ({ element }: Props) => (
export const QCheckbox = ({ element, QuestionListChange }: Props) => (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
<div className="flex flexgi-row h-16 w-full place-content-between items-center">
<p className="text-xl font-bold ml-6 border-b-2">
<input type="text" placeholder={element.title}></input>
</p>
<input
type="text"
name={element.name}
id="title"
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
></input>
<select
id="Questions"
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor focus:themeColor block w-full mr-3 p-2.5"
......@@ -27,13 +33,15 @@ export const QCheckbox = ({ element }: Props) => (
<option value="Date">날짜</option>
</select>
</div>
<div className="flex ">
<textarea
className="border"
rows={1}
cols={80}
<div className="flex w-full justify-center">
<input
type="text"
name={element.name}
id="comment"
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
></textarea>
onChange={QuestionListChange}
></input>
</div>
<div id="commentarea" className="flex mt-4">
{element.content.choices.map((e: string) => (
......
frontend/src/CreateSurveyForm/QDropdown.tsx
View file @ 6702d090
import React from "react";
import { DropdownType } from "./Question";
type Props = {
element: DropdownType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const QDropdown = ({ element, QuestionListChange }: Props) => (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
<div className="flex flexgi-row h-16 w-full place-content-between items-center">
<input
type="text"
name={element.name}
id="title"
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
></input>
<select
id="Questions"
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor focus:themeColor block w-full mr-3 p-2.5"
>
<option>질문종류</option>
<option value="Essay">주관식</option>
<option value="MultipleChoice">객관식</option>
<option value="Dropdown">드롭다운(객관식)</option>
<option value="CheckBox" selected>
체크박스(객관식)
</option>
<option value="Rating">선형</option>
<option value="Grid">그리드</option>
<option value="Date">날짜</option>
</select>
</div>
<div className="flex w-full justify-center">
<input
type="text"
name={element.name}
id="comment"
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
></input>
</div>
<div id="commentarea" className="flex mt-4">
{element.content.choices.map((e: string) => (
<div>
<input type="checkbox" checked={false}></input>
<input
type="text"
className="mx-2 border-b-2"
placeholder={e}
></input>
</div>
))}
</div>
<div className="flex w-full flex-row justify-end py-2">
<button className="w-1/12">필수</button>
<button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button>
</div>
</div>
);
frontend/src/CreateSurveyForm/QFile.tsx
View file @ 6702d090
import React, { useState } from "react";
import { FileType } from "./Question";
type Props = {
element: FileType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const QFile = ({ 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={element.name}
id="title"
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
></input>
<select
id="Questions"
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" selected>
주관식
</option>
<option value="MultipleChoice">객관식</option>
<option value="Dropdown">드롭다운(객관식)</option>
<option value="CheckBox">체크박스(객관식)</option>
<option value="Rating">선형</option>
<option value="Grid">그리드</option>
<option value="Date">날짜</option>
</select>
</div>
<div className="flex w-full justify-center">
<input
type="text"
name={element.name}
id="comment"
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
></input>
</div>
<div id="commentarea" className="flex mt-4 w-full justify-center">
<input type="file" className=" w-11/12 h-16" disabled></input>
</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>
);
};
frontend/src/CreateSurveyForm/Question.tsx
View file @ 6702d090
......@@ -2,6 +2,8 @@ import React, { useState } from "react";
import { QAssay } from "./QAssay";
import { QCheckbox } from "./QCheckbox";
import { QRadio } from "./QRadio";
import { QDropdown } from "./QDropdown";
import { QFile } from "./QFile";
export interface BasicQuestionType {
type: string;
......@@ -16,17 +18,28 @@ export interface EssayType extends BasicQuestionType {}
export interface RadioType extends BasicQuestionType {
content: {
hasOther: boolean;
choices: any[];
choices: string[];
otherText: string;
};
}
export interface CheckboxType extends BasicQuestionType {
content: {
choices: any[];
choices: string[];
maxCount: number;
};
}
export interface DropdownType extends BasicQuestionType {
content: {
choices: string[];
hasNone: boolean;
};
}
export interface FileType extends BasicQuestionType {
content: {
filename: string;
value: string;
};
}
const EssayQ: EssayType = {
type: "assay",
name: "Question1",
......@@ -44,7 +57,7 @@ const RadioQ: RadioType = {
content: {
hasOther: false,
otherText: "",
choices: ["1", "2", "3"],
choices: ["radio1", "radio2", "radio3"],
},
};
const CheckboxQ: CheckboxType = {
......@@ -54,10 +67,32 @@ const CheckboxQ: CheckboxType = {
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: {
choices: ["ch1", "ch2", "ch3"],
choices: ["check1", "check2", "check3"],
maxCount: 2,
},
};
const DropdownQ: DropdownType = {
type: "dropdown",
name: "Question4",
title: "Question4",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: {
choices: ["drop1", "drop2", "drop3"],
hasNone: false,
},
};
const FileQ: FileType = {
type: "file",
name: "Question5",
title: "Question5",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: {
filename: "",
value: "",
},
};
// const questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
......@@ -65,6 +100,9 @@ export const Question = () => {
const [questionList, setQuestionList] = useState<BasicQuestionType[]>([
EssayQ,
RadioQ,
CheckboxQ,
DropdownQ,
FileQ,
]);
// const [survey, setSurvey] = useState();
......@@ -96,19 +134,29 @@ export const Question = () => {
/>
);
case "checkbox":
return <QCheckbox element={element} />;
return (
<QCheckbox
element={element}
QuestionListChange={QuestionListChange}
/>
);
case "dropdown":
return (
<QDropdown
element={element}
QuestionListChange={QuestionListChange}
/>
);
case "file":
return (
<QFile
element={element}
QuestionListChange={QuestionListChange}
/>
);
default:
break;
}
// if (element.type === "assay") {
// return (
// <QAssay element={element} QuestionListChange={QuestionListChange} />
// );
// } else if (element.type === "radio") {
// return <QRadio element={element} />;
// } else if (element.type === "checkbox") {
// return <QCheckbox element={element} />;
// }
})}
</>
);
......
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