feat: 공지사항 반영

src/apis/OpstBizService.js

@@ -4,7 +4,8 @@ import {
   GET_PARKING_SIMSA_DETAILS_LIST,
   GET_PARKING_SIMSA_LIST,
   GET_PARKING_SIMSA_TARGET_LIST,
-  SAVE_PARKING_SIMSA_TARGET
+  SAVE_PARKING_SIMSA_TARGET,
+  GET_PUBLIC_BOARD
 } from 'commons/ApiUrl';
 import axios from 'utils/axios';
 
@@ -24,6 +25,15 @@ class OpstBizService {
     return res;
   };
 
+  getPublicBoard = async (inCode) => {
+    const res = await axios.get(GET_PUBLIC_BOARD + inCode);
+    if (res.success) {
+      // res.data = res.data.map((d, idx) => ({ ...d, rowId: this.setRowId(params, idx) }));
+      return res;
+    }
+    return res;
+  };
+
   // eslint-disable-next-line no-return-await
   getBoardList = async (params) => {
     const res = await axios.get(GET_BOARD_LIST, { params });

src/commons/ApiUrl.js

@@ -5,6 +5,7 @@ export const GET_CMM_CODE_LIST = '/api/v1/biz/cmm/combo';
 
 // 공지사항
 export const GET_PUBLIC_BOARD_LIST = '/api/v1/ctgy/pboard';
+export const GET_PUBLIC_BOARD = '/api/v1/ctgy/pboard/';
 
 // 게시판
 export const GET_BOARD_LIST = '/api/v1/ctgy/board';

src/views/biz/board/PublicBoard.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 // material-ui
-import { Button, Divider, FormControlLabel, Grid, InputAdornment, Radio, RadioGroup, TextField } from '@mui/material';
+import { Button, Divider, FormControlLabel, Grid, InputAdornment, Link, Radio, RadioGroup, TextField } from '@mui/material';
 
 // assets
 import { IconFile, IconFileCheck, IconFileText } from '@tabler/icons';
@@ -14,6 +14,10 @@ import MuiDataGrid from 'views/form/MuiDataGrid';
 import InputLabel from 'ui-component/extended/Form/InputLabel';
 import opstBizService from '../../../apis/OpstBizService';
 import * as React from 'react';
+import SaveParkingSimsaForm from '../parking/SaveParkingSimsaForm';
+import CmmModal from '../../form/Modal/CmmModal';
+import * as PropTypes from 'prop-types';
+import PublicBoardForm from './PublicBoardForm';
 
 const PublicBoard = () => {
   const [totalCount, setTotalCount] = useState(0);
@@ -23,6 +27,8 @@ const PublicBoard = () => {
     rows: []
     // loading: false
   });
+  const [open, setOpen] = useState(false);
+  const [selectedRow, setSelectedRow] = useState({});
 
   const columns = [
     { headerName: 'No.', headerAlign: 'center', field: 'rowId', align: 'center', width: 70 },
@@ -32,7 +38,17 @@ const PublicBoard = () => {
       field: 'inDept',
       align: 'center'
     },
-    { headerName: '제목', headerAlign: 'center', field: 'inTitle', minWidth: 200 },
+    {
+      headerName: '제목',
+      headerAlign: 'center',
+      field: 'inTitle',
+      minWidth: 200,
+      renderCell: (params) => (
+        <Link underline="hover" href="#">
+          {params.value}
+        </Link>
+      )
+    },
     {
       headerName: '첨부파일',
       headerAlign: 'center',
@@ -62,6 +78,17 @@ const PublicBoard = () => {
     });
   }, [rowsState.page, rowsState.pageSize]); // rowsState.page, rowsState.pageSize, rowsState.rows]);
 
+  const handleOnCellClick = (e) => {
+    if (e?.field === 'inTitle') {
+      setSelectedRow(e?.row);
+      setOpen(true);
+    }
+  };
+
+  const submitPublicBoard = () => {
+    console.log('save');
+  };
+
   return (
     <MainCard>
       <Grid item xs={12}>
@@ -71,7 +98,16 @@ const PublicBoard = () => {
         <Divider />
       </Grid>
 
-      <MuiDataGrid columns={columns} rowsState={rowsState} totalCount={totalCount} setRowsState={setRowsState} />
+      <MuiDataGrid
+        columns={columns}
+        rowsState={rowsState}
+        totalCount={totalCount}
+        setRowsState={setRowsState}
+        handleCellClick={handleOnCellClick}
+      />
+      <CmmModal isBackdrop title="공지사항등록" open={open} setOpen={setOpen}>
+        <PublicBoardForm setOpen={setOpen} handleModalSave={submitPublicBoard} {...selectedRow} />
+      </CmmModal>
     </MainCard>
   );
 };

src/views/biz/board/PublicBoardForm.jsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+
+// material-ui
+import { Button, Divider, FormControlLabel, Grid, InputAdornment, Radio, RadioGroup, TextField } from '@mui/material';
+
+// assets
+import { IconFile, IconFileCheck, IconFileText } from '@tabler/icons';
+
+// berry ui
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+
+// project imports
+import MuiDataGrid from 'views/form/MuiDataGrid';
+import InputLabel from 'ui-component/extended/Form/InputLabel';
+import opstBizService from '../../../apis/OpstBizService';
+import * as React from 'react';
+import SaveParkingSimsaForm from '../parking/SaveParkingSimsaForm';
+import CmmModal from '../../form/Modal/CmmModal';
+import * as PropTypes from 'prop-types';
+
+const PublicBoardForm = (props) => {
+  console.log(props);
+  const { inCode, inBgubun, inTitle, inHit, inName, inNalja, inFileName, inContents, setOpen } = props;
+  const [contents, setContents] = useState(inContents);
+  // const [editorState, setEditorState] = useState(() => EditorState.createWithContent(ContentState.createFormText(inContents)));
+  const onList = (e) => {
+    setOpen(false);
+  };
+  const onSave = (e) => {
+    const data = {
+      inCode,
+      inTitle,
+      inBgubun,
+      inContents: contents,
+      inFileName
+    };
+    alert(JSON.stringify(data));
+  };
+  const onDelete = (e) => {};
+  const onEditorStateChange = (editorState) => {};
+  // (editorState) => setEditorState(editorState)
+
+  useEffect(() => {}, []);
+
+  return (
+    <>
+      <Grid container spacing={2}>
+        <Grid item xs={12} sm={4}>
+          <TextField label="제목" value={inTitle} fullWidth />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField label="업무구분" value={inBgubun} fullWidth />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField label="등록일" value={inNalja} fullWidth />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField label="번호" value={inCode} fullWidth />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField label="조회수" value={inHit} fullWidth />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField label="작성자" value={inName} fullWidth />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField label="첨부파일" value={inFileName} fullWidth />
+        </Grid>
+        <Grid item xs={12}>
+          <ReactQuill value={contents} onChange={setContents} />
+        </Grid>
+      </Grid>
+      <Grid item xs={12} sx={{ marginTop: 3, justifyContent: 'right' }}>
+        <Button size="small" onClick={onList}>
+          목록
+        </Button>
+        <Button onClick={onSave}>저장</Button>
+        <Button onClick={onDelete}>삭제</Button>
+      </Grid>
+    </>
+  );
+};
+export default PublicBoardForm;

src/views/biz/parking/Regist.jsx

@@ -53,7 +53,7 @@ const ParkingRegister = () => {
     pageSize: 100,
     rows: []
   });
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
 
   const columns = [
     { headerName: 'No', headerAlign: 'center', field: 'rowId', align: 'center', width: 70 },
@@ -207,8 +207,8 @@ const ParkingRegister = () => {
         setRowsStatus={setRowsStatus}
         handleSelection={handleSelection}
       />
-      <CmmModal isBackdrop title="심의등록" open={open} setOpen={setOpen} callback={() => alert('~~~~')}>
-        <SaveParkingSimsaForm handleModalSave={submitParkingSimsa} setOpen={setOpen} />
+      <CmmModal isBackdrop title="심의등록" open={open} setOpen={setOpen}>
+        <SaveParkingSimsaForm handleModalSave={submitParkingSimsa} />
       </CmmModal>
     </MainCard>
   );

src/views/form/CustomPagination.js

@@ -3,7 +3,7 @@ import { gridPageSelector, gridPageCountSelector, useGridApiContext, useGridSele
 import Pagination from '@mui/material/Pagination';
 import { PaginationItem } from '@mui/lab';
 import { Box } from '@mui/system';
-import { Stack } from '@mui/material';
+import { Grid, Stack } from '@mui/material';
 
 const CustomPagination = () => {
   const apiRef = useGridApiContext();
@@ -12,7 +12,7 @@ const CustomPagination = () => {
   console.log(apiRef.current.getRowsCount());
 
   return (
-    <>
+    <Grid>
       <span>Total : {apiRef.current.getRowsCount()}</span>
       <Pagination
         sx={(theme) => ({ padding: theme.spacing(1.5, 0) })}
@@ -32,7 +32,7 @@ const CustomPagination = () => {
           apiRef.current.setPage(value - 1);
         }}
       />
-    </>
+    </Grid>
   );
 };
 export default CustomPagination;