김건희

[Add] LoginPage View

import './App.css';
import RegisterPage from './component/views/RegisterPage/RegisterPage';
import LoginPage from './component/views/LoginPage/LoginPage';
function App() {
return (
<div>
<RegisterPage />
<LoginPage />
</div>
);
}
......
import React, { useCallback, useState } from "react";
import "../style/LoginPage.scss"
function LoginPage(props) {
const [Id, setId] = useState("");
const [Password, setPassword] = useState("");
const [checkIdError, setCheckIdError] = useState(false);
const [checkPasswordError, setCheckPasswordError] = useState(false);
const [checkLoginError, setCheckLoginError] = useState(false);
const idRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/;
const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-?])(?=.*[0-9]).{8,25}$/;
const onIdHandler = useCallback((event) => {
setId(event.currentTarget.value);
// 아이디 유효성 검사
if (!idRegex.test(event.currentTarget.value)) {
setCheckIdError(true);
}
else {
setCheckIdError(false);
}
}, [checkIdError]);
const onPasswordHandler = useCallback((event) => {
setPassword(event.currentTarget.value);
// 비밀번호 유효성 검사
if (!passwordRegex.test(event.currentTarget.value)) {
setCheckPasswordError(true);
}
else {
setCheckPasswordError(false);
}
}, [checkPasswordError]);
const onSubmitHandler = useCallback((event) => {
event.preventDefault();
if (checkIdError || Id === "") {
setCheckLoginError(true);
}
else if (checkPasswordError || Password === "") {
setCheckLoginError(true);
}
else {
setCheckLoginError(false);
}
if (!checkLoginError) {
const UserData = {
id: Id,
password: Password,
};
}
}, [checkIdError, checkPasswordError, Password]);
return (
<div id = "body">
<div className="login-box">
<h2>로그인</h2>
<div className="input-area">
<input
placeholder="아이디"
type="text"
value={Id}
onChange={onIdHandler}
/>
</div>
<div className="check-variable">
{checkIdError && <div style={{color : 'red'}}>아이디는 6자리 이상 14자리 이하 소문자와 숫자로 입력해주세요.</div>}
</div>
<div className="input-area">
<input
placeholder="비밀번호"
type="text"
value={Password}
onChange={onPasswordHandler}
/>
</div>
<div className="check-variable">
{checkPasswordError && <div style={{color : 'red'}}>알파벳과 숫자, 특수문자를 포함하여 8자리 이상 입력해주세요.</div>}
</div>
<div className="btn-area" onClick={onSubmitHandler}>
<button
className="login-btn"
>
로그인
</button>
</div>
<div className="check-variable">
{checkLoginError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
</div>
</div>
</div>
);
}
export default LoginPage;
\ No newline at end of file
......
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: rgb(245, 235, 223);
}
#body {
display: flex;
justify-content: center;
align-items: center;
border-top: 2px solid;
border-bottom: 2px solid;
.login-box {
border: 2px solid;
width: 35%;
height: 60%;
margin-top: 30px;
margin-bottom: 30px;
h2 {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
}
.input-area {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 5px;
input {
padding: 10px 0.1rem;
background-color: rgb(255, 255, 255);
}
}
.check-variable {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 5px;
}
.btn-area {
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 35px;
button {
width: 120px;
height: 40px;
font-size: large;
font-weight: bold;
background-color:rgb(255, 253, 238);
cursor: pointer;
}
}
}
......