diff --git a/src/api/myActivities.ts b/src/api/myActivities.ts index 90dbe04..9f3d395 100644 --- a/src/api/myActivities.ts +++ b/src/api/myActivities.ts @@ -12,6 +12,7 @@ import type { ReservationListResponse, ReservationStatusType, ReservedScheduleList, + UpdateReservationApprovalReq, } from '@/types/reserved-schedule'; //내 체험 수정 @@ -87,3 +88,18 @@ export const getReservationBySchedule = ( } ); }; + +//체험 예약 승인, 거절 업데이트 +export const updateReservationApproval = ( + activityId: number, + reservationId: number, + req: UpdateReservationApprovalReq +) => { + return apiFetch( + `/my-activities/${activityId}/reservations/${reservationId}`, + { + method: 'PATCH', + body: req, + } + ); +}; diff --git a/src/app/(common)/(mypage)/myactivities-reservations/components/DailyReservationStatus.tsx b/src/app/(common)/(mypage)/myactivities-reservations/components/DailyReservationStatus.tsx index 0d4c473..0a34fc6 100644 --- a/src/app/(common)/(mypage)/myactivities-reservations/components/DailyReservationStatus.tsx +++ b/src/app/(common)/(mypage)/myactivities-reservations/components/DailyReservationStatus.tsx @@ -1,11 +1,15 @@ 'use client'; -import { useQuery } from '@tanstack/react-query'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; import moment from 'moment'; import { useEffect, useState } from 'react'; import ReservationListByStatus from './ReservationListByStatus'; -import { getDailyReservationInfo } from '@/api/myActivities'; +import { + getDailyReservationInfo, + getReservationBySchedule, + updateReservationApproval, +} from '@/api/myActivities'; import Button from '@/components/Button'; import { DropDownTrigger, @@ -16,7 +20,10 @@ import { import Tab from '@/components/Tab'; import useClickOutside from '@/hooks/useClickOutside'; import useWindowSize from '@/hooks/useWindowSize'; -import type { ReservationStatusType } from '@/types/reserved-schedule'; +import type { + ReservationStatusType, + UpdateReservationApprovalReq, +} from '@/types/reserved-schedule'; import { cn } from '@/util/cn'; export interface BoxType { clientX: number; @@ -44,6 +51,7 @@ export default function DailyReservationStatus({ box, onClose, }: DailyReservationStatusProps) { + const queryClient = useQueryClient(); const [isMounted, setIsMounted] = useState(false); const formatDate = date ? moment(date).format('YYYY-MM-DD') : ''; const params = { @@ -53,13 +61,12 @@ export default function DailyReservationStatus({ const [time, setTime] = useState(''); const [status, setStatus] = useState('pending'); const popupCloseRef = useClickOutside(onClose); - const { data: dailyReservationData } = useQuery({ - queryKey: ['DailyReservationStatus', activityId, formatDate], - queryFn: () => getDailyReservationInfo(activityId, params), - enabled: !!date && !!activityId && !!box, - }); - - console.log(box?.x, box?.clientX, box?.y, box?.clientY); + const { data: dailyReservationData, refetch: dailyReservationRefetch } = + useQuery({ + queryKey: ['DailyReservationStatus', activityId, formatDate], + queryFn: () => getDailyReservationInfo(activityId, params), + enabled: !!date && !!activityId && !!box, + }); useEffect(() => { if (!isMounted) { @@ -75,43 +82,68 @@ export default function DailyReservationStatus({ } }, [dailyReservationData]); - if (!dailyReservationData) return null; - const startToEndTimes = dailyReservationData.map( + const startToEndTimes = dailyReservationData?.map( (schedule) => `${schedule.startTime} - ${schedule.endTime}` ); - const filteredStatus = dailyReservationData.filter( + const filteredStatus = dailyReservationData?.filter( (data) => `${data.startTime} - ${data.endTime}` === time ); + const scheduleId = filteredStatus?.[0]?.scheduleId ?? null; + + const reservationListDataParams = { + scheduleId: scheduleId ?? 0, + status, + }; + + const { data: reservationListData, refetch: reservationListRefetch } = + useQuery({ + queryKey: ['ReservationListByStatus', status, scheduleId], + queryFn: () => + getReservationBySchedule(activityId, reservationListDataParams), + enabled: !!scheduleId && scheduleId > 0, + }); + + const handleReservation = async ( + reservationId: number, + status: ReservationStatusType + ) => { + const req: UpdateReservationApprovalReq = { + status, + }; + try { + await updateReservationApproval(activityId, reservationId, req); + await Promise.all([dailyReservationRefetch(), reservationListRefetch()]); + } catch (error) { + alert(error); + } + }; + const getDesktopPosition = () => { if (!isMounted) return; if (!box || !screenWidth || screenWidth < 1024) return undefined; const POPUP_WIDTH = 375; - const POPUP_HEIGHT = dailyReservationData.length === 0 ? 400 : 580; + const POPUP_HEIGHT = dailyReservationData?.length === 0 ? 400 : 580; let left = box.clientX + 20; let top = box.clientY + 20; - // 오른쪽이 짤릴 때 if (left + POPUP_WIDTH > window.innerWidth) { left = left - POPUP_WIDTH - 40; } - // 아래가 짤릴 때 if (top + POPUP_HEIGHT > window.innerHeight) { - console.log('짤림'); top = box.y; top = top - POPUP_HEIGHT + 20; } - console.log('left, top', left, top); return { left, top, }; }; - + if (!startToEndTimes || !filteredStatus) return null; return ( <> {isMounted && screenWidth && screenWidth < 1024 && ( @@ -133,10 +165,10 @@ export default function DailyReservationStatus({
{formatDate} - {dailyReservationData.length === 0 ? ( + {dailyReservationData?.length === 0 ? (
해당 날짜에 예약 내역이 없습니다. @@ -149,9 +181,9 @@ export default function DailyReservationStatus({ 예약 시간 - + - {startToEndTimes.map((time) => ( + {startToEndTimes?.map((time) => ( setTime(selected)}> @@ -161,17 +193,25 @@ export default function DailyReservationStatus({
- - setStatus(STATUS_TO_EN[status] ?? 'pending') - } - /> - + {filteredStatus[0] && ( + <> + + setStatus(STATUS_TO_EN[status] ?? 'pending') + } + /> + {reservationListData && scheduleId ? ( + + ) : null} + + )} )}
diff --git a/src/components/reservation-management/CalendarComponents.tsx b/src/components/reservation-management/CalendarComponents.tsx index 2eca4d4..3c9ce30 100644 --- a/src/components/reservation-management/CalendarComponents.tsx +++ b/src/components/reservation-management/CalendarComponents.tsx @@ -57,7 +57,6 @@ export const Toolbar = ({ ); }; -//TODO: 데이터 바꾸기 interface MyDateHeaderProps extends DateHeaderProps { event: CalendarEventData[]; } diff --git a/src/components/reservation-management/ReservationManagementCalendar.tsx b/src/components/reservation-management/ReservationManagementCalendar.tsx index be39ab3..d494601 100644 --- a/src/components/reservation-management/ReservationManagementCalendar.tsx +++ b/src/components/reservation-management/ReservationManagementCalendar.tsx @@ -93,7 +93,6 @@ export default function ReservationManagementCalendar({ const event = MonthlyReservationData ? convertApiToEvent(MonthlyReservationData) : []; - if (!MonthlyReservationData) return null; return (
diff --git a/src/types/reserved-schedule.ts b/src/types/reserved-schedule.ts index d83937c..b3cf913 100644 --- a/src/types/reserved-schedule.ts +++ b/src/types/reserved-schedule.ts @@ -47,3 +47,7 @@ export interface ReservationListResponse { totalCount: number; cursorId: number | null; } + +export type UpdateReservationApprovalReq = { + status: ReservationStatusType; +};