React 옵션 수량 박스 구현 , 담은 제품의 데이터 장바구니에 보내기

구현 내용

• 옵션을 선택하기 전에는 보이지 않다가 옵션을 하나 담았을 때 나타나게 한다.
• 선택한 제품의 수량을 늘리거나 줄일 수 있다.
• 담은 제품의 수량, 이름, 색상, 총 가격을 장바구니 버튼을 눌렀을 때 데이터를 전송할 수 있다.

동작 원리

1. display:none 으로 숨겨져 있던 수량박스가 색상 옵션 까지 선택 했을 때 나타날 수 있게 className을 state 값을 통해 제어 한다.
2. 옵션을 선택하면서 state에 저장해 뒀던 값들을 각각의 위치에 표시해준다.
3. +,- 버튼을 통해서 수량을 늘리거나 줄일 수 있다 . 총 가격은 선택한 옵션의 가격 곱하기 수량이 된다.
4. 옵션의 수량, 가격, 색상, 이름의 데이터를 장바구니 버튼을 눌렀을 때 fetch 함수를 통해 백엔드 쪽에 전달한다.

2. 옵션을 선택하면서 state에 저장해 뒀던 값들을 각각의 위치에 표시해준다.

구현코드

               <div className="boxAndBuy">
                <div className={quantityBox === true ? 'buyBoxOff' : ''}>
                  <div className="quantityBox">
                    <div className="closeButtonFlex">
                      <div className="nameAndColor">
                        {productName} / {productColor}
                      </div>
                      <button
                        onClick={this.quantityBoxRemove}
                        className="quantityBoxRemoveButton"
                      >
                        ✕
                      </button>
                    </div>
                    <div className="buttonsAndPrice">
                      <div className="twoButtonsBox">
                        <button
                          onClick={this.quantityMinus}
                          className="quantityMinusButton"
                        >
                          -
                        </button>
                        <div className="calculator">{productQuantity}</div>
                        <button
                          onClick={this.quantityPlus}
                          className="quantityPlusButton"
                        >
                          +
                        </button>
                      </div>
                      <div className="priceCalculator">
                        {priceComma(multiplyPrice)}원
                      </div>
                    </div>
                  </div>

3. +,- 버튼을 통해서 수량을 늘리거나 줄일 수 있다 . 총 가격은 선택한 옵션의 가격 곱하기 수량이 된다.

구현코드

quantityMinus = () => {
    const { productQuantity } = this.state;
    if (productQuantity > 1) {
      this.setState({
        productQuantity: productQuantity - 1,
      });
    }
  };

  quantityPlus = () => {
    const { productQuantity, productPrice } = this.state;
      this.setState({
        productQuantity: productQuantity + 1,
      });
    }
  };

1. +버튼을 눌렀을 때는 state값에 +1 을 해준다.
2. -버튼을 눌렀을 때는 state값에 -1 을 해준다.
3. -버튼은 수량이 1이하일때 누를 수 없다.

4. 옵션의 수량, 가격, 색상, 이름의 데이터를 장바구니 버튼을 눌렀을 때 fetch 함수를 통해 백엔드 쪽에 전달한다.

구현코드

 shippingBasketDataTransfer = () => {
    const { productQuantity, productId, colorId } = this.state;

    if (colorId !== 0) {
      fetch('경로', {
        method: 'POST',
        headers: {
          Authorization:
            '토큰', // 발행된 액세스 토큰
        },
        body: JSON.stringify({
          ProductId: productId,
          ColorId: colorId,
          quantity: productQuantity,
        }),
      }).then(response => response.json());
      alert('물건을 장바구니에 담았어요!');
    } else {
      alert('장바구니에 담을 제품을 골라주세요!');
    }
  };

1. post 방식의 fetch 함수를 사용해서 state의 값으로 저장된 수량박스들의 요소들을 body에 담아 보낸다
2. 두번째 옵션까지 선택을 했다는 조건이 충족 되었을 때 장바구니 버튼을 누르면 alert창으로 '물건을 장바구니에 담았어요! 라는 문구가 뜬다.
3. 두번째 옵션까지 선택을 하지 않았을 때는 alert 창으로 '장바구니에 담을 제품을 골라주세요!' 라는 문구가 뜬다.

어려웠던 점

• fetch 함수를 처음 써보았다. 토큰을 적용시키는 것 전송 할 데이터를 담는 것 모든것이 처음이었기에 많이 해맸다.

결과물