Make HomeMake.js

react-whenMeet/src/components/Button.js

+function Button({text}){
+    return(
+        <button
+        >{text}
+        </button>
+    );
+}
+
+export default Button;
\ No newline at end of file

react-whenMeet/src/components/Input.js

+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

react-whenMeet/src/routes/HomeMake.js

-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>
     );
 }
 

react-whenMeet/src/styles/HomeMake.css

+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%;
+    }
+}