댓글 개수가 많을 때 더보기 버튼을 통해 댓글 펼치기

팁과노하우

2025.02.24 12:59

댓글 개수가 많을 때 더보기 버튼을 통해 댓글 펼치기

미니님a미니홈 1:1 대화하기 오래 전 2025.02.24 12:59 인기
197

4

안녕하세요...

미니님a입니다.

개선 및 제안 게시판 내 해당 요청이 있어 간단하게 팁으로 만들었습니다.

https://rebuilder.co.kr/propose/771

댓글이 5개가 넘지 않는다면, 더보기 버튼이 보이지 않으며,

5개가 넘을 시 총 개수가 함께 노출 됩니다.

만약 스킨으로 적용하고자 한다면 아래 링크를 통해 다운로드 할 수 있습니다.

https://rebuilder.co.kr/userdata/393

기본 / 통합 모두 적용 가능합니다.

1. 기본의 경우 사용하시는 게시판 스킨 폴더의 view_comment.skin.php 파일을 열어주세요

만약 통합이라면 사용하시는 게시판 스킨 폴더 내 cmt/basic/skin.php 파일을 열어주세요

그 이후 똑같이 쓰시면 됩니다.

상단에 css 를 추가 해주세요

단. style.css 에 작성하셔도 무방합니다.


<style>
.hidden-comment { display: none; }
.load-more-btn {
    display: block;
    width: 100%;
    padding: 15px;
    margin: 20px 0;
    background: #f9f9f9;
    border: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.load-more-btn:hover {
    background: #f0f0f0;
}
</style>

위치를 잘 모르겠다 하시면 아래 스샷 참고 하세요

자 다음에는 아래 코드를 찾아주세요


<article id="c_<?php echo $comment_id ?>">

그리고 아래 처럼 변경 합니다.


<article id="c_<?php echo $comment_id ?>" class="<?php if($i >= 5) echo 'hidden-comment'; ?>">

변경 이니 별도로 스샷은 업로드 하지 않습니다.

자 다음에는 아래 코드를 찾아주세요


<?php if ($i == 0) { //댓글이 없다면 ?><p id="bo_vc_empty">등록된 댓글이 없습니다.</p><?php } ?>

그리고 그 아래에 아래 코드를 추가 합니다.


    <?php if($cmt_amt > 5) { ?>
    <button type="button" id="load-more-comments" class="load-more-btn" data-current="5" data-total="<?php echo $cmt_amt; ?>">
        더보기 (5/<?php echo $cmt_amt; ?>)
    </button>
    <?php } ?>

어디인지 모르겠다? 하시면 스샷 참고 하시길 바랍니다.

마지막으로 맨 하단에 보면 스크립트 댓글 열기를 찾아주세요

단. 통합의 경우는 해당 파일이 아닌 통합 스킨폴더 내 view_comment.skin.php 에 아래 내용이 있습니다.


<script>
jQuery(function($) {            
    //댓글열기
    $(".cmt_btn").click(function(e){
        e.preventDefault();
        $(this).toggleClass("cmt_btn_op");
        $("#bo_vc").toggle();
    });
});
</script>

여기에 아래 코드만 추가만 해주시면 됩니다.

 var $comments = $('#bo_vc article');
    var $loadMoreBtn = $('#load-more-comments');
    
    $loadMoreBtn.click(function() {
        var current = parseInt($(this).data('current'));
        var total = parseInt($(this).data('total'));
        var next = current + 5;
        var $btn = $(this);
        
        // 다음 5개의 댓글을 보여줌
        $comments.slice(current, next).removeClass('hidden-comment').fadeIn(400, function() {
            // fadeIn 완료 후 실행
            if (next >= total) {
                $btn.fadeOut(200); // 버튼을 부드럽게 사라지게 함
            }
        });
        
        // 더보기 버튼 상태 업데이트
        $btn.data('current', next);
        $btn.text('더보기 (' + Math.min(next, total) + '/' + total + ')');
    });

어떻게 넣어야 할지 모르겠다면 아래 스샷을 참고 하세요