하는 것

• 위치 /apps/(dashboard)/[storeId]/(routes)/billboards

• 해당 페이지 핸들링

1. 최상단 BillboardPage에서 prisma로 storeId에 해당하는 빌보드들을 가져옵니다.

import { format } from 'date-fns';

import prismadb from '@/lib/prismadb';
import BillboardClient from './components/client';
import { BillboardColumn } from './components/columns';

// storeId에 해당하는 빌보드 리스트 가져오는 페이지
export default async function BillboardPage({
  params,
}: {
  params: { storeId: string };
}) {
  const billboards = await prismadb.billboard.findMany({
    where: {
      storeId: params.storeId,
    },
    orderBy: {
      createdAt: 'desc',
    },
  });

  const formattedBillboards: BillboardColumn[] = billboards.map((item) => ({
    id: item.id,
    label: item.label,
    createdAt: format(item.createdAt, 'MMMM do, yyyy'),
  }));

  return (
    <div className='flex-col'>
      <div className='flex-1 space-y-4 p-8 pt-6'>
        <BillboardClient data={formattedBillboards} />
      </div>
    </div>
  );
}

1. 가져온 billboards들을 하위 BillboardClient에게 넘깁니다.

2. 데이터 테이블 만들기 feat shadcn

   1. https://ui.shadcn.com/docs/components/data-table

   npx shadcn-ui@latest add table
   
   npm install @tanstack/react-table
   

   

3. 다음 공식문서를 보고 필요한 것들만 복사 붙여넣기 하면서 추가를 한다.

   1. Column Definitions
   2. <DataTable /> component
   3. Pagination
   4. Filtering
   5. cell Action

4. Cell Action에서 ‘copy’, ‘update’, ‘delete’

5. 각 row에 action들을 부여하기 위해서 cellAction 컴포넌트를 추가하고, cellAction 컴포넌트에서 Dropdown menu UI 를 추가할 예정이다.

   npx shadcn-ui@latest add dropdown-menu