From 3a2d363d224db023b376a617377dbe1f47ca84f2 Mon Sep 17 00:00:00 2001 From: psyeon1120 Date: Wed, 8 Nov 2023 18:59:19 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[PDW-67]=20fix:=20=ED=9A=8C=EC=9D=98?= =?UTF-8?q?=EC=8B=A4=20=EA=B4=80=EB=A6=AC=20=EC=A0=9C=EB=AA=A9=EB=B0=94=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 +- src/components/button/ImageFullButton.js | 15 +- src/components/modal/BigModal.js | 1 - .../admin/office/OfficeBookingManageDetail.js | 134 ---------------- src/pages/admin/office/OfficeManageDetail.js | 145 ++++++++++++++++++ .../admin/resource/ResourceManageDetail.js | 1 - src/pages/basic/myBookings/BookedList.js | 1 + 7 files changed, 155 insertions(+), 144 deletions(-) delete mode 100644 src/pages/admin/office/OfficeBookingManageDetail.js create mode 100644 src/pages/admin/office/OfficeManageDetail.js diff --git a/src/App.js b/src/App.js index 4c37504..3cef85c 100644 --- a/src/App.js +++ b/src/App.js @@ -16,7 +16,7 @@ import UserManage from 'pages/admin/user/UserManage'; import ResourceManage from 'pages/admin/resource/ResourceManage'; import ResourceManageAdd from "./pages/admin/resource/ResourceManageAdd"; import ResourceManageDetail from 'pages/admin/resource/ResourceManageDetail'; -import OfficeManageDetail from 'pages/admin/office/OfficeBookingManageDetail'; +import OfficeManageDetail from 'pages/admin/office/OfficeManageDetail'; function App() { diff --git a/src/components/button/ImageFullButton.js b/src/components/button/ImageFullButton.js index 5a1d90d..c56568c 100644 --- a/src/components/button/ImageFullButton.js +++ b/src/components/button/ImageFullButton.js @@ -2,13 +2,14 @@ import React from "react"; import styled from "styled-components"; const Button = styled.button` - background: none; - border: 0; - border-radius: 10px; - box-shadow: 0 4px 14px 0 #00000040; - padding: 0; - align-items: center; - display: flex; + background: none; + border: 0; + border-radius: 10px; + box-shadow: 0 4px 14px 0 #00000040; + padding: 0; + align-items: center; + display: flex; + cursor: pointer; ` const Img = styled.img` diff --git a/src/components/modal/BigModal.js b/src/components/modal/BigModal.js index 5789df2..6c366d0 100644 --- a/src/components/modal/BigModal.js +++ b/src/components/modal/BigModal.js @@ -43,7 +43,6 @@ export const ExitBtn = styled.button` background: none; width: 40px; height: 40px; - font-family: NanumSquare_ac; font-size: 40px; border: none; color: #4C4C4C; diff --git a/src/pages/admin/office/OfficeBookingManageDetail.js b/src/pages/admin/office/OfficeBookingManageDetail.js deleted file mode 100644 index 6978aa3..0000000 --- a/src/pages/admin/office/OfficeBookingManageDetail.js +++ /dev/null @@ -1,134 +0,0 @@ -import React from 'react'; -import { OfficesAxios, AdminOfficesAxios } from 'api/AxiosApi'; -import { useState, useEffect } from "react"; -import { useParams } from 'react-router-dom'; -import Capsule from 'components/capsule/Capsule'; -import { basicError } from 'utils/ErrorHandlerUtil'; -import { Bar } from 'pages/basic/myBookings/BookedList'; -import { RightContainer, WhiteContainer,TitleText } from 'components/rightContainer/RightContainer'; -import { MainTextContainer, SubTextContainer, NameSubTitleText, DetailSubTitleText } from 'components/officeBooking/SubTitleBar'; -import { getToken } from 'utils/IsLoginUtil'; -import MoreButtonIcon from "../../../assets/images/button/triple_dot_icon.svg" -import { MoreButton, OptionButton, OptionsView, InfoTable, InfoTableData } from '../resource/ResourceManageDetail'; -import OfficeInfo from 'components/card/OfficeInfo'; - -function OfficeManageDetail() { - let { officeId } = useParams() - - const [isShowingOptions, setOptionViewShowing] = useState(false) - const [officeInfo, setOfficeInfo] = useState([]) - const [bookingsInfo, setBookingsInfo] = useState([]) - - const getOfficeInfo = () => { - OfficesAxios.get(`/${officeId}`, { - headers: { - Authorization: getToken() - } - }) - .then((Response)=>{ setOfficeInfo(Response.data.data) }) - .catch((Error)=>{ - basicError(Error) - console.log(Error) - window.alert("회의실 정보를 불러올 수 없습니댜.") - window.history.back() - }) - } - - const getOfficeBookingListInfo = () => { - AdminOfficesAxios.get(`offices/${officeId}`, { - headers: { - Authorization: getToken() - } - }) - .then((Response)=>{ - setBookingsInfo(Response.data.data.officesLists) - }) - .catch((Error)=>{ - basicError(Error) - console.log(Error) - window.alert("예약 정보를 불러올 수 없습니댜.") - window.history.back() - }) - } - - const deleteResource = () => { - if (window.confirm("회의실을 삭제하시겠습니까?")) { - AdminOfficesAxios.delete(`${officeId}`, { - headers: { - Authorization: getToken() - } - }) - .then((Response)=>{ - if(Response.data.status === 200) { - alert('회의실을 성공적으로 삭제하였습니다.') - window.history.back() - } - }) - .catch((Error)=>{ - basicError(Error) - console.log(Error) - }) - setOptionViewShowing(false) - } - } - - useEffect(() => { - getOfficeInfo() - getOfficeBookingListInfo() - }, []); - - return - 회의실 관리 - - - - - {officeInfo.name} - - - {officeInfo.location} - - { setOptionViewShowing(!isShowingOptions) }}> - 더보기 - - - { }}>수정 - 삭제 - - - - - -
- -
- - - - 요청자 - 예약일자 - 목적 - 상태 - - {bookingsInfo.map(function(info){ - return ( - - {info.reservatorName} ({info.reservatorPhone}) - {info.startDateTime} ~ {info.endDateTime} - {info.goal} - {info.bookingStatus} - - ) - })} - - - - -} -export default OfficeManageDetail; diff --git a/src/pages/admin/office/OfficeManageDetail.js b/src/pages/admin/office/OfficeManageDetail.js new file mode 100644 index 0000000..dac8ae7 --- /dev/null +++ b/src/pages/admin/office/OfficeManageDetail.js @@ -0,0 +1,145 @@ +import React from 'react'; +import {OfficesAxios, AdminOfficesAxios} from 'api/AxiosApi'; +import {useState, useEffect} from "react"; +import {useParams} from 'react-router-dom'; +import Capsule from 'components/capsule/Capsule'; +import {basicError} from 'utils/ErrorHandlerUtil'; +import {Bar} from 'pages/basic/myBookings/BookedList'; +import {RightContainer, WhiteContainer, TitleText} from 'components/rightContainer/RightContainer'; +import { + MainTextContainer, + SubTextContainer, + NameSubTitleText, + DetailSubTitleText +} from 'components/officeBooking/SubTitleBar'; +import {getToken} from 'utils/IsLoginUtil'; +import MoreButtonIcon from "../../../assets/images/button/triple_dot_icon.svg" +import {MoreButton, OptionButton, OptionsView, InfoTable, InfoTableData} from '../resource/ResourceManageDetail'; +import OfficeInfo from 'components/card/OfficeInfo'; +import ImageFullButton from "../../../components/button/ImageFullButton"; + +function OfficeManageDetail() { + let {officeId} = useParams() + + const [isShowingOptions, setOptionViewShowing] = useState(false) + const [officeInfo, setOfficeInfo] = useState([]) + const [bookingsInfo, setBookingsInfo] = useState([]) + + const getOfficeInfo = () => { + OfficesAxios.get(`/${officeId}`, { + headers: { + Authorization: getToken() + } + }) + .then((Response) => { + setOfficeInfo(Response.data.data) + }) + .catch((Error) => { + basicError(Error) + console.log(Error) + window.alert("회의실 정보를 불러올 수 없습니댜.") + window.history.back() + }) + } + + const getOfficeBookingListInfo = () => { + AdminOfficesAxios.get(`offices/${officeId}`, { + headers: { + Authorization: getToken() + } + }) + .then((Response) => { + setBookingsInfo(Response.data.data.officesLists) + }) + .catch((Error) => { + basicError(Error) + console.log(Error) + window.alert("예약 정보를 불러올 수 없습니댜.") + window.history.back() + }) + } + + const deleteResource = () => { + if (window.confirm("회의실을 삭제하시겠습니까?")) { + AdminOfficesAxios.delete(`${officeId}`, { + headers: { + Authorization: getToken() + } + }) + .then((Response) => { + if (Response.data.status === 200) { + alert('회의실을 성공적으로 삭제하였습니다.') + window.history.back() + } + }) + .catch((Error) => { + basicError(Error) + console.log(Error) + }) + setOptionViewShowing(false) + } + } + + useEffect(() => { + getOfficeInfo() + getOfficeBookingListInfo() + }, []); + + return + 회의실 관리 + + + +
+ {officeInfo.name} + {officeInfo.location} +
+ { + setOptionViewShowing(!isShowingOptions) + }}/> + + { + }}>수정 + 삭제 + + + + + +
+ +
+ + + + 요청자 + 예약일자 + 목적 + 상태 + + {bookingsInfo.map(function (info) { + return ( + + {info.reservatorName} ({info.reservatorPhone}) + {info.startDateTime} ~ {info.endDateTime} + {info.goal} + {info.bookingStatus} + + ) + })} + + + + +} + +export default OfficeManageDetail; diff --git a/src/pages/admin/resource/ResourceManageDetail.js b/src/pages/admin/resource/ResourceManageDetail.js index 77748a3..22d078d 100644 --- a/src/pages/admin/resource/ResourceManageDetail.js +++ b/src/pages/admin/resource/ResourceManageDetail.js @@ -20,7 +20,6 @@ export const MoreButton = styled.button` border: none; background-color: #2A3042; float: right; - margin: 15px 10px 5px 0; ` export const OptionsView = styled.div` display: ${props => props.isShowing ? 'table-cell' : 'none'}; diff --git a/src/pages/basic/myBookings/BookedList.js b/src/pages/basic/myBookings/BookedList.js index 8f235d5..b06a8c1 100644 --- a/src/pages/basic/myBookings/BookedList.js +++ b/src/pages/basic/myBookings/BookedList.js @@ -25,6 +25,7 @@ export const Bar = styled.div` text-align: left; align-items: center; padding: 0 30px; + justify-content: ${props => props.space ? 'space-between' : null}; ` // 네이비 바 밑의 테이블의 컨테이너 From 80075988c5a2f193a4506839fd407811ff679260 Mon Sep 17 00:00:00 2001 From: psyeon1120 Date: Wed, 8 Nov 2023 19:22:34 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[PDW-67]=20fix:=20=EC=A0=9C=EB=AA=A9?= =?UTF-8?q?=EB=B0=94=20=EB=94=94=ED=85=8C=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../officeBooking/BookingPurpose.js | 2 +- src/constants/Path.js | 1 + .../officeBookings/OfficeBookingManageCell.js | 3 +- .../admin/resource/ResourceManageDetail.js | 17 ++- .../ResourceBookingManageCell.js | 98 ++++++++--------- .../booking/office/OfficeBookingCheck.js | 101 ++++++++++-------- .../booking/resource/ResourceBookingCheck.js | 32 +++--- 7 files changed, 124 insertions(+), 130 deletions(-) diff --git a/src/components/officeBooking/BookingPurpose.js b/src/components/officeBooking/BookingPurpose.js index ef7ab61..dbea2fc 100644 --- a/src/components/officeBooking/BookingPurpose.js +++ b/src/components/officeBooking/BookingPurpose.js @@ -20,7 +20,7 @@ export const BookingCapsuleContainer = styled.div` export const PurposeContainer = styled.p` display: flex; width: 90%; - padding: 7px 0 7px 10px; + padding: 7px 0; font-size: 20px; font-weight: 400; text-align: left; diff --git a/src/constants/Path.js b/src/constants/Path.js index 60a7b3a..1e3de66 100644 --- a/src/constants/Path.js +++ b/src/constants/Path.js @@ -32,6 +32,7 @@ export const ADMIN_MENUS = [ { name: '직원 관리', path: '/admin/users' }, { name: '회의실 관리', path: '/admin/offices' }, { name: '장비 관리', path: '/admin/resources' }, + { name: '차량 관리', path: '/admin/cars' }, { name: '회의실 예약 관리', path: '/admin/officeBooking' }, { name: '장비 예약 관리', path: '/admin/resourceBooking' }, { name: '차량 예약 관리', path: '/admin/carBooking' } diff --git a/src/pages/admin/officeBookings/OfficeBookingManageCell.js b/src/pages/admin/officeBookings/OfficeBookingManageCell.js index 19d483f..34fea13 100644 --- a/src/pages/admin/officeBookings/OfficeBookingManageCell.js +++ b/src/pages/admin/officeBookings/OfficeBookingManageCell.js @@ -16,7 +16,6 @@ export const SettingButtonContainer = styled.div` ` export const SettingButton = styled.button` color: #8741CB; - font-family: NanumSquare_ac; font-size: 16px; font-style: normal; font-weight: 400; @@ -36,7 +35,7 @@ function OfficeBookingManageCell(props) { } }) .then((Response) => { - alert(Response.data.message) + alert('반려 완료되었습니다.') window.location.reload() }) .catch((error) => {basicError(error)}) diff --git a/src/pages/admin/resource/ResourceManageDetail.js b/src/pages/admin/resource/ResourceManageDetail.js index 22d078d..6b7cacf 100644 --- a/src/pages/admin/resource/ResourceManageDetail.js +++ b/src/pages/admin/resource/ResourceManageDetail.js @@ -15,6 +15,7 @@ import { import {getToken} from 'utils/IsLoginUtil'; import MoreButtonIcon from "../../../assets/images/button/triple_dot_icon.svg" import ResourceDetailInfo from "../../../components/card/ResourceDetailInfo"; +import ImageFullButton from "../../../components/button/ImageFullButton"; export const MoreButton = styled.button` border: none; @@ -129,19 +130,15 @@ function ResourceManageDetail() { return 장비 관리 - - - + + +
{resourceInfo.name} - - {resourceInfo.location} - - { +
+ { setOptionViewShowing(!isShowingOptions) - }}> - 더보기 - + }}/> { window.location.href = `/admin/resources/edit/${resourceId}` diff --git a/src/pages/admin/resourceBookings/ResourceBookingManageCell.js b/src/pages/admin/resourceBookings/ResourceBookingManageCell.js index b7789d3..dab984d 100644 --- a/src/pages/admin/resourceBookings/ResourceBookingManageCell.js +++ b/src/pages/admin/resourceBookings/ResourceBookingManageCell.js @@ -1,80 +1,71 @@ import React from 'react'; -import { Link } from 'react-router-dom'; -import { BookedLineTr } from '../../basic/myBookings/BookedList'; -import { StatusCircle, StatusContainer, StatusText } from 'components/booking/StatusTag'; -import {CANCELED, USING, WAITING, findStatus, BOOKED} from 'constants/BookingStatus'; -import { AdminBookingAxios } from 'api/AxiosApi'; -import styled from 'styled-components'; -import { getToken } from 'utils/IsLoginUtil'; -import { basicError } from 'utils/ErrorHandlerUtil'; +import {BookedLineTr} from '../../basic/myBookings/BookedList'; +import {StatusCircle, StatusContainer, StatusText} from 'components/booking/StatusTag'; +import {BOOKED, findStatus, USING, WAITING} from 'constants/BookingStatus'; +import {AdminBookingAxios} from 'api/AxiosApi'; +import {getToken} from 'utils/IsLoginUtil'; +import {basicError} from 'utils/ErrorHandlerUtil'; import {SettingButton, SettingButtonContainer} from "../officeBookings/OfficeBookingManageCell"; - function ResourceBookingManageCell(props) { const allowResource = () => { - if (window.confirm(`${props.name}의 예약을 허가하시겠습니까?`)) - { + if (window.confirm(`${props.name}의 예약을 허가하시겠습니까?`)) { AdminBookingAxios.patch(`resources/${props.id}/allow`, null, { headers: { Authorization: getToken() } }) - .then((Response) => { - alert(Response.data.message) - window.location.reload() - }) - .catch((error) => {basicError(error)}) + .then((Response) => { + alert('예약 허가 완료되었습니다.') + window.location.reload() + }) + .catch((error) => { + basicError(error) + }) props.refresh() - } - else - { + } else { alert("예약 허가를 취소하셨습니다.") } - - }; const rejectResource = () => { - if (window.confirm(`${props.name}의 예약을 반려하시겠습니까?`)) - { + if (window.confirm(`${props.name}의 예약을 반려하시겠습니까?`)) { AdminBookingAxios.patch(`resources/${props.id}/reject`, null, { headers: { Authorization: getToken() } }) - .then((Response) => { - alert(Response.data.message) - window.location.reload() - }) - .catch((error) => {basicError(error)}) - + .then((Response) => { + alert('반려 완료되었습니다.') + window.location.reload() + }) + .catch((error) => { + basicError(error) + }) props.refresh() - } - else - { + } else { alert("예약 반려를 취소하셨습니다.") } }; const returnResource = () => { - if (window.confirm(`${props.name}를 반납하시겠습니까?`)) - { + if (window.confirm(`${props.name}를 반납하시겠습니까?`)) { AdminBookingAxios.patch(`resources/${props.id}/return`, null, { headers: { Authorization: getToken() } }) - .then((Response) => { - alert(Response.data.message) - window.location.reload() - }) - .catch((error) => {basicError(error)}) + .then((Response) => { + alert('반납 완료되었습니다.') + window.location.reload() + }) + .catch((error) => { + basicError(error) + }) props.refresh() - } - else - { + } else { alert("반납을 취소하셨습니다.") } }; @@ -85,21 +76,24 @@ function ResourceBookingManageCell(props) { var status = findStatus(props.status) var watingButton = ( - - 허가 | 반려 | 상세보기 - ) + + 허가 | 반려 | 상세보기 + ) var cancelButton = ( - 상세보기) + 상세보기) var usingButton = ( - - 반납 | 상세보기 - ) + + 반납 | 상세보기 + ) var bookingButton = ( - 반려 | 상세보기 + 반려 | 상세보기 ); @@ -111,14 +105,14 @@ function ResourceBookingManageCell(props) { {props.reservatorName}
({props.reservatorPhone}) - + {props.status} {status === WAITING ? watingButton : status === USING ? usingButton : - status === BOOKED ? bookingButton :cancelButton + status === BOOKED ? bookingButton : cancelButton } diff --git a/src/pages/basic/booking/office/OfficeBookingCheck.js b/src/pages/basic/booking/office/OfficeBookingCheck.js index acda5d6..884b657 100644 --- a/src/pages/basic/booking/office/OfficeBookingCheck.js +++ b/src/pages/basic/booking/office/OfficeBookingCheck.js @@ -1,37 +1,47 @@ -import React from 'react'; -import { AdminBookingAxios, BookingsAxios, OfficesAxios } from 'api/AxiosApi'; -import { useState, useEffect } from "react"; -import { useParams } from 'react-router-dom'; +import React, {useRef} from 'react'; +import {AdminBookingAxios, BookingsAxios, OfficesAxios} from 'api/AxiosApi'; +import {useState, useEffect} from "react"; +import {useParams} from 'react-router-dom'; import Capsule from 'components/capsule/Capsule'; import OfficeInfo from "components/card/OfficeInfo"; -import { MainTextContainer, SubTextContainer, NameSubTitleText, DetailSubTitleText } from 'components/officeBooking/SubTitleBar'; -import { StatusText, StatusCircle } from 'components/booking/StatusTag'; -import { BookingContentContainer, BookingTimeContainer, renderBookingTimeBar, BookingDateTextContainer, setBookingTime } from 'components/officeBooking/BookingTimeBar'; -import { BookingPurposeContainer, BookingCapsuleContainer } from 'components/officeBooking/BookingPurpose'; -import { findStatus } from 'constants/BookingStatus'; -import { BookingDateText } from './OfficeBooking'; -import { RightContainer, WhiteContainer, TitleText } from 'components/rightContainer/RightContainer'; -import { getToken } from 'utils/IsLoginUtil'; -import { basicError } from 'utils/ErrorHandlerUtil'; -import { Bar } from '../../myBookings/BookedList'; -import { StatusContainer } from 'components/booking/StatusTag'; -import { PurposeContainer } from 'components/officeBooking/BookingPurpose'; - -var officeId = 1; +import { + MainTextContainer, + SubTextContainer, + NameSubTitleText, + DetailSubTitleText +} from 'components/officeBooking/SubTitleBar'; +import {StatusText, StatusCircle} from 'components/booking/StatusTag'; +import { + BookingContentContainer, + BookingTimeContainer, + renderBookingTimeBar, + BookingDateTextContainer, + setBookingTime +} from 'components/officeBooking/BookingTimeBar'; +import {BookingPurposeContainer, BookingCapsuleContainer} from 'components/officeBooking/BookingPurpose'; +import {findStatus} from 'constants/BookingStatus'; +import {BookingDateText} from './OfficeBooking'; +import {RightContainer, WhiteContainer, TitleText} from 'components/rightContainer/RightContainer'; +import {getToken} from 'utils/IsLoginUtil'; +import {basicError} from 'utils/ErrorHandlerUtil'; +import {Bar} from '../../myBookings/BookedList'; +import {StatusContainer} from 'components/booking/StatusTag'; +import {PurposeContainer} from 'components/officeBooking/BookingPurpose'; function OfficeBookingCheck(props) { - let { bookingId } = useParams(); + let {bookingId} = useParams(); const [officeInfo, setOfficeInfo] = useState([]); const [bookingInfo, setBookingDetail] = useState([]); const [bookingStatus, setStatus] = useState([]); - var [date, setDate] = useState(""); + const date = useRef(""); + const officeId = useRef(""); const getBookingInfo = () => { - if (date.length == 0) { + if (date.current.length === 0) { const dateNow = new Date(); - date = dateNow.toISOString().slice(0, 10); + date.current = dateNow.toISOString().slice(0, 10); } (props.isAdmin @@ -48,12 +58,12 @@ function OfficeBookingCheck(props) { .then((Response) => { setBookingDetail(Response.data.data) setStatus(findStatus(Response.data.data.bookingStatus)) - officeId = Response.data.data.officeId - getOfficeInfo(officeId) + officeId.current = Response.data.data.officeId + getOfficeInfo(officeId.current) setBookingTime(Response.data.data.startTime, Response.data.data.endTime) }) - .catch((Error)=>{ - basicError(Error) + .catch((Error) => { + basicError(Error) console.log(Error) window.alert("예약 정보를 불러올 수 없습니댜.") window.history.back() @@ -61,7 +71,7 @@ function OfficeBookingCheck(props) { }; const getOfficeInfo = () => { - OfficesAxios.get(`/${officeId}`, { + OfficesAxios.get(`/${officeId.current}`, { headers: { Authorization: getToken() } @@ -69,8 +79,8 @@ function OfficeBookingCheck(props) { .then((Response) => { setOfficeInfo(Response.data.data) }) - .catch((Error)=>{ - basicError(Error) + .catch((Error) => { + basicError(Error) console.log(Error) window.alert("회의실 정보를 불러올 수 없습니댜.") window.history.back() @@ -84,34 +94,35 @@ function OfficeBookingCheck(props) { return ( - {props.isAdmin ? "회의실 예약 내역" : "예약 내역"} + 회의실 예약 내역 - - - + + +
{officeInfo.name} - - {officeInfo.location} - - - +
+ + {bookingStatus.name} - - + - + {getBookingDate(bookingInfo)} @@ -124,12 +135,9 @@ function OfficeBookingCheck(props) { - - - - + - {(bookingInfo.memo === null) + {(bookingInfo.memo === null || bookingInfo.memo === "") ? '* 저장된 예약목적이 없습니다' : bookingInfo.memo} @@ -139,6 +147,7 @@ function OfficeBookingCheck(props) { ); } + export default OfficeBookingCheck; function getBookingDate(info) { diff --git a/src/pages/basic/booking/resource/ResourceBookingCheck.js b/src/pages/basic/booking/resource/ResourceBookingCheck.js index 4568103..c24dc05 100644 --- a/src/pages/basic/booking/resource/ResourceBookingCheck.js +++ b/src/pages/basic/booking/resource/ResourceBookingCheck.js @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useRef, useState} from 'react'; import {AdminBookingAxios, BookingsAxios, ResourcesAxios} from 'api/AxiosApi'; import {useParams} from 'react-router-dom'; import Capsule from 'components/capsule/Capsule'; @@ -23,17 +23,16 @@ import {basicError} from 'utils/ErrorHandlerUtil'; import {Bar} from '../../myBookings/BookedList'; import ResourceDetailInfo from "../../../../components/card/ResourceDetailInfo"; -var resourceId = 1; - function ResourceBookingCheck(props) { let {bookingId} = useParams(); const [resourceInfo, setResourceInfo] = useState([]); const [bookingInfo, setBookingDetail] = useState([]); const [bookingStatus, setStatus] = useState([]); + const resourceId = useRef(""); const getResourceInfo = () => { - ResourcesAxios.get(`/${resourceId}`, + ResourcesAxios.get(`/${resourceId.current}`, { headers: { Authorization: getToken() @@ -65,8 +64,8 @@ function ResourceBookingCheck(props) { .then((Response) => { setBookingDetail(Response.data.data) setStatus(findStatus(Response.data.data.status)) - resourceId = Response.data.data.resourceId - getResourceInfo(resourceId) + resourceId.current = Response.data.data.resourceId + getResourceInfo(resourceId.current) }) .catch((Error) => { basicError(Error) @@ -82,17 +81,15 @@ function ResourceBookingCheck(props) { }, []); return - {props.isAdmin ? "장비 예약 내역" : "예약 내역"} + 장비 예약 내역 - - - + + +
{resourceInfo.name} - - {resourceInfo.category} - - + {bookingStatus.name} @@ -124,12 +121,9 @@ function ResourceBookingCheck(props) { - - - - + - {(bookingInfo.memo === null) + {(bookingInfo.memo === null || bookingInfo.memo === "") ? '* 저장된 예약목적이 없습니다' : bookingInfo.memo} From 64e64a1ea0b5526cab6b69d532d74dce68590d25 Mon Sep 17 00:00:00 2001 From: psyeon1120 Date: Thu, 9 Nov 2023 02:32:03 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[PDW-67]=20fix:=20=EC=9E=A5=EB=B9=84=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/capsule/Capsule.js | 15 +- .../officeBooking/BookingTimeBar.js | 1 + src/components/searchBar/ManageSearchBar.js | 7 +- src/pages/admin/resource/ResourceManageAdd.js | 359 +++++++----------- src/pages/admin/user/UserManage.js | 4 +- src/pages/admin/user/UserManageLine.js | 4 +- src/pages/admin/user/UserMoreModal.js | 1 + .../basic/booking/office/SelectOffice.js | 2 + src/pages/basic/myBookings/BookedList.js | 1 + 9 files changed, 158 insertions(+), 236 deletions(-) diff --git a/src/components/capsule/Capsule.js b/src/components/capsule/Capsule.js index 3a64f2e..f9abb62 100644 --- a/src/components/capsule/Capsule.js +++ b/src/components/capsule/Capsule.js @@ -2,14 +2,15 @@ import React from "react"; import styled from "styled-components" const PurpleCapsule = styled.p` - border-radius: 20px; - background: #A263DE; - text-align: center; - color: #FFF; - font-size: 18px; - padding: 7px 15px; - margin: 0 10px 0 0; + border-radius: 20px; + background: #A263DE; + text-align: center; + color: #FFF; + font-size: 18px; + padding: 7px 15px; + margin: 0 10px 0 0; min-width: fit-content; + height: fit-content; ` const WhiteCapsule = styled(PurpleCapsule)` diff --git a/src/components/officeBooking/BookingTimeBar.js b/src/components/officeBooking/BookingTimeBar.js index b1d6bf4..1b7656f 100644 --- a/src/components/officeBooking/BookingTimeBar.js +++ b/src/components/officeBooking/BookingTimeBar.js @@ -20,6 +20,7 @@ let bookedTimeList = []; export const BookingContentContainer = styled.div` margin: 30px 0 20px 20px; display: flex; + align-items: center; ` export const BookingDateTextContainer = styled.div` diff --git a/src/components/searchBar/ManageSearchBar.js b/src/components/searchBar/ManageSearchBar.js index 5de395a..26804ba 100644 --- a/src/components/searchBar/ManageSearchBar.js +++ b/src/components/searchBar/ManageSearchBar.js @@ -67,16 +67,15 @@ export const ManageAddButtonImage = styled.img` function ManageSearchBar(props) { const handleOnKeyPress = e => { - if (e.key === 'Enter') { - props.onEnter(e) // Enter 입력이 되면 클릭 이벤트 실행 - } + // if (e.key === 'Enter') + props.onEnter(e) // Enter 입력이 되면 클릭 이벤트 실행 }; return ( - + { props.selectOptions !== null ? diff --git a/src/pages/admin/resource/ResourceManageAdd.js b/src/pages/admin/resource/ResourceManageAdd.js index 4511a85..5505541 100644 --- a/src/pages/admin/resource/ResourceManageAdd.js +++ b/src/pages/admin/resource/ResourceManageAdd.js @@ -15,200 +15,118 @@ import {ExitBtn} from "../../../components/modal/BigModal"; import axios from "axios"; import {useParams} from "react-router-dom"; - -const NameContainer = styled.div` - width: 90%; - height: 40px; - display: flex; - justify-content: flex-start; - align-items: center; - margin: 90px 130px 0 80px; -` -const PlaceContainer = styled.div` - width: 90%; - height: 40px; - display: flex; - justify-content: flex-start; - align-items: center; - margin: 40px 80px 0px 80px; +const MarginWhiteContainer = styled(WhiteContainer)` + padding: 50px; + box-sizing: border-box; ` - -const StaffContainer = styled.div` - width: 90%; - height: 150px; +const ColumnContainer = styled.div` + height: 40px; display: flex; justify-content: flex-start; - align-items: flex-start; - margin: 40px 80px 0px 80px; -` - - -const DescriptionContainer = styled.div` - width: 90%; - height: 80px; - display: flex; - justify-content: flex-start; - align-items: flex-start; - margin: 40px 80px 0 80px; -` -const ImageContainer = styled.div` - width: 90%; - height: 60px; - display: flex; - justify-content: flex-start; - align-items: flex-start; - margin: 40px 80px 0 80px; -` -const AddButtonContainer = styled.div` - width: 90%; - height: 50px; - display: flex; - justify-content: flex-end; - align-items: center; - margin: -50px 80px 0 80px; + align-items: center; + margin-bottom: 40px; ` const TitleLabel = styled.label` - color: #8741CB; - font-size: 24px; - font-style: normal; - font-weight: 400; - line-height: 16px; /* 66.667% */ + color: #8741CB; + font-size: 22px; + width: 130px; + text-align: left; ` -const NameInput = styled.input` - width: 83%; - height: 70%; - border-radius: 8px; - border: 2px solid #E6E6E6; - background: #FFF; - margin-left: 73px; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 32px; - padding: 10px; -` - -const PlaceInput = styled.input` - width: 43%; - height: 70%; - border-radius: 8px; - border: 2px solid #E6E6E6; - background: #FFF; - margin-left: 52px; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 32px; - padding: 10px; +const InfoInput = styled.input.attrs({type: 'text'})` + flex: 1; + height: 20px; + border-radius: 8px; + border: 2px solid #E6E6E6; + font-size: 20px; + padding: 10px; ` const StaffInputContainer = styled.div` - width: 43%; + width: 30%; height: 100%; - margin-left: 73px; display: block; - justify-content: start; - align-items: start; - margin-top: -10px; + z-index: 11; + background: white; ` -const StaffInput = styled.input` +const StaffInfoInput = styled(InfoInput)` width: 100%; - height: 25px; - border-radius: 8px; - border: 2px solid #E6E6E6; - background: #FFF; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 32px; - padding: 10px; - z-index: 10; ` const StaffSelectUl = styled.div` width: 100%; - height: 120px; + max-height: 120px; overflow: scroll; - border-radius: 0px 0px 8px 8px; + border-radius: 0 0 8px 8px; border: 2px solid #E6E6E6; - background: #FFF; - margin-top: -5px; padding: 10px; - z-index: 1; + z-index: 3; + background: white; + margin-top: -5px; ` -const StaffLabel = styled.p` + +const StaffNameLabel = styled.p` color: #4C4C4C; - font-family: NanumSquare_ac; font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: normal; - text-align: start; - z-index: 2; + text-align: left; + z-index: 4; +` + +const DescriptionContainer = styled(ColumnContainer)` + height: 60px; ` const DescriptionInput = styled.textarea` - width: 83%; - height: 100%; - border-radius: 8px; - border: 2px solid #E6E6E6; - background: #FFF; - margin-left: 93px; - margin-top: -10px; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 32px; - padding: 10px; + flex: 1; + height: 100%; + border-radius: 8px; + border: 2px solid #E6E6E6; + font-size: 20px; + padding: 10px; +` + +const AddButtonContainer = styled.div` + width: 90%; + height: 50px; + display: flex; + justify-content: flex-end; + align-items: center; + margin: -50px 80px 0 80px; ` -const IamgeAddContainer = styled.div` - width: 112px; - height: 49px; - flex-shrink: 0; - margin-left: 52px; - margin-top: -10px; +const ImageAddContainer = styled.div` + width: 112px; + height: 40px; + flex-shrink: 0; + margin-left: 52px; ` const ImageAddButton = styled.img` - width: 100%; - height: 100%; + width: 100%; + height: 100%; ` const ImageInfoContainer = styled.div` - width: 30%; - height: 70%; - border-radius: 8px; - border: 2px solid #E6E6E6; - background: #FFF; - margin-left: 52px; - margin-top: -10px; - display: flex; - justify-content: space-between; - align-items: center; + width: 32%; + height: 40px; + border-radius: 8px; + border: 2px solid #E6E6E6; + display: flex; + justify-content: space-between; ` -const IamgeInfoLabel = styled.label` - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 32px; - padding: 5px; - margin-left: 20px; +const ImageInfoLabel = styled.label` + font-size: 20px; + padding: 5px; + margin-left: 20px; ` - - - - - function ResourceManageAdd(props) { - let { resourceId } = useParams() + let {resourceId} = useParams() const [name, setName] = useState(""); const [place, setPlace] = useState(""); const [staff, setStaff] = useState({ @@ -226,7 +144,6 @@ function ResourceManageAdd(props) { const [resourceInfo, setResourceInfo] = useState(null) - const changeName = (e) => { setName(e.target.value); }; @@ -267,10 +184,10 @@ function ResourceManageAdd(props) { .catch((error) => { console.log(error) }); - }else { + } else { editResource(); } - }else { + } else { if (imageFile !== null) { ImageUrlAxios.get(`?ext=${imageFile.type.split("/", 2)[1]}&dir=photo`) .then((Response) => { @@ -279,13 +196,13 @@ function ResourceManageAdd(props) { .catch((error) => { console.log(error) }); - }else { + } else { alert("이미지를 업로드해주세요."); } } } - const uploadImage = () => { + const uploadImage = () => { const formData = new FormData(); formData.append("files", imageFile); @@ -350,7 +267,7 @@ function ResourceManageAdd(props) { Authorization: getToken() } }) - .then((Response)=>{ + .then((Response) => { setResourceInfo(Response.data.data); setStaff({ ...staff, @@ -362,7 +279,7 @@ function ResourceManageAdd(props) { setName(Response.data.data.name); setImageUrl(Response.data.data.imgUrl) }) - .catch((Error)=>{ + .catch((Error) => { basicError(Error) console.log(Error) window.alert("장비 정보를 불러올 수 없습니댜.") @@ -372,10 +289,11 @@ function ResourceManageAdd(props) { const getStaffList = () => { - UsersAxios.get(`managers?name=${staff.name}` , { + UsersAxios.get(`managers?name=${staff.name}`, { headers: { Authorization: getToken() - }}) + } + }) .then((Response) => { console.log(Response.data.data) setStaffList(Response.data.data.responsibilityList); @@ -405,7 +323,7 @@ function ResourceManageAdd(props) { }, [imageUrl]); useEffect(() => { - if (isUpload ) { + if (isUpload) { if (resourceInfo !== null) { editResource(); } else { @@ -418,72 +336,71 @@ function ResourceManageAdd(props) { getStaffList(); }, [staff.name]); - - - return ( - - {props.title} - - - - - 장비명 - - - - - 보관장소 - - - - - 책임자 - - setIsFocusStaffInput(true)} onBlur={() => setIsFocusStaffInput(false)} /> - {isFocusStaffInput && - - {staffList.map((staff, index) => - setStaff(staff)}>{staff.name} - )} - - } - - - - - - 설명 - - - - - 첨부사진 - - {imageFile !== null ? imageFile.name :"" - } - {imageFile===null ? <> : X} - - - - + {resourceInfo === null ? "장비 추가" : "장비 수정"} + + + + 장비명 + + + + + 보관장소 + + + + + 책임자 + + setIsFocusStaffInput(true)} + onBlur={() => setIsFocusStaffInput(false)}/> + {isFocusStaffInput && + + {staffList.map((staff, index) => + setStaff(staff)}>{staff.name} + )} + + } + + + + + + 설명 + + + + + 첨부사진 + + {imageFile !== null ? imageFile.name : ""} + {imageFile === null ? <> : X} + + + + - - - - - - - {resourceInfo === null ? "대여 장비 추가" : "대여 장비 수정"} - - - - - + style={{display: "none"}}/> + + + + + + + {resourceInfo === null ? "대여 장비 추가" : "대여 장비 수정"} + + + + + ); } diff --git a/src/pages/admin/user/UserManage.js b/src/pages/admin/user/UserManage.js index a025178..7227e48 100644 --- a/src/pages/admin/user/UserManage.js +++ b/src/pages/admin/user/UserManage.js @@ -89,11 +89,11 @@ function UserManage(props) { 성명 - 이메일 + 이메일 연락처 부서 권한 - + diff --git a/src/pages/admin/user/UserManageLine.js b/src/pages/admin/user/UserManageLine.js index 439962b..d2bdea1 100644 --- a/src/pages/admin/user/UserManageLine.js +++ b/src/pages/admin/user/UserManageLine.js @@ -16,11 +16,11 @@ function UserManageLine(props) { return ( {props.name} - {props.email} + {props.email} {props.phone} {props.department} - + {isOpen ? : null diff --git a/src/pages/admin/user/UserMoreModal.js b/src/pages/admin/user/UserMoreModal.js index 8114cca..e6995c6 100644 --- a/src/pages/admin/user/UserMoreModal.js +++ b/src/pages/admin/user/UserMoreModal.js @@ -24,6 +24,7 @@ export function UserMoreModal(props) { }) .then((response) => { alert("탈퇴 완료 되었습니다.") + window.location.reload(); }) .catch((error) => { basicError(error) diff --git a/src/pages/basic/booking/office/SelectOffice.js b/src/pages/basic/booking/office/SelectOffice.js index 20f7731..a2e92a8 100644 --- a/src/pages/basic/booking/office/SelectOffice.js +++ b/src/pages/basic/booking/office/SelectOffice.js @@ -27,7 +27,9 @@ function SelectOffice(props) { const changeFacilityName = (e) => { facilityName.current = e.target.value; + searchOffice() }; + const enterFacilityName = (e) => { if (e.key === 'Enter') { searchOffice() diff --git a/src/pages/basic/myBookings/BookedList.js b/src/pages/basic/myBookings/BookedList.js index b06a8c1..c57155f 100644 --- a/src/pages/basic/myBookings/BookedList.js +++ b/src/pages/basic/myBookings/BookedList.js @@ -39,6 +39,7 @@ export const BookedTable = styled.table` font-size: 18px; position: absolute; top: 0; + table-layout: fixed; ` export const BookedThead = styled.thead` From 154cd02762123ac1ceb806828ac3822d2a3d6c46 Mon Sep 17 00:00:00 2001 From: psyeon1120 Date: Thu, 9 Nov 2023 03:15:03 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[PDW-67]=20fix:=20=EC=98=88=EC=95=BD=20?= =?UTF-8?q?=EB=82=B4=EC=97=AD=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../officeBooking/BookingPurpose.js | 11 +++---- .../officeBooking/BookingTimeBar.js | 6 ++-- .../rightContainer/RightContainer.js | 2 +- src/index.css | 5 ++- .../basic/booking/office/OfficeBooking.js | 3 +- .../booking/office/OfficeBookingCheck.js | 6 ---- .../basic/booking/resource/ResourceBooking.js | 32 ++++--------------- .../booking/resource/ResourceBookingCheck.js | 8 ++--- 8 files changed, 21 insertions(+), 52 deletions(-) diff --git a/src/components/officeBooking/BookingPurpose.js b/src/components/officeBooking/BookingPurpose.js index dbea2fc..5bb6cd4 100644 --- a/src/components/officeBooking/BookingPurpose.js +++ b/src/components/officeBooking/BookingPurpose.js @@ -1,7 +1,7 @@ import styled from "styled-components" export const BookingPurposeContainer = styled.div` - margin: 20px 0 20px 20px; + margin-left: 20px; display: flex; align-items: flex-start; ` @@ -19,10 +19,9 @@ export const BookingCapsuleContainer = styled.div` export const PurposeContainer = styled.p` display: flex; - width: 90%; - padding: 7px 0; - font-size: 20px; - font-weight: 400; + flex: 1; + font-size: 22px; text-align: left; - margin: 0 10px; + margin-left: 10px; + line-height: 34px; ` \ No newline at end of file diff --git a/src/components/officeBooking/BookingTimeBar.js b/src/components/officeBooking/BookingTimeBar.js index 1b7656f..04a22c3 100644 --- a/src/components/officeBooking/BookingTimeBar.js +++ b/src/components/officeBooking/BookingTimeBar.js @@ -18,9 +18,9 @@ let endT = -1; let bookedTimeList = []; export const BookingContentContainer = styled.div` - margin: 30px 0 20px 20px; + margin: 30px 0 30px 20px; display: flex; - align-items: center; + align-items: baseline; ` export const BookingDateTextContainer = styled.div` @@ -34,7 +34,7 @@ export const BookingTimeContainer = styled.div` ` export const RequestButtonContainer = styled.div` - margin: 0 20px 20px 0; + margin: 20px; display: flex; justify-content: flex-end; ` diff --git a/src/components/rightContainer/RightContainer.js b/src/components/rightContainer/RightContainer.js index 9015087..2ac626b 100644 --- a/src/components/rightContainer/RightContainer.js +++ b/src/components/rightContainer/RightContainer.js @@ -15,7 +15,7 @@ export const WhiteContainer = styled.div` background: #FFF; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); overflow-y: scroll; - display: grid; + //display: grid; height: 100%; width: 100%; position: relative; diff --git a/src/index.css b/src/index.css index fc31ff9..b410aae 100644 --- a/src/index.css +++ b/src/index.css @@ -22,10 +22,9 @@ a { input, button, select, text, p, textarea { font-family: 'NanumSquare_ac'; outline: none; -} - -textarea { + word-break: break-all; resize: none; + margin: 0; } ::-webkit-scrollbar { diff --git a/src/pages/basic/booking/office/OfficeBooking.js b/src/pages/basic/booking/office/OfficeBooking.js index 3b2c967..ea64a55 100644 --- a/src/pages/basic/booking/office/OfficeBooking.js +++ b/src/pages/basic/booking/office/OfficeBooking.js @@ -32,7 +32,6 @@ const DatePicker = styled.input.attrs({type: 'date'})` ` export const BookingDateText = styled.p` - margin: 6px 0 0 0; color: #575757; font-size: 22px; text-align: left; @@ -42,7 +41,7 @@ export const PurposeTextarea = styled.textarea` width: 100%; padding: 10px; border-radius: 12px; - border-color: #717171; + border: 1px solid #E6E6E6; font-size: 20px; line-height: 30px; text-align: left; diff --git a/src/pages/basic/booking/office/OfficeBookingCheck.js b/src/pages/basic/booking/office/OfficeBookingCheck.js index 884b657..a079edf 100644 --- a/src/pages/basic/booking/office/OfficeBookingCheck.js +++ b/src/pages/basic/booking/office/OfficeBookingCheck.js @@ -119,21 +119,15 @@ function OfficeBookingCheck(props) { imgUrl={officeInfo.imgUrl} /> - - - - {getBookingDate(bookingInfo)} - {renderBookingTimeBar('true')} - diff --git a/src/pages/basic/booking/resource/ResourceBooking.js b/src/pages/basic/booking/resource/ResourceBooking.js index 4a98f40..29c58a0 100644 --- a/src/pages/basic/booking/resource/ResourceBooking.js +++ b/src/pages/basic/booking/resource/ResourceBooking.js @@ -38,30 +38,22 @@ export const ContentContainer = styled.div` ` export const BookingDateText = styled.text` - margin: 5px 0 0 0; padding-left: 10px; color: #575757; - background-color: ${props => props.isSelected !== 'true' ? 'red' : 'white'} font-size: 22px; - font-weight: 400; - letter-spacing: 0em; text-align: left; ` export const PurposeTextarea = styled.textarea` width: 100%; - padding: 6px 0 0 18px; + padding: 10px; border-radius: 12px; - border-width: 1; - border-style: solid; - border-color: black; - background-color: #ffffff; + border: 1px solid #E6E6E6; font-size: 20px; - font-weight: 400; line-height: 25px; - letter-spacing: 0em; text-align: left; - margin: 0 10px; + margin: 0 20px 0 10px; + box-sizing: border-box; ` export const BookingDateContainer = styled.div` @@ -208,9 +200,7 @@ function ResourceBooking(props) { imgUrl={resourceInfo.imgUrl}/> - - - + {start || "시작일"} ~ @@ -243,16 +233,8 @@ function ResourceBooking(props) { - - - - - - - + + diff --git a/src/pages/basic/booking/resource/ResourceBookingCheck.js b/src/pages/basic/booking/resource/ResourceBookingCheck.js index c24dc05..eac7143 100644 --- a/src/pages/basic/booking/resource/ResourceBookingCheck.js +++ b/src/pages/basic/booking/resource/ResourceBookingCheck.js @@ -103,9 +103,7 @@ function ResourceBookingCheck(props) { imgUrl={resourceInfo.imgUrl}/> - - - +
{bookingInfo.startDate || "시작일"} ~ @@ -114,9 +112,7 @@ function ResourceBookingCheck(props) { - - - + {getReturnDateStr(bookingInfo.returnDateTime)}