장바구니 조회

Codren·2021년 10월 8일

Spring Spring Boot 쇼핑몰

Spring Boot 쇼핑몰

목록 보기

30/32

Section 1. 장바구니 조회

1. CartDetailDto

장바구니 조회 페이지에 전달할 Dto 클래스
CartItem 객체와 비슷함. 따라서 List 에 담겨서 전달됨

2. CartItemRepository

장바구니 페이지에 전달할 CartDetailDto 리스트를 쿼리 하나로 조회하는 JPQL 문
지연 로딩이기 때문에 최적화를 위해서 아래 코드와 같이 DTO의 생성자를 이용하여 조회 결과를 DTO 객체로 변환 후 반환할 수 있음

// select 부분에 new 키워드와 해당 DTO의 패키지, 클래스명을 지정 
new com.shop.dto.CartDetailDto(ci.id, i.itemNm, i.price, ci.count, im.imgUrl)

// 최적화를 위해 한 번에 반환하도록 List<CartDetailDto> 타입 지정
List<CartDetailDto> findCartDetailDtoList(Long cartId);

3. CartService

현재 로그인한 유저의 장바구니안에 존재하는 상품(들) 조회 로직
로그인 유저 정보 -> 유저의 cart 조회 -> cart 를 참조하는 CartItem 조회 (cartDetailDto 로 변환)

4. CartController

장바구니 페이지로 이동하는 로직

Section 2. 장바구니 조회 페이지

1. 장바구니 조회 페이지 View

GitHub 참고

2. 총 주문 금액

주문할 상품을 체크하거나 해제할 경우 총 주문 금액을 구하는 함수 및 호출

// name 속성 값이 cartChkBox 이고 체크된 input 태그에 대해 각각 함수 수행 
$("input[name=cartChkBox]:checked").each(function() 

//id 가 price~ 인 태그를 지정 
$("#price_" + cartItemId)

3. 상품 전체 선택 및 해제

checkall 태그의 프로퍼티 값이 checked 라면 cartChkBox 태그를 모두 checked 상태로 변경
checked 가 아니라면 모두 checked 상태를 해제
마지막에 총 주문 금액을 수정하는 getOrderTotalPrice() 함수 호출

자바스크립트 .attr()과 .prop() 차이
.attr() : HTML의 속성(attribute) 취급
.prop() : JavaScript의 프로파티(property)를 취급 (true,false)

4. 장바구니 상품 수량 변경

수량 부분의 수량을 변경하면 changeCount() 함수 호출
변경된 수량을 적용하기 위해 총 주문 금액을 수정하는 getOrderTotalPrice() 함수 호출

data-key-value 형태의 자료구조

// id = price{CartItemId} 엘리먼트에 data 자료구조 생성 후 key = price 에 대한 value 지정 
<span th:id="'price_' + ${cartItem.cartItemId}"
      th:data-price="${cartItem.price}" 
      th:text="${cartItem.price} + '원'" 
      class="align-self-center mr-2">
</span>

// id = price{CartItemId} 엘리먼트 data 에서 key = price 인 value 추출
var price = $("#price_" + cartItemId).data("price");

장바구니에 들어있는 상품의 수량을 변경하면 CartItem 의 count 값도 수정되야 하므로 마지막에 updateCartItemCount() 함수 호출

// 일부분만 수정하기 위해서 PATCH 방식으로 요청 
type: "PATCH"

// 상품 Id 값은 PathVariable, 수량(count)은 QueryString
var url = "/cartItem/" + cartItemId+"?count=" + count;

5. CartItem Entity