[KAN-10] feat: 찜한 모임 뱃지 추가

src/app/components/Gnb/Gnb.tsx

@@ -5,6 +5,10 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import UserStatus from './UserStatus';
 import TopTab from '../Tab/TopTab';
+import Badge from '../Badge/Badge';
+
+/* @todo 웹 스토리지에 저장된 찜한 모임의 length를 추출하는 방식으로 변경 예정 */
+const favoriteGroups = '12';
 
 //@todo pathname 정해질 시 추가 예정
 const navList = [
@@ -25,6 +29,16 @@ const navList = [
 const Gnb = () => {
   const pathname = usePathname();
 
+  /* 찜한 모임 배지 렌더링 함수
+  nav.name이 '찜한 모임'이고 웹스토리지에 저장된 '찜한 모임'의 개수가 1개 이상일 시 Badge 렌더링 */
+  const renderBadge = (name: string) => {
+    return name === '찜한 모임' && Number(favoriteGroups) > 0 ? (
+      <div className='py-[18px]'>
+        <Badge>{favoriteGroups}</Badge>
+      </div>
+    ) : null;
+  };
+
   return (
     <header className='bg-var-orange-600 py-16'>
       <div className='mx-16 flex max-w-[1200px] items-center justify-between md:mx-24 lg:mx-auto'>
@@ -34,12 +48,13 @@ const Gnb = () => {
           </Link>
           <ul className='flex gap-24'>
             {navList.map((nav, index) => (
-              <li key={index}>
+              <li key={index} className='flex items-center gap-[5px]'>
                 <Link href={nav.link}>
                   <TopTab isActive={pathname.includes(nav.link)}>
                     {nav.name}
                   </TopTab>
                 </Link>
+                {renderBadge(nav.name)}
               </li>
             ))}
           </ul>