글쓴 시간이 음수로 나오는 문제

 

서버 시간이랑 로컬 시간의 오차가 있어서 발생함. 

20초까지는 방금전으로 표시하고, 모든 음수도 방금전으로 표시해서

해당 오류의 가능성을 줄여놓음.

 

아래는 해당 타입스크립트 함수 (커스텀훅으로 생성시 map에서 사용이 불가능해서 일반 함수로 생성해서 같이 사용함)

const timeAgo = (timeString: string): string => {
  const now = new Date();

  const utcTimeDate = new Date(timeString + 'Z'); //Z를 끝에 붙이면 UTC 시간으로 인식함
  const secondsDiff = (now.getTime() - utcTimeDate.getTime()) / 1000;
  const minutesDiff = secondsDiff / 60;
  const hoursDiff = minutesDiff / 60;
  const daysDiff = hoursDiff / 24;
  let displayTime: string;

  if (secondsDiff < 20) {
    displayTime = `방금 전`;
  } else if (secondsDiff < 60) {
    displayTime = `${Math.round(secondsDiff)}초 전`;
  } else if (minutesDiff < 60) {
    displayTime = `${Math.round(minutesDiff)}분 전`;
  } else if (hoursDiff < 12) {
    displayTime = `${Math.round(hoursDiff)}시간 전`;
  } else if (daysDiff < 15) {
    displayTime = `${Math.round(daysDiff)}일 전`;
  } else if (now.getFullYear() === utcTimeDate.getFullYear()) {
    displayTime = `${String(utcTimeDate.getMonth() + 1).padStart(
      2,
      '0'
    )}월${String(utcTimeDate.getDate()).padStart(2, '0')}일`;
  } else {
    displayTime = `${utcTimeDate.getFullYear()}년${String(
      utcTimeDate.getMonth() + 1
    ).padStart(2, '0')}월${String(utcTimeDate.getDate()).padStart(2, '0')}일`;
  }

  return displayTime;
};

export default timeAgo;

// // 사용 예
// const timeFromServer: string = '2023-08-08T22:35:53.214581';
// console.log(timeAgo(timeFromServer));