Commit 5921fbdd authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

CreateSurveyFormPage UI, Question Component

parent d6f76734
import React from "react";
import { Question } from "./Question";
interface BasicQuestionType {
type: string;
name: string;
title: string;
isRequired: boolean;
}
interface EssayType extends BasicQuestionType {}
let EssayQ: EssayType = {
type: "comment",
name: "Question1",
title: "제목을 입력하세요",
isRequired: false,
};
interface MultiChoiceType extends BasicQuestionType {
hasOther: boolean;
choices: any;
otherText: string;
}
export const CreateSurveyForm = () => (
<div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center">
<input
type="text"
className="font-bold text-4xl text-center m-2 border-b-2"
placeholder="설문지 제목"
></input>
<textarea
className="font-bold text-1xl text-center m-2 resize-none"
placeholder="설문조사에 대한 설명을 입력해주세요"
rows={2}
cols={60}
></textarea>
</div>
<Question />
<div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
질문 추가 +
</div>
</div>
);
import React, { useState } from "react";
import { EssayType, BasicQuestionType } from "./Question";
type Props = {
element: EssayType;
questionList: BasicQuestionType[];
};
export const Q_Assay = ({ element, questionList }: Props) => {
console.log(questionList);
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 flexgi-row h-16 w-full place-content-between items-center">
<p className="text-xl font-bold w-1/2 ml-6">
<input type="text" placeholder={element.title}></input>
</p>
<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" 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 ">
<textarea
className="border"
rows={1}
cols={80}
placeholder="질문에 대한 설명을 입력해주세요"
></textarea>
</div>
<div id="commentarea" className="flex border mt-4">
<textarea className="resize-none" cols={80} readOnly></textarea>
</div>
<div className="flex w-full flex-row justify-end py-2">
<button className="w-1/12">필수</button>
<button className="w-1/12">삭제</button>
</div>
</div>
);
};
import React from "react";
import { CheckboxType } from "./Question";
type Props = {
element: CheckboxType;
};
export const Q_Checkbox = ({ element }: 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="underline underline-offset-auto text-xl font-bold w-1/2 ml-6">
<input type="text" placeholder={element.title}></input>
</p>
<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 ">
<textarea
className="border"
rows={1}
cols={80}
placeholder="질문에 대한 설명을 입력해주세요"
></textarea>
</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>
</div>
</div>
);
import React from "react";
import { RadioType } from "./Question";
type Props = {
element: RadioType;
};
export const Q_Radio = ({ element }: 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="underline underline-offset-auto text-xl font-bold w-1/2 ml-6">
<input type="text" placeholder={element.title}></input>
</p>
<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" selected>
객관식
</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 ">
<textarea
className="border"
rows={1}
cols={80}
placeholder="질문에 대한 설명을 입력해주세요"
></textarea>
</div>
<div id="commentarea" className="flex mt-4">
{element.content.choices.map((e: string) => (
<div>
<input type="radio" id={e} name="choice" value={e} checked={false} />
<input
type="text"
className="mx-2 border-b-2"
placeholder={e}
></input>
<button></button>
</div>
))}
{/* <button className="border rounded-full border-green-500 border-4 text-green-500 font-bold px-2">
+
</button> */}
</div>
<div className="flex w-full flex-row justify-end py-2">
<button className="w-1/12">필수</button>
<button className="w-1/12">삭제</button>
</div>
</div>
);
import React from "react";
import { Q_Assay } from "./Q_Assay";
import { Q_Checkbox } from "./Q_Checkbox";
import { Q_Radio } from "./Q_Radio";
export interface BasicQuestionType {
type: string;
name: string;
title: string;
isRequired: boolean;
content: any;
}
export interface EssayType extends BasicQuestionType {}
let EssayQ: EssayType = {
type: "assay",
name: "Question1",
title: "Question1",
isRequired: false,
content: null,
};
export interface RadioType extends BasicQuestionType {
content: {
hasOther: boolean;
choices: any;
otherText: string;
};
}
let RadioQ: RadioType = {
type: "radio",
name: "Question2",
title: "Question2",
isRequired: false,
content: {
hasOther: false,
otherText: "",
choices: ["1", "2", "3"],
},
};
export interface CheckboxType extends BasicQuestionType {
content: {
choices: any;
maxCount: number;
};
}
let CheckboxQ: CheckboxType = {
type: "checkbox",
name: "Question3",
title: "Question3",
isRequired: false,
content: {
choices: ["ch1", "ch2", "ch3"],
maxCount: 2,
},
};
let questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
export const Question = () => (
<>
{questionList.map((element) => {
if (element.type === "assay") {
return <Q_Assay questionList={questionList} element={element} />;
} else if (element.type === "radio") {
return <Q_Radio element={element} />;
} else if (element.type === "checkbox") {
return <Q_Checkbox element={element} />;
}
})}
</>
);
export { CreateSurveyForm } from "./CreateSurveyFormPage";
export { Question } from "./Question";
......@@ -2,7 +2,8 @@ import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import App from "./App";
import { Login, SignUp } from "./auth";
import { CreateSurveyForm, SurveyForm } from "./commons";
import { SurveyForm } from "./commons";
import { CreateSurveyForm } from "./CreateSurveyForm";
import { Home } from "./home";
export const SurveyRouter = () => {
......
import React from "react";
export const CreateSurveyForm = () => (
<div className="flex flex-col place-items-center">
<div className="flex flex-col container h-1/2 place-items-center">
<p className="font-bold text-4xl w-2/3">
Survey Title
</p>
<p className="text-3xl w-2/3">
Comment
</p>
</div>
<div className="flex flex-col container w-4/5 h-auto border-2 border-black items-center">
<div className="flex flexgi-row h-16 w-full place-content-between items-center">
<p className="underline underline-offset-auto text-xl font-bold w-1/2 ml-6">
질문
</p>
<button className="text-center flex border-2 border-black mr-6 place-content-end">
질문종류▽
</button>
</div>
<div className="flex border-2 border-black h-96 w-4/5 mt-4">
설문내용 뜨는창
</div>
<div className="flex w-full flex-row justify-end">
<button className="w-1/12">필수</button>
<button className="w-1/12">삭제</button>
</div>
</div>
<div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
질문 추가 +
</div>
</div>);
export { CreateSurveyForm } from "./CreateSurveyForm";
export { Header } from "./Header";
export { SurveyForm } from "./SurveyForm";
\ No newline at end of file
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