DBNT
/
kcscDev
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 관리자 - 컨텐츠관리 - 건설기준연구 관리에서 수정 기능 구현 front-end

thkim
thkim 2024-01-26 11:32:59 +09:00
parent 8797ad9570
commit d9f223960a
6 changed files with 141 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
egovframe-template-simple-react-contribution/src/components/editor/RichTextEditor.js
View File

@ -4,7 +4,7 @@ import 'react-quill/dist/quill.snow.css';
// react-quill에 기반을 둔 텍스트 에디터 컴포넌트
const RichTextEditor = ({item, setText}) => {
const style = { height: "400px"};
const style = { height: "400px", paddingBottom: "69px"};
const onChangeEvent = (e) => {
setText(e);

2
egovframe-template-simple-react-contribution/src/constants/url.js
View File

@ -103,6 +103,8 @@ const URL = {
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__STANDARDS_RESEARCH__CREATE : "/admin/contents/standards-research/create", // 컨텐츠 관리/건설기준연구 관리/추가
ADMIN__CONTENTS__STANDARDS_RESEARCH__MODIFY : "/admin/contents/standards-research/modify", // 컨텐츠 관리/건설기준연구 관리/수정
ADMIN__CONTENTS__TEXT_MESSAGES : "/admin/contents/text-messages", // 컨텐츠 관리/문자 발송
// 관리자 - 위원회 관리

4
egovframe-template-simple-react-contribution/src/pages/admin/contents/PopUp/PopupEditor.jsx
View File

@ -21,10 +21,6 @@ const StyledDiv = styled.div`
margin-bottom: 30px;
}
.board_btn_area {
margin-top: 70px;
}
`;

8
egovframe-template-simple-react-contribution/src/pages/admin/contents/StandardResearch.jsx
View File

@ -55,9 +55,9 @@ function StandardResearch(props) {
}
const onChangeActivationSwitch = (e, popupId) => {
const onChangeActivationSwitch = (e, rsId) => {
const checked = e.target.checked;
const requestURL = `/contents/api/popup-manage/activation-switch/${popupId}?checked=${checked}`;
const requestURL = `/contents/api/popup-manage/activation-switch/${rsId}?checked=${checked}`;
const requestOptions = {
method: "PUT",
@ -114,7 +114,7 @@ function StandardResearch(props) {
{/* <!-- 버튼영역 --> */}
<div className="board_btn_area">
<div className="right_col btn1">
<Link to={URL.ADMIN__CONTENTS__POP_UP__CREATE} className="btn btn_blue_h46 w_100">글 작성</Link>
<Link to={URL.ADMIN__CONTENTS__STANDARDS_RESEARCH__CREATE} className="btn btn_blue_h46 w_100">글 작성</Link>
</div>
</div>
{/* <!--// 버튼영역 --> */}
@ -135,7 +135,7 @@ function StandardResearch(props) {
{list.map((it)=>(
<div className='list_item' key={it.id}>
<div>{it.id}</div>
<div className="al"><Link to={URL.ADMIN__CONTENTS__POP_UP__MODIFY} state={{popupId: it.id} } key={it.id}>{it.title}</Link></div>
<div className="al"><Link to={URL.ADMIN__CONTENTS__STANDARDS_RESEARCH__MODIFY} state={{rsId: it.id} } key={it.id}>{it.title}</Link></div>
<div>{it.researchStartDate} ~ {it.researchEndDate}</div>
<div>{it.director}</div>
</div>

200
egovframe-template-simple-react-contribution/src/pages/admin/contents/StandardResearch/StandardResearchEditor.jsx
View File

@ -21,9 +21,20 @@ const StyledDiv = styled.div`
margin-bottom: 30px;
}
.board_btn_area {
margin-top: 70px;
.label-text-editor {
font-size: 19px;
font-weight: 600;
color: #212529;
margin-bottom: 10px;
.req {
display: inline-block;
width: 7px;
height: 7px;
margin-left: 2px;
font-size: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdCNDNBMURDRjVFRDExRUJBMkM3OUEyMERCMzg3NTBGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdCNDNBMURERjVFRDExRUJBMkM3OUEyMERCMzg3NTBGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0I0M0ExREFGNUVEMTFFQkEyQzc5QTIwREIzODc1MEYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0I0M0ExREJGNUVEMTFFQkEyQzc5QTIwREIzODc1MEYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5vOlo3AAAAbElEQVR42mL4//8/Awy/zij/D8ShMD7Tm8wKQQYsACTOCFS5Csh2AeKzUPoeVP49E5BIB+JOIFaCCoJMWg3Erkwi0zveAxmzoIL3oPRZkDgTVHUHVMIEqrAcJMgClQQZywA1JR3omFAQHyDAAEctLdb1Cc0kAAAAAElFTkSuQmCC) no-repeat;
vertical-align: 17px;
}
}
`;
@ -34,16 +45,16 @@ function StandardResearchEditor(props) {
const location = useLocation();
const [modeInfo, setModeInfo] = useState({ mode: props.mode });
const [text, setText] = useState("");
const [textOriginal, setTextOriginal] = useState("");
const [popupDetail, setPopupDetail] = useState({ startDate: new Date(), endDate: new Date() });
const [purpose, setPurpose] = useState("");
const [purposeOriginal, setPurposeOriginal] = useState("");
const [content, setContent] = useState("");
const [contentOriginal, setContentOriginal] = useState("");
const [effectContent, setEffectContent] = useState("");
const [effectContentOriginal, setEffectContentOriginal] = useState("");
const [schdulBgndeHH, setSchdulBgndeHH] = useState();
const [schdulBgndeMM, setSchdulBgndeMM] = useState();
const [schdulEnddeHH, setSchdulEnddeHH] = useState();
const [schdulEnddeMM, setSchdulEnddeMM] = useState();
const [boardAttachFiles, setBoardAttachFiles] = useState();
const [standardResearchDetail, setStandardResearchDetail] = useState({ researchStartDate: new Date(), researchEndDate: new Date() });
const [confirm, setConfirm] = React.useState();
@ -55,7 +66,7 @@ function StandardResearchEditor(props) {
const formValidator = (formData) => {
if (formData.get('title') === null || formData.get('title') === "") {
alert("제목은 필수 값입니다.");
alert("연구명은 필수 값입니다.");
return false;
}
@ -63,8 +74,24 @@ function StandardResearchEditor(props) {
alert("종료일시는 시작일시보다 앞 설 수 없습니다.");
return false;
}
if (formData.get('contents') === null || formData.get('contents') === "") {
alert("내용은 필수 값입니다.");
if (formData.get('director') === null || formData.get('director') === "") {
alert("연구책임자는 필수 값입니다.");
return false;
}
if (formData.get('purpose') === null || formData.get('purpose') === "") {
alert("연구목적은 필수 값입니다.");
return false;
}
if (formData.get('content') === null || formData.get('content') === "") {
alert("연구내용은 필수 값입니다.");
return false;
}
if (formData.get('effectContent') === null || formData.get('effectContent') === "") {
alert("기대효과는 필수 값입니다.");
return false;
}
return true;
@ -79,7 +106,7 @@ function StandardResearchEditor(props) {
...modeInfo,
modeTitle: "등록",
method : "POST",
editURL: '/contents/api/popup-manage'
editURL: '/contents/standard-research'
});
break;
case CODE.MODE_MODIFY:
@ -87,7 +114,7 @@ function StandardResearchEditor(props) {
...modeInfo,
modeTitle: "수정",
method : "PUT",
editURL: '/contents/api/popup-manage'
editURL: '/contents/standard-research'
});
break;
default:
@ -102,7 +129,7 @@ function StandardResearchEditor(props) {
return;
}
const retrieveDetailURL = `/contents/api/popup-manage/${location.state?.popupId}`;
const retrieveDetailURL = `/contents/standard-research/${location.state?.rsId}`;
const requestOptions = {
method: "GET",
headers: {
@ -114,36 +141,49 @@ function StandardResearchEditor(props) {
function (resp) {
let rawDetail = resp.result;
//기본값 설정
setPopupDetail({
...popupDetail,
setStandardResearchDetail({
...standardResearchDetail,
...rawDetail,
startDate: convertDate(rawDetail.schdulBgnde),
endDate: convertDate(rawDetail.schdulEndde),
researchStartDate: convertDate(rawDetail.researchStartDate),
researchEndDate: convertDate(rawDetail.researchEndDate),
});
setText(rawDetail.contents);
setTextOriginal(rawDetail.contents);
setPurpose(rawDetail.purpose);
setPurposeOriginal(rawDetail.purpose);
setContent(rawDetail.content);
setContentOriginal(rawDetail.content);
setEffectContent(rawDetail.effectContent);
setEffectContentOriginal(rawDetail.effectContent);
}
);
}
const createPopup = () => {
const createItem = () => {
const formData = new FormData();
for (let key in popupDetail) {
if ( key === 'startDate' ) {
formData.append(key, getDateFourteenDigit( popupDetail[key] ));
} else if( key === 'endDate' ) {
formData.append(key, getDateFourteenDigit( popupDetail[key] ));
for (let key in standardResearchDetail) {
if ( key === 'researchStartDate' ) {
formData.append(key, getDateFourteenDigit( standardResearchDetail[key] ));
} else if( key === 'researchEndDate' ) {
formData.append(key, getDateFourteenDigit( standardResearchDetail[key] ));
} else {
formData.append(key, popupDetail[key]);
formData.append(key, standardResearchDetail[key]);
}
}
//게시글 내용
formData.delete("contents");
formData.append("contents", text);
//연구 목적
formData.delete("purpose");
formData.append("purpose", purpose);
//연구 내용
formData.delete("content");
formData.append("content", content);
//기대 효과
formData.delete("effectContent");
formData.append("effectContent", effectContent);
if (formValidator(formData)) {
const requestOptions = {
@ -159,7 +199,7 @@ function StandardResearchEditor(props) {
if (modeInfo.mode === CODE.MODE_MODIFY) {
alert("게시글이 수정 되었습니다.");
}
navigate({ pathname: URL.ADMIN__CONTENTS__POP_UP });
navigate({ pathname: URL.ADMIN__CONTENTS__STANDARDS_RESEARCH });
} else {
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
}
@ -171,15 +211,15 @@ function StandardResearchEditor(props) {
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}`}});
setConfirm({...confirm, open: true, body: "수정하시겠습니까?", yesCallback: requestTask, yesCallbackParams: {requestUrl:`${modeInfo.editURL}/${location.state?.rsId}`}});
}
}
}
const onClickDelete = (popupId) => {
const deleteBoardURL = `/contents/api/popup-manage/${popupId}`;
const onClickDelete = (rsId) => {
const deleteBoardURL = `/contents/standard-research/${rsId}`;
const requestOptions = {
method: "DELETE",
@ -210,7 +250,12 @@ function StandardResearchEditor(props) {
const requestTask = () => {
navigate(URL.ADMIN__CONTENTS__POP_UP ,{ replace: true });
};
if( text !== textOriginal ) {
if( purpose !== purposeOriginal ) {
setConfirm({...confirm, open: true, body: "작업 내용을 취소하시겠습니까?", yesCallback: requestTask});
} else if( content !== contentOriginal ) {
setConfirm({...confirm, open: true, body: "작업 내용을 취소하시겠습니까?", yesCallback: requestTask});
} else if( effectContent !== effectContentOriginal ) {
setConfirm({...confirm, open: true, body: "작업 내용을 취소하시겠습니까?", yesCallback: requestTask});
} else {
requestTask();
@ -245,7 +290,7 @@ function StandardResearchEditor(props) {
<li><Link to={URL.MAIN} className="home">Home</Link></li>
<li><Link to={URL.ADMIN}>사이트 관리</Link></li>
<li>컨텐츠 관리</li>
<li>팝업 관리</li>
<li>건설기준연구 관리</li>
</ul>
</div>
)
@ -267,91 +312,82 @@ function StandardResearchEditor(props) {
{/* <!-- 본문 --> */}
<StyledDiv>
<div className="top_tit">
<h1 className="tit_1">팝업 추가</h1>
<h1 className="tit_1">건설기준연구 추가</h1>
</div>
{/* <!-- 상단 입력 form --> */}
<div className='board_view2'>
<dl>
<dt><label htmlFor="title">제목</label><span className="req">필수</span></dt>
<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={popupDetail.title}
onChange={(e) => setPopupDetail({ ...popupDetail, title: e.target.value })}
<input className="f_input2 w_full" type="text" name="title" title="연구명" id="title" placeholder="연구명을 입력하세요."
value={standardResearchDetail.title}
onChange={(e) => setStandardResearchDetail({ ...standardResearchDetail, title: e.target.value })}
/>
</dd>
</dl>
<dl>
<dt>기간<span className="req">필수</span></dt>
<dt>연구 기간<span className="req">필수</span></dt>
<dd className="datetime">
<span className="line_break">
<DatePicker
selected={popupDetail.startDate}
name="schdulBgnde"
selected={standardResearchDetail.researchStartDate}
name="researchStartDate"
className="f_input"
dateFormat="yyyy-MM-dd HH:mm"
showTimeInput
dateFormat="yyyy-MM-dd"
onChange={(date) => {
console.log("setStartDate : ", date);
setPopupDetail({ ...popupDetail, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), schdulBgndeHH: date.getHours(), schdulBgndeMM: date.getMinutes(), startDate: date });
setSchdulBgndeHH(date.getHours());
setSchdulBgndeMM(date.getMinutes());
setStandardResearchDetail({ ...standardResearchDetail, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), researchStartDate: date });
}} />
<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={popupDetail.endDate}
name="schdulEndde"
selected={standardResearchDetail.researchEndDate}
name="researchEndDate"
className="f_input"
dateFormat="yyyy-MM-dd HH:mm"
showTimeInput
minDate={popupDetail.startDate}
dateFormat="yyyy-MM-dd"
minDate={standardResearchDetail.researchStartDate}
onChange={(date) => {
console.log("setEndDate: ", date);
setPopupDetail({ ...popupDetail, schdulEndde: getDateFourteenDigit(date), schdulEnddeYYYMMDD: getYYYYMMDD(date), schdulEnddeHH: date.getHours(), schdulEnddeMM: date.getMinutes(), endDate: date });
setSchdulEnddeHH(date.getHours());
setSchdulEnddeMM(date.getMinutes());
setStandardResearchDetail({ ...standardResearchDetail, schdulEndde: getDateFourteenDigit(date), schdulEnddeYYYMMDD: getYYYYMMDD(date), researchEndDate: date });
}
} />
<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 = { ...popupDetail}; // 기존 단일 파일 업로드에서 다중파일 객체 추가로 변환(아래 for문으로)
for ( let i = 0; i < attachfile.length; i++) {
arrayConcat[`file_${i}`] = attachfile[i];
}
setPopupDetail(arrayConcat);
}}
fnDeleteFile={(deletedFile) => {
console.log("====>>> Delete deletedFile = ", deletedFile);
setBoardAttachFiles(deletedFile);
}}
boardFiles={boardAttachFiles}
mode={props.mode} />
<dl>
<dt><label htmlFor="director">연구 책임자</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="director" title="연구 책임자" id="director" placeholder="연구 책임자를 입력하세요."
value={standardResearchDetail.director}
onChange={(e) => setStandardResearchDetail({ ...standardResearchDetail, director: e.target.value })}
/>
</dd>
</dl>
</div>
{/* <!--// 상단 입력 form --> */}
{/* <!-- 게시판 --> */}
<RichTextEditor item={text} setText={setText}/>
<label className="label-text-editor">연구 목적<span className="req">필수</span></label>
<RichTextEditor item={purpose} setText={setPurpose}/>
<label className="label-text-editor">연구 내용<span className="req">필수</span></label>
<RichTextEditor item={content} setText={setContent}/>
<label className="label-text-editor">기대 효과<span className="req">필수</span></label>
<RichTextEditor item={effectContent} setText={setEffectContent}/>
{/* <!--// 게시판 --> */}
{/* <!-- 버튼영역 --> */}
<div className="board_btn_area">
<div className="left_col btn1">
<button className="btn btn_skyblue_h46 w_100"
onClick={() => createPopup()}
onClick={() => createItem()}
> 저장</button>
{modeInfo.mode === CODE.MODE_MODIFY &&
<button className="btn btn_skyblue_h46 w_100"
onClick={(e) => {
onClickDelete(location.state?.popupId);
onClickDelete(location.state?.rsId);
}}>삭제</button>
}
</div>

9
egovframe-template-simple-react-contribution/src/routes/index.jsx
View File

@ -91,8 +91,9 @@ import AdminStandardsInfoDisclosure from 'pages/admin/standards/InfoDisclosure';
// 관리자 - 컨텐츠 관리
import AdminContentsSurvey from 'pages/admin/contents/Survey'; // 관리자 - 컨텐츠 관리/설문 관리
import AdminContentsPopUp from 'pages/admin/contents/PopUp'; // 관리자 - 컨텐츠 관리/팝업 관리
import AdminContentsPopUpWriter from 'pages/admin/contents/PopUp/PopupEditor'; // 관리자 - 컨텐츠 관리/팝업 관리/팝업 추가 또는 수정
import AdminContentsPopUpEditor from 'pages/admin/contents/PopUp/PopupEditor'; // 관리자 - 컨텐츠 관리/팝업 관리/팝업 추가 또는 수정
import AdminContentsStandardResearch from 'pages/admin/contents/StandardResearch'; // 관리자 - 컨텐츠 관리/건설기준연구 관리
import AdminContentsStandardResearchEditor from 'pages/admin/contents/StandardResearch/StandardResearchEditor'; // 컨텐츠 관리/건설기준연구 관리/추가 또는 수정
import AdminContentsTextMessages from 'pages/admin/contents/TextMessages'; // 관리자 - 컨텐츠 관리/문자 발송
// 관리자 - 위원회 관리
@ -298,9 +299,11 @@ 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__POP_UP__CREATE} element={<AdminContentsPopUpEditor mode={CODE.MODE_CREATE} />} />
<Route path={URL.ADMIN__CONTENTS__POP_UP__MODIFY} element={<AdminContentsPopUpEditor mode={CODE.MODE_MODIFY} />} />
<Route path={URL.ADMIN__CONTENTS__STANDARDS_RESEARCH} element={<AdminContentsStandardResearch />} />
<Route path={URL.ADMIN__CONTENTS__STANDARDS_RESEARCH__CREATE} element={<AdminContentsStandardResearchEditor mode={CODE.MODE_CREATE} />} />
<Route path={URL.ADMIN__CONTENTS__STANDARDS_RESEARCH__MODIFY} element={<AdminContentsStandardResearchEditor mode={CODE.MODE_MODIFY} />} />
<Route path={URL.ADMIN__CONTENTS__TEXT_MESSAGES} element={<AdminContentsTextMessages />} />
{/* 관리자 - 위원회 관리 */}