6. 블로그 프로젝트

댓글 수정과 삭제 프론트 부분을 구현하였다. 

 

detail.html

<li class="list-group-item">
	<input class="replyID" th:value="${reply.id}" hidden>
	<p>작성자 : <span th:text="${reply.writer}"></span></p>
	<p th:text="${reply.createdDate}"></p>
	<p th:text="${reply.content}"></p>
	<button class="btn btn-light" th:onclick="'replyUpdateClicked(' + ${reply.id} + ')'">수정</button>
	<button class="btn btn-light" th:onclick="'replyDelete(' + ${reply.id} + ')'">삭제</button>
</li>

댓글 하나마다 수정, 삭제 버튼이 존재하는데 이를 구별하는 것이 매우 어려웠다. 댓글 목록 <ul id="replies"> 을 이용하여 replies에 addEventListener를 사용하고 이벤트 핸들러에 매개변수를 받아 target을 이용하려고 했으나, 댓글이 여러개 있을 때 첫번째 댓글을 제외하고는 작동하지 않았다. 그래서 티스토리의 댓글 작동 방식을 개발자 도구를 이용하여 확인한 결과 onclick을 사용하고 있었다. onclick에 replyID를 매개변수로 주면 되겠다 싶어 th:onclick을 이용하여 구현하였다. 

 

main.js

function replyUpdateClicked(replyID) {
    window.open("/update/detail/" + replyID, 'Child', 'width=400, height=400');
}

function replyDelete(replyID) {
    let postID = document.getElementById('postID');

    $.ajax({
        type: "DELETE",
        url: "/api/reply/" + replyID
    }).done(function() {
        window.location.href = "/detail/" + postID.value;
    }).fail(function(error) {
        alert(error);
    })
}

if (replyUpdate !== null) {
    replyUpdate.addEventListener('click', function() {
        let writer = document.getElementById("writer");
        let content = document.getElementById("content");
        let replyID = document.getElementById("replyID");
        let postID = document.getElementById("postID");

        let data = {
            writer: writer.value,
            content: content.value
        }

        $.ajax({
            type: "PUT",
            url: "/api/reply/" + replyID.value,
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8"
        }).done(function() {
            window.opener.location.href = "/detail/" + postID.value;
            window.close();
        }).fail(function(error) {
            alert(error);
        })
    })
}

댓글 수정 버튼을 눌렀을 때 모달 방식으로 수정할 수 있게 만들고자 했으나 모달을 구현하는 것이 CSS를 잘 알아야 했기 때문에 더 간단하게 window.open 방식을 사용하였다. window.open의 두번째 인자는 어떤 방식으로 새 창을 열것인가인데, 댓글 수정을 한 뒤 그 결과에 따라 부모 창에 영향을 줘야 하기 때문에 'Child'를 사용하였다. 자식 창이 열리면 댓글을 수정하고, replyUpdate를 수행한 뒤, window.opener를 통해 부모 창을 새로고침 해줌으로써 댓글 수정이 반영되도록 구현하였다.