[EC-58] FE/refactor: 권한에 따른 자동화 추가 (#50)

imdla · web-flow · commit 946e4a598654 · 2025-03-22T23:37:04.000+09:00
* [EC-58] refactor: sideBarItem 자동 전환 기능 구현

* [EC-58] refactor: 권한에 따른 sidebarItemIcon 자동 적용 추가

* [EC-58] refactor: sidebar 이동에 따른 자동화 기능으로 수정

* [EC-58] chore: utils 파일 간소화

* [EC-58] refactor: sidebar와 tab에 따른 페이지 이동 자동화 추가

* [EC-58] refactor: path 변경에 따른 navigate 이동

* [EC-58] style: utils switch문에서 object 형식으로 변환
diff --git a/client/src/components/sideBar/SideBar.jsx b/client/src/components/sideBar/SideBar.jsx
@@ -2,19 +2,17 @@ import React, { useEffect, useState, useRef } from 'react';
 import { useSelector } from 'react-redux';
 
 import styles from './SideBar.module.css';
-import { studentSideBarList, staffSideBarList } from '../../utils/sideBarList';
-import { roleList } from '../../utils/dashBoardList';
 
 import SideBarItem from './sidebarItem/SidebarItem';
 import MainButton from '../buttons/mainButton/MainButton';
 
 export default function SideBar() {
   const infoRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
-  const [itemList, setItemList] = useState([]);
-  const { name, role, courseName, phoneNumber, birthDate, email } = useSelector(
+  const { name, courseName, phoneNumber, birthDate, email } = useSelector(
     (state) => state.auth.user,
   );
+  const { sidebarItemList } = useSelector((state) => state.sideBarItem);
 
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -29,15 +27,7 @@ export default function SideBar() {
     };
   }, []);
 
-  useEffect(() => {
-    if (role === roleList[0]) {
-      setItemList(studentSideBarList);
-    } else {
-      setItemList(staffSideBarList);
-    }
-  }, [role]);
-
-  const sideBarItems = itemList.map((item, index) => {
+  const sideBarItems = sidebarItemList.map((item, index) => {
     return <SideBarItem key={index} index={index} item={item}></SideBarItem>;
   });
 
diff --git a/client/src/components/sideBar/SideBar.module.css b/client/src/components/sideBar/SideBar.module.css
@@ -37,7 +37,7 @@
 }
 
 .memberInfoImg img {
-  width: 100%;
+  min-width: 100%;
   height: 100%;
 }
 
diff --git a/client/src/components/sideBar/sidebarItem/SidebarItem.jsx b/client/src/components/sideBar/sidebarItem/SidebarItem.jsx
@@ -7,8 +7,8 @@ import { updateNav } from '../../../store/slices/sideBarItemSlice';
 export default function SidebarItem({ index, item }) {
   const dispatch = useDispatch();
 
-  const currentSideBarItem = useSelector((state) => state.sideBarItem.nav);
-  const isActive = currentSideBarItem === item;
+  const { nav } = useSelector((state) => state.sideBarItem);
+  const isActive = nav === item;
 
   const handleClick = () => {
     dispatch(updateNav(item));
diff --git a/client/src/components/sideBar/sidebarItemIcon/SidebarItemIcon.jsx b/client/src/components/sideBar/sidebarItemIcon/SidebarItemIcon.jsx
@@ -1,24 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import styles from './SidebarItemIcon.module.css';
-import { studentSideBarIconList, staffSideBarIconList } from '../../../utils/sideBarList';
-import { roleList } from '../../../utils/dashBoardList';
 
 export default function SidebarItemIcon({ isActive, index }) {
-  const { role } = useSelector((state) => state.auth.user);
-  const [icons, setIcons] = useState([]);
-
-  useEffect(() => {
-    if (role === roleList[0]) {
-      setIcons(studentSideBarIconList);
-    } else {
-      setIcons(staffSideBarIconList);
-    }
-  }, [role]);
+  const { sidebarIconList } = useSelector((state) => state.sideBarItem);
 
   return (
     <div className={styles.iconBox}>
-      <img className={isActive ? `${styles.active}` : ''} src={icons[index]} alt="icon" />
+      <img className={isActive ? `${styles.active}` : ''} src={sidebarIconList[index]} alt="icon" />
     </div>
   );
 }
diff --git a/client/src/components/tab/Tab.jsx b/client/src/components/tab/Tab.jsx
@@ -1,25 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import styles from './Tab.module.css';
 import TabButton from './tabButton/TabButton';
-import { roleList } from '../../utils/dashBoardList';
-import { getStudentTabContent, getStaffTabContent } from '../../utils/tabContentList';
 
-export default function Tab({ menuType }) {
-  const [tabContents, setTabContents] = useState([]);
-  const { role } = useSelector((state) => state.auth.user);
+export default function Tab() {
+  const { tabContentsList } = useSelector((state) => state.sideBarItem);
 
-  useEffect(() => {
-    if (role === roleList[0]) {
-      const result = getStudentTabContent(menuType);
-      setTabContents(result);
-    } else {
-      const result = getStaffTabContent(menuType);
-      setTabContents(result);
-    }
-  }, [role, menuType]);
-
-  const tabContent = tabContents.map((item, index) => {
+  const tabContent = tabContentsList.map((item, index) => {
     return <TabButton key={index} index={index} item={item}></TabButton>;
   });
 
diff --git a/client/src/handler/NavigationHandler.jsx b/client/src/handler/NavigationHandler.jsx
@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+
+export default function NavigationHandler() {
+  const path = useSelector((state) => state.sideBarItem.path);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    console.log(path)
+    if (path) {
+      navigate(path);
+    }
+  }, [])
+
+  return null;
+}
diff --git a/client/src/pages/dashBoard/DashBoard.jsx b/client/src/pages/dashBoard/DashBoard.jsx
@@ -1,54 +1,27 @@
-import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { Outlet, useNavigate } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { Outlet } from 'react-router-dom';
 
 import styles from './DashBoard.module.css';
-import { roleList } from '../../utils/dashBoardList';
-import { studentSideBarList, staffSideBarList } from '../../utils/sideBarList';
-import {
-  studentNavList,
-  getStudentTabList,
-  staffNavList,
-  getStaffTabList,
-} from '../../utils/dashBoardList';
 
 import Tab from '../../components/tab/Tab';
 import SideBar from '../../components/sideBar/SideBar';
 import DashBoardItem from '../../components/dashBoardItem/DashBoardItem';
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 
 export default function DashBoard() {
+  const { path } = useSelector((state) => state.sideBarItem);
   const navigate = useNavigate();
-  const currentSideBarItem = useSelector((state) => state.sideBarItem.nav);
-  const { nav, tab } = useSelector((state) => state.sideBarItem);
-  const { role } = useSelector((state) => state.auth.user);
 
   useEffect(() => {
-    if (role === roleList[0]) {
-      const navIndex = studentSideBarList.indexOf(nav);
-
-      if (tab > 0) {
-        const tabList = getStudentTabList(nav, tab);
-        navigate(`${studentNavList[navIndex]}/${tabList}`);
-      } else {
-        navigate(`${studentNavList[navIndex]}`);
-      }
-    } else {
-      const navIndex = staffSideBarList.indexOf(nav);
-
-      if (tab > 0) {
-        const tabList = getStaffTabList(nav, tab);
-        navigate(`${staffNavList[navIndex]}/${tabList}`);
-      } else {
-        navigate(`${staffNavList[navIndex]}`);
-      }
-    }
-  }, [role, nav, tab]);
+    navigate(path);
+  }, [path]);
 
   return (
     <div className={`container ${styles.dashBoard}`}>
       <SideBar />
       <div className={styles.dashBoardBox}>
-        <Tab menuType={currentSideBarItem}></Tab>
+        <Tab />
 
         {/* TODO : dashBoardContent 내부에 대시보드 및 컴포넌트 사용 */}
         <div className={styles.dashBoardContent}>
diff --git a/client/src/pages/login/Login.jsx b/client/src/pages/login/Login.jsx
@@ -1,12 +1,15 @@
 import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+
 import styles from './Login.module.css';
-import InputBox from '../../components/inputBox/InputBox';
-import MainButton from '../../components/buttons/mainButton/MainButton';
 import { authApi } from '../../api/authApi';
-import { useDispatch, useSelector } from 'react-redux';
 import { login } from '../../store/slices/authSlice';
-import { useNavigate } from 'react-router-dom';
 import { setRole } from '../../store/slices/sideBarItemSlice';
+
+import InputBox from '../../components/inputBox/InputBox';
+import MainButton from '../../components/buttons/mainButton/MainButton';
+
 export default function Login() {
   const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
   const dispatch = useDispatch();
diff --git a/client/src/router/index.jsx b/client/src/router/index.jsx
@@ -1,4 +1,4 @@
-import { createBrowserRouter } from 'react-router-dom';
+import { Navigate, createBrowserRouter } from 'react-router-dom';
 import RootLayout from '../layout/RootLayout';
 
 import NotFound from '../pages/error/NotFound';
@@ -18,6 +18,8 @@ import StaffAttendanceAbsence from '../pages/staffAttendanceAbsence/StaffAttenda
 import StaffStudentManage from '../pages/staffStudentManage/StaffStudentManage';
 import StaffRoomReservation from '../pages/staffRoomReservation/StaffRoomReservation';
 
+import NavigationHandler from '../handler/NavigationHandler';
+
 const router = createBrowserRouter([
   {
     path: '/',
@@ -82,6 +84,14 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: '/notfound',
+        element: <NotFound />,
+      },
+      {
+        path: '*',
+        element: <Navigate to="/notfound" replace />,
+      },
     ],
   },
 ]);
diff --git a/client/src/store/slices/sideBarItemSlice.js b/client/src/store/slices/sideBarItemSlice.js
@@ -1,25 +1,40 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createAction, createSlice } from '@reduxjs/toolkit';
 import { login, logout } from './authSlice';
 import { jwtDecode } from 'jwt-decode';
 
+import {
+  studentSideBarList,
+  staffSideBarList,
+  studentSideBarIconList,
+  staffSideBarIconList,
+  getStudentTabContent,
+  getStaffTabContent,
+} from '../../utils/sideBarList';
+
+import { getStudentPath, getStaffPath } from '../../utils/dashBoardList';
+
+export const updateNav = createAction('sideBarItem/updateNav');
+export const updateTab = createAction('sideBarItem/updateTab');
+
 const initialState = {
   nav: '',
   tab: 0,
+  sidebarItemList: [],
+  sidebarIconList: [],
+  tabContentsList: [],
+  role: null,
+  path: '/',
 };
 
 const sideBarItemSlice = createSlice({
   name: 'sideBarItem',
   initialState,
   reducers: {
-    updateNav: (state, action) => {
-      state.nav = action.payload;
-      state.tab = 0;
-    },
-    updateTab: (state, action) => {
-      state.tab = action.payload;
-    },
     setRole: (state, action) => {
       state.nav = action.payload;
+      state.sidebarItemList = action.payload;
+      state.sidebarIconList = action.payload;
+      state.tabContentsList = action.payload;
     },
   },
   extraReducers: (builder) => {
@@ -28,13 +43,50 @@ const sideBarItemSlice = createSlice({
         const accessToken = action.payload.accessToken.replace('Bearer ', '');
         const decodedToken = jwtDecode(accessToken);
         const role = decodedToken.roles[0];
+
+        state.role = role;
         state.nav = role === 'STUDENT' ? '출석' : '출결';
+        state.sidebarItemList = role === 'STUDENT' ? studentSideBarList : staffSideBarList;
+        state.sidebarIconList = role === 'STUDENT' ? studentSideBarIconList : staffSideBarIconList;
+        state.tabContentsList =
+          role === 'STUDENT' ? getStudentTabContent(state.nav) : getStaffTabContent(state.nav);
+        state.path =
+          state.role === 'STUDENT'
+            ? getStudentPath(state.nav, state.tab)
+            : getStaffPath(state.nav, state.tab);
       })
       .addCase(logout, (state) => {
+        state.role = null;
         state.nav = '';
+        state.sidebarItemList = [];
+        state.sidebarIconList = [];
+        state.tabContentsList = [];
+      })
+      .addCase(updateNav, (state, action) => {
+        if (state.role) {
+          state.nav = action.payload;
+          state.tab = 0;
+          state.tabContentsList =
+            state.role === 'STUDENT'
+              ? getStudentTabContent(state.nav)
+              : getStaffTabContent(state.nav);
+          state.path =
+            state.role === 'STUDENT'
+              ? getStudentPath(state.nav, state.tab)
+              : getStaffPath(state.nav, state.tab);
+        }
+      })
+      .addCase(updateTab, (state, action) => {
+        if (state.role) {
+          state.tab = action.payload;
+          state.path =
+            state.role === 'STUDENT'
+              ? getStudentPath(state.nav, state.tab)
+              : getStaffPath(state.nav, state.tab);
+        }
       });
   },
 });
 
-export const { updateNav, updateTab, setRole } = sideBarItemSlice.actions;
+export const { setRole } = sideBarItemSlice.actions;
 export default sideBarItemSlice.reducer;
diff --git a/client/src/utils/buttonContentList.js b/client/src/utils/buttonContentList.js
@@ -6,28 +6,25 @@ export const fullWidthTitle = ['퇴근', '출석하기', '로그인'];
 // Tag
 export const tagList = ['수강중', '수료', '수강 중단'];
 
+const tagColors = {
+  green: ['출석', '수강중'],
+  yellow: ['지각', '조퇴', '수료'],
+  red: ['결석', '수강 중단'],
+};
+
 export const getTagColors = (menuType) => {
-  switch (true) {
-    case ['출석', '수강중'].includes(menuType):
-      return 'green';
-    case ['지각', '조퇴', '수료'].includes(menuType):
-      return 'yellow';
-    case ['결석', '수강 중단'].includes(menuType):
-      return 'red';
-    default:
-      return false;
-  }
+  return Object.entries(tagColors).find(([color, types]) => types.includes(menuType))?.[0] || false;
+};
+
+const clickableList = {
+  false: ['출석', '지각', '조퇴', '결석'],
+  true: ['수강중', '수료', '수강 중단'],
 };
 
 export const getIsClickable = (menuType) => {
-  switch (true) {
-    case ['출석', '지각', '조퇴', '결석'].includes(menuType):
-      return false;
-    case ['수강중', '수료', '수강 중단'].includes(menuType):
-      return true;
-    default:
-      return false;
-  }
+  return (
+    Object.entries(clickableList).find(([click, types]) => types.includes(menuType))?.[0] || false
+  );
 };
 
 // LeftLineListItem
diff --git a/client/src/utils/dashBoardList.js b/client/src/utils/dashBoardList.js
diff --git a/client/src/utils/sideBarList.js b/client/src/utils/sideBarList.js
diff --git a/client/src/utils/tabContentList.js b/client/src/utils/tabContentList.js

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`.memberInfoImg img {`
`40`		`- width: 100%;`
	`40`	`+ min-width: 100%;`
`41`	`41`	`height: 100%;`
`42`	`42`	`}`
`43`	`43`