From 5a3ce4e309cd799c8cc4faf09619b3aff342b06b Mon Sep 17 00:00:00 2001 From: psyeon1120 Date: Fri, 3 Nov 2023 02:10:21 +0900 Subject: [PATCH] =?UTF-8?q?[PDW-67]=20fix:=20=EC=A0=84=EC=B2=B4=20API=20?= =?UTF-8?q?=ED=86=A0=ED=81=B0=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basic/booking/office/OfficeBooking.js | 50 +++-- .../booking/office/OfficeBookingCheck.js | 12 +- .../basic/booking/resource/ResourceBooking.js | 210 ++++++++++-------- .../booking/resource/ResourceBookingCheck.js | 14 +- .../basic/booking/resource/SelectResource.js | 8 +- src/pages/basic/myBookings/BookedLine.js | 15 +- src/pages/basic/myBookings/BookedList.js | 4 +- 7 files changed, 198 insertions(+), 115 deletions(-) diff --git a/src/pages/basic/booking/office/OfficeBooking.js b/src/pages/basic/booking/office/OfficeBooking.js index 72752bd..1479533 100644 --- a/src/pages/basic/booking/office/OfficeBooking.js +++ b/src/pages/basic/booking/office/OfficeBooking.js @@ -1,22 +1,35 @@ -import React from 'react'; +import React, {useEffect, useState} from 'react'; import styled from "styled-components" -import { OfficesAxios, BookingsAxios } from 'api/AxiosApi'; -import { useState, useEffect } from "react"; -import { useParams } from 'react-router-dom'; +import {OfficesAxios} from 'api/AxiosApi'; +import {useParams} from 'react-router-dom'; import Capsule from 'components/capsule/Capsule'; import OfficeInfo from "components/officeInfo/OfficeInfo"; -import { MainTextContainer, SubTextContainer, SelectedSubTitleText, UnselectedSubTitleText } from 'components/officeBooking/SubTitleBar'; -import { DatePicker } from 'components/searchBar/SearchBar'; import { - BookingContentContainer, BookingTimeContainer, renderBookingTimeBar, BookingDateTextContainer, setBookingState, RequestButtonContainer, requestBookingOffice + MainTextContainer, + SelectedSubTitleText, + SubTextContainer, + UnselectedSubTitleText +} from 'components/officeBooking/SubTitleBar'; +import {DatePicker} from 'components/searchBar/SearchBar'; +import { + BookingContentContainer, + BookingDateTextContainer, + BookingTimeContainer, + renderBookingTimeBar, + RequestButtonContainer, + setBookingState } from 'components/officeBooking/BookingTimeBar'; -import { BookingPurposeContainer, BookingCapsuleContainer, BookingPurposeTextFieldContainer } from 'components/officeBooking/BookingPurpose'; -import { RightContainer, WhiteContainer, TitleText } from 'components/rightContainer/RightContainer'; -import { basicError } from 'utils/ErrorHandlerUtil'; +import { + BookingCapsuleContainer, + BookingPurposeContainer, + BookingPurposeTextFieldContainer +} from 'components/officeBooking/BookingPurpose'; +import {RightContainer, TitleText, WhiteContainer} from 'components/rightContainer/RightContainer'; +import {basicError} from 'utils/ErrorHandlerUtil'; import SmallButton from 'components/button/SmallButton'; -import { Bar } from '../../myBookings/BookedList'; -import { getToken } from 'utils/IsLoginUtil'; +import {Bar} from '../../myBookings/BookedList'; +import {getToken} from 'utils/IsLoginUtil'; import moment from 'moment'; var bookingDate = ''; @@ -51,7 +64,6 @@ export const PurposeTextarea = styled.textarea` margin: 0 10px 0 10px; ` - function OfficeBooking(props) { let { officeId } = useParams(); @@ -74,7 +86,11 @@ function OfficeBooking(props) { // 일자별 예약 현황 받아오기 const getBookingTimeState = () => { - OfficesAxios.get(`/${officeId}/booking-state?date=${bookingDate}`) + OfficesAxios.get(`/${officeId}/booking-state?date=${bookingDate}`, { + headers: { + Authorization: getToken() + } + }) .then((Response) => { setBookingDetail(Response.data.data.bookedTimes) setBookingState(Response.data.data.bookedTimes) @@ -89,7 +105,11 @@ function OfficeBooking(props) { // 회의실 정보 받아오기 const getOfficeInfoForBooking = (id) => { - OfficesAxios.get(`/${officeId}`) + OfficesAxios.get(`/${officeId}`, { + headers: { + Authorization: getToken() + } + }) .then((Response) => { setOfficeInfo(Response.data.data) }) diff --git a/src/pages/basic/booking/office/OfficeBookingCheck.js b/src/pages/basic/booking/office/OfficeBookingCheck.js index 41c6f3e..c459b15 100644 --- a/src/pages/basic/booking/office/OfficeBookingCheck.js +++ b/src/pages/basic/booking/office/OfficeBookingCheck.js @@ -40,7 +40,11 @@ function OfficeBookingCheck(props) { Authorization: getToken() } }) - : BookingsAxios.get(`/offices/${bookingId}`)) + : BookingsAxios.get(`/offices/${bookingId}`, { + headers: { + Authorization: getToken() + } + })) .then((Response) => { setBookingDetail(Response.data.data) setStatus(findStatus(Response.data.data.bookingStatus)) @@ -57,7 +61,11 @@ function OfficeBookingCheck(props) { }; const getOfficeInfo = () => { - OfficesAxios.get(`/${officeId}`) + OfficesAxios.get(`/${officeId}`, { + headers: { + Authorization: getToken() + } + }) .then((Response) => { setOfficeInfo(Response.data.data) }) diff --git a/src/pages/basic/booking/resource/ResourceBooking.js b/src/pages/basic/booking/resource/ResourceBooking.js index 4bfbd90..1e2812d 100644 --- a/src/pages/basic/booking/resource/ResourceBooking.js +++ b/src/pages/basic/booking/resource/ResourceBooking.js @@ -2,75 +2,88 @@ import React from 'react'; import styled from "styled-components" import Calendar from 'react-calendar'; import 'react-calendar/dist/Calendar.css'; -import moment, { locale } from 'moment'; -import { ResourcesAxios, BookingsAxios } from 'api/AxiosApi'; -import { useState, useEffect } from "react"; -import { useParams } from 'react-router-dom'; +import moment, {locale} from 'moment'; +import {ResourcesAxios, BookingsAxios} from 'api/AxiosApi'; +import {useState, useEffect} from "react"; +import {useParams} from 'react-router-dom'; import Capsule from 'components/capsule/Capsule'; -import { MainTextContainer, SubTextContainer, SelectedSubTitleText, UnselectedSubTitleText } from 'components/officeBooking/SubTitleBar'; -import { BookingPurposeContainer, BookingCapsuleContainer, BookingPurposeTextFieldContainer } from 'components/officeBooking/BookingPurpose'; +import { + MainTextContainer, + SubTextContainer, + SelectedSubTitleText, + UnselectedSubTitleText +} from 'components/officeBooking/SubTitleBar'; +import { + BookingPurposeContainer, + BookingCapsuleContainer, + BookingPurposeTextFieldContainer +} from 'components/officeBooking/BookingPurpose'; import ResourceInfo from 'components/resourceInfo/ResourceInfo'; -import { BookingContentContainer, RequestButtonContainer, RequestBookingButton } from 'components/officeBooking/BookingTimeBar'; -import { RightContainer, WhiteContainer, TitleText } from 'components/rightContainer/RightContainer'; +import { + BookingContentContainer, + RequestButtonContainer, + RequestBookingButton +} from 'components/officeBooking/BookingTimeBar'; +import {RightContainer, WhiteContainer, TitleText} from 'components/rightContainer/RightContainer'; import 'react-calendar/dist/Calendar.css'; import styles from "./CustomCalendar.css"; -import { basicError } from 'utils/ErrorHandlerUtil'; +import {basicError} from 'utils/ErrorHandlerUtil'; import SmallButton from 'components/button/SmallButton'; -import { Bar } from '../../myBookings/BookedList'; -import { getToken } from 'utils/IsLoginUtil'; +import {Bar} from '../../myBookings/BookedList'; +import {getToken} from 'utils/IsLoginUtil'; var startDate = ''; var endDate = ''; export const ContentContainer = styled.div` - width: 90%; - border-radius: 12px; - background: #FFF; - box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); - margin-top: 20px; + width: 90%; + border-radius: 12px; + background: #FFF; + box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); + margin-top: 20px; ` export const BookingDateText = styled.text` - margin: 5px 0 0 0; - padding-left: 10px; - color: #575757; - background-color: ${props => props.isSelected != 'true' ? 'red' : 'white'} - font-family: NanumSquare_ac; - font-size: 22px; - font-weight: 400; - letter-spacing: 0em; - text-align: left; + margin: 5px 0 0 0; + padding-left: 10px; + color: #575757; + background-color: ${props => props.isSelected != 'true' ? 'red' : 'white'} + font-family: NanumSquare_ac; + font-size: 22px; + font-weight: 400; + letter-spacing: 0em; + text-align: left; ` export const PurposeTextarea = styled.textarea` - width: 100%; - padding: 6px 0 0 18px; - border-radius: 12px; - border-width:1; - border-style:solid; - border-color:black; - background-color: #ffffff; - font-family: NanumSquare_ac; - font-size: 20px; - font-weight: 400; - line-height: 25px; - letter-spacing: 0em; - text-align: left; - margin: 0 10px; + width: 100%; + padding: 6px 0 0 18px; + border-radius: 12px; + border-width: 1; + border-style: solid; + border-color: black; + background-color: #ffffff; + font-family: NanumSquare_ac; + font-size: 20px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: left; + margin: 0 10px; ` export const BookingDateContainer = styled.div` - padding-top: 7%; + padding-top: 7%; ` export const DateContainer = styled.div` - padding-left: 1%; + padding-left: 1%; ` var currentMonth = moment(new Date()).format('YYYY-MM') function ResourceBooking(props) { - let { resourceId } = useParams(); + let {resourceId} = useParams(); const [resourceInfo, setResourceInfo] = useState([]); const [dates, setBookedDates] = useState([]); @@ -79,30 +92,42 @@ function ResourceBooking(props) { const [changed, setCurrentMonth] = useState(); const getResourceInfo = () => { - ResourcesAxios.get(`/${resourceId}`) - .then((Response) => { setResourceInfo(Response.data.data) }) - .catch((Error)=>{ - basicError(Error) + ResourcesAxios.get(`/${resourceId}`, { + headers: { + Authorization: getToken() + } + }) + .then((Response) => { + setResourceInfo(Response.data.data) + }) + .catch((Error) => { + basicError(Error) console.log(Error) window.alert("장비 정보를 불러올 수 없습니댜.") window.history.back() - }); + }); }; const getBookedDates = () => { - const params = { month: currentMonth }; - ResourcesAxios.get(`/${resourceId}/booking-state`, { params }) + const params = {month: currentMonth}; + ResourcesAxios.get(`/${resourceId}/booking-state`, { + params, headers: { + Authorization: getToken() + } + }) .then((Response) => { var temp = []; - Response.data.data.map(function (date) { temp.push(new Date(date)) }) + Response.data.data.map(function (date) { + temp.push(new Date(date)) + }) setBookedDates(temp) }) - .catch((Error)=>{ - basicError(Error) + .catch((Error) => { + basicError(Error) console.log(Error) - window.alert("예약 정보를 불러올 수 없습니댜.") + window.alert("예약 정보를 불러올 수 없습니댜.") window.history.back() - }); + }); } const changeDate = e => { @@ -115,13 +140,14 @@ function ResourceBooking(props) { startDate = startDateFormat endDate = endDateFormat - for(var i=0; i= temp) { alert('예약된 일자를 포함한 날짜는 선택할 수 없습니다.') - startDate = ''; endDate = ''; + startDate = ''; + endDate = ''; setStartDate(startDate) setEndDate(endDate) window.location.reload() @@ -141,27 +167,30 @@ function ResourceBooking(props) { var bookingPurpose = document.getElementById("bookingPurpose").value; if (window.confirm("예약하시겠습니까?")) { - ResourcesAxios.post(`/${resourceId}`, + ResourcesAxios.post(`/${resourceId}`, { "endDate": endDate, "memo": bookingPurpose, "startDate": startDate }, { - headers: { Authorization: getToken() } + headers: {Authorization: getToken()} }, ) .then(function (response) { - if (response.data.status === '200') { alert('예약에 성공하였습니다!') } - else { alert(response.data.message); } + if (response.data.status === '200') { + alert('예약에 성공하였습니다!') + } else { + alert(response.data.message); + } window.location.reload() }) - .catch((Error)=>{ - basicError(Error) + .catch((Error) => { + basicError(Error) console.log(Error) window.alert("장비 예약에 실패하였습니다.") window.history.back() - }); + }); } } @@ -174,8 +203,8 @@ function ResourceBooking(props) { 장비 예약 - -
+ +
{resourceInfo.name} @@ -185,12 +214,12 @@ function ResourceBooking(props) {
+ description={resourceInfo.description} + imgUrl={resourceInfo.imgUrl}/> - + {start || "시작일"} @@ -199,24 +228,24 @@ function ResourceBooking(props) { moment(date).format("D")} - minDate={new Date()} - showNeighboringMonth={false} - next2Label={null} - prev2Label={null} - formatShortWeekday={(locale, date) => - ["S", "M", "T", "W", "T", "F", "S"][date.getDay()] - } - tileDisabled={({ date, view }) => - (view === 'month') && - dates.some(disabledDate => - date.getFullYear() === disabledDate.getFullYear() && - date.getMonth() === disabledDate.getMonth() && - date.getDate() === disabledDate.getDate() - )} - onActiveStartDateChange={onActiveStartDateChange} + onChange={changeDate} + selectRange={true} + formatDay={(locale, date) => moment(date).format("D")} + minDate={new Date()} + showNeighboringMonth={false} + next2Label={null} + prev2Label={null} + formatShortWeekday={(locale, date) => + ["S", "M", "T", "W", "T", "F", "S"][date.getDay()] + } + tileDisabled={({date, view}) => + (view === 'month') && + dates.some(disabledDate => + date.getFullYear() === disabledDate.getFullYear() && + date.getMonth() === disabledDate.getMonth() && + date.getDate() === disabledDate.getDate() + )} + onActiveStartDateChange={onActiveStartDateChange} /> @@ -225,14 +254,14 @@ function ResourceBooking(props) { - + + cols='135' + rows='4' + maxLength='100'/> @@ -245,4 +274,5 @@ function ResourceBooking(props) { } + export default ResourceBooking; \ No newline at end of file diff --git a/src/pages/basic/booking/resource/ResourceBookingCheck.js b/src/pages/basic/booking/resource/ResourceBookingCheck.js index 399a6e1..3553132 100644 --- a/src/pages/basic/booking/resource/ResourceBookingCheck.js +++ b/src/pages/basic/booking/resource/ResourceBookingCheck.js @@ -26,7 +26,12 @@ function ResourceBookingCheck(props) { const [bookingStatus, setStatus] = useState([]); const getResourceInfo = () => { - ResourcesAxios.get(`/${resourceId}`) + ResourcesAxios.get(`/${resourceId}`, + { + headers: { + Authorization: getToken() + } + }) .then((Response)=>{ setResourceInfo(Response.data.data) }) .catch((Error)=>{ basicError(Error) @@ -42,7 +47,12 @@ function ResourceBookingCheck(props) { Authorization: getToken() } }) - : BookingsAxios.get(`/resources/${bookingId}`)) + : BookingsAxios.get(`/resources/${bookingId}`, + { + headers: { + Authorization: getToken() + } + })) .then((Response)=>{ setBookingDetail(Response.data.data) setStatus(findStatus(Response.data.data.status)) diff --git a/src/pages/basic/booking/resource/SelectResource.js b/src/pages/basic/booking/resource/SelectResource.js index d5eabde..440bca4 100644 --- a/src/pages/basic/booking/resource/SelectResource.js +++ b/src/pages/basic/booking/resource/SelectResource.js @@ -9,7 +9,6 @@ import {useNavigate} from "react-router-dom"; import {basicError} from 'utils/ErrorHandlerUtil'; import {getToken} from "../../../../utils/IsLoginUtil"; - export const SearchTitleContainer = styled.div` width: 15%; height: 40px; @@ -103,7 +102,12 @@ function SelectResource(props) { } const searchResource = () => { - ResourcesAxios.get(`?resourceName=${resourceName}&startDate=${startDate}&endDate=${endDate}`) + ResourcesAxios.get(`?resourceName=${resourceName}&startDate=${startDate}&endDate=${endDate}`, + { + headers: { + Authorization: getToken() + } + }) .then((Response) => { setResourceList(Response.data.data.content) }) diff --git a/src/pages/basic/myBookings/BookedLine.js b/src/pages/basic/myBookings/BookedLine.js index 7214fea..a1bbe43 100644 --- a/src/pages/basic/myBookings/BookedLine.js +++ b/src/pages/basic/myBookings/BookedLine.js @@ -7,10 +7,16 @@ import { BookedLineTr } from './BookedList'; import { BookingCategoryPathList } from 'constants/Path'; import { StatusText, StatusContainer, StatusCircle } from 'components/booking/StatusTag'; import { basicError } from 'utils/ErrorHandlerUtil'; +import {getToken} from "../../../utils/IsLoginUtil"; function cancelBooking(bookingId, name, info, start, end, type) { if (window.confirm(`${name}(${info}) ${start} ~ ${end}\n예약을 취소하시겠습니까?`)) { - BookingsAxios.patch(`/${type}/${bookingId}/cancel`) + BookingsAxios.patch(`/${type}/${bookingId}/cancel`, + { + headers: { + Authorization: getToken() + } + }) .catch((error) => { basicError(error) }) @@ -21,7 +27,12 @@ function cancelBooking(bookingId, name, info, start, end, type) { function returnBooking(bookingId, name, info, start, end) { if (window.confirm(`${name}(${info}) ${start} ~ ${end}\n장비를 반납하시겠습니까?`)) { - BookingsAxios.patch(`/resources/${bookingId}/return`) + BookingsAxios.patch(`/resources/${bookingId}/return`, + { + headers: { + Authorization: getToken() + } + }) .catch((error) => { basicError(error) }) diff --git a/src/pages/basic/myBookings/BookedList.js b/src/pages/basic/myBookings/BookedList.js index 9460bef..8c1fa98 100644 --- a/src/pages/basic/myBookings/BookedList.js +++ b/src/pages/basic/myBookings/BookedList.js @@ -132,9 +132,9 @@ function BookedList(props) { {bookings.length === 0 ? - + 예약 내역이 없습니다. - + : bookings.map((booking) =>