feat: 관리자 - 컨텐츠관리 - 팝업관리에서 '팝업 추가' API 요청 front-end

egovframe-template-simple-react-contribution/src/pages/admin/contents/PopUp/Writer.jsx

@@ -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();
@@ -43,45 +43,71 @@ function PopupWriter(props) {
     const [boardAttachFiles, setBoardAttachFiles] = useState();
 
     useEffect(function () {
+        initMode();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
    
     const formValidator = (formData) => {
-        if (formData.get('schdulNm') === null || formData.get('schdulNm') === "") {
+        if (formData.get('title') === null || formData.get('title') === "") {
-            alert("일정명은 필수 값입니다.");
+            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;
         }
+        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) {
+        for (let key in popupDetail) {
-            formData.append(key, scheduleDetail[key]);
+            if ( key === 'startDate' ) {
-            console.log("scheduleDetail [%s] ", key, scheduleDetail[key]);
+                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}
+                                            value={popupDetail.title}
-                                            onChange={(e) => setScheduleDetail({ ...scheduleDetail, title: e.target.value })}
+                                            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,6 +266,7 @@ function PopupWriter(props) {
                                 boardFiles={boardAttachFiles}
                                 mode={props.mode} />
                             </div>
+                            {/* <!--// 상단 입력 form --> */}
 
                             {/* <!-- 게시판 --> */}
                             <RichTextEditor item={text} setText={setText}/>
@@ -249,7 +276,7 @@ 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"
@@ -257,14 +284,13 @@ function PopupWriter(props) {
                                             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>