[myCart] 상품 상세 페이지 수량 증감 버튼

 

SingleProductPage.jsx 에서 수량을 기본값 1로 준다. 

  const [quantity, setQuantity] = useState(1);

 

그리고 구매 개수에 props로 수량과 수량을 저장할 set함수 그리고 재고를 내려준다. 

            <h2 className="quantity_title">구매개수:</h2>

            <div className="align_center quantity_input">

              <QuantityInput

                quantity={quantity}

                setQuantity={setQuantity}

                stock={product.stock}

              />

            </div>

 

 

QuantityInput.jsx

에서 

 

import "./QuantityInput.css";

const QuantityInput = ({ quantity, setQuantity, stock }) => {

  return (

    <>

      <button

        // - 클릭하면 기존의 수량에서 하나 줄어든다.

        onClick={() => setQuantity((prev) => quantity - 1)}

        className="quantity_input_button"

        disabled={quantity <= 1} // 수량이 1이되면 클릭하지 못하게한다.

      >

        -

      </button>

      <p className="quantity_input_count">{quantity}</p>

      <button

        // + 클릭하면 기존의 수량에서 하나 증가한다.

        onClick={() => setQuantity((prev) => quantity + 1)}

        className="quantity_input_button"

        // 수량과 재고의 개수가 같아지면 클릭하지 못한다.

        disabled={quantity === stock}

      >

        +

      </button>

    </>

  );

};

export default QuantityInput;