feat: 관리자 - 컨텐츠관리 - 팝업관리에서 '팝업 추가' 화면 publishing

thkim
thkim 2024-01-24 13:17:45 +09:00
parent a4fc8808eb
commit d67c3d90e2
10 changed files with 489 additions and 498 deletions

View File

@ -19,6 +19,7 @@
"react-dom": "^18.2.0",
"react-icons": "^4.11.0",
"react-loader-spinner": "^5.4.5",
"react-quill": "^2.0.0",
"react-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"recharts": "^2.10.3",

View File

@ -0,0 +1,65 @@
import React from "react";
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
// react-quill에 기반을 둔 텍스트 에디터 컴포넌트
const RichTextEditor = ({item, setText}) => {
const style = { height: "400px"};
const onChangeEvent = (e) => {
setText(e);
}
// Quill Tool bar
const modules = {
toolbar: {
container: [
[{ size: ["small", false, "large", "huge"] }],
[{ color: [] }],
["bold", "italic", "underline", "strike", "blockquote"],
[
{ list: "ordered" },
{ list: "bullet" },
{ align: [] }
],
["image", "video"],
["clean"]
],
// handlers: { image: this.imageHandler }
},
clipboard: { matchVisual: false }
};
const formats = [
"header",
"bold",
"italic",
"underline",
"strike",
"blockquote",
"size",
"color",
"list",
"bullet",
"indent",
"link",
"image",
"video",
"align"
];
return (
<ReactQuill
style={style}
theme="snow"
onChange={onChangeEvent}
modules={modules}
formats={formats}
value={item}
>
</ReactQuill>
)
}
export default RichTextEditor;

View File

@ -98,10 +98,12 @@ const URL = {
ADMIN__STANDARDS__INFO_DISCLOSURE : "/admin/standards/info-disclosure", // 건설기준 관리/정보공개 관리
// 관리자 - 컨텐츠 관리
ADMIN__CONTENTS__SURVEY : "/admin/contents/survey", // 컨텐츠 관리/설문 관리
ADMIN__CONTENTS__POP_UP : "/admin/contents/pop-up", // 컨텐츠 관리/팝업 관리
ADMIN__CONTENTS__STANDARDS_RESEARCH : "/admin/contents/standards-research", // 컨텐츠 관리/건설기준연구 관리
ADMIN__CONTENTS__TEXT_MESSAGES : "/admin/contents/text-messages", // 컨텐츠 관리/문자 발송
ADMIN__CONTENTS__SURVEY : "/admin/contents/survey", // 컨텐츠 관리/설문 관리
ADMIN__CONTENTS__POP_UP : "/admin/contents/pop-up", // 컨텐츠 관리/팝업 관리
ADMIN__CONTENTS__POP_UP__CREATE : "/admin/contents/pop-up/create", // 관리자 - 컨텐츠 관리/팝업 관리/팝업 추가
ADMIN__CONTENTS__POP_UP__MODIFY : "/admin/contents/pop-up/modify", // 관리자 - 컨텐츠 관리/팝업 관리/팝업 수정
ADMIN__CONTENTS__STANDARDS_RESEARCH : "/admin/contents/standards-research", // 컨텐츠 관리/건설기준연구 관리
ADMIN__CONTENTS__TEXT_MESSAGES : "/admin/contents/text-messages", // 컨텐츠 관리/문자 발송
// 관리자 - 위원회 관리
ADMIN__COMMITTEE__PROGRESS_STATUS : "/admin/committee/progress-status", // 위원회 관리/진행현황 관리

View File

@ -6,7 +6,6 @@ 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");

View File

@ -69,9 +69,6 @@ function SchedulesEdit(props) {
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();
}

View File

@ -87,7 +87,7 @@ function PopUp(props) {
{/* <!-- 버튼영역 --> */}
<div className="board_btn_area">
<div className="right_col btn1">
<Link to={URL.ADMIN__COMMITTEE__SCHEDULES} className="btn btn_blue_h46 w_100">팝업 추가</Link>
<Link to={URL.ADMIN__CONTENTS__POP_UP__CREATE} className="btn btn_blue_h46 w_100">팝업 추가</Link>
</div>
</div>
{/* <!--// 버튼영역 --> */}

View File

@ -1,486 +0,0 @@
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;

View File

@ -0,0 +1,278 @@
import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import DatePicker from "react-datepicker";
import EgovAttachFile from 'components/EgovAttachFile';
import RichTextEditor from "../../../../components/editor/RichTextEditor";
import CODE from 'constants/code';
import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';
import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
import styled from "styled-components";
const StyledDiv = styled.div`
.board_view2 {
margin-bottom: 30px;
}
.board_btn_area {
margin-top: 70px;
}
`;
function PopupWriter(props) {
const navigate = useNavigate();
const location = useLocation();
const [modeInfo, setModeInfo] = useState({ mode: props.mode });
const [text, setText] = useState("");
const [scheduleDetail, setScheduleDetail] = useState({ schdulDeptName: "관리자부서", schdulChargerName: "관리자", schdulKindCode: 2, reptitSeCode: "1", startDate: new Date(), endDate: new Date() });
const [schdulBgndeHH, setSchdulBgndeHH] = useState();
const [schdulBgndeMM, setSchdulBgndeMM] = useState();
const [schdulEnddeHH, setSchdulEnddeHH] = useState();
const [schdulEnddeMM, setSchdulEnddeMM] = useState();
const [boardAttachFiles, setBoardAttachFiles] = useState();
useEffect(function () {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const formValidator = (formData) => {
if (formData.get('schdulNm') === null || formData.get('schdulNm') === "") {
alert("일정명은 필수 값입니다.");
return false;
}
if (formData.get('schdulCn') === null || formData.get('schdulCn') === "") {
alert("일정내용은 필수 값입니다.");
return false;
}
if (formData.get('schdulSe') === null || formData.get('schdulSe') === "") {
alert("일정구분은 필수 값입니다.");
return false;
}
if (formData.get('schdulIpcrCode') === null || formData.get('schdulIpcrCode') === "") {
alert("중요도는 필수 값입니다.");
return false;
}
if (formData.get('reptitSeCode') === null ||formData.get('reptitSeCode') === "") {
alert("반복구분은 필수 값입니다.");
return false;
}
if (formData.get('schdulBgnde') > formData.get('schdulEndde')) {
alert("종료일시는 시작일시보다 앞 설 수 없습니다.");
return false;
}
return true;
}
const updateSchedule = () => {
const formData = new FormData();
for (let key in scheduleDetail) {
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)) {
navigate({ pathname: URL.ADMIN_SCHEDULE });
} else {
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
}
}
);
}
}
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 {
// alert("ERR : " + resp.message);
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
}
}
);
}
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 makeTwoDigit = (number) => {
return number < 10 ? "0" + number : number.toString();
}
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_view2'>
<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>기간<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>
<EgovAttachFile
fnChangeFile={(attachfile) => {
console.log("====>>> Changed attachfile file = ", attachfile);
const arrayConcat = { ...scheduleDetail}; // ( for)
for ( let i = 0; i < attachfile.length; i++) {
arrayConcat[`file_${i}`] = attachfile[i];
}
setScheduleDetail(arrayConcat);
}}
fnDeleteFile={(deletedFile) => {
console.log("====>>> Delete deletedFile = ", deletedFile);
setBoardAttachFiles(deletedFile);
}}
boardFiles={boardAttachFiles}
mode={props.mode} />
</div>
{/* <!-- 게시판 --> */}
<RichTextEditor item={text} setText={setText}/>
{/* <!--// 게시판 --> */}
{/* <!-- 버튼영역 --> */}
<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__CONTENTS__POP_UP} className="btn btn_blue_h46 w_100">목록</Link>
</div>
</div>
{/* <!--// 버튼영역 --> */}
</StyledDiv>
{/* <!--// 본문 --> */}
</div>
</div>
</div>
</div>
);
}
export default PopupWriter;

View File

@ -91,7 +91,8 @@ import AdminStandardsInfoDisclosure from 'pages/admin/standards/InfoDisclosure';
// -
import AdminContentsSurvey from 'pages/admin/contents/Survey'; // - /
import AdminContentsPopUp from 'pages/admin/contents/PopUp'; // - /
import AdminContentsStandardResearch from 'pages/admin/contents/StandardResearch'; // - /
import AdminContentsPopUpWriter from 'pages/admin/contents/PopUp/Writer'; // - / /
import AdminContentsStandardResearch from 'pages/admin/contents/StandardResearch'; // - /
import AdminContentsTextMessages from 'pages/admin/contents/TextMessages'; // - /
// -
@ -293,6 +294,8 @@ const SecondRoutes = () => {
{/* 관리자 - 컨텐츠 관리 */}
<Route path={URL.ADMIN__CONTENTS__SURVEY} element={<AdminContentsSurvey />} />
<Route path={URL.ADMIN__CONTENTS__POP_UP} element={<AdminContentsPopUp />} />
<Route path={URL.ADMIN__CONTENTS__POP_UP__CREATE} element={<AdminContentsPopUpWriter mode={CODE.MODE_CREATE} />} />
<Route path={URL.ADMIN__CONTENTS__POP_UP__MODIFY} element={<AdminContentsPopUpWriter mode={CODE.MODE_MODIFY} />} />
<Route path={URL.ADMIN__CONTENTS__STANDARDS_RESEARCH} element={<AdminContentsStandardResearch />} />
<Route path={URL.ADMIN__CONTENTS__TEXT_MESSAGES} element={<AdminContentsTextMessages />} />

View File

@ -2486,6 +2486,13 @@
resolved "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz"
integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
"@types/quill@^1.3.10":
version "1.3.10"
resolved "https://registry.yarnpkg.com/@types/quill/-/quill-1.3.10.tgz#dc1f7b6587f7ee94bdf5291bc92289f6f0497613"
integrity sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==
dependencies:
parchment "^1.1.2"
"@types/range-parser@*":
version "1.2.4"
resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz"
@ -3585,6 +3592,11 @@ cliui@^7.0.2:
strip-ansi "^6.0.0"
wrap-ansi "^7.0.0"
clone@^2.1.1:
version "2.1.2"
resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
clsx@^1.0.4:
version "1.2.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
@ -4168,6 +4180,18 @@ dedent@^0.7.0:
resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz"
integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
deep-equal@^1.0.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.2.tgz#78a561b7830eef3134c7f6f3a3d6af272a678761"
integrity sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==
dependencies:
is-arguments "^1.1.1"
is-date-object "^1.0.5"
is-regex "^1.1.4"
object-is "^1.1.5"
object-keys "^1.1.1"
regexp.prototype.flags "^1.5.1"
deep-equal@^2.0.5:
version "2.2.0"
resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.0.tgz"
@ -4208,6 +4232,15 @@ default-gateway@^6.0.3:
dependencies:
execa "^5.0.0"
define-data-property@^1.0.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
integrity sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==
dependencies:
get-intrinsic "^1.2.1"
gopd "^1.0.1"
has-property-descriptors "^1.0.0"
define-lazy-prop@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz"
@ -4221,6 +4254,15 @@ define-properties@^1.1.3, define-properties@^1.1.4:
has-property-descriptors "^1.0.0"
object-keys "^1.1.1"
define-properties@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
dependencies:
define-data-property "^1.0.1"
has-property-descriptors "^1.0.0"
object-keys "^1.1.1"
defined@^1.0.0:
version "1.0.1"
resolved "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz"
@ -4909,6 +4951,11 @@ etag@~1.8.1:
resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz"
integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
eventemitter3@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
integrity sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==
eventemitter3@^4.0.0, eventemitter3@^4.0.1:
version "4.0.7"
resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
@ -4997,11 +5044,21 @@ express@^4.17.3:
utils-merge "1.0.1"
vary "~1.1.2"
extend@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
version "3.1.3"
resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-diff@1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
fast-equals@^5.0.0:
version "5.0.1"
resolved "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz"
@ -5245,6 +5302,11 @@ function-bind@^1.1.1:
resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
function-bind@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
function.prototype.name@^1.1.5:
version "1.1.5"
resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz"
@ -5255,7 +5317,7 @@ function.prototype.name@^1.1.5:
es-abstract "^1.19.0"
functions-have-names "^1.2.2"
functions-have-names@^1.2.2:
functions-have-names@^1.2.2, functions-have-names@^1.2.3:
version "1.2.3"
resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
@ -5279,6 +5341,16 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@
has "^1.0.3"
has-symbols "^1.0.3"
get-intrinsic@^1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz#281b7622971123e1ef4b3c90fd7539306da93f3b"
integrity sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==
dependencies:
function-bind "^1.1.2"
has-proto "^1.0.1"
has-symbols "^1.0.3"
hasown "^2.0.0"
get-own-enumerable-property-symbols@^3.0.0:
version "3.0.2"
resolved "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz"
@ -5460,6 +5532,13 @@ has@^1.0.3:
dependencies:
function-bind "^1.1.1"
hasown@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
dependencies:
function-bind "^1.1.2"
he@^1.2.0:
version "1.2.0"
resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
@ -6893,7 +6972,7 @@ lodash.uniq@^4.5.0:
resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
version "4.17.21"
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@ -7390,6 +7469,11 @@ param-case@^3.0.4:
dot-case "^3.0.4"
tslib "^2.0.3"
parchment@^1.1.2, parchment@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
parent-module@^1.0.0:
version "1.0.1"
resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
@ -8208,6 +8292,27 @@ quick-lru@^5.1.1:
resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
quill-delta@^3.6.2:
version "3.6.3"
resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
dependencies:
deep-equal "^1.0.1"
extend "^3.0.2"
fast-diff "1.1.2"
quill@^1.3.7:
version "1.3.7"
resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
dependencies:
clone "^2.1.1"
deep-equal "^1.0.1"
eventemitter3 "^2.0.3"
extend "^3.0.2"
parchment "^1.1.4"
quill-delta "^3.6.2"
raf@^3.4.1:
version "3.4.1"
resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
@ -8379,6 +8484,15 @@ react-popper@^2.3.0:
react-fast-compare "^3.0.1"
warning "^4.0.2"
react-quill@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-quill/-/react-quill-2.0.0.tgz#67a0100f58f96a246af240c9fa6841b363b3e017"
integrity sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==
dependencies:
"@types/quill" "^1.3.10"
lodash "^4.17.4"
quill "^1.3.7"
react-refresh@^0.11.0:
version "0.11.0"
resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
@ -8604,6 +8718,15 @@ regexp.prototype.flags@^1.4.3:
define-properties "^1.1.3"
functions-have-names "^1.2.2"
regexp.prototype.flags@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e"
integrity sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==
dependencies:
call-bind "^1.0.2"
define-properties "^1.2.0"
set-function-name "^2.0.0"
regexpp@^3.2.0:
version "3.2.0"
resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
@ -8929,6 +9052,15 @@ serve-static@1.15.0:
parseurl "~1.3.3"
send "0.18.0"
set-function-name@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==
dependencies:
define-data-property "^1.0.1"
functions-have-names "^1.2.3"
has-property-descriptors "^1.0.0"
setprototypeof@1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz"