전체댓글 '더보기' 기능 추가 (게시판 댓글 전체, 확장/축소 기능)

사이트 활용팁

2025.06.06 09:38

전체댓글 '더보기' 기능 추가 (게시판 댓글 전체, 확장/축소 기능)

관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1일 전 2025.06.06 09:38 새글 기능|댓글| 목록|
2

5

01. 댓글 \\\\\\\'더보기\\\\\\\' 기능 추가
이 업데이트는 게시판 댓글 목록에 \\\\\\\'더보기\\\\\\\' 기능을 추가하여 사용자 경험을 개선하는 내용을 담고 있습니다. 댓글이 일정 개수(5개)를 초과할 경우, 초기에는 일부 댓글만 표시하고, 사용자가 원할 때 추가 댓글을 로드하여 볼 수 있도록 합니다.

02. 주요 변경 사항 및 기능
초기 댓글 숨김: view.comment.php 파일에서 댓글이 5개 이상일 경우, 5번째 댓글부터는 hidden-comment CSS 클래스를 적용하여 초기에 숨깁니다.
\\\\\\\'더보기\\\\\\\' 버튼: 5개 이상의 댓글이 있을 때 \\\\\\\'더보기\\\\\\\' 버튼이 나타납니다. 이 버튼은 현재 표시된 댓글 수와 전체 댓글 수를 함께 보여줍니다 (예: \\\\\\\"더보기 (5/10)\\\\\\\").
버튼 클릭 시 댓글 로드: 사용자가 \\\\\\\'더보기\\\\\\\' 버튼을 클릭하면, 숨겨져 있던 다음 댓글들이 순차적으로 나타나게 됩니다. 이 기능은 JavaScript를 통해 구현됩니다. (제공된 코드에는 \\\\\\\'더보기\\\\\\\' 클릭 시 실제로 댓글을 로드하는 JavaScript 로직은 생략되어 있지만, 구현을 위한 구조를 제공합니다.)
스타일링: style.css 파일에 hidden-comment 클래스와 \\\\\\\'더보기\\\\\\\' 버튼(load-more-btn)에 대한 스타일이 추가되어 숨겨진 댓글과 버튼이 시각적으로 구분되고 사용자 친화적으로 보이도록 합니다.
댓글 열기/닫기 토글 (.cmt_btn): 기존 댓글 영역을 열거나 닫는 토글 기능도 포함되어 있어, 댓글 전체를 보거나 숨길 수 있습니다.
이 기능은 페이지 로딩 속도를 최적화하고, 많은 댓글이 있는 게시물에서도 깔끔하고 효율적인 화면을 제공하는 데 기여합니다.

01. view.comment.php

아래 위치를 찾아서 class="<?php if($i.. 부분 추가

<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="toggle-comments" class="load-more-btn" data-action="expand" data-current="5" data-total="<?php echo $cmt_amt; ?>">
        더보기 (5/<?php echo $cmt_amt; ?>)
    </button>
    <?php } ?>

파일 제일 하단 스크립트 추가

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

    // 댓글 더보기/접기 기능
    const toggleCommentsBtn = $('#toggle-comments');
    const initialDisplayCount = 5; // 초기 표시 댓글 수

    if (toggleCommentsBtn.length) { // 버튼이 존재할 경우에만 작동
        toggleCommentsBtn.on('click', function() {
            const currentAction = $(this).data('action');
            const totalComments = parseInt($(this).data('total'));

            if (currentAction === 'expand') {
                // '더보기' 클릭 시: 모든 숨겨진 댓글 표시
                $('article.hidden-comment').removeClass('hidden-comment').css('display', 'block'); // 'display: block'을 직접 설정하여 확실히 보이게 함
                $(this).text(`간략히 (접기)`).data('action', 'collapse'); // 버튼 텍스트 변경 및 상태 업데이트
            } else {
                // '간략히 (접기)' 클릭 시: 처음 5개 댓글만 남기고 숨기기
                $('article[id^="c_"]').each(function(index) {
                    if (index >= initialDisplayCount) {
                        $(this).addClass('hidden-comment').css('display', 'none'); // 'display: none'을 직접 설정하여 확실히 숨김
                    }
                });
                $(this).text(`더보기 (${initialDisplayCount}/${totalComments})`).data('action', 'expand'); // 버튼 텍스트 변경 및 상태 업데이트
            }
        });
    }

    // 초기 로드 시 5개 이상이면 'hidden-comment' 클래스를 적용하고 숨김
    // 이 부분은 PHP에서 이미 처리하고 있지만, 만약 동적으로 댓글이 추가/제거되는 경우를 대비해
    // jQuery로도 한 번 더 초기 상태를 보장할 수 있습니다.
    $('article[id^="c_"]').each(function(index) {
        if (index >= initialDisplayCount) {
            $(this).addClass('hidden-comment').css('display', 'none');
        }
    });
});
</script>

03. style.css

/* 댓글 더보기 { */
.hidden-comment { display: none; }
.load-more-btn {display: block; width: 100%; padding: 15px; margin: 20px 0; background: #f9f9f9; border: 1px solid #; border-radius:10px; text-align: center; cursor: pointer; transition: all 0.3s ease;}
.load-more-btn:hover {background: #ffffff;}

04. 댓글이 일정 개수(5개)를 2개, 3개, 10개 등으로 수정 하려면 아래 5군데 수정

<?php if($i >= 5) echo 'hidden-comment'; ?>

<?php if($cmt_amt > 5) { ?>

data-current="5" data

더보기 (5/<?php echo $cmt_amt; ?>)

const initialDisplayCount = 5; // 초기 표시 댓글 수

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

.... (중략) ...

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

.... (중략) ...

    const initialDisplayCount = 5; // 초기 표시 댓글 수

PDF

인쇄

공유하고, 소통하다

빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다. ... 자세히보기

또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. ... 접기

주의사항.

본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다. ... 자세히보기

또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.

본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. ... 접기

이전글댓글 추천/비추천2025.06.06

다음글본문 하단, 자세히보기 및 접기 버튼 기능 설명2025.06.06