kcscDev/egovframe-template-simple-react-contribution/src/pages/admin/contents/PopUp.jsx

import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import Switch from '@mui/material/Switch';

import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';
import CODE from 'constants/code';

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


import styled from "styled-components";

const StyledDiv = styled.div`
    .board_btn_area {
        margin: 12px 0px;
    }
`;

const label = { inputProps: { 'aria-label': '사용여부' } };

function PopUp(props) {
    
    const location = useLocation();
    const navigate = useNavigate();

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

    useEffect(function () {
        getList(searchCondition);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    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);
                setListPopup(resp.result.listPopup);
                setPaginationInfo({...resp.result.paginationInfo});
            }
        );
        
    }


    const onChangeActivationSwitch = (e, popupId) => {
        const checked = e.target.checked;
        const requestURL = `/contents/api/popup-manage/activation-switch/${popupId}?checked=${checked}`;

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

        EgovNet.requestFetch(requestURL,
            requestOptions,
            (resp) => {
                console.log("====>>> Schdule delete= ", resp);
                if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
                    navigate(URL.ADMIN__CONTENTS__POP_UP ,{ replace: true });
                } else {
                    navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
                }

            }
        );
    }

    
	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">
                        {/* <!-- 본문 --> */}
                        <StyledDiv>
                            <div className="top_tit">
                                <h1 className="tit_1">팝업 관리</h1>
                            </div>

                            {/* <!-- 버튼영역 --> */}
                            <div className="board_btn_area">
                                <div className="right_col btn1">
                                    <Link to={URL.ADMIN__CONTENTS__POP_UP__CREATE} className="btn btn_blue_h46 w_100">팝업 추가</Link>
                                </div>
                            </div>
                            {/* <!--// 버튼영역 --> */}
                    
                            {/* <!-- 게시판목록 --> */}
                            <div className="board_list BRD008">
                                <div className="head">
                                    <span>번호</span>
                                    <span>제목</span>
                                    <span>기간</span>
                                    <span>사용여부</span>
                                </div>
                                <div className="result">                                    
                                    {/* <!-- case : 데이터 없을때 --> */}
                                    {listPopup.length === 0 &&
                                        <p className="no_data" key="0">검색된 결과가 없습니다.</p>
                                    }                                    
                                    {listPopup.map((it)=>(
                                        <div className='list_item' key={it.seq}>
                                            <div>{it.seq}</div>
                                            <div className="al"><Link to={URL.ADMIN__CONTENTS__POP_UP__MODIFY} state={{popupId: it.seq} } key={it.seq}>{it.popupTitle}</Link></div>
                                            <div>{it.startDate} ~ {it.endDate}</div>
                                            <div>{it.useYn === 'Y' ? <Switch {...label} key={it.seq} onChange={(e) => onChangeActivationSwitch(e, it.seq)} defaultChecked /> : <Switch key={it.seq} onChange={(e) => onChangeActivationSwitch(e, it.seq)} {...label} />}</div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            {/* <!--// 게시판목록 --> */}

                            <div className="board_bot">
                                {/* <!-- Paging --> */}
                                <EgovPagingPaginationInfo pagination={paginationInfo} setPaginationInfo={setPaginationInfo} moveToPage={passedPage => {
                                    getList({ ...searchCondition, pageIndex: passedPage })
                                }} />
                                {/* <!--/ Paging --> */}
                            </div>
                        </StyledDiv>                        
                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}


export default PopUp;