Register ver1.1 Basic layout for Mainpage

 //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, {useCallback, useState} from "react";
 import "../style/RegisterPage.scss";
-import { Button, 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("");
@@ -20,7 +21,6 @@ function RegisterPage() {
     };
     const onPasswordChkHandler = useCallback((event) => {
         //비밀번호를 입력할때마다 password 를 검증하는 함수
-        setPasswordError(event.currentTarget.value !== Password);
         setPasswordCheck(event.currentTarget.value);
     },[PasswordCheck]);
     const onSubmitHandler = useCallback((event) => {
@@ -28,11 +28,15 @@ function RegisterPage() {
         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>
@@ -54,8 +58,18 @@ function RegisterPage() {
                             type="password"
                             value={Password}
                             autoComplete="off"
-                            onChange={onPasswordHandler}/>
-                        {PasswordError && <div style={{color : 'red'}}>!</div>}
+                            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="input-area">
                         <Input
@@ -65,7 +79,9 @@ function RegisterPage() {
                             type="password"
                             value={PasswordCheck}
                             autoComplete="off"
-                            onChange={onPasswordChkHandler}/>
+                            onChange={onPasswordChkHandler}
+                        onFocus={()=>setPasswordError(false)}/>
+
                     </div>
                     <div className="input-area">
                         <Input
@@ -86,6 +102,7 @@ function RegisterPage() {
                     </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;
@@ -11,6 +6,7 @@
   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;