Feature: logout

fe/src/components/buttons/GitHubLoginButton.tsx

@@ -3,13 +3,13 @@ import styled from 'styled-components';
 
 const GitHubLoginButton = () => {
   return (
-    <a href="https://github.com/login/oauth/authorize?client_id=a1689d4a012d841d152a&redirect_uri=http://kyupig.com/login/callback&scope=user">
+    <a href={`https://github.com/login/oauth/authorize?client_id=a1689d4a012d841d152a&redirect_uri=${process.env.REACT_APP_OAUTH_REDIRECT_URL}/login/callback&scope=user`}>
       <StyledCreateButton variant="contained" size="large">
         GitHub 계정으로 로그인
       </StyledCreateButton>
     </a>
   );
-};
+}; 
 
 export default GitHubLoginButton;
 

fe/src/components/header/Header.tsx

@@ -1,25 +1,47 @@
+import { Button } from '@material-ui/core';
 import AuthorAvatar from 'components/common/AuthorAvatar';
 import Logo from 'components/common/Logo';
+import { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { decodedUserDataAtom } from 'stores/userStore';
 import styled from 'styled-components';
 import { DecodedUserDataType } from 'types/storeTypes';
 
 const Header = () => {
+  const history = useHistory();
   const decodedUserData = useRecoilValue<DecodedUserDataType | null>(
     decodedUserDataAtom
   );
 
+  const clickHandler = () => {
+    localStorage.removeItem('jwt');
+    history.push('/');
+  };
+
+
   return (
     <StyledHeader>
       <Logo />
-      <AuthorAvatar profileImg={decodedUserData?.avatar_url} size="L" />
+      <StyledFlex>
+        <LogoutBtn onClick={clickHandler}>로그 아웃</LogoutBtn>
+        <AuthorAvatar profileImg={decodedUserData?.avatar_url} size="L" />
+      </StyledFlex>
     </StyledHeader>
   );
 };
 
 export default Header;
 
+const StyledFlex = styled.div`
+  display: flex;
+  margin-right: 30px;
+`;
+
+const LogoutBtn = styled(Button)`
+  margin-right: 30px;
+`;
+
 const StyledHeader = styled.div`
   display: flex;
   width: 100%;