React ~ 날짜 / 시간 표시 커스텀 훅 (23/03/08)

React Custom Hook

2023-03-07T08:03:52.000Z -> 방금전, n분 전, n시간 전, n일 전...

글 작성시간을 방금 전, 몇분 전, 몇시간 전, 며칠 전과 같이 나타내는 커스텀 훅입니다

리액트 라이브러리만 있으면 됩니다

필요한 분이 있다면 잘 써주시길..

import { useState, useEffect } from 'react';

// 글 작성시간을 인자로 받아오기
export const useTimeStamp = (timestamp) => {
  const [timeAgo, setTimeAgo] = useState('');

  const updateTimeStamp = () => {
    // 경과한 시간 계산 (1초 = 1000)
    const timeElapsed = Math.floor((new Date() - new Date(timestamp)) / 1000);

    if (timeElapsed < 60) {
      setTimeAgo(`방금 전`);
    } else if (timeElapsed < (60 * 60)) {
      const minutes = Math.floor(timeElapsed / 60);
      setTimeAgo(`${minutes}분 전`);
    } else if (timeElapsed < (60 * 60 * 24)) {
      const hours = Math.floor(timeElapsed / (60 * 60));
      setTimeAgo(`${hours}시간 전`);
    } else if (timeElapsed < (60 * 60 * 24 * 7)) {
      const days = Math.floor(timeElapsed / (60 * 60 * 24));
      setTimeAgo(`${days}일 전`);
    } else {
      // 일주일 이상 지난 아이템에 대해서는 YYYY-MM-DD로 표기
      const date = new Date(timestamp).toISOString().slice(0, 10);
      setTimeAgo(date);
    }
  };

  useEffect(() => {
    updateTimeStamp();
  }, [timestamp]);

  return timeAgo;
};