//앱 미리보기 ⬆️
//리액트 프로젝트 '버튼 하나에 두 가지 경로 넣기 react-router-dom/useState'에서 이어집니다.
왓챠 UI를 참고하여 FE를 구현하도록 하겠습니다.
client/src/components/LoginPage.js 생성
client/src/components/RegisterPage.js 생성
client/src/components/LoginRegister.css 생성
import React, {useState} from 'react'
import "./LoginRegister.css"
function LoginPage() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const onEmailHandler = (event) => {
setEmail(event.currentTarget.value);
}
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value)
}
const onSubmit = (event) => {
event.preventDefault();
}
return (
<div class="loginregister">
<form>
<div><input name="email" type="email" placeholder="이메일" value={email} onChange={onEmailHandler} class="loginregister__input"/></div>
<div><input name="password" type="password" placeholder="비밀번호" value={password} onChange={onPasswordHandler} class="loginregister__input"/></div>
<div><button type="submit" onSubmit={onSubmit} class="loginregister__button">로그인</button></div>
</form>
</div>
);
}
export default LoginPage;
import React, {useState} from 'react'
import "./LoginRegister.css"
function RegisterPage() {
const [name, setName] = useState("")
const [email, setEmail] = useState("");
const [password, setPassword] = useState("")
const [confirmPassword, setConfirmPassword] = useState("")
const onNameHandler = (event) => {
setName(event.currentTarget.value)
}
const onEmailHandler = (event) => {
setEmail(event.currentTarget.value)
}
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value)
}
const onConfirmPasswordHandler = (event) => {
setConfirmPassword(event.currentTarget.value)
}
const onSubmit = (event) => {
event.preventDefault()
if(password !== confirmPassword) {
return alert('비밀번호와 비밀번호확인은 같아야 합니다.')
}
}
return (
<div class="loginregister">
<form>
<div><input name="name" type="text" placeholder="이름" value={name} onChange={onNameHandler} class="loginregister__input"/></div>
<div><input name="email" type="email" placeholder="이메일" value={email} onChange={onEmailHandler} class="loginregister__input"/></div>
<div><input name="password" type="password" placeholder="비밀번호" value={password} onChange={onPasswordHandler} class="loginregister__input"/></div>
<div><input name="confirmPassword" type="password" placeholder="비밀번호 확인" value={confirmPassword} onChange={onConfirmPasswordHandler} class="loginregister__input"/></div>
<div><button type="submit" onSubmit={onSubmit} class="loginregister__button">계정 생성하기</button></div>
</form>
</div>
);
}
export default RegisterPage;
.loginregister {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.loginregister__input {
width: 300px;
height: 50px;
padding-left: 10px;
margin: 10px;
}
.loginregister__button {
background-color: rgb(248, 47, 98);
color: rgb(255, 255, 255);
font-weight: 700;
width: 100%;
border-radius: 40px;
height: 48px;
margin-top: 10px;
}
import React from "react";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Navbar from './components/Navbar';
import LandingPage from './components/LandingPage';
import LoginPage from './components/LoginPage';
import RegisterPage from './components/RegisterPage';
function App() {
return (
<Router>
<div>
<Navbar />
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/sign_in" component={LoginPage} />
<Route exact path="/sign_up" component={RegisterPage} />
</Switch>
</div>
</Router>
);
}
export default App;