[Spring] #10. 게시판 만들기 _ 모듈화/댓글 등록버튼

reply.js

let replyService = (function(){
    function add(reply, callback, error){
        $.ajax({
            url: "/reply/new",
            type: "post",
            data: JSON.stringify(reply),
            contentType: "application/json; charset=utf-8", //data에 JSON 작성 시 반드시 contentType 작성
            success: function(result){
                if(callback){
                    callback(result);
                }
            },
            error: function(a, b, c){
                if(error){
                    error(a, b, c);
                }
            }
        });
    }
    function getList(param, callback, error){
        let page = param.page || 1;
        $.ajax({
            url: "/reply/list/" + param.boardNumber + "/" + page,
            success: function(replies){
                if (callback){
                    callback(replies);
                }
            }
        })
    }
    function read(replyNumber, callback, error){
        $.ajax({
            url: "/reply/" + replyNumber,
            type: "get",
            success: function(reply){
                console.log(reply);
            }
        })
    }
    function remove(replyNumber, callback){
        $.ajax({
            url: "/reply/" + replyNumber,
            type: "delete",
            success: function(){
                if(callback){
                    callback();
                }
            }
        })
    }
    function modify(reply, callback, error){
        $.ajax({
            url: "/reply/modify",
            type: "post",
            data: JSON.stringify(reply),
            contentType: "application/json; charset=utf-8",
            success: function(){
                if(callback){
                    callback();
                }
            }
        });
    }
    return {add: add, getList: getList, read: read, remove: remove, modify: modify, timeForToday: timeForToday}
})();

 

read.html

게시글 상세보기에서 댓글 부분에 버튼을 추가하였다.

아래 a태그 버튼을 통하여 버튼을 눌렀을 때에 div가 보이게 하기 위해 style의 display를 none으로 설정하였다.

<ul class="icons">
    <li style="display: block">
        <span class="icon solid fa-envelope"></span>
        <strong>댓글</strong>
    </li>
</ul>
<a href="javascript:void(0)" class="register button primary small" style="width: 100%">댓글 등록</a>
<div style="display: none" class="register-form">
    <div>
        <h4>작성자</h4>
        <input type="text" name="replyWriter" placeholder="Replier">
    </div>
    <div>
        <h4>댓글</h4>
        <textarea rows="6" name="replyContent" placeholder="Reply" style="resize: none"></textarea>
    </div>
    <div style="text-align: right">
        <a href="javascript:void(0)" class="finish button primary small">등록</a>
        <a href="javascript:void(0)" class="cancel button primary small">취소</a>
    </div>
</div>
<ul class="replies"></ul>
<!-- 댓글 목록 --!>

js의 event설정

댓글등록 클릭 -> div보이기

취소버튼 클릭 -> div숨기기

$("a.register").on("click", function(e){
    e.preventDefault();
    $(this).hide();
    $("div.register-form").show();

});

$("a.cancel").on("click", function(e){
    e.preventDefault();
    $("div.register-form").hide();
    $("a.register").show();
});

댓글 등록

$("a.finish").on("click", function(e){
    e.preventDefault();
    let $replyWriter = $("input[name='replyWriter']");
    let $replyContent = $("textarea[name='replyContent']");

    replyService.add({
        replyWriter: $replyWriter.val(),
        replyContent: $replyContent.val(),
        boardNumber: boardNumber
    }, function(){
        //성공했을 때 실행되는 함수
        $("div.register-form").hide();
        $("a.register").show();
        $replyWriter.val("");
        $replyContent.val("");
        //등록 버튼 누른 후 input 창을 비워야 한다.
        getList();
    });
});

function showList(replyDTO){
    let text = "";
    replyDTO.replies.forEach(reply => {
        text += "<li style='display: block' data-reply-number='" + reply.replyNumber + "'>";
        text += "<div style='display: flex; justify-content: space-between;'>";
        text += "<strong style='display:block;'>" + reply.replyWriter + "</strong>";
        text += "<div>";
        text += "<a class='modify-ready " + reply.replyNumber + "' style='cursor: pointer;'>수정</a>"
        text += "<a class='modify " + reply.replyNumber + "' style='display: none; cursor: pointer;'>수정완료</a>"
        text += "&nbsp;&nbsp;<a class='remove' href='" + reply.replyNumber + "'>삭제</a>"
        text += "</div>";
        text += "</div>";
        text += "<div style='display: flex; justify-content: space-between'>";
        text += "<p class='replyContent " + reply.replyNumber + "'>" + reply.replyContent + "</p>";
        text += "<p style='text-align: right;'><strong class='date'>";
        text += replyService.timeForToday(reply.replyRegisterDate == reply.replyUpdateDate ? reply.replyRegisterDate : reply.replyUpdateDate);
        text += "</strong></p>";
        text += "</div>";
        text += "<div class='line'></div>";
        text += "</li>";
    });
    $("ul.replies").html(text);
    showReplyPage(replyDTO.replyCount);
}

$("ul.replies").on("click", "a.remove", function(e){
    e.preventDefault();
    let replyNumber = $(this).attr("href");
    replyService.remove(replyNumber, function(){
        getList();
    });
});

$("ul.replies").on("click", "a.modify-ready", function(){
    if(!check){
        alert("수정중인 댓글이 있습니다.");
        return;
    }
    check = false;
    let replyNumber = this.classList[1];
    $("p." + replyNumber).replaceWith("<textarea class='" + replyNumber + "'>" + $("p." + replyNumber).text() + "</textarea>");
    $(this).next().next().replaceWith("<a class='modify-cancel'>취소</a>")
    $(this).hide();
    $(this).next().show();
});

$("ul.replies").on("click", "a.modify-cancel", function(){
    getList();
});

$("ul.replies").on("click", "a.modify", function(){
    let replyNumber = this.classList[1];
    replyService.modify({
        replyNumber: replyNumber,
        replyContent: $("textarea." + replyNumber).val()
    }, function(){
        getList();
        check = true;
    });
});