feat: 관리자 - 컨텐츠관리 - 팝업관리 paging 처리 건
parent
8f45a131bf
commit
a4fc8808eb
|
|
@ -3,14 +3,18 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.3",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@material-ui/core": "^4.12.4",
|
||||
"@material-ui/icons": "^4.11.3",
|
||||
"@mui/material": "^5.14.19",
|
||||
"@mui/styles": "^5.15.3",
|
||||
"bootstrap": "^5.3.2",
|
||||
"date-fns": "^3.2.0",
|
||||
"qs": "^6.11.0",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.9.0",
|
||||
"react-csv": "^2.2.2",
|
||||
"react-datepicker": "^4.8.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.11.0",
|
||||
|
|
@ -19,9 +23,7 @@
|
|||
"react-scripts": "5.0.1",
|
||||
"recharts": "^2.10.3",
|
||||
"styled-components": "^6.0.9",
|
||||
"web-vitals": "^2.1.4",
|
||||
"date-fns": "^3.2.0",
|
||||
"react-csv": "^2.2.2"
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
import React from 'react';
|
||||
|
||||
function EgovPagingPaginationInfo({pagination, setPaginationInfo, moveToPage}) {
|
||||
console.groupCollapsed("EgovPagingPaginationInfo");
|
||||
console.log("EgovPagingPaginationInfo [pagination] : ", pagination);
|
||||
|
||||
|
||||
let paginationTag = [];
|
||||
|
||||
if (pagination === undefined) {
|
||||
paginationTag = "-";
|
||||
} else {
|
||||
if(pagination.firstPageNoOnPageList>1){
|
||||
// 첫 페이지 이동
|
||||
paginationTag.push(<li key="fp" className="btn">
|
||||
<button onClick={e => {moveToPage(1)}} className="first">처음</button>
|
||||
</li>);
|
||||
|
||||
// 이전 페이지 이동
|
||||
const prevPageIndex = pagination.currentPageNo-pagination.pageSize < 0?1:(pagination.currentPageNo-pagination.pageSize)
|
||||
paginationTag.push(<li key="pp" className="btn">
|
||||
<button onClick={e => {moveToPage(prevPageIndex)}} className="prev">이전</button>
|
||||
</li>);
|
||||
}
|
||||
for (let i = pagination.firstPageNoOnPageList; i <= pagination.lastPageNoOnPageList; i++) {
|
||||
if (i === pagination.currentPageNo) {
|
||||
// 현재 페이지
|
||||
paginationTag.push(<li key={i}>
|
||||
<button className="cur">{i}</button>
|
||||
</li>);
|
||||
} else {
|
||||
// 다른 페이지
|
||||
paginationTag.push(<li key={i}>
|
||||
<button onClick={e => {moveToPage(i)}}>{i}</button>
|
||||
</li>);
|
||||
}
|
||||
}
|
||||
if(pagination.lastPageNoOnPageList!=pagination.lastPageNo){
|
||||
// 다음 페이지 이동
|
||||
const nextPageIndex = pagination.currentPageNo+pagination.pageSize > pagination.lastPageNo?pagination.lastPageNo:(pagination.currentPageNo+pagination.pageSize)
|
||||
paginationTag.push(<li key="np" className="btn">
|
||||
<button onClick={e => {moveToPage(nextPageIndex)}} className="next">다음</button>
|
||||
</li>);
|
||||
|
||||
// 마지막 페이지 이동
|
||||
paginationTag.push(<li key="lp" className="btn">
|
||||
<button onClick={e => {moveToPage(pagination.lastPageNo)}} className="last"></button>
|
||||
</li>);
|
||||
}
|
||||
}
|
||||
console.log("paginationTag", paginationTag);
|
||||
console.groupEnd("EgovPagingPaginationInfo");
|
||||
|
||||
return (
|
||||
<div className="paging">
|
||||
<ul>
|
||||
{paginationTag}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(EgovPagingPaginationInfo);
|
||||
|
|
@ -1,12 +1,55 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import Switch from '@mui/material/Switch';
|
||||
|
||||
import * as EgovNet from 'api/egovFetch';
|
||||
import URL from 'constants/url';
|
||||
|
||||
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 [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 Location = React.memo(function Location() {
|
||||
|
|
@ -36,32 +79,52 @@ function PopUp(props) {
|
|||
|
||||
<div className="contents " id="contents">
|
||||
{/* <!-- 본문 --> */}
|
||||
<StyledDiv>
|
||||
<div className="top_tit">
|
||||
<h1 className="tit_1">팝업 관리</h1>
|
||||
</div>
|
||||
|
||||
<div className="top_tit">
|
||||
<h1 className="tit_1">팝업 관리</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<div>
|
||||
{/* <!-- 버튼영역 --> */}
|
||||
<div className="board_btn_area">
|
||||
<div className="right_col btn1">
|
||||
<a href="/PopupMng/Create" className="btn btn_blue_h46 w_100">팝업 추가</a>
|
||||
<Link to={URL.ADMIN__COMMITTEE__SCHEDULES} className="btn btn_blue_h46 w_100">팝업 추가</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive content-box">
|
||||
<table className="table table-condensed table-hover th-info">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>제목</th>
|
||||
<th>기간</th>
|
||||
<th>사용여부</th>
|
||||
<th>삭제</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
{/* <!--// 버튼영역 --> */}
|
||||
|
||||
{/* <!-- 게시판목록 --> */}
|
||||
<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'>
|
||||
<div>{it.seq}</div>
|
||||
<div className="al"><Link to={URL.SUPPORT_QNA_DETAIL}>{it.popupTitle}</Link></div>
|
||||
<div>{it.startDate} ~ {it.endDate}</div>
|
||||
<div>{it.useYn === 'Y' ? <Switch {...label} defaultChecked /> : <Switch {...label} />}</div>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,486 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import DatePicker from "react-datepicker";
|
||||
|
||||
|
||||
|
||||
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 'react-datepicker/dist/react-datepicker.css';
|
||||
|
||||
import styled from "styled-components";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
shake: {
|
||||
animation: "$description 15s",
|
||||
animationIterationCount: "1"
|
||||
},
|
||||
"@keyframes description": {
|
||||
"0%": { opacity: 0, transform: "translateY(0)" },
|
||||
"15%": { transform: "translateY(-4px, 0)" },
|
||||
"30%": { transform: "translateY(6px, 0)" },
|
||||
"45%": { transform: "translateY(-4px, 0)" },
|
||||
"60%": { transform: "translateY(6px, 0)" },
|
||||
"100%": { opacity: 1, transform: "translateY(0)" }
|
||||
}
|
||||
}));
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
.org-under-id {
|
||||
margin-left: 20px;
|
||||
@media only screen and (max-width: 768px) {
|
||||
display: block;
|
||||
margin-left: 0px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.f_select.w_250 {
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.f_input {
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function SchedulesEdit(props) {
|
||||
console.group("EgovAdminScheduleEdit");
|
||||
console.log("[Start] EgovAdminScheduleEdit ------------------------------");
|
||||
console.log("EgovAdminScheduleEdit [props] : ", props);
|
||||
|
||||
const classes = useStyles();
|
||||
const [isShake, setShake] = useState(false);
|
||||
|
||||
//${location.state?.schdulId
|
||||
|
||||
const getDateFourteenDigit = (date) => {
|
||||
return `${getYYYYMMDD(date).toString()}${makeTwoDigit(date.getHours())}${makeTwoDigit(date.getMinutes())}${makeTwoDigit(date.getSeconds())}`;
|
||||
}
|
||||
const getYYYYMMDD = (date) => {
|
||||
return date.getFullYear().toString() + makeTwoDigit(Number(date.getMonth() + 1)) + makeTwoDigit(date.getDate());
|
||||
}
|
||||
const getYYYY_MM_DD = (date) => {
|
||||
return `${date.getFullYear().toString()}-${makeTwoDigit(Number(date.getMonth() + 1))}-${makeTwoDigit(date.getDate())}`;
|
||||
}
|
||||
const makeTwoDigit = (number) => {
|
||||
return number < 10 ? "0" + number : number.toString();
|
||||
}
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
console.log("EgovAdminScheduleEdit [location] : ", location);
|
||||
|
||||
const [modeInfo, setModeInfo] = useState({ mode: props.mode });
|
||||
const [scheduleDetail, setScheduleDetail] = useState
|
||||
(
|
||||
{
|
||||
startDate: new Date(),
|
||||
endDate: new Date(),
|
||||
eventId : 0,
|
||||
}
|
||||
);
|
||||
|
||||
const [schdulBgndeHH, setSchdulBgndeHH] = useState();
|
||||
const [schdulBgndeMM, setSchdulBgndeMM] = useState();
|
||||
const [schdulEnddeHH, setSchdulEnddeHH] = useState();
|
||||
const [schdulEnddeMM, setSchdulEnddeMM] = useState();
|
||||
|
||||
const [scheduleInit, setScheduleInit] = useState({});
|
||||
const [scheduleApiOrgApiDepthList, setScheduleApiOrgApiDepthList] = useState({ });
|
||||
|
||||
|
||||
const initMode = () => {
|
||||
|
||||
// props.mode 값이 없으면 에러가 발생한다.
|
||||
switch (props.mode) {
|
||||
case CODE.MODE_CREATE:
|
||||
setModeInfo({
|
||||
...modeInfo,
|
||||
modeTitle: "등록",
|
||||
method : "POST",
|
||||
editURL: '/schedule'
|
||||
});
|
||||
break;
|
||||
case CODE.MODE_MODIFY:
|
||||
setModeInfo({
|
||||
...modeInfo,
|
||||
modeTitle: "수정",
|
||||
method : "PUT",
|
||||
editURL: '/schedule'
|
||||
});
|
||||
break;
|
||||
default:
|
||||
navigate({pathname: URL.ERROR}, {state: {msg : ""}});
|
||||
}
|
||||
retrieveDetail();
|
||||
}
|
||||
|
||||
const convertDate = (str) => {
|
||||
let year = str.substring(0, 4);
|
||||
let month = str.substring(4, 6);
|
||||
let date = str.substring(6, 8);
|
||||
let hour = str.substring(8, 10);
|
||||
let minute = str.substring(10, 12);
|
||||
return new Date(year, month - 1, date, hour, minute)
|
||||
}
|
||||
|
||||
const requestOptions = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
}
|
||||
}
|
||||
|
||||
const retrieveDetail = () => {
|
||||
|
||||
EgovNet.requestFetch("/schedule/init",
|
||||
requestOptions,
|
||||
function (resp) {
|
||||
setScheduleInit(
|
||||
resp
|
||||
);
|
||||
|
||||
if (modeInfo.mode === CODE.MODE_CREATE) {// 조회/등록이면 조회 안함
|
||||
setScheduleDetail({
|
||||
...scheduleDetail,
|
||||
schdulBgnde: location.state.iUseDate,
|
||||
schdulEndde: location.state.iUseDate,
|
||||
startDate: convertDate(location.state.iUseDate),
|
||||
endDate: convertDate(location.state.iUseDate),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const retrieveDetailURL = `/schedule/${location.state?.schdulId}`;
|
||||
const requestOptions = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
}
|
||||
}
|
||||
EgovNet.requestFetch(retrieveDetailURL,
|
||||
requestOptions,
|
||||
function (resp) {
|
||||
|
||||
let rawScheduleDetail = resp.result;
|
||||
//기본값 설정
|
||||
setScheduleDetail({
|
||||
...scheduleDetail,
|
||||
...rawScheduleDetail,
|
||||
startDate: convertDate(rawScheduleDetail.schdulBgnde),
|
||||
endDate: convertDate(rawScheduleDetail.schdulEndde),
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
const updateSchedule = () => {
|
||||
const formData = new FormData();
|
||||
|
||||
for (let key in scheduleDetail) {
|
||||
if ( key === 'startDate' ) {
|
||||
formData.append(key, getDateFourteenDigit( scheduleDetail[key] ));
|
||||
} else if( key === 'endDate' ) {
|
||||
formData.append(key, getDateFourteenDigit( scheduleDetail[key] ));
|
||||
} else {
|
||||
formData.append(key, scheduleDetail[key]);
|
||||
}
|
||||
|
||||
console.log("scheduleDetail [%s] ", key, scheduleDetail[key]);
|
||||
}
|
||||
|
||||
if ( formValidator(formData) ) {
|
||||
const requestOptions = {
|
||||
method: modeInfo.method,
|
||||
body: formData
|
||||
}
|
||||
|
||||
if (modeInfo.mode === CODE.MODE_MODIFY) {
|
||||
modeInfo.editURL = `${modeInfo.editURL}/${location.state?.schdulId}`;
|
||||
}
|
||||
EgovNet.requestFetch(modeInfo.editURL,
|
||||
requestOptions,
|
||||
(resp) => {
|
||||
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
|
||||
alert('일정이 등록되었습니다.');
|
||||
navigate({ pathname: URL.ADMIN__COMMITTEE__SCHEDULES__DETAIL }, {state: {schdulId : resp.result?.schdulId}});
|
||||
} else {
|
||||
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const formValidator = (formData) => {
|
||||
|
||||
if (formData.get('divMeet') === null || formData.get('divMeet') === "") {
|
||||
alert("구분을 선택해 주세요.");
|
||||
return false;
|
||||
}
|
||||
if (formData.get('upCommittee') === null || formData.get('upCommittee') === "") {
|
||||
alert("심의위원회 첫 번째 값을 선택해 주세요.");
|
||||
return false;
|
||||
}
|
||||
if (formData.get('committee') === null || formData.get('committee') === "") {
|
||||
alert("심의위원회 두 번째 값을 선택해 주세요.");
|
||||
return false;
|
||||
}
|
||||
if (formData.get('title') === null || formData.get('title') === "") {
|
||||
alert("제목을 입력해 주세요.");
|
||||
return false;
|
||||
}
|
||||
if (formData.get('location') === null ||formData.get('location') === "") {
|
||||
alert("장소를 입력해 주세요.");
|
||||
return false;
|
||||
}
|
||||
if (formData.get('contents') === null ||formData.get('contents') === "") {
|
||||
alert("내용을 입력해 주세요.");
|
||||
return false;
|
||||
}
|
||||
if (formData.get('schdulBgnde') > formData.get('schdulEndde')) {
|
||||
alert("종료일시는 시작일시보다 앞 설 수 없습니다.");
|
||||
//return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
useEffect(function () {
|
||||
initMode();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(function () {
|
||||
console.log("------------------------------EgovAdminScheduleEdit [%o]", scheduleDetail);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [scheduleDetail]);
|
||||
|
||||
useEffect(function () {
|
||||
|
||||
EgovNet.requestFetch(`/schedule/api/org-api/depth/list?paramCodeGroup=${scheduleDetail.upCommittee}`,
|
||||
requestOptions,
|
||||
function (resp) {
|
||||
setScheduleApiOrgApiDepthList(
|
||||
resp
|
||||
);
|
||||
}
|
||||
);
|
||||
console.log("------------------------------EgovAdminScheduleEdit [%o]", scheduleDetail);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [scheduleDetail && scheduleDetail.upCommittee]);
|
||||
|
||||
|
||||
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__COMMITTEE__SCHEDULES ,{ replace: true });
|
||||
} else {
|
||||
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
console.log("------------------------------EgovAdminScheduleEdit [End]");
|
||||
console.groupEnd("EgovAdminScheduleEdit");
|
||||
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_SCHDULE_REG" id="contents">
|
||||
{/* <!-- 본문 --> */}
|
||||
|
||||
<div className="top_tit">
|
||||
<h1 className="tit_1">위원회 일정 관리</h1>
|
||||
</div>
|
||||
|
||||
{/* <!-- <h2 className="tit_2">위원회 일정 추가</h2> --> */}
|
||||
|
||||
{/* <!-- 게시판 상세보기 --> */}
|
||||
<StyledDiv className="board_view2">
|
||||
<dl>
|
||||
<dt>구분<span className="req">필수</span></dt>
|
||||
<dd>
|
||||
<label className="f_select w_150" htmlFor="div-meet">
|
||||
<select id="div-meet" name="div-meet" title="일정구분"
|
||||
value={scheduleDetail.divMeet}
|
||||
onChange={(e) => setScheduleDetail({ ...scheduleDetail, divMeet: e.target.value })}>
|
||||
<option key={"none"} value="">선택</option>
|
||||
{scheduleInit && scheduleInit.result && scheduleInit.result.listCodes
|
||||
&& scheduleInit.result.listCodes.map((item) => (
|
||||
<option key={item.id} value={item.id}>{item.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>심의위원회<span className="req">필수</span></dt>
|
||||
<dd>
|
||||
<label className="f_select w_250 up-committe" htmlFor="up-committee">
|
||||
<select id="up-committe" name="up-committe" title="심의위원회-상위"
|
||||
value={scheduleDetail.upCommittee}
|
||||
onChange={(e) => setScheduleDetail({ ...scheduleDetail, upCommittee: e.target.value })}>
|
||||
<option value="">선택</option>
|
||||
{scheduleInit && scheduleInit.result && scheduleInit.result.listTopOrg
|
||||
&& scheduleInit.result.listTopOrg.map((item) => (
|
||||
<option key={item.id} value={item.id}>{item.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="f_select w_250 org-under-id" htmlFor="committee">
|
||||
<select id="committee" name="committee" title="심의위원회-하위"
|
||||
value={scheduleDetail.committee}
|
||||
onChange={(e) => setScheduleDetail({ ...scheduleDetail, committee: e.target.value })}>
|
||||
<option value="">선택</option>
|
||||
{scheduleApiOrgApiDepthList && scheduleApiOrgApiDepthList.result && scheduleApiOrgApiDepthList.result.list
|
||||
&& scheduleApiOrgApiDepthList.result.list.map((item) => (
|
||||
<option key={item.id} value={item.id}>{item.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><label htmlFor="title">제목</label><span className="req">필수</span></dt>
|
||||
<dd>
|
||||
<input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
|
||||
value={scheduleDetail.title}
|
||||
onChange={(e) => setScheduleDetail({ ...scheduleDetail, title: e.target.value })}
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><label htmlFor="location">장소</label><span className="req">필수</span></dt>
|
||||
<dd>
|
||||
<input className="f_input2 w_full" type="text" name="location" title="장소" id="location" placeholder="장소를 입력하세요."
|
||||
defaultValue={scheduleDetail.location}
|
||||
onChange={(e) => setScheduleDetail({ ...scheduleDetail, location: e.target.value })} />
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>날짜/시간<span className="req">필수</span></dt>
|
||||
<dd className="datetime">
|
||||
<span className="line_break">
|
||||
<DatePicker
|
||||
selected={scheduleDetail.startDate}
|
||||
name="schdulBgnde"
|
||||
className="f_input"
|
||||
dateFormat="yyyy-MM-dd HH:mm"
|
||||
showTimeInput
|
||||
onChange={(date) => {
|
||||
console.log("setStartDate : ", date);
|
||||
setScheduleDetail({ ...scheduleDetail, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), schdulBgndeHH: date.getHours(), schdulBgndeMM: date.getMinutes(), startDate: date });
|
||||
setSchdulBgndeHH(date.getHours());
|
||||
setSchdulBgndeMM(date.getMinutes());
|
||||
}} />
|
||||
<input type="hidden" name="schdulBgndeHH" defaultValue={schdulBgndeHH} readOnly />
|
||||
<input type="hidden" name="schdulBgndeMM" defaultValue={schdulBgndeMM} readOnly />
|
||||
<span className="f_inn_txt">~</span>
|
||||
</span>
|
||||
<span className="line_break">
|
||||
<DatePicker
|
||||
selected={scheduleDetail.endDate}
|
||||
name="schdulEndde"
|
||||
className="f_input"
|
||||
dateFormat="yyyy-MM-dd HH:mm"
|
||||
showTimeInput
|
||||
minDate={scheduleDetail.startDate}
|
||||
onChange={(date) => {
|
||||
console.log("setEndDate: ", date);
|
||||
setScheduleDetail({ ...scheduleDetail, schdulEndde: getDateFourteenDigit(date), schdulEnddeYYYMMDD: getYYYYMMDD(date), schdulEnddeHH: date.getHours(), schdulEnddeMM: date.getMinutes(), endDate: date });
|
||||
setSchdulEnddeHH(date.getHours());
|
||||
setSchdulEnddeMM(date.getMinutes());
|
||||
}
|
||||
} />
|
||||
<input type="hidden" name="schdulEnddeHH" defaultValue={schdulEnddeHH} readOnly />
|
||||
<input type="hidden" name="schdulEnddeMM" defaultValue={schdulEnddeMM} readOnly />
|
||||
</span>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><label htmlFor="contents">내용</label><span className="req">필수</span></dt>
|
||||
<dd>
|
||||
<textarea className="f_txtar w_full h_100" name="contents" id="contents" cols="30" rows="10" placeholder="일정 내용을 입력하세요."
|
||||
defaultValue={scheduleDetail.contents}
|
||||
onChange={(e) => setScheduleDetail({ ...scheduleDetail, contents: e.target.value })}
|
||||
></textarea>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
{/* <!-- 버튼영역 --> */}
|
||||
<div className="board_btn_area">
|
||||
<div className="left_col btn1">
|
||||
<button className="btn btn_skyblue_h46 w_100"
|
||||
onClick={() => updateSchedule()}
|
||||
> 저장</button>
|
||||
{modeInfo.mode === CODE.MODE_MODIFY &&
|
||||
<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>
|
||||
{/* <!--// 버튼영역 --> */}
|
||||
</StyledDiv>
|
||||
{/* <!-- 게시판 상세보기 --> */}
|
||||
|
||||
{/* <!--// 본문 --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
export default SchedulesEdit;
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
dependencies:
|
||||
"@babel/types" "^7.21.0"
|
||||
|
||||
"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.22.5":
|
||||
"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.22.5":
|
||||
version "7.22.15"
|
||||
resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz"
|
||||
integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
|
||||
|
|
@ -1065,7 +1065,7 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.14.0"
|
||||
|
||||
"@babel/runtime@^7.23.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.3":
|
||||
"@babel/runtime@^7.18.3", "@babel/runtime@^7.23.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.3":
|
||||
version "7.23.8"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650"
|
||||
integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
|
||||
|
|
@ -1222,6 +1222,23 @@
|
|||
resolved "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.1.tgz"
|
||||
integrity sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==
|
||||
|
||||
"@emotion/babel-plugin@^11.11.0":
|
||||
version "11.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
|
||||
integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
|
||||
dependencies:
|
||||
"@babel/helper-module-imports" "^7.16.7"
|
||||
"@babel/runtime" "^7.18.3"
|
||||
"@emotion/hash" "^0.9.1"
|
||||
"@emotion/memoize" "^0.8.1"
|
||||
"@emotion/serialize" "^1.1.2"
|
||||
babel-plugin-macros "^3.1.0"
|
||||
convert-source-map "^1.5.0"
|
||||
escape-string-regexp "^4.0.0"
|
||||
find-root "^1.1.0"
|
||||
source-map "^0.5.7"
|
||||
stylis "4.2.0"
|
||||
|
||||
"@emotion/cache@^11.11.0":
|
||||
version "11.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
|
||||
|
|
@ -1255,11 +1272,48 @@
|
|||
resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz"
|
||||
integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
|
||||
|
||||
"@emotion/react@^11.11.3":
|
||||
version "11.11.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.3.tgz#96b855dc40a2a55f52a72f518a41db4f69c31a25"
|
||||
integrity sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.18.3"
|
||||
"@emotion/babel-plugin" "^11.11.0"
|
||||
"@emotion/cache" "^11.11.0"
|
||||
"@emotion/serialize" "^1.1.3"
|
||||
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
|
||||
"@emotion/utils" "^1.2.1"
|
||||
"@emotion/weak-memoize" "^0.3.1"
|
||||
hoist-non-react-statics "^3.3.1"
|
||||
|
||||
"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.1.3":
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.3.tgz#84b77bfcfe3b7bb47d326602f640ccfcacd5ffb0"
|
||||
integrity sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==
|
||||
dependencies:
|
||||
"@emotion/hash" "^0.9.1"
|
||||
"@emotion/memoize" "^0.8.1"
|
||||
"@emotion/unitless" "^0.8.1"
|
||||
"@emotion/utils" "^1.2.1"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@emotion/sheet@^1.2.2":
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
|
||||
integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
|
||||
|
||||
"@emotion/styled@^11.11.0":
|
||||
version "11.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
|
||||
integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.18.3"
|
||||
"@emotion/babel-plugin" "^11.11.0"
|
||||
"@emotion/is-prop-valid" "^1.2.1"
|
||||
"@emotion/serialize" "^1.1.2"
|
||||
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
|
||||
"@emotion/utils" "^1.2.1"
|
||||
|
||||
"@emotion/stylis@^0.8.4":
|
||||
version "0.8.5"
|
||||
resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
|
||||
|
|
@ -1270,11 +1324,16 @@
|
|||
resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
|
||||
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
|
||||
|
||||
"@emotion/unitless@^0.8.0":
|
||||
"@emotion/unitless@^0.8.0", "@emotion/unitless@^0.8.1":
|
||||
version "0.8.1"
|
||||
resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz"
|
||||
integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
|
||||
|
||||
"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
|
||||
integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
|
||||
|
||||
"@emotion/utils@^1.2.1":
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
|
||||
|
|
@ -3678,7 +3737,7 @@ content-type@~1.0.4:
|
|||
resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz"
|
||||
integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
|
||||
|
||||
convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
|
||||
convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
|
||||
version "1.9.0"
|
||||
resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz"
|
||||
integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
|
||||
|
|
@ -5046,6 +5105,11 @@ find-cache-dir@^3.3.1:
|
|||
make-dir "^3.0.2"
|
||||
pkg-dir "^4.1.0"
|
||||
|
||||
find-root@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
|
||||
integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
|
||||
|
||||
find-up@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz"
|
||||
|
|
@ -5401,7 +5465,7 @@ he@^1.2.0:
|
|||
resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
|
||||
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
|
||||
|
||||
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.2:
|
||||
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
|
||||
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
|
||||
|
|
@ -8972,6 +9036,11 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
|
|||
resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
|
||||
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
|
||||
|
||||
source-map@^0.5.7:
|
||||
version "0.5.7"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
|
||||
integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
|
||||
|
||||
source-map@^0.7.3:
|
||||
version "0.7.4"
|
||||
resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue