Detail.html

게시글에 저장되어 있는 게시글 작성 유저네임과 시프링 시큐리티 세션에 저장되어 있는 유저네임이 같다면 수정과 삭제 버튼이 보이도록 생성해줍니다.

<div th:if="${board.user.username.equals(#authentication.name)}">
    <button th:onclick="|location.href = '@{/board/{id}/updateForm(id=${board.id})}'|" 
            class="btn btn-warning">수정</button>
    <button id="btn-delete" class="btn btn-danger">삭제</button>
</div>

Board.js

ajax 통신을 하기 위한 js 코드를 작성해줍니다.

“/api/board/{boardId}" 로 DELETE 요청을 보내겠습니다.

deleteById: function () {

    $.ajax({
        type: "DELETE",
        url: "/api/board/" + boardId,
        dataType: "json",

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

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

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

    });
},

BoardApiController.java

위의 요청에 응답하는 컨트롤러 메서드를 생성해줍니다.

@DeleteMapping("/api/board/{id}")
public ResponseDTO<Integer> delete(@PathVariable int id){
    boardService.boardDelete(id);
    return new ResponseDTO<>(HttpStatus.OK.value(), 1);
}

BoardService.java

실제 DB관련 수정은 해당 메서드에서 실행되게 됩니다.

@Transactional
public void boardDelete(int id) {
    boardRepository.deleteById(id);
}