API 콜을 하는게 아닌 바로 DB 찔러서 가져오기

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

// DB에서 직접 가져온다.
export default async function getListings() {
  try {
    const listings = await prisma.listing.findMany({
      orderBy: {
        createdAt: 'desc',
      },
    });

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

메인 페이지에서 아무 데이터도 없을때는 비어있는 화면 렌더링하기

• <EmptyState/>
• 역할
  • showRest 플래그에 따라서 버튼이 출현하고, 버튼을 클릭하면 router.push 가 실행되면서 메인으로 이동

Home 컴포넌트 (서버 컴포넌트)

• 역할
  • 서버 컴포넌트로써 listings들을 DB에서 바로 가져오고 (API 콜 아님)
  • 유저를 가져온다.
  • list가 없다면 EmptyState 컴포넌트를 보여준다.
  • Listing Card 컴포넌트들을 나열해준다.

import getCurrentUser from './actions/getCurrentUser';
import getListings from './actions/getListings';
import ClientOnly from './components/ClientOnly';
import Container from './components/Container';
import EmptyState from './components/EmptyState';
import ListingCard from './components/listings/ListingCard';

export default async function Home() {
  const listings = await getListings();
  const currentUser = await getCurrentUser();

  // const isEmpty = true;

  // isEmpty 상태이면?...
  if (listings.length === 0) {
    return (
      <ClientOnly>
        <EmptyState showReset />
      </ClientOnly>
    );
  }

  return (
    <ClientOnly>
      <Container>
        <div className='pt-24 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-8'>
          {listings.map((listing) => {
            return (
              <ListingCard
                currentUser={currentUser}
                key={listing.id}
                data={listing}
              />
            );
          })}
        </div>
      </Container>
    </ClientOnly>
  );
}

Listing Card 컴포넌트

• 역할
  • 일반적으로 data를 받아서 그려주는 카드 컴포넌트
  • 로그인 했을때와 안했을때 조금 다른 UI를 보여준다.
  • reservation이 있을때와 없을때 다른 UI를 보여준다.
• props로 전달받는것
  • data : 카드 데이터
  • reservation : 예약 정보
  • onAction : 버튼 눌렀을때 핸들러 함수
  • actionLabel : 버튼에 들어갈 텍스트
  • actionId : 예약 취소를 위해 필요한 아이디

결과