오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
정의왕
465a5090 2 parents 3d5509f9 6ee0c9d9

Merge branch 'register' into 'master' 

Register



See merge request !3
Inline Side-by-side
Showing 11 changed files with 158 additions and 38 deletions
1 //import React, {useState} from "react"; 1 //import React, {useState} from "react";
2 import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom"; 2 import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
3 -import LandingPage from "./component/views/LandingPage/LandingPage"; 3 +import MainPage from "./component/views/LandingPage/MainPage";
4 import LoginPage from "./component/views/LoginPage/LoginPage"; 4 import LoginPage from "./component/views/LoginPage/LoginPage";
5 import RegisterPage from "./component/views/RegisterPage/RegisterPage"; 5 import RegisterPage from "./component/views/RegisterPage/RegisterPage";
6 import "./static/fonts/font.css"; 6 import "./static/fonts/font.css";
...@@ -10,7 +10,7 @@ function App () { ...@@ -10,7 +10,7 @@ function App () {
10 <div> 10 <div>
11 {} 11 {}
12 <Routes> 12 <Routes>
13 - <Route exact path = "/" element={<LandingPage/>}/> 13 + <Route exact path = "/main" element={<MainPage/>}/>
14 <Route exact path = "/login" element={<LoginPage/>}/> 14 <Route exact path = "/login" element={<LoginPage/>}/>
15 <Route exact path = "/register" element={<RegisterPage/>}/> 15 <Route exact path = "/register" element={<RegisterPage/>}/>
16 </Routes> 16 </Routes>
......
1 -// React, {useEffect} from 'react';
2 -//import axios from 'axios';
3 -function LandingPage() {
4 - return (
5 - <div>
6 - <input type="password"/>
7 - </div>
8 - );
9 -}
10 -
11 -export default LandingPage;
1 +import { Button, Input } from "semantic-ui-react"
2 +import "../style/MainPage.scss";
3 +function MainPage() {
4 + return (
5 + <div id="Main">
6 + <div className="Main-header">
7 + <div className="title">
8 + <h1>Tunnel</h1>
9 + </div>
10 + <div className="None-title">
11 + <Button class="ui button">
12 + Logout
13 + </Button>
14 + </div>
15 + </div>
16 + <div className="Main-body">
17 + <div className="contents">
18 + <h1>a</h1>
19 + </div>
20 + <div className="user">
21 + <h1>a</h1>
22 + </div>
23 + </div>
24 + </div>
25 + );
26 +}
27 +
28 +export default MainPage;
1 import React, { useState } from "react"; 1 import React, { useState } from "react";
2 import "../style/LoginPage.scss"; 2 import "../style/LoginPage.scss";
3 import { Icon, Input } from "semantic-ui-react" 3 import { Icon, Input } from "semantic-ui-react"
4 +import { useNavigate } from "react-router-dom";
4 5
5 function LoginPage() { 6 function LoginPage() {
7 + const navigate = useNavigate();
8 +
6 const [Email, setEmail] = useState(""); 9 const [Email, setEmail] = useState("");
7 const [Password, setPassword] = useState(""); 10 const [Password, setPassword] = useState("");
8 11
...@@ -17,6 +20,11 @@ function LoginPage() { ...@@ -17,6 +20,11 @@ function LoginPage() {
17 console.log("Email", Email); 20 console.log("Email", Email);
18 console.log("Password", Password); 21 console.log("Password", Password);
19 }; 22 };
23 +
24 + const goToRegister = () => {
25 + navigate('/register');
26 + }
27 +
20 return ( 28 return (
21 <div id="body"> 29 <div id="body">
22 <div className="login-form"> 30 <div className="login-form">
...@@ -44,7 +52,7 @@ function LoginPage() { ...@@ -44,7 +52,7 @@ function LoginPage() {
44 </div> 52 </div>
45 <div className="btn-area"> 53 <div className="btn-area">
46 <button className="login-btn" >Login</button> 54 <button className="login-btn" >Login</button>
47 - <button className="register-btn" >Register</button> 55 + <button className="register-btn" onClick={()=>goToRegister()} >Register</button>
48 </div> 56 </div>
49 </form> 57 </form>
50 </div> 58 </div>
......
1 -import React, { useState } from "react"; 1 +import React, {useCallback, useState} from "react";
2 import "../style/RegisterPage.scss"; 2 import "../style/RegisterPage.scss";
3 -import { Icon, Input } from "semantic-ui-react" 3 +import { Form, Message, Button, Icon, Input } from "semantic-ui-react";
4 +import backgroundImg from "../images/register_background.png";
4 5
5 function RegisterPage() { 6 function RegisterPage() {
6 const [Email, setEmail] = useState(""); 7 const [Email, setEmail] = useState("");
7 const [Password, setPassword] = useState(""); 8 const [Password, setPassword] = useState("");
9 + const [PasswordCheck,setPasswordCheck] = useState("");
10 + const [Personality, setPersonality] = useState("");
11 + const [PasswordError,setPasswordError] = useState(false);
8 12
9 const onIdHandler = (event) => { 13 const onIdHandler = (event) => {
10 setEmail(event.currentTarget.value); 14 setEmail(event.currentTarget.value);
...@@ -12,13 +16,27 @@ function RegisterPage() { ...@@ -12,13 +16,27 @@ function RegisterPage() {
12 const onPasswordHandler = (event) => { 16 const onPasswordHandler = (event) => {
13 setPassword(event.currentTarget.value); 17 setPassword(event.currentTarget.value);
14 }; 18 };
15 - const onSubmitHandler = (event) => { 19 + const onPersonalityHandler = (event) => {
20 + setPersonality(event.currentTarget.value);
21 + };
22 + const onPasswordChkHandler = useCallback((event) => {
23 + //비밀번호를 입력할때마다 password 를 검증하는 함수
24 + setPasswordCheck(event.currentTarget.value);
25 + },[PasswordCheck]);
26 + const onSubmitHandler = useCallback((event) => {
16 event.preventDefault(); 27 event.preventDefault();
28 + if(Password !== PasswordCheck){
29 + return setPasswordError(true);
30 + }
31 + else{
32 + return setPasswordError(false);
33 + }
17 console.log("Email",Email); 34 console.log("Email",Email);
18 console.log("Password", Password); 35 console.log("Password", Password);
19 - }; 36 + },[Password,PasswordCheck]);
37 +
20 return ( 38 return (
21 - <div id="body"> 39 + <div id="Register">
22 <div className="register-form"> 40 <div className="register-form">
23 <form onSubmit={onSubmitHandler}> 41 <form onSubmit={onSubmitHandler}>
24 <h1>Tunnel</h1> 42 <h1>Tunnel</h1>
...@@ -30,7 +48,7 @@ function RegisterPage() { ...@@ -30,7 +48,7 @@ function RegisterPage() {
30 type="text" 48 type="text"
31 value={Email} 49 value={Email}
32 autoComplete="off" 50 autoComplete="off"
33 - onChange={onIdHandler}/> 51 + required onChange={onIdHandler}/>
34 </div> 52 </div>
35 <div className="input-area"> 53 <div className="input-area">
36 <Input 54 <Input
...@@ -40,13 +58,51 @@ function RegisterPage() { ...@@ -40,13 +58,51 @@ function RegisterPage() {
40 type="password" 58 type="password"
41 value={Password} 59 value={Password}
42 autoComplete="off" 60 autoComplete="off"
43 - onChange={onPasswordHandler}/> 61 + onChange={onPasswordHandler}
62 + onFocus={()=>setPasswordError(false)}/>
63 + {PasswordError &&
64 + <Form error>
65 + <Message
66 + error
67 + header='Action Forbidden'
68 + content='You can only sign up for an account once with a given e-mail address.'
69 + />
70 + <Button>Submit</Button>
71 + </Form>
72 + }
44 </div> 73 </div>
45 - <div className="btn-area"> 74 + <div className="input-area">
46 - <button className="register-btn" >Register</button> 75 + <Input
76 + icon={<Icon name='check'/>}
77 + iconPosition='left'
78 + placeholder="Check your Password"
79 + type="password"
80 + value={PasswordCheck}
81 + autoComplete="off"
82 + onChange={onPasswordChkHandler}
83 + onFocus={()=>setPasswordError(false)}/>
84 +
85 + </div>
86 + <div className="input-area">
87 + <Input
88 + icon={<Icon name='heart'/>}
89 + iconPosition='left'
90 + placeholder="Your MBTI"
91 + type="text"
92 + value={Personality}
93 + autoComplete="off"
94 + onChange={onPersonalityHandler}/>
95 + </div>
96 + <div className="btn-area" >
97 + <Button className='register-btn'
98 + content='Sign up'
99 + icon='signup'
100 + size='small'
101 + iconPosition='left'/>
47 </div> 102 </div>
48 </form> 103 </form>
49 </div> 104 </div>
105 +
50 </div> 106 </div>
51 ); 107 );
52 } 108 }
......

54.8 KB | W: | H:

58.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 -* {
2 - margin: 0;
3 - padding: 0;
4 - box-sizing: border-box;
5 -}
6 #body{ 1 #body{
7 display: flex; 2 display: flex;
8 justify-content: center; 3 justify-content: center;
...@@ -25,7 +20,7 @@ ...@@ -25,7 +20,7 @@
25 color: white; 20 color: white;
26 font-weight: bold; 21 font-weight: bold;
27 text-align: center; 22 text-align: center;
28 - margin-bottom: 60px ; 23 + margin-bottom: 60px;
29 } 24 }
30 .input-area { 25 .input-area {
31 display: flex; 26 display: flex;
......
1 +#Main{
2 + margin: 30px;
3 + display: flex;
4 + flex-direction: column;
5 + justify-content: center;
6 + align-items: center;
7 + .Main-header{
8 + display: flex;
9 + flex-direction: row;
10 + height: 30%;
11 + .title{
12 + display: flex;
13 + justify-content: center;
14 + width: 90%;
15 + height: 50px;
16 + .h1{
17 + font-size: 40px;
18 + color: white;
19 + font-weight: bold;
20 + text-align: center;
21 + margin-bottom: 60px;
22 + }
23 + }
24 + .None-title{
25 + display: flex;
26 + justify-content: right;
27 + width: 10%;
28 + }
29 + }
30 + .Main-body{
31 + display: flex;
32 + flex-direction: row;
33 + width: 100%;
34 + height: 100vh;
35 + .contents{
36 + display: flex;
37 + justify-content: center;
38 + align-items: center;
39 + width: 70%;
40 + }
41 + .user{
42 + display: flex;
43 + justify-content: center;
44 + align-items: center;
45 + width: 30%;
46 + }
47 + }
48 +}
1 -* { 1 +#Register{
2 - margin: 0;
3 - padding: 0;
4 - box-sizing: border-box;
5 -}
6 -#body{
7 display: flex; 2 display: flex;
8 justify-content: center; 3 justify-content: center;
9 align-items: center; 4 align-items: center;
10 height: 100vh; 5 height: 100vh;
11 - background-image: url("../images/login_background.png"); 6 + background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url("../images/register_background.png");
12 background-repeat: no-repeat; 7 background-repeat: no-repeat;
13 background-position: center; 8 background-position: center;
9 +
14 .register-form { 10 .register-form {
15 display: flex; 11 display: flex;
16 justify-content: space-around; 12 justify-content: space-around;
...@@ -62,8 +58,8 @@ ...@@ -62,8 +58,8 @@
62 margin-top: 30px; 58 margin-top: 30px;
63 59
64 .register-btn { 60 .register-btn {
65 - width: 150px; 61 + width: 170px;
66 - height: 50px; 62 + height: 55px;
67 background-color: transparent; 63 background-color: transparent;
68 font-size: 20px; 64 font-size: 20px;
69 color: white; 65 color: white;
......