[LUSH 프로젝트] - 장바구니 상품수량 변경 추가구현

▶︎ 장바구니

구현기능

• 상품수량수정

구현코드

TableBody.js

---

class TableBody extends Component {
  constructor() {
    super();
    this.state = {
      quantity: 1,
    };
// 상품수량을 1개로 설정
  }

  handleQuantity = e => {
    e.preventDefault();
// button 클릭 했을 때, 새로고침되는 것을 방지
    const { className } = e.target;
    const { quantity } = this.state;
// 구조분해 할당
    if (className === 'plusQuantity') {
      quantity < 10
        ? this.setState(state => {
            return { quantity: state.quantity + 1 };
          })
        : alert('10개까지만 주문할 수 있습니다');
// className이 'plusQuantity' 인 경우, { } 로직 실행
// 수량이 10개 이하면 setState를 통해 수량이 1개씩 증가, 최대 구매는 10개까지로 설정
    } else if (className === 'minusQuantity') {
      quantity > 1
        ? this.setState(state => {
            return { quantity: state.quantity - 1 };
          })
        : alert('1개부터 주문 할 수 있습니다');
    }
// className이 'minusQuantity' 인 경우, { } 로직 실행
// 수량이 1개 이상이면 setState를 통해 수량이 1개씩 감소, 최소 구매갯수는 1개로 설정
  };
.....
.....
.....
          <span className="countBox">
            <button
              className="minusQuantity"
              onClick={e => this.handleQuantity(e)}
            >
              -
            </button>
	// '-' button을 onClick event로 위의 함수 적용으로 수량 감소
            <input
              type="text"
              name="count"
              className="productCount"
              value={quantity}
            />
            <button
              className="plusQuantity"
              onClick={e => this.handleQuantity(e)}
            >
              +
            </button>
	// '+' button을 onClick event로 위의 함수 적용으로 수량 감소
          </span>
        <td>
          <strong className="totalPrice">
            {itemData.product_price * quantity}
          </strong>
	// 상품가격과 갯수에 따라 합계금액 변동
        </td>

---

구현 영상

---

---

---

🙋🏻‍♀️Today,

최근까지는 functional component를 사용했어서 오랜만에 class component를 쓰려니 헷갈렸다. useState의 편리함을 다시금 알게된..?

현재 백엔드서버 없이 추가구현하고 있기 대문에 백엔드에서 받아오는 데이터들을 Mock data에서 가져오는 것으로 바꿨다.

장바구니에서 상품 수량을 백엔드에서 가져오기때문에 장바구니 페이지에서 수량을 수정했다면, 수정된 수량을 서버로 보내고, 수정된 수량에 따른 합계금액을 다시 받아와야한다.
아직 여기까지는 구현하지 못했다..😭

계속 리팩토링 하면서 추가구현 할 예정이니 끝날 때까지 끝난 게 아니다.

코드짜면서 이론공부도 열심히 해야겠다.
이론공부가 너무 부족함을 알기에... 틈틈히 또 공부한 것을 기록해야겠다.

오늘도 너무나도 수고한 하루!💃🏻