<?php

if (!defined('_GNUBOARD_')) exit;

// 인기글 추출

function latest_popular($rows=10, $subject_len=40, $term='', $options='', $page=1)

{

    global $g5;

    switch($term){

        case '일간':

            $term_time = date("Y-m-d H:i:s", G5_SERVER_TIME-3600*24);

            break;

        case '주간':

            $term_time = date("Y-m-d H:i:s", G5_SERVER_TIME-3600*24*7);

            break;

        default:

            $term_time = date("Y-m-d H:i:s", G5_SERVER_TIME-3600*24);

            break;

    }

    $list = array();

    $offset = ($page - 1) * $rows;

    // 전체 게시판에서 인기글 추출

    $sql_between = " a.bn_datetime between '$term_time' and '".G5_TIME_YMDHIS."' ";

    $sql_common = " from {$g5['board_new_table']} a, {$g5['board_table']} b

                    where a.bo_table = b.bo_table and b.bo_use_search = 1

                    and a.wr_id = a.wr_parent and {$sql_between} ";

    $sql_order = " order by a.bn_datetime desc ";

    // 게시물 수를 세기 위한 쿼리

    $sql = " select count(*) as cnt {$sql_common} ";

    $row = sql_fetch($sql);

    $total_count = $row['cnt'];

    if($total_count > 0){

        // 게시물 데이터를 가져오기 위한 쿼리

        $sql = " select a.*, b.bo_subject {$sql_common} {$sql_order} limit {$offset}, {$rows} ";

        $result = sql_query($sql);

        $sql2 = "";

        for ($i=0; $row = sql_fetch_array($result); $i++){

            $tmp_write_table = $g5['write_prefix'].$row['bo_table'];

            $bo_table = $row['bo_table'];

            if($i > 0)

                $sql2 .= " union ";

            $sql2 .= "(select '{$bo_table}' as bo_table, wr_id, wr_subject, wr_hit, wr_good, wr_nogood

                      from {$tmp_write_table} where wr_is_comment = 0

                      and wr_datetime between '{$term_time}' and '".G5_TIME_YMDHIS."') ";

        }

        // 조건에 따른 정렬

        if ($options === 'wr_hit desc') {

            $sql2 .= " order by wr_hit desc limit {$offset}, {$rows}";

        } else {

            $sql2 .= " order by GREATEST(wr_good, wr_nogood) desc limit {$offset}, {$rows}";

        }

        $result2 = sql_query($sql2);

        for ($i=0; $row2 = sql_fetch_array($result2); $i++){

            $list[$i]['href'] = G5_BBS_URL.'/board.php?bo_table='.$row2['bo_table'].'&wr_id='.$row2['wr_id'];

            $list[$i]['subject'] = $row2['wr_subject'];

        }

    }

    ob_start();

    ?>

    <style type="text/css">

    .lt_full {position:relative;float:left;padding-bottom:10px;width:100%;height:135px;border-bottom:1px solid #e9e9e9}

    .lt2 {position:relative;float:left;padding-bottom:10px;width:354px;}

    .lt2 ul {margin:0 0 0 0;padding:0;list-style:none}

    .lt2 li {padding:0}

    /* 반응형 스타일 추가 */

    @media (max-width: 768px) {

        .lt2 {width: 48%;} /* 태블릿에서 두 개 열 */

    }

    @media (max-width: 480px) {

        .lt2 {width: 100%;} /* 모바일에서 한 개 열 */

    }

    </style>

    <div class="lt_full">

    <div class="lt2">

        <ul>

        <?php for ($i=0; $i<count($list); $i++) {  ?>

            <li>

                <?php

                echo "<a href=\"".$list[$i]['href']."\">";

                    echo "<img src='".G5_URL."/img/num_".($i+1).".gif'> ";

                    echo "<strong>".$list[$i]['subject']."</strong>";

                if ($list[$i]['comment_cnt'])

                    echo $list[$i]['comment_cnt'];

                echo "</a>";

                ?>

            </li>

        <?php

            if (($i+1)%($rows/2)==0) echo "</ul></div><div class='lt2'><ul>";

            }

        ?>

        <?php if (count($list) == 0) { // 게시물이 없을 때 ?>

        <li>게시물이 없습니다.</li>

        <?php } ?>

        </ul>

    </div>

    </div>

    <?php

    $content = ob_get_contents();

    ob_end_clean();

    // 페이지네이션 처리

    $total_pages = ceil($total_count / $rows);

    $pagination = '<div class="pagination">';

    for ($i = 1; $i <= $total_pages; $i++) {

        $active_class = ($i == $page) ? 'active' : '';

        $pagination .= '<a href="#" class="page-link ' . $active_class . '" data-page="' . $i . '">' . $i . '</a> ';

    }

    $pagination .= '</div>';

    return $content . $pagination;

}

?>

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>인기글</title>

<style>

.tab_list {

    margin-bottom: 10px; /* 탭 콘텐츠와 겹치지 않도록 여백 추가 */

    background-color: white; /* 탭 배경색을 흰색으로 설정 */

}

.tab_list ul {

    position: relative;

    margin: 0;

    padding: 0;

    border-bottom: 1px solid #ccc;

    font-family: Tahoma, Sans-serif;

    font-size: 12px;

    list-style: none;

    display: flex;

    flex-wrap: nowrap; /* 탭이 한 줄로 나오도록 설정 */

    background-color: white; /* 탭 배경색을 흰색으로 설정 */

}

.tab_list ul:after {

    display: block;

    clear: both;

    content: "";

}

.tab_list li {

    float: left;

    margin: 0; /* 탭 사이의 마진 제거 */

}

.tab_list li a {

    float: left;

    position: relative;

    border: 1px solid #ccc;

    border-bottom: none; /* 비활성화된 탭의 하단 경계선 제거 */

    background: transparent;

    color: #333; /* 비활성화된 탭의 텍스트 색상 */

    text-decoration: none;

    white-space: nowrap; /* 텍스트가 한 줄로 나오도록 설정 */

    overflow: hidden;

    text-overflow: ellipsis; /* 텍스트가 길 경우 생략 기호(...) 추가 */

    font-weight: normal; /* 비활성화된 탭의 텍스트는 보통 */

}

.tab_list li.active a {

    color: #000; /* 활성화된 탭의 텍스트 색상 */

    font-weight: bold; /* 활성화된 탭의 텍스트는 bold */

    border-bottom: 1px solid #fff; /* 활성화된 탭의 하단 경계선 설정 */

}

.tab_list li a span {

    display: inline-block;

    padding: 6px 25px;

    letter-spacing: -1px;

    cursor: pointer;

}

.tab_list li ul {

    display: none;

    position: absolute;

    top: 40px;

    left: 0;

    width: 100%;

    margin: 0;

    padding: 0;

    border: 0;

    list-style: none;

}

.tab_list li li {

    float: none;

    position: relative;

    margin: 0 0 8px 8px;

    color: #999;

}

.tab_list li li a {

    float: none;

    margin: 0;

    padding: 0;

    border: 0 !important;

    background: transparent;

    font-weight: normal;

    color: #333 !important;

    letter-spacing: normal;

}

.tab_list li ul {

    margin-top: -20px;

    display: block;

}

/* 반응형 스타일 추가 */

@media (max-width: 768px) {

    .tab_list ul {

        display: block;

    }

    .tab_list li {

        width: 48%;

        margin: 0; /* 태블릿에서 두 개 열 */

    }

}

@media (max-width: 480px) {

    .tab_list ul {

        display: flex;

        flex-wrap: nowrap; /* 모바일에서도 가로 정렬 유지 */

        overflow-x: auto; /* 탭이 한 줄로 나열되도록 스크롤 가능 */

    }

    .tab_list li {

        width: auto;

        margin: 0;

    }

    .tab_list li ul {

        top: auto;

        left: auto;

        position: relative;

    }

    .tab-content {

        display: flex;

        flex-wrap: wrap;

        background-color: white; /* 탭 콘텐츠 배경색을 흰색으로 설정 */

    }

    .tab-content .lt2 {

        width: 50%; /* 왼쪽과 오른쪽에 절반씩 할당 */

        box-sizing: border-box;

        padding: 0 5px; /* 좌우 여백 추가 */

    }

    .tab-content .lt2 ul {

        display: flex;

        flex-direction: column;

    }

    .tab-content .lt2 ul li {

        margin-bottom: 10px; /* 게시물 사이 여백 추가 */

    }

}

.tab-content {

    display: none; /* 기본적으로 콘텐츠를 숨깁니다 */

    padding: 20px;

    border: 1px solid #ccc;

    background: white; /* 탭 콘텐츠 배경색을 흰색으로 설정 */

}

.tab-content.active {

    display: block; /* 활성화된 탭의 콘텐츠만 보입니다 */

    border: none; /* 테두리 제거 */

    padding: 0; /* 여백 제거 */

    background: white; /* 배경색 제거 */

}

.pagination {

    text-align: center;

    margin-top: 10px;

    background-color: white; /* 페이지네이션 배경색을 흰색으로 설정 */

}

.pagination .page-link {

    display: inline-block;

    padding: 5px 10px;

    margin: 0 2px;

    border: 1px solid #ccc;

    color: #333;

    text-decoration: none;

}

.pagination .page-link:hover {

    background: #eee;

}

.pagination .page-link.active {

    background: #333;

    color: #fff;

}

</style>

</head>

<body>

<div class="tab_list m1">

<ul>

<li class="m1 active">

<a href="#tab1"><span>일간 조회수</span></a>

</li>

<li class="m2">

<a href="#tab2"><span>일간 추천수</span></a>

</li>

<li class="m3">

<a href="#tab3"><span>주간 조회수</span></a>

</li>

<li class="m4">

<a href="#tab4"><span>주간 추천수</span></a>

</li>

</ul>

</div>

<div id="tab1" class="tab-content active">

  <?php echo latest_popular(10, 40, '일간', 'wr_hit desc', 1); ?>

</div>

<div id="tab2" class="tab-content">

  <?php echo latest_popular(10, 40, '일간', 'GREATEST(wr_good, wr_nogood) desc', 1); ?>

</div>

<div id="tab3" class="tab-content">

  <?php echo latest_popular(10, 40, '주간', 'wr_hit desc', 1); ?>

</div>

<div id="tab4" class="tab-content">

  <?php echo latest_popular(10, 40, '주간', 'GREATEST(wr_good, wr_nogood) desc', 1); ?>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type="text/javascript">

jQuery(function($){

    var tab = $('.tab_list');

    tab.removeClass('js_off');

    function onSelectTab(){

        var t = $(this);

        var target = $(t.attr('href'));

        $('.tab-content').removeClass('active'); // 모든 탭 콘텐츠를 숨깁니다

        target.addClass('active'); // 선택된 탭 콘텐츠만 보이게 합니다

        $('.tab_list ul li').removeClass('active'); // 모든 탭을 비활성화합니다

        t.parent().addClass('active'); // 선택된 탭을 활성화합니다

        return false;

    }

    tab.find('>ul>li>a').click(onSelectTab).focus(onSelectTab);

    $('.tab_list ul li:first-child a').click(); // 첫 번째 탭을 기본으로 활성화합니다

    $(document).on('click', '.page-link', function(e) {

        e.preventDefault();

        var page = $(this).data('page');

        var tabContent = $(this).closest('.tab-content');

        var term = tabContent.attr('id') === 'tab1' || tabContent.attr('id') === 'tab2' ? '일간' : '주간';

        var options = tabContent.attr('id') === 'tab1' || tabContent.attr('id') === 'tab3' ? 'wr_hit desc' : 'GREATEST(wr_good, wr_nogood) desc';

        $.ajax({

            url: window.location.href, // 현재 페이지 URL로 요청

            type: 'GET',

            data: {

                rows: 10,

                subject_len: 40,

                term: term,

                options: options,

                page: page,

                ajax: true // ajax 요청을 구분하기 위해 추가

            },

            success: function(data) {

                var newContent = $(data).find('#' + tabContent.attr('id')).html();

                tabContent.html(newContent);

            }

        });

    });

});

</script>

<?php

// Ajax 요청을 처리

if(isset($_GET['ajax']) && $_GET['ajax'] == true) {

    $rows = $_GET['rows'];

    $subject_len = $_GET['subject_len'];

    $term = $_GET['term'];

    $options = $_GET['options'];

    $page = $_GET['page'];

    echo latest_popular($rows, $subject_len, $term, $options, $page);

    exit;

}

?>

</body>

</html>

이건 그누보드에 올라온 인기글관련 php파일을 수정한 것입니다..

한 탭에서 10개의 게시물이 넘어가면 10개당 1페이지씩 증가하도록 페이지네이션 기능을 넣었습니다

근데 문제는 페이지는 잘 증가하는데 해당 페이지를 클릭해도 1페이지의 게시물만 보입니다

(15개의 게시물이 있다면 2페이지를 누르면 11~15까지의 게시물이 나와야하는데 여전히 1~10까지의 게시물이 나타납니다)

그렇다고 2페이지의 페이지네이션자체가 문젠지 알아보려고 

<div id="tab1" class="tab-content active">

  <?php echo latest_popular(10, 40, '일간', 'wr_hit desc', 1); ?>

</div>

<div id="tab2" class="tab-content">

  <?php echo latest_popular(10, 40, '일간', 'GREATEST(wr_good, wr_nogood) desc', 1); ?>

</div>

<div id="tab3" class="tab-content">

  <?php echo latest_popular(10, 40, '주간', 'wr_hit desc', 1); ?>

</div>

<div id="tab4" class="tab-content">

  <?php echo latest_popular(10, 40, '주간', 'GREATEST(wr_good, wr_nogood) desc', 1); ?>

</div>

이 코드에서 1을 2로 바꿔보았습니다(페이지 번호입니다)

만약 15개의 게시물이 있다면 이경우엔 1페이지를 누르든 2페이지를 누르든 2페이지에 해당하는 게시물(11~15번)만 나타납니다

ajax에서 해당 페이지를 클릭할때 해당 페이지에 해당하는 게시물들을 가져오는 부분에 오류가 있는 거같은데 도움 주실 분 있으신가요ㅜㅜ