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 styled from "styled-components";

import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';
import CODE from 'constants/code';

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

const StyledDiv = styled.div`
    .right_col {
        position: absolute;
        right: 0px;
        top: 0px;
        text-align: right;
    }
`;

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 retrieveDetail = () => {
        
        const retrieveDetailURL = `/schedule/${location.state?.schdulId}`;
        const requestOptions = {
            method: "GET",
            headers: {
                'Content-type': 'application/json',
            }
        }
        EgovNet.requestFetch(retrieveDetailURL,
            requestOptions,
            function (resp) {
                setScheduleDetail(resp.result);
            }
        );
    }


    const convertDate = (str) => {
        if( !str ) {
            return null;
        }
        let year = str.substring(0, 4);
        let month = str.substring(5, 7);
        let date = str.substring(8, 10);
        let hour = str.substring(11, 13);
        let minute = str.substring(14, 16);
        return {
            year: year,
            month: month,
            date: date,
            hour: hour,
            minute: minute,
            dateForm: year + "-" + month + "-" + date + " " + hour + ":" + minute + ""
        }
    }


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

        const requestOptions = {
            method: "POST",
            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__COMMITTEE__SCHEDULES ,{ 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 (
        <StyledDiv 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> { convertDate(scheduleDetail?.startDate)?.dateForm} ~ {convertDate(scheduleDetail?.endDate)?.dateForm} </dd>
                            </dl>
                            <dl>
                                <dt>내용</dt>
                                <dd>{scheduleDetail.contents}</dd>
                            </dl>

                            {/* <!-- 버튼영역 --> */}
                            <Row className="pt-3">
                                <Col xs={6}>
                                    <Link to={URL.ADMIN__COMMITTEE__SCHEDULES} className="btn btn_skyblue_h32 w_100">목록</Link>
                                    <button className="btn btn_red_h32 w_100 ms-2"
                                            onClick={(e) => {
                                                onClickDeleteSchedule(location.state?.schdulId);
                                            }}>삭제</button>
                                </Col>
                                <Col xs={6} className="text-end">
                                    <Link to={{pathname: URL.ADMIN__COMMITTEE__SCHEDULES__MODIFY}}
                                        state={{
                                            schdulId: location.state?.schdulId
                                        }}
                                        className="btn btn_blue_h32 w_100">수정</Link>
                                </Col>
                            </Row>
                            {/* <!--// 버튼영역 --> */}
                        </div>
                        {/* <!-- 게시판 상세보기 --> */}

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

export default SchedulesDetail;