kcscDev/egovframe-template-simple-react-contribution/src/components/EgovPaging.jsx

import React from 'react';

function EgovPaging({pagination, moveToPage}) {
    console.groupCollapsed("EgovPaging");
    console.log("EgovPaging [pagination] : ", pagination);

    let paginationTag = [];

    if (pagination === undefined) {
        paginationTag = "-";
    } else {
        if(pagination.startNum>1){
            // 첫 페이지 이동
            paginationTag.push(<li key="fp" className="btn">
                <button onClick={e => {moveToPage(1)}} className="first">처음</button>
            </li>);

            // 이전 페이지 이동
            const prevPageIndex = pagination.pageIndex-10 < 0?1:(pagination.pageIndex-10)
            paginationTag.push(<li key="pp" className="btn">
                <button onClick={e => {moveToPage(prevPageIndex)}} className="prev">이전</button>
            </li>);
        }
        for (let i = pagination.startNum; i <= pagination.endNum; i++) {
            if (i === pagination.pageIndex) {
                // 현재 페이지
                paginationTag.push(<li key={i}>
                    <button className="cur">{i}</button>
                </li>);
            } else {
                // 다른 페이지
                paginationTag.push(<li key={i}>
                    <button onClick={e => {moveToPage(i)}}>{i}</button>
                </li>);
            }
        }
        if(pagination.endNum!=pagination.maxNum){
            // 다음 페이지 이동
            const nextPageIndex = pagination.pageIndex+10 < pagination.maxNum?pagination.maxNum:(pagination.pageIndex-10)
            paginationTag.push(<li key="np" className="btn">
                <button onClick={e => {moveToPage(nextPageIndex)}} className="next">다음</button>
            </li>);

            // 마지막 페이지 이동
            paginationTag.push(<li key="lp" className="btn">
                <button onClick={e => {moveToPage(pagination.maxNum)}} className="last"></button>
            </li>);
        }
        /*const currentPageNo = pagination.currentPageNo;
        const pageSize = pagination.pageSize;
        const totalRecordCount = pagination.contentCnt;
        const recordCountPerPage = pagination.rowCnt;

        const totalPageCount = Math.ceil(totalRecordCount / recordCountPerPage);
        const currentFirstPage = Math.floor((currentPageNo - 1) / pageSize) * pageSize + 1;
        let currentLastPage = currentFirstPage + pageSize - 1;
        currentLastPage = (currentLastPage > totalPageCount) ? totalPageCount : currentLastPage;

        if (totalPageCount > pageSize) {
            // 첫 페이지 이동
            const firstPageTag = <li key="fp" className="btn">
                <button onClick={e => {moveToPage(1)}} className="first">처음</button></li>;
            paginationTag.push(firstPageTag);

            // 이전 페이지 이동
            const prevPageIndex = (currentPageNo - 1 > 0) ? currentPageNo - 1 : 1;
            const previousPageTag = <li key="pp" className="btn">
                <button onClick={e => {moveToPage(prevPageIndex)}} className="prev">이전</button></li>;
            paginationTag.push(previousPageTag);
        }

        for (let i = currentFirstPage; i <= currentLastPage; i++) {
            if (i === currentPageNo) {
                // 현재 페이지
                const currentPage = <li key={i}>
                    <button className="cur">{i}</button>
                </li>;
                paginationTag.push(currentPage);
            } else {
                // 다른 페이지
                const otherPage = <li key={i}>
                    <button onClick={e => {moveToPage(i)}}>{i}</button>
                </li>;
                console.log("@@@ otherpage : " + otherPage);
                paginationTag.push(otherPage);
            }
        }

        if (totalPageCount > pageSize) {
            // 다음 페이지 이동
            const nextPageIndex = (currentLastPage + 1 < totalPageCount) ? currentLastPage + 1 : totalPageCount;
            const nextPageTag = <li key="np" className="btn">
                <button onClick={e => {moveToPage(nextPageIndex)}} className="next">다음</button>
            </li>;
            paginationTag.push(nextPageTag);
            
            // 마지막 페이지 이동
            const lastPageTag = <li key="lp" className="btn">
                <button onClick={e => {moveToPage(totalPageCount)}} className="last"></button></li>;
            paginationTag.push(lastPageTag);
        }*/
    }
    console.log("paginationTag", paginationTag);
    console.groupEnd("EgovPaging");

    return (
        <div className="paging">
            <ul>
                {paginationTag}
            </ul>
        </div>
    );
}

export default React.memo(EgovPaging);