20241129(금) ▶️ 장바구니 페이지 - 수량 업데이트 적용하기

구현을 마치고 보니 장바구니에서도 수량을 선택해서 업데이트 해주는 로직을 빼먹어서 수량도 조절할 수 있도록 구현해 보았다.

먼저 기존에 수량 컴포넌트 UI를 분리시켜 주는 것 부터 시작했다😊

 

 

 

 

수량 조절 UI를 담당하는 공통 컴포넌트

//QuantitySelector.tsx

const QuantitySelector = ({
  className,
  quantity,
  increase,
  decrease,
}: QuantitySelectorProps) => {
  return (
    <div className="flex items-center text-sm">
      <h3 className={className}>수량</h3>
      <div className="flex gap-2 items-center">
        <button
          onClick={decrease}
          disabled={quantity === 1}
          className={`${
            quantity === 1
              ? "opacity-50 cursor-not-allowed"
              : "hover:text-purple"
          }`}
        >
          <CiSquareMinus size={25} />
        </button>
        <p>{quantity}</p>
        <button
          onClick={increase}
          className={`${quantity >= 5 ? "opacity-50 " : "hover:text-purple"}`}
        >
          <CiSquarePlus size={25} />
        </button>
      </div>
    </div>
  );
};

export default QuantitySelector;

 

 

 

 

 

 

 

상세페이지 수량 선택 로직

//ProductInfo.tsx
const ProductInfo = ({ id }: ShopMenuProps) => {
  const [count, setCount] = useState(1);

  const handleIncrease = () => {
    if (count >= 5) {
      toast({
        title: "최대 5개 까지 구매 가능합니다.",
      });
      return;
    }
    setCount((prev) => Math.min(prev + 1, 5));
  };

  const handleDecrease = () => {
    if (count > 1) {
      setCount((prev) => Math.max(prev - 1, 1));
    }
  };

  return (
   {/* 중략 */}
    <li className="flex py-3 px-3 border-b">
      <QuantitySelector
        className="w-[100px]"
        quantity={count}
        increase={handleIncrease}
        decrease={handleDecrease}
      />
    </li>
  );
};

export default ProductInfo;

 

기존에 사용하고 있던 수량부분을 공통 컴포넌트로 변경했으니 props로 해당 내용을 넘겨주었다.

 

 

 

 

 

 

 

장바구니 아이템 수량 조절 컴포넌트

//CartListItems.tsx
const CartListItems = ({ item }: CartListItemProps) => {

	const handleIncrease = () => {
	    if (item.quantity >= 5) {
	      toast({
	        title: "최대 5개 까지 구매 가능합니다.",
	      });
	      return;
	    }
	
	    const newCartItems = cartItems.map((cartItem) => {
	      if (cartItem.id === item.id) {
	        return {
	          ...cartItem,
	          quantity: Math.min(cartItem.quantity + 1, 5),
	        };
	      }
	      return cartItem;
	    });
	
	    localStorage.setItem("shopping_cart", JSON.stringify(newCartItems));
	    setCartItems(newCartItems);
	  };

  const handleDecrease = () => {
    const newCartItems = cartItems.map((cartItem) => {
      if (cartItem.id === item.id) {
        return {
          ...cartItem,
          quantity: Math.max(cartItem.quantity - 1, 1),
        };
      }
      return cartItem;
    });

    localStorage.setItem("shopping_cart", JSON.stringify(newCartItems));
    setCartItems(newCartItems);
  };

  return (
		 {/* 중략 */}
	    <QuantitySelector
	      className="text-sm text-gray-400 mr-3"
	      quantity={item.quantity}
	      increase={handleIncrease}
	      decrease={handleDecrease}
	    />
  );
};

export default CartListItems;

 

장바구니에 있는 수량은 바로 상태 업데이트하는 함수를 추가했다.

 

 

 

 

 

 

 

수량 증가, 감소 함수

const handleIncrease = () => {
    if (item.quantity >= 5) {
      toast({
        title: "최대 5개 까지 구매 가능합니다.",
      });
      return;
    }

    const newCartItems = cartItems.map((cartItem) => {
      if (cartItem.id === item.id) {
        return {
          ...cartItem,
          quantity: Math.min(cartItem.quantity + 1, 5),
        };
      }
      return cartItem;
    });

    localStorage.setItem("shopping_cart", JSON.stringify(newCartItems));
    setCartItems(newCartItems);
  };

const handleDecrease = () => {
  const newCartItems = cartItems.map((cartItem) => {
    if (cartItem.id === item.id) {
      return {
        ...cartItem,
        quantity: Math.max(cartItem.quantity - 1, 1),
      };
    }
    return cartItem;
  });

  localStorage.setItem("shopping_cart", JSON.stringify(newCartItems));
  setCartItems(newCartItems);
};

 

cartItem에 있는 id를 찾아서 현재 id와 같은 값을 찾고, cartItem에 있는 quantity의 수량을 변경해준다.

그리고 로컬스토지와 useState로 동기화를 시켜준다.

 

 

 

 

 

 

 

결과