HomeMake error-handling

react-whenMeet/package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.18.0",

react-whenMeet/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",

react-whenMeet/src/components/Button.js

-function Button({text}){
+function Button({type,text}){
     return(
         <button
-        >{text}
+        type = {type}
+        >
+            {text}
         </button>
     );
 }

react-whenMeet/src/components/Input.js

-function Input({type,value,onChange,placeholder}){
-    return(
+import PropTypes from "prop-types";
+
+function Input({ type, value, onChange, placeholder }) {
+    return (
         <input
-        type={type}
-        placeholder={placeholder}
-        onChange={onChange}
-        value={value}
+            type={type}
+            placeholder={placeholder}
+            onChange={onChange}
+            value={value}
         />
     );
 }
 
+Input.propTypes = {
+    type: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onChange: PropTypes.func.isRequired,
+    placeholder: PropTypes.string,
+}
+
 export default Input;
\ No newline at end of file

react-whenMeet/src/routes/HomeMake.js

 import Input from "../components/Input";
 import Button from "../components/Button";
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import "../styles/HomeMake.css";
 
 function HomeMake() {
     const [title, setTitle] = useState("");
     const [password,setPassword] = useState("");
+    const navigate = useNavigate();
 
     const onTitleChange = (event) => {
         setTitle(event.target.value);
@@ -14,10 +15,22 @@ function HomeMake() {
     const onPasswordChange = (event) => {
         setPassword(event.target.value);
     }
+    const handleSubmit = (event)=>{
+        event.preventDefault();
+        if(title === ""){
+            return alert("Title을 입력하세요");;
+        }
+        else if(password === ""){
+            return alert("Password를 입력하세요");;
+        }
+        else{
+            navigate("/MeetingInfo");
+        }
+    }
 
     return (
         <div className="center-container">
-            <form>
+            <form onSubmit={handleSubmit}>
             <h1>When we meet?</h1>
                 <Input
                     type="text"
@@ -33,11 +46,10 @@ function HomeMake() {
                     placeholder="관리용 Password"
                 />
                 <br/>
-                <Link to="/MeetingInfo">
-                    <Button
-                        text="시작하기"
-                    />
-                </Link>
+                <Button
+                    type="submit"
+                    text="시작하기"
+                />
             </form>
         </div>
     );