feat: 관리자 - 컨텐츠관리 - 팝업관리에서 '팝업 추가' API 요청 front-end
parent
b3c99b68cf
commit
811e914666
|
|
@ -34,7 +34,7 @@ function PopupWriter(props) {
|
|||
|
||||
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 [popupDetail, setScheduleDetail] = useState({ startDate: new Date(), endDate: new Date() });
|
||||
|
||||
const [schdulBgndeHH, setSchdulBgndeHH] = useState();
|
||||
const [schdulBgndeMM, setSchdulBgndeMM] = useState();
|
||||
|
|
@ -42,46 +42,72 @@ function PopupWriter(props) {
|
|||
const [schdulEnddeMM, setSchdulEnddeMM] = useState();
|
||||
const [boardAttachFiles, setBoardAttachFiles] = useState();
|
||||
|
||||
useEffect(function () {
|
||||
useEffect(function () {
|
||||
initMode();
|
||||
// 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("반복구분은 필수 값입니다.");
|
||||
if (formData.get('title') === null || formData.get('title') === "") {
|
||||
alert("제목은 필수 값입니다.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (formData.get('schdulBgnde') > formData.get('schdulEndde')) {
|
||||
alert("종료일시는 시작일시보다 앞 설 수 없습니다.");
|
||||
return false;
|
||||
}
|
||||
if (formData.get('contents') === null || formData.get('contents') === "") {
|
||||
alert("내용은 필수 값입니다.");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
const updateSchedule = () => {
|
||||
const initMode = () => {
|
||||
|
||||
// props.mode 값이 없으면 에러가 발생한다.
|
||||
switch (props.mode) {
|
||||
case CODE.MODE_CREATE:
|
||||
setModeInfo({
|
||||
...modeInfo,
|
||||
modeTitle: "등록",
|
||||
method : "POST",
|
||||
editURL: '/contents/api/popup-manage'
|
||||
});
|
||||
break;
|
||||
case CODE.MODE_MODIFY:
|
||||
setModeInfo({
|
||||
...modeInfo,
|
||||
modeTitle: "수정",
|
||||
method : "PUT",
|
||||
editURL: '/contents/api/popup-manage'
|
||||
});
|
||||
break;
|
||||
default:
|
||||
navigate({pathname: URL.ERROR}, {state: {msg : ""}});
|
||||
}
|
||||
//retrieveDetail();
|
||||
}
|
||||
|
||||
|
||||
|
||||
const createPopup = () => {
|
||||
const formData = new FormData();
|
||||
|
||||
for (let key in scheduleDetail) {
|
||||
formData.append(key, scheduleDetail[key]);
|
||||
console.log("scheduleDetail [%s] ", key, scheduleDetail[key]);
|
||||
for (let key in popupDetail) {
|
||||
if ( key === 'startDate' ) {
|
||||
formData.append(key, getDateFourteenDigit( popupDetail[key] ));
|
||||
} else if( key === 'endDate' ) {
|
||||
formData.append(key, getDateFourteenDigit( popupDetail[key] ));
|
||||
} else {
|
||||
formData.append(key, popupDetail[key]);
|
||||
}
|
||||
}
|
||||
|
||||
//게시글 내용
|
||||
formData.append("contents", text);
|
||||
|
||||
if (formValidator(formData)) {
|
||||
const requestOptions = {
|
||||
method: modeInfo.method,
|
||||
|
|
@ -173,14 +199,14 @@ function PopupWriter(props) {
|
|||
<div className="top_tit">
|
||||
<h1 className="tit_1">팝업 추가</h1>
|
||||
</div>
|
||||
|
||||
{/* <!-- 상단 입력 form --> */}
|
||||
<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 })}
|
||||
value={popupDetail.title}
|
||||
onChange={(e) => setScheduleDetail({ ...popupDetail, title: e.target.value })}
|
||||
/>
|
||||
</dd>
|
||||
</dl>
|
||||
|
|
@ -189,14 +215,14 @@ function PopupWriter(props) {
|
|||
<dd className="datetime">
|
||||
<span className="line_break">
|
||||
<DatePicker
|
||||
selected={scheduleDetail.startDate}
|
||||
selected={popupDetail.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 });
|
||||
setScheduleDetail({ ...popupDetail, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), schdulBgndeHH: date.getHours(), schdulBgndeMM: date.getMinutes(), startDate: date });
|
||||
setSchdulBgndeHH(date.getHours());
|
||||
setSchdulBgndeMM(date.getMinutes());
|
||||
}} />
|
||||
|
|
@ -206,15 +232,15 @@ function PopupWriter(props) {
|
|||
</span>
|
||||
<span className="line_break">
|
||||
<DatePicker
|
||||
selected={scheduleDetail.endDate}
|
||||
selected={popupDetail.endDate}
|
||||
name="schdulEndde"
|
||||
className="f_input"
|
||||
dateFormat="yyyy-MM-dd HH:mm"
|
||||
showTimeInput
|
||||
minDate={scheduleDetail.startDate}
|
||||
minDate={popupDetail.startDate}
|
||||
onChange={(date) => {
|
||||
console.log("setEndDate: ", date);
|
||||
setScheduleDetail({ ...scheduleDetail, schdulEndde: getDateFourteenDigit(date), schdulEnddeYYYMMDD: getYYYYMMDD(date), schdulEnddeHH: date.getHours(), schdulEnddeMM: date.getMinutes(), endDate: date });
|
||||
setScheduleDetail({ ...popupDetail, schdulEndde: getDateFourteenDigit(date), schdulEnddeYYYMMDD: getYYYYMMDD(date), schdulEnddeHH: date.getHours(), schdulEnddeMM: date.getMinutes(), endDate: date });
|
||||
setSchdulEnddeHH(date.getHours());
|
||||
setSchdulEnddeMM(date.getMinutes());
|
||||
}
|
||||
|
|
@ -227,7 +253,7 @@ function PopupWriter(props) {
|
|||
<EgovAttachFile
|
||||
fnChangeFile={(attachfile) => {
|
||||
console.log("====>>> Changed attachfile file = ", attachfile);
|
||||
const arrayConcat = { ...scheduleDetail}; // 기존 단일 파일 업로드에서 다중파일 객체 추가로 변환(아래 for문으로)
|
||||
const arrayConcat = { ...popupDetail}; // 기존 단일 파일 업로드에서 다중파일 객체 추가로 변환(아래 for문으로)
|
||||
for ( let i = 0; i < attachfile.length; i++) {
|
||||
arrayConcat[`file_${i}`] = attachfile[i];
|
||||
}
|
||||
|
|
@ -240,7 +266,8 @@ function PopupWriter(props) {
|
|||
boardFiles={boardAttachFiles}
|
||||
mode={props.mode} />
|
||||
</div>
|
||||
|
||||
{/* <!--// 상단 입력 form --> */}
|
||||
|
||||
{/* <!-- 게시판 --> */}
|
||||
<RichTextEditor item={text} setText={setText}/>
|
||||
{/* <!--// 게시판 --> */}
|
||||
|
|
@ -249,22 +276,21 @@ function PopupWriter(props) {
|
|||
<div className="board_btn_area">
|
||||
<div className="left_col btn1">
|
||||
<button className="btn btn_skyblue_h46 w_100"
|
||||
onClick={() => updateSchedule()}
|
||||
onClick={() => createPopup()}
|
||||
> 저장</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue