Commit a6d6ca9d authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'yeon' into develope

parents 5412127f b3f9e9f7
...@@ -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 from "react"; import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
// type LoginProps = { // type LoginProps = {
// }; // };
export const Login = () => ( export const Login = () => {
<div className="flex justify-center mt-3"> // interface IUSER {
<div className="text-slate-300 text-xl font-bold"> // email: string;
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3"> // password: string;
이메일 // }
</label>
<input // const [error, setError] = useState("");
className="shadow appearance-none border rounded py-2 px-3 text-gray-70" // const [disabled, setDisabled] = useState(false);
id="email" // const [success, setSuccess] = useState(false);
type="email" // const navigate = useNavigate();
placeholder="이메일을 입력하세요"
/> // function handleChange(event: type) {}
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3"> // function handleSubmit(params: type) {}
비밀번호
</label> // if (success) {
<input // alert("회원가입 되었습니다");
className="shadow appearance-none border rounded py-2 px-3 text-gray-70" // navigate(`../`);
id="username" // }
type="password"
placeholder="비밀번호를 입력하세요" return (
/> <div className="flex justify-center mt-3">
<div className="text-center"> <div className="flex flex-col space-y-4 mt-5 text-xl font-bold">
<button className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"> <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
로그인 이메일
</button> </label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="email"
type="email"
placeholder="이메일을 입력하세요"
/>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
비밀번호
</label>
<input
className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="username"
type="password"
placeholder="비밀번호를 입력하세요"
/>
<div className="text-center">
<button className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3">
로그인
</button>
</div>
</div> </div>
</div> </div>
</div> );
); };
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 = {};
export const SignUp = ({}: SignUpProps) => { export const SignUp = ({}: SignUpProps) => {
const USER = { interface IUSER {
name: "", name: string;
email: "", email: string;
password: "2345", password: string;
password2: string;
}
const [user, setUser] = useState<IUSER>({
name: "user",
email: "user1234@naver.com",
password: "1234",
password2: "1234", password2: "1234",
}; });
const [user, setUser] = useState(USER); const [error, setError] = useState("");
const [error, setError] = useState('') const [disabled, setDisabled] = useState(false);
const [disabled, setDisabled] = useState(false) const [success, setSuccess] = 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/auth/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,10 +62,10 @@ export const SignUp = ({}: SignUpProps) => { ...@@ -56,10 +62,10 @@ export const SignUp = ({}: SignUpProps) => {
return true; return true;
} }
} }
if (success) { if (success) {
alert('회원가입 되었습니다') alert("회원가입 되었습니다");
navigate(`../`) navigate(`../`);
} }
return ( return (
...@@ -111,7 +117,9 @@ export const SignUp = ({}: SignUpProps) => { ...@@ -111,7 +117,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