[dayjs] Day.js 를 활용하여 날짜 포맷 변경하기

현재 근무하고 있는 회사에서 third-party sdk를 사용하여, 채팅 개발 중 넘어오는 createdAt 시간을 각기 다르게

표출해야해서 초기 작업 중, moment.js를 사용하였지만 더 가벼운 라이브러리인 dayjs를 활용하게 되었습니다.

 

채팅방 리스트에서 표출 될 시간의 포맷은 1 초전, ~분전, ~시간 전, 날짜 이며,

채팅방 내용 옆에 붙을 시각 표시는 00:00AM / 00:00PM

채팅 날짜 구분을 위해 사용할 포맷으로 요일-일-달 입니다.

 

사내에서 개발하여 사용하는 데이터의 createdAt은 string으로 넘어오며, 

sdk에서 넘어오는 데이터의 createdAt은 number로 넘어오기 때문에

time의 type을 number 와 string으로 지정했습니다

 

dayjs를 사용할 때, 몇초 전 이라는 식의 형식으로 a few seconds ago 가 넘어오게 되는데

0초전 일땐 Just Now, 1초 일땐 1 second ago로 표현되길 원하셔서 updateLocale을 사용하여

past에서 표현되는 형식을 따로 가공하여 return 해주는 형식으로 사용했습니다.

 

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import updateLocale from "dayjs/plugin/updateLocale";

dayjs.extend(relativeTime);

dayjs.extend(updateLocale);
dayjs.updateLocale("en", {
  relativeTime: {
    future: "in %s",
    past: (value: string) => {
      if (value === "0 seconds") {
        return "Just Now";
      }

      if (value === "1 seconds") {
        return "1 second ago";
      }
      return `${value} ago`;
    },
    s: "%d seconds",
    m: "a minute",
    mm: "%d minutes",
    h: "an hour",
    hh: "%d hours",
    d: "a day",
    dd: "%d days",
    M: "a month",
    MM: "%d months",
    y: "a year",
    yy: "%d years",
  },
});

export const convertToRelativeTime = (time: number) => {
  const data = dayjs(time).fromNow();
  return data;
};

export const convertTimeToHoursFormat = (time: number) => {
  const data = dayjs(time).format("HH:mm A");
  return data;
};

export const convertTimeToYearDateFormat = (time: string) => {
  const data = dayjs(time).format("YYYY.MM.DD");
  return data;
};

export const convertTimetoMonthDayFormat = (time: number) => {
  const data = dayjs(time).format("ddd,MMM DD");
  return data;
};