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

 

 

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

 

 

들어가며

이전 포스팅까지는 댓글을 작성하는 기능을 구현해 봤습니다. 이번 포스팅에서는 작성한 댓글을 수정하는 기능을 구현해 보도록 하겠습니다.

 

---

 

사전 준비

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

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

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

 

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

깃 이동하기

GitHub - CHISANW/message-board

---

 

구현내용

작성한 댓글을 수정할 수 있으며, 댓글 작성자만 수정할수 있게 한다.

 

구현할 예시 폼

 

모달창으로 댓글 기존에 작성한 내용을 보여주며  수정을 할 수 있도록 할 예정입니다.

---

 

 

Service

댓글 수정 기능은 기존에 Repository에 작성한 것만으로도 충분히 구현이 가능하다 그래서 CommenServicetImpl에 로직만 추가해 주면 된다.

 

CommentServiceImpl.class

@Override
public void updateComment(CommentDto commentDto) {
    Long id = commentDto.getId();
    String username = commentDto.getMemberDto().getUsername();
    Member byUsername = memberService.findByUsername(username);

    Comment comment = commentRepository.findById(id)
            .orElseThrow(() -> new CommentException("댓글 수정시 Id 오류"));

    if (byUsername == null || !comment.getMember().getUsername().equals(byUsername.getUsername())) {
        throw new Login_RestException("사용자 인증 오류");
    }

    comment.setContent(commentDto.getComment());
    comment.setUpdateDateTime(LocalDateTime.now());
    commentRepository.save(comment);
}

• updateCommnet(CommentDto commentDto) : Dto로 댓글의 키와 현재 로그인한 사용자의 정보가 넘어온다. 넘어온 키값으로 댓글을 조회하며, 해당하는 댓글이 없을 때는 CommentException을 던진다. 댓글이 존재하지만 현재 넘어온 사용자 정보와 댓글을 작성한 사용자의 정보가 일치하지 않는다면 사용자 인증 오류예외를 던진다. 올바른 요청이면 댓글의 내용을 변경하며 updateDateTime 필드의 변경한 현재 시간의 값을 넣어준다.

---

 

Controller

다음과 같이 CommentController에 아래의 코드를 추가해 줍니다.

CommentController.class

@PostMapping("/board/comment/update")
public ResponseEntity<?> updateComment(@RequestBody CommentDto commentDto) {
    try {
        commentService.updateComment(commentDto);
        return ResponseEntity.ok("게시물 수정 성공");
    } catch (CommentException e) {
        throw new CommentException("해당 댓글이 존재하지 않습니다.");
    } catch (Login_RestException e) {
        e.printStackTrace();
        throw new Login_RestException("작성자만 수정 할수있습니다.");
    }
}

 

---

 

 

 

VIEW

수정할 때 따로 수정페이지로 넘어가서 수정하지 않고 모달창을 뛰어 페이지를 이동하지 않고 수정할 수 있도록 해보겠습니다.

먼저 수정버튼을 다음과 같이 수정해 줍니다.

<button type="button" th:onclick="openCommentModal([[${comment.id}]])" style="padding: 0;">
	<img src="/img/CommnetModfiy.PNG" style="width: 20px; height: 20px;">
</button>

 

• 타임리프의 템플릿엔진을 사용하여 버튼을 클릭 시에 모달창이 열리며 파라미터로 comment.id값이 넘가가게 됩니다.[[]]를 표현식을 사용하지 않으면 파라미터로 전달되지 않습니다.

패스워드 모달창 밑에 게시글 모달창 코드를 추가해 줍니다.

<div id="commentModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeCommentModal()">&times;</span>
        <label for="edited_comment">댓글 수정:</label>
        <textarea id="edited_comment" rows="5" cols="80"></textarea>
        <button onclick="saveEditedComment()">저장</button>
    </div>
</div>

 

댓글 수정 모달창

 

 

이제 모달창에서 저장을 누르게 되면 작성한 실제 값이 저장되기 위해서 코드를 구현해야 합니다. 저는  jquery의 ajax를 사용하여 구현했습니다.

 

function openCommentModal(commentId) {
    // 선택한 댓글의 내용 가져오기
    if (loginverfiy === true) {
        const commentContent = document.getElementById('comment_content').innerText;
        // 수정할 내용을 모달의 입력 필드에 설정
        document.getElementById('comment_id').value = commentId; // 댓글 ID를 hidden input에 설정
        document.getElementById('edited_comment').value = commentContent;
        // 모달 창 열기
        document.getElementById('commentModal').style.display = 'block';
    } else {
        alert("로그인 후 사용 가능합니다.");
    }
}

// 댓글 수정 모달 창 닫기
function closeCommentModal() {
    document.getElementById('commentModal').style.display = 'none';
}

수정 버튼을 누르면 openCommentModal(commnetId)가 실행되며 파라미타러 commentId값이 넘어오게 됩니다. 넘어온 값을 id가 comment_id 인 <input> 필드에 값을 넣어줍니다.

(타임리프의 반복문을 사용하여 댓글을 보여줄 때 jQuery로. value를 사용하면 첫 번째 댓글의 값만 가져오기 때문에 두 번째 댓글을 수정해도 첫 번째 댓글의 값으로만 수정되어 원하지 않는 결과를 얻게 됩니다. 따라서 수정할 때마다 해당 댓글의 값을 다시 가져와야 합니다.)

 

이제 저장하는 기능을 구현해야 합니다. jquery의 ajax를 사용한 코드를 추가해 줍니다.

function saveEditedComment() {
    const comment_id = document.getElementById('comment_id').value;
    var login = document.getElementById('loginMember_username').value;
    const edit_comment = document.getElementById('edited_comment').value;

    var CommentDto = {
        "id": comment_id,
        "comment": edit_comment,
        "memberDto": {
            "username": login
        }
    };

    $.ajax({
        url: "/board/comment/update",
        method: "post",
        contentType: "application/json",
        data: JSON.stringify(CommentDto),
        success: function(response) {
            alert("댓글 수정 성공");
            closeCommentModal();
            window.location.reload();
        },
        error: function(xhr) {
            const errorMap = JSON.parse(xhr.responseText);
            $.each(errorMap, function(key, value) {
                if (key === "message") {
                    alert(value);
                }
            });
        }
    });
}

 

이 작성한 함수는 수정된 댓글을 서버에 저장하고, 성공 시 페이지를 새 로고침하여 업데이트된 댓글을 보여줍니다. 실패할 경우 오류 메시지를 표시합니다.

 

---

 

실행

수정 성공 시

게시글을 성공하면 "게시글 수정 성공"이라고 값이 넘어오게 됩니다.

(JSON형식으로 파싱 해서 보낼 수 있습니다. 그건 한번 해보셨으면 좋겠습니다.)

데이터베이스에도 변경되며 업데이트한 시간 값도 정상적으로 저장되는 것을 볼 수 있습니다.

 

댓글수정 실패 시

게시글이 존재하지 않을 시에는 500 상태코드와 함께 오류값이 전달됩니다.

 

 

작성자가 아닐 시에는 401 상태코드와 함께 오류값이 전달되는 것을 볼 수 있습니다.

 

전채 실행영상입니다.

---

 

다음으로

이번 포스팅에서는 댓글을 수정하는 기능을 구현해 봤습니다. 아직 부족한 것이 많을 수도 있습니다. 부적한 점은 댓글로 알려주시면 수정해 보도록 해보겠습니다. 다음 포스팅에서는 댓글의 마지막인 삭제 기능을 구현해 보도록 하겠습니다. 감사합니다.!!!