[Spring][쇼핑몰 프로젝트][44] 주문 취소 - 2

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

 

목표

주문 취소

 

 저번 포스팅에 이어서 주문 취소 기능 구현 마무리를 목표로 합니다.

순서

1. Controller

2. 뷰처리

3. 테스트

 

 

 

1. Controller

 AdminController.java 클래스 작업을 해주겠습니다. OrderService의 메서드를 사용할 것이기 때문에 OrderService를 의존성 주입해줍니다.

 

	@Autowired
	private OrderService orderService;

 

그림 1-1

 

 

  클라이언트로부터의 요청을 처리하는 URL 메핑 메서드를 작성해보겠습니다. 주문 취소 요청을 처리하는 POST 방식의 URL 매핑 메서드를 작성합니다.

 

	/* 주문삭제 */
	@PostMapping("/orderCancle")
	public String orderCanclePOST(OrderCancelDTO dto) {
		

	}

 

 

 

 - URL의 경로는 "/orderCancel"로 하였습니다.

 

 

 리턴으로는 리다이렉트 방식으로 '주문현황' 페이지를 반환합니다. 사용자가 머물고 있었던 페이지에 이동할 수 있도록 쿼리 파라미터를 부여해주었습니다.

 

	/* 주문삭제 */
	@PostMapping("/orderCancle")
	public String orderCanclePOST(OrderCancelDTO dto) {
		
		return "redirect:/admin/orderList?keyword=" + dto.getKeyword() + "&amount=" + dto.getAmount() + "&pageNum=" + dto.getPageNum();
	}

 

그림 1-3

 

 

 

 구현부에는 주문 취소 Service 메서드를 호출합니다.

 

orderService.orderCancle(dto);

 

그림 1-4

 

 

 

2. 뷰 처리

버튼 추가

 

 빈 공간으로 두었던 5번째 <td> 태그에 취소 버튼을 추가해줍니다. 취소 버튼 태그에 data속성을 활용하여 orderId값을 심어주었습니다.

 

<button class="delete_btn" data-orderid="${list.orderId}">취소</button>

 

그림 2-1

 

 

 저는 추가해준 버튼이 '배송준비' 상태 일 때만 보이도록 해주고 싶습니다. 따라서 <c:if> 태그를 활용해서 orderState 값이 '배송준비'일때만 버튼이 보이도록 코드를 추가해줍니다.

 

<c:if test="${list.orderState == '배송준비' }">
	<button class="delete_btn" data-orderid="${list.orderId}">취소</button>
</c:if>

 

그림 2-2

 

 

 

form 추가

 "moveForm" <form> 태그 바로 아래 공간에 "주문취소" 버튼을 눌렀을 때 서버 요청에 필요로 한 <form> 태그를 작성해줍니다.

 

                    <form id="deleteForm" action="/admin/orderCancle" method="post">
                    	<input type="hidden" name="orderId">
						<input type="hidden" name="pageNum" value="${pageMaker.cri.pageNum}">
						<input type="hidden" name="amount" value="${pageMaker.cri.amount}">
						<input type="hidden" name="keyword" value="${pageMaker.cri.keyword}">
						<input type="hidden" name="memberId" value="${member.memberId}">
                    </form>

 

그림 2-3

 

 

 전송해줄 데이터는 orderId, memberId, 페이징 정보(pageNum, amount, keyword)입니다. orderId는 JS코드를 통해서 사용자가 클릭한 '취소버튼'에 심어진 orderId값을 부여해줄 것입니다.

 

JS 코드

 <script>코드 내부에 '취소버튼'을 눌렀을 때 동작하는 메서드를 작성합니다. 더불어 구현부 첫 줄에는 버튼의 기본 동작이 실행되지 않도록 preventDefault() 메서드를 호출합니다.

 

$(".delete_btn").on("click", function(e){
	e.preventDefault();

});

 

 

 orderId값을 담을 변수를 선언해주고 사용자가 클릭한 버튼에 심어진 orderId 값을 대입해줍니다.

 

$(".delete_btn").on("click", function(e){
	
	e.preventDefault();
	
	let id = $(this).data("orderid");
	
});

 

 

 변수에 저장된 값을 앞서 선언한 <form> 태그 중 orderId <input> 태그의 값으로 부여해줍니다. 그리고 <form> 태그를 서버에 전송합니다.

 

$(".delete_btn").on("click", function(e){
	
	e.preventDefault();
	
	let id = $(this).data("orderid");
	
	$("#deleteForm").find("input[name='orderId']").val(id);
	$("#deleteForm").submit();
});

 

그림 2-4

 

 

 

orderList.css

 

 추가한 버튼의 대한 css를 추가해주기 위해 orderList.css 파일에 아래의 코드를 추가해줍니다.

 

.delete_btn{
    border: none;
    color: white;
    padding: 5px 15px;
    cursor: pointer;
    background-color: #f7564b;	
}
.delete_btn:hover{
	background-color : #da190b;
}

 

그림 2-5

 

 

3. 테스트

 주문 취소를 하였을 때 돈, 포인트, 재고가 원상태로 돌아왔는지 확인합니다. 더불어 주문 상태가 변경되었는지 확인합니다.

 

주문 전

 

그림 3-1

 

주문 & 주문 후 변화

 

그림 3-2

그림 3-3

 

주문 취소 & 주문 취소 후 변화

 

그림 3-4

 

그림 3-5

 

그림 3-6

 

 

 

REFERENCE

•  

 

 

DATE

• 2020.12.30