feat: react-alert 추가 적용

package.json

@@ -43,6 +43,8 @@
     "material-ui-popup-state": "^2.0.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
+    "react-alert": "^7.0.3",
+    "react-alert-template-basic": "^1.0.2",
     "react-apexcharts": "^1.3.9",
     "react-beautiful-dnd": "^13.1.0",
     "react-copy-to-clipboard": "^5.0.4",

src/apis/OpstBizService.js

@@ -19,7 +19,7 @@ class OpstBizService {
   // eslint-disable-next-line no-return-await
   getComboCodeList = async (params) => await axios.get(GET_CMM_CODE_LIST, { params });
 
-  //TODO: 헤더에서 파일 정보 읽을 수 있도록 변경 필요
+  // TODO: 헤더에서 파일 정보 읽을 수 있도록 변경 필요
   fileDownload = (id) =>
     axios.get(GET_FILE_DOWNLOAD + id, {
       responseType: 'blob' // 'arrayBuffer',

src/views/biz/board/PublicBoardForm.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import { useAlert } from 'react-alert';
 // material-ui
 import { Button, Grid, IconButton, Input, InputAdornment, TextField, Tooltip } from '@mui/material';
 
@@ -17,10 +18,11 @@ import * as React from 'react';
 import axios from 'axios';
 import { FileDownload, FileUpload } from '@mui/icons-material';
 import FileSaver from 'file-saver';
+import xitCmm from '../../../commons/XitCmm';
 
 const PublicBoardForm = (props) => {
-  console.log(props);
   const { inCode, inBgubun, inTitle, inHit, inName, inNalja, inFilename, inContents, setOpen, handleModalSave } = props;
+  const alert = useAlert();
   const quillRef = useRef();
   const [contents, setContents] = useState(inContents);
   const [filesInfo, setFilesInfo] = useState(null);
@@ -36,7 +38,7 @@ const PublicBoardForm = (props) => {
     formData.append('inTitle', inTitle);
     formData.append('inBgubun', inBgubun);
     formData.append('inContents', contents);
-    formData.append('inFilename', inFilename);
+    formData.append('inFilename', selectedFile);
 
     if (filesInfo !== null && filesInfo.length > 0) {
       // eslint-disable-next-line no-plusplus
@@ -99,9 +101,8 @@ const PublicBoardForm = (props) => {
         container: [
           ['bold', 'italic', 'underline', 'strike', 'blockquote'],
           [{ size: ['small', false, 'large', 'huge'] }, { color: [] }],
-          [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }, { align: [] }],
-          // ['image']
-          ['image', 'video']
+          [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }, { align: [] }]
+          // ['image', 'video']
         ],
         handlers: {
           image: imageHandler
@@ -112,26 +113,32 @@ const PublicBoardForm = (props) => {
   );
 
   const onChangeFile = (e) => {
-    console.log(e.target.files);
+    // console.log(e.target.files);
 
     setSelectedFile(e.target.files[0].name);
     setFilesInfo(e.target.files);
   };
 
-  const handleFileDownload = () => setFileData(opstBizService.fileDownload(inCode));
+  const handleFileDownload = () => {
+    if (!inFilename) {
+      alert.show('등록된 파일이 없습니다.');
+      return;
+    }
+    setFileData(opstBizService.fileDownload(inCode));
+  };
 
-  //TODO: 헤더에서 설정한 파일명을 직접 읽어 설정할 수 있도록 변경 필요 : 임시로 파일명 필드 이름을 사용하도록 하였음
+  // TODO: 헤더에서 설정한 파일명을 직접 읽어 설정할 수 있도록 변경 필요 : 임시로 파일명 필드 이름을 사용하도록 하였음
   useEffect(() => {
     if (fileData) {
       //      const contentDisposition = fileData.headers['Content-Disposition']; // 파일 이름
-      // const fileName = 'unknown';
+      // const fileName = 'unknown';Ï
       // if (contentDisposition) {
       //   const [fileNameMatch] = contentDisposition.split(';').filter((str) => str.includes('filename'));
       //   if (fileNameMatch) [, fileName] = fileNameMatch.split('=');
       // }
 
       // fileName = JSON.stringify(fileData.headers).split('filename=')[1].split('",')[0];
-      FileSaver.saveAs(new Blob([fileData.data]), selectedFile);
+      FileSaver.saveAs(new Blob([fileData.data]), inFilename);
     }
     /*
     if (fileData) {
@@ -165,22 +172,22 @@ const PublicBoardForm = (props) => {
     <>
       <Grid container spacing={2}>
         <Grid item xs={12} sm={4}>
-          <TextField label="제목" value={inTitle} fullWidth />
+          <TextField required label="제목" value={inTitle} fullWidth />
         </Grid>
         <Grid item xs={12} sm={6}>
-          <TextField label="업무구분" value={inBgubun} fullWidth />
+          <TextField required label="업무구분" value={inBgubun} fullWidth />
         </Grid>
         <Grid item xs={12} sm={6}>
-          <TextField label="등록일" value={inNalja} fullWidth />
+          <TextField disabled label="등록일" value={inNalja} fullWidth />
         </Grid>
         <Grid item xs={12} sm={6}>
-          <TextField label="번호" value={inCode} fullWidth />
+          <TextField disabled label="번호" value={inCode} fullWidth />
         </Grid>
         <Grid item xs={12} sm={6}>
-          <TextField label="조회수" value={inHit} fullWidth />
+          <TextField disabled label="조회수" value={inHit} fullWidth />
         </Grid>
         <Grid item xs={12} sm={6}>
-          <TextField label="작성자" value={inName} fullWidth />
+          <TextField disabled label="작성자" value={inName} fullWidth />
         </Grid>
         <Grid item xs={12} sm={6}>
           <Grid>