disable foods

src/components/listview/MenuItem.tsx

@@ -5,6 +5,7 @@ import { useCart } from "@/app/[name]/(Main)/cart/hook/useCart";
 import type { Food, FoodImage } from "@/app/[name]/(Main)/types/Types";
 import MinusIcon from "@/components/icons/MinusIcon";
 import PlusIcon from "@/components/icons/PlusIcon";
+import clsx from "clsx";
 import { motion } from "framer-motion";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -86,7 +87,10 @@ const MenuItem = ({ food }: MenuItemProps) => {
 
   const hasDiscount = useMemo(() => (food.discount || 0) > 0, [food.discount]);
 
+  const isAvailable = food.isAvailable !== false;
+
   const handleAddToCart = () => {
+    if (!isAvailable) return;
     addToCart(food.id);
   };
 
@@ -97,7 +101,12 @@ const MenuItem = ({ food }: MenuItemProps) => {
   const foodDetailUrl = `/${name}/${food.id}?category=${food.category}`;
 
   return (
-    <div className="flex gap-4 w-full h-full items-center">
+    <div
+      className={clsx(
+        "flex gap-4 w-full h-full items-center",
+        !isAvailable && "opacity-50",
+      )}
+    >
       <Link href={foodDetailUrl} className="cursor-pointer">
         <img
           className="rounded-xl bg-[#F2F2F9] min-w-28 w-28 max-h-28 object-cover"
@@ -140,13 +149,14 @@ const MenuItem = ({ food }: MenuItemProps) => {
             )}
           </div>
           <motion.div
-            whileTap={{ scale: 1.05 }}
+            whileTap={isAvailable ? { scale: 1.05 } : undefined}
             className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
           >
             {quantity <= 0 ? (
               <button
                 onClick={handleAddToCart}
-                className="inline-flex w-full justify-center items-center gap-2"
+                disabled={!isAvailable}
+                className="inline-flex w-full justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-40"
               >
                 <PlusIcon />
                 <div className="text-sm2 pt-0.5 font-normal text-foreground">
@@ -157,7 +167,8 @@ const MenuItem = ({ food }: MenuItemProps) => {
               <>
                 <button
                   onClick={handleAddToCart}
-                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
+                  disabled={!isAvailable}
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-40 disabled:pointer-events-none"
                 >
                   <PlusIcon className="text-foreground" />
                 </button>