2.6 Logout & 네비게이션

src/components/Navigation.js

@@ -0,0 +1,15 @@
+import React from "react";
+import {Link} from "react-router-dom";
+
+const Navigation = () => <nav>
+    <ul>
+        <li>
+            <Link to="/">홈으로</Link>
+        </li>
+        <li>
+            <Link to="/profile">프로필</Link>
+        </li>
+    </ul>
+</nav>
+
+export default Navigation;

src/components/Router.js

@@ -1,18 +1,27 @@
 import React, { useState } from 'react';
-import {HashRouter as HRouter, Route, Switch} from 'react-router-dom';
+import {HashRouter as HRouter, Route, Redirect,  Switch} from 'react-router-dom';
 import Auth from "routes/Auth";
 import Home from "routes/Home";
+import Profile from "routes/Profile";
+import Navigation from "components/Navigation";
 
 const Router = ({isLoggedIn}) => {
 
     return (
         <HRouter>
+            {isLoggedIn && <Navigation/>}
             <Switch>
                 {isLoggedIn ?
                     <>
                         <Route exact path="/"><Home/></Route>
+                        <Route exact path="/profile"><Profile/></Route>
+                        <Redirect from="*" to="/" />
                     </> :
-                    <Route exact path="/"><Auth /></Route>}
+                    <>
+                    <Route exact path="/"><Auth /></Route>
+                    <Redirect from="*" to="/" />
+                    </>
+                }
             </Switch>
         </HRouter>
     );

src/routes/Profile.js

@@ -1,6 +1,16 @@
 import React from 'react';
-import EditProfile from "routes/EditProfile";
+import {authService} from "../myFirebase";
+
+const Profile = () => {
+    const onLogout = () => authService.signOut();
+
+    return (
+        <>
+            <button onClick={onLogout}>로그아웃</button>
+            <span>Profile</span>
+        </>
+    );
+};
 
-const Profile = () => <span>Profile</span>;
 
 export default Profile;