320x100
어떤 댓글을 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이 생긴다.
'Projects > NodeBoard' 카테고리의 다른 글
로그인 유저 글쓰기/댓글쓰기 차별화 (0) | 2021.04.05 |
---|---|
passportjs를 이용한 구글 로그인 (0) | 2021.03.17 |
AJAX로 댓글달기 기능 구현 (5) | 2021.03.06 |
추천하기 기능 구현 (0) | 2021.03.03 |
글 검색 기능과 페이징 개선 (1) | 2021.03.02 |
댓글