Commit 1b9e1b61 authored by Lee SeoYeon's avatar Lee SeoYeon
Browse files

signup 0701

parent e528b930
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
"webpack-dev-server": "^4.9.2" "webpack-dev-server": "^4.9.2"
}, },
"dependencies": { "dependencies": {
"axios": "^0.27.2",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"cookie-parser": "^1.4.6", "cookie-parser": "^1.4.6",
"react": "^18.2.0", "react": "^18.2.0",
......
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
// import axios from "axios";
type SignUpProps = {}; type SignUpProps = {};
...@@ -7,45 +8,51 @@ export const SignUp = ({}: SignUpProps) => { ...@@ -7,45 +8,51 @@ export const SignUp = ({}: SignUpProps) => {
const USER = { const USER = {
name: "", name: "",
email: "", email: "",
password: "2345", password: "",
password2: "1234", password2: "",
}; };
// interface USER {
// name: "";
// email: "";
// password: "";
// password2: "";
// }
const [user, setUser] = useState(USER); const [user, setUser] = useState(USER);
const [error, setError] = useState('') // const [user, setUser] = useState<USER>();
const [disabled, setDisabled] = useState(false) const [error, setError] = useState("");
const [success, setSuccess] = useState(false) const [disabled, setDisabled] = useState(false);
const [success, setSuccess] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
setDisabled(!(user.name && user.email && user.password && user.password2)) setDisabled(!(user.name && user.email && user.password && user.password2));
}, [user]) }, [user]);
function handleChange(event: React.ChangeEvent<HTMLInputElement>) { function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
const { name, value } = event.target const { id, value } = event.target;
setUser({...user, [name]: value}) setUser({ ...user, [id]: value });
} }
async function handleSubmit(event: React.MouseEvent<HTMLButtonElement>) { async function handleSubmit(event: React.MouseEvent<HTMLButtonElement>) {
event.preventDefault(); event.preventDefault();
try { try {
// console.log('checkPassword:',checkPassword()) console.log("checkPassword:", passwordmatch());
// const passwordMatch = checkPassword()
if (passwordmatch()) { if (passwordmatch()) {
// const res = await userApi.signup(user) // const res = await axios.post("/api/signup", user);
// console.log('서버연결됬나요', res) // console.log("서버연결됬나요", res);
console.log('회원가입') console.log("회원가입");
setSuccess(true) setSuccess(true);
setError('') setError("");
} }
} catch (error) { } catch (error) {
console.log('에러발생') console.log("에러발생");
// catchErrors(error, setError) // catchErrors(error, setError)
} finally { } finally {
// setLoading(false); // setLoading(false);
} }
} }
function passwordmatch() { function passwordmatch() {
if (user.password !== user.password2) { if (user.password !== user.password2) {
alert("비밀번호가 일치하지않습니다"); alert("비밀번호가 일치하지않습니다");
...@@ -56,12 +63,13 @@ export const SignUp = ({}: SignUpProps) => { ...@@ -56,12 +63,13 @@ export const SignUp = ({}: SignUpProps) => {
return true; return true;
} }
} }
if (success) { if (success) {
alert('회원가입 되었습니다') alert("회원가입 되었습니다");
navigate(`../`) navigate(`../`);
} }
// const { name, email, password, password2 } = user;
return ( return (
<div className="flex justify-center mt-3"> <div className="flex justify-center mt-3">
<div className="flex flex-col space-y-4 mt-5 text-xl font-bold"> <div className="flex flex-col space-y-4 mt-5 text-xl font-bold">
...@@ -111,7 +119,9 @@ export const SignUp = ({}: SignUpProps) => { ...@@ -111,7 +119,9 @@ export const SignUp = ({}: SignUpProps) => {
<div className="text-center mt-3"> <div className="text-center mt-3">
<button <button
className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3" className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
type="submit"
onClick={handleSubmit} onClick={handleSubmit}
disabled={disabled}
> >
회원가입 회원가입
</button> </button>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment