🔥 #14 글 삭제 기능

글 삭제는 javascript를 이용할 것이다.
상세페이지에서 삭제 버튼에 id를 넣고, board.js 가 작동한다.

1. < detail.jsp >

.
.
.
<button id="btn-delete" class="btn btn-danger">삭제</button>
.
.
.
<script src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>

여기서 글을 쓴 유저(본인)만 삭제 버튼을 볼 수 있어야 한다. 다른 유저가 글을 삭제하면 안되기 때문이다.

따라서

<c:if test="${board.user.id == principal.user.id}">
        <button id="btn-delete" class="btn btn-danger">삭제</button>
    </c:if>

위처럼 if문을 걸어주면 된다.

2. < board.js >

let index = {
    init: function () {
      .
      .
      .
        $("#btn-delete").on("click", ()=>{
            this.deleteById();
        });
    },
  .
  .
  .
    deleteById: function () {
        var id = $("#id").text();

        $.ajax({
            type: "DELETE",
            url: "/api/board/"+id,
            dataType: "json"
        }).done(function (resp) {
            // 결과가 정상이면 done 실행
            alert("글삭제가 완료되었습니다.");
            location.href = "/";
        }).fail(function (error) {
            // 실패하면 fail 실행
            alert("글삭제를 실패하였습니다.");
            alert(JSON.stringify(error));
        });
    },
}


index.init();

detail.jsp에서 삭제 버튼에 넣어준 id="btn-delete"로 함수를 작동시킨다.
여기서 var id = $("#id").text(); 는 id를 value로 받아오는 것이 아닌 text로 받아오기 때문에 뒤에 .text()를 붙여야 한다.

삭제 이므로 type="DELETE" 이다!!

3. < BoardApiController >

	@DeleteMapping("/api/board/{id}")
    public ResponseDto<Integer> deleteById(@PathVariable int id) {
        boardService.글삭제하기(id);
        return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
    }

@DeleteMapping을 사용하여 주소를 매핑하고, boardService의 글삭제하기 메소드를 호출한다.

4. < BoardService >

    @Transactional
    public void 글삭제하기(int id) {
        System.out.println("글삭제하기 : "+id);
        boardRepository.deleteById(id);
    }

여기에 트랜잭션 어노테이션을 걸어야 한다.
C, U, D 기능은 데이터가 변경되기 때문이다.
즉, 트랜잭션이 종료되면 커밋되고 변경이 감지되어 영속성 컨텍스트가 실제 DB로 flush 된다.
여기 참고