Skip to content

GitLab

Commit 7959b787 authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

homeguest, login, signup UI

parent 320e5438
Show whitespace changes
Inline Side-by-side
client/src/components/Login.js
View file @ 7959b787
import { useEffect, useState } from "react";
const INIT_USER = {
id: "",
password: "",
};
const Login = () => { const Login = () => {
// const { error, loading, login } = useAuth();
const [user, setUser] = useState(INIT_USER);
const [disabled, setDisabled] = useState(true);
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
useEffect(() => {
const isUser = Object.values(user).every((el) => Boolean(el));
isUser ? setDisabled(false) : setDisabled(true);
}, [user]);
function handleChange(event) {
const { name, value } = event.target;
setUser({ ...user, [name]: value });
console.log(user);
}
async function handleSubmit() {
try {
// setLoading(true);
// setError("");
// const success = await login(user.email, user.password);
console.log(user);
setSuccess(success);
} catch (error) {
// catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
const { id, password } = user;
return ( return (
<div className="modal-content">
<form onSubmit={handleSubmit}>
<div className="modal-header">
<h5 className="modal-title" id="loginModalLabel">
로그인
</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
<div>
<label>아이디</label>
<input
className="form-control"
id="id"
type="text"
name="id"
placeholder="아이디를 입력하세요"
value={id}
onChange={handleChange}
/>
</div>
<div> <div>
Login Component 입니다. <label>비밀번호</label>
<input
className="form-control"
id="password"
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
value={password}
onChange={handleChange}
/>
</div>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary" disabled={disabled}>
로그인
</button>
</div>
</form>
</div> </div>
) );
}; };
export default Login; export default Login;
client/src/components/SignUp.js
View file @ 7959b787
import { useEffect, useState } from "react";
const INIT_USER = {
name: "",
idNumber1: "",
idNumber2: "",
id: "",
password: "",
checkpw: "",
phone: "",
};
const Signup = () => { const Signup = () => {
const [user, setUser] = useState(INIT_USER);
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
let disabled = false;
useEffect(() => {
disabled = !(
user.name &&
user.idNumber1 &&
user.idNumber2 &&
user.id &&
user.password &&
user.checkpw
);
}, [user]);
function handleChange(event) {
const { name, value } = event.target;
setUser({ ...user, [name]: value });
console.log(user);
}
async function handleSubmit() {
try {
// setLoading(true);
// setError("");
// const success = await login(user.email, user.password);
console.log(user);
setSuccess(success);
} catch (error) {
// catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
const { name, idNumber1, idNumber2, id, password, checkpw, phone } = user;
return ( return (
<div> <div className="modal-content">
Signup Component 입니다. <form onSubmit={handleSubmit}>
<div className="modal-header">
<h5 className="modal-title" id="loginModalLabel">
회원가입
</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
<div className="p-2">
<label className="p-1">이름</label>
<input
className="form-control"
id="name"
type="text"
name="name"
placeholder="이름을 입력하세요"
value={name}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">주민등록번호</label>
<div className="d-flex text-center">
<div className="col-4">
<input
className="m-2 form-control"
id="idNumber1"
type="text"
name="idNumber1"
placeholder="●●●●●●"
value={idNumber1}
onChange={handleChange}
/>
</div>
<div className="col-1">ㅡ</div>
<div className="col-1">
<input
className="m-2 form-control"
id="idNumber2"
type="text"
name="idNumber2"
placeholder="●"
value={idNumber2}
onChange={handleChange}
/>
</div>
******
</div>
</div>
<div className="p-2">
<label className="p-1">아이디</label>
<input
className="form-control"
id="id"
type="text"
name="id"
placeholder="아이디를 입력하세요"
value={id}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">비밀번호</label>
<input
className="form-control"
id="password"
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
value={password}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">비밀번호확인</label>
<input
className="form-control"
id="checkpw"
type="password"
name="checkpw"
placeholder="비밀번호를 다시 입력하세요"
value={checkpw}
onChange={handleChange}
/>
</div>
<div className="p-2">
<label className="p-1">전화번호(선택)</label>
<input
className="form-control"
id="phone"
type="text"
name="phone"
placeholder="숫자만 입력하세요"
value={phone}
onChange={handleChange}
/>
</div>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary" disabled={disabled}>
회원가입
</button>
</div>
</form>
</div> </div>
) );
}; };
export default Signup; export default Signup;
client/src/pages/HomeGuestPage.js
View file @ 7959b787
...@@ -3,14 +3,49 @@ import SignUp from "../components/SignUp"; ...@@ -3,14 +3,49 @@ import SignUp from "../components/SignUp";
const HomeGuestPage = () => { const HomeGuestPage = () => {
return ( return (
<div> <div className="d-flex flex-column justify-content-center h-100 font-weight-bold">
HomeGuest Page 입니다. <img src="BORA.PNG" className="w-100 p-4" />
<h1>logo 자리</h1> <div className="d-flex flex-column align-items-center">
<p>로그인</p> <button
type="button"
className="col-4 btn btn-info"
data-bs-toggle="modal"
data-bs-target="#loginModal"
>
로그인
</button>
<div
className="modal fade"
id="loginModal"
tabIndex="-1"
aria-labelledby="loginModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<Login /> <Login />
<p>회원가입</p> </div>
</div>
<button
type="button"
className="col-4 btn btn-info"
data-bs-toggle="modal"
data-bs-target="#signupModal"
>
회원가입
</button>
</div>
<div
className="modal fade"
id="signupModal"
tabIndex="-1"
aria-labelledby="signupModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<SignUp /> <SignUp />
</div> </div>
</div>
</div>
); );
}; };
......
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