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

게시판관리 추가/수정 모달

thkim
유민형 2024-02-05 14:51:06 +09:00
parent 64e4b07953
commit 1cd9cf8202
4 changed files with 169 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

388
egovframe-template-simple-react-contribution/src/pages/admin/board/EgovAdminBoardEdit.jsx
View File

@ -1,11 +1,12 @@
import React, { useState, useEffect, useRef } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import React, {useState, useEffect, useRef} from 'react';
import {Link, useNavigate, useLocation, useParams} from 'react-router-dom';
import Modal from "react-bootstrap/Modal";
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 {default as EgovLeftNav} from 'components/leftmenu/EgovLeftNavAdmin';
import EgovRadioButtonGroup from 'components/EgovRadioButtonGroup';
@ -16,64 +17,44 @@ function EgovAdminBoardEdit(props) {
const navigate = useNavigate();
const location = useLocation();
const checkRef = useRef([]);
const checkRef = useRef([]);
console.log("EgovAdminBoardEdit [location] : ", location);
const replyPosblAtRadioGroup = [{ value: "Y", label: "가능" }, { value: "N", label: "불가능" }];
const fileAtchPosblAtRadioGroup = [{ value: "Y", label: "가능" }, { value: "N", label: "불가능" }];
const bbsTyCodeOptions = [{ value: "", label: "선택" }, { value: "BBST01", label: "일반게시판" }, { value: "BBST03", label: "공지게시판" }];
const bbsAttrbCodeOptions = [{ value: "", label: "선택" }, { value: "BBSA02", label: "갤러리" }, { value: "BBSA03", label: "일반게시판" }];
const posblAtchFileNumberOptions = [{ value: 0, label: "선택하세요" }, { value: 1, label: "1개" }, { value: 2, label: "2개" }, { value: 3, label: "3개" }];
const bbsId = location.state?.bbsId || "";
const replyPosblAtRadioGroup = [{value: "Y", label: "가능"}, {value: "N", label: "불가능"}];
const fileAtchPosblAtRadioGroup = [{value: "Y", label: "가능"}, {value: "N", label: "불가능"}];
const bbsTyCodeOptions = [{value: "", label: "선택"}, {value: "BBST01", label: "일반게시판"}, {value: "BBST03", label: "공지게시판"}];
const bbsAttrbCodeOptions = [{value: "", label: "선택"}, {value: "BBSA02", label: "갤러리"}, {value: "BBSA03", label: "일반게시판"}];
const posblAtchFileNumberOptions = [{value: 0, label: "선택하세요"}, {value: 1, label: "1개"}, {value: 2, label: "2개"}, {value: 3, label: "3개"}];
const [modeInfo, setModeInfo] = useState({ mode: props.mode });
let item = null;
item = props.props;
console.log("@@@ item : " + JSON.stringify(item));
const [modeInfo, setModeInfo] = useState(item != null ? {mode: props.props.mode} : {mode: CODE.MODE_CREATE});
const [boardDetail, setBoardDetail] = useState({});
console.log("@@@ mode : " + modeInfo.mode);
const initMode = () => {
switch (props.mode) {
case CODE.MODE_CREATE:
setModeInfo({
...modeInfo,
modeTitle: "등록",
editURL: '/cop/bbs/insertBBSMasterInfAPI.do'
});
break;
case CODE.MODE_MODIFY:
setModeInfo({
...modeInfo,
modeTitle: "수정",
editURL: `/cop/bbs/updateBBSMasterInfAPI/${bbsId}.do`
});
break;
default:
navigate({pathname: URL.ERROR}, {state: {msg : ""}});
}
retrieveDetail();
}
const retrieveDetail = () => {
if (modeInfo.mode === CODE.MODE_CREATE) {// 조회/등록이면 조회 안함
setBoardDetail({
tmplatId: "TMPLAT_BOARD_DEFAULT", //Template 고정
replyPosblAt: "Y", //답장가능여부 초기값
fileAtchPosblAt: "Y" //파일첨부가능여부 초기값
});
return;
}
const retrieveDetailURL = '/cop/bbs/selectBBSMasterInfAPI.do';
const retrieveDetailURL = '/admin/boards/board';
const requestOptions = {
method: "POST",
method: "GET",
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify({
bbsId: bbsId
})
}
}
EgovNet.requestFetch(retrieveDetailURL,
@ -81,18 +62,18 @@ function EgovAdminBoardEdit(props) {
function (resp) {
// 수정모드일 경우 조회값 세팅
if (modeInfo.mode === CODE.MODE_MODIFY) {
setBoardDetail(resp.result.boardMasterVO);
setBoardDetail(item);
}
}
);
}
const formValidator = (formData) => {
if (formData.get('bbsNm') === null || formData.get('bbsNm') === "") {
const formValidator = (formData) => {
if (formData.get('bbsTitle') === null || formData.get('bbsTitle') === "") {
alert("게시판명은 필수 값입니다.");
return false;
}
if (formData.get('bbsIntrcn') === null || formData.get('bbsIntrcn') === "") {
if (formData.get('bbsDesc') === null || formData.get('bbsDesc') === "") {
alert("게시판 소개는 필수 값입니다.");
return false;
}
@ -112,15 +93,15 @@ function EgovAdminBoardEdit(props) {
};
const formObjValidator = (checkRef) => {
if(checkRef.current[0].value === ""){
if (checkRef.current[0].value === "") {
alert("게시판명은 필수 값입니다.");
return false;
}
if(checkRef.current[1].value === ""){
if (checkRef.current[1].value === "") {
alert("게시판 소개는 필수 값입니다.");
return false;
}
if(checkRef.current[2].value === "0"){
if (checkRef.current[2].value === "0") {
alert("첨부파일 가능 숫자는 필수 값입니다.");
return false;
}
@ -131,38 +112,37 @@ function EgovAdminBoardEdit(props) {
let modeStr = modeInfo.mode === CODE.MODE_CREATE ? "POST" : "PUT";
let requestOptions ={};
let requestOptions = {};
if (modeStr === "POST") {
const formData = new FormData();
for (let key in boardDetail) {
formData.append(key, boardDetail[key]);
//console.log("boardDetail [%s] ", key, boardDetail[key]);
for (let key in boardDetail) {
formData.append(key, boardDetail[key]);
//console.log("boardDetail [%s] ", key, boardDetail[key]);
}
if (formValidator(formData)) {
requestOptions = {
method: modeStr,
headers: {},
body: formData
}
if (formValidator(formData)) {
requestOptions = {
method: modeStr,
headers: {
},
body: formData
}
EgovNet.requestFetch(modeInfo.editURL,
requestOptions,
(resp) => {
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
navigate({ pathname: URL.ADMIN_BOARD });
} else {
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
}
EgovNet.requestFetch(modeInfo.editURL,
requestOptions,
(resp) => {
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
navigate({pathname: URL.ADMIN_BOARD});
} else {
navigate({pathname: URL.ERROR}, {state: {msg: resp.resultMessage}});
}
);
};
}
);
}
;
} else {
if (formObjValidator(checkRef)) {
@ -171,7 +151,7 @@ function EgovAdminBoardEdit(props) {
method: modeStr,
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify({...boardDetail})
}
@ -180,24 +160,24 @@ function EgovAdminBoardEdit(props) {
requestOptions,
(resp) => {
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
navigate({ pathname: URL.ADMIN_BOARD });
navigate({pathname: URL.ADMIN_BOARD});
} else {
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
navigate({pathname: URL.ERROR}, {state: {msg: resp.resultMessage}});
}
}
);
}
}
}
};
const deleteBoardArticle = (bbsId) => {
const deleteBoardURL = `/cop/bbs/deleteBBSMasterInfAPI/${bbsId}.do`;
const requestOptions = {
method: "PUT",
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify({
bbsId: bbsId
@ -210,7 +190,7 @@ function EgovAdminBoardEdit(props) {
console.log("====>>> board delete= ", resp);
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
alert("게시글이 삭제되었습니다.")
navigate(URL.ADMIN_BOARD, { replace: true });
navigate(URL.ADMIN_BOARD, {replace: true});
} else {
alert("ERR : " + resp.resultMessage);
}
@ -225,206 +205,76 @@ function EgovAdminBoardEdit(props) {
useEffect(() => {
initMode();
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
console.log("------------------------------EgovAdminBoardEdit [End]");
console.groupEnd("EgovAdminBoardEdit");
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>
</ul>
</div>
{/* <!--// Location --> */}
<>
{/* <!-- 본문 --> */}
<Modal.Header>
<Modal.Title>
{modeInfo.mode === CODE.MODE_CREATE && '게시판 생성'}
{modeInfo.mode === CODE.MODE_MODIFY && '게시판 수정'}
</Modal.Title>
</Modal.Header>
<div className="layout">
{/* <!-- Navigation --> */}
<EgovLeftNav></EgovLeftNav>
{/* <!--// Navigation --> */}
<div className="contents BOARD_CREATE_REG" id="contents">
{/* <!-- 본문 --> */}
<div className="top_tit">
<h1 className="tit_1">사이트관리</h1>
</div>
{modeInfo.mode === CODE.MODE_CREATE &&
<h2 className="tit_2">게시판 생성</h2>
}
{modeInfo.mode === CODE.MODE_MODIFY &&
<h2 className="tit_2">게시판 수정</h2>
}
<div className="board_view2">
<dl>
<dt><label htmlFor="bbsNm">게시판명</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="bbsNm" title="" id="bbsNm" placeholder=""
defaultValue={boardDetail.bbsNm}
onChange={e => setBoardDetail({ ...boardDetail, bbsNm: e.target.value })}
ref={el => (checkRef.current[0] = el)}
/>
</dd>
</dl>
<dl>
<dt><label htmlFor="bbsIntrcn">게시판 소개</label><span className="req">필수</span></dt>
<dd>
<textarea className="f_txtar w_full h_100" name="bbsIntrcn" id="bbsIntrcn" cols="30" rows="10" placeholder=""
defaultValue={boardDetail.bbsIntrcn}
onChange={e => setBoardDetail({ ...boardDetail, bbsIntrcn: e.target.value })}
ref={el => (checkRef.current[1] = el)}
<Modal.Body>
<div className="board_view2">
<dl>
<dt><label htmlFor="bbsId">게시판ID</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="bbsId" title="" id="bbsId" placeholder=""
defaultValue={boardDetail?.bbsId}
onChange={e => setBoardDetail({...boardDetail, bbsId: e.target.value})}
ref={el => (checkRef.current[0] = el)}
/>
</dd>
</dl>
<dl>
<dt><label htmlFor="bbsTitle">게시판명</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="bbsTitle" title="" id="bbsTitle" placeholder=""
defaultValue={boardDetail?.bbsTitle}
onChange={e => setBoardDetail({...boardDetail, bbsTitle: e.target.value})}
ref={el => (checkRef.current[0] = el)}
/>
</dd>
</dl>
<dl>
<dt><label htmlFor="bbsDesc">게시판 소개</label><span className="req">필수</span></dt>
<dd>
<textarea className="f_txtar w_full h_100" name="bbsDesc" id="bbsDesc" cols="30" rows="10" placeholder=""
defaultValue={boardDetail?.bbsDesc}
onChange={e => setBoardDetail({...boardDetail, bbsDesc: e.target.value})}
ref={el => (checkRef.current[1] = el)}
></textarea>
</dd>
</dl>
<dl>
<dt>게시판 유형<span className="req">필수</span></dt>
<dd>
{/* 수정/조회 일때 변경 불가 */}
{modeInfo.mode === CODE.MODE_CREATE &&
<label className="f_select w_130" htmlFor="bbsTyCode">
<select
id="bbsTyCode"
name="bbsTyCode"
title="게시판유형선택"
onChange={(e) => setBoardDetail({ ...boardDetail, bbsTyCode: e.target.value })}
value={boardDetail.bbsTyCode}
>
{bbsTyCodeOptions.map((option, i) => {
return (
<option value={option.value} key={option.value}>
{option.label}
</option>
)
})}
</select>
</label>
}
{modeInfo.mode === CODE.MODE_MODIFY &&
<span>
{boardDetail.bbsTyCode && getSelectedLabel(bbsTyCodeOptions, boardDetail.bbsTyCode)}
</span>
}
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>게시판 속성<span className="req">필수</span></dt>
<dd>
{/* 등록 일때 변경 가능 */}
{modeInfo.mode === CODE.MODE_CREATE &&
<label className="f_select w_130" htmlFor="bbsAttrbCode">
<select
id="bbsAttrbCode"
name="bbsAttrbCode"
title="게시판속성선택"
onChange={(e) => setBoardDetail({ ...boardDetail, bbsAttrbCode: e.target.value })}
value={boardDetail.bbsAttrbCode}
>
{bbsAttrbCodeOptions.map((option, i) => {
return (
<option value={option.value} key={option.value}>
{option.label}
</option>
)
})}
</select>
</label>
}
{/* 수정/조회 일때 변경 불가 */}
{modeInfo.mode === CODE.MODE_MODIFY &&
<span>
{boardDetail.bbsAttrbCode && getSelectedLabel(bbsAttrbCodeOptions, boardDetail.bbsAttrbCode)}
</span>
}
</dd>
</dl>
<dl>
<dt>답장가능여부<span className="req">필수</span></dt>
<dd>
{/* 등록 일때 변경 가능 */}
{modeInfo.mode === CODE.MODE_CREATE &&
<EgovRadioButtonGroup
name="replyPosblAt"
radioGroup={replyPosblAtRadioGroup}
setValue={boardDetail.replyPosblAt}
setter={(v) => setBoardDetail({ ...boardDetail, replyPosblAt: v })} />
}
{/* 수정/조회 일때 변경 불가 */}
{modeInfo.mode === CODE.MODE_MODIFY &&
<span>
{boardDetail.replyPosblAt && getSelectedLabel(replyPosblAtRadioGroup, boardDetail.replyPosblAt)}
</span>
}
</dd>
</dl>
<dl>
<dt>파일첨부가능여부<span className="req">필수</span></dt>
<dd>
<EgovRadioButtonGroup
name="fileAtchPosblAt"
radioGroup={fileAtchPosblAtRadioGroup}
setValue={boardDetail.fileAtchPosblAt}
setter={(v) => setBoardDetail({ ...boardDetail, fileAtchPosblAt: v })} />
</dd>
</dl>
<dl>
<dt><label htmlFor="schdulDeptName">첨부파일가능파일 숫자</label><span className="req">필수</span></dt>
<dd>
<label className="f_select " htmlFor="posblAtchFileNumber">
<select
id="posblAtchFileNumber"
name="posblAtchFileNumber"
title="첨부가능파일 숫자선택"
onChange={(e) => setBoardDetail({ ...boardDetail, posblAtchFileNumber: e.target.value })}
value={boardDetail.posblAtchFileNumber}
ref={el => (checkRef.current[2] = el)}
>
{posblAtchFileNumberOptions.map((option, i) => {
return (
<option value={option.value} key={option.value}>
{option.label}
</option>
)
})}
</select>
</label>
</dd>
</dl>
{/* <!-- 버튼영역 --> */}
<div className="board_btn_area">
<div className="left_col btn1">
<button className="btn btn_skyblue_h46 w_100"
onClick={() => updateBoard()}>저장</button>
{modeInfo.mode === CODE.MODE_MODIFY &&
<button className="btn btn_skyblue_h46 w_100" onClick={() => {
deleteBoardArticle(boardDetail.bbsId);
}}>삭제</button>
}
</div>
<div className="right_col btn1">
<Link to={URL.ADMIN_BOARD} className="btn btn_blue_h46 w_100">목록</Link>
</div>
</div>
{/* <!--// 버튼영역 --> */}
{/* <!-- 버튼영역 --> */}
<div className="board_btn_area">
<div className="left_col btn1">
<button className="btn btn_skyblue_h46 w_100"
onClick={() => updateBoard()}>저장
</button>
{modeInfo.mode === CODE.MODE_MODIFY &&
<button className="btn btn_skyblue_h46 w_100" onClick={() => {
deleteBoardArticle(boardDetail?.bbsId);
}}>삭제</button>
}
</div>
{/* <!--// 본문 --> */}
<div className="right_col btn1">
<Link to={URL.ADMIN_BOARD} className="btn btn_blue_h46 w_100">목록</Link>
</div>
</div>
{/* <!--// 버튼영역 --> */}
</div>
</div>
</div>
</Modal.Body>
</>
);
}

28
egovframe-template-simple-react-contribution/src/pages/admin/boards/List.jsx
View File

@ -3,11 +3,15 @@ import { Link, useLocation } from 'react-router-dom';
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 EgovPaging from 'components/EgovPaging';
import { itemIdxByPage } from 'utils/calc';
import MenuModal from "../config/menuMgt/MenuModal";
import Modal from "react-bootstrap/Modal";
import EgovAdminBoardEdit from "../board/EgovAdminBoardEdit";
function EgovAdminBoardList(props) {
console.group("EgovAdminBoardList");
@ -20,10 +24,15 @@ function EgovAdminBoardList(props) {
// eslint-disable-next-line no-unused-vars
const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || { pageIndex: 1, searchCnd: '0', searchWrd: '' });// 기존 조회에서 접근 했을 시 || 신규로 접근 했을 시
const [paginationInfo, setPaginationInfo] = useState({});
const [listTag, setListTag] = useState([]);
const [show, setShow] = useState(false);
const [modalBody, setModalBody] = useState();
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const retrieveList = useCallback(() => {
handleClose();
console.groupCollapsed("AdminBoardList.retrieveList()");
const retrieveListURL = '/admin/boards/board-list';
@ -49,14 +58,15 @@ function EgovAdminBoardList(props) {
if (index === 0) mutListTag = []; // 목록 초기화
mutListTag.push(
<Link className="list_item">
<div className="list_item">
<div>{item.bbsSeq}</div>
<div>{item.bbsId}</div>
<div>{item.bbsTitle}</div>
<div>{item.frstCrtId}</div>
<div>{item.frstCrtDt}</div>
<div>{item.lastChgDt}</div>
</Link>
<div><button className={"btn btn_blue_h31 px-1"} onClick={()=>{editBoard(item)}}>수정</button></div>
</div>
);
});
@ -75,6 +85,14 @@ function EgovAdminBoardList(props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
function editBoard(item){
handleShow();
if(item != undefined) {
item.mode = CODE.MODE_MODIFY;
}
setModalBody(<EgovAdminBoardEdit props={item}/>)
}
console.log("------------------------------EgovAdminBoardList [End]");
console.groupEnd("EgovAdminBoardList");
return (
@ -150,6 +168,7 @@ function EgovAdminBoardList(props) {
<span>작성자</span>
<span>작성일</span>
<span>수정일</span>
<span><button className={"btn btn_blue_h31 px-1"} onClick={()=>{editBoard(undefined)}}>추가</button></span>
</div>
<div className="result">
{listTag}
@ -169,6 +188,9 @@ function EgovAdminBoardList(props) {
</div>
</div>
</div>
<Modal show={show} onHide={handleClose} keyboard={false}>
{modalBody}
</Modal>
</div>

22
kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/boards/AdminBoardsController.java
View File

@ -1,5 +1,6 @@
package com.dbnt.kcscbackend.admin.boards;
import com.dbnt.kcscbackend.admin.boards.entity.TnBbs;
import com.dbnt.kcscbackend.admin.boards.service.AdminBoardsService;
import com.dbnt.kcscbackend.config.common.BaseController;
import com.dbnt.kcscbackend.config.common.ResultVO;
@ -42,4 +43,25 @@ public class AdminBoardsController extends BaseController {
resultVO.setResult(resultMap);
return resultVO;
}
@Operation(
summary = "게시판 단건 조회",
description = "게시판 단건 조회",
tags = {"AdminBoardsController"}
)
@ApiResponses(value = {
@ApiResponse(responseCode = "200", description = "조회 성공"),
@ApiResponse(responseCode = "403", description = "인가된 사용자가 아님")
})
@RequestMapping(method = RequestMethod.GET, value = "/board", consumes = MediaType.APPLICATION_JSON_VALUE)
public ResultVO getBoard(TnBbs tnBbs) throws Exception {
ResultVO resultVO = new ResultVO();
Map<String, Object> resultMap = new HashMap<>();
System.out.println("@@@ : " + tnBbs.getBbsSeq());
resultMap.put("board", adminBoardsService.selectBoard(tnBbs.getBbsSeq()));
resultVO.setResult(resultMap);
return resultVO;
}
}

3
kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/boards/service/AdminBoardsService.java
View File

@ -7,6 +7,7 @@ import org.egovframe.rte.fdl.cmmn.EgovAbstractServiceImpl;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Optional;
@Service
@RequiredArgsConstructor
@ -16,4 +17,6 @@ public class AdminBoardsService extends EgovAbstractServiceImpl {
public List<TnBbs> selectBoardList() { return tnBbsRepository.findAll(); }
public Optional<TnBbs> selectBoard(Long bbsSeq) { return tnBbsRepository.findById(bbsSeq); }
}