From eb1ea5f6c67216589a7a10fa4a297d849a87f31f Mon Sep 17 00:00:00 2001 From: seonwoonam Date: Tue, 5 Dec 2023 19:24:42 +0900 Subject: [PATCH] =?UTF-8?q?FEAT=20:=20=EC=9C=A0=EC=A0=80=20=EC=A6=90?= =?UTF-8?q?=EA=B2=A8=EC=B0=BE=EA=B8=B0=20=EB=B0=8F=20=EC=98=88=EC=95=BD=20?= =?UTF-8?q?api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/dguonoff/src/api/dguonandoff.ts | 31 ++-- .../pages/service/Service.module.css | 21 +++ .../pages/service/home/MainPage.tsx | 152 +++++++++++++++--- 3 files changed, 163 insertions(+), 41 deletions(-) diff --git a/frontend/dguonoff/src/api/dguonandoff.ts b/frontend/dguonoff/src/api/dguonandoff.ts index 260c1fd..30fdc3a 100644 --- a/frontend/dguonoff/src/api/dguonandoff.ts +++ b/frontend/dguonoff/src/api/dguonandoff.ts @@ -924,21 +924,20 @@ export async function deleteFixedSchedule(token: string, facilitySchedule: Facil export async function getMyBookmark(token: string): Promise { -let result: Bookmark[] = []; -try { - const response = await axios.get( - getApiUrl("/api/user/bookmark"), - { - headers: { - "Authorization": `Bearer ${token}` + let result: Bookmark[] = []; + try { + const response = await axios.get( + getApiUrl("/api/user/bookmark"), + { + headers: { + "Authorization": `Bearer ${token}` + } } - } - ); - - console.log(response.data); - result = response.data.map((item: any) => new Bookmark(item.facilityName, item.facilityCode, item.buildingName)); -} catch (error) { - console.error(error); -} -return result; + ); + console.log(response.data); + result = response.data.map((item: any) => new Bookmark(item.facilityName, item.facilityCode, item.buildingName)); + } catch (error) { + console.error(error); + } + return result; } diff --git a/frontend/dguonoff/src/components/pages/service/Service.module.css b/frontend/dguonoff/src/components/pages/service/Service.module.css index 4166335..14e5d1b 100644 --- a/frontend/dguonoff/src/components/pages/service/Service.module.css +++ b/frontend/dguonoff/src/components/pages/service/Service.module.css @@ -109,4 +109,25 @@ color: #000000; } +.modalContent { + background-color: white; + width: 60%; /* 모달 너비를 전체 화면의 60%로 설정 */ + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow-y: auto; /* 내용이 넘칠 경우에 스크롤 바 표시 */ +} + +.noUsingFacility{ + display: flex; + flex-direction: column; /* 자식 요소들을 수직으로 정렬 */ + align-items: center; /* 수평 중앙 정렬 */ + justify-content: center; /* 수직 중앙 정렬 */ + height: 100%; /* 부모 요소의 높이를 적절히 설정해야 중앙 정렬이 잘 작동합니다. */ +} +.noUsingText{ + font-size : 14px; + color : '#646464'; + font-weight: bold; +} \ No newline at end of file diff --git a/frontend/dguonoff/src/components/pages/service/home/MainPage.tsx b/frontend/dguonoff/src/components/pages/service/home/MainPage.tsx index d096755..1dfee14 100644 --- a/frontend/dguonoff/src/components/pages/service/home/MainPage.tsx +++ b/frontend/dguonoff/src/components/pages/service/home/MainPage.tsx @@ -4,12 +4,16 @@ 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 } from '@mui/icons-material'; +import { Business, LocalLibrary, FilterHdr, BlindsClosedSharp } from '@mui/icons-material'; import { useNavigate } from "react-router-dom"; import useAuth from "../../../../hooks/useAuth"; import Bookmark from "../../../../types/Bookmark"; -import { getMyBookmark } from "../../../../api/dguonandoff"; +import { getBuildings, getMyBookmark, getReservations } from "../../../../api/dguonandoff"; import { CookieStorageProvider } from "../../../../modules/storage/AppStorageProvider"; +import { useModal } from "../../../../modules/modal/Modal"; +import { ModalAnimationType } from "../../../../modules/modal/ModalAnimations"; +import Building from "../../../../types/Building"; +import Reservation from "../../../../types/Reservation"; interface FacilityMenu { @@ -22,6 +26,12 @@ export default function MainPage() { const navigate = useNavigate(); const isUserLoggedIn = useAuth(); const [myBookmarks, setMyBookmarks] = useState([]); // 즐겨찾기 목록 + const [myReservations, setMyReservations] = useState([]); // 내 예약 목록 + const [buildings, setBuildings] = useState([]); // 시설 목록 + const [isActive, setIsActive] = useState(false); + const [nowUsingReservation, setNowUsingReservation] = useState(); // 현재 이용중인 예약 + const [FacilityMenuModal, openFacilityMenuModal, closeFacilityMenuModal] = useModal(ModalAnimationType.ZOOM); + let userToken : string = ""; const appName : string = "동국 ON/OFF"; @@ -46,8 +56,16 @@ export default function MainPage() { if (!isUserLoggedIn) { navigate('/login'); // 로그인 안되어 있으면 로그인 페이지로 이동 }else{ - userToken = CookieStorageProvider.get('userAuthToken') || ""; + userToken = CookieStorageProvider.get('userAuthToken')!; handleLoadBookmark(); + handleLoadReservation(); + handleLoadBuildings(); + let { isActiveNow, ActiveReservation } = findActiveReservation(myReservations); + setIsActive(isActiveNow); + + if(isActiveNow){ + setNowUsingReservation(ActiveReservation!); + } } }, [isUserLoggedIn, navigate]); @@ -57,10 +75,43 @@ export default function MainPage() { setMyBookmarks(bookmarks); } + const handleLoadReservation = async () => { + const reservations : Reservation[] = await getReservations(userToken); + setMyReservations(reservations); + } + const handleBellClick = () => { console.log("bell clicked"); } + const handleMenuClick = async () => { + openFacilityMenuModal(); + } + + const handleLoadBuildings = async () => { + const buildings : Building[] = await getBuildings(userToken); + setBuildings(buildings); + } + + const handleEndUsing = () => { + + } + + const findActiveReservation = (reservationList: Reservation[]): { isActiveNow: boolean, ActiveReservation: Reservation | null } => { + const now = new Date(); + + for (const reservation of reservationList) { + const startDate = new Date(`${reservation.getDate}T${reservation.getStartTime}`); + const endDate = new Date(`${reservation.getDate}T${reservation.getEndTime}`); + + if (now >= startDate && now <= endDate) { + return { isActiveNow: true, ActiveReservation :reservation }; + } + } + + return { isActiveNow: false, ActiveReservation: null }; + }; + return ( @@ -79,29 +130,41 @@ export default function MainPage() { paddingTop: '32px', paddingBottom: '32px', }}> - {/* 상자 안의 내용 */} -
- 신공학관(기숙사) -
-
- 401-3107(3107 강의실) -
-
-
- 14:00 ~ 15:00 이용중 -
-
-
- -
+ { + isActive ? +
+ {/* 상자 안의 내용 */} +
+ {nowUsingReservation!.getBuildingName()} +
+
+ {nowUsingReservation!.getFacilityName()} +
+
+
+ {nowUsingReservation!.getStartTime()} ~ {nowUsingReservation!.getEndTime()} 이용중 +
+
+
+ +
+
: +
+ +
+ 현재 이용중인 시설물이 없어요. +
+
+ } { facilityMenu.map((menu, index) => ( -
+
{menu.name}
@@ -126,16 +189,55 @@ export default function MainPage() {
))} : -
즐겨찾기가 없습니다.
} +
즐겨찾기가 없어요.
} - +
내 예약
+ + {myReservations.length > 0 ? + <> + {myReservations.map((reservation, index) => ( +
+
+ +
+
{reservation.getDate()}
+
+
{reservation.getBuildingName()}
+
{reservation.getFacilityName()}
+
+
+ +
+
+ ))} + : +
예약내역이 없어요.
} + + + +
+ {buildings.map((building, index) => ( +
+
+
+ +
+
{building.getName()}
+
+ +
+
+ + ))} + x + +
+ ); } \ No newline at end of file