From 020aba7291cd3edcc707fdac9904e3dfb040216e Mon Sep 17 00:00:00 2001 From: seonwoonam Date: Tue, 5 Dec 2023 22:26:34 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Fix=20:=20=EC=98=88=EC=95=BD=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/dguonoff/src/App.tsx | 45 ++++++++----- frontend/dguonoff/src/api/dguonandoff.ts | 49 ++++++++++++++ .../pages/service/Service.module.css | 2 +- .../pages/service/home/MainPage.tsx | 17 +++-- .../service/information/ReservationInfo.tsx | 66 +++++++++++++++---- 5 files changed, 147 insertions(+), 32 deletions(-) diff --git a/frontend/dguonoff/src/App.tsx b/frontend/dguonoff/src/App.tsx index 155572f..872eb65 100644 --- a/frontend/dguonoff/src/App.tsx +++ b/frontend/dguonoff/src/App.tsx @@ -8,10 +8,22 @@ import useModalCreater from './modules/modal/Modal'; import ReservationInfo from './components/pages/service/information/ReservationInfo'; import LoginPage from './components/pages/service/login/LoginPage'; import SignupPage from './components/pages/service/signup/SignupPage'; +import React, { createContext, useState } from 'react'; +import Reservation from './types/Reservation'; // import UserInfo from './components/pages/service/information/UserInfo'; // import ReservationDetailPage from './components/pages/service/reservation/ReservationDetailPage'; +export const ReservationContext = React.createContext({ + reservationInfo : new Reservation(), // 기본값 + setReservationInfo: (resrvation : Reservation) => {}, // 빈 함수로 초기화 +}); + function App() { + const [reservationInfo, setReservation] = useState(new Reservation()); + + const setReservationInfo = (reservation : Reservation): void => { + setReservation(reservation); + }; // Hook useModalCreater(); @@ -19,21 +31,24 @@ function App() { // Render return (
- - - } /> - } /> - } /> - } /> - {/* } /> - } /> - } /> - }/> */} - } /> - } /> - } /> - - + + + + } /> + } /> + + } /> + } /> + {/* } /> + } /> + } /> + }/> */} + } /> + } /> + } /> + + +
); } diff --git a/frontend/dguonoff/src/api/dguonandoff.ts b/frontend/dguonoff/src/api/dguonandoff.ts index 1b9c451..426782d 100644 --- a/frontend/dguonoff/src/api/dguonandoff.ts +++ b/frontend/dguonoff/src/api/dguonandoff.ts @@ -941,3 +941,52 @@ export async function getMyBookmark(token: string): Promise { } return result; } + +export async function deleteReservation(token: string, reservationId : number): Promise { + let responseData: DeleteFixedScheduleResponse | undefined = undefined; + try { + const response = await axios.delete( + getApiUrl(`/api/fixedSchedules/${reservationId}`), + { + headers: { + "Authorization": `Bearer ${token}` + }, + withCredentials: true + } + ); + responseData = response.data; + } catch (error) { + if (axios.isAxiosError(error) && error.response) { + responseData = error.response.data; + } + } + return responseData === "success"; +} + +export async function modifyReservation(token: string, reservationId: number ,outline : string): Promise{ + let responseData: DeleteFixedScheduleResponse | undefined = undefined; + const postData = { + "reservationId" : reservationId, + "outline" : outline, + "guestIds": [] + }; + try { + const response = await axios.post( + getApiUrl("/api/reservation/modification"), + postData, + { + headers: { + "Authorization": `Bearer ${token}`, + "Content-Type": "application/json" + }, + withCredentials: true + } + ); + responseData = response.data; + } catch (error) { + if (axios.isAxiosError(error) && error.response) { + responseData = error.response.data; + } + } + return responseData === "success"; +} \ No newline at end of file diff --git a/frontend/dguonoff/src/components/pages/service/Service.module.css b/frontend/dguonoff/src/components/pages/service/Service.module.css index 14e5d1b..8f2a107 100644 --- a/frontend/dguonoff/src/components/pages/service/Service.module.css +++ b/frontend/dguonoff/src/components/pages/service/Service.module.css @@ -93,7 +93,7 @@ border-radius: 6px; font-style: normal; font-weight: 700; - font-size: 18px; + font-size: 16px; line-height: 22px; text-align: center; diff --git a/frontend/dguonoff/src/components/pages/service/home/MainPage.tsx b/frontend/dguonoff/src/components/pages/service/home/MainPage.tsx index 1dfee14..229e83a 100644 --- a/frontend/dguonoff/src/components/pages/service/home/MainPage.tsx +++ b/frontend/dguonoff/src/components/pages/service/home/MainPage.tsx @@ -1,11 +1,11 @@ -import { useEffect, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import { Box, Container, IconButton, Toolbar, Button } from "@mui/material"; import NotificationsIcon from '@mui/icons-material/Notifications'; import styles from "../Service.module.css"; import GrayBorderBox from "../../../../modules/GrayBorderBox"; import GrayCircle from "../../../../modules/GrayCircle"; import { Business, LocalLibrary, FilterHdr, BlindsClosedSharp } from '@mui/icons-material'; -import { useNavigate } from "react-router-dom"; +import { Route, Routes, useNavigate } from "react-router-dom"; import useAuth from "../../../../hooks/useAuth"; import Bookmark from "../../../../types/Bookmark"; import { getBuildings, getMyBookmark, getReservations } from "../../../../api/dguonandoff"; @@ -14,6 +14,7 @@ import { useModal } from "../../../../modules/modal/Modal"; import { ModalAnimationType } from "../../../../modules/modal/ModalAnimations"; import Building from "../../../../types/Building"; import Reservation from "../../../../types/Reservation"; +import { ReservationContext } from "../../../../App"; interface FacilityMenu { @@ -31,6 +32,7 @@ export default function MainPage() { const [isActive, setIsActive] = useState(false); const [nowUsingReservation, setNowUsingReservation] = useState(); // 현재 이용중인 예약 const [FacilityMenuModal, openFacilityMenuModal, closeFacilityMenuModal] = useModal(ModalAnimationType.ZOOM); + const {setReservationInfo } = useContext(ReservationContext); let userToken : string = ""; @@ -93,6 +95,11 @@ export default function MainPage() { setBuildings(buildings); } + const handleOnClickMyResrvation = (reservation : Reservation) => { + setReservationInfo(reservation); + navigate('/reservationInfo'); + } + const handleEndUsing = () => { } @@ -113,7 +120,7 @@ export default function MainPage() { }; return ( - +
{appName} @@ -180,7 +187,7 @@ export default function MainPage() { {myBookmarks.length > 0 ? <> {myBookmarks.map((bookmark, index) => ( -
+
{bookmark.getBuildingName()}
@@ -200,7 +207,7 @@ export default function MainPage() { {myReservations.length > 0 ? <> {myReservations.map((reservation, index) => ( -
+
handleOnClickMyResrvation(reservation)}>
diff --git a/frontend/dguonoff/src/components/pages/service/information/ReservationInfo.tsx b/frontend/dguonoff/src/components/pages/service/information/ReservationInfo.tsx index 7bbb8b0..38923af 100644 --- a/frontend/dguonoff/src/components/pages/service/information/ReservationInfo.tsx +++ b/frontend/dguonoff/src/components/pages/service/information/ReservationInfo.tsx @@ -3,12 +3,42 @@ import { Box, Container, IconButton, Toolbar, Button, Grid } from "@mui/material import styles from "../Service.module.css"; import GrayBorderBox from "../../../../modules/GrayBorderBox"; import ReservationButton from "../../../../modules/reservationButton/ReservationButton"; +import Reservation from "../../../../types/Reservation"; +import { CookieStorageProvider } from "../../../../modules/storage/AppStorageProvider"; +import { deleteReservation, modifyReservation } from "../../../../api/dguonandoff"; +import { useNavigate } from 'react-router-dom'; -export default function ReservationInfo() { + +interface ReservationInfoProps { + reservation : Reservation; + } + +export default function ReservationInfo({reservation} : ReservationInfoProps) { const title : string = "예약 정보"; + const reservationInfo : Reservation = reservation; + const [newOutline, setNewOutline] = useState(reservation.getOutline()); + const navigate = useNavigate(); + + const handleOutlineChange = (event : React.ChangeEvent) => { + setNewOutline(event.target.value); + } + + const handleOutlineSubmit = async () => { + let userToken = CookieStorageProvider.get('userAuthToken')!; + let success = await modifyReservation(userToken,reservationInfo.getReservationId(), newOutline); + if(success){ + alert("메모가 수정 되었습니다."); + navigate(-1); + } + } - const onTapCancel = () => { - console.log("cancel clicked"); + const handleCancel = async () => { + let userToken = CookieStorageProvider.get('userAuthToken')!; + let success = await deleteReservation(userToken,reservationInfo.getReservationId()); + if(success){ + alert("예약이 취소되었습니다."); + navigate(-1); + } }; return ( @@ -21,27 +51,27 @@ export default function ReservationInfo() {
- 신공학관(기숙사) + {reservationInfo.getBuildingName()}
- 401-3107(3107 강의실) + {reservationInfo.getFacilityName()}
날짜 - 2019.10.07(금) + {reservationInfo.getDate()} 시간 - 14:00 ~ 16:00 + {reservationInfo.getStartTime().slice(0,5)} ~ {reservationInfo.getEndTime().slice(0,5)} 예약자 - 남선우 + {reservationInfo.getHost().getName()} 예약 인원 - 2명 + {reservation.getGuests.length}명 메모 @@ -49,9 +79,23 @@ export default function ReservationInfo() { -
이것은 메모입니다.
+