Merge pull request #61 from CNU-OOHub/#60/modify-sideMenu

fix: 사이드 메뉴 수정 (# 60)

src/components/molecules/sideMenu.jsx

@@ -13,10 +13,11 @@ import { useNavigate } from "react-router-dom";
 const SideMenuStyle = styled.div`
   display: flex;
   flex-direction: column;
-  width: 5rem;
+  width: 3rem;
   min-height: 92vh;
   height: auto;
   background-color: ${theme.greyColor};
+  position: fixed;
 `;
 
 const SideMenu = () => {
@@ -47,35 +48,35 @@ const SideMenu = () => {
           color={sideMenu === FOLDER ? "white" : theme.lightGreyColor}
         />
       </Button>
-      <Button
-        bgColor={theme.greyColor}
-        onClick={() => sideMenuClicked(SETTING)}
-      >
-        <AiOutlineSetting
+      <Button bgColor={theme.greyColor} onClick={() => sideMenuClicked(GROUPS)}>
+        <RiGroup2Line
           style={{
             marginTop: "1rem",
             width: "100%",
-            borderLeft: sideMenu === SETTING ? "5px solid white" : "none",
+            borderLeft: sideMenu === GROUPS ? "5px solid white" : "none",
           }}
           size={35}
-          color={sideMenu === SETTING ? "white" : theme.lightGreyColor}
+          color={sideMenu === GROUPS ? "white" : theme.lightGreyColor}
         />
       </Button>
-      <Button bgColor={theme.greyColor} onClick={() => sideMenuClicked(GROUPS)}>
-        <RiGroup2Line
+      <Button
+        bgColor={theme.greyColor}
+        onClick={() => sideMenuClicked(SETTING)}
+      >
+        <AiOutlineSetting
           style={{
             marginTop: "1rem",
             width: "100%",
-            borderLeft: sideMenu === GROUPS ? "5px solid white" : "none",
+            borderLeft: sideMenu === SETTING ? "5px solid white" : "none",
           }}
           size={35}
-          color={sideMenu === GROUPS ? "white" : theme.lightGreyColor}
+          color={sideMenu === SETTING ? "white" : theme.lightGreyColor}
         />
       </Button>
       <BiLogOut
         style={{
-          bottom: 20,
-          width: "5rem",
+          bottom: 65,
+          width: "3rem",
           alignSelf: "center",
           position: "absolute",
           padding: "0",

src/components/organisms/fileView.jsx

@@ -41,11 +41,12 @@ import "react-folder-tree/dist/style.css";
 const FileList = styled.div`
   display: flex;
   flex-direction: column;
-  width: 13rem;
+  width: 16rem;
   height: 92vh;
   background-color: ${theme.darkGreyColor};
   overflow: auto;
   white-space: nowrap;
+  padding-left: 3rem;
   //resize: horizontal;
 `;
 

src/components/organisms/organizationView.jsx

@@ -26,6 +26,7 @@ const Content = styled.div`
   flex-direction: column;
   justify-content: center;
   vertical-align: middle;
+  padding-left: 3rem;
 `;
 
 const AdminContent = styled.div`

src/components/organisms/settingView.jsx

@@ -0,0 +1,20 @@
+import React, { Fragment, useEffect, useState } from "react";
+import theme from "../../styles/theme";
+import styled from "styled-components";
+
+// 레이아웃
+const Content = styled.div`
+  width: 100%;
+  height: 92vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  vertical-align: middle;
+  padding-left: 3rem;
+`;
+
+const SettingView = () => {
+  return <Content></Content>;
+};
+
+export default SettingView;

src/components/pages/home.jsx

@@ -10,6 +10,7 @@ import FileView from "../organisms/fileView";
 import OrganizationView from "../organisms/organizationView";
 
 import { sideMenuState } from "../../atom";
+import SettingView from "../organisms/settingView";
 
 const Home = () => {
   const [login, setLogin] = useRecoilState(loginState);
@@ -31,6 +32,7 @@ const Home = () => {
         <SideMenu />
         {sideMenu === FOLDER && <FileView />}
         {sideMenu === GROUPS && <OrganizationView />}
+        {sideMenu === SETTING && <SettingView />}
       </FlexRow>
     </Body>
   );