Merge branch 'issue/#34' into dev

src/components/common/Drawer/Drawer.tsx

@@ -31,6 +31,7 @@ import {
   clearSemester,
   clearStudentName,
 } from 'src/redux/slices/filter';
+import { setOpen, setPinned } from 'src/redux/slices/drawer';
 
 const drawerWidth = 240;
 
@@ -94,14 +95,30 @@ export default function MiniDrawer() {
     dispatch(clearDepartment());
   };
   const theme = useTheme();
-  const [open, setOpen] = React.useState(false);
+
+  const pinned = useSelector((state) => state.drawer.pinned);
+  const open = useSelector((state) => state.drawer.open);
+  const drawerPinnedOff = () => dispatch(setPinned(false));
+  const drawerPinnedOn = () => dispatch(setPinned(true));
+  const drawerOpen = () => dispatch(setOpen(true));
+  const drawerClose = () => dispatch(setOpen(false));
 
   const handleDrawerOpen = () => {
-    setOpen(true);
+    drawerOpen();
   };
 
   const handleDrawerClose = () => {
-    setOpen(false);
+    if (!pinned) drawerClose();
+  };
+
+  const handleDrawerPinOn = () => {
+    handleDrawerOpen();
+    drawerPinnedOn();
+  };
+
+  const handleDrawerPinOff = () => {
+    handleDrawerClose();
+    drawerPinnedOff();
   };
 
   const linkConverter = (num) => {
@@ -135,11 +152,11 @@ export default function MiniDrawer() {
     <Box sx={{ display: 'flex' }}>
       <CssBaseline />
       {/* 메뉴 아이콘과 제목을 가지고 있는 헤더 */}
-      <MileageHeader open={open} handleDrawerOpen={handleDrawerOpen} />
+      <MileageHeader open={open} handleDrawerOpen={handleDrawerPinOn} />
       {/* 사이드바 */}
       <Drawer variant="permanent" open={open}>
         <DrawerHeader>
-          <IconButton onClick={handleDrawerClose}>
+          <IconButton onClick={handleDrawerPinOff}>
             {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
           </IconButton>
         </DrawerHeader>

src/layouts/main/MainLayout.js

@@ -7,6 +7,7 @@ import Header from 'src/components/common/Header';
 // @mui
 import { Box } from '@mui/material';
 import ExcelExport from 'src/components/excel/ExcelExport';
+import { useSelector } from 'react-redux';
 //
 
 // const Header = dynamic(() => import('./Header'), { ssr: false });
@@ -19,25 +20,25 @@ MainLayout.propTypes = {
 };
 
 export default function MainLayout({ children }) {
-  // const { pathname } = useRouter();
-
-  // const isHome = pathname === '/';
-
   return (
-    <Box sx={{}}>
+    <Box>
       <Header />
-      <MiniDrawer />
-
-      <Box
-        component="main"
-        sx={{
-          pl: '100px',
-          mr: '40px',
-        }}
-      >
-        {children}
-
-        <ExcelExport />
+
+      <Box sx={{ display: 'flex', width: '100%' }}>
+        <MiniDrawer />
+
+        <Box
+          component="main"
+          sx={{
+            pt: '50px',
+            pr: '50px',
+            width: '100%',
+          }}
+        >
+          {children}
+
+          <ExcelExport />
+        </Box>
       </Box>
 
       {/* <Footer /> */}

src/redux/rootReducer.js

@@ -13,6 +13,7 @@ import dataReducer from './slices/data';
 import componentReducer from './slices/component';
 import filterListReducer from './slices/filterList';
 import chartReducer from './slices/chart';
+import drawerReducer from './slices/drawer';
 
 // ----------------------------------------------------------------------
 
@@ -38,7 +39,7 @@ export const rootPersistConfig = {
   key: 'root',
   storage,
   keyPrefix: 'redux-',
-  blacklist: ['filter', 'modal', 'data'],
+  blacklist: ['filter', 'modal', 'data', 'drawer'],
   whitelist: ['component', 'filterList'],
 };
 
@@ -56,6 +57,7 @@ const rootReducer = combineReducers({
   component: componentReducer,
   filterList: filterListReducer,
   chart: chartReducer,
+  drawer: drawerReducer,
 });
 
 export default rootReducer;

src/redux/slices/drawer.js

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  pinned: false,
+  open: false,
+};
+
+const slice = createSlice({
+  name: 'drawer',
+  initialState,
+  reducers: {
+    setPinned: (state, action) => {
+      state.pinned = action.payload;
+    },
+    setOpen: (state, action) => {
+      state.open = action.payload;
+    },
+  },
+});
+
+// Reducer
+export const { setPinned, setOpen } = slice.actions;
+export default slice.reducer;