댓글 답글 기능 구현

어떤 댓글을 DB에서 불러왔을 때 해당 댓글이 댓글인지 답글인지의 2가지 경우가 존재한다.

 

refreshReply함수에서 ROOT_REPLY_ID가 있는지 없는지의 여부에 따라 이를 구분하고, 댓글인 경우 [답글]버튼을 달고, div의 class값으로 해당 댓글의 id를 지정한다.

 

답글인 경우 margin-left에 20px옵션을 주고 해당 댓글의 아래에 답글을 만든다.

 

function refreshReply(postId){
    $.ajax({
        url: '/view/refreshReply',
        datatype: 'json',
        type: 'POST',
        data: {id : postId},
        success: function(result){
            $('#reply-area').empty();
            replyList = result.replyList;
            for (let reply of replyList){
                if (reply.ROOT_REPLY_ID == null){
                    var body = `
                    <div id="reply" class="${reply.ID}">
                    <div id="reply-bar">
                    ${reply.AUTHOR}
                    <a onclick="deleteReply(${reply.ID},${reply.POST_ID})" onmouseover="this.style.cursor='pointer'">X</a>
                    <a onclick="writeChildReply(${reply.ID},${reply.POST_ID})" onmouseover="this.style.cursor='pointer'">[답글]</a>
                    </div>
                    <hr>
                    <div id="reply-body">${reply.CONTENT}</div>
                    </div>
                    `;
                    var replyDiv = $(body);
                    $('#reply-area').append(replyDiv);
                } else{
                    var body = `
                    <div id="reply">
                    <div id="reply-bar">
                    ${reply.AUTHOR}
                    <a onclick="deleteReply(${reply.ID},${reply.POST_ID})" onmouseover="this.style.cursor='pointer'">X</a>
                    </div>
                    <hr>
                    <div id="reply-body">${reply.CONTENT}</div>
                    </div>
                    `;
                    var replyDiv = $(body);
                    replyDiv.css('margin-left','20px');
                    $('.'+reply.ROOT_REPLY_ID).after(replyDiv);
                }
            }
        }
    });
};

 

그리고 [답글] 버튼을 눌렀을 때 해당 댓글의 아래에 답글을 쓰는 form을 만들어 주는 writeChildReply함수를 정의했다.

 

function writeChildReply(rootId,postId){
    $('#child-write-form').remove();
    var form = `
    <div id="child-write-form">
    <div id="reply-info">
        <input type="text" id="reply-writer" placeholder="작성자" value="익명">
        <hr>
        <input type="password" id="reply-password" placeholder="비밀번호" placeholder="제목">
    </div>
    <textarea id="reply-content" placeholder="내용"></textarea>
    <button type="button" class="btn btn-dark" onclick="writeReply(${postId},${rootId})">작성</button>
    </div>
    `
    var formDiv = $(form);
    $('.'+rootId).after(formDiv);
};

 

먼저 기존에 존재하는 답글쓰기 form을 remove를 통해 지워주고 새로운 form을 해당 댓글 바로 아래에 만들어준다.

 

 

적용하면 먼저 댓글은 이런 모습이 된다. 이전의 댓글과 약간 달라졌다. 여기서 [답글] 을 누르면

 

 

이런 식으로 해당 댓글의 아래에 답글 form이 생긴다.