해야하는 것

• Setting 페이지에서 해당 상점 이름(name)을 수정할 수 있어야함.
• Setting 페이지에서 해당 상점을 삭제 할 수 있어야함 (추가로 Alert Modal 띄움)

Setting 페이지 컴포넌트

• 파일 위치 /app/(dashboard)/[storeId]/(routes)/settings/page.tsx

• 실제 예시 url

  • http://localhost:3000/b6683e34-9ef8-4958-8450-8b9a2f79ad4b/settings

• 하는 것

  • 해당 url의 params를 받아온다. (서버 컴포넌트도 {params})로 url의 params를 받을 수 있음.

  interface SettingPageProps {
    params: {
      storeId: string;
    };
  }
  
  export default async function SettingsPage({ params }: SettingPageProps) {
  	return <div>페이지 뭐시기</div>
  }
  

  • 받아온 params로(여기서는 storeId) db에서 storeId에 대한 상점 정보를 받아온다.

  const store = await prismadb.store.findFirst({
      where: {
        id: params.storeId,
        userId,
      },
    });
  

  • 그것을 SettingForm 이라는 컴포넌트에 store을 넘겨준다.

⭐️ SettingForm 컴포넌트 (클라이언트 컴포넌트)

• UI

  

• 하는일

  • Store 이름 수정 ⇒ api-routes 사용
  • Store 삭제 ⇒ api-routes 사용
    • 삭제 할때 Alert Modal을 띄운다. 해당 컴포넌트에서만 사용하므로 zustand로 전역에서 상태관리 X
  • react-hook-form + zod로 폼 관리
  • 제일 하단에, API 주소를 나열 시킨다. shadcn의 Alert 컴포넌트 사용