update HomeIconBox style

@@ -9,8 +9,9 @@ import {
   faQuestionCircle,
   faTags,
 } from "@fortawesome/free-solid-svg-icons";
+import { BrowserRouter as Router, Link } from "react-router-dom";
 
-const UserIconBox = styled.div`
+const HomeIconBox = styled.div`
   width: 100%;
   height: 10%;
   display: flex;
@@ -21,7 +22,7 @@ const UserIconBox = styled.div`
   opacity: 0.8;
   color: white;
   cursor: pointer;
-  transition: 0.3s;
+  transition: 0.5s;
   &:hover {
     color: #667aff;
     background-color: white;
@@ -47,7 +48,7 @@ const IconBox = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
-  transition: 0.3s;
+  transition: 0.5s;
   &:hover {
     color: #667aff;
     background-color: white;
@@ -69,7 +70,7 @@ const ExitIconBox = styled.div`
   opacity: 0.8;
   color: white;
   cursor: pointer;
-  transition: 0.3s;
+  transition: 0.5s;
   &:hover {
     color: #667aff;
     background-color: white;
@@ -87,9 +88,10 @@ const IconName = styled.span`
 export default () => {
   return (
     <>
-      <UserIconBox>
+      <Router>
+        <HomeIconBox>
           <FontAwesomeIcon icon={faHome} />
-      </UserIconBox>
+        </HomeIconBox>
         <FuncIconBox>
           <IconBox>
             <FontAwesomeIcon icon={faComment} />
@@ -112,6 +114,7 @@ export default () => {
           <FontAwesomeIcon icon={faSignOutAlt} />
           <IconName /> Log Out
         </ExitIconBox>
+      </Router>
     </>
   );
 };