[SpringBoot] 스프링부트 - 무작정 (REST API)CRUD 게시판 만들기 댓글 삭제 구현 [12-4]

 

 

작성한 댓글을 삭제하는 기능을 구현해 보자!

 

 

들어가며

이번 포스팅에서는 이전까지 구현했던 댓글을 수정하고 작성을 했다면 이번에는 삭제하는 기능을 만들어보도록 하겠습니다.

---

 

사전 준비

만약 게시판 프로젝트를 하시려는 분은 

이전포스팅 따라 해 만들어주시기 바랍니다!

[SpringBoot] 스프링부트 - 무작정 (REST API)CRUD 게시판 만들기 댓글 수정 구현 [12-3]

 

전체 코드는 깃에 올려두었습니다.

깃 이동하기

GitHub - CHISANW/message-board

---

 

구현내용

작성했던 댓글을 삭제하며, 작성한 사용자만 댓글을 삭제할 수 있도록 한다.

구현 예시

 

---

 

 

Repository

CommentRepository.class

@Modifying
@Query("delete from Comment c where c.board.Id=:boardId")
void deleteByBoardId(@Param("boardId") Long boardId);

boardid 값을 통해 삭제하는 메서드를 작성한다. @Modifying은 jqpl쿼리를 사용해 DB의 값을 변경할 때 사용해야 하는 에노테이션이다. 사용하지 않으면 에러가 발생한다.

 

---

 

Service

기존에 작성했던 CommentServiceImpl 클래스에 삭제하는 로직을 추가해 준다.

CommentServiceImpl.class

@Override
public void deleteComment(CommentDto commentDto) {
    String dtoUsername = commentDto.getMemberDto().getUsername();
    String username = memberService.findByUsername(dtoUsername).getUsername();  //로그인한 사용자 이름

    Long commentDtoId = commentDto.getId();
    Optional<Comment> byId = commentRepository.findById(commentDtoId);
    if (byId.isPresent()) {
        Long commentId = byId.get().getId();
        String commentWriter = byId.get().getMember().getUsername();

        if (!username.equals(commentWriter)) {
            throw new CommentException("댓글 지우기 로직 오류");
        }
        commentRepository.deleteById(commentId);
    }else
            throw new NotFindPage_RestException("댓글 지우기 로직 오류: "+commentDtoId+"값이 없음");
}

@Override
public void deleteBoardID(Long boardId) {
    commentRepository.deleteByBoardId(boardId);
}

 

해당 댓글을 지우기 위해서는 board_id로 값을 통해서 댓글을 지우는 게 제일 좋은 방법일거 같아서 선택하게 되었다. (member_Id는 여러 게시글에 동일한 값이 존재할 수 있어 다른 게시글의 댓글까지 지워질 수 있다 생각했다.)

! username.eqals(commentWriter)을 통해서 서버에서 작성자만 삭제할 수 있는 로직을 작성했다.

---

 

Controller

CommnetController.class

@DeleteMapping("/delete/comment")
public ResponseEntity<?> deleteComment(@RequestBody CommentDto commentDto) {
    try {
        commentService.deleteComment(commentDto);
        return ResponseEntity.ok("삭제 성공");
    } catch (CommentException e) {
        e.printStackTrace();
        throw new CommentException("댓글 작성자만이 삭제가능 합니다.");
    } catch (Login_RestException e) {
        throw new Login_RestException("로그인을 하지않음");
    } catch (NotFindPage_RestException e) {
        e.printStackTrace();
        throw new NotFindPage_RestException("해당 댓글이 존재하지 않습니다.");
    }
}

 

컨트롤러를 로직을 작성하고 발생하는 예외를 이전에 작성한 @ExceptionHandler이 처리할 수 있게 해 준다.

---

 

VIEW

이전에 만들어뒀던 삭제버튼 안에 아래와 같은 코드를 추가해 준다. 이전 포스팅에서 말했듯이. 파라미터로 값을 넘겨주지 않으면 3번째 댓글을 삭제하려 해도 첫 번째만 삭제되는 오류를 만나게 된다.

th:onclick="deleteComment([[${comment.id}]])"

 

이제 deleteCommnet 함수를 스크립트 내부에 추가해 줍니다.

  function deleteComment(commentId){
    const comment_id = commentId;
    var login = document.getElementById('loginMember_username');

    if (login !== null){
      login = login.value;
    } else {
      alert("로그인후 이용할수 있습니다.");
      return; // 로그인되어 있지 않으면 함수를 종료합니다.
    }

    var commentConfirm = confirm("삭제하시겠습니까?");
    if (commentConfirm) {
      var dto = {
        "id": comment_id,
        "memberDto": {
          "username": login
        }
      }
      $.ajax({
        url: "/delete/comment",
        method: "delete",
        contentType: "application/json",
        data: JSON.stringify(dto),

        success: function (res) {
          alert("삭제성성공");
          location.reload();
        },
        error: function (xhr) {
          if (xhr.status === 500) {
            var errorMessage = JSON.parse(xhr.responseText);
            $.each(errorMessage,function (key, value){
              if (key==="message")
                alert(value);
            });
          }
        }
      });
    }
  }

 

먼저 사용자가 로그인했는지 확인하고, 확인되면 삭제할지 여부를 묻습니다. 사용자가 삭제를 확인하면 댓글 ID와 사용자 이름을 포함한 DTO를 생성하여 서버로 보냅니다. 성공적으로 삭제되면 페이지를 다시 로드하고, 오류가 발생하면 해당 오류 메시지를 표시합니다.

---

 

실행

삭제 성공 시

상태 코드 200과 함께 해당 댓글이 삭제되는 것을 볼 수 있다.

 

삭제 실패 시

댓글이 존재하지 않을 때 삭제를 하면 해당 상태코드 404와 함께 오류메시지를 보여준다.

 

 

댓글 작성자가 아닌 다른 사용자가 삭제 시 상태코드 500과 함께 오류 메시지를 보여준다.

 

 

 

---

 

다음으로

이번 포스팅까지 해서 댓글 기능을 구현해 봤습니다. CRUD만으로도 충분히 댓글의 기능을 구현해 볼 수 있었습니다. 누구에 도움을 받지 않고 스스로 만들어봤기 때문에 많이 부족한 부분이 있을 수가 있습니다. 부족한 부분은 댓글로 남겨주신단면 감사하겠습니다. 이제 다음 포스팅에는 좋아요 기능을 한번 구현해 보도록 하겠습니다.! 감사합니다!