[46] 시간 함수 구현 (오전 1:3 과 같은 오류 수정 -> 오전 01:03) + 날짜함수

날짜를 자주 쓰다보니 함수로 따로 구현했습니다.

export const getTimeText = (time: string) => {
  let recentTime = new Date(time);
  let nowTime = new Date();
  let displayTime = '';
  let hDiff = (nowTime.getTime() - recentTime.getTime()) / (60 * 60 * 1000);
  if (hDiff < 24) {
    recentTime.getHours() <= 12
      ? (displayTime = `오전 ${recentTime
          .getHours()}:${recentTime
          .getMinutes()}`)
      : (displayTime = `오후 ${recentTime.getHours() - 12}:${recentTime
          .getMinutes()}`);
  } else {
    displayTime = `${recentTime.getMonth() + 1}월 ${recentTime.getDate()}일`;
  }
  return displayTime;
};

문제발견

그런데 이렇게 함수를 구현하면 아래와 같이 2분, 3분과 같이 '분'이 한자리 수 일때 맞지 않다는 것을 발견..!

-> 아주 간단하게 해결 가능, 말그대로 2자리를 기본값으로 하고, 만약 값이 한자리면 0을 붙여준다는 것입니다.

 .toString().padStart(2, '0')

수정

export const getTimeText = (time: string) => {
  let recentTime = new Date(time);
  let nowTime = new Date();
  let displayTime = '';
  let hDiff = (nowTime.getTime() - recentTime.getTime()) / (60 * 60 * 1000);
  if (hDiff < 24) {
    recentTime.getHours() <= 12
      ? (displayTime = `오전 ${recentTime
          .getHours()
          .toString()
          .padStart(2, '0')}:${recentTime
          .getMinutes()
          .toString()
          .padStart(2, '0')}`)
      : (displayTime = `오후 ${(recentTime.getHours() - 12)
          .toString()
          .padStart(2, '0')}:${recentTime
          .getMinutes()
          .toString()
          .padStart(2, '0')}`);
  } else {
    displayTime = `${recentTime.getMonth() + 1}월 ${recentTime.getDate()}일`;
  }
  return displayTime;
};

그리고 대부분의 포스트가 그러하듯이 일자가 지나면 ~년~월~일로 나타나는게 훨씬 보기 편하기 때문에 그렇게 하기 위해선 아래와 같이 하면 됩니다!

export const getTimeText = (time: string) => {
  const recentTime = new Date(time);
  const nowTime = new Date();

  // 같은 날인지 확인
  const isSameDay =
    recentTime.getFullYear() === nowTime.getFullYear() &&
    recentTime.getMonth() === nowTime.getMonth() &&
    recentTime.getDate() === nowTime.getDate();

  if (isSameDay) {
    // 같은 날일 때 오전/오후 HH:MM 형식으로 표시
    const hours = recentTime.getHours();
    const minutes = recentTime.getMinutes().toString().padStart(2, '0');
    const period = hours < 12 ? '오전' : '오후';
    const formattedHours = (hours % 12 || 12).toString().padStart(2, '0');

    return `${period} ${formattedHours}:${minutes}`;
  } else {
    // 다른 날일 때 ~년 ~월 ~일 형식으로 표시
    return `${recentTime.getFullYear()}년 ${
      recentTime.getMonth() + 1
    }월 ${recentTime.getDate()}일`;
  }
};