@Getter
@Setter
public class CartDetailDto {
private Long cartItemId; // 장바구니 상품 아이디
private String itemNm; // 상품명
private int price; // 상품 금액
private int count; // 수량
private String imgUrl; // 상품 이미지 경로
public CartDetailDto(Long cartItemId, String itemNm, int price, int count, String imgUrl) {
this.cartItemId = cartItemId;
this.itemNm = itemNm;
this.price = price;
this.count = count;
this.imgUrl = imgUrl;
}
}
2. CartItemRepository
장바구니 페이지에 전달할 CartDetailDto 리스트를 쿼리 하나로 조회하는 JPQL 문
지연 로딩이기 때문에 최적화를 위해서 아래 코드와 같이 DTO의 생성자를 이용하여 조회 결과를 DTO 객체로 변환 후 반환할 수 있음
@Query("select new kr.spring.cart.dto.CartDetailDto(ci.id, i.itemNm, i.price, ci.count, im.imgUrl) " +
"from CartItem ci, ItemImg im " +
"join ci.item i " +
"where ci.cart.id = :cartId " +
"and im.item.id = ci.item.id " +
"and im.repimgYn = 'Y' " +
"order by ci.regTime desc")
List<CartDetailDto> findCartDetailDtoList(@Param("cartId") Long cartId);
3. CartService
현재 로그인한 유저의 장바구니안에 존재하는 상품(들) 조회 로직
로그인 유저 정보 -> 유저의 cart 조회 -> cart 를 참조하는 CartItem 조회 (cartDetailDto 로 변환)
// 현재 로그인한 회원의 정보를 이용하여 장바구니에 들어있는 상품을 조회
@Transactional(readOnly = true)
public List<CartDetailDto> getCartList(String email) {
List<CartDetailDto> cartDetailDtoList = new ArrayList<>();
Member member = memberRepository.findByEmail(email);
Cart cart = cartRepository.findByMemberId(member.getId());
if(cart == null) {
return cartDetailDtoList;
}
cartDetailDtoList = cartItemRepository.findCartDetailDtoList(cart.getId());
return cartDetailDtoList;
}
4. CartController
장바구니 페이지로 이동하는 로직
@GetMapping("/cart")
public String orderHist(Principal principal, Model model) {
List<CartDetailDto> cartDetailList = cartService.getCartList(principal.getName());
model.addAttribute("cartItems", cartDetailList);
return "cart/cartList";
}
장바구니 조회 페이지
1. 장바구니 조회 페이지 View
2. 총 주문 금액
주문할 상품을 체크하거나 해제할 경우 총 주문 금액을 구하는 함수 및 호출
<!-- cartList.html -->
$(document).ready(function(){
$("input[name=cartChkBox]").change( function(){
getOrderTotalPrice();
});
});
function getOrderTotalPrice(){
var orderTotalPrice = 0;
$("input[name=cartChkBox]:checked").each(function() {
var cartItemId = $(this).val();
var price = $("#price_" + cartItemId).attr("data-price");
var count = $("#count_" + cartItemId).val();
orderTotalPrice += price*count;
});
$("#orderTotalPrice").html(orderTotalPrice+'원');
}
3. 상품 전체 선택 및 해제
checkall 태그의 프로퍼티 값이 checked 라면 cartChkBox 태그를 모두 checked 상태로 변경
checked 가 아니라면 모두 checked 상태를 해제
마지막에 총 주문 금액을 수정하는 getOrderTotalPrice() 함수 호출
function checkAll(){
if($("#checkall").prop("checked")){
$("input[name=cartChkBox]").prop("checked",true);
}else{
$("input[name=cartChkBox]").prop("checked",false);
}
getOrderTotalPrice();
}
4. 장바구니 상품 수량 변경
수량 부분의 수량을 변경하면 changeCount() 함수 호출
변경된 수량을 적용하기 위해 총 주문 금액을 수정하는 getOrderTotalPrice() 함수 호출
function changeCount(obj){
var count = obj.value;
var cartItemId = obj.id.split('_')[1];
var price = $("#price_" + cartItemId).data("price");
var totalPrice = count*price;
$("#totalPrice_" + cartItemId).html(totalPrice+"원");
getOrderTotalPrice();
updateCartItemCount(cartItemId, count);
}
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>
장바구니에 들어있는 상품의 수량을 변경하면 CartItem 의 count 값도 수정되야 하므로 마지막에 updateCartItemCount() 함수 호출
function updateCartItemCount(cartItemId, count){
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
// 상품 Id 값은 PathVariable, 수량(count)은 QueryString
var url = "/cartItem/" + cartItemId+"?count=" + count;
$.ajax({
url : url,
type : "PATCH",
beforeSend : function(xhr){
/* 데이터를 전송하기 전에 헤더에 csrf값을 설정 */
xhr.setRequestHeader(header, token);
},
dataType : "json",
cache : false,
success : function(result, status){
console.log("cartItem count update success");
},
error : function(jqXHR, status, error){
if(jqXHR.status == '401'){
alert('로그인 후 이용해주세요');
location.href='/members/login';
} else{
alert(jqXHR.responseJSON.message);
}
}
});
}
// 현재 로그인한 회원과 해당 장바구니 상품을 저장한 회원이 같은지 검사
@Transactional(readOnly = true)
public boolean validateCartItem(Long cartItemId, String email) {
Member curMember = memberRepository.findByEmail(email);
CartItem cartItem = cartItemRepository.findById(cartItemId).orElseThrow(EntityNotFoundException::new);
Member savedMmeber = cartItem.getCart().getMember();
if(!StringUtils.equals(curMember.getEmail(), savedMmeber.getEmail())) {
return false;
}
return true;
}
7. CartController
위에 존재하는 updateCartItemCount() 함수 호출 시 전송되는 PATCH 요청에 대한 Controller
cartService.updateCartItemCount() 메소드 호출
상품의 개수를 0으로 지정할 시 에러 메시지 반환
// 장바구니 상품의 수량을 업데이트하는 요청 처리
@PatchMapping("/cartItem/{cartItemId}")
public @ResponseBody ResponseEntity updateCartItem(@PathVariable("cartItemId") Long cartItemId, int count, Principal principal) {
if(count <= 0) {
return new ResponseEntity<String>("최소 1개 이상 담아주세요.", HttpStatus.BAD_REQUEST);
} else if(!cartService.validateCartItem(cartItemId, principal.getName())) {
return new ResponseEntity<String>("수정 권한이 없습니다.", HttpStatus.FORBIDDEN);
}
cartService.updateCartItemCount(cartItemId, count);
return new ResponseEntity<Long>(cartItemId, HttpStatus.OK);
}
