26. 댓글 삭제 with JavaScript

(재 정리 필요)

# 요약

1. 삭제 버튼을 추가 하였다.

삭제할 대상의 id를 같이 물려주기 위해서 data-comment-id="{{id}}" 속성을 함께 담아 주었고, 댓글이 여러개가 생성되어 삭제 버튼이 여러개가 생성되었을 수 있기 때문에 comment-delete-btn 이라는 class를 같이 추가 하였다.

comment-delete-btn이 값을 가지고 javascript를 통해서 document.querySelectorAll(".comment-delete-btn");를 통해서 여러개의 버튼을 가지고 왔고, 그 버튼을 처리하기 위해서 반복문을 돌려서 각 버튼의 대한 클릭 이벤트를 등록 하였다.

발생 이벤트된 버튼을 찾아서 그 버튼에서 댓글 id를 가져왔고, 그 아이디를 가지고 fetrch를 사용하여 REST API 삭제 요청을 보냈다. 

                <!-- 댓글 삭제 버튼 -->
                <button type="button"
                        class="btn btn-sm btn-outline-danger comment-delete-btn"
                        data-comment-id="{{id}}">삭제
                </button>
            </div>

2. 문자열을 만들때 백틱을 사용하여 문자열 안에 어떤 변수 값을 삽입하는 방법을 사용 하였다.

3. 새로고침을 하는것이 아니라 문서 상에서 직접 대상을 삭제 할 수도 있었다.

# REST API를 호출하여 댓글을 삭제한다.

 

# 댓글 삭제 버튼을 추가하고, 클릭 이벤트를 감지를 해서 댓글 삭제 요청을 REST API로 보내는것 까지 진행을 한다.

list.mustache 파일의 전체 소스코드

<div id="comments-list">
    {{#commentDtos}}
        <div class="card m-2" id="comments-{{id}}">
            <div class="card-header">
                {{nickname}}
                <!-- 모달 트리거 버튼 -->
                <button type="button"
                        class="btn btn-sm btn-outline-primary"
                        data-bs-toggle="modal"
                        data-bs-target="#comment-edit-modal"
                        data-bs-id="{{id}}"
                        data-bs-nickname="{{nickname}}"
                        data-bs-body="{{body}}"
                        data-bs-article-id="{{articleId}}">수정
                </button>
                <!-- 댓글 삭제 버튼 -->
                <button type="button"
                        class="btn btn-sm btn-outline-danger comment-delete-btn"
                        data-comment-id="{{id}}">삭제
                </button>
            </div>
            <div class="card-body">
                {{body}}
            </div>
        </div>
    {{/commentDtos}}
</div>


<!-- Modal -->
<div class="modal fade" id="comment-edit-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">댓글 수정</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 댓글 작성 폼 -->
                <form>
                    <!-- 닉네임 입력-->
                    <div class="bm-3">
                        <label class="form-label">닉네임</label>
                        <input class="form-control form-control-sm" id="edit-comment-nickname">
                    </div>

                    <!-- 댓글 본문 입력 -->
                    <div class="mb-3">
                        <label class="form-label">댓글 내용</label>
                        <textarea class="form-control form-control-sm" rows="3" id="edit-comment-body"></textarea>
                    </div>

                    <!-- 히든 인풋 -->
                    <input type="hidden" id="edit-comment-id">
                    <input type="hidden" id="edit-comment-article-id">

                    <!-- 전송 버튼 -->
                    <button type="button" class="btn btn-outline-primary btn-sm" id="comment-update-btn">수정 완료</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 모달 이벤트 처리 -->
<script>
{
    // 모달 요소 선택
    const commentEditModal = document.querySelector("#comment-edit-modal");

    // 모달 이벤트 감지
    commentEditModal.addEventListener("show.bs.modal", function(event) {
        // 트리거 버튼 선택
        const triggerBtn = event.relatedTarget;

        // 데이터 가져오기
        const id = triggerBtn.getAttribute("data-bs-id");
        const nickname = triggerBtn.getAttribute("data-bs-nickname");
        const body = triggerBtn.getAttribute("data-bs-body");
        const articleId = triggerBtn.getAttribute("data-bs-article-id");

        // 데이터 반영
        document.querySelector("#edit-comment-nickname").value = nickname;
        document.querySelector("#edit-comment-body").value = body;
        document.querySelector("#edit-comment-id").value = id;
        document.querySelector("#edit-comment-article-id").value = articleId;
    });

{

}
    // 수정 완료 버튼
    const commentUpdateBtn = document.querySelector("#comment-update-btn");

    // 클릭 이벤트 감지 및 처리
    commentUpdateBtn.addEventListener("click",function() {
        // 수정 객체 댓글을 생성
        const comment = {
            id: document.querySelector("#edit-comment-id").value,
            nickname: document.querySelector("#edit-comment-nickname").value,
            body: document.querySelector("#edit-comment-body").value,
            article_id: document.querySelector("#edit-comment-article-id").value
        };

        console.log(comment);

        // 수정 REST API 호출 - fetch()
        const url = "/api/comments/"+comment.id;
        fetch(url, {
            method: "PATCH",            // PATCH 요청
            body: JSON.stringify(comment), // 수정된 댓글 객체를 JSON 으로 전달
            headers: {
                "Content-Type": "application/json"
        }
        }).then(response => {
            // http 응답 코드에 따른 메세지 출력
                const msg = (response.ok) ? "댓글 수정이 완료 되었습니다." : "댓글 수정 실패...!";
                alert(msg);
            // 현재 페이지를 새로 고침
            window.location.reload();
        });
    });
}



</script>

<!-- 댓글 삭제 -->
<script>
{
    // 삭제 버튼 선택 (해당 값을 변수로 가져와야 한다.)
    const commentDeleteBtns = document.querySelectorAll(".comment-delete-btn"); // id 값이 아닌 class 값을 가져올때는 .을 찍고 값을 가져오면 된다.

    // 삭제 버튼 이벤트를 처리
    commentDeleteBtns.forEach(btn => {
        // 각 버튼의 이벤트 처리를 등록한다.
        btn.addEventListener("click", (event) => {
            // 이벤트 발생 요소를 선택
            const commentDeleteBtn = event.srcElement;

            // 삭제 댓글 id 가져오기
            const commentId = commentDeleteBtn.getAttribute("data-comment-id");
            console.log(`삭제 버튼 클릭: ${commentId}번 댓글`); // 오른쪽 코드와 같은 내용이다. "삭제 버튼 클릭: " + commentId + "번 댓글";


            // 삭제 API 호출 및 처리
            // 해당 url 값은 CommentApiController 파일의 // 댓글 삭제 내용을 실행 한다.
            const url = `/api/comments/${commentId}`; // 백틱: 숫자 1번 왼쪽 ~ ``을 사용한다.
            fetch(url, {
                method: "DELETE"
            }).then(response => {
                // 댓글 삭제 실패 처리
                if (!response.ok) {
                    alert("댓글 삭제 실패..!");
                    return;
                }

                // 삭제 성공 시, 댓글을 화면에서 지움!
                const target = document.querySelector(`#comments-${commentId}`);
                target.remove();
            });
        });
    });
}
</script>