해야하는 것

• billboard를 추가하는 페이지를 만든다.

흐름

1. GNB에 ‘billboard’라는 버튼을 누른다. 다음의 url로 이동된다.

   1. 다음의 Link 태그에 의해서

          {
            href: `/${params.storeId}/billboards`,
            label: 'Billboards',
            active: pathname === `/${params.storeId}`,
          },
      

   2. http://localhost:3000/b6683e34-9ef8-4958-8450-8b9a2f79ad4b/billboards

   3. 해당 페이지 /app/(dashboard)/[storeId]/(routes)/billboards 페이지

      

2. 위 사진의 Add New를 누르게 되면 http://localhost:3000/b6683e34-9ef8-4958-8450-8b9a2f79ad4b/billboards/new 페이지로이동

   1. 해당 페이지 /app/(dashboard)/[storeId]/(routes)/billboards/new 페이지

      

3. billboardnew 페이지 컴포넌트 (서버 컴포넌트임) 에서 url의 params를 가지고, db에서 storeId에 해당하는 빌보드를 찾아온다.

   export default async function BillboardPage({
     params,
   }: {
     params: { billboardId: string };
   }) {
     const billboard = await prismadb.billboard.findUnique({
       where: {
         id: params.billboardId,
       },
     });
     return (
       <div className='flex-col'>
         <div className='flex-1 space-y-4 p-8 pt-6'>
           <BillboardForm initialData={billboard} />
         </div>
       </div>
     );
   }
   

4. 찾아온 billboard가 없을 수도 있고, 있을수도 있다. 어쨌든 billboardForm에 찾아온 billboard 데이터를 넘긴다.

   // billboard 데이터는 있을수도 있고, 없을 수도 있다.
   interface BillboardFormProps {
     initialData: Billboard | null;
   }
   

5. 최초 billboard initialData가 없으면 create가 되고, 있다면, Edit이 된다.

이미지 업로드 cloudinary

npm install next-cloudinary

. env 파일에 다음 환경변수 남기기

• NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="duwaoh4wv”

이미지 업로드 컴포넌트