feat: 공지사항등록 / 삭제 반영

src/apis/AuthService.js

@@ -1,16 +0,0 @@
-import { IUser } from 'types/auth';
-import reqApi from './ApiService';
-import { LOGIN_URL } from 'commons/ApiUrl';
-import { IApiResponse } from 'types/api';
-
-class AuthService {
-  login = (user) => reqApi.post(LOGIN_URL, user);
-
-  // getCurrentUser = async () => {
-  //   if (!localStorage.getItem(ACCESS_TOKEN_NAME)) {
-  //     return Promise.reject('No access token set.');
-  //   }
-  // };
-}
-
-export default new AuthService();

src/apis/CmmService.js

@@ -1,17 +0,0 @@
-import { GET_CMM_CODE_LIST } from 'commons/ApiUrl';
-import axios from 'utils/axios';
-
-class CmmService {
-  // eslint-disable-next-line no-return-await
-  getComboCodeList = async (params) => await axios.get(GET_CMM_CODE_LIST, { params });
-
-  // getComboCodeList(params) {
-  // return reqApi.get(CMM_CODE_LIST_URL, { params });
-  // .then(r => console.log(r))
-  // .catch(e => {
-  //  console.log(e)
-  // });
-  // }
-}
-
-export default CmmService;

src/apis/OpstBizService.js

@@ -5,7 +5,10 @@ import {
   GET_PARKING_SIMSA_LIST,
   GET_PARKING_SIMSA_TARGET_LIST,
   SAVE_PARKING_SIMSA_TARGET,
-  GET_PUBLIC_BOARD
+  GET_PUBLIC_BOARD,
+  GET_CMM_CODE_LIST,
+  SAVE_PUBLIC_BOARD,
+  DELETE_PUBLIC_BOARD
 } from 'commons/ApiUrl';
 import axios from 'utils/axios';
 
@@ -88,6 +91,29 @@ class OpstBizService {
     return res;
   };
 
-  SAVE_PARKING_SIMSA_TARGET;
+  // eslint-disable-next-line no-return-await
+  getComboCodeList = async (params) => await axios.get(GET_CMM_CODE_LIST, { params });
+
+  // getComboCodeList(params) {
+  // return reqApi.get(CMM_CODE_LIST_URL, { params });
+  // .then(r => console.log(r))
+  // .catch(e => {
+  //  console.log(e)
+  // });
+  // }
+
+  savePublicBoard = async (formData) => {
+    const config = {
+      method: 'post',
+      data: formData,
+      headers: { 'Content-Type': 'multipart/form-data' } // , Authorization: localStorage.getItem('access_token') }
+    };
+    // eslint-disable-next-line no-return-await
+    return await axios(SAVE_PUBLIC_BOARD, config);
+  };
+
+  deletePublicBoard = async (inCode) =>
+    // eslint-disable-next-line no-return-await
+    await axios.post(DELETE_PUBLIC_BOARD + inCode);
 }
 export default new OpstBizService();

src/commons/ApiUrl.js

@@ -6,6 +6,8 @@ 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 SAVE_PUBLIC_BOARD = '/api/v1/ctgy/file/pboard';
+export const DELETE_PUBLIC_BOARD = '/api/v1/ctgy/file/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, Link, Radio, RadioGroup, TextField } from '@mui/material';
+import { Divider, Grid, Link } from '@mui/material';
 
 // assets
 import { IconFile, IconFileCheck, IconFileText } from '@tabler/icons';
@@ -11,10 +11,8 @@ import MainCard from 'ui-component/cards/MainCard';
 
 // 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';
 import PublicBoardForm from './PublicBoardForm';
@@ -63,7 +61,7 @@ const PublicBoard = () => {
     { headerName: '조회수', headerAlign: 'center', field: 'inHit', align: 'right' }
   ];
 
-  useEffect(() => {
+  const search = () => {
     const params = {
       page: rowsState.page,
       size: rowsState.pageSize
@@ -76,6 +74,10 @@ const PublicBoard = () => {
         setRowsState((prevState) => ({ ...prevState, rows: response.data }));
       }
     });
+  };
+
+  useEffect(() => {
+    search();
   }, [rowsState.page, rowsState.pageSize]); // rowsState.page, rowsState.pageSize, rowsState.rows]);
 
   const handleOnCellClick = (e) => {
@@ -85,8 +87,22 @@ const PublicBoard = () => {
     }
   };
 
-  const submitPublicBoard = () => {
-    console.log('save');
+  const submitPublicBoard = (type, payload) => {
+    switch (type) {
+      case 'SAVE':
+        opstBizService.savePublicBoard(payload);
+        search();
+        setOpen(false);
+        break;
+      case 'DELETE':
+        opstBizService.deletePublicBoard(payload);
+        search();
+        setOpen(false);
+        break;
+      default:
+        search();
+        setOpen(false);
+    }
   };
 
   return (

src/views/biz/board/PublicBoardForm.jsx

@@ -1,49 +1,51 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 // material-ui
-import { Button, Divider, FormControlLabel, Grid, InputAdornment, Radio, RadioGroup, TextField } from '@mui/material';
+import { Button, Grid, IconButton, Input, InputAdornment, TextField, Tooltip } 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';
+
 import axios from 'axios';
+import { FileDownload, FileUpload } from '@mui/icons-material';
 
 const PublicBoardForm = (props) => {
   console.log(props);
-  const { inCode, inBgubun, inTitle, inHit, inName, inNalja, inFileName, inContents, setOpen } = props;
+  const { inCode, inBgubun, inTitle, inHit, inName, inNalja, inFilename, inContents, setOpen, handleModalSave } = props;
   const quillRef = useRef();
   const [contents, setContents] = useState(inContents);
+  const [filesInfo, setFilesInfo] = useState(null);
+  const [selectedFile, setSelectedFile] = useState(inFilename); // 파일
 
   const onList = (e) => {
     setOpen(false);
   };
   const onSave = (e) => {
-    const data = {
-      inCode,
-      inTitle,
-      inBgubun,
-      inContents: contents,
-      inFileName
-    };
-    alert(JSON.stringify(data));
+    const formData = new FormData();
+    formData.append('inCode', inCode);
+    formData.append('inTitle', inTitle);
+    formData.append('inBgubun', inBgubun);
+    formData.append('inContents', contents);
+    formData.append('inFilename', inFilename);
+
+    if (filesInfo !== null && filesInfo.length > 0) {
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < filesInfo.length; i++) formData.append('files', filesInfo[i]);
+    }
+    handleModalSave('SAVE', formData);
   };
-  const onDelete = (e) => {};
-  const onEditorStateChange = (editorState) => {};
-  // (editorState) => setEditorState(editorState)
 
-  // useEffect(() => {}, []);
+  const onDelete = (e) => {
+    handleModalSave('DELETE', inCode);
+  };
 
   const imageHandler = () => {
     const input = document.createElement('input');
@@ -56,7 +58,6 @@ const PublicBoardForm = (props) => {
         const file = input.files[0];
         const formData = new FormData();
         formData.append('image', file);
-        const fileName = file.name;
 
         console.log(formData);
 
@@ -108,6 +109,16 @@ const PublicBoardForm = (props) => {
     []
   );
 
+  const onChangeFile = (e) => {
+    console.log(e.target.files);
+
+    setSelectedFile(e.target.files[0].name);
+    setFilesInfo(e.target.files);
+  };
+
+  const handleFileDownload = (e) => {
+    alert('download');
+  };
   return (
     <>
       <Grid container spacing={2}>
@@ -130,7 +141,38 @@ const PublicBoardForm = (props) => {
           <TextField label="작성자" value={inName} fullWidth />
         </Grid>
         <Grid item xs={12} sm={6}>
-          <TextField label="첨부파일" value={inFileName} fullWidth />
+          <Grid>
+            <TextField
+              // label="첨부파일"
+              value={selectedFile}
+              // inputProps={{ display: 'none' }}
+              fullWidth
+              // InputProps={{
+              //   display: 'none'
+              // }}
+              onClick={handleFileDownload}
+              InputProps={{
+                display: 'none',
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <FileDownload stroke={1.5} size="1rem" />
+                  </InputAdornment>
+                )
+              }}
+            />
+            <input accept="image/jpeg" id="faceImage" type="file" style={{ display: 'none' }} onChange={onChangeFile} />
+            <Tooltip title="Select Image">
+              <InputLabel htmlFor="faceImage">
+                <IconButton color="primary" aria-label="upload picture" component="span">
+                  {selectedFile ? <FileDownload fontSize="small" /> : <FileUpload fontSize="small" />}
+                </IconButton>
+              </InputLabel>
+            </Tooltip>
+            {/* <InputLabel>{selectedFile ? selectedFile.name : 'Select Image'}</InputLabel>. . . */}
+            {/* <Button onClick={onSaveFile} color="primary"> */}
+            {/*  Save */}
+            {/* </Button> */}
+          </Grid>
         </Grid>
         <Grid item xs={12}>
           <ReactQuill

src/views/form/FileUploadForm.jsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Button, IconButton, InputLabel, Tooltip, makeStyles, Theme } from '@mui/material';
+import { FileDownload, FileUpload, FileUploadTwoTone } from '@mui/icons-material';
+import { useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+
+// const useStyles = makeStyles((theme) => ({
+//   root: {
+//     '& > *': {
+//       margin: theme.spacing(1)
+//     }
+//   },
+//   input: {
+//     display: 'none'
+//   },
+//   faceImage: {
+//     color: theme.palette.primary.light
+//   }
+// }));
+
+const FileUploadForm = ({ onSaveFile }) => {
+  const theme = useTheme();
+  const [selectedFile, setSelectedFile] = useState(null);
+
+  const handleCapture = ({ target }) => {
+    setSelectedFile(target.files[0]);
+  };
+
+  const handleSubmit = () => {
+    onSaveFile(selectedFile);
+  };
+
+  return (
+    <>
+      <input accept="image/jpeg" className={theme.input} id="faceImage" type="file" onChange={handleCapture} />
+      <Tooltip title="Select Image">
+        <InputLabel htmlFor="faceImage">
+          <IconButton className={theme.faceImage} color="primary" aria-label="upload picture" component="span">
+            <FileUploadTwoTone fontSize="small" />
+          </IconButton>
+        </InputLabel>
+      </Tooltip>
+      <InputLabel>{selectedFile ? selectedFile.name : 'Select Image'}</InputLabel>. . .
+      <Button onClick={() => handleSubmit()} color="primary">
+        Save
+      </Button>
+    </>
+  );
+};
+
+export default FileUploadForm;