[Spring][쇼핑몰 프로젝트][38] 장바구니 기능(수량 수정)

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

 

목표

장바구니 수량 수정 구현

 장바구니 페이지 상품란에 수량을 변경 후 '변경' 버튼을 누르게 되면 '장바구니 테이블'의 수량이 변경되도록 구현을 목표로 합니다.

 

 

순서

1. 개요

2. 서버 측 구현

 2.1 CartService

 2.2 CartController.java

3. 뷰 측 구현

4. 테스트

 

1. 개요

 '장바구니 수량 변경' 구현은 크게 서버 측, 뷰 측 작업으로 나누어서 진행합니다.

 

 '서버 측' 구현의 경우 '뷰'에서 수량 변경 요청과 함께 "장바구니 id(cartId)", "변경 수량(bookCount)"를 전달받으면 DB vam_cart 테이블 수량을 변경하도록 구현해줄 것입니다.

 

 '뷰 측' 구현의 경우 먼저 각 상품 란에 있는 수량 버튼이 동작하도록 만든 후, 사용자가 '변경' 버튼을 눌렀을 때 '장바구니 수량' 변경 요청과 함께 변경한 '수량 정보'와 대상 '장바구니 id'를 함께 전송하도록 하는 구현 할 것입니다.

 

2. 서버 측 구현

 DB에 장바구니 수량 변경 쿼리가 동작하도록 만드는 Mapper 메서드(modifyCount())는 이미 만들어 두었습니다. 이를 호출하는 Service 메서드를 만들어 주겠습니다. (Service 메서드가 단순히 Mapper 메서드를 호출하는 역할만 하기 때문에 Controller에서 바로 Mapper 객체를 주입해 메서드를 호출해도 상관은 없지만, 저는 Contorller -> Service -> Mapper를 의존하는 구조를 일관성 있게 해 주기 위해 단순히 Mapper 메서드를 호출하는 Service 메서드를 만들어주었습니다.)

 

※ 인프런 스프링 김영한 강사님께서는 상황에 따라 단순히 호출해주는 역할만 할 경우 상황에 따라 Controller 직접 Mapper 객체(강의에서는 Entity 객체)에 접근을 해도 상관없다고 하셨습니다. 

 

2.1 CartiService

CartService.java

 CartService.java 인터페이스에 아래의 메서드 선언부를 추가해줍니다.

 

	/* 카트 수량 수정 */
	public int modifyCount(CartDTO cart);

 

그림 2-1

 

 

CartServiceImpl.java

 인터페이스에서 선언한 메서드를 오버라이딩 해서 구현부를 작성해줍니다.

 

	@Override
	public int modifyCount(CartDTO cart) {
		
		return cartMapper.modifyCount(cart);
	}

 

그림 2-2

 

 

 이로써 DB 수량 변경을 처리하는 Service 메서드가 만들어졌습니다.

 

 

2.2 CartController.java

 장바구니 수량 변경을 수행하는 URL은 POST 방식으로서 경로를 "/cart/update"로 할 것입니다. CartController.java에 아래의 URL 매핑 메서드를 추가해줍니다. 작성한 메서드가'cartId', 'bookCount', 'memberId' 를 전달받도록 파라미터를 부여해하는데 한번에 받아 들일 수 있도록 CartDTO를 파라미터로 부여했습니다. 

 

 'cartId', 'bookCount'의 경우 수량 수정에 필요로한 데이터고 'memberId'는 장바구니 페이지 이동에 필요로 한 데이터입니다. 

 

	/* 장바구니 수량 수정 */
	@PostMapping("/cart/update")
	public String updateCartPOST(CartDTO cart) {
		

	}

 

 

 

 구현부에 앞서 만든 Service 메서드를 호출하고, '장바구니 페이지'에 리다이렉트 방식으로 이동하도록 return 값을 부여합니다.

장바구니 페이지로 이동하는 url은 "/cart/사용자아이디"이기 때문에  아래와 같이 작성했습니다.

 

	/* 장바구니 수량 수정 */
	@PostMapping("/cart/update")
	public String updateCartPOST(CartDTO cart) {
		
		cartService.modifyCount(cart);
		
		return "redirect:/cart/" + cart.getMemberId();
		
	}

 

그림 2-3

 

 

3. 뷰 측 구현

 본격 구현 전 '수량 변경' 버튼인 <a> 태그에 data속성을 이용하여 '장바구니 Id" 데이터를 심어 놓겠습니다.

 

<a class="quantity_modify_btn" data-cartId="${ci.cartId}">변경</a>

 

그림 3-1

 

 

수량 변경 버튼 동작 구현

 <script> 태그 내부에 아래의 수량 변경 버튼이 동작하도록 메서드 두 개를 추가해줍니다. (상품 상세 페이지의 수량 변경 버튼 코드와 동일합니다.)

 

/* 수량버튼 */
$(".plus_btn").on("click", function(){
	let quantity = $(this).parent("div").find("input").val();
	$(this).parent("div").find("input").val(++quantity);
});
$(".minus_btn").on("click", function(){
	let quantity = $(this).parent("div").find("input").val();
	if(quantity > 1){
		$(this).parent("div").find("input").val(--quantity);		
	}
});

 

그림 3-2

 

 

<form> 태그 추가

 서버에 데이터를 보낼 수 있도록 'cartId'와 'bookCount' 값들이 저장된 <input> 태그를 감 싸는 <form> 태그를 추가해줍니다. 위치는 상관없고, 저의 경우 contents <div> 태그 맨 아래 공간에 추가해주었습니다.

 

 더불어 memberId에 대한 데이터도 서버로 전송해 주기 위해 session에 보관되어져 있는 memberId값을 저장한 <input>태그또한 추가하였습니다. 

 

			<!-- 수량 조정 form -->
			<form action="/cart/update" method="post" class="quantity_update_form">
				<input type="hidden" name="cartId" class="update_cartId">
				<input type="hidden" name="bookCount" class="update_bookCount">
				<input type="hidden" name="memberId" value="${member.memberId}">
			</form>

 

 

 

변경 요청 Js코드

 사용자가 수량 변경 버튼인 <a> 태그를 클릭했을 때 동작하는 메서드를 <script> 태그 내부에 작성합니다.

 

/* 수량 수정 버튼 */
$(".quantity_modify_btn").on("click", function(){

	
});

 

 

 메서드 구현부에 cartId, bookCount 변수를 선언하여 해당 객체(클릭된 <a> 태그 객체)의 '장바구니 id'와 '변경 수량' 값을 대입해줍니다.

 

 장바구니 id : 클릭된 <a> 태그에 (data속성을 통해) 심어진 cartId

 변경 수량 : 장바구니 변경 <a> 태그가 있는 <td> 태그 내부의 <input> 태그에 변경 값이 존재하는데 이를 위해 JQUERY의 parent() 메서드와 find() 메서드를 활용 하였습니다.

 

※ parent() 호출하는 객체의 부모 객체에 접근

※ find() 호출하는 객체 내부의 객체들 중 인자 값으로 부여한 식별자를 가진 객체에 접근합니다.

 

/* 수량 수정 버튼 */
$(".quantity_modify_btn").on("click", function(){
	let cartId = $(this).data("cartid");
	let bookCount = $(this).parent("td").find("input").val();
	
});

 

 

 구한 값을 앞서 작성한 <form> 태그 내부에 작성된 <input> 태그에 저장한 후, <form> 태그를 서버로 전송하는 코드를 작성합니다.

 

/* 수량 수정 버튼 */
$(".quantity_modify_btn").on("click", function(){
	let cartId = $(this).data("cartid");
	let bookCount = $(this).parent("td").find("input").val();
	$(".update_cartId").val(cartId);
	$(".update_bookCount").val(bookCount);
	$(".quantity_update_form").submit();
	
});

 

그림 3-4

 

 

4. 테스트

 작업한 기능이 잘 구현되었는지 테스트를 해봅니다.

 

그림 4-1

 

그림 4-2

 

그림 4-3

 

그림 4-4

 

 

REFERENCE

•  

 

 

DATE

• 2020.11.30