feat: 관리자 - 컨텐츠관리 - 팝업관리에서 특정 팝업 눌러서 삭제 및 수정 시 물어보고 수행하도록 로직 변경

egovframe-template-simple-react-contribution/src/components/alert/AlertDialogSlide.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Slide from '@mui/material/Slide';
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+export default function AlertDialogSlide({confirm, setConfirm}) {  
+
+    useEffect(function () {        
+        if( confirm ) {
+            setConfirm({
+                ...confirm,
+                //open: !confirm.open && false,
+                //title: !confirm.title && "중요",
+                ///yes: !confirm.yes && "예",
+                //no: !confirm.no && "아니요",
+            });
+        }        
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+
+    const handleClose = () => {
+        setConfirm({...confirm, open: false});
+    };
+
+    return (
+        <React.Fragment>
+            {confirm &&
+                <Dialog
+                    open={ confirm.open }
+                    TransitionComponent={Transition}
+                    keepMounted
+                    onClose={handleClose}
+                    aria-describedby="alert-dialog-slide-description"
+                >
+                    <DialogTitle>{confirm.title ? confirm.title : "알림"}</DialogTitle>
+                    <DialogContent>
+                    <DialogContentText id="alert-dialog-slide-description">{confirm.body}</DialogContentText>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => {handleClose(); confirm.yesCallback && confirm.yesCallback(confirm.yesCallbackParams);}}>{confirm.yes ? confirm.yes : "예"}</Button>
+                        <Button onClick={() => {handleClose(); confirm.noCallback && confirm.noCallback(confirm.noCallbackParams);}}>{confirm.no ? confirm.no : "아니요"}</Button>
+                    </DialogActions>
+                </Dialog>
+            }
+      
+    </React.Fragment>
+  );
+}

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

@@ -1,13 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import Switch from '@mui/material/Switch';
 
 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 EgovPagingPaginationInfo from 'components/EgovPagingPaginationInfo';
 
+
 import styled from "styled-components";
 
 const StyledDiv = styled.div`
@@ -21,6 +23,7 @@ const label = { inputProps: { 'aria-label': '사용여부' } };
 function PopUp(props) {
     
     const location = useLocation();
+    const navigate = useNavigate();
 
     const [listPopup, setListPopup] = useState([]);
     const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || { pageIndex: 1, searchCnd: '0', searchWrd: '' });
@@ -52,6 +55,32 @@ function PopUp(props) {
     }
 
 
+    const onChangeActivationSwitch = (e, popupId) => {
+        const checked = e.target.checked;
+        const requestURL = `/contents/api/popup-manage/activation-switch/${popupId}?checked=${checked}`;
+
+        const requestOptions = {
+            method: "PUT",
+            headers: {
+                'Content-type': 'application/json',
+            }
+        }
+
+        EgovNet.requestFetch(requestURL,
+            requestOptions,
+            (resp) => {
+                console.log("====>>> Schdule delete= ", resp);
+                if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
+                    navigate(URL.ADMIN__CONTENTS__POP_UP ,{ replace: true });
+                } else {
+                    navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
+                }
+
+            }
+        );
+    }
+
+    
 	const Location = React.memo(function Location() {
         return (
             <div className="location">
@@ -106,11 +135,11 @@ function PopUp(props) {
                                         <p className="no_data" key="0">검색된 결과가 없습니다.</p>
                                     }                                    
                                     {listPopup.map((it)=>(
-                                        <div className='list_item'>
+                                        <div className='list_item' key={it.seq}>
                                             <div>{it.seq}</div>
                                             <div className="al"><Link to={URL.ADMIN__CONTENTS__POP_UP__MODIFY} state={{popupId: it.seq} } key={it.seq}>{it.popupTitle}</Link></div>
                                             <div>{it.startDate} ~ {it.endDate}</div>
-                                            <div>{it.useYn === 'Y' ? <Switch {...label} defaultChecked /> : <Switch {...label} />}</div>
+                                            <div>{it.useYn === 'Y' ? <Switch {...label} key={it.seq} onChange={(e) => onChangeActivationSwitch(e, it.seq)} defaultChecked /> : <Switch key={it.seq} onChange={(e) => onChangeActivationSwitch(e, it.seq)} {...label} />}</div>
                                         </div>
                                     ))}
                                 </div>

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

@@ -4,6 +4,7 @@ import DatePicker from "react-datepicker";
 
 import EgovAttachFile from 'components/EgovAttachFile';
 import RichTextEditor from "../../../../components/editor/RichTextEditor";
+import AlertDialogSlide from "../../../../components/alert/AlertDialogSlide";
 import CODE from 'constants/code';
 
 
@@ -34,7 +35,8 @@ function PopupWriter(props) {
 
     const [modeInfo, setModeInfo] = useState({ mode: props.mode });
     const [text, setText] = useState("");
-    const [popupDetail, setScheduleDetail] = useState({ startDate: new Date(), endDate: new Date() });
+    const [textOriginal, setTextOriginal] = useState("");
+    const [popupDetail, setPopupDetail] = useState({ startDate: new Date(), endDate: new Date() });
 
     const [schdulBgndeHH, setSchdulBgndeHH] = useState();
     const [schdulBgndeMM, setSchdulBgndeMM] = useState();
@@ -42,6 +44,10 @@ function PopupWriter(props) {
     const [schdulEnddeMM, setSchdulEnddeMM] = useState();
     const [boardAttachFiles, setBoardAttachFiles] = useState();
 
+    const [confirm, setConfirm] = React.useState();
+
+    
+
     useEffect(function () {
         initMode();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -108,13 +114,14 @@ function PopupWriter(props) {
             function (resp) {
                 let rawDetail = resp.result;
                 //기본값 설정
-                setScheduleDetail({
+                setPopupDetail({
                     ...popupDetail,
                     ...rawDetail,
                     startDate: convertDate(rawDetail.schdulBgnde),
                     endDate: convertDate(rawDetail.schdulEndde),
                 });
                 setText(rawDetail.contents);
+                setTextOriginal(rawDetail.contents);
             }
         );        
     }
@@ -144,25 +151,35 @@ function PopupWriter(props) {
                 body: formData
             }
 
-            if (modeInfo.mode === CODE.MODE_MODIFY) {
+            const requestTask = (callbackParams) => {
-                modeInfo.editURL = `${modeInfo.editURL}/${location.state?.popupId}`;
+                EgovNet.requestFetch(callbackParams.requestUrl,
-            }
-            EgovNet.requestFetch(modeInfo.editURL,
                     requestOptions,
                     (resp) => {
                         if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
+                            if (modeInfo.mode === CODE.MODE_MODIFY) {
+                                alert("게시글이 수정 되었습니다.");
+                            }
                             navigate({ pathname: URL.ADMIN__CONTENTS__POP_UP });
                         } else {
                             navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
                         }
                     }
                 );
+            };
+
+            
+            if (modeInfo.mode === CODE.MODE_CREATE) {
+                setConfirm({...confirm, open: true, body: "추가하시겠습니까?", yesCallback: requestTask, yesCallbackParams: {requestUrl:modeInfo.editURL}});
+            } else if (modeInfo.mode === CODE.MODE_MODIFY) {
+                setConfirm({...confirm, open: true, body: "수정하시겠습니까?", yesCallback: requestTask, yesCallbackParams: {requestUrl:`${modeInfo.editURL}/${location.state?.popupId}`}});
+            }
+            
         }
 
     }
 
     const onClickDelete = (popupId) => {
-        const deleteBoardURL = `/schedule/${popupId}`;
+        const deleteBoardURL = `/contents/api/popup-manage/${popupId}`;
 
         const requestOptions = {
             method: "DELETE",
@@ -171,21 +188,36 @@ function PopupWriter(props) {
             }
         }
 
+        const requestTask = () => {
             EgovNet.requestFetch(deleteBoardURL,
                 requestOptions,
                 (resp) => {
-                console.log("====>>> Schdule delete= ", resp);
                     if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
-                    alert("게시글이 삭제되었습니다.")
+                        alert("삭제 되었습니다.");
-                    navigate(URL.ADMIN__COMMITTEE__SCHEDULES ,{ replace: true });
+                        navigate(URL.ADMIN__CONTENTS__POP_UP ,{ replace: true });
                     } else {
-                    // alert("ERR : " + resp.message);
                         navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
                     }    
+                }
+            );
+        };        
+
+        setConfirm({...confirm, open: true, body: "삭제하시겠습니까?", yesCallback: requestTask});
+    }
+
+    const onClickList = (e) => {
+
+        const requestTask = () => {       
+            navigate(URL.ADMIN__CONTENTS__POP_UP ,{ replace: true });
+        };
+        if( text !== textOriginal ) {
+            setConfirm({...confirm, open: true, body: "작업 내용을 취소하시겠습니까?", yesCallback: requestTask});
+        } else {
+            requestTask();
+        }
         
     }
-        );
+    
-    }
 
     const convertDate = (str) => {
         let year = str.substring(0, 4);
@@ -244,7 +276,7 @@ function PopupWriter(props) {
                                     <dd>
                                         <input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
                                             value={popupDetail.title}
-                                            onChange={(e) => setScheduleDetail({ ...popupDetail, title: e.target.value })}
+                                            onChange={(e) => setPopupDetail({ ...popupDetail, title: e.target.value })}
                                         />
                                     </dd>
                                 </dl>
@@ -260,7 +292,7 @@ function PopupWriter(props) {
                                                 showTimeInput
                                                 onChange={(date) => {
                                                     console.log("setStartDate : ", date);
-                                                    setScheduleDetail({ ...popupDetail, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), schdulBgndeHH: date.getHours(), schdulBgndeMM: date.getMinutes(), startDate: date });
+                                                    setPopupDetail({ ...popupDetail, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), schdulBgndeHH: date.getHours(), schdulBgndeMM: date.getMinutes(), startDate: date });
                                                     setSchdulBgndeHH(date.getHours());
                                                     setSchdulBgndeMM(date.getMinutes());
                                                 }} />
@@ -278,7 +310,7 @@ function PopupWriter(props) {
                                                 minDate={popupDetail.startDate}
                                                 onChange={(date) => {
                                                     console.log("setEndDate: ", date);
-                                                    setScheduleDetail({ ...popupDetail, schdulEndde: getDateFourteenDigit(date), schdulEnddeYYYMMDD: getYYYYMMDD(date), schdulEnddeHH: date.getHours(), schdulEnddeMM: date.getMinutes(), endDate: date });
+                                                    setPopupDetail({ ...popupDetail, schdulEndde: getDateFourteenDigit(date), schdulEnddeYYYMMDD: getYYYYMMDD(date), schdulEnddeHH: date.getHours(), schdulEnddeMM: date.getMinutes(), endDate: date });
                                                     setSchdulEnddeHH(date.getHours());
                                                     setSchdulEnddeMM(date.getMinutes());
                                                 }
@@ -295,7 +327,7 @@ function PopupWriter(props) {
 									for ( let i = 0; i < attachfile.length; i++) {
 										arrayConcat[`file_${i}`] = attachfile[i];
 									}
-                                    setScheduleDetail(arrayConcat);
+                                    setPopupDetail(arrayConcat);
                                 }}
                                 fnDeleteFile={(deletedFile) => {
                                     console.log("====>>> Delete deletedFile = ", deletedFile);
@@ -324,11 +356,13 @@ function PopupWriter(props) {
                                     }                                    
                                 </div>
                                 <div className="right_col btn1">
-                                    <Link to={URL.ADMIN__CONTENTS__POP_UP} className="btn btn_blue_h46 w_100">목록</Link>
+                                    <button className="btn btn_blue_h46 w_100"
+                                        onClick={onClickList}>목록</button> 
                                 </div>
                             </div>
                             {/* <!--// 버튼영역 --> */}
 
+                            <AlertDialogSlide confirm={confirm} setConfirm={setConfirm} />
                         </StyledDiv>                        
                         {/* <!--// 본문 --> */}
                     </div>