엑셀 다운로드 컴포넌트를 이전에 구현했었다.
그러나 그 코드의 문제는 직원목록을 이미 LsgPage 컴포넌트에서 불러와 empListAll에 props로 불러왔음에도 empListAll에서 import되고 있는 ExcelForm에서 이를 활용하고 있지 않다는 것이었다.

이미 db로 직원 목록을 불렀음에도 ExcelForm에서 또 다시 db에서 직원 목록을 호출하여 엑셀 다운로드를 하였다.

이를 props로 직원 목록을 받아와 출력하는 것으로 Refactoring 하고자 한다.

수정 코드

리팩토링 하는 것은 간단하다.
기존에 db를 받아오던 코드를 삭제하고 empList 함수를 전달받고 이를 map으로 전달하면 된다.

import React from 'react';
import { Button } from 'react-bootstrap';
import XLSX from 'xlsx-js-style';
//import { empListDB } from '../../services/dbLogic';

const ExcelForm = ({empList}) => {
  const excelDown = async () => {
    try {
      console.log('excelDown 호출');

      // Excel 파일 생성 및 다운로드
      const wb = XLSX.utils.book_new();
      const headerStyle = {
        font: { bold: true, color: { rgb: '000000' }, name: '함초롱바탕', sz: 13 },
        fill: { fgColor: { rgb: 'BC8F8F' } },
        alignment: { horizontal: 'center', vertical: 'center' },
        border: { left: { style: 'thin', color: { auto: 1 } }, right: { style: 'thin', color: { auto: 1 } }, top: { style: 'thin', color: { auto: 1 } }, bottom: { style: 'thin', color: { auto: 1 } } }
      };
      const dataStyle = {
        font: { color: { rgb: '000000' }, name: '함초롱바탕', sz: 11 },
        fill: { fgColor: { rgb: 'FFFAFA' } },
        alignment: { horizontal: 'center', vertical: 'center' },
        border: { left: { style: 'thin', color: { auto: 1 } }, right: { style: 'thin', color: { auto: 1 } }, top: { style: 'thin', color: { auto: 1 } }, bottom: { style: 'thin', color: { auto: 1 } } }
      };

      // 열의 폭을 정의
      const colWidths = [80, 120, 80, 80, 130];

      // cols 속성을 사용하여 각 열의 폭을 조절
      const cols = colWidths.map(width => ({ wpx: width }));

      const headerRow = [
        { v: '사원번호', t: 's', s: headerStyle },
        { v: '사원명', t: 's', s: headerStyle },
        { v: '현황', t: 's', s: headerStyle },
        { v: '직급', t: 's', s: headerStyle },
        { v: '전화번호', t: 's', s: headerStyle },
      ];

      const dataRows = empList.map(emp => [
        { v: emp.E_CODE, t: 's', s: dataStyle },  // 사원번호
        { v: emp.E_NAME, t: 's', s: dataStyle },  // 사원명
        { v: emp.E_CURRENT, t: 's', s: dataStyle },  // 현황
        { v: emp.E_RANK, t: 's', s: dataStyle },  // 직급
        { v: emp.E_PHONE, t: 's', s: dataStyle },  // 전화번호
      ]);

      const rows = [headerRow, ...dataRows];

      // 새로운 Sheet 객체 생성
      const ws = XLSX.utils.aoa_to_sheet(rows);

      // cols 속성 적용
      ws['!cols'] = cols;

      // workbook에 추가
      XLSX.utils.book_append_sheet(wb, ws, '사원 목록');

      // 파일 다운로드
      XLSX.writeFile(wb, 'employee_list.xlsx');

      console.log('Excel 파일 생성 및 다운로드 완료');
    } catch (error) {
      console.error('Error occurred while downloading Excel', error);
    }
  };

  return (
    <div>
      <Button variant="success" id="btn_excelDown" onClick={excelDown}>
        Excel Down
      </Button>
    </div>
  );
};

export default ExcelForm;