[EC-57] refactor: 사용자 권한에 따른 사이드바 자동화 추가 (#41)

Author: imdla

client/src/pages/login/Login.jsx

@@ -6,7 +6,7 @@ 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';
 export default function Login() {
   const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
   const dispatch = useDispatch();
@@ -35,6 +35,7 @@ export default function Login() {
           ...response.data.data,
           accessToken: accessToken,
         }),
+        setRole(response.data.data),
       );
       navigate('/', { replace: true });
     } catch (error) {
@@ -82,7 +83,6 @@ export default function Login() {
           title="로그인"
           isEnable={isLoginButtonEnable}
         ></MainButton>
-
       </div>
     </div>
   );

client/src/store/slices/authSlice.js

@@ -37,13 +37,11 @@ const authSlice = createSlice({
         phoneNumber: action.payload.phoneNumber || '',
         lastLoginDate: action.payload.lastLoginDate || '',
       };
-
     },
     logout: (state, action) => {
       state.accessToken = '';
       state.isLoggedIn = false;
       state.user = { ...initialState.user };
-
     },
   },
 });

client/src/store/slices/sideBarItemSlice.js

@@ -1,8 +1,9 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { login, logout } from './authSlice';
+import { jwtDecode } from 'jwt-decode';
 
 const initialState = {
-  nav: '출결',
+  nav: '',
   tab: 0,
 };
 
@@ -24,7 +25,10 @@ const sideBarItemSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(login, (state, action) => {
-        state.nav = action.payload.role === 'STUDENT' ? '출석' : '출결';
+        const accessToken = action.payload.accessToken.replace('Bearer ', '');
+        const decodedToken = jwtDecode(accessToken);
+        const role = decodedToken.roles[0];
+        state.nav = role === 'STUDENT' ? '출석' : '출결';
       })
       .addCase(logout, (state) => {
         state.nav = '';