GNB의 위치는?

• app/(dashboard)/[storeId]/layout.tsx
• NavBar 컴포넌트를 만든다.

import Navbar from '@/components/navbar';
export default async function DashboardLayout({
  children,
  params,
}: {
  children: ReactNode;
  params: { storeId: string };
}) {
  const { userId } = auth();

  if (!userId) {
    redirect('/sign-in');
  }

  // store 정보 가져오기
  const store = await prismadb.store.findFirst({
    where: {
      id: params.storeId,
      userId,
    },
  });

  // store 체크
  if (!store) {
    redirect('/');
  }

  return (
    <>
      <Navbar />
      {children}
    </>
  );
}

NavBar 컴포넌트 안에는 2가지 컴포넌트로 구성되어있다.

1. <StoreSwitcher items={stores} />
   1. 상점 정보들을 바꾸는 UI.
2. <MainNav className='mx-6' />
   • 우리가 일반적으로 보는 네브바.

2. MainNav는 이렇게 생김

• 일반적으로 routes 배열을 설정하고
• map을 돌려서 <Link>컴포넌트로 링크를 만든다.

export default function MainNav({
  className,
  ...props
}: React.HTMLAttributes<HTMLElement>) {
  const pathname = usePathname();
  const params = useParams();
  const routes = [
    {
      href: `/${params.storeId}/settings`,
      label: 'Settings',
      active: pathname === `/${params.storeId}/settings`,
    },
  ];

  return (
    <nav className={cn('flex items-center space-x-4 lg:space-x-6', className)}>
      {routes.map((route) => (
        <Link
          key={route.href}
          href={route.href}
          className={cn(
            'text-sm font-medium transition-colors hover:text-primary',
            route.active
              ? 'text-black dark:text-white'
              : 'text-muted-foreground'
          )}
        >
          {route.label}
        </Link>
      ))}
    </nav>
  );
}

1. store switcher는 다음과 같은 역할을 함

1. 일단 DB의 store 정보를 format을 바꿔주낟.

   const formattedItems = items.map((item) => ({
       label: item.name,
       value: item.id,
     }));
   

2. 현재 url (/store.id)와 item.value가 같으면 현재 선택된 currentStore에 저장한다.

   // url에 있는 storeID와 비교해서 같으면 현재 활성화
     const currentStore = formattedItems.find(
       (item) => item.value === params.storeId
     );
   

3. 특정 store을 Select 하게 되면 해당 store.id로 push를 시전한다.

const onStoreSelect = (store: { value: string; label: string }) => {
    setOpen(false);
    router.push(`/${store.value}`);
  };

• 상점 정보를 변경해주는 UI