엑셀 한글 다운로드 기능 추가

src/components/flight/NewFlightApprovalsTable.js

@@ -5,6 +5,13 @@ import dayjs from 'dayjs';
 import { openModal } from '@src/redux/features/comn/message/messageSlice';
 import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
 import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd';
+import { HOST } from '../../configs/constants';
+import { pdfjs } from 'react-pdf';
+import { getLaancAprvExcel } from '../../redux/features/laanc/laancThunk';
+import axios from 'axios';
+import { getAccessToken } from '../../utility/authService/jwtTokenUtil';
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
 export default function NewFlightApprovalsTable(props) {
   const dispatch = useDispatch();
@@ -27,6 +34,15 @@ export default function NewFlightApprovalsTable(props) {
 
   const [form] = Form.useForm();
 
+  const [updateRowData, setRowData] = useState({
+    planAreaSno: 0,
+    bufferZone: 0,
+    fltElev: 0,
+    dtl: '',
+    era: '',
+    rm: ''
+  });
+
   // 수정 키 확인
   const isEditing = record => record.key === editingKey;
 
@@ -62,10 +78,12 @@ export default function NewFlightApprovalsTable(props) {
         newData.splice(index, 1, { ...item, ...row });
         setData(newData);
         setEditingKey('');
+        setRowData(row); // 입력한 값을 setRowData에 저장
       } else {
         newData.push(row);
         setData(newData);
         setEditingKey('');
+        setRowData(row); // 입력한 값을 setRowData에 저장
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -92,10 +110,10 @@ export default function NewFlightApprovalsTable(props) {
           신청 <br />월
         </>
       ),
-      dataIndex: 'applyDt',
+      dataIndex: 'applyDtMonth',
       width: '80px',
       align: 'center',
-      render: text => dayjs(text).format(' M월')
+      render: text => dayjs(text).format('M월')
     },
     {
       title: (
@@ -103,7 +121,7 @@ export default function NewFlightApprovalsTable(props) {
           신청 <br />일
         </>
       ),
-      dataIndex: 'applyDt',
+      dataIndex: 'applyDtDay',
       width: '80px',
       align: 'center',
       render: text => dayjs(text).format('DD일')
@@ -394,13 +412,13 @@ export default function NewFlightApprovalsTable(props) {
         align: 'center'
       },
       {
-        dataIndex: '6월',
+        dataIndex: 'applyDtMonth',
         width: '80px',
         align: 'center',
         render: text => dayjs(text).format('M월')
       },
       {
-        dataIndex: '21일',
+        dataIndex: 'applyDtDay',
         width: '80px',
         align: 'center',
         render: text => dayjs(text).format('DD일')
@@ -473,7 +491,7 @@ export default function NewFlightApprovalsTable(props) {
         width: '70px'
       },
       {
-        dataIndex: '세부사항',
+        dataIndex: 'dtl',
         align: 'center',
         editable: true,
         width: '110px',
@@ -490,7 +508,7 @@ export default function NewFlightApprovalsTable(props) {
         }
       },
       {
-        dataIndex: '긴급구조기관',
+        dataIndex: 'era',
         align: 'center',
         editable: true,
         width: '110px',
@@ -499,7 +517,7 @@ export default function NewFlightApprovalsTable(props) {
         }
       },
       {
-        dataIndex: '비고',
+        dataIndex: 'rm',
         align: 'center',
         editable: true,
         width: '110px',
@@ -571,6 +589,16 @@ export default function NewFlightApprovalsTable(props) {
       });
     });
 
+    // PDF 다운로드
+    const handlerPdfDownload = pdf => {
+      if (pdf) {
+        let alink = document.createElement('a');
+        alink.href = `${HOST}${pdf?.substring(1)}`;
+        alink.download = 'SamplePDF.pdf';
+        alink.click();
+      }
+    };
+
     return (
       <Form form={form} component={false}>
         <Table
@@ -746,6 +774,62 @@ export default function NewFlightApprovalsTable(props) {
     props.handlerDetail(row);
   };
 
+  const handleFileDownload = async type => {
+    try {
+      const fileDetails = {
+        pdf: {
+          url: `${HOST}api/bas/dos/plan/download/pdf?searchStDt=2024-06-24&searchEndDt=2024-06-24`,
+          name: '비행승인결과.pdf'
+        },
+        excel: {
+          url: `${HOST}api/bas/dos/plan/download/excel?searchStDt=2024-06-24&searchEndDt=2024-06-24`,
+          name: '비행승인결과.xlsx'
+        }
+      };
+
+      if (!fileDetails[type]) {
+        throw new Error('Invalid file type specified.');
+      }
+
+      const { url: fileUrl, name: fileName } = fileDetails[type];
+      const accessToken = await getAccessToken();
+
+      const res = await axios({
+        url: fileUrl,
+        method: 'GET',
+        responseType: 'blob',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `${accessToken}` // Bearer 추가
+        }
+      });
+
+      if (!res.headers) {
+        throw new Error('No response headers.');
+      }
+
+      const contentType =
+        res.headers['content-type'] || 'application/octet-stream';
+
+      const blob = new Blob([res.data], { type: contentType });
+      const downloadUrl = window.URL.createObjectURL(blob);
+
+      const link = document.createElement('a');
+      link.href = downloadUrl;
+      link.style.display = 'none';
+      link.download = fileName;
+
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      window.URL.revokeObjectURL(downloadUrl);
+    } catch (error) {
+      console.error('File download failed:', error);
+      console.error(error.message);
+    }
+  };
+
   return (
     <div className='layer-content'>
       <div className='layer-ti'>
@@ -764,10 +848,18 @@ export default function NewFlightApprovalsTable(props) {
           </span>
         </div>
         <div className='download'>
-          <Button color='primary' size='sm'>
+          <Button
+            color='primary'
+            size='sm'
+            onClick={() => handleFileDownload('pdf')}
+          >
             한글 다운로드
           </Button>
-          <Button color='primary' size='sm'>
+          <Button
+            color='primary'
+            size='sm'
+            onClick={() => handleFileDownload('excel')}
+          >
             엑셀 다운로드
           </Button>
         </div>

src/redux/features/laanc/laancState.ts

@@ -643,6 +643,8 @@ export interface ILaancAprvListRs {
   updateDt: string;
   createDt: string;
   purpose: string;
+  applyDtMonth: string;
+  applyDtDay: string;
   areaList: {
     planAreaSno: number;
     planSno: number;

src/redux/features/laanc/laancThunk.ts

@@ -308,7 +308,8 @@ export const getLaancAprvExcel = createAsyncThunk(
   async (rq: ILaancAprvListRq, thunkAPI) => {
     try {
       const data: ILaancAprvListRs[] = await axios.get(
-        `api/bas/dos/plan/download/excel`,
+        `api/bas/dos/plan/download/excel?searchStDt=2024-06-14&searchEndDt=2024-06-14
+`,
         {
           params: rq
         }