fix : 장바구니 담고 빼는 버튼 상태 불안정한 상태 해결

- 장바구니 상품 동기화 로직 순서 수정
- 버튼 동작 코드 분리

src/components/ProductItem/ProductItem.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { addCartItem, getCartItems, removeCartItem } from "../../api/cart";
+import { useError } from "../../context/errorContext";
 import { formatPrice } from "../../utils/format";
 import { CartActionButton } from "../Button";
 import {
@@ -19,6 +20,7 @@ export const ProductItem = ({
 }: Pick<ProductProps, "id" | "imageUrl" | "name" | "price">) => {
   const [isInCart, setIsInCart] = useState(false);
   const [cartItemId, setCartItemId] = useState<number | null>(null);
+  const { setErrorStatus } = useError();
 
   const fetchCartItemStatus = async () => {
     try {
@@ -27,31 +29,47 @@ export const ProductItem = ({
       setIsInCart(!!cartItem);
       setCartItemId(cartItem ? cartItem.id : null);
     } catch (error) {
-      console.error("Failed to fetch cart item status", error);
+      setErrorStatus(error.response?.status);
     }
   };
 
-  useEffect(() => {
-    fetchCartItemStatus();
-  }, [id]);
+  const handleAddToCart = async () => {
+    try {
+      await addCartItem(id, 1);
+      setIsInCart(true);
+      await fetchCartItemStatus();
+    } catch (error) {
+      setErrorStatus(error.response?.status);
+      setIsInCart(false);
+    }
+  };
+
+  const handleRemoveFromCart = async () => {
+    if (cartItemId === null) return;
 
-  const handleButtonClick = async () => {
     try {
-      if (isInCart) {
-        if (cartItemId !== null) {
-          await removeCartItem(cartItemId);
-          setIsInCart(false);
-          setCartItemId(null);
-        }
-      } else {
-        await addCartItem(id, 1);
-        await fetchCartItemStatus();
-      }
+      await removeCartItem(cartItemId);
+      setIsInCart(false);
+      setCartItemId(null);
     } catch (error) {
-      console.error("Error handling cart action:", error);
+      setErrorStatus(error.response?.status);
+      setIsInCart(true);
+      setCartItemId(cartItemId);
     }
   };
 
+  const handleButtonClick = async () => {
+    if (isInCart) {
+      await handleRemoveFromCart();
+    } else {
+      await handleAddToCart();
+    }
+  };
+
+  useEffect(() => {
+    fetchCartItemStatus();
+  }, [id]);
+
   return (
     <StyledProductItem>
       <StyledProductImg src={imageUrl} alt="" />