badge cart

src/components/navigation/BottomNavBar.tsx

@@ -1,12 +1,15 @@
 "use client";
 
+import { useGetCartItems } from "@/app/[name]/(Main)/cart/hooks/useCartData";
 import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
 import { glassSurfaceNav } from "@/lib/styles/glassSurface";
+import { useReceiptStore } from "@/zustand/receiptStore";
 import clsx from "clsx";
 import type { Icon } from "iconsax-react";
 import { Bag2, Heart, Home2, InfoCircle, Reserve } from "iconsax-react";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
+import { useMemo } from "react";
 import { toastLoginRequired } from "../Toast";
 
 type BottomNavBarProps = {
@@ -19,12 +22,22 @@ type NavItemProps = {
   onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
   onButtonClick?: () => void;
   Icon: Icon;
+  badge?: number;
 };
 
-function NavItem({ href, isActive, onClick, onButtonClick, Icon }: NavItemProps) {
+function NavItem({ href, isActive, onClick, onButtonClick, Icon, badge }: NavItemProps) {
   const className = clsx("flex-1 flex items-center justify-center h-full rounded-full", isActive && "bg-primary/12");
 
-  const icon = <Icon size={20} color="currentColor" variant={isActive ? "Bold" : "Linear"} className={isActive ? "text-primary" : "text-icon-deactive"} />;
+  const icon = (
+    <span className="relative">
+      <Icon size={20} color="currentColor" variant={isActive ? "Bold" : "Linear"} className={isActive ? "text-primary" : "text-icon-deactive"} />
+      {badge != null && badge > 0 && (
+        <span className="absolute -right-1.5 -top-1 flex min-w-3.5 h-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[8px] font-medium text-container dark:bg-white dark:text-black">
+          {badge > 99 ? "99+" : badge}
+        </span>
+      )}
+    </span>
+  );
 
   if (onButtonClick) {
     return (
@@ -47,6 +60,14 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
   const pathname = usePathname();
   const router = useRouter();
   const { isSuccess } = useGetProfile();
+  const { data: cartData } = useGetCartItems(isSuccess);
+  const localItems = useReceiptStore((state) => state.items);
+
+  const guestItemCount = useMemo(
+    () => Object.values(localItems).reduce((sum, item) => sum + (item?.quantity ?? 0), 0),
+    [localItems],
+  );
+  const cartItemCount = isSuccess ? (cartData?.data?.totalItems ?? 0) : guestItemCount;
 
   const isHomeActive = pathname === `/${name}`;
   const isFavoriteActive = pathname.startsWith(`/${name}/favorite`);
@@ -70,7 +91,7 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
       <NavItem href={`/${name}/favorite`} isActive={isFavoriteActive} onClick={handleFavoritesClick} Icon={Heart} />
       {onPagerClick ? <NavItem isActive={isPagerActive} onButtonClick={onPagerClick} Icon={Reserve} /> : <NavItem href={`/${name}/pager`} isActive={isPagerActive} Icon={Reserve} />}
       <NavItem href={`/${name}/about`} isActive={isAboutActive} Icon={InfoCircle} />
-      <NavItem href={`/${name}/cart`} isActive={isCartActive} Icon={Bag2} />
+      <NavItem href={`/${name}/cart`} isActive={isCartActive} Icon={Bag2} badge={cartItemCount} />
     </div>
   );
 }