오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
정의왕
6ee0c9d9 1 parent 66f4b6ae

Register ver1.1 Basic layout for Mainpage

Inline Side-by-side
Showing 8 changed files with 113 additions and 32 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, {useCallback, useState} from "react"; 1 import React, {useCallback, useState} from "react";
2 import "../style/RegisterPage.scss"; 2 import "../style/RegisterPage.scss";
3 -import { Button, 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("");
...@@ -20,7 +21,6 @@ function RegisterPage() { ...@@ -20,7 +21,6 @@ function RegisterPage() {
20 }; 21 };
21 const onPasswordChkHandler = useCallback((event) => { 22 const onPasswordChkHandler = useCallback((event) => {
22 //비밀번호를 입력할때마다 password 를 검증하는 함수 23 //비밀번호를 입력할때마다 password 를 검증하는 함수
23 - setPasswordError(event.currentTarget.value !== Password);
24 setPasswordCheck(event.currentTarget.value); 24 setPasswordCheck(event.currentTarget.value);
25 },[PasswordCheck]); 25 },[PasswordCheck]);
26 const onSubmitHandler = useCallback((event) => { 26 const onSubmitHandler = useCallback((event) => {
...@@ -28,11 +28,15 @@ function RegisterPage() { ...@@ -28,11 +28,15 @@ function RegisterPage() {
28 if(Password !== PasswordCheck){ 28 if(Password !== PasswordCheck){
29 return setPasswordError(true); 29 return setPasswordError(true);
30 } 30 }
31 + else{
32 + return setPasswordError(false);
33 + }
31 console.log("Email",Email); 34 console.log("Email",Email);
32 console.log("Password", Password); 35 console.log("Password", Password);
33 },[Password,PasswordCheck]); 36 },[Password,PasswordCheck]);
37 +
34 return ( 38 return (
35 - <div id="body"> 39 + <div id="Register">
36 <div className="register-form"> 40 <div className="register-form">
37 <form onSubmit={onSubmitHandler}> 41 <form onSubmit={onSubmitHandler}>
38 <h1>Tunnel</h1> 42 <h1>Tunnel</h1>
...@@ -54,8 +58,18 @@ function RegisterPage() { ...@@ -54,8 +58,18 @@ function RegisterPage() {
54 type="password" 58 type="password"
55 value={Password} 59 value={Password}
56 autoComplete="off" 60 autoComplete="off"
57 - onChange={onPasswordHandler}/> 61 + onChange={onPasswordHandler}
58 - {PasswordError && <div style={{color : 'red'}}>!</div>} 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 + }
59 </div> 73 </div>
60 <div className="input-area"> 74 <div className="input-area">
61 <Input 75 <Input
...@@ -65,7 +79,9 @@ function RegisterPage() { ...@@ -65,7 +79,9 @@ function RegisterPage() {
65 type="password" 79 type="password"
66 value={PasswordCheck} 80 value={PasswordCheck}
67 autoComplete="off" 81 autoComplete="off"
68 - onChange={onPasswordChkHandler}/> 82 + onChange={onPasswordChkHandler}
83 + onFocus={()=>setPasswordError(false)}/>
84 +
69 </div> 85 </div>
70 <div className="input-area"> 86 <div className="input-area">
71 <Input 87 <Input
...@@ -86,6 +102,7 @@ function RegisterPage() { ...@@ -86,6 +102,7 @@ function RegisterPage() {
86 </div> 102 </div>
87 </form> 103 </form>
88 </div> 104 </div>
105 +
89 </div> 106 </div>
90 ); 107 );
91 } 108 }
......
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;
...@@ -11,6 +6,7 @@ ...@@ -11,6 +6,7 @@
11 background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url("../images/register_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;
......