장바구니 조회
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
- 장바구니 페이지로 이동하는 로직
장바구니 조회 페이지
1. 장바구니 조회 페이지 View
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
- 수량 변경을 위한 메소드 추가
6. CartService
- updateCount() 메소드를 호출하는 로직을 추가
- 현재 로그인한 유저와 해당 장바구니 상품의 저장한 유저가 같은지 검증
7. CartController
- 위에 존재하는 updateCartItemCount() 함수 호출 시 전송되는 PATCH 요청에 대한 Controller
- cartService.updateCartItemCount() 메소드 호출
- 상품의 개수를 0으로 지정할 시 에러 메시지 반환
'JAVA > SpringBoot Shoppingmall' 카테고리의 다른 글
[VSCODE] Spring Boot 쇼핑몰 프로젝트 (0) | 2022.06.28 |
---|---|
[VSCODE] SpringBoot 쇼핑몰(MVN) 장바구니 상품 삭제 & 주문 (0) | 2022.06.28 |
[VSCODE] SpringBoot 쇼핑몰(MVN) 장바구니 담기 (0) | 2022.06.28 |
[VSCODE] SpringBoot 쇼핑몰(MVN) 주문 취소하기 (0) | 2022.06.28 |
[VSCODE] SpringBoot 쇼핑몰(MVN) 구매 내역 조회 (0) | 2022.06.28 |