웹 개발

[FullStack] 상품 품절 시 상품 목록에서 품절 이미지 띄우기

_KH_ 2025. 5. 28. 17:33
// 모듈화 메서드
	// call by reference로 리스트 반환 안해도 됨
	// 개별 상품
	// 품절 시 이미지 경로 변경하여 Map 세팅 기능
	private void returnApplyProductSingleSoldoutImgPathMapList(List<Map<String, Object>> response,
			List<ProductSingleVO> list) {
			// 품절된 상품의 이미지를 품절 이미지로 교체하는 메서드
			// List<Map<String, Object>> response : JSON형태로 보내기 위한 Map 구조 리스트. 
			// 결과값을 담는 리스트이다. 
			// 키-값 형태로 되어있는데, JSON 형태처럼 값을 담은 리스트
			// List<ProductSingleVO> list : 단품 상품 리스트. DB에서 가져온 상품 목록이다. 
		final String soldoutImgLink = "assets/img/product/soldout.png";
		// 품절 상품 이미지 경로. 변하지 않는 경로이므로 상수화		
		for (ProductSingleVO product : list) {
		// 상품 리스트에서 하나씩 꺼냄(product) 
			Map<String, Object> productMap = new HashMap<String, Object>();
			// 한 상품의 정보를 Map에 다 담아서 전달 
			// productMap 1개 == 상품 1개 (가격, 상품 번호, 이미지, 재고 등)
			
			// 품절상품 이미지 경로 변경
			int stock = product.getProductSingleStock();
			// 재고를 가져와서 
			if (stock <= 0) { // 품절이라면
				product.setProductSingleImage(soldoutImgLink);
				// 이미지 경로를 soldout.png로 강제 변경
			}
		
			// 상품의 정보들을 Key-value 형태로 Map에 담는다.
			productMap.put("productSingleNumber", product.getProductSingleNumber()); // 상품 번호
			productMap.put("productSingleImage", product.getProductSingleImage()); // 이미지
			productMap.put("productSingleName", product.getProductSingleName()); // 상품 이름
			productMap.put("productSinglePrice", product.getProductSinglePrice()); // 가격
			productMap.put("productSingleStock", product.getProductSingleStock()); // 재고
			productMap.put("productSingleDiscount", product.getProductSingleDiscount()); // 할인율
			productMap.put("productSingleDiscountedPrice", product.getProductSingleDiscountedPrice()); // 할인율 적용 가격
			productMap.put("totalCountNumber", product.getTotalCountNumber()); // 총 개수
			response.add(productMap); // 결과 리스트에 추가
		}
	}

response.add(productMap) 와 List<Map<String, Object>> response

  1. List<Map<String, Object>> response → 여러 개의 상품을 담는 리스트
  2. Map<String, Object> productMap → 1개의 상품 정보가 담겨있는 Map

⇒ response.add(productMap); 는 상품 1개(productMap)을 리스트(response)에 담는 것.

⇒ response는 메서드 실행 후 JSON 형태로 변환되어 프론트에 전달. 화면에 상품 목록을 출력하게 됨


// 장바구니 상품 담기 기능
const insertCart = (productNumber, cartProductCount, isComboProduct, productStock) => {
	console.log("상품 상세에서 추천 상품 담기 실행");
	if (!loginedMemberNumber) { // 로그인하지 않은 경우
		console.log("로그인 없이 장바구니 담기 요청");
		// 스위트 알럿창 출력
		printSweetAlert("warning", "로그인이 필요한 기능입니다!");
		return;
	}

	console.log("장바구니 담을 상품 재고 : [" + productStock + "]");
	console.log("장바구니 담을 상품 번호 : [" + productNumber + "]");
	console.log("장바구니 담을 상품 개수 : [" + cartProductCount + "]");
	console.log("장바구니 담을 꿀조합 상품 여부 : [" + isComboProduct + "]");

	if (productStock <= 0) { // 품절 상품이라면
		console.log("장바구니 담을 상품 재고 부족");
		// 스위트 알럿창 출력
		printSweetAlert("warning", "품절 상품입니다.");
		return;
	}

 

이미지를 품절 이미지로 바꿀 뿐만 아니라 스위트 알럿으로 품절 상품임을 안내한다.

 

또한, 카카오 페이 승인 준비 단계에서 매번 DB를 통해 재고를 조회하고, 만약 하나라도 품절인 상품이 있거나, 남은 수량보다 많은 수량을 선택한 상품이 있으면 결제를 승인하지 않고 취소 처리한다.

 

따라서 장바구니 내에 담아둔 상품이 결제하려는 순간 품절이 되어도 결제 처리 전에 전부 DB를 거쳐 재고를 조회하기 때문에  상품 재고 오류를 막을 수 있다.

 

사용자의 행동 시점과 결제 재고 반영 시점을 동일하게 !!