kcscDev/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus.jsx

import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';

import * as EgovNet from 'api/egovFetch';

import URL from 'constants/url';

import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
import EgovPagingPaginationInfo from 'components/EgovPagingPaginationInfo';

function ProgressStatus(props) {

    const location = useLocation();

    const [listItem, setListItem] = useState([]);
    const [paginationInfo, setPaginationInfo] = useState({});
    const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || { pageIndex: 1, searchCnd: '0', searchWrd: '' });

    const requestOptions = {
        method: "GET",
        headers: {
            'Content-type': 'application/json'
        }
    }

    const getList = (searchCondition) => {  
        
        EgovNet.requestFetch(`/contents/api/popup-manage/list?page=${searchCondition.pageIndex-1}&size=10&sort=popupSeq,desc`,
            requestOptions,
            function (resp) {
                console.log('%o', resp);
                setListItem(resp.result.listPopup);
                setPaginationInfo({...resp.result.paginationInfo});
            }
        );
        
    }

    const Location = React.memo(function Location() {
        return (
            <div className="location">
                <ul>
                    <li><Link to={URL.MAIN} className="home">Home</Link></li>
                    <li><Link to={URL.ADMIN}>사이트 관리</Link></li>
                    <li>위원회 관리</li>
                    <li>진행현황 관리</li>
                </ul>
            </div>
        )
    });

    return (
        <div className="container">
             <div className="c_wrap">
                {/* <!-- Location --> */}
                <Location />
                {/* <!--// Location --> */}

                <div className="layout">
                    {/* <!-- Navigation --> */}
                    <EgovLeftNav></EgovLeftNav>
                    {/* <!--// Navigation --> */}

                    <div className="contents " id="contents">
                        {/* <!-- 본문 --> */}
                        <div className="top_tit">
                            <h1 className="tit_1">진행현황 관리</h1>
                        </div>

                        {/* <!-- 게시판목록 --> */}
                        <div className="board_list BRD008">
                                <div className="head">
                                    <span>번호</span>
                                    <span>제목</span>
                                    <span>기간</span>
                                    <span>사용여부</span>
                                </div>
                                <div className="result">                                    
                                    {/* <!-- case : 데이터 없을때 --> */}
                                    {listItem.length === 0 &&
                                        <p className="no_data" key="0">검색된 결과가 없습니다.</p>
                                    }                                    
                                    {listItem.map((it)=>(
                                        <div className='list_item' key={it.seq}>
                                            <div>{it.number}</div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            {/* <!--// 게시판목록 --> */}



                            

                            {/* <!-- Paging --> */}
                            <div className="board-bot">
                                <div></div>
                                <EgovPagingPaginationInfo pagination={paginationInfo} setPaginationInfo={setPaginationInfo} moveToPage={passedPage => {
                                    getList({ ...searchCondition, pageIndex: passedPage })
                                }} />
                                <div className="right_col btn1">
                                    <Link to={URL.ADMIN__CONTENTS__POP_UP__CREATE} className="btn btn_blue_h46 w_100">등록</Link>
                                </div>
                                
                            </div>
                            {/* <!--/ Paging --> */}
                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ProgressStatus;