Logout 구현

@@ -11028,6 +11028,22 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-cookies": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/react-cookies/-/react-cookies-0.1.1.tgz",
+      "integrity": "sha512-PP75kJ4vtoHuuTdq0TAD3RmlAv7vuDQh9fkC4oDlhntgs9vX1DmREomO0Y1mcQKR9nMZ6/zxoflaMJ3MAmF5KQ==",
+      "requires": {
+        "cookie": "^0.3.1",
+        "object-assign": "^4.1.1"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+          "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+        }
+      }
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",

@@ -16,6 +16,7 @@
     "http-proxy-middleware": "^1.0.4",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
+    "react-cookies": "^0.1.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",

 import React, { useState, useEffect } from 'react';
-import { Container, Row, Col } from 'reactstrap';
+import { Container, Row, Col, Button } from 'reactstrap';
+import cookie from 'react-cookies';
 import axios from 'axios';
 import MealCard from '../components/MealCard';
 
-const UserCards = () => {
+const UserCards = (props) => {
     const [datas, setDatas] = useState([]);
+    const [username, setUsername] = useState('User');
     const [picks, setPicks] = useState([{
         "id": "1",
         "name": "#신슨즈(#Shinsons)",
@@ -70,15 +72,22 @@ const UserCards = () => {
             setDatas(result.data);        
           };
           fetchData();
+          setUsername(cookie.load('username'));
+    }, [username]);
 
-    }, []);
-
-
+    const LogoutHandler = (e) => {
+      e.preventDefault();
+      localStorage.removeItem('user');
+      cookie.remove('username');
+      props.isLogin(false);
+      return ;
+    }
 
     return (
         <>
             <h1 style={{'paddingTop':'3rem'}} className="text-center">
-                <span className="font-weight-bold">User's Pick</span>
+                <div className="font-weight-bold">{username}'s Pick</div>
+                <Button onClick={LogoutHandler} color="link" className="float-right"><h4>Logout</h4></Button>
             </h1>  
             <br/>
                 <hr className="my-2" />

-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react';
 import NavBar from '../components/NavBar';
 import LoginLink from '../components/LoginLink';
 import UserCards from '../components/UserCards';
@@ -9,7 +9,6 @@ import { Container } from 'reactstrap';
 
 const MypickPage = () => {
     const [isLogin, setIsLogin] = useState(false);
-    const [username, setUsername] = useState('');
     const authApi = () => {
         const user = JSON.parse(localStorage.getItem('user'));
         return fetch('/api/auth', {
@@ -43,8 +42,7 @@ const MypickPage = () => {
             {
             isLogin ? 
             (<>
-            
-            <UserCards/>
+            <UserCards isLogin={setIsLogin}/>
             </>) 
             : 
             (<>

 import React, { useState } from 'react';
+import cookie from 'react-cookies'
 import { Button, Form, FormGroup, Label, Input} from 'reactstrap';
 import { FacebookLoginButton } from 'react-social-login-buttons';
 
@@ -30,6 +31,11 @@ const SigninPage = (props) => {
 
             if (response.message === "Token issue") {
                 localStorage.setItem("user", JSON.stringify(response.token));
+                const expires = new Date()
+                expires.setDate(expires.getDate() + 60)
+                cookie.save('username', response.username, {
+                    expires
+                })
                 alert('Login success');
                 props.history.push('/mypick');
             } else if(response.message === "user does not exist"){

@@ -97,12 +97,16 @@ app.post("/api/signin", (req, res) => {
                         issuer: "admin",
                       }
                     );
-            
+                      
+                  
                     return res.json({
                         code: 200,
                         message: 'Token issue',
                         token,
+                        username : name
                       });
+                    
+                    
 
                   } catch (error) {
                     console.error(error);