Commit da97d437 authored by Lee SeoYeon's avatar Lee SeoYeon
Browse files

0708

parent 6c927ef1
...@@ -15,19 +15,28 @@ export interface EssayType extends BasicQuestionType {} ...@@ -15,19 +15,28 @@ export interface EssayType extends BasicQuestionType {}
export interface RadioType extends BasicQuestionType { export interface RadioType extends BasicQuestionType {
content: { content: {
hasOther: boolean; hasOther: boolean;
choices: string[]; choices: {
value: number;
text: string;
}[];
otherText: string; otherText: string;
}; };
} }
export interface CheckboxType extends BasicQuestionType { export interface CheckboxType extends BasicQuestionType {
content: { content: {
choices: string[]; choices: {
value: number;
text: string;
}[];
maxCount: number; maxCount: number;
}; };
} }
export interface DropdownType extends BasicQuestionType { export interface DropdownType extends BasicQuestionType {
content: { content: {
choices: string[]; choices: {
value: number;
text: string;
}[];
hasNone: boolean; hasNone: boolean;
}; };
} }
...@@ -39,7 +48,7 @@ export interface FileType extends BasicQuestionType { ...@@ -39,7 +48,7 @@ export interface FileType extends BasicQuestionType {
} }
export interface RatingType extends BasicQuestionType { export interface RatingType extends BasicQuestionType {
content: { content: {
rateValues: { choices: {
value: number; value: number;
text: string; text: string;
}[]; }[];
...@@ -65,7 +74,11 @@ const RadioQ: RadioType = { ...@@ -65,7 +74,11 @@ const RadioQ: RadioType = {
content: { content: {
hasOther: false, hasOther: false,
otherText: "", otherText: "",
choices: ["radio1", "radio2", "radio3"], choices: [
{ value: 1, text: "radio1" },
{ value: 2, text: "radio2" },
{ value: 3, text: "radio3" },
],
}, },
}; };
const CheckboxQ: CheckboxType = { const CheckboxQ: CheckboxType = {
...@@ -75,7 +88,11 @@ const CheckboxQ: CheckboxType = { ...@@ -75,7 +88,11 @@ const CheckboxQ: CheckboxType = {
isRequired: false, isRequired: false,
comment: "질문에 대한 설명을 입력해주세요", comment: "질문에 대한 설명을 입력해주세요",
content: { content: {
choices: ["check1", "check2", "check3"], choices: [
{ value: 1, text: "check1" },
{ value: 2, text: "check2" },
{ value: 3, text: "check3" },
],
maxCount: 2, maxCount: 2,
}, },
}; };
...@@ -86,7 +103,11 @@ const DropdownQ: DropdownType = { ...@@ -86,7 +103,11 @@ const DropdownQ: DropdownType = {
isRequired: false, isRequired: false,
comment: "질문에 대한 설명을 입력해주세요", comment: "질문에 대한 설명을 입력해주세요",
content: { content: {
choices: ["drop1", "drop2", "drop3"], choices: [
{ value: 1, text: "drop1" },
{ value: 2, text: "drop2" },
{ value: 3, text: "drop3" },
],
hasNone: false, hasNone: false,
}, },
}; };
...@@ -108,7 +129,7 @@ const RatingQ: RatingType = { ...@@ -108,7 +129,7 @@ const RatingQ: RatingType = {
isRequired: false, isRequired: false,
comment: "질문에 대한 설명을 입력해주세요", comment: "질문에 대한 설명을 입력해주세요",
content: { content: {
rateValues: [ choices: [
{ value: 1, text: "1" }, { value: 1, text: "1" },
{ value: 2, text: "2" }, { value: 2, text: "2" },
{ value: 3, text: "3" }, { value: 3, text: "3" },
......
...@@ -49,7 +49,7 @@ export const QCheckbox = ({ element }: Props) => { ...@@ -49,7 +49,7 @@ export const QCheckbox = ({ element }: Props) => {
></input> ></input>
</div> </div>
<div id="commentarea" className="flex mt-4"> <div id="commentarea" className="flex mt-4">
{element.content.choices.map((e: string) => ( {element.content.choices.map((e: any) => (
<div> <div>
<input type="checkbox" checked={false}></input> <input type="checkbox" checked={false}></input>
<input <input
......
...@@ -47,7 +47,7 @@ export const QDropdown = ({ element }: Props) => { ...@@ -47,7 +47,7 @@ export const QDropdown = ({ element }: Props) => {
></input> ></input>
</div> </div>
<div id="commentarea" className="flex mt-4"> <div id="commentarea" className="flex mt-4">
{element.content.choices.map((e: string) => ( {element.content.choices.map((e: any) => (
<div> <div>
<input type="checkbox" checked={false}></input> <input type="checkbox" checked={false}></input>
<input <input
......
...@@ -46,7 +46,7 @@ export const QRadio = ({ element }: Props) => { ...@@ -46,7 +46,7 @@ export const QRadio = ({ element }: Props) => {
></input> ></input>
</div> </div>
<div className="flex mt-4"> <div className="flex mt-4">
{element.content.choices.map((e: string, index: number) => ( {element.content.choices.map((e: any, index: number) => (
<div> <div>
<input <input
type="radio" type="radio"
......
...@@ -56,7 +56,7 @@ export const QRating = ({ element }: Props) => { ...@@ -56,7 +56,7 @@ export const QRating = ({ element }: Props) => {
size={10} size={10}
placeholder={element.content.minRateDescription} placeholder={element.content.minRateDescription}
></input> ></input>
{element.content.rateValues.map((e) => ( {element.content.choices.map((e) => (
<input <input
name="text" name="text"
id={element._id} id={element._id}
......
...@@ -36,11 +36,9 @@ export const Login = () => { ...@@ -36,11 +36,9 @@ export const Login = () => {
} }
return ( return (
<div className="flex justify-center mt-3"> <div className="flex flex-col items-center mt-5">
<form <div className="text-2xl mt-5">로그인</div>
onSubmit={handleSubmit} <form onSubmit={handleSubmit} className="flex flex-col mt-3 w-80">
className="flex flex-col space-y-4 mt-5 text-xl font-bold"
>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3"> <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
이메일 이메일
</label> </label>
...@@ -75,7 +73,7 @@ export const Login = () => { ...@@ -75,7 +73,7 @@ export const Login = () => {
<button <button
type="submit" type="submit"
disabled={loading ? true : false} disabled={loading ? true : false}
className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3" className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-5"
> >
{loading && ( {loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-white" /> <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-white" />
......
...@@ -67,9 +67,9 @@ export const SignUp = () => { ...@@ -67,9 +67,9 @@ export const SignUp = () => {
} }
return ( return (
<div className="flex flex-col items-center mt-3"> <div className="flex flex-col items-center mt-5">
<div className="text-2xl">회원 가입</div> <div className="text-2xl mt-5">회원가입</div>
<form onSubmit={handleSubmit} className="flex flex-col mt-5 w-80"> <form onSubmit={handleSubmit} className="flex flex-col mt-3 w-80">
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3"> <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
이름 이름
</label> </label>
......
import React from "react"; import React, { InputHTMLAttributes } from "react";
export const SurveyForm = () => ( export const SurveyForm = () => {
<div className="flex flex-col place-items-center"> return (
<div className="flex flex-col container place-items-center mt-4"> <div className="flex flex-col place-items-center">
<form className="font-bold text-4xl text-center m-2">설문지 제목</form> <div className="flex flex-col container place-items-center mt-4">
<textarea <form className="font-bold text-4xl text-center m-2">설문지 제목</form>
className="font-bold text-1xl text-center m-2 resize-none" <textarea
placeholder="설문조사에 대한 설명을 입력해주세요" className="font-bold text-1xl text-center m-2 resize-none"
rows={2} placeholder="설문조사에 대한 설명을 입력해주세요"
cols={60} rows={2}
></textarea> cols={60}
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3"> ></textarea>
<div className="flex flexgi-row h-16 w-full place-content-between items-center"> <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
<form className="text-xl font-bold ml-6 w-1/2">Q1. 첫번째 질문</form> <div className="flex flexgi-row h-16 w-full place-content-between items-center">
<form className="text-xl font-bold ml-6 w-1/2">
Q1. 첫번째 질문
</form>
</div>
<form className="border w-11/12 my-3">설문조사 설명</form>
<input
className="border w-11/12 h-36 my-3"
type="text"
placeholder="설문조사 답변"
></input>
</div> </div>
<form className="border w-11/12 my-3">설문조사 설명</form> <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3">
<input <div className="flex flexgi-row h-16 w-full place-content-between items-center">
className="border w-11/12 h-36 my-3" <form className="text-xl font-bold ml-6 w-1/2">
type="text" Q2. 두번째 질문
placeholder="설문조사 답변" </form>
></input> </div>
</div> <form className="border w-11/12 my-4">설문조사 설명</form>
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3"> <div className="flex flex-row items-center m-3">
<div className="flex flexgi-row h-16 w-full place-content-between items-center"> <div className="mb-4 mx-3">
<form className="text-xl font-bold ml-6 w-1/2">Q1. 첫번째 질문</form> <input
id="default-checkbox"
type="checkbox"
className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label className="ml-2 text-lg font-medium">First checkbox</label>
</div>
<div className="mb-4 mx-3">
<input
id="default-checkbox"
type="checkbox"
className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label className="ml-2 text-lg font-medium">
Second checkbox
</label>
</div>
<div className="mb-4 mx-3">
<input
id="default-checkbox"
type="checkbox"
value=""
className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label className="ml-2 text-lg font-medium">Third checkbox</label>
</div>
<div className="mb-4 mx-4">
<input
id="default-checkbox"
type="checkbox"
value=""
className="w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label className="ml-2 text-lg font-medium">
Fourth checkbox
</label>
</div>
</div>
</div>
<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">
<form className="text-xl font-bold ml-6 w-1/2">
Q3. 세번째 질문
</form>
</div>
<form className="border w-11/12 my-4">설문조사 설명</form>
<div className="flex flex-row items-center m-3">
<div className="flex items-center mb-4 mx-4">
<input
id="default-radio-1"
type="radio"
value=""
name="default-radio"
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label className="ml-2 text-lg">First radio</label>
</div>
<div className="flex items-center mb-4 mx-4">
<input
id="default-radio-1"
type="radio"
value=""
name="default-radio"
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label className="ml-2 text-lg">Second radio</label>
</div>
<div className="flex items-center mb-4 mx-4">
<input
checked
id="default-radio-2"
type="radio"
value=""
name="default-radio"
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label className="ml-2 text-lg">Checked state</label>
</div>
</div>
</div> </div>
<form className="border w-11/12 my-4">설문조사 설명</form> </div>
<input <div>
className="border w-11/12 h-36 my-3" <button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white">
type="text" 제출하기
placeholder="설문조사 답변" </button>
></input>
</div> </div>
</div> </div>
<div> );
<button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white"> };
제출하기
</button>
</div>
</div>
);
...@@ -3,8 +3,8 @@ import { Link } from "react-router-dom"; ...@@ -3,8 +3,8 @@ import { Link } from "react-router-dom";
export const Profile = () => { export const Profile = () => {
return ( return (
<div className="flex justify-center"> <div className="flex flex-col items-center">
<div className=" m-5">나의 설문조사</div> <div className="m-5">나의 설문조사</div>
<div className="flex flex-row space-x-4 mt-5"> <div className="flex flex-row space-x-4 mt-5">
<Link <Link
to="/create" to="/create"
......
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