change some icons in MenuIcons.js

@@ -3,11 +3,11 @@ import styled from "styled-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
 import {
   faUser,
   faUser,
-  faHome,
-  faCalendarCheck,
   faComment,
   faComment,
   faCog,
   faCog,
   faSignOutAlt,
   faSignOutAlt,
+  faQuestionCircle,
+  faTags,
 } from "@fortawesome/free-solid-svg-icons";
 } from "@fortawesome/free-solid-svg-icons";
 
 
 const UserIconBox = styled.div`
 const UserIconBox = styled.div`
@@ -18,35 +18,69 @@ const UserIconBox = styled.div`
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
   font-size: 30px;
   font-size: 30px;
-  margin: 15px 0px;
   opacity: 0.8;
   opacity: 0.8;
   color: white;
   color: white;
+  cursor: pointer;
+  transition: 0.3s;
+  &:hover {
+    color: #667aff;
+    background-color: white;
+  }
 `;
 `;
 
 
 const FuncIconBox = styled.div`
 const FuncIconBox = styled.div`
   width: 100%;
   width: 100%;
   height: 60%;
   height: 60%;
-  font-size: 30px;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   justify-content: space-around;
   justify-content: space-around;
   align-items: center;
   align-items: center;
-  margin: 10px 0px;
   opacity: 0.8;
   opacity: 0.8;
   color: white;
   color: white;
 `;
 `;
 
 
+// 개별 아이콘을 상자로 묶기 위한 변수
+const IconBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  transition: 0.3s;
+  &:hover {
+    color: #667aff;
+    background-color: white;
+  }
+  svg {
+    font-size: 20px;
+    margin-right: 5px;
+  }
+`;
+
 const ExitIconBox = styled.div`
 const ExitIconBox = styled.div`
   width: 100%;
   width: 100%;
   height: 15%;
   height: 15%;
-  font-size: 30px;
   display: flex;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   align-items: center;
-  justify-content: flex-end;
-  margin-top: 20px;
+  justify-content: center;
   opacity: 0.8;
   opacity: 0.8;
   color: white;
   color: white;
+  cursor: pointer;
+  transition: 0.3s;
+  &:hover {
+    color: #667aff;
+    background-color: white;
+  }
+  svg {
+    font-size: 20px;
+    margin-right: 5px;
+  }
+`;
+
+const IconName = styled.span`
+  font-size: 10px;
 `;
 `;
 
 
 export default () => {
 export default () => {
@@ -56,13 +90,26 @@ export default () => {
         <FontAwesomeIcon icon={faUser} />
         <FontAwesomeIcon icon={faUser} />
       </UserIconBox>
       </UserIconBox>
       <FuncIconBox>
       <FuncIconBox>
-        <FontAwesomeIcon icon={faHome} />
-        <FontAwesomeIcon icon={faCalendarCheck} />
-        <FontAwesomeIcon icon={faComment} />
-        <FontAwesomeIcon icon={faCog} />
+        <IconBox>
+          <FontAwesomeIcon icon={faComment} />
+          <IconName /> One To One Chat
+        </IconBox>
+        <IconBox>
+          <FontAwesomeIcon icon={faQuestionCircle} />
+          <IconName /> Random Chat
+        </IconBox>
+        <IconBox>
+          <FontAwesomeIcon icon={faTags} />
+          <IconName /> Category Chat
+        </IconBox>
+        <IconBox>
+          <FontAwesomeIcon icon={faCog} />
+          <IconName /> Profile Setting
+        </IconBox>
       </FuncIconBox>
       </FuncIconBox>
       <ExitIconBox>
       <ExitIconBox>
         <FontAwesomeIcon icon={faSignOutAlt} />
         <FontAwesomeIcon icon={faSignOutAlt} />
+        <IconName /> Log Out
       </ExitIconBox>
       </ExitIconBox>
     </>
     </>
   );
   );