Project2: 상세페이지 품절 표시

백엔드에서 보내주는 응답값에서 사이즈와 수량이 함께 들어가 있는 배열을 새로운 배열로 꺼내온 뒤에 map을 통해서 값을 가져옴

 

프론트:

// 새로운 배열로 만들어 수량과 사이즈만 빼옴 
const newArray = productInfo.options.map(option => {
    return { quantity: option.quantity, size: option.size };
  });

// 아래처럼 새로운 배열을 map으로 돌려서 순서대로 매칭시킨 사이즈별 수량을 확인할 수 있습니다.
// 해당 수량의 값이 0 이면 품절로 출력되도록 아래와 같이 작성되어 있습니다!

                <div className="tableWrap">
                  {newArray.map(size => {
                    let color;
                    if (size.size === selectedSize) {
                      color = 'yellowToBlack';
                    } else {
                      color = 'whiteToBlack';
                    }

                    let displayText;
                    if (size.quantity === 0) {// 수량이 0 이면 품절
                      displayText = `${size.size} (품절)`;
                    } else {
                      displayText = size.size;
                    }

                    return (
                      <Button
                        key={size.size}
                        type="button"
                        className="btn"
                        fontscale="small"
                        scale="small"
                        color={color}
                        disabled={size.quantity === 0} // 버튼 선택 불가
                        handleClick={() => {
                          setSelectedSize(size.size);
                        }}
                      >
                        {displayText}
                      </Button>
                    );
                  })}
                </div>