Commit 295f91db authored by Lee SeoYeon's avatar Lee SeoYeon
Browse files

Merge remote-tracking branch 'origin/develope' into yeon

parents 1b9e1b61 d24ccceb
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 } from "./Question";
type Props = {
element: EssayType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const QAssay = ({ 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 className="border 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>
);
};
import React from "react";
import { CheckboxType } from "./Question";
type Props = {
element: CheckboxType;
};
export const QCheckbox = ({ 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="text-xl font-bold ml-6 border-b-2">
<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>
<button className="w-1/12">삭제</button>
</div>
</div>
);
import React from "react";
import { RadioType } from "./Question";
type Props = {
element: RadioType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const QRadio = ({ 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 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" 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 w-full justify-center">
<input
type="text"
name={element.name}
id="comment"
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
></input>
</div>
<div 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"
name="content"
className="mx-2 border-b-2"
placeholder={e}
onChange={QuestionListChange}
></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>
<button className="w-1/12">삭제</button>
</div>
</div>
);
import React, { useState } from "react";
import { QAssay } from "./QAssay";
import { QCheckbox } from "./QCheckbox";
import { QRadio } from "./QRadio";
export interface BasicQuestionType {
type: string;
name: string;
title: string;
isRequired: boolean;
comment: string;
content: any;
[key: string]: string | number | boolean | any;
}
export interface EssayType extends BasicQuestionType {}
export interface RadioType extends BasicQuestionType {
content: {
hasOther: boolean;
choices: any[];
otherText: string;
};
}
export interface CheckboxType extends BasicQuestionType {
content: {
choices: any[];
maxCount: number;
};
}
const EssayQ: EssayType = {
type: "assay",
name: "Question1",
title: "Question1",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: null,
};
const RadioQ: RadioType = {
type: "radio",
name: "Question2",
title: "Question2",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: {
hasOther: false,
otherText: "",
choices: ["1", "2", "3"],
},
};
const CheckboxQ: CheckboxType = {
type: "checkbox",
name: "Question3",
title: "Question3",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: {
choices: ["ch1", "ch2", "ch3"],
maxCount: 2,
},
};
// const questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
export const Question = () => {
const [questionList, setQuestionList] = useState<BasicQuestionType[]>([
EssayQ,
RadioQ,
]);
// const [survey, setSurvey] = useState();
function QuestionListChange(e: React.ChangeEvent<HTMLInputElement>): void {
const newList: BasicQuestionType[] = [...questionList];
const targetId: any = e.target.id;
const obj: any = newList.find((a) => a.name === e.target.name);
obj[targetId] = e.target.value;
setQuestionList(newList);
}
return (
<>
{console.log(questionList)}
{questionList.map((element) => {
switch (element.type) {
case "assay":
return (
<QAssay
element={element}
QuestionListChange={QuestionListChange}
/>
);
case "radio":
return (
<QRadio
element={element}
QuestionListChange={QuestionListChange}
/>
);
case "checkbox":
return <QCheckbox element={element} />;
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} />;
// }
})}
</>
);
};
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