[FE/#15] Feat : 토큰 저장, 토큰 삭제 기능 구현

- pipe 함수를 사용해 토큰 저장기능 리팩토링도 함께 진행

FE/src/components/common/Header/UserMenu.jsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
+import { useCookies } from "react-cookie";
 
 import Popover from "@material-ui/core/Popover";
 import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
@@ -12,11 +13,24 @@ import IconButton from "@material-ui/core/IconButton";
 import AccountCircleOutlinedIcon from "@material-ui/icons/AccountCircleOutlined";
 import ExitToAppOutlinedIcon from "@material-ui/icons/ExitToAppOutlined";
 
+import { UserContext } from "@Contexts/userContext";
+import { deleteUserData } from "@Reducers/userReducer";
+
 import CustomAvatar from "@Components/common/CustomAvatar";
 
+import { TOKEN } from "@Constants/constants";
+
 const SIGN_OUT = "Sign out";
 
 const UserMenu = ({ userId, url }) => {
+  const [, , removeCookie] = useCookies([TOKEN]);
+  const { userDispatch } = useContext(UserContext);
+
+  const signOutHandler = () => {
+    removeCookie(TOKEN);
+    userDispatch(deleteUserData());
+  };
+
   return (
     <PopupState variant="popover" popupId="demo-popup-popover">
       {(popupState) => (
@@ -43,7 +57,7 @@ const UserMenu = ({ userId, url }) => {
                 <ListItemText primary={userId} />
               </ListItem>
               <Divider />
-              <ListItem button>
+              <ListItem button onClick={signOutHandler}>
                 <ListItemIcon>
                   <ExitToAppOutlinedIcon />
                 </ListItemIcon>

FE/src/pages/Login.jsx

@@ -3,25 +3,28 @@ import React, { useContext, useEffect } from "react";
 import jwtDecode from "jwt-decode";
 import { useCookies } from "react-cookie";
 
+import pipe from "@Utils/pipe";
+
 import { UserContext } from "@Contexts/userContext";
 import { setUserData } from "@Reducers/userReducer";
 
 import LoginForm from "@Components/Login/LoginForm";
 
-const TOKEN = "token";
+import { TOKEN } from "@Constants/constants";
 
 const Login = () => {
   document.cookie =
     "token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdmF0YXJVcmwiOiJodHRwczovL2F2YXRhcnMyLmdpdGh1YnVzZXJjb250ZW50LmNvbS91LzU4MjA5MDA5P3Y9NCIsIm5hbWUiOiJTdW5naWsgQ2hvaSIsImlkIjo1ODIwOTAwOSwiZXhwIjoxNTkzMDQ1MDI5fQ.u8oD16_vVEfNumcueeZy2Re-FUMIVb-DLNTcdeDShz8";
-  const [cookies, setCookies] = useCookies([TOKEN]);
+  const [cookies] = useCookies([TOKEN]);
   const { token } = cookies;
 
   const { userDispatch } = useContext(UserContext);
 
-  useEffect(() => {
-    const decodedToken = jwtDecode(token);
-    userDispatch(setUserData(decodedToken));
-  }, []);
+  useEffect(
+    () => pipe(jwtDecode, setUserData, userDispatch)(token),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
   return <LoginForm />;
 };