[Vue3, TypeScript] api에서 ModelMap extends LinkedHashMap 타입으로 엑셀 다운로드용 데이터를 내려줄때, front에서 해당 값들을 커스텀 하는 방법

삽집 오지게했네. ChatGpt도 1시간동안 삽질을 하길래, Grok에게 물어보니, 한번에 알려준다.

.............이상생략

  const getExcelList = async () => {
    try {
      const data = await getAllUserList({
        searchParams: {
          ...params.value,
          xlsYn: 'Y',
        },
        apiPath: '/api/test/getUserList',
      });

      return data;
    } catch (err) {
      console.error('Fetch getExcelListERROR!', err);
      return [];
    }
  };
.............이하생략



const exportCSV = async () => {
  const allData = await userStore.getExcelList(); // 전체 데이터 가져오기

  if (!allData || allData.length === 0) {
    warnText.value = "다운로드할 데이터가 없습니다.";
    warnPopup.value = true;
    return;
  }

  const transformed = transformCustomerHp(allData);
  console.log(transformed);
............이하 생략........

아래 코드로 데이터를 콘솔로그에서 확인할 수 있다.

const data = [/* 여기서 이미지의 배열 데이터를 직접 대입하거나 API 응답으로 받아옴 */];

// 전체 데이터 출력
data.forEach(item => {
  console.log(`계약번호: ${item.contractNo}, 사원번호: ${item.custOnerCardEmpNo}`);
});

// 특정 조건 필터링 (예: contractNo가 "11"인 데이터)
const filteredData = data.filter(item => item.contractNo === "11");
console.log("필터링된 데이터:", filteredData);

그래서 해결방법으로 함수를 하나 추가하였다.

export function transformCustomerHp<T extends Record<string, any>>(
  allData: T[]
): T[] {
  // 데이터가 없거나 비어 있는 경우
  if (!allData || allData.length === 0) {
    console.log("변환할 데이터가 없습니다.");
    return [];
  }

  // 데이터 변환
  const transformedData = allData.map(row => ({
    ...row, // 기존 객체의 모든 속성 유지
    customerHp: formatHp(row.customerHp), // customerHp만 포맷팅
  }));

  return transformedData;
}

export const formatHp = (hp: string): string => {
  if (!hp || hp.length < 8) return hp;

  const part1 = hp.slice(0, 3);
  const part2 = hp.slice(3, hp.length - 4);
  const part3 = hp.slice(-4);

  return `${part1}-${part2}-${part3}`;
};