[Next.js 14 + Supabase ] 채팅화면 구현- Random User API / javascript-time-ago 라이브러리 ( 몇 시간 전까지 온라인 상태였는지 )

https://randomuser.me

Random User Generator | Home

 

 랜덤한 사람들의 이미지들을 넣을 수 있는 무료 API 

 

 

 

 

 

 

utils 폴더에  random.ts로 만들어놓으면 불러다 쓰기 편함

export const getRandomImage = (index: number) => {
  return `https://randomuser.me/api/portraits/med/men/${index}.jpg`;
};

 

 

사용시에는 src에서 index 만 매개변수로 전달해주면됨

 

      <img

        src={getRandomImage(index)}

        alt={name}

        className="w-10 h-10 rounded-full"

      />

 

 

 

---

 

그리고 채팅방에서 잘 사용되는

몇시간전까지 해당 유저가 온라인 상태였는지 표시하기 쉽도록 

라이브러리를 사용한다. 

https://www.npmjs.com/package/javascript-time-ago

javascript-time-ago

 

 

 

 

 

 

 

한국어로 할거기에 ko-KR 로 입력한다.

import TimeAgo from "javascript-time-ago";

import ko from "javascript-time-ago/locale/ko";

TimeAgo.addDefaultLocale(ko);

const timeAgo = new TimeAgo("ko-KR");

 

 

timeAgo.format으로 변환할 날짜를 감싸주는데 

date를 파싱해서 Timeage 형식으로 포맷팅해줌

        <p className="text-gray-500 text-sm">

          {timeAgo.format(Date.parse(onlineAt))}

        </p>