Merge pull request #124 from PLADI-ALM/fix/PDW-73-my-booking-column

[PDW-73/fix] 예약 내역 관리 컬럼 수정
PLADI-ALM · Nov 6, 2023 · 7a219b0 · 7a219b0
2 parents 559a007 + 291ef88
commit 7a219b0
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 52 deletions.
diff --git a/src/components/searchBar/ManageSearchBar.js b/src/components/searchBar/ManageSearchBar.js
@@ -15,7 +15,7 @@ const Container = styled.div`
 `
 
 const ManageSearchContainer = styled.div`
-  width: 85%;
+  flex: 1;
   height: 100%;
   display: flex;
   align-items: center;
@@ -33,17 +33,15 @@ const ManageSearchImage = styled.img`
 const ManageSearchText = styled.input`
   padding-left: 10px;
   font-size: 18px;
-  width: 100%;
   height: 100%;
   background: none;
   border: none;
   outline: none;
 `
 
 export const ManageAddButton = styled.button`
-  width: 160px;
   height: 100%;
-  padding: 10px;
+  padding: 10px 15px;
   margin-left: 10px;
   border: none;
   border-radius: 8px;
@@ -52,20 +50,17 @@ export const ManageAddButton = styled.button`
   align-items: center;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   cursor: pointer;
+  font-size: 17px;
+  color: white;
+  white-space: nowrap;
 `
 
 export const ManageAddButtonImage = styled.img`
   width: 16px;
   height: 16px;
   border-radius: 12px;
-  border: 1px dashed var(--gray-300, #D0D5DD);
-  margin: 0 5px;
-`
-
-export const ManageAddButtonLabel = styled.text`
-  margin: auto;
-  color: white;
-  font-size: 17px;
+  border: 1px dashed var(--gray-300, #FFF);
+  margin-right: 10px;
 `
 
 function ManageSearchBar(props) {
@@ -88,7 +83,7 @@ function ManageSearchBar(props) {
             }
             <ManageAddButton onClick={props.btnClick}>
                 <ManageAddButtonImage src={SearchButtonImage}/>
-                <ManageAddButtonLabel>{props.buttonTitle}</ManageAddButtonLabel>
+                {props.buttonTitle}
             </ManageAddButton>
         </Container>
     );

diff --git a/src/pages/admin/officeBookings/OfficeBookingManage.js b/src/pages/admin/officeBookings/OfficeBookingManage.js
@@ -9,14 +9,12 @@ import RangeImage from "../../../assets/images/RangeArrow.svg"
 import { getToken } from "utils/IsLoginUtil";
 import { basicError } from 'utils/ErrorHandlerUtil';
 
-
 const RangeImg = styled.img`
     width: 20px;
     height: 20px;
     margin-right: 20px;
 `
 
-
 function OfficeBookingManage(props) {
 
     const [bookingOffices, SetBookingOffices] = useState([]);
@@ -35,7 +33,7 @@ function OfficeBookingManage(props) {
         .catch((error) => {basicError(error)})
     }
 
-    const chnageRange = () => {
+    const changeSort = () => {
         alert("Q")
     }
 
@@ -53,23 +51,23 @@ function OfficeBookingManage(props) {
                             <tr>
                                 <th width="15%">회의실명</th>
                                 <th width="10%">위치</th>
-                                <th width="20%"><RangeImg onClick={chnageRange} src={RangeImage}/>예약일시</th>
-                                <th width="10%">요청자</th>
+                                <th width="20%"><RangeImg onClick={changeSort} src={RangeImage}/>예약일시</th>
+                                <th width="15%">예약자</th>
                                 <th width="15%">상태</th>
-                                <th width="20%">설정</th>
+                                <th width="15%">설정</th>
                             </tr>
                         </BookedThead>
                         <tbody>
                             {bookingOffices.map((bookingOffice, index) => 
                                 <OfficeBookingManageCell 
                                     key={index} 
                                     id={bookingOffice.id}
-                                    name={bookingOffice.name}  
-                                    position={bookingOffice.position}
-                                    detailInfo={bookingOffice.detailInfo} 
-                                    startDateTime={bookingOffice.startDateTime} 
-                                    endDateTime={bookingOffice.endDateTime} 
-                                    requester={bookingOffice.requester} 
+                                    name={bookingOffice.name}
+                                    detailInfo={bookingOffice.detailInfo}
+                                    startDateTime={bookingOffice.startDateTime}
+                                    endDateTime={bookingOffice.endDateTime}
+                                    reservatorName={bookingOffice.reservatorName}
+                                    reservatorPhone={bookingOffice.reservatorPhone}
                                     status={bookingOffice.status} />
                             )}
                         </tbody>

diff --git a/src/pages/admin/officeBookings/OfficeBookingManageCell.js b/src/pages/admin/officeBookings/OfficeBookingManageCell.js
@@ -64,15 +64,15 @@ function OfficeBookingManageCell(props) {
         <BookedLineTr>
             <td width="15%">{props.name}</td>
             <td width="10%">{props.detailInfo}</td>
-            <td width="20%">{props.startDateTime} ~ <br/>{props.endDateTime}</td>
-            <td width="10%">{props.requester} ({props.position})</td>
+            <td width="20%">{props.startDateTime} ~<br/>{props.endDateTime}</td>
+            <td width="15%">{props.reservatorName}<br/>({props.reservatorPhone})</td>
             <td width="15%">
                 <StatusContainer isCheck={'true'} background={status.background}>
                     <StatusCircle color={status.color} />
                     <StatusText color={status.color}>{props.status}</StatusText>
                 </StatusContainer>
             </td>
-            <td width="20%">
+            <td width="15%">
                 {status === BOOKED ? usingButton : cancelButton}
             </td>
         </BookedLineTr>

diff --git a/src/pages/admin/resource/ResourceManageAdd.js b/src/pages/admin/resource/ResourceManageAdd.js
@@ -1,12 +1,12 @@
-import React,{ useState, useEffect, useRef } from "react";
+import React, {useEffect, useRef, useState} from "react";
 import styled from "styled-components";
 
-import { RightContainer, TitleText, WhiteContainer } from "components/rightContainer/RightContainer";
-import { Bar } from "../../basic/myBookings/BookedList";
-import { ManageAddButton, ManageAddButtonImage, ManageAddButtonLabel } from "components/searchBar/ManageSearchBar";
+import {RightContainer, TitleText, WhiteContainer} from "components/rightContainer/RightContainer";
+import {Bar} from "../../basic/myBookings/BookedList";
+import {ManageAddButton, ManageAddButtonImage} from "components/searchBar/ManageSearchBar";
 
-import { getToken } from "utils/IsLoginUtil";
-import { basicError } from "utils/ErrorHandlerUtil";
+import {getToken} from "utils/IsLoginUtil";
+import {basicError} from "utils/ErrorHandlerUtil";
 import {AdminResourcesAxios, ImageUrlAxios, ResourcesAxios, UsersAxios} from "api/AxiosApi";
 
 import AddImageImage from "../../../assets/images/AddImage.svg"
@@ -478,7 +478,7 @@ function ResourceManageAdd(props) {
                     <AddButtonContainer>
                         <ManageAddButton onClick={getImageUrl}>
                             <ManageAddButtonImage src={SearchButtonImage} />
-                            <ManageAddButtonLabel>{resourceInfo === null ? "대여 장비 추가" : "대여 장비 수정"}</ManageAddButtonLabel>
+                            {resourceInfo === null ? "대여 장비 추가" : "대여 장비 수정"}
                         </ManageAddButton>
                     </AddButtonContainer>
 

diff --git a/src/pages/admin/resourceBookings/ResourceBookingManage.js b/src/pages/admin/resourceBookings/ResourceBookingManage.js
@@ -41,24 +41,24 @@ function ResourceBookingManage(props) {
                         <BookedThead>
                             <tr>
                                 <th width="15%">장비명</th>
-                                <th width="10%">카테고리</th>
-                                <th width="20%">예약일자</th>
-                                <th width="10%">요청자</th>
+                                <th width="10%">보관장소</th>
+                                <th width="20%">예약일시</th>
+                                <th width="15%">예약자</th>
                                 <th width="15%">상태</th>
-                                <th width="20%">설정</th>
+                                <th width="15%">설정</th>
                             </tr>
                         </BookedThead>
                         <tbody>
                             {bookingResources.map((bookingResource, index) => 
-                                <ResourceBookingManageCell 
-                                    key={index} 
+                                <ResourceBookingManageCell
+                                    key={index}
                                     id={bookingResource.id}
                                     name={bookingResource.name}
-                                    position={bookingResource.position}  
-                                    category={bookingResource.category} 
-                                    startDateTime={bookingResource.startDateTime} 
-                                    endDateTime={bookingResource.endDateTime} 
-                                    requester={bookingResource.requester} 
+                                    location={bookingResource.location}
+                                    startDateTime={bookingResource.startDateTime}
+                                    endDateTime={bookingResource.endDateTime}
+                                    reservatorName={bookingResource.reservatorName}
+                                    reservatorPhone={bookingResource.reservatorPhone}
                                     status={bookingResource.status}
                                     refresh={getResourceBooking} />
                             )}

diff --git a/src/pages/admin/resourceBookings/ResourceBookingManageCell.js b/src/pages/admin/resourceBookings/ResourceBookingManageCell.js
@@ -97,8 +97,6 @@ function ResourceBookingManageCell(props) {
         <SettingButton onClick={returnResource}>반납</SettingButton> | <SettingButton onClick={moveToDetail}>상세보기</SettingButton>
     </SettingButtonContainer>)
 
-
-
     var bookingButton = (
         <SettingButtonContainer>
             <SettingButton onClick={rejectResource}>반려</SettingButton> | <SettingButton onClick={moveToDetail}>상세보기</SettingButton>
@@ -108,16 +106,16 @@ function ResourceBookingManageCell(props) {
     return (
         <BookedLineTr>
             <td width="15%">{props.name}</td>
-            <td width="10%">{props.category}</td>
-            <td width="20%">{props.startDateTime} ~ {props.endDateTime}</td>
-            <td width="10%">{props.requester} ({props.position})</td>
+            <td width="10%">{props.location}</td>
+            <td width="20%">{props.startDateTime} ~<br/>{props.endDateTime}</td>
+            <td width="15%">{props.reservatorName}<br/>({props.reservatorPhone})</td>
             <td width="15%">
                 <StatusContainer isCheck={'true'} background={status.background}>
                     <StatusCircle color={status.color} />
                     <StatusText color={status.color}>{props.status}</StatusText>
                 </StatusContainer>
             </td>
-            <td width="20%">
+            <td width="15%">
                 {status === WAITING ? watingButton :
                     status === USING ? usingButton :
                         status === BOOKED ? bookingButton :cancelButton