단일 제품의 재고관리 및 가격관리

이번 프로젝트는 쇼핑몰이었기때문에 재고관리가 필수였다. 

사용자의 편의성을 위해 재고 이상으로 구매를 하려고 하면 미리 알려줄 수 있게 기획을 했다.

그래서 프론트쪽에서 1차로 상품상세 페이지에서 수량을 조절할 때 재고 이상으로 수량을 올린다면 재고 부족 경고창을 띄워주고

버튼도 비활성화 시켜 버튼 자체를 누르지 못하도록 하였고 혹시나 또다른 에러를 컨트롤 하기위해

백엔드쪽에서 2차로 재고수량을 넘겨 결제 버튼을 누른다면 재고부족 경고창을 띄워주면서 통신을 실패시켰다.

 

재고관리

프론트 쪽에서는 백엔드에게 받아오는 데이터 중 물품의 재고에 대한 데이터를 이용했다.

백엔드에게 받아온 데이터를 저장하는 useState의 변수가 product 였고

그 데이터 중 productOptions[0].optionInventory이 제품의 재고수량이었다.

변수 noItem을 boolean으로 먼저 선언해주고 데이터가 없을 때 에러가 나기때문에 조건문 안에서 noItem을 재선언해준다.

number는 사용자가 조절하는 수량을 useState로 관리하고 있는 변수이며 그 값이 재고수량보다 많을 때 true가 된다.

이 때 let으로 선언한 이유는 noItem이 재선언되는 변수이기 때문이다.

  let noItem = false;

  if (product?.productPrice) {
    noItem = number > product.productOptions[0].optionInventory;
  }

그리고 boolean 값인 noItem을 이용해 noItem이 true일 때 재고가 부족합니다 라는 글이 뜰 수 있도록 opacity로 관리했다.

프로젝트가 작아 렌더링이 금방 되지만 그럼에도 불구하고 렌더링 시간을 단축하기 위해 display:none을 쓰면 아예 렌더링도 안할 수 있다.

하지만 display:none을 쓰면 p태그의 영역도 사라지기 때문에 글자가 있을때와 없을때 ui가 들쑥날쑥 움직이게 된다.

그것을 방지하기 위해 true일 땐 opacity를 1로 만들어 글을 보여주고 false일 땐 opacity를 0으로 만들어 글을 숨긴다.

만약 display:absolute 를 사용하고 있다면 z-index :-1로 숨기는 방법도 있다.

<p
 className="outOfStock"
 style={{
 opacity: noItem ? '1' : '0',
 }}
 >
 재고가 부족합니다.
 </p>

마지막으로 장바구니 및 바로구매 버튼에 noItem을 사용한다.

noItem이 true면 disabled 속성도 true가 되어 버튼이 비활성화가 되고 false면 disabled 속성도 false가 되어 버튼이 활성화된다.

그리고 추가로 활성화 비활성화를 유저에게도 보여주기 위해 opacity로 색깔의 변화를 주었다.

<button
 disabled={noItem}
 style={{ opacity: noItem ? 0.5 : 1 }}
 >
 장바구니
 </button>

 

가격관리

추가적으로 아이템의 가격관리 방법이다.

noItem과 같이 변수를 let으로 선언해 if문 안에서 재선언을 해준다.

백엔드쪽에서는 가격을 소숫점으로 관리하고 있어서 Math.floor() 메소드를 통해 소숫점을 잘라주고

toLocaleString() 메소드를 사용해 1000원단위마다 ,를 찍어주도록 구현했다.

  let totalPrice = 0;
  let price = 0;
  let noItem = false;

  if (product?.productPrice) {
    totalPrice = Math.floor(product.productPrice * number).toLocaleString();
    price = Math.floor(product.productPrice).toLocaleString();
    noItem = number > product.productOptions[0].optionInventory;
  }

가공된 데이터들을 JSX 문법을 통해 자리에 맞게 넣어주면 된다.

 <p>{price}원</p>
 <div className="totalPrice">
  <p>총 금액</p>
  <p className="total">{totalPrice}원</p>
 </div>