[Spring][쇼핑몰 프로젝트][39] 장바구니 기능(장바구니 삭제)

프로젝트 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)"를 전달받으면 DB vam_cart 테이블에서 요청받은 cartId'를 가지는 행을 제거해야 합니다.

 

 '뷰 측' 사용자가 원하는 품목의 '삭제' 버튼을 눌렀을 때 '장바구니 품목 삭제' 요청와 함께 '장바구니 id'를 함께 전성하도록 하도록 구현할 것입니다.

 

2. 서버 측 구현

 DB에 장바구니 수량 변경 쿼리가 동작하도록 만드는 Mapper 메서드(deleteCart())는 이미 만들어 두었습니다. 이를 호출하는 Service 메서드를 만들어 주겠습니다

 

2.1 CartiService

CartService.java

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

 

	/* 카트 삭제 */
	public int deleteCart(int cartId);

 

그림 2-1

 

 

 

CartServiceImpl.java

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

 

	@Override
	public int deleteCart(int cartId) {

		return cartMapper.deleteCart(cartId);
	}

 

그림 2-2

 

 

 

2.2 CartController.java

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

 

 'cartId'의 경우 품목 삭제에 필요로한 데이터고 '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. 뷰 측 구현

 본격 구현 전 '삭제' 버튼 객체에 쉽게 접근하기 위해 <button>태그에 class 속성을 부여해주었습니다. (<button> 태그를 감싸는 <td> 태그에 delete_btn 클래스 속성 값이 부여되어 있는지 지우고 <button> 태그의 class 속성에 'delete_btn'을 값으로 부여해줍니다.

<button class="delete_btn">삭제</button>

 

그림 3-1

 더불어 태그의 data 속성을 이용하여 상품의 cartId 값을 <button>태그에 심어줍니다.

 

<button class="delete_btn" data-cartid="${ci.cartId}">삭제</button>

 

그림 3-2

 

 

 

 

<form> 태그 추가

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

 

			<!-- 삭제 form -->
			<form action="/cart/delete" method="post" class="quantity_delete_form">
				<input type="hidden" name="cartId" class="delete_cartId">
				<input type="hidden" name="memberId" value="${member.memberId}">
			</form>

 

그림 3-3

 

 

삭제 요청 Js코드

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

 

/* 장바구니 삭제 버튼 */
$(".delete_btn").on("click", function(e){

});

 

 

 메서드 구현부에 먼저 <button> 기본 동작이 되지 않도록 preventDefault() 메서드를 호출해주고, cartId변수를 선언하여 해당 객체(클릭된 <button> 태그 객체)의 '장바구니 id' 값을 대입해줍니다.

 

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

 

/* 장바구니 삭제 버튼 */
$(".delete_btn").on("click", function(e){
	e.preventDefault();
	const cartId = $(this).data("cartid");
});

 

 

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

 

/* 장바구니 삭제 버튼 */
$(".delete_btn").on("click", function(e){
	e.preventDefault();
	const cartId = $(this).data("cartid");
	$(".delete_cartId").val(cartId);
	$(".quantity_delete_form").submit();
});

 

그림 3-4

 

 

4. 테스트

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

 

그림 4-1

 

그림 4-2

 

그림 4-3

 

그림 4-4

 

 

 

REFERENCE

•  

 

 

DATE

• 2020.12.01