25. 댓글 수정 with 자바스크립트

요약

list.mustache 파일에 모달 드리커 버튼 이라는 주석으로 수정 버튼을 추가 하였다. 그리고 수정 버튼을 클릭 했을때 새로운 창이 등장하면서 수정 화면이 나오게 하는것이 Modal이다. 해당 Modal 코드는 부트스트랩 Docs 문서에서 검색하면 구현 코드를 볼 수 있다.

모달을 클릭했을때 값들을 가져오는 방법은 부트스트랩 Modal 페이지에서 우측의 리스트 참조하여 Varing modal content 항목에서 자바스크립트를 통해서 가져올수 있었다. 그리고 마지막으로 수정 버튼이 클릭이 되었을때 REST API의 요청이 서버로 전달되도록 하는 코드도 생성 하였다. 해당 코드에서 // 수정 완료 버튼 부터 해당 한다.

1. 수정버튼을 가져온다.

2. 클릭이벤트가 감지가 되면

3. 수정된 댓글을 객체로 만들고

4. 그 객체를 fecth를 통해서 REST API 호출을 한다.

5. 이렇게 요청을 보내면 응답이 돌아오는데 해당 결과를 alert 창을 통해 출력해 준다.

6. 마지막으로 새로고침을 통해 마무리가 된다.

# 댓글 수정 페이지를 만들고, REST API를 호출하여 댓글을 수정 한다.

<26강 보면서 내용 정리 해야함>

 

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>
            </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>