정의왕

Merge branch 'register' into 'master'

Register



See merge request !2
//import React, {useState} from "react";
import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
import LandingPage from "./component/views/LandingPage/LandingPage";
import MainPage from "./component/views/LandingPage/MainPage";
import LoginPage from "./component/views/LoginPage/LoginPage";
import RegisterPage from "./component/views/RegisterPage/RegisterPage";
import "./static/fonts/font.css";
......@@ -10,7 +10,7 @@ function App () {
<div>
{}
<Routes>
<Route exact path = "/" element={<LandingPage/>}/>
<Route exact path = "/main" element={<MainPage/>}/>
<Route exact path = "/login" element={<LoginPage/>}/>
<Route exact path = "/register" element={<RegisterPage/>}/>
</Routes>
......
// React, {useEffect} from 'react';
//import axios from 'axios';
function LandingPage() {
return (
<div>
<input type="password"/>
</div>
);
}
export default LandingPage;
import { Button, Input } from "semantic-ui-react"
import "../style/MainPage.scss";
function MainPage() {
return (
<div id="Main">
<div className="Main-header">
<div className="title">
<h1>Tunnel</h1>
</div>
<div className="None-title">
<Button class="ui button">
Logout
</Button>
</div>
</div>
<div className="Main-body">
<div className="contents">
<h1>a</h1>
</div>
<div className="user">
<h1>a</h1>
</div>
</div>
</div>
);
}
export default MainPage;
import React, { useState } from "react";
import "../style/LoginPage.scss";
import { Icon, Input } from "semantic-ui-react"
import { useNavigate } from "react-router-dom";
function LoginPage() {
const navigate = useNavigate();
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
......@@ -17,6 +20,11 @@ function LoginPage() {
console.log("Email", Email);
console.log("Password", Password);
};
const goToRegister = () => {
navigate('/register');
}
return (
<div id="body">
<div className="login-form">
......@@ -44,7 +52,7 @@ function LoginPage() {
</div>
<div className="btn-area">
<button className="login-btn" >Login</button>
<button className="register-btn" >Register</button>
<button className="register-btn" onClick={()=>goToRegister()} >Register</button>
</div>
</form>
</div>
......
import React, { useState } from "react";
import React, {useCallback, useState} from "react";
import "../style/RegisterPage.scss";
import { Icon, Input } from "semantic-ui-react"
import { Form, Message, Button, Icon, Input } from "semantic-ui-react";
import backgroundImg from "../images/register_background.png";
function RegisterPage() {
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const [PasswordCheck,setPasswordCheck] = useState("");
const [Personality, setPersonality] = useState("");
const [PasswordError,setPasswordError] = useState(false);
const onIdHandler = (event) => {
setEmail(event.currentTarget.value);
......@@ -12,13 +16,27 @@ function RegisterPage() {
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value);
};
const onSubmitHandler = (event) => {
const onPersonalityHandler = (event) => {
setPersonality(event.currentTarget.value);
};
const onPasswordChkHandler = useCallback((event) => {
//비밀번호를 입력할때마다 password 를 검증하는 함수
setPasswordCheck(event.currentTarget.value);
},[PasswordCheck]);
const onSubmitHandler = useCallback((event) => {
event.preventDefault();
if(Password !== PasswordCheck){
return setPasswordError(true);
}
else{
return setPasswordError(false);
}
console.log("Email",Email);
console.log("Password", Password);
};
},[Password,PasswordCheck]);
return (
<div id="body">
<div id="Register">
<div className="register-form">
<form onSubmit={onSubmitHandler}>
<h1>Tunnel</h1>
......@@ -30,7 +48,7 @@ function RegisterPage() {
type="text"
value={Email}
autoComplete="off"
onChange={onIdHandler}/>
required onChange={onIdHandler}/>
</div>
<div className="input-area">
<Input
......@@ -40,13 +58,51 @@ function RegisterPage() {
type="password"
value={Password}
autoComplete="off"
onChange={onPasswordHandler}/>
onChange={onPasswordHandler}
onFocus={()=>setPasswordError(false)}/>
{PasswordError &&
<Form error>
<Message
error
header='Action Forbidden'
content='You can only sign up for an account once with a given e-mail address.'
/>
<Button>Submit</Button>
</Form>
}
</div>
<div className="btn-area">
<button className="register-btn" >Register</button>
<div className="input-area">
<Input
icon={<Icon name='check'/>}
iconPosition='left'
placeholder="Check your Password"
type="password"
value={PasswordCheck}
autoComplete="off"
onChange={onPasswordChkHandler}
onFocus={()=>setPasswordError(false)}/>
</div>
<div className="input-area">
<Input
icon={<Icon name='heart'/>}
iconPosition='left'
placeholder="Your MBTI"
type="text"
value={Personality}
autoComplete="off"
onChange={onPersonalityHandler}/>
</div>
<div className="btn-area" >
<Button className='register-btn'
content='Sign up'
icon='signup'
size='small'
iconPosition='left'/>
</div>
</form>
</div>
</div>
);
}
......

54.8 KB | W: | H:

58.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#body{
display: flex;
justify-content: center;
......@@ -25,7 +20,7 @@
color: white;
font-weight: bold;
text-align: center;
margin-bottom: 60px ;
margin-bottom: 60px;
}
.input-area {
display: flex;
......
#Main{
margin: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.Main-header{
display: flex;
flex-direction: row;
height: 30%;
.title{
display: flex;
justify-content: center;
width: 90%;
height: 50px;
.h1{
font-size: 40px;
color: white;
font-weight: bold;
text-align: center;
margin-bottom: 60px;
}
}
.None-title{
display: flex;
justify-content: right;
width: 10%;
}
}
.Main-body{
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
.contents{
display: flex;
justify-content: center;
align-items: center;
width: 70%;
}
.user{
display: flex;
justify-content: center;
align-items: center;
width: 30%;
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#body{
#Register{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url("../images/login_background.png");
background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url("../images/register_background.png");
background-repeat: no-repeat;
background-position: center;
.register-form {
display: flex;
justify-content: space-around;
......@@ -62,8 +58,8 @@
margin-top: 30px;
.register-btn {
width: 150px;
height: 50px;
width: 170px;
height: 55px;
background-color: transparent;
font-size: 20px;
color: white;
......