kcscDev/egovframe-template-simple-react-contribution/src/pages/admin/boards/List.jsx

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

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 Modal from "react-bootstrap/Modal";
import EgovAdminBoardEdit from "../board/EgovAdminBoardEdit";
import {format} from "date-fns";

function EgovAdminBoardList(props) {
    console.group("EgovAdminBoardList");
    console.log("[Start] EgovAdminBoardList ------------------------------");
    console.log("EgovAdminBoardList [props] : ", props);

    const location = useLocation();
    console.log("EgovAdminBoardList [location] : ", location);

    // eslint-disable-next-line no-unused-vars
    const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || { pageIndex: 1, searchCnd: '0', searchWrd: '' });// 기존 조회에서 접근 했을 시 || 신규로 접근 했을 시
    const [paginationInfo, setPaginationInfo] = useState({});
    const [listTag, setListTag] = useState([]);

    const [show, setShow] = useState(false);
    const [modalBody, setModalBody] = useState();
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const retrieveList = useCallback(() => {
        handleClose();
        console.groupCollapsed("AdminBoardList.retrieveList()");

        const retrieveListURL = '/admin/boards/board-list';

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

            },
            body: JSON.stringify()
        }

        EgovNet.requestFetch(retrieveListURL,
            requestOptions,
            (resp) => {

                let mutListTag = [];
                listTag.push(<p className="no_data" key="0">검색된 결과가 없습니다.</p>); // 게시판 목록 초기값

                // 리스트 항목 구성
                resp.result.boardList.forEach(function (item, index) {
                    if (index === 0) mutListTag = []; // 목록 초기화
                    const finalModifiedDate = item.lastChgDt ? item.lastChgDt : item.frstCrtDt;
                    const formattedDate = finalModifiedDate ? format(finalModifiedDate, "yyyy-MM-dd HH:mm") : "";

                    mutListTag.push(
                        <div className="list_item">
                            <div>{item.bbsId}</div>
                            <div>{item.bbsTitle}</div>
                            <div>{item.frstCrtId}</div>
                            <div>{formattedDate}</div>
                            <div>{item.useYn}</div>
                            <div><button className={"btn btn_blue_h31 px-1"} onClick={()=>{editBoard(item)}}>수정</button></div>
                        </div>
                    );
                });

                setListTag(mutListTag);
                console.log("@@@ resp : ");
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
        console.groupEnd("EgovAdminBoardList.retrieveList()");
    },[]);

    useEffect(() => {
        retrieveList(searchCondition);
    }, []);

    function editBoard(item){
        handleShow();
        if(item != undefined) {
            item.mode = CODE.MODE_MODIFY;
        }
        setModalBody(<EgovAdminBoardEdit props={item} reloadFunction={retrieveList}/>)
    }

    console.log("------------------------------EgovAdminBoardList [End]");
    console.groupEnd("EgovAdminBoardList");
    return (
        <div className="container">
            <div className="c_wrap">
                {/* <!-- Location --> */}
                <div className="location">
                    <ul>
                        <li><Link to={URL.MAIN} className="home">Home</Link></li>
                        <li>사이트관리</li>
                        <li>게시판현황</li>
                        <li>게시판 관리</li>
                    </ul>
                </div>
                {/* <!--// Location --> */}

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

                    <div className="contents BOARD_CREATE_LIST" id="contents">
                        {/* <!-- 본문 --> */}

                        <div className="top_tit">
                            <h1 className="tit_1">게시판 관리</h1>
                        </div>

                        {/* <!-- 게시판목록 --> */}
                        <div className="board_list BRD006">
                            <div className="head">
                                <span>아이디</span>
                                <span>제목</span>
                                <span>작성자</span>
                                <span>최종수정일</span>
                                <span>사용여부</span>
                                <span><button className={"btn btn_blue_h31 px-1"} onClick={()=>{editBoard(undefined)}}>추가</button></span>
                            </div>
                            <div className="result">
                                {listTag}
                            </div>
                        </div>
                        {/* <!--// 게시판목록 --> */}

                        <div className="board_bot">
                        </div>

                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
            <Modal show={show} onHide={handleClose} keyboard={false}>
                {modalBody}
            </Modal>
        </div>








    );
}

export default EgovAdminBoardList;