update Button component

@@ -4,6 +4,7 @@ import propTypes from "prop-types";
 
 const Container = styled.button`
   border: 0;
+  width: 100%;
 `;
 
 const Button = ({ text }) => <Container>{text}</Container>;

@@ -10,6 +10,7 @@ import {
   faTags,
 } from "@fortawesome/free-solid-svg-icons";
 import { BrowserRouter as Router, Link } from "react-router-dom";
+import Button from "../../Components/Button";
 
 const MenuBar = styled.div`
   width: 15%;
@@ -59,7 +60,6 @@ const FuncIconBox = styled.div`
   color: white;
 `;
 
-// 개별 아이콘을 상자로 묶기 위한 변수
 const IconBox = styled.div`
   display: flex;
   flex-direction: row;
@@ -73,20 +73,8 @@ const IconBox = styled.div`
   }
 `;
 
-const ExitIconBox = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.8;
-  svg {
-    font-size: 20px;
-    margin-right: 5px;
-  }
-`;
-
 const IconName = styled.span`
-  font-size: 10px;
+  font-size: 15px;
 `;
 
 const StyledLink = styled(Link)`
@@ -135,9 +123,27 @@ const StyledLink = styled(Link)`
     )
       return "center";
   }};
+  button {
+    width: 100%;
+    height: 100%;
+    color: white;
+    background-color: #667aff;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+    font-size: 20px;
+  }
+  svg.SignOut {
+    font-size: 20px;
+    position: absolute;
+    left: 50px;
+    opacity: 3;
+  }
 `;
 
-export default () => {
+export default ({ logOut }) => {
   return (
     <MenuBar>
       <TitleBox>
@@ -176,10 +182,8 @@ export default () => {
           </StyledLink>
         </FuncIconBox>
         <StyledLink to="/" className="LogOutLink">
-          <ExitIconBox>
-            <FontAwesomeIcon icon={faSignOutAlt} />
-            <IconName /> Log Out
-          </ExitIconBox>
+          <FontAwesomeIcon icon={faSignOutAlt} className="SignOut" />
+          <Button text={"Log Out"} onClick={logOut}></Button>
         </StyledLink>
       </Router>
     </MenuBar>