상세 페이지에서 예약을 하기 위해 필요한것들.

1. 예약 등록!

• 컴포넌트

  • ListingClient 컴포넌트
    • onCreateReservation 핸들러 (api post로 예약 등록하는 핸들러),
    • useEffect안에서 날짜를 바꿀때마다 totalPrice를 계산하는 로직이 있음
    • disabledDates : 예약 불가능한 날짜를 계산해서 배열로 넘기는 useMemo
  • ListingReservation : 실제 달력을 출력하는 컴포넌트
  • Calendar 컴포넌트 : react-date-range를 사용해서, 달력을 출력하는 컴포넌트,
    • 날짜 onChange함수는 상위 컴포넌트에서 컨트롤
    • Calanedar가 받는 ranges는 상위 컴포넌트에서 전달해 주는 value이고 이건 DateRange 배열임.

• 로그인이 안되어있으면 Reserve 버튼 눌렀을때 로그인 모달 뜸.

• 실제 POST요청을 날리는 코드

  import { NextResponse } from 'next/server';
  
  import prisma from '@/app/libs/prismadb';
  import getCurrentUser from '@/app/actions/getCurrentUser';
  
  export async function POST(request: Request) {
    const currentUser = await getCurrentUser();
  
    if (!currentUser) {
      return NextResponse.error();
    }
  
    const body = await request.json();
  
    const { listingId, startDate, endDate, totalPrice } = body;
  
    if (!listingId || !startDate || !endDate || !totalPrice) {
      return NextResponse.error();
    }
  
    const listingAndReservation = await prisma.listing.update({
      where: {
        id: listingId,
      },
      data: {
        reservations: {
          create: {
            userId: currentUser.id,
            startDate,
            endDate,
            totalPrice,
          },
        },
      },
    });
  
    return NextResponse.json(listingAndReservation);
  }
  

2. 예약 조회!

• action을 통해 서버에서 호출하는게 아닌 DB에서 직접 reservation 정보를 가져옴.
• DB에서 바로 가져온 데이터를 ListingPage에서 getReservations 함수를 호출하여 가져오고 하위 컴포넌트로 props로 내려줌.
• 하위 컴포넌트에서 props로 받은 예약 날짜를 달력에다가 표기해줌.

import prisma from '@/app/libs/prismadb';

interface IParams {
  listingId?: string;
  userId?: string;
  authorId?: string;
}

export default async function getReservations(params: IParams) {
  const { listingId, userId, authorId } = params;

  try {
    const query: any = {};

    if (listingId) {
      query.listingId = listingId;
    }

    if (userId) {
      query.userId = userId;
    }

    if (authorId) {
      query.listing = { userId: authorId };
    }

    const reservations = await prisma.reservation.findMany({
      where: query,
      include: {
        listing: true,
      },
      orderBy: {
        createdAt: 'desc',
      },
    });

    const safeReservations = reservations.map((reservation) => ({
      ...reservation,
      createdAt: reservation.createdAt.toISOString(),
      startDate: reservation.startDate.toISOString(),
      endDate: reservation.endDate.toISOString(),
      listing: {
        ...reservation.listing,
        createdAt: reservation.listing.createdAt.toISOString(),
      },
    }));

    return safeReservations;
  } catch (error: any) {
    throw new Error(error);
  }
}