Skip to content

GitLab

Commit c698bfe3 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'seo_yeon' into develop0714

parents 854b3007 73188bcd
Hide whitespace changes
Inline Side-by-side
frontend/src/commons/ACheckbox.tsx 0 → 100644
View file @ c698bfe3
import React from "react";
export const ACheckboxForm = () => {
return (
<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">checkbox</form>
</div>
<form className="border w-11/12 my-4">설문조사 설명</form>
<div className="flex flex-row items-center m-3">
<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"
/>
<input className="ml-2 text-lg font-medium">First checkbox</input>
</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>
);
};
frontend/src/commons/ADropdown.tsx 0 → 100644
View file @ c698bfe3
import React from "react";
export const ADropdownForm = () => {
return (
<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 items-center">
<form className="text-xl font-bold ml-6 w-1/2">dropdown</form>
</div>
<form className="border w-11/12 my-3">설문조사 설명</form>
<select className="py-2 hover:bg-themeColor bg-gray-200 rounded ">
<option selected>choose answer</option>
<option>first</option>
<option>second</option>
</select>
</div>
);
};
frontend/src/commons/AEssayForm.tsx 0 → 100644
View file @ c698bfe3
import React from "react";
export const AEssayForm = () => {
return (
<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">input</form>
</div>
<form className="border w-11/12 my-3">설문조사 설명</form>
<input className="border w-11/12 h-36 my-3" type="text"></input>
</div>
);
};
frontend/src/commons/ARadioForm.tsx 0 → 100644
View file @ c698bfe3
import React from "react";
import { RadioType } from "../types";
// type Props = {
// element: RadioType;
// };
export const ARadioForm = () => {
return (
<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">radio</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>
);
};
frontend/src/commons/SurveyForm.tsx
View file @ c698bfe3
import React, { InputHTMLAttributes } from "react"; import React, { InputHTMLAttributes } from "react";
import { ACheckboxForm } from "./ACheckbox";
import { ADropdownForm } from "./ADropdown";
import { AEssayForm } from "./AEssayForm";
import { ARadioForm } from "./ARadioForm";
export const SurveyForm = () => { export const SurveyForm = () => {
return ( return (
...@@ -11,113 +15,15 @@ export const SurveyForm = () => { ...@@ -11,113 +15,15 @@ export const SurveyForm = () => {
rows={2} rows={2}
cols={60} cols={60}
></textarea> ></textarea>
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3"> {/* <ACheckboxForm></ACheckboxForm> */}
<div className="flex flexgi-row h-16 w-full place-content-between items-center"> <ADropdownForm></ADropdownForm>
<form className="text-xl font-bold ml-6 w-1/2"> <AEssayForm></AEssayForm>
Q1. 첫번째 질문 <ARadioForm></ARadioForm>
</form> <div>
</div> <button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white">
<form className="border w-11/12 my-3">설문조사 설명</form> 제출하기
<input </button>
className="border w-11/12 h-36 my-3"
type="text"
placeholder="설문조사 답변"
></input>
</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">
Q2. 두번째 질문
</form>
</div>
<form className="border w-11/12 my-4">설문조사 설명</form>
<div className="flex flex-row items-center m-3">
<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">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>
<div>
<button className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white">
제출하기
</button>
</div> </div>
</div> </div>
); );
......
frontend/src/home/Home.tsx
View file @ c698bfe3
import React from "react"; import React, { FormEvent } from "react";
import { Link } from "react-router-dom"; import { useAuth } from "../auth/auth.context";
export const Home = () => ( export const Home = () => {
<div className="flex flex-col place-items-center"> const { user } = useAuth();
<div className="justify-end text-center text-3xl text-black h-16 mt-12">
가장 쉽게 설문지를 만드세요! function clickHome(e: React.MouseEvent<HTMLButtonElement>) {
</div> e.preventDefault();
<div className="flex flex-col place-items-center container"> if (!user.isLoggedIn) {
<div> console.log("버튼");
<Link location.href = "/login";
to="/surveys/create" } else {
className="flex h-14 w-28 items-center border-2 border-themeColor font-bold text-black bg-gray-200 hover:bg-themeColor rounded-lg " location.href = "/profile";
> }
<div className="text-center w-28 font-bold text-black place-items-center"> }
return (
<div className="flex flex-col place-items-center">
<div className="justify-end text-center text-3xl text-black h-16 mt-12">
가장 쉽게 설문지를 만드세요!
</div>
<div className="flex flex-col place-items-center container">
<div className="flex h-14 w-28 items-center border-2 border-themeColor font-bold text-black bg-gray-200 hover:bg-themeColor rounded-lg ">
<button
type="button"
className="text-center h-full w-28 font-bold text-black place-items-center"
onClick={clickHome}
>
+ +
</div> </button>
</Link> </div>
<p className="text-center text-xl text-black mt-3">Create now!</p>
</div>
<div className="flex justify-center">
<img
src="https://3hbgf23vu0wr11wkpae5igwe-wpengine.netdna-ssl.com/wp-content/uploads/2021/04/SurveyExample_v3.jpg"
className="object-scale-down justify-center"
/>
</div> </div>
<p className="text-center text-xl text-black">Create now!</p>
</div>
<div className="flex justify-center">
<img
src="https://3hbgf23vu0wr11wkpae5igwe-wpengine.netdna-ssl.com/wp-content/uploads/2021/04/SurveyExample_v3.jpg"
className="object-scale-down justify-center"
/>
</div> </div>
</div> );
); };
frontend/src/questions/index.tsx
View file @ c698bfe3
export { Question } from "./Question"; //export { Question } from "./Question";
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