위치

• /app/(route)/page.tsx ⇒ 메인 페이지 임.

• 특정 아이디에 대한 빌보드 가져오는 actions 만들기

  • id를 넘겨 받아서, 특정 아이디에 대한 빌보드를 가져온다.

import { Billboard } from '@/types';

const URL = `${process.env.NEXT_PUBLIC_API_URL}/billboards`;

const getBillboard = async (id: string): Promise<Billboard> => {
  const res = await fetch(`${URL}/${id}`);

  return res.json();
};

export default getBillboard;

• 최상단 서버 컴포넌트에서 fetch를 한다.

import getBillboard from '@/actions/get-billboard';
import Billboard from '@/components/billboard';
import Container from '@/components/ui/container';

// 캐시는 하지 않겠다.
export const revalidate = 0;

export default async function HomePage() {
  const billboard = await getBillboard('834c7420-7dc2-43fa-bd02-0a036933ff53');
  return (
    <Container>
      <div className='space-y-10 pb-10'>
        <Billboard data={billboard} />
      </div>
    </Container>
  );
}

• Billboard 컴포넌트로 data를 props로 전달한다.

import { Billboard as BillboardType } from '@/types';

interface BillboardProps {
  data: BillboardType;
}

export default function Billboard({ data }: BillboardProps) {
  return (
    <div className='p-4 sm:p-6 lg:p-8 rounded-xl overflow-hidden'>
      <div
        className='rounded-xl relative aspect-square md:aspect-[2.4/1] overflow-hidden bg-cover'
        style={{ backgroundImage: `url(${data?.imageUrl})` }}
      >
        <div className='h-full w-full flex flex-col justify-center items-center text-center gap-y-8'>
          <div className='font-bold text-3xl sm:text-5xl lg:text-6xl sm:max-w-xl max-w-xs'>
            {data?.label}
          </div>
        </div>
      </div>
    </div>
  );
}

증거 사진