해당 기능이 있는 페이지 : 추천 코스

1. HTML 코드

<div class="course_page_wrap">
    <div class="course_pageContent_box">
        
    </div>
</div>

버튼 요소의 Container를 담당하는 영역에 course_page_wrap 클래스를 적용하고, 버튼의 Element에 해당하는 영역에 course_pageContent_box 클래스를 부여한다.

2. 자바스크립트 코드

function createPageButtons(totalPages){
    buttonBox.innerHTML='';

    const maxButtons = 10;
    const maxPagesPerGroup = 10;

    let startPage = Math.floor((currentPage-1)/maxPagesPerGroup) * maxPagesPerGroup + 1;
    let endPage = startPage + maxButtons - 1;

    if(endPage > totalPages){
        endPage = totalPages;
    }

    if (currentPage > 1){
        const prevButton = document.createElement('button');
        prevButton.className='course_pageBtn course_pageBtn--prev';
        prevButton.textContent = '이전';
        prevButton.addEventListener('click', ()=>{
            currentPage--;
            courseRenderHTML();
        })
        buttonBox.appendChild(prevButton);
    }

    // 페이지 버튼 생성
    for (let i = startPage; i <= endPage; i++){
        const button = document.createElement('button');
        button.className='course_pageBtn';
        button.textContent=i;

        // 현재 페이지와 일치하는 버튼에 클래스 부여
        if (i == currentPage){
            button.classList.add('course_pageBtn--on')
        }

        button.addEventListener('click', () => {
            currentPage=i;
            courseRenderHTML();
        });
        buttonBox.appendChild(button);
    }

    // 다음 버튼 생성
    if (currentPage < totalPages){
        const nextButton = document.createElement('button');
        nextButton.className='course_pageBtn course_pageBtn--next';
        nextButton.textContent='다음';
        nextButton.addEventListener('click', ()=>{
            currentPage++;
            courseRenderHTML();
        })
        buttonBox.appendChild(nextButton);
    }

}

기본적인 개념은 다음과 같다.

1. 현재 페이지, 한 페이지 당 총 컨텐츠의 개수, 한 그룹 당 최대 버튼의 개수, 한 그룹 당 총 페이지 수, 총 페이지 수를 변수로 선언한다.

2. 아래 식을 통해 시작 페이지, 마지막 페이지를 구한다.

시작 페이지 = ((현재 페이지-1)/한 그룹 당 총 페이지 수) * 한 그룹 당 총 페이지 수 + 1

마지막 페이지 = 시작 페이지 + 한 그룹 당 최대 버튼의 개수 - 1

3. 만약 마지막 페이지가 총 페이지보다 커지면 마지막 페이지의 인덱스 값을 총 페이지 인덱스로 할당한다.

4. 만약 현재 페이지 인덱스가 1보다 클 경우 이전 버튼을 생성하여 렌더링한다.

5. 만약 현재 페이지 인덱스가 총 페이지 수보다 작을 경우 다음 버튼을 생성하여 렌더링한다.

2-1. 변수 선언

// 현재 페이지
const itemsPerPage = 10;
let currentPage = 1;
// 페이지 버튼이 로드되는 영역
const buttonBox = document.querySelector('.course_pageContent_box');

한 페이지 당 아이템 개수를 담당하는 변수인 intemsPerPage와 현재 페이지 인덱스를 담당하는 currentPage 변수를 선언한다.

2-2. 페이지네이션 버튼 생성하기

buttonBox.innerHTML='';

버튼을 담는 영역을 초기화한다.

const maxButtons = 10;
const maxPagesPerGroup = 10;

이후 한 그룹의 페이지 당 총 존재하는 페이지 수, 그리고 최대 버튼의 수를 정의한다.

if(endPage > totalPages){
    endPage = totalPages;
}

만약 마지막 페이지가 총 페이지 수보다 크면 마지막 페이지는 총 페이지 인덱스가 되도록 한다.

if (currentPage > 1){
    const prevButton = document.createElement('button');
    prevButton.className='course_pageBtn course_pageBtn--prev';
    prevButton.textContent = '이전';
    prevButton.addEventListener('click', ()=>{
        currentPage--;
        courseRenderHTML();
    })
    buttonBox.appendChild(prevButton);
}

만약에 현재 페이지가 1 이상이면 이전 버튼을 생성한다. 이전 버튼을 눌렀을 경우 현재 페이지 인덱스 값을 1 빼주고, 다시 페이지에 추천 코스 데이터들을 렌더링한다.

이후 버튼을 담는 컨테이너에 생성한 이전 버튼을 추가시킨다.

for (let i = startPage; i <= endPage; i++){
    const button = document.createElement('button');
    button.className='course_pageBtn';
    button.textContent=i;
    // 현재 페이지와 일치하는 버튼에 클래스 부여
    if (i == currentPage){
 button.classList.add('course_pageBtn--on')
    }
    button.addEventListener('click', () => {
        currentPage=i;
        courseRenderHTML();
    });
    buttonBox.appendChild(button);
}

현재 페이지에 대한 버튼을 생성할 때 만약에 현재 페이지 인덱스 번째의 버튼은 배경색이 바뀐 클래스를 삽입시켜준다.

그 다음 각 버튼마다 클릭했을 때 현재 페이지 변수를 각 버튼의 인덱스에 해당하도록 하고, 다시 컨텐츠를 렌더링하도록 이벤트를 준다.

if (currentPage < totalPages){
    const nextButton = document.createElement('button');
    nextButton.className='course_pageBtn course_pageBtn--next';
    nextButton.textContent='다음';
    nextButton.addEventListener('click', ()=>{
        currentPage++;
        courseRenderHTML();
    })
    buttonBox.appendChild(nextButton);
}

만약 현재 페이지 인덱스가 총 페이지 인덱스보다 적으면 다음 버튼을 생성하고 이 버튼을 클릭했을 때 현재 페이지 변수에 1을 더하고, 다시 컨텐츠를 렌더링하도록 이벤트를 준다.