게시판 프로젝트 - 댓글 삭제 기능 구

- 댓글 API controller, 메서드 추가

CommentApiController

// 댓글 삭제
@DeleteMapping("/posts/{postId}/comments/{id}")
public Long deleteComment(@PathVariable final Long postId, @PathVariable final Long id) {
    return commentService.deleteComment(id);
}

REST API설계 규칙에서 다큐먼트에 해당되는 기능, 특정 게시글 (postid) 에 등록된 모든 댓글 중 PK(id)에 해당되는 댓글을 삭제한다. 삭제 프로세스가 완료되면 삭제된 댓글의 PK (id)를 리턴한다.

 

 

 

-findAllComment() 함수 수정 

<button type="button" onclick="deleteComment(${row.id});" class="btns"><span class="icons icon_del">삭제</span></button>

 

상세페이지의 댓글은 findAllComment() 를 이용해 출력하며, 각 댓글의 삭제 버튼을 클릭했을 때 기능이 작동하도록 클릭 이벤트를 선언해 주어야 한다. view.html의 findAllComment() 에서 commentHtml()에 그리는 삭제 버튼 onclick 이벤트를 추가해준다.

 

-deleteComment() 함수 수정하기

view.html의 JS부분에 다음 함수를 선언한다

// 댓글 삭제
function deleteComment(id) {

if ( !confirm('선택하신 댓글을 삭제할까요?') ) {
return false;
}

const postId = [[ ${post.id} ]];

$.ajax({
url : `/posts/${postId}/comments/${id}`,
type : 'delete',
dataType : 'json',
async : false,
success : function (response) {
alert('삭제되었습니다.');
findAllComment();
},
error : function (request, status, error) {
console.log(error)
}
})
}

commentApiController의 deleteComment()를 호출해 댓글을 삭제 처리한다. 게시글과 마찬가지로delete_yn칼럼의 상태 값을 변경하는 논리 삭제 방식이며, 삭제가 완료된 후 findAllComment() 로 댓글을 다시 조회한다.