Merge branch 'register' into 'master'

Register



See merge request !3

 //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>
     );
 }

-* {
-  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;