From 623fa84750d3eb9fc4197bded721c52921c435da Mon Sep 17 00:00:00 2001
From: mindongmindong <dcmin123@ajou.ac.kr>
Date: Sun, 12 Nov 2023 22:12:48 +0900
Subject: [PATCH] Make HomeMake.js
---
react-whenMeet/src/components/Button.js | 9 ++++
react-whenMeet/src/components/Input.js | 12 +++++
react-whenMeet/src/routes/HomeMake.js | 45 +++++++++++++++--
react-whenMeet/src/styles/HomeMake.css | 64 +++++++++++++++++++++++++
4 files changed, 127 insertions(+), 3 deletions(-)
create mode 100644 react-whenMeet/src/components/Button.js
create mode 100644 react-whenMeet/src/components/Input.js
create mode 100644 react-whenMeet/src/styles/HomeMake.css
diff --git a/react-whenMeet/src/components/Button.js b/react-whenMeet/src/components/Button.js
new file mode 100644
index 0000000..05864f6
--- /dev/null
+++ b/react-whenMeet/src/components/Button.js
@@ -0,0 +1,9 @@
+function Button({text}){
+ return(
+ <button
+ >{text}
+ </button>
+ );
+}
+
+export default Button;
\ No newline at end of file
diff --git a/react-whenMeet/src/components/Input.js b/react-whenMeet/src/components/Input.js
new file mode 100644
index 0000000..6f4e699
--- /dev/null
+++ b/react-whenMeet/src/components/Input.js
@@ -0,0 +1,12 @@
+function Input({type,value,onChange,placeholder}){
+ return(
+ <input
+ type={type}
+ placeholder={placeholder}
+ onChange={onChange}
+ value={value}
+ />
+ );
+}
+
+export default Input;
\ No newline at end of file
diff --git a/react-whenMeet/src/routes/HomeMake.js b/react-whenMeet/src/routes/HomeMake.js
index 40b1c0c..1a4ecd7 100644
--- a/react-whenMeet/src/routes/HomeMake.js
+++ b/react-whenMeet/src/routes/HomeMake.js
@@ -1,6 +1,45 @@
-function HomeMake(){
- return(
- <h1>HomeMake</h1>
+import Input from "../components/Input";
+import Button from "../components/Button";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import "../styles/HomeMake.css";
+
+function HomeMake() {
+ const [title, setTitle] = useState("");
+ const [password,setPassword] = useState("");
+
+ const onTitleChange = (event) => {
+ setTitle(event.target.value);
+ }
+ const onPasswordChange = (event) => {
+ setPassword(event.target.value);
+ }
+
+ return (
+ <div className="center-container">
+ <form>
+ <h1>When we meet?</h1>
+ <Input
+ type="text"
+ value={title}
+ onChange={onTitleChange}
+ placeholder="약속 Title"
+ />
+ <br />
+ <Input
+ type="text"
+ value={password}
+ onChange={onPasswordChange}
+ placeholder="관리용 Password"
+ />
+ <br/>
+ <Link to="/MeetingInfo">
+ <Button
+ text="시작하기"
+ />
+ </Link>
+ </form>
+ </div>
);
}
diff --git a/react-whenMeet/src/styles/HomeMake.css b/react-whenMeet/src/styles/HomeMake.css
new file mode 100644
index 0000000..afa0773
--- /dev/null
+++ b/react-whenMeet/src/styles/HomeMake.css
@@ -0,0 +1,64 @@
+body {
+ background-color: #3CB371; /* Set the background color of the entire page */
+ margin: 0;
+ padding: 0;
+}
+
+.center-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+
+form {
+ width: 30%;
+ padding: 20px;
+ background-color: #f4f4f4;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ text-align: center;
+}
+
+h1 {
+ margin-bottom: 20px;
+ color: #333333;
+ font-size: 24px;
+ font-family: 'Abril Fatface', cursive;
+}
+
+input {
+ width: 100%;
+ padding: 10px;
+ margin: 8px 0;
+ box-sizing: border-box;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+button {
+ width: 100%;
+ padding: 10px;
+ margin-top: 16px;
+ background-color: #3498db;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #2980b9;
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+ form {
+ width: 80%;
+ }
+}
+@media (max-width: 576px) {
+ form {
+ width: 90%;
+ }
+}
--
GitLab