kcscDev/egovframe-template-simple-react-contribution/src/pages/admin/committee/Schedules/Detail.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 CODE from 'constants/code';

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

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

    const navigate = useNavigate();
    const location = useLocation();
    console.log("EgovAdminScheduleDetail [location] : ", location);

    const [scheduleDetail, setScheduleDetail] = useState({});
    const [boardAttachFiles, setBoardAttachFiles] = useState();
    const [user, setUser] = useState({});
    
    const retrieveDetail = () => {
        
        const retrieveDetailURL = `/schedule/${location.state?.schdulId}`;
        const requestOptions = {
            method: "GET",
            headers: {
                'Content-type': 'application/json',
            }
        }
        EgovNet.requestFetch(retrieveDetailURL,
            requestOptions,
            function (resp) {
                /**
                 * 		dto.put("evtSeq", tnCmtEvent.getEvtSeq());			// sequence
		dto.put("divMeet", tnCmtEvent.getEvtType());		// 구분
		dto.put("upCommittee", tnCmtEvent.getUpCmtSeq());	// 심의위원회 상위 코드 번호
		dto.put("committee", tnCmtEvent.getCmtSeq());		// 심의위원회 하위 코드 번호
		dto.put("title", tnCmtEvent.getEvtTitle());			// 제목
		dto.put("location", tnCmtEvent.getEvtLocation());	// 장소
		dto.put("contents", tnCmtEvent.getEvtContents());	// 내용
		dto.put("startDate", tnCmtEvent.getEvtStartDt());	// 날짜/시간의 시작 일시
		dto.put("endDate", tnCmtEvent.getEvtEndDt());		// 날짜/시간의 종료 일시
                 */
                setScheduleDetail(resp.result);
            }
        );
    }



    const onClickDeleteSchedule = (schdulId) => {
        const deleteBoardURL = `/schedule/${schdulId}`;

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

        EgovNet.requestFetch(deleteBoardURL,
            requestOptions,
            (resp) => {
                console.log("====>>> Schdule delete= ", resp);
                if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
                    alert("게시글이 삭제되었습니다.")
                    navigate(URL.ADMIN_SCHEDULE ,{ replace: true });
                } else {
                    // alert("ERR : " + resp.message);
                    navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
                }

            }
        );
    }

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

    console.log("------------------------------EgovAdminScheduleDetail [End]");
    console.groupEnd("EgovAdminScheduleDetail");
    return (
        <div className="container">
            <div className="c_wrap">
                {/* <!-- Location --> */}
                <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>
                {/* <!--// Location --> */}

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

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

                        <div className="top_tit">
                            <h1 className="tit_1">일정관리 상세보기</h1>
                        </div>

                        {/* <!-- 게시판 상세보기 --> */}
                        <div className="board_view2">
                            <dl>
                                <dt>구분</dt>
                                <dd>{scheduleDetail.divMeetNm}</dd>
                            </dl>
                            <dl>
                                <dt>심의위원회</dt>
                                <dd>{scheduleDetail.upCommitteeNm} - {scheduleDetail.committeeNm}</dd>
                            </dl>
                            <dl>
                                <dt>제목</dt>
                                <dd>{scheduleDetail.title}</dd>
                            </dl>
                            <dl>
                                <dt>장소</dt>
                                <dd>{scheduleDetail.location}</dd>
                            </dl>                            
                            <dl>
                                <dt>날짜/시간</dt>
                                <dd> {scheduleDetail.startDate} ~ {scheduleDetail.endDate}</dd>
                            </dl>
                            <dl>
                                <dt>내용</dt>
                                <dd>{scheduleDetail.contents}</dd>
                            </dl>

                            {/* <!-- 버튼영역 --> */}
                            <div className="board_btn_area">
                                {user.id &&
                                    <div className="left_col btn1">
                                        <Link to={{pathname: URL.ADMIN_SCHEDULE_MODIFY}}
                                            state={{
                                                schdulId: location.state?.schdulId
                                            }}
                                            className="btn btn_skyblue_h46 w_100">수정</Link>
                                        <button className="btn btn_skyblue_h46 w_100"
                                            onClick={(e) => {
                                                onClickDeleteSchedule(location.state?.schdulId);
                                            }}>삭제</button>                                        
                                    </div>
                                }
                                <div className="right_col btn1">
                                    <Link to={URL.ADMIN__COMMITTEE__SCHEDULES} className="btn btn_blue_h46 w_100">목록</Link>
                                </div>
                            </div>
                            {/* <!--// 버튼영역 --> */}
                        </div>
                        {/* <!-- 게시판 상세보기 --> */}

                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default SchedulesDetail;