From 5b9f7c17fe126b7b57436e99afd00dbbdf71128e Mon Sep 17 00:00:00 2001
From: mindongmindong <dcmin123@ajou.ac.kr>
Date: Sun, 12 Nov 2023 23:00:16 +0900
Subject: [PATCH] HomeMake error-handling
---
react-whenMeet/package-lock.json | 1 +
react-whenMeet/package.json | 1 +
react-whenMeet/src/components/Button.js | 6 ++++--
react-whenMeet/src/components/Input.js | 21 ++++++++++++++------
react-whenMeet/src/routes/HomeMake.js | 26 ++++++++++++++++++-------
5 files changed, 40 insertions(+), 15 deletions(-)
diff --git a/react-whenMeet/package-lock.json b/react-whenMeet/package-lock.json
index ecba1ac..aae9676 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 c32d600..83a435d 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 05864f6..c716d32 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 6f4e699..1023ac9 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 1a4ecd7..82c1352 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>
);
--
GitLab