flextgram 테마의 댓글 추천시 새로고침 없이 즉시 추천이 반영되고 추천수도 표시가 되게 js 로 구현이 되어있습니다. 그런데 댓글 추천 직후 새로고침 없이 추천수를 반영해 주는 부분에서 오류가 있어 잘못된 추천수를 보여주는 것이 발견되어 확인해 보았습니다.
콜백 함수 쪽에 추천수를 표시해 주는 코드에서 기존 추천수와 새롭게 변경된 추천수를 합산하는 부분 때문에 문제가 발생되는 것을 확인했습니다.
/modules/board/skins/rx-flextagram/assets/js/comment-vote.js
// 콜백
function callback(res) {
if(res.error) {
// console.log(el)
appToast(res.message, 'danger')
return
}
var appliedCount = res.voted_count || res.blamed_count
var getVoteCount = Number($(el).find('.app-comment-vote__count').text())
if(appliedCount) {
//var count = getVoteCount + appliedCount
var count = appliedCount
} else if(getVoteCount > -1) {
var count = getVoteCount -1
} else {
var count = getVoteCount + 1
}
$(el).find('.app-comment-vote__count').text(count)
$(el).toggleClass('active')
appToast(res.message)
}
굵게 표시해 드린 부분을 저는 주석처리 하고 해당 코드에서 새롭게 반영된 추천수만 반영되도록 고쳐서 아랫줄에 다시 추가해 주었습니다.
그냥 지우시고 아랫줄 추가하거나 저 처럼 주석처리하고 아랫줄 추가하면 됩니다.
그리고 추천수를 바로 고쳐주어야 하는데 추천,비추천이 아예 없는 경우는 고쳐줄 자리가 존재하지 않아 추가된 추천수가 표시되지 않는 문제가 있습니다.
/modules/board/skins/rx-flextagram/components/comment/comment-vote.html
위 파일이 추천버튼과 추천수를 표시해 주고 있는 코드들이 있습니다.
<load target="../../assets/js/comment-vote.js" />
<div class="app-comment-vote" data-target-srl="{$comment->comment_srl}">
<button class="app-comment-vote__up"|cond="!$comment->getVote() == 1" class="app-comment-vote__up active"|cond="$comment->getVote()" data-type="up" onclick="alCommentVote(this)">
<ion-icon name="thumbs-up-sharp"></ion-icon>
<!--@if($comment->get('voted_count') > 0)-->
<span class="app-comment-vote__count">{$comment->get('voted_count')}</span>
<!--@end-->
</button>
<button class="app-comment-vote__down"|cond="!$comment->getVote()" class="app-comment-vote__down active"|cond="$comment->getVote() == -1" data-type="down" onclick="alCommentVote(this)">
<ion-icon name="thumbs-down-sharp"></ion-icon>
<!--@if($comment->get('blamed_count') > 0)-->
<span class="app-comment-vote__count">{$comment->get('blamed_count')}</span>
<!--@end-->
</button>
</div>
위 원래 코드에서 추천,비추천수가 있을때만 추천수를 표시해 주는 부분의 조건을 제거해 주고 대신 추천이 없을 경우는 0 을 표시해 주고 싶지 않아 추천이 있을 경우만 값을 출력하도록 추가해 주었습니다.
아래와 같이 고치시면 됩니다.
<load target="../../assets/js/comment-vote.js" />
<div class="app-comment-vote" data-target-srl="{$comment->comment_srl}">
<button class="app-comment-vote__up"|cond="!$comment->getVote() == 1" class="app-comment-vote__up active"|cond="$comment->getVote()" data-type="up" onclick="alCommentVote(this)">
<ion-icon name="thumbs-up-sharp"></ion-icon>
<span class="app-comment-vote__count">{$comment->get('voted_count')?:''}</span>
</button>
<button class="app-comment-vote__down"|cond="!$comment->getVote()" class="app-comment-vote__down active"|cond="$comment->getVote() == -1" data-type="down" onclick="alCommentVote(this)">
<ion-icon name="thumbs-down-sharp"></ion-icon>
<span class="app-comment-vote__count">{$comment->get('blamed_count')?:''}</span>
</button>
</div>
이 레이아웃 제작자분께서 만드신 다른 레이아웃 테마의 게시판 스킨에서도 동일한 문제가 있을 것으로 보여집니다. 비슷하게 고치시면 될 것 같네요.
