dnssash/theme/rd.laser/skin/board/notice/js/list.js

document.addEventListener('DOMContentLoaded', function() {

    const listBody = document.getElementById('bo_list_body');
    const toggleBtn = document.getElementById('view-toggle-btn1');
    const chkAll = document.getElementById('chkall');
    const loadMoreBtn = document.getElementById('btn-load-more'); // 💡 [추가] 더보기 버튼
    const pagination = document.querySelector('.bo-pagination'); // 💡 [추가] 페이지네이션

    if (!listBody || !toggleBtn) {
        return; // 필수 요소가 없으면 스크립트 중단
    }

    const toggleIcon = toggleBtn.querySelector('i');

    // 초기 뷰 모드는 HTML의 data-view-mode 속성에서 가져옴 (PHP에서 설정됨)
    let currentViewMode = listBody.dataset.viewMode || 'card';

    // 뷰 모드를 설정하고 버튼의 아이콘과 툴팁을 업데이트하는 함수
    function setViewMode(mode) {
        // data-view-mode 속성 변경
        listBody.dataset.viewMode = mode;

        if (mode === 'card') {
            // 현재 카드뷰 -> 다음 행동은 '목록형 보기'
            toggleIcon.className = 'fa fa-bars'; // 목록 아이콘
            toggleBtn.title = '목록형으로 보기';

            // 💡 [추가] 더보기 버튼 보이기, 페이지네이션 숨기기
            if (loadMoreBtn) loadMoreBtn.parentElement.style.display = 'block';
            if (pagination) pagination.style.display = 'none';

        } else { // 'list'
            // 현재 목록뷰 -> 다음 행동은 '카드형 보기'
            toggleIcon.className = 'fa fa-th-large'; // 카드 아이콘
            toggleBtn.title = '카드형으로 보기';

            // 💡 [추가] 더보기 버튼 숨기기, 페이지네이션 보이기
            if (loadMoreBtn) loadMoreBtn.parentElement.style.display = 'none';
            if (pagination) pagination.style.display = 'flex';
        }

        // 쿠키에 저장 (PHP와 연동)
        set_cookie('board_' + g5_bo_table + '_view_mode', mode, 365);
    }

    // 토글 버튼 클릭 이벤트
    toggleBtn.addEventListener('click', function() {
        // 현재 뷰 모드를 확인하고 반대 모드로 전환
        const newMode = (listBody.dataset.viewMode === 'card') ? 'list' : 'card';
        setViewMode(newMode);
    });

    // 페이지 로드 시 초기 상태 설정
    setViewMode(currentViewMode);

    // 체크박스 동기화 및 전체 선택 상태 업데이트
    const listCheckboxes = document.querySelectorAll('input[name="chk_wr_id[]"]');
    const cardCheckboxes = document.querySelectorAll('input[name="chk_wr_id_card[]"]');

    function updateCheckAllState() {
        if (!chkAll) return;

        const total = listCheckboxes.length;
        let checkedCount = 0;

        listCheckboxes.forEach(chk => {
            if (chk.checked) checkedCount++;
        });

        chkAll.checked = (total > 0 && total === checkedCount);
    }

    // 리스트형 체크박스 변경 시
    listCheckboxes.forEach((listChk, index) => {
        listChk.addEventListener('change', function() {
            if (cardCheckboxes[index]) {
                cardCheckboxes[index].checked = this.checked;
            }
            updateCheckAllState();
        });
    });

    // 카드형 체크박스 변경 시
    cardCheckboxes.forEach((cardChk, index) => {
        cardChk.addEventListener('change', function() {
            const listChk = document.getElementById('chk_wr_id_' + index);
            if (listChk) {
                listChk.checked = this.checked;
            }
            updateCheckAllState();
        });
    });

    // 전체 선택 체크박스 클릭 시
    if (chkAll) {
        chkAll.addEventListener('change', function() {
            const isChecked = this.checked;
            listCheckboxes.forEach(chk => chk.checked = isChecked);
            cardCheckboxes.forEach(chk => chk.checked = isChecked);
        });
    }

    // ▼▼▼ [추가] 더보기 버튼 기능 구현 ▼▼▼
    if (loadMoreBtn) {
        loadMoreBtn.addEventListener('click', function() {
            const nextPage = parseInt(this.dataset.page);
            const originalText = this.textContent;

            this.disabled = true;
            this.textContent = '로딩 중...';

            // 현재 URL에서 페이지 파라미터만 변경
            const url = new URL(window.location.href);
            url.searchParams.set('page', nextPage);

            fetch(url)
                .then(response => response.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');

                    // 다음 페이지의 카드 아이템들 가져오기
                    const newItems = doc.querySelectorAll('#bo_list_body .bo-card-item');

                    if (newItems.length > 0) {
                        newItems.forEach(item => {
                            // 💡 [중요] 새로 가져온 아이템의 체크박스 ID 충돌 방지 및 이벤트 연결 필요
                            // 하지만 여기서는 단순 추가만 하고, 체크박스 기능은 복잡해지므로 생략하거나
                            // 필요하다면 추가 로직 구현해야 함. (일단은 추가만)
                            listBody.appendChild(item);
                        });

                        // 다음 페이지 번호 업데이트
                        this.dataset.page = nextPage + 1;
                        this.disabled = false;
                        this.textContent = originalText;

                        // 다음 페이지에 더보기 버튼이 없으면 현재 버튼 숨김
                        const nextLoadMoreBtn = doc.getElementById('btn-load-more');
                        if (!nextLoadMoreBtn) {
                            this.parentElement.style.display = 'none';
                        }
                    } else {
                        this.parentElement.style.display = 'none';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    this.disabled = false;
                    this.textContent = originalText;
                    alert('게시물을 불러오는 중 오류가 발생했습니다.');
                });
        });
    }
    // ▲▲▲ 여기까지 ▲▲▲

    // 노출 상태 토글 기능
    $('#bo_list_body').on('click', '.btn-status-toggle', function(e) {
        e.preventDefault();

        const button = $(this);
        const wr_id = button.data('wr-id');
        const is_on = button.hasClass('status-on');
        const new_status = is_on ? 'hide' : 'show';
        const bo_table = $('input[name="bo_table"]').val();

        button.find('i').removeClass('fa-toggle-on fa-toggle-off').addClass('fa-spinner fa-spin');

        $.ajax({
            url: board_skin_url + '/ajax.status_update.php',
            type: 'POST',
            data: {
                bo_table: bo_table,
                wr_id: wr_id,
                status: new_status
            },
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    button.removeClass('status-on status-off');
                    button.find('i').removeClass('fa-spinner fa-spin');

                    if (data.new_status === 'hidden') {
                        button.addClass('status-off').attr('title', '노출 상태로 변경');
                        button.find('i').addClass('fa-toggle-off');
                    } else {
                        button.addClass('status-on').attr('title', '숨김 상태로 변경');
                        button.find('i').addClass('fa-toggle-on');
                    }
                    location.reload();
                } else {
                    alert(data.error || '상태 변경에 실패했습니다.');
                    button.find('i').removeClass('fa-spinner fa-spin').addClass(is_on ? 'fa-toggle-on' : 'fa-toggle-off');
                }
            },
            error: function() {
                alert('서버와 통신 중 오류가 발생했습니다.');
                button.find('i').removeClass('fa-spinner fa-spin').addClass(is_on ? 'fa-toggle-on' : 'fa-toggle-off');
            }
        });
    });

});