Merge branch 'master' of http://khuhub.khu.ac.kr/2019102198/Tunnel into authorize

-import {BrowserRouter as Redirect, Router, Route, Routes} from "react-router-dom";
+import React from "react";
+import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
 import MainPage from "./component/views/MainPage/MainPage";
 import LoginPage from "./component/views/LoginPage/LoginPage";
 import RegisterPage from "./component/views/RegisterPage/RegisterPage";
 import "./static/fonts/font.css";
+import Auth from './hoc/auth';
 
 function App () {
-  let isAuthorized = sessionStorage.getItem("isAuthorized"); // 
   return (
       <Router>
         <div>
-        {!isAuthorized ? <Redirect to="/login" /> : <Redirect to="/main" />}
-          <Routes>
-              <Route exact path = "/login" element={<LoginPage/>}/>
-              <Route exact path = "/main" element={<MainPage/>}/>
-              <Route exact path = "/register" element={<RegisterPage/>}/>
-          </Routes>
+        <Routes>
+          <Route exact path="/main" element={Auth(MainPage, true)} /> 
+          <Route exact path="/login" element={Auth(LoginPage , false)}>
+          </Route>
+          <Route exact path="/register" element={Auth(RegisterPage , false)}>
+          </Route>
+        </Routes>
         </div>
       </Router>
   );

@@ -4,12 +4,10 @@ import Axios from 'axios'
 import { Icon, Input } from "semantic-ui-react"
 import { useNavigate } from "react-router-dom";
 
-function LoginPage(props) {
-    const navigate = useNavigate();
-
+function LoginPage() {
+    let navigate = useNavigate();
     const [Id, setId] = useState("");
     const [Password, setPassword] = useState("");
-
     const onIdHandler = (event) => {
         setId(event.currentTarget.value);
     };
@@ -75,5 +73,4 @@ function LoginPage(props) {
         </div>
     );
 }
-
 export default LoginPage;
\ No newline at end of file

@@ -4,9 +4,13 @@ import { useNavigate } from "react-router-dom";
 import { CKEditor } from '@ckeditor/ckeditor5-react';
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
-function MainPage() {
+function MainPage(props) {
+    const isLogin = props.isLogin;
     const navigate = useNavigate();
-    const goToLogin = () =>{
+    const onLogout = () => {
+    	// sessionStorage 에 user_id 로 저장되어있는 아이템을 삭제한다.
+        sessionStorage.removeItem('isAuthorized')
+        // App 으로 이동(새로고침)
         navigate('/login');
     }
     return (
@@ -16,7 +20,7 @@ function MainPage() {
                     <h1>Tunnel</h1>
                 </div>
                 <div className="None-title">
-                    <Button className="ui right floated button" onClick={()=>goToLogin()}>
+                    <Button className="ui right floated button" onClick={()=>onLogout()}>
                         Logout
                     </Button>
                 </div>

@@ -97,8 +97,7 @@ function RegisterPage(props) {
                     <div className="btn-area" >
                         <Button className='register-btn'
                                 content='Sign up'
-                                icon='signup'
-                                size='small'/>
+                                icon='signup'/>
                     </div>
                 </form>
             </div>

@@ -31,7 +31,6 @@
     margin-top: 20px;
     font-weight: bold;
     font-size: medium;
-
     input {
       width: 75%;
       padding: 15px .8em .8em;
@@ -42,7 +41,6 @@
       color: white;
       outline: none;
     }
-
     label {
       position: absolute;
       left: 10px;
@@ -55,7 +53,6 @@
     display: flex;
     justify-content: space-evenly;
     margin-top: 30px;
-
     .login-btn {
       width: 150px;
       height: 50px;
@@ -79,5 +76,4 @@
       cursor: pointer;
     }
   }
-}
-
+}
\ No newline at end of file

+import React, {useEffect} from 'react';
+import Axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+export default function (SpecificComponent) {
+    // option
+    // null ->  아무나 출입, true -> 로그인한 유저만 출입, false -> 로그인한 유저는 출입 불가능
+    function AuthenticationCheck() {
+        let navigate = useNavigate();
+        useEffect(() => {
+            Axios.get('/api/auth')
+            .then((res)=>{
+                if(res.status === 200){
+                    navigate('/main')
+                }
+            }).catch((error) => {
+                console.log(error.response);
+                alert('로그인이 필요합니다!');
+                navigate('/login');
+            })
+        }, [])
+        
+        return (
+            <SpecificComponent/>
+        )
+    }
+    return <AuthenticationCheck />
+}
\ No newline at end of file