43. 댓글 삭제하기

detail.jsp 에서 로그인한 사람이 댓글 작성자일 경우에만 삭제버튼 표시, 삭제 버튼은 onclick으로 함수 실행

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp"%>

<div class="container">
	<div class="form-group">
		글 번호 : <span id="id">${board.id }</span> <br> 작성자 : <span id="username">${board.user.username}</span>
	</div>
	<hr>
	<div class="form-group">
		<h3>${board.title }</h3>
	</div>
	<hr>
	<div class="form-group">
		<p>${board.content }</p>
	</div>
	<div class="d-flex justify-content-end">
		<button class="btn btn-secondary" onclick="history.back()">뒤로가기</button>
		<c:if test="${board.user.id == principal.user.id }">
			<button class="btn btn-info" onclick="location.href='/board/${board.id}/updateForm'">수정</button>
			<button id="btn-delete" class="btn btn-danger">삭제</button>
		</c:if>
	</div>
	<hr>
	<div class="card">
		<form>
			<input type="hidden" id="boardId" value="${board.id }">
				<div class="card-body">
					<textarea id="reply-content" class="form-control" rows="2"></textarea>
				</div>
				<div class="card-footer">
					<button type="button" id="btn-reply-save" class="btn btn-primary">등록</button>
				</div>
		</form>
	</div>
	<br>
	<br>
	<div class="card">
		<div class="card-header">댓글 리스트</div>
		<ul id="reply--box" class="list-group">
			<c:forEach var="reply" items="${board.replys }" varStatus="status">
				<li id="reply--${reply.id }" class="list-group-item d-flex justify-content-between">
					<div>${reply.content}</div>
					<div class="d-flex">
						<div class="font-italic">작성자: ${reply.user.username} &nbsp;&nbsp;</div>
						<c:if test="${reply.user.id == principal.user.id }">
						<button class="badge badge-dark" onclick="index.replyDelete(${board.id}, ${reply.id })">삭제</button>
						</c:if>
					</div>
				</li>
			</c:forEach>
		</ul>
	</div>
</div>

<script src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>

board.js에 함수 추가

	replyDelete: function(boardId, replyId) {		
		$.ajax({			
			type: "DELETE",
			url: `/api/board/${boardId}/replyDelete/${replyId}`, //백틱은 js 변수를 문자열로 담기 위함.
			dataType: "json"
		}).done(function(resp){			
			alert("댓글 삭제가 완료되었습니다.");
			location.href=`/board/${boardId}`;
		}).fail(function(error){
			alert(JSON.stringify(error));			
		}); 
	}

BoardApiController에 메서드 추가

	@DeleteMapping("/api/board/{boardId}/replyDelete/{replyId}")
	public ResponseDto<Integer> replyDelete(@PathVariable int replyId) {
		boardService.댓글삭제(replyId);
		return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
	}

BoardService에 메서드 추가

	@Transactional
	public void 댓글삭제(int replyId) {
		replyRepository.deleteById(replyId);		
	}

 

이렇게 해서 강의를 따라가면서 살짝살짝 튜닝된 블로그 프로젝트 완성.

아직 JPA와 스프링 시큐리티에 대한 이해가 부족한 것 같다.

이 부분에 대해 더 찾아서 공부해야 겠다.