[Blog 프로젝트] 댓글 삭제 기능

detail.html

댓글 DB에 저장되어있는 작성자 이름과 스프링 시큐리티 로그인 정보의 사용자 이름이 같다면 삭제 버튼이 보이도록 설정해준다.

<button th:replyId="${reply.id}" th:onclick="replyDelete(this.getAttribute('replyId'))"
        id="btn-reply-delete" 
        th:if="${reply.user.username.equals(#authentication.name)}" 
        class="badge bg-danger">삭제</button>

Thymeleaf 환경에서 외부 자바스크립트 파일에 선언된 함수를 참조하는 방법을 찾지 못하여서 html파일에 인라인 자바스크립트 코드를 생성하여 동작하도록 생성하였다.

board.js 에 선언되어 있어야 할 스크립트 코드가 html 파일 인라인으로 선언되어 있어 유지보수에 용이하지 못하기 때문에 추후 리팩터링이 필요하다.

<script type="text/javascript" th:inline="javascript">
    let boardId = $.parseJSON('[[ ${board.id} ]]');

    function replyDelete(replyId){
        $.ajax({
            type: "DELETE",
            url: `/api/board/${boardId}/reply/${replyId}`,
            dataType: "json",

        }).done(function (response) {
            // 요청 결과가 정상인 경우
            const status = response.status;

            if (status === 200){
                alert("댓글 삭제가 완료 되었습니다.");
                location.href = ("/board/" + boardId);
            } else {
                alert(response.data);
            }

        }).fail(function (error) {
            // 요청 결과가 비정상인 경우
            alert(JSON.stringify(error));

        });
    }
</script>

“/api/board/{boardId}/reply/{replyId}” 주소로 DELETE 요청을 보낸다.

BoardApiController.java

@DeleteMapping("/api/board/{boardId}/reply/{replyId}")
public ResponseDTO<Integer> replyDelete(@PathVariable int boardId,
                                        @PathVariable int replyId){

    boardService.replyDelete(replyId);
    return new ResponseDTO<>(HttpStatus.OK.value(), 1);
}

댓글 작성자가 아니라도 댓글 삭제 URI를 알아내어 삭제 요청을 보내면 댓글이 삭제될 위험이 존재하기 때문에 백단에서 한번 더 검증을 진행하는 것이 좋을 것 같다.