Merge pull request #98 from PLADI-ALM/fix/PDW-63-sidebar

[PDW-63/fix] 기획 변경으로 인한 사이드바 및 path 변경

src/App.js

@@ -34,9 +34,9 @@ function App() {
         <Route element={<SidebarLayout />}>
           <Route path="/officeBooking" element={<SelectOffice title="회의실 예약" />} />
           <Route path="/officeBooking/:officeId" element={<OfficeBooking isCheck='false' />} />
-          <Route path="/bookings" element={<BookedList title="예약 내역" />} />
-          <Route path="/bookings/offices/:bookingId" element={<OfficeBookingCheck isAdmin={false} />} />
-          <Route path='/bookings/resources/:bookingId' element={<ResourceBookingCheck />} />
+          <Route path="/my/bookings/offices" element={<BookedList title="회의실 예약 내역" />} />
+          <Route path="/my/bookings/offices/:bookingId" element={<OfficeBookingCheck isAdmin={false} />} />
+          <Route path='/my/bookings/resources/:bookingId' element={<ResourceBookingCheck />} />
           <Route path='/resourceBooking' element={<SelectResource title="자원 예약" />} />
           <Route path='/resourceBooking/:resourceId' element={<ResourceBooking />} />
           <Route path='/manage/offices' element={<OfficeManage title="회의실 관리" />} />

src/components/sidebar/MainMenu.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled } from 'styled-components';
-import ToggleActiveIcon from 'assets/images/sidebarIcon/toggleActive.svg'
-import ToggleInactiveIcon from 'assets/images/sidebarIcon/toggleInactive.svg'
+import ToggleActiveIcon from 'assets/images/sidebarIcon/ToggleActive.svg'
+import ToggleInactiveIcon from 'assets/images/sidebarIcon/ToggleInactive.svg'
 import { InactiveMenuLine, ActiveMenuLine } from './MenuLineStyle';
 
 

src/components/sidebar/MenuLineStyle.js

@@ -3,12 +3,12 @@ import { Link } from "react-router-dom";
 
 export const InactiveMenuLine = styled(Link)`
     padding: 3px 20px;
-    margin-bottom: 18px;
+    margin-bottom: 13px;
     cursor: pointer;
     display: flex;
     align-items: center;
     color: #717171;
-    font-size: 20px;
+    font-size: 19px;
     border-left: 5px solid white;
     &:hover {
         color: #8741CB;

src/components/sidebar/Sidebar.js

@@ -4,10 +4,10 @@ import { useLocation, Link } from "react-router-dom";
 import logo from 'assets/images/imgNameLogo.svg';
 import MainMenu from "components/sidebar/MainMenu";
 import SubMenu from "components/sidebar/SubMenu";
-import { MAIN_MENUS, MAIN_PATH, MANAGER_MAIN_MENUS } from "constants/Path";
+import { MAIN_MENUS, MAIN_PATH, ADMIN_MAIN_MENUS } from "constants/Path";
 import { Icon } from 'components/sidebar/MainMenu';
-import MyInfoIcon from 'assets/images/sidebarIcon/myInfoIcon.svg'
-import LogoutIcon from 'assets/images/sidebarIcon/logoutIcon.svg'
+import MyInfoIcon from 'assets/images/sidebarIcon/MyInfoIcon.svg'
+import LogoutIcon from 'assets/images/sidebarIcon/LogoutIcon.svg'
 import { removeAllCookies } from 'utils/CookiesUtil';
 import { getToken, isManager, navigateToLogin } from 'utils/IsLoginUtil';
 import { UsersAxios } from 'api/AxiosApi';
@@ -126,12 +126,9 @@ function Sidebar() {
     // 관리자 메뉴
     const managerMenus =
         <>
-            <MainMenu info={MANAGER_MAIN_MENUS[0]} active={useIsMenuActive(MANAGER_MAIN_MENUS[0].path)} />
-            <MainMenu info={MANAGER_MAIN_MENUS[1]} active={useIsMenuActive(MANAGER_MAIN_MENUS[1].path)} />
-            <MainMenu info={MANAGER_MAIN_MENUS[2]} active={useIsMenuActive(MANAGER_MAIN_MENUS[2].path)} />
-            <MainMenu info={MANAGER_MAIN_MENUS[3]} active={useIsMenuActive(MANAGER_MAIN_MENUS[3].path)} />
-            <SubMenus active={useIsSubMenuActive(MANAGER_MAIN_MENUS[3].subMenus)}>
-                {MANAGER_MAIN_MENUS[3].subMenus.map(sub => { return (<SubMenu path={sub.path} name={sub.name} />) })}
+            <MainMenu info={ADMIN_MAIN_MENUS[0]} active={useIsSubMenuActive(ADMIN_MAIN_MENUS[0].subMenus)} />
+            <SubMenus active={useIsSubMenuActive(ADMIN_MAIN_MENUS[0].subMenus)}>
+                {ADMIN_MAIN_MENUS[0].subMenus.map(sub => { return (<SubMenu path={sub.path} name={sub.name} />) })}
             </SubMenus>
         </>
 
@@ -148,8 +145,12 @@ function Sidebar() {
                 <SubMenus active={useIsSubMenuActive(MAIN_MENUS[0].subMenus)}>
                     {MAIN_MENUS[0].subMenus.map(sub => { return (<SubMenu path={sub.path} name={sub.name} />) })}
                 </SubMenus>
-                <MainMenu info={MAIN_MENUS[1]} active={useIsMenuActive(MAIN_MENUS[1].path)} />
+                <MainMenu info={MAIN_MENUS[1]} active={useIsSubMenuActive(MAIN_MENUS[1].subMenus)} />
+                <SubMenus active={useIsSubMenuActive(MAIN_MENUS[1].subMenus)}>
+                    {MAIN_MENUS[1].subMenus.map(sub => { return (<SubMenu path={sub.path} name={sub.name} />) })}
+                </SubMenus>
                 <MainMenu info={MAIN_MENUS[2]} active={useIsMenuActive(MAIN_MENUS[2].path)} />
+                <MainMenu info={MAIN_MENUS[3]} active={useIsMenuActive(MAIN_MENUS[3].path)} />
 
                 {/* 관리자 메뉴 */}
                 {isManager() ? managerMenus : null}

src/constants/Path.js

@@ -1,40 +1,44 @@
-import BookingActiveIcon from 'assets/images/sidebarIcon/bookingActive.svg'
-import BookingInactiveIcon from 'assets/images/sidebarIcon/bookingInactive.svg'
-import EquipmentActiveIcon from 'assets/images/sidebarIcon/equipmentActive.svg'
-import EquipmentInactiveIcon from 'assets/images/sidebarIcon/equipmentInactive.svg'
-import ArchivingActiveIcon from 'assets/images/sidebarIcon/archivingActive.svg'
-import ArchivingInactiveIcon from 'assets/images/sidebarIcon/archivingInactive.svg'
-import EmployeeActiveIcon from 'assets/images/sidebarIcon/employeeActive.svg'
-import EmployeeInactiveIcon from 'assets/images/sidebarIcon/employeeInactive.svg'
-import OfficeActiveIcon from 'assets/images/sidebarIcon/officeActive.svg'
-import OfficeInactiveIcon from 'assets/images/sidebarIcon/officeInactive.svg'
-import ResourceActiveIcon from 'assets/images/sidebarIcon/resourceActive.svg'
-import ResourceInactiveIcon from 'assets/images/sidebarIcon/resourceInactive.svg'
-import BookingManageActiveIcon from 'assets/images/sidebarIcon/bookingManageActive.svg'
-import BookingManageInactiveIcon from 'assets/images/sidebarIcon/bookingManageInactive.svg'
+import BookingActiveIcon from 'assets/images/sidebarIcon/BookingActive.svg'
+import BookingInactiveIcon from 'assets/images/sidebarIcon/BookingInactive.svg'
+import MyBookingActiveIcon from 'assets/images/sidebarIcon/MyBookingActive.svg'
+import MyBookingInactiveIcon from 'assets/images/sidebarIcon/MyBookingInactive.svg'
+import EquipmentActiveIcon from 'assets/images/sidebarIcon/EquipmentActive.svg'
+import EquipmentInactiveIcon from 'assets/images/sidebarIcon/EquipmentInactive.svg'
+import ArchivingActiveIcon from 'assets/images/sidebarIcon/ArchivingActive.svg'
+import ArchivingInactiveIcon from 'assets/images/sidebarIcon/ArchivingInactive.svg'
+import AdminActiveIcon from 'assets/images/sidebarIcon/AdminActive.svg'
+import AdminInactiveIcon from 'assets/images/sidebarIcon/AdminInactive.svg'
 
 export const BOOKING_MENUS = [
     { name: '회의실 예약', path: '/officeBooking' },
-    { name: '자원 예약', path: '/resourceBooking' },
-    { name: '예약 내역', path: '/bookings' }
+    { name: '장비 예약', path: '/resourceBooking' },
+    { name: '차량 내역', path: '/carBooking' }
+]
+
+export const MY_BOOKING_MENUS = [
+    { name: '회의실 예약 내역', path: '/my/bookings/offices' },
+    { name: '장비 예약 내역', path: '/my/bookings/resources' },
+    { name: '차량 내역 내역', path: '/my/bookings/cars' }
 ]
 
 export const MAIN_MENUS = [
     { name: '예약', path: '/officeBooking', subMenus: BOOKING_MENUS, icons: [BookingActiveIcon, BookingInactiveIcon] },
-    { name: '비품 내역', path: '/resources', subMenus: null, icons: [EquipmentActiveIcon, EquipmentInactiveIcon] },
+    { name: 'My 예약', path: '/my/bookings/offices', subMenus: MY_BOOKING_MENUS, icons: [MyBookingActiveIcon, MyBookingInactiveIcon] },
+    { name: '비품 내역', path: '/equipments', subMenus: null, icons: [EquipmentActiveIcon, EquipmentInactiveIcon] },
     { name: '자료 아카이빙', path: '/archiving', subMenus: null, icons: [ArchivingActiveIcon, ArchivingInactiveIcon] }
 ]
 
-export const MANAGER_BOOKING_MENUS = [
-    { name: '회의실 예약 내역', path: '/manage/officeBooking' },
-    { name: '자원 예약 내역', path: '/manage/resourceBooking' }
+export const ADMIN_MENUS = [
+    { name: '직원 관리', path: '/manage/users' },
+    { name: '회의실 관리', path: '/manage/offices' },
+    { name: '자원 관리', path: '/manage/resources' },
+    { name: '회의실예약 관리', path: '/manage/officeBooking' },
+    { name: '자원 예약 관리', path: '/manage/resourceBooking' },
+    { name: '차량 예약 관리', path: '/manage/carBooking' }
 ]
 
-export const MANAGER_MAIN_MENUS = [
-    { name: '직원 관리', path: '/manage/users', subMenus: null, icons: [EmployeeActiveIcon, EmployeeInactiveIcon] },
-    { name: '회의실 관리', path: '/manage/offices', subMenus: null, icons: [OfficeActiveIcon, OfficeInactiveIcon] },
-    { name: '자원 관리', path: '/manage/resources', subMenus: null, icons: [ResourceActiveIcon, ResourceInactiveIcon] },
-    { name: '예약 관리', path: '/manage/officeBooking', subMenus: MANAGER_BOOKING_MENUS, icons: [BookingManageActiveIcon, BookingManageInactiveIcon] }
+export const ADMIN_MAIN_MENUS = [
+    { name: '관리자', path: '/manage/users', subMenus: ADMIN_MENUS, icons: [AdminActiveIcon, AdminInactiveIcon] }
 ]
 
 export const MAIN_PATH = '/officeBooking'

src/pages/booking/bookedList/BookedLine.js

@@ -36,7 +36,7 @@ function BookedLine(props) {
     return (
         <>
             <BookedLineTr>
-                <td width="30%"><Link to={`/bookings/${props.type}/${props.id}`}>{props.name}({props.info})</Link></td>
+                <td width="30%"><Link to={`/my/bookings/${props.type}/${props.id}`}>{props.name}({props.info})</Link></td>
                 <td width="30%">{props.start} ~ {props.end}</td>
                 <td width="10%"><StatusContainer isCheck={'true'} background={status.background}>
                     <StatusCircle color={status.color} />

src/pages/booking/bookedList/BookedList.js

@@ -128,8 +128,8 @@ function BookedList(props) {
                                 <BookedLineTr>
                                     <td colSpan={4}>예약 내역이 없습니다.</td>
                                 </BookedLineTr>
-                                : bookings.map((booking, index) =>
-                                    <BookedLine key={index}
+                                : bookings.map((booking) =>
+                                    <BookedLine key={booking.id}
                                         id={booking.id}
                                         name={booking.name}
                                         info={booking.detailInfo}