diff --git a/react-whenMeet/package-lock.json b/react-whenMeet/package-lock.json index ecba1ac2fb3b236f11b3838ab69ee3c662a85d5f..aae9676829fa72cc797c339dda4ce6c0d2294cd8 100644 --- a/react-whenMeet/package-lock.json +++ b/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", diff --git a/react-whenMeet/package.json b/react-whenMeet/package.json index c32d6002219420aa8735c75873b9433e1ea5f212..83a435dc1b380de15ced8a2311592d5c0cc322de 100644 --- a/react-whenMeet/package.json +++ b/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", diff --git a/react-whenMeet/src/components/Button.js b/react-whenMeet/src/components/Button.js index 05864f628a39d154d0e21b619ae82f6a39b7a0cc..c716d3293aee7e1c416f20138b60491b7c2d843b 100644 --- a/react-whenMeet/src/components/Button.js +++ b/react-whenMeet/src/components/Button.js @@ -1,7 +1,9 @@ -function Button({text}){ +function Button({type,text}){ return( <button - >{text} + type = {type} + > + {text} </button> ); } diff --git a/react-whenMeet/src/components/Input.js b/react-whenMeet/src/components/Input.js index 6f4e69994c7dd225b9fed5b9d575fa391a6dc692..1023ac9b83af4081874a17ce6f026c9e92488ec0 100644 --- a/react-whenMeet/src/components/Input.js +++ b/react-whenMeet/src/components/Input.js @@ -1,12 +1,21 @@ -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 diff --git a/react-whenMeet/src/routes/HomeMake.js b/react-whenMeet/src/routes/HomeMake.js index 1a4ecd7bb00a39d6cdb236ede6ba38f6aa7eea1d..82c13526b6b3f52c5abfe88b739868bb6d2ff029 100644 --- a/react-whenMeet/src/routes/HomeMake.js +++ b/react-whenMeet/src/routes/HomeMake.js @@ -1,12 +1,13 @@ 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> );