From 9ab3fa5ff338ee7f803458759ab2a326a128463c Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Mon, 10 Jun 2024 23:15:54 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20=EC=B6=94=EC=B2=9Capi=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/reservation/getBranchesByDistance.ts | 10 ++--- src/api/types/branch.ts | 2 +- .../meetingRoom/MeetingRoomIndex.tsx | 38 +++++++++++++------ 3 files changed, 30 insertions(+), 20 deletions(-) diff --git a/src/api/reservation/getBranchesByDistance.ts b/src/api/reservation/getBranchesByDistance.ts index 9237d36..6bf2506 100644 --- a/src/api/reservation/getBranchesByDistance.ts +++ b/src/api/reservation/getBranchesByDistance.ts @@ -1,12 +1,8 @@ import { BranchDistanceResponse } from "../types/branch"; -export const getBranchesByDistance = async (latitude: number, longitude: number): Promise => { +export const getBranchesByDistance = async (branchId: number): Promise => { const backendUrl = process.env.NEXT_PUBLIC_BASE_URL; - const url = new URL(`${backendUrl}branches/distance`); - - // Add latitude and longitude as query parameters - url.searchParams.append('latitude', String(latitude)); - url.searchParams.append('longitude', String(longitude)); + const url = new URL(`${backendUrl}branches/${branchId}/near`); const token = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/, "$1"); @@ -34,4 +30,4 @@ export const getBranchesByDistance = async (latitude: number, longitude: number) } return data.data; -}; +}; \ No newline at end of file diff --git a/src/api/types/branch.ts b/src/api/types/branch.ts index 82bdca5..8166737 100644 --- a/src/api/types/branch.ts +++ b/src/api/types/branch.ts @@ -4,7 +4,7 @@ export interface Branch { branchAddress: string; branchLatitude: number; branchLongitude: number; - branchId?: number; + branchId: number; } export interface ModalProps { diff --git a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx index b0aa071..3542617 100644 --- a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx +++ b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx @@ -266,23 +266,37 @@ const MeetingRoomIndex: React.FC = () => { setShowModal(true); }; - const fetchBranchesByDistance = async (latitude: number, longitude: number) => { - try { - const branches = await getBranchesByDistance(latitude, longitude); - console.log('Branches by distance:', branches); - } catch (error) { - console.error('Error fetching branches by distance:', error); +const fetchBranchesByDistance = async (branchId: number, existingParams: GetMeetingRoomsParams) => { + try { + const branches = await getBranchesByDistance(branchId); + console.log('Branches by distance:', branches); + + if (branches && branches.length > 0) { + const nearestBranch = branches[0]; + const newParams = { + ...existingParams, + branchName: nearestBranch.branchName + }; + + const response = await getMeetingRooms(newParams); + const rooms = response.meetingRoomForListList; + console.log(response); + console.log(rooms); + rooms.sort((a, b) => a.meetingRoomCapacity - b.meetingRoomCapacity || a.meetingRoomId - b.meetingRoomId); + // setMeetingRooms(rooms); } - }; + } catch (error) { + console.error('Error fetching branches or meeting rooms:', error); + } +}; useEffect(() => { - if (meetingRooms.length === 0) { - const latitude = currentBranch!.branchLatitude - const longitude = currentBranch!.branchLongitude - fetchBranchesByDistance(latitude, longitude); + if (meetingRooms.length === 0 && params) { + fetchBranchesByDistance(currentBranch!.branchId, params); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [meetingRooms]); + }, [meetingRooms, params]); + return ( From 6dcc078968ed466a95b3a57c5202ddcf52ae8432 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Mon, 10 Jun 2024 23:20:12 +0900 Subject: [PATCH 02/13] =?UTF-8?q?fix:=20=EC=98=88=EC=95=BD=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=84=20=EB=82=A0=EC=A7=9C=20=EC=A0=9C=EB=8C=80=EB=A1=9C=20?= =?UTF-8?q?=EC=95=88=EB=B6=88=EB=9F=AC=EC=99=80=EC=A7=80=EB=8A=94=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/reservation/meetingRoom/DatePickerModal.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/reservation/meetingRoom/DatePickerModal.tsx b/src/components/reservation/meetingRoom/DatePickerModal.tsx index 37b91fe..08773be 100644 --- a/src/components/reservation/meetingRoom/DatePickerModal.tsx +++ b/src/components/reservation/meetingRoom/DatePickerModal.tsx @@ -95,6 +95,11 @@ const DatePickerModal: React.FC = ({ endDateTime.setHours(endHour); endDateTime.setMinutes(endMinute); + // Check if endDateTime is before startDateTime, if so, add a day to endDateTime + if (endDateTime <= startDateTime) { + endDateTime.setDate(endDateTime.getDate() + 1); + } + onConfirm(startDateTime, endDateTime, { meetingRoomTypes: selectedMeetingRoomTypes.length === 0 From 07eefdae13d0f532c72cca4a8a8c7b041f60152d Mon Sep 17 00:00:00 2001 From: hojin Date: Mon, 10 Jun 2024 23:52:53 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat=20:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20api=20=EC=97=B0=EA=B2=B0=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/AvailableRoom.tsx | 55 ++++++- src/components/home/CurrentOffice.tsx | 9 +- src/components/home/MainPageIndex.tsx | 4 + src/components/home/OfficeInfo.tsx | 3 + src/components/home/model/mainReservation.ts | 12 ++ .../home/officeInfo/OfficeDeleteModal.tsx | 101 ++++++++++++ .../home/officeInfo/OfficeInfoFocus.tsx | 25 +-- .../home/officeInfo/OfficeInfoMeeting.tsx | 35 ++-- .../home/officeInfo/OfficeInfoRecharging.tsx | 22 ++- src/components/home/remote/mainReservation.ts | 25 +++ .../home/weekSchedule/WeekSchedule.tsx | 149 ++++++++++++++++-- .../modal/ReservationDeleteModal.tsx | 4 +- .../roomTypeItem/MeetingRoomItem.tsx | 13 +- 13 files changed, 386 insertions(+), 71 deletions(-) create mode 100644 src/components/home/model/mainReservation.ts create mode 100644 src/components/home/officeInfo/OfficeDeleteModal.tsx create mode 100644 src/components/home/remote/mainReservation.ts diff --git a/src/components/home/AvailableRoom.tsx b/src/components/home/AvailableRoom.tsx index b0e9329..7930ce0 100644 --- a/src/components/home/AvailableRoom.tsx +++ b/src/components/home/AvailableRoom.tsx @@ -1,9 +1,24 @@ 'use client'; +import { useBranchStore } from '@/store/branch.store'; import { format } from 'date-fns'; import React, { useEffect, useState } from 'react'; +import { useQuery, useQueryClient } from 'react-query'; +import { getAllAvailableCount } from './remote/mainReservation'; +import { useRouter } from 'next/router'; const AvailableRoom = () => { + const router = useRouter(); + const queryClient = useQueryClient(); const [currentTime, setCurrentTime] = useState(format(new Date(), 'HH:mm')); + const selectedBranch = useBranchStore((state) => state.selectedBranch); + + const { data } = useQuery( + ['AllAvailableCount', selectedBranch?.branchId], + () => getAllAvailableCount(selectedBranch?.branchId as number), + { + enabled: !!selectedBranch?.branchId + } + ); useEffect(() => { const handleVisibilityChange = () => { @@ -17,6 +32,10 @@ const AvailableRoom = () => { }; }, []); + if (!data) { + return null; + } + return (
{/* 상단 */} @@ -26,7 +45,13 @@ const AvailableRoom = () => {
{currentTime} 기준
setCurrentTime(format(new Date(), 'HH:mm'))}> + onClick={() => { + queryClient.invalidateQueries([ + 'AllAvailableCount', + selectedBranch?.branchId + ]); + setCurrentTime(format(new Date(), 'HH:mm')); + }}>
@@ -41,12 +66,16 @@ const AvailableRoom = () => {
미팅룸
- 1 + + {data?.availableMeetingRoomCount} +
-
30
+
+ {data?.totalMeetingRoomCount} +
@@ -57,12 +86,16 @@ const AvailableRoom = () => {
리차징룸
- 1 + + {data?.availableRechargingRoomCount} +
-
30
+
+ {data?.totalRechargingRoomCount} +
@@ -73,18 +106,24 @@ const AvailableRoom = () => {
포커스존
- 1 + + {data?.availableFocusDeskCount} +
-
30
+
+ {data?.totalFocusDeskCount} +
{/* 하단 */} -
+
router.push('reservation')} + className="cursor-pointer mt-8 rounded-lg w-full h-12 border-2 border-space-purple flex justify-center items-center text-space-purple text-[15px] font-semibold"> 예약하기
diff --git a/src/components/home/CurrentOffice.tsx b/src/components/home/CurrentOffice.tsx index 24de693..d32c570 100644 --- a/src/components/home/CurrentOffice.tsx +++ b/src/components/home/CurrentOffice.tsx @@ -13,7 +13,6 @@ const CurrentOffice = () => { const setSelectedBranch = useBranchStore((state) => state.setSelectedBranch); const [isHydrated, setIsHydrated] = useState(false); const { isCurrent } = useIsCurrentBranch(); - console.log(!isCurrent); const initialBranch: Branch = { branchId: 27, @@ -31,10 +30,6 @@ const CurrentOffice = () => { } }, [selectedBranch, setSelectedBranch]); - useEffect(() => { - console.log('Current selectedBranch:', selectedBranch); - }, [selectedBranch]); - const handleBranchSelect = (branch: Branch) => { setSelectedBranch(branch, Date.now()); setShowSearchModal(false); @@ -70,10 +65,10 @@ const CurrentOffice = () => { {!isCurrent ? (
-
+
-
+
이 지점이 맞나요?
diff --git a/src/components/home/MainPageIndex.tsx b/src/components/home/MainPageIndex.tsx index 468c479..9be3455 100644 --- a/src/components/home/MainPageIndex.tsx +++ b/src/components/home/MainPageIndex.tsx @@ -8,8 +8,11 @@ import UserInfo from './UserInfo'; import OfficeInfo from './OfficeInfo'; import WeekSchedule from './weekSchedule/WeekSchedule'; import AvailableRoom from './AvailableRoom'; +import { useReservationStore } from '@/store/reservationModal.store'; +import OfficeDeleteModal from './officeInfo/OfficeDeleteModal'; const MainPageIndex = () => { + const { deleteOpen, deleteDeskId } = useReservationStore(); return (
@@ -24,6 +27,7 @@ const MainPageIndex = () => {
+ {deleteOpen && deleteDeskId !== null && }
); }; diff --git a/src/components/home/OfficeInfo.tsx b/src/components/home/OfficeInfo.tsx index 4a94950..e45e7a3 100644 --- a/src/components/home/OfficeInfo.tsx +++ b/src/components/home/OfficeInfo.tsx @@ -26,6 +26,9 @@ const OfficeInfo = () => { setIsCurrent(true); } } + if (data?.length == 0) { + setIsCurrent(true); + } }, [selectedBranch, setIsCurrent, data]); if (!data) { diff --git a/src/components/home/model/mainReservation.ts b/src/components/home/model/mainReservation.ts new file mode 100644 index 0000000..aa36ec9 --- /dev/null +++ b/src/components/home/model/mainReservation.ts @@ -0,0 +1,12 @@ +import { ICommon } from '@/api/types/common'; + +export interface AllAvailableCountData { + totalMeetingRoomCount: number; + availableMeetingRoomCount: number; + totalRechargingRoomCount: number; + availableRechargingRoomCount: number; + totalFocusDeskCount: number; + availableFocusDeskCount: number; +} + +export type AllAvailableCountType = ICommon; diff --git a/src/components/home/officeInfo/OfficeDeleteModal.tsx b/src/components/home/officeInfo/OfficeDeleteModal.tsx new file mode 100644 index 0000000..c184648 --- /dev/null +++ b/src/components/home/officeInfo/OfficeDeleteModal.tsx @@ -0,0 +1,101 @@ +import useOnClickOutside from '@/components/community/hooks/useOnClickOutside'; +import { + deleteFocuszone, + deleteMeetingRoom, + deleteRechargingRoom +} from '@/components/reservation/remote/myreservation'; +import { useBranchStore } from '@/store/branch.store'; +import { useReservationStore } from '@/store/reservationModal.store'; +import React, { useRef } from 'react'; +import { useMutation, useQueryClient } from 'react-query'; + +const OfficeDeleteModal = () => { + const { deleteDeskId, setDeleteOpen, isMeeting, isLeader, roomType } = + useReservationStore(); + const queryClient = useQueryClient(); + const selectedBranch = useBranchStore((state) => state.selectedBranch); + + const { mutateAsync } = useMutation( + (deskId: number) => { + if (roomType === 'FOCUS') { + return deleteFocuszone(deskId); + } else if (roomType === 'RECHARGING') { + return deleteRechargingRoom(deskId); + } else { + return deleteMeetingRoom(deskId); + } + }, + { + onSuccess: () => { + setDeleteOpen(false); + queryClient.invalidateQueries(['todayReservationList']); + queryClient.invalidateQueries(['AllAvailableCount', selectedBranch?.branchId]); + } + } + ); + + const ref = useRef(null); + useOnClickOutside(ref, () => setDeleteOpen(false)); + + const renderTitle = () => { + if (isMeeting && isLeader && roomType === 'MEETING') { + return ( +
+ 예약을 취소하시겠어요? +
+ ); + } else if (isMeeting && !isLeader && roomType === 'MEETING') { + return ( +
+ 참여를 취소하시겠어요? +
+ ); + } else if (roomType === 'RECHARGING') { + return ( +
+ 예약을 취소하시겠어요? +
+ ); + } else { + return ( +
+ 이용을 종료하시겠어요? +
+ ); + } + }; + + return ( +
+
+ {/* 공통부분 */} + {renderTitle()} + {isMeeting && isLeader && ( +
+ 예약을 취소하시면, 등록된 참석자 모두의 일정에 반영됩니다. 삭제하시겠어요? +
+ )} +
+
setDeleteOpen(false)} + className="cursor-pointer flex-1 flex items-center justify-center py-[12.5px] rounded-lg border border-space-purple text-base text-space-purple font-semibold"> + 취소 +
+
{ + if (deleteDeskId) { + mutateAsync(deleteDeskId); + } + }} + className=" cursor-pointer flex-1 flex items-center justify-center py-[12.5px] rounded-lg text-white bg-space-purple font-semibold text-base"> + 확인 +
+
+
+
+ ); +}; + +export default OfficeDeleteModal; diff --git a/src/components/home/officeInfo/OfficeInfoFocus.tsx b/src/components/home/officeInfo/OfficeInfoFocus.tsx index be569e6..13eaaf5 100644 --- a/src/components/home/officeInfo/OfficeInfoFocus.tsx +++ b/src/components/home/officeInfo/OfficeInfoFocus.tsx @@ -1,18 +1,18 @@ import { todayListData } from '@/components/reservation/model/myreservation'; -import { - deleteFocuszone, - getReservationDetail -} from '@/components/reservation/remote/myreservation'; +import { getReservationDetail } from '@/components/reservation/remote/myreservation'; +import { useReservationStore } from '@/store/reservationModal.store'; import { format, parse } from 'date-fns'; import React from 'react'; -import { useMutation, useQuery, useQueryClient } from 'react-query'; +import { useQuery } from 'react-query'; interface OfficeInfoFocusType { data: todayListData; } const OfficeInfoFocus = ({ data }: OfficeInfoFocusType) => { - const queryClient = useQueryClient(); + const { setDeleteOpen, setDeleteDeskId, setRoomType, setIsLeader, setIsMeeting } = + useReservationStore(); + const { data: focusData } = useQuery( ['reservationDetail', data?.reservationId], () => getReservationDetail(data?.reservationId), @@ -20,11 +20,6 @@ const OfficeInfoFocus = ({ data }: OfficeInfoFocusType) => { enabled: data?.reservationId != null } ); - const { mutateAsync } = useMutation((deskId: number) => deleteFocuszone(deskId), { - onSuccess: () => { - queryClient.invalidateQueries(['todayReservationList']); - } - }); const date = parse(data?.startAt, 'yyyy-MM-dd HH:mm', new Date()); const formattedTime = format(date, 'HH:mm'); @@ -45,7 +40,13 @@ const OfficeInfoFocus = ({ data }: OfficeInfoFocusType) => {
mutateAsync(focusData?.spaceId)} + onClick={() => { + setRoomType('FOCUS'); + setIsMeeting(false); + setIsLeader(false); + setDeleteDeskId(focusData?.spaceId); + setDeleteOpen(true); + }} className="cursor-pointer w-[107px] h-9 text-red-700 flex items-center justify-center border-2 border-red-700 font-medium rounded-md"> 이용 종료
diff --git a/src/components/home/officeInfo/OfficeInfoMeeting.tsx b/src/components/home/officeInfo/OfficeInfoMeeting.tsx index 82724e4..947ed5b 100644 --- a/src/components/home/officeInfo/OfficeInfoMeeting.tsx +++ b/src/components/home/officeInfo/OfficeInfoMeeting.tsx @@ -1,18 +1,17 @@ import { todayListData } from '@/components/reservation/model/myreservation'; -import { - deleteMeetingRoom, - getReservationDetail -} from '@/components/reservation/remote/myreservation'; +import { getReservationDetail } from '@/components/reservation/remote/myreservation'; +import { useReservationStore } from '@/store/reservationModal.store'; import { format, isBefore, parse } from 'date-fns'; import React from 'react'; -import { useMutation, useQuery, useQueryClient } from 'react-query'; +import { useQuery } from 'react-query'; interface OfficeInfoMeetingType { data: todayListData; } const OfficeInfoMeeting = ({ data }: OfficeInfoMeetingType) => { - const queryClient = useQueryClient(); + const { setDeleteOpen, setDeleteDeskId, setIsLeader, setRoomType, setIsMeeting } = + useReservationStore(); const { data: meetingData } = useQuery( ['reservationDetail', data?.reservationId], @@ -21,14 +20,6 @@ const OfficeInfoMeeting = ({ data }: OfficeInfoMeetingType) => { enabled: data?.reservationId != null } ); - const { mutateAsync } = useMutation( - (reservationId: number) => deleteMeetingRoom(reservationId), - { - onSuccess: () => { - queryClient.invalidateQueries(['todayReservationList']); - } - } - ); const startDate = parse(data?.startAt, 'yyyy-MM-dd HH:mm', new Date()); const endDate = parse(data?.endAt, 'yyyy-MM-dd HH:mm', new Date()); @@ -40,7 +31,13 @@ const OfficeInfoMeeting = ({ data }: OfficeInfoMeetingType) => { if (!result && meetingData?.myMemberType == 'REPRESENTATIVE') { return (
mutateAsync(data?.reservationId)} + onClick={() => { + setRoomType('MEETING'); + setDeleteDeskId(data?.reservationId); + setIsMeeting(true); + setIsLeader(true); + setDeleteOpen(true); + }} className="cursor-pointer w-[107px] h-9 text-space-purple flex items-center justify-center border-2 border-space-purple font-medium rounded-md"> 예약 취소
@@ -48,7 +45,13 @@ const OfficeInfoMeeting = ({ data }: OfficeInfoMeetingType) => { } else if (!result && meetingData?.myMemberType == 'PARTICIPANT') { return (
mutateAsync(data?.reservationId)} + onClick={() => { + setRoomType('MEETING'); + setIsLeader(false); + setDeleteDeskId(data?.reservationId); + setIsMeeting(true); + setDeleteOpen(true); + }} className="cursor-pointer w-[107px] h-9 text-space-purple flex items-center justify-center border-2 border-space-purple font-medium rounded-md"> 참여 취소
diff --git a/src/components/home/officeInfo/OfficeInfoRecharging.tsx b/src/components/home/officeInfo/OfficeInfoRecharging.tsx index 81bea6f..8aafd33 100644 --- a/src/components/home/officeInfo/OfficeInfoRecharging.tsx +++ b/src/components/home/officeInfo/OfficeInfoRecharging.tsx @@ -1,23 +1,15 @@ import { todayListData } from '@/components/reservation/model/myreservation'; -import { deleteRechargingRoom } from '@/components/reservation/remote/myreservation'; +import { useReservationStore } from '@/store/reservationModal.store'; import { format, isBefore, parse } from 'date-fns'; import React from 'react'; -import { useMutation, useQueryClient } from 'react-query'; interface OfficeInfoRechargingType { data: todayListData; } const OfficeInfoRecharging = ({ data }: OfficeInfoRechargingType) => { - const queryClient = useQueryClient(); - const { mutateAsync } = useMutation( - (reservationId: number) => deleteRechargingRoom(reservationId), - { - onSuccess: () => { - queryClient.invalidateQueries(['todayReservationList']); - } - } - ); + const { setDeleteOpen, setDeleteDeskId, setIsLeader, setRoomType, setIsMeeting } = + useReservationStore(); const startDate = parse(data?.startAt, 'yyyy-MM-dd HH:mm', new Date()); const endDate = parse(data?.endAt, 'yyyy-MM-dd HH:mm', new Date()); @@ -46,7 +38,13 @@ const OfficeInfoRecharging = ({ data }: OfficeInfoRechargingType) => { ) : (
mutateAsync(data?.reservationId)} + onClick={() => { + setRoomType('RECHARGING'); + setIsLeader(false); + setIsMeeting(false); + setDeleteDeskId(data?.reservationId); + setDeleteOpen(true); + }} className="cursor-pointer w-[107px] h-9 text-space-purple flex items-center justify-center border-2 border-space-purple font-medium rounded-md"> 예약 취소
diff --git a/src/components/home/remote/mainReservation.ts b/src/components/home/remote/mainReservation.ts new file mode 100644 index 0000000..b96bb33 --- /dev/null +++ b/src/components/home/remote/mainReservation.ts @@ -0,0 +1,25 @@ +import { getRequest } from '@/api/request'; +import { AllAvailableCountType } from '../model/mainReservation'; +import { TodayList } from '@/components/reservation/model/myreservation'; + +export const getAllAvailableCount = async (branchId: number) => { + try { + const { data } = await getRequest( + `branches/${branchId}/available-count` + ); + return data; + } catch (error: any) { + return error.response.data; + } +}; + +export const getDayReservationList = async (localDate: string) => { + try { + const { data } = await getRequest( + `reservations/week?localDate=${localDate}` + ); + return data; + } catch (error: any) { + return error.response.data; + } +}; diff --git a/src/components/home/weekSchedule/WeekSchedule.tsx b/src/components/home/weekSchedule/WeekSchedule.tsx index e5e1d9a..55585eb 100644 --- a/src/components/home/weekSchedule/WeekSchedule.tsx +++ b/src/components/home/weekSchedule/WeekSchedule.tsx @@ -1,24 +1,98 @@ 'use client'; import React, { useState } from 'react'; -import { format, startOfWeek, addDays, isSaturday, isSunday, isSameDay } from 'date-fns'; +import { + format, + startOfWeek, + addDays, + isSaturday, + isSunday, + isSameDay, + parse +} from 'date-fns'; import { ko } from 'date-fns/locale'; import { useRouter } from 'next/router'; +import { useQuery } from 'react-query'; +import { getDayReservationList } from '../remote/mainReservation'; +import { todayListData } from '@/components/reservation/model/myreservation'; +import Image from 'next/image'; const WeekSchedule = () => { const router = useRouter(); - const [selectedDate, setSelectedDate] = useState(new Date()); - const today: Date = new Date(); - const startDate: Date = startOfWeek(today, { weekStartsOn: 1 }); - const daysOfWeek: Date[] = []; - for (let i = 0; i < 7; i++) { const day: Date = addDays(startDate, i); daysOfWeek.push(day); } + const formattedSelectedDate = selectedDate ? format(selectedDate, 'yyyy-MM-dd') : ''; + + const { data } = useQuery( + ['getDayReservation', formattedSelectedDate], + () => getDayReservationList(formattedSelectedDate), + { + enabled: !!formattedSelectedDate + } + ); + + if (!data) { + return
; + } + + const renderTime = (dateString: string) => { + const parsedDate = parse(dateString, 'yyyy-MM-dd HH:mm', new Date()); + const formattedTime = format(parsedDate, 'HH:mm'); + + return formattedTime; + }; + + const renderUserImg = (images: string[]) => { + if (images.length <= 3) { + return ( +
+ {images.map((userImg: string, i) => ( + userimg + ))} +
+ ); + } else { + return ( +
+ {images.slice(0, 3).map((userImg: string, i) => ( + userimg + ))} +
+ userimg +
+ {' '} + +{images.length - 3} +
+
+
+ ); + } + }; return (
@@ -43,19 +117,72 @@ const WeekSchedule = () => { ${selectedDate && isSameDay(day, selectedDate) ? 'bg-space-purple text-white rounded-[30px]' : ''} items-center justify-center`} key={i} - onClick={() => setSelectedDate(day)}> + onClick={() => { + setSelectedDate(day); + }}>
{format(day, 'EEEE', { locale: ko }).slice(0, 1)}
{format(day, 'dd')}
))}
+ {/* 예약 리스트 */} {/* 예약 일정이 없을 때 */} -
-
- 예약된 일정이 없습니다. + {data.length === 0 ? ( +
+
+ 예약된 일정이 없습니다. +
-
+ ) : ( + <> + {data.slice(0, 3).map((item: todayListData, index: number) => { + if (item.spaceType == 'MEETINGROOM') { + return ( +
+
+
+
+ {item.reservationName} +
+
+ {renderTime(item.startAt)} - {renderTime(item.endAt)} |{' '} + {item.spaceName} +
+
+ {renderUserImg(item.memberImageUrls)} +
+ ); + } else if (item.spaceType == 'FOCUSDESK') { + return ( +
+
+ 개인 좌석 +
+
+ {renderTime(item.startAt)} ~ |{' '} + {item.spaceName} +
+
+ ); + } else { + return ( +
+
+ 개인 휴식 +
+
+ {renderTime(item.startAt)} - {renderTime(item.endAt)} |{' '} + {item.spaceName} +
+
+ ); + } + })} + + )}
); }; diff --git a/src/components/reservation/myReservationList/modal/ReservationDeleteModal.tsx b/src/components/reservation/myReservationList/modal/ReservationDeleteModal.tsx index 4649876..cf15e2f 100644 --- a/src/components/reservation/myReservationList/modal/ReservationDeleteModal.tsx +++ b/src/components/reservation/myReservationList/modal/ReservationDeleteModal.tsx @@ -36,13 +36,13 @@ const ReservationDeleteModal = () => { useOnClickOutside(ref, () => setDeleteOpen(false)); const renderTitle = () => { - if (isMeeting && isLeader) { + if (isMeeting && isLeader && roomType === 'MEETING') { return (
예약을 취소하시겠어요?
); - } else if (isMeeting && !isLeader) { + } else if (isMeeting && !isLeader && roomType === 'MEETING') { return (
참여를 취소하시겠어요? diff --git a/src/components/reservation/myReservationList/roomTypeItem/MeetingRoomItem.tsx b/src/components/reservation/myReservationList/roomTypeItem/MeetingRoomItem.tsx index 331563a..4d7402a 100644 --- a/src/components/reservation/myReservationList/roomTypeItem/MeetingRoomItem.tsx +++ b/src/components/reservation/myReservationList/roomTypeItem/MeetingRoomItem.tsx @@ -4,6 +4,7 @@ import { useReservationStore } from '@/store/reservationModal.store'; import React, { useCallback } from 'react'; import { todayListData } from '../../model/myreservation'; import { format } from 'date-fns'; +import Image from 'next/image'; interface MeetingRoomItemType { roomData: todayListData; @@ -17,7 +18,9 @@ const MeetingRoomItem = ({ roomData }: MeetingRoomItemType) => { return (
{roomData?.memberImageUrls.map((userImg: string, i) => ( - { {roomData?.memberImageUrls .slice(0, 3) .map((userImg: string, i) => ( - { /> ))}
- userimg Date: Tue, 11 Jun 2024 00:40:03 +0900 Subject: [PATCH 04/13] =?UTF-8?q?fix=20:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/officeInfo/OfficeDeleteModal.tsx | 2 +- src/components/home/weekSchedule/WeekSchedule.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/home/officeInfo/OfficeDeleteModal.tsx b/src/components/home/officeInfo/OfficeDeleteModal.tsx index c184648..aa919be 100644 --- a/src/components/home/officeInfo/OfficeDeleteModal.tsx +++ b/src/components/home/officeInfo/OfficeDeleteModal.tsx @@ -27,9 +27,9 @@ const OfficeDeleteModal = () => { }, { onSuccess: () => { - setDeleteOpen(false); queryClient.invalidateQueries(['todayReservationList']); queryClient.invalidateQueries(['AllAvailableCount', selectedBranch?.branchId]); + setDeleteOpen(false); } } ); diff --git a/src/components/home/weekSchedule/WeekSchedule.tsx b/src/components/home/weekSchedule/WeekSchedule.tsx index 55585eb..8d6c210 100644 --- a/src/components/home/weekSchedule/WeekSchedule.tsx +++ b/src/components/home/weekSchedule/WeekSchedule.tsx @@ -157,7 +157,7 @@ const WeekSchedule = () => { ); } else if (item.spaceType == 'FOCUSDESK') { return ( -
+
개인 좌석
@@ -169,7 +169,7 @@ const WeekSchedule = () => { ); } else { return ( -
+
개인 휴식
From fdfb3f89c75e57e016394747cb25aff24209223f Mon Sep 17 00:00:00 2001 From: hojin Date: Tue, 11 Jun 2024 00:45:17 +0900 Subject: [PATCH 05/13] =?UTF-8?q?fix=20:=20=EB=A6=B0=ED=8A=B8=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reservation/myReservationList/modal/MeetingDetailModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/reservation/myReservationList/modal/MeetingDetailModal.tsx b/src/components/reservation/myReservationList/modal/MeetingDetailModal.tsx index aa3dffa..b25329c 100644 --- a/src/components/reservation/myReservationList/modal/MeetingDetailModal.tsx +++ b/src/components/reservation/myReservationList/modal/MeetingDetailModal.tsx @@ -30,7 +30,6 @@ const MeetingDetailModal = () => { } ); - /* eslint-disable */ // useEffect(() => { // if (data == undefined) { // alert('이미 종료된 일정입니다'); From 3169f7ce47b41d5d39daa9443c4066a0fbc39555 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Tue, 11 Jun 2024 01:27:58 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=EC=B6=94=EC=B2=9C=20api=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../meetingRoom/DatePickerModal.tsx | 3 +- .../meetingRoom/MeetingRoomIndex.tsx | 205 +++++++++++++++++- 2 files changed, 199 insertions(+), 9 deletions(-) diff --git a/src/components/reservation/meetingRoom/DatePickerModal.tsx b/src/components/reservation/meetingRoom/DatePickerModal.tsx index 08773be..68b8224 100644 --- a/src/components/reservation/meetingRoom/DatePickerModal.tsx +++ b/src/components/reservation/meetingRoom/DatePickerModal.tsx @@ -95,7 +95,6 @@ const DatePickerModal: React.FC = ({ endDateTime.setHours(endHour); endDateTime.setMinutes(endMinute); - // Check if endDateTime is before startDateTime, if so, add a day to endDateTime if (endDateTime <= startDateTime) { endDateTime.setDate(endDateTime.getDate() + 1); } @@ -342,4 +341,4 @@ const DatePickerModal: React.FC = ({ ); }; -export default DatePickerModal; +export default DatePickerModal; \ No newline at end of file diff --git a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx index 3542617..3e45a67 100644 --- a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx +++ b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx @@ -7,6 +7,8 @@ import DatePickerModal from './DatePickerModal'; import { useRouter } from 'next/router'; import { useBranchStore } from '@/store/branch.store'; import { getBranchesByDistance } from '@/api/reservation/getBranchesByDistance'; +import { BranchDistanceResponse } from '@/api/types/branch'; +import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice'; const formatDateToCustomString = (date: Date): string => { const year = date.getFullYear(); @@ -85,6 +87,12 @@ const MeetingRoomIndex: React.FC = () => { const [toastType, setToastType] = useState(null); const [activeTabState, setActiveTabState] = useState(''); + + const [newMeetingRoomsInfo, setNewMeetingRoomsInfo] = useState(); + const [newMeetingRoomsInfo2, setNewMeetingRoomsInfo2] = useState(); + const [newMeetingRooms, setNewMeetingRooms] = useState([]); + const [newMeetingRooms2, setNewMeetingRooms2] = useState([]); + const currentBranch = updatedTimeSelected && updatedTimeReserved && updatedTimeSelected > updatedTimeReserved @@ -273,32 +281,99 @@ const fetchBranchesByDistance = async (branchId: number, existingParams: GetMeet if (branches && branches.length > 0) { const nearestBranch = branches[0]; + setNewMeetingRoomsInfo([nearestBranch]); + console.log(newMeetingRoomsInfo); const newParams = { ...existingParams, branchName: nearestBranch.branchName }; - const response = await getMeetingRooms(newParams); - const rooms = response.meetingRoomForListList; + const newRooms = response.meetingRoomForListList; console.log(response); - console.log(rooms); - rooms.sort((a, b) => a.meetingRoomCapacity - b.meetingRoomCapacity || a.meetingRoomId - b.meetingRoomId); - // setMeetingRooms(rooms); + console.log(newRooms); + setNewMeetingRooms(newRooms); + console.log(newMeetingRooms); + + const nearestBranch2 = branches[1]; + setNewMeetingRoomsInfo2([nearestBranch2]); + console.log(newMeetingRoomsInfo2); + const newParams2 = { + ...existingParams, + branchName: nearestBranch2.branchName + }; + const response2 = await getMeetingRooms(newParams2); + const newRooms2 = response2.meetingRoomForListList; + console.log(response2); + console.log(newRooms2); + setNewMeetingRooms2(newRooms2); + console.log(newMeetingRooms2); } } catch (error) { console.error('Error fetching branches or meeting rooms:', error); } }; +const handleNear1Office = async () => { + try { + if (!newMeetingRoomsInfo || newMeetingRoomsInfo.length === 0) { + console.error('newMeetingRoomsInfo is undefined or empty'); + return; + } + const data = await getSelectedOfficeInfo(newMeetingRoomsInfo[0].branchName); + console.log(data); + const officeInfo = data.data; + console.log(officeInfo); + router.push({ + pathname: `/branches/${encodeURIComponent(newMeetingRoomsInfo[0].branchName)}`, + query: { + name: officeInfo.branchName, + address: officeInfo.branchAddress, + branchPhoneNumber: officeInfo.branchPhoneNumber, + roadFromStation: officeInfo.roadFromStation, + stationToBranch: officeInfo.stationToBranch.join(','), + branchId: officeInfo.branchId + } + }, `/branches/${encodeURIComponent(newMeetingRoomsInfo[0].branchName)}`); + } catch (error) { + console.error('Error fetching office info:', error); + } +}; + +const handleNear2Office = async () => { + try { + if (!newMeetingRoomsInfo2 || newMeetingRoomsInfo2.length === 0) { + console.error('newMeetingRoomsInfo is undefined or empty'); + return; + } + const data = await getSelectedOfficeInfo(newMeetingRoomsInfo2[0].branchName); + console.log(data); + const officeInfo = data.data; + console.log(officeInfo); + router.push({ + pathname: `/branches/${encodeURIComponent(newMeetingRoomsInfo2[0].branchName)}`, + query: { + name: officeInfo.branchName, + address: officeInfo.branchAddress, + branchPhoneNumber: officeInfo.branchPhoneNumber, + roadFromStation: officeInfo.roadFromStation, + stationToBranch: officeInfo.stationToBranch.join(','), + branchId: officeInfo.branchId + } + }, `/branches/${encodeURIComponent(newMeetingRoomsInfo2[0].branchName)}`); + } catch (error) { + console.error('Error fetching office info:', error); + } +}; + + useEffect(() => { - if (meetingRooms.length === 0 && params) { + if (meetingRooms.length == 0 && params) { fetchBranchesByDistance(currentBranch!.branchId, params); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [meetingRooms, params]); - return (
@@ -440,6 +515,122 @@ const fetchBranchesByDistance = async (branchId: number, existingParams: GetMeet ))}
)} +
+ {meetingRooms.length === 0 && ( +
+
+
같은 조건으로
근처 지점에서 찾아봤어요.
+ {newMeetingRoomsInfo && ( +
+
+
{newMeetingRoomsInfo[0].branchName}
+
+
지점 상세보기
+ arrow +
+
+
+ location +
현재 지점으로부터 {newMeetingRoomsInfo[0].distance.toFixed(2)}km
+
+
+ )} + {newMeetingRooms?.length > 0 ? ( +
+ {newMeetingRooms.map((room) => ( +
handleRoomClick(room.meetingRoomId)} + style={{ minWidth: 160, maxWidth: 160, marginRight: 10 }} + > +
+ {room.meetingRoomName} +
+
+
+ {room.meetingRoomName} +
+
+ floor +
+ {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층 +
+ capacity +
최대 {room.meetingRoomCapacity}명
+
+
+
+ ))} +
+ ) : ( +
+ 조건에 맞는 미팅룸이 없습니다. +
+ )} + {newMeetingRoomsInfo2 && ( +
+
+
{newMeetingRoomsInfo2[0].branchName}
+
+
지점 상세보기
+ arrow +
+
+
+ location +
현재 지점으로부터 {newMeetingRoomsInfo2[0].distance.toFixed(2)}km
+
+
+ )} + {newMeetingRooms2?.length > 0 ? ( +
+ {newMeetingRooms2.map((room) => ( +
handleRoomClick(room.meetingRoomId)} + style={{ minWidth: 160, maxWidth: 160, marginRight: 10 }} + > +
+ {room.meetingRoomName} +
+
+
+ {room.meetingRoomName} +
+
+ floor +
+ {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층 +
+ capacity +
최대 {room.meetingRoomCapacity}명
+
+
+
+ ))} +
+ ) : ( +
+ 조건에 맞는 미팅룸이 없습니다. +
+ )} +
+ )} +
{startTime && endTime && ( Date: Tue, 11 Jun 2024 01:37:03 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat:=20=EC=A3=BC=EB=B3=80=20=EC=A7=80?= =?UTF-8?q?=EC=A0=90=EC=97=90=EB=8F=84=20=EC=B6=94=EC=B2=9C=20=EB=AF=B8?= =?UTF-8?q?=ED=8C=85=EB=A3=B8=20=EC=97=86=EC=9D=84=20=EC=8B=9C,=20?= =?UTF-8?q?=EB=B0=94=EB=A1=9C=20=EC=98=88=EC=95=BD=20=EB=B6=88=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reservation/meetingRoom/MeetingRoomIndex.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx index 3e45a67..85dadac 100644 --- a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx +++ b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx @@ -408,7 +408,17 @@ const handleNear2Office = async () => {
- <>
바로예약
가능
+ <> + {meetingRooms.length === 0 && newMeetingRooms?.length === 0 && newMeetingRooms2?.length === 0 ? ( + <> +
바로예약
불가능
+ + ) : ( + <> +
바로예약
가능
+ + )} +
총 {meetingRooms.length}개의 공간
From 481f2c425a80804e8acc2335b1d31da856463350 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Tue, 11 Jun 2024 01:48:03 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=84=9C=20=EC=98=88=EC=95=BD=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C,=20=EB=A9=94?= =?UTF-8?q?=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80=EC=9D=98=20=EC=98=A4?= =?UTF-8?q?=ED=94=BC=EC=8A=A4=20=EC=98=88=EC=95=BD=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/AvailableRoom.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/home/AvailableRoom.tsx b/src/components/home/AvailableRoom.tsx index 7930ce0..af78a4e 100644 --- a/src/components/home/AvailableRoom.tsx +++ b/src/components/home/AvailableRoom.tsx @@ -5,12 +5,15 @@ import React, { useEffect, useState } from 'react'; import { useQuery, useQueryClient } from 'react-query'; import { getAllAvailableCount } from './remote/mainReservation'; import { useRouter } from 'next/router'; +import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice'; +import { useBranchStore2 } from '@/store/reserve.store'; const AvailableRoom = () => { const router = useRouter(); const queryClient = useQueryClient(); const [currentTime, setCurrentTime] = useState(format(new Date(), 'HH:mm')); const selectedBranch = useBranchStore((state) => state.selectedBranch); + const { setReservedBranch } = useBranchStore2(); const { data } = useQuery( ['AllAvailableCount', selectedBranch?.branchId], @@ -32,6 +35,20 @@ const AvailableRoom = () => { }; }, []); + const handleGoToReservation = async () => { + try { + const data = await getSelectedOfficeInfo(selectedBranch!.branchName); + if (data.data) { + setReservedBranch(data?.data, Date.now()); + router.push({ + pathname: '/reservation', + }); + } + } catch (error) { + console.error('Error updating selected branch:', error); + } + }; + if (!data) { return null; } @@ -122,8 +139,7 @@ const AvailableRoom = () => { {/* 하단 */}
router.push('reservation')} - className="cursor-pointer mt-8 rounded-lg w-full h-12 border-2 border-space-purple flex justify-center items-center text-space-purple text-[15px] font-semibold"> + className="cursor-pointer mt-8 rounded-lg w-full h-12 border-2 border-space-purple flex justify-center items-center text-space-purple text-[15px] font-semibold" onClick={handleGoToReservation}> 예약하기
From 4c6919af298fad096fef8eef1fae7d179cc9438c Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Tue, 11 Jun 2024 14:10:19 +0900 Subject: [PATCH 09/13] =?UTF-8?q?fix:=20=EC=A3=BC=EB=B3=80=20=EC=A7=80?= =?UTF-8?q?=EC=A0=90=20=EC=9E=88=EC=9D=84=20=EB=95=8C=20=EC=B6=94=EC=B2=9C?= =?UTF-8?q?=20api=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../meetingRoom/MeetingRoomIndex.tsx | 186 ++++++++---------- 1 file changed, 81 insertions(+), 105 deletions(-) diff --git a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx index 85dadac..86f1687 100644 --- a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx +++ b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx @@ -408,17 +408,7 @@ const handleNear2Office = async () => {
- <> - {meetingRooms.length === 0 && newMeetingRooms?.length === 0 && newMeetingRooms2?.length === 0 ? ( - <> -
바로예약
불가능
- - ) : ( - <> -
바로예약
가능
- - )} - +
바로예약
가능
총 {meetingRooms.length}개의 공간
@@ -528,118 +518,104 @@ const handleNear2Office = async () => {
{meetingRooms.length === 0 && (
-
-
같은 조건으로
근처 지점에서 찾아봤어요.
- {newMeetingRoomsInfo && ( -
+ {newMeetingRooms?.length != 0 && newMeetingRooms2?.length != 0 && ( + <>
같은 조건으로
근처 지점에서 찾아봤어요.
+ )} + {newMeetingRoomsInfo && newMeetingRooms?.length > 0 && ( + <>
-
{newMeetingRoomsInfo[0].branchName}
-
+
{newMeetingRoomsInfo[0].branchName}
+
지점 상세보기
arrow -
+
- location -
현재 지점으로부터 {newMeetingRoomsInfo[0].distance.toFixed(2)}km
+ location +
현재 지점으로부터 {newMeetingRoomsInfo[0].distance.toFixed(2)}km
-
- )} - {newMeetingRooms?.length > 0 ? ( -
- {newMeetingRooms.map((room) => ( -
handleRoomClick(room.meetingRoomId)} - style={{ minWidth: 160, maxWidth: 160, marginRight: 10 }} - > -
- {room.meetingRoomName} -
-
-
- {room.meetingRoomName} -
-
- floor -
- {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층 +
+ {newMeetingRooms.map((room) => ( +
handleRoomClick(room.meetingRoomId)} + style={{ minWidth: 160, maxWidth: 160, marginRight: 10 }} + > +
+ {room.meetingRoomName} +
+
+
+ {room.meetingRoomName} +
+
+ floor +
+ {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층 +
+ capacity +
최대 {room.meetingRoomCapacity}명
+
- capacity -
최대 {room.meetingRoomCapacity}명
-
-
- ))} -
- ) : ( -
- 조건에 맞는 미팅룸이 없습니다. -
- )} - {newMeetingRoomsInfo2 && ( -
+ ))} +
+ )} + {newMeetingRoomsInfo2 && newMeetingRooms2?.length > 0 && ( + <>
-
{newMeetingRoomsInfo2[0].branchName}
-
+
{newMeetingRoomsInfo2[0].branchName}
+
지점 상세보기
arrow -
+
- location -
현재 지점으로부터 {newMeetingRoomsInfo2[0].distance.toFixed(2)}km
+ location +
현재 지점으로부터 {newMeetingRoomsInfo2[0].distance.toFixed(2)}km
-
- )} - {newMeetingRooms2?.length > 0 ? ( -
- {newMeetingRooms2.map((room) => ( -
handleRoomClick(room.meetingRoomId)} - style={{ minWidth: 160, maxWidth: 160, marginRight: 10 }} - > -
- {room.meetingRoomName} -
-
-
- {room.meetingRoomName} -
-
- floor -
- {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층 +
+ {newMeetingRooms2.map((room) => ( +
handleRoomClick(room.meetingRoomId)} + style={{ minWidth: 160, maxWidth: 160, marginRight: 10 }} + > +
+ {room.meetingRoomName} +
+
+
+ {room.meetingRoomName} +
+
+ floor +
+ {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층 +
+ capacity +
최대 {room.meetingRoomCapacity}명
+
- capacity -
최대 {room.meetingRoomCapacity}명
-
-
- ))} -
- ) : ( -
- 조건에 맞는 미팅룸이 없습니다. -
- )} + ))} +
+ )}
)} +
{startTime && endTime && ( From 452a38c65e18a83830395e09cecc387067a39a66 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Tue, 11 Jun 2024 14:33:35 +0900 Subject: [PATCH 10/13] =?UTF-8?q?fix:=20=ED=98=84=EC=9E=AC=20=EC=A7=80?= =?UTF-8?q?=EC=A0=90=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/reservation/meetingRoom/MeetingRoomIndex.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx index 86f1687..a7a29f7 100644 --- a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx +++ b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx @@ -532,7 +532,7 @@ const handleNear2Office = async () => {
location -
현재 지점으로부터 {newMeetingRoomsInfo[0].distance.toFixed(2)}km
+
{currentBranch?.branchName}으로부터 {newMeetingRoomsInfo[0].distance.toFixed(2)}km
{newMeetingRooms.map((room) => ( @@ -578,7 +578,7 @@ const handleNear2Office = async () => {
location -
현재 지점으로부터 {newMeetingRoomsInfo2[0].distance.toFixed(2)}km
+
{currentBranch?.branchName}점으로부터 {newMeetingRoomsInfo2[0].distance.toFixed(2)}km
{newMeetingRooms2.map((room) => ( From 6a9e4ea3bab8bd5151f6257389c8be94e820609d Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Tue, 11 Jun 2024 14:55:54 +0900 Subject: [PATCH 11/13] =?UTF-8?q?fix:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EA=B3=B5=EC=A7=80?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C,=20?= =?UTF-8?q?=ED=95=B4=EB=8B=B9=20=EC=98=A4=ED=94=BC=EC=8A=A4=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=ED=95=98=EB=A9=B4=EC=84=9C=20=EA=B8=B4=EA=B8=89?= =?UTF-8?q?=EA=B3=B5=EC=A7=80=20=ED=86=A0=EA=B8=80=20=EC=98=A4=ED=94=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/OfficeNotice.tsx | 57 +++++++++++++++------------- src/components/map/BranchInfo.tsx | 20 +++++++++- src/components/map/BranchOffice.tsx | 8 +++- 3 files changed, 55 insertions(+), 30 deletions(-) diff --git a/src/components/home/OfficeNotice.tsx b/src/components/home/OfficeNotice.tsx index 10f0710..4d806f2 100644 --- a/src/components/home/OfficeNotice.tsx +++ b/src/components/home/OfficeNotice.tsx @@ -1,18 +1,39 @@ -import React, { useState } from 'react'; +import React from 'react'; import { useNotices } from '@/hook/useNotices'; +import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice'; +import { useBranchStore } from '@/store/branch.store'; +import { useRouter } from 'next/router'; const OfficeNotice: React.FC = () => { const { urgentNoticeTitle, urgentNoticeContent } = useNotices(); - const [isModalOpen, setIsModalOpen] = useState(false); + const selectedBranch = useBranchStore((state) => state.selectedBranch); - const handleModalOpen = () => { - setIsModalOpen(true); - }; + const router = useRouter(); - const handleModalClose = () => { - setIsModalOpen(false); + const handleOfficeInfo = async () => { + try { + const data = await getSelectedOfficeInfo(selectedBranch!.branchName); + const officeInfo = data.data; + console.log(officeInfo); + router.push({ + pathname: `/branches/${encodeURIComponent(selectedBranch!.branchName)}`, + query: { + name: selectedBranch!.branchName, + urgentNoticeTitle, + urgentNoticeContent, + address: officeInfo.branchAddress, + branchPhoneNumber: officeInfo.branchPhoneNumber, + roadFromStation: officeInfo.roadFromStation, + stationToBranch: officeInfo.stationToBranch.join(','), + branchId: officeInfo.branchId as number, + scrollToOffice: true + } + }, `/branches/${encodeURIComponent(selectedBranch!.branchName)}`); + } catch (error) { + console.error('Error fetching office info:', error); + } }; - + return ( <>
@@ -25,30 +46,12 @@ const OfficeNotice: React.FC = () => { {urgentNoticeTitle ? urgentNoticeTitle : '긴급 공지가 없습니다.'}
{urgentNoticeContent && ( -
+
)}
- {isModalOpen && ( -
-
-
-

긴급 공지

-

{urgentNoticeContent}

-
- -
-
-
- )} ); }; diff --git a/src/components/map/BranchInfo.tsx b/src/components/map/BranchInfo.tsx index 5ba9794..25918b3 100644 --- a/src/components/map/BranchInfo.tsx +++ b/src/components/map/BranchInfo.tsx @@ -1,5 +1,5 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import Image from 'next/image'; import { useRouter } from 'next/router'; import { Swiper, SwiperSlide } from 'swiper/react'; @@ -32,6 +32,20 @@ const BranchInfo: React.FC = () => { const stationToBranch = router.query.stationToBranch as string; const branchId = router.query.branchId; + const { urgentNoticeTitle, urgentNoticeContent } = router.query; + + + const branchOfficeRef = useRef(null); + + useEffect(() => { + const { scrollToOffice } = router.query; + if (scrollToOffice && branchOfficeRef.current) { + setTimeout(() => { + branchOfficeRef.current!.scrollIntoView({ behavior: 'smooth' }); + }, 300); // 300ms 정도의 딜레이를 줍니다. + } + }, [router.query]); + const imagePairs = [ ['branch1-1.png', 'branch1-2.png'], ['branch2-1.png', 'branch2-2.png'], @@ -351,7 +365,9 @@ const BranchInfo: React.FC = () => {
공지사항
- +
+ +