fix: 파일 다운로드 적용

package.json

@@ -32,6 +32,7 @@
     "date-fns": "^2.28.0",
     "draft-js": "^0.11.7",
     "emoji-picker-react": "^3.5.1",
+    "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "framer-motion": "^4.1.13",
     "history": "^5.2.0",

src/apis/OpstBizService.js

@@ -12,13 +12,20 @@ import {
   GET_FILE_DOWNLOAD
 } from 'commons/ApiUrl';
 import axios from 'utils/axios';
+import login from '../views/pages/authentication/authentication/Login';
+import { ACCESS_TOKEN_NAME } from '../commons/constants';
 
 class OpstBizService {
   // eslint-disable-next-line no-return-await
   getComboCodeList = async (params) => await axios.get(GET_CMM_CODE_LIST, { params });
 
-  // eslint-disable-next-line no-return-await
-  fileDownload = async (id) => await axios.get(GET_FILE_DOWNLOAD + id);
+  //TODO: 헤더에서 파일 정보 읽을 수 있도록 변경 필요
+  fileDownload = (id) =>
+    axios.get(GET_FILE_DOWNLOAD + id, {
+      responseType: 'blob' // 'arrayBuffer',
+      // withCredentials: process.env.NODE_ENV === 'development'
+      // headers: { Authorization: window.localStorage.getItem(ACCESS_TOKEN_NAME) }
+    });
 
   setRowId = (params, idx) => {
     if (params && params.page && params.size) return params.page * params.size + idx + 1;

src/utils/axios.js

@@ -7,7 +7,7 @@ import Swal from 'sweetalert2';
 
 const axiosService = axios.create({
   baseURL: process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '',
-  withCredentials: process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain
+  withCredentials: true, // process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain
   timeout: Number(process.env.REACT_APP_SERVER_TIMEOUT),
   headers: {
     'Content-Type': 'application/json'

src/views/biz/board/PublicBoardForm.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 // material-ui
 import { Button, Grid, IconButton, Input, InputAdornment, TextField, Tooltip } from '@mui/material';
@@ -16,6 +16,7 @@ import * as React from 'react';
 
 import axios from 'axios';
 import { FileDownload, FileUpload } from '@mui/icons-material';
+import FileSaver from 'file-saver';
 
 const PublicBoardForm = (props) => {
   console.log(props);
@@ -24,6 +25,7 @@ const PublicBoardForm = (props) => {
   const [contents, setContents] = useState(inContents);
   const [filesInfo, setFilesInfo] = useState(null);
   const [selectedFile, setSelectedFile] = useState(inFilename); // 파일
+  const [fileData, setFileData] = useState(null);
 
   const onList = (e) => {
     setOpen(false);
@@ -116,9 +118,49 @@ const PublicBoardForm = (props) => {
     setFilesInfo(e.target.files);
   };
 
-  const handleFileDownload = (e) => {
-    opstBizService.fileDownload(inCode);
+  const handleFileDownload = () => setFileData(opstBizService.fileDownload(inCode));
+
+  //TODO: 헤더에서 설정한 파일명을 직접 읽어 설정할 수 있도록 변경 필요 : 임시로 파일명 필드 이름을 사용하도록 하였음
+  useEffect(() => {
+    if (fileData) {
+      //      const contentDisposition = fileData.headers['Content-Disposition']; // 파일 이름
+      // 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);
+    }
+    /*
+    if (fileData) {
+      //      const contentDisposition = fileData.headers['Content-Disposition']; // 파일 이름
+      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];
+
+      const url = window.URL.createObjectURL(new Blob([fileData.data]));
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', fileName);
+      link.style.cssText = 'display:none';
+      link.setAttribute('id', 'tempLink');
+      document.body.appendChild(link);
+      link.click();
+    }
+    return () => {
+      const link = document.querySelector('#tempLink');
+      // eslint-disable-next-line no-unused-expressions
+      link && link.remove();
     };
+*/
+  }, [fileData]);
+
   return (
     <>
       <Grid container spacing={2}>