diff --git a/src/hooks/usePostById.ts b/src/hooks/usePostById.ts index bf71cf6..20bb468 100644 --- a/src/hooks/usePostById.ts +++ b/src/hooks/usePostById.ts @@ -1,6 +1,6 @@ import likeCountAtom from '@/atoms/likeCount'; import { Post } from '@/types/post'; -import { fromNow } from '@/utils/dayjs'; +import { getFromNow } from '@/utils/dayjs'; import { supabase } from '@/utils/supabaseClient'; import { useAtomValue } from 'jotai'; import useSWR from 'swr'; @@ -27,7 +27,9 @@ export default function usePostById(id?: string | number) { ); const likeCountMap = useAtomValue(likeCountAtom); - const post = data ? { ...data, fromNow: fromNow(data.inserted_at) } : null; + const post = data + ? { ...data, fromNow: getFromNow(data.inserted_at) } + : null; if (post) { const likeCount = likeCountMap.get(post.id); diff --git a/src/hooks/usePosts.ts b/src/hooks/usePosts.ts index 4fb1dfd..1a567ee 100644 --- a/src/hooks/usePosts.ts +++ b/src/hooks/usePosts.ts @@ -1,6 +1,6 @@ import likeCountAtom from '@/atoms/likeCount'; import { Post } from '@/types/post'; -import { fromNow } from '@/utils/dayjs'; +import { getFromNow } from '@/utils/dayjs'; import { supabase } from '@/utils/supabaseClient'; import { useAtomValue } from 'jotai'; import useSWRInfinite from 'swr/infinite'; @@ -39,7 +39,7 @@ export default function usePosts() { ? data.flatMap((page) => page.map((post) => ({ ...post, - fromNow: fromNow(post.inserted_at), + fromNow: getFromNow(post.inserted_at), })), ) : []; diff --git a/src/hooks/usePostsByIds.ts b/src/hooks/usePostsByIds.ts index 61b12aa..a69b828 100644 --- a/src/hooks/usePostsByIds.ts +++ b/src/hooks/usePostsByIds.ts @@ -1,6 +1,6 @@ import likeCountAtom from '@/atoms/likeCount'; import { Post } from '@/types/post'; -import { fromNow } from '@/utils/dayjs'; +import { getFromNow } from '@/utils/dayjs'; import { supabase } from '@/utils/supabaseClient'; import { useAtomValue } from 'jotai'; import useSWR from 'swr'; @@ -22,7 +22,7 @@ export default function usePostsByIds(ids: number[]) { const posts = data ? data.map((post) => ({ ...post, - fromNow: fromNow(post.inserted_at), + fromNow: getFromNow(post.inserted_at), })) : []; diff --git a/src/hooks/usePostsBySourceName.ts b/src/hooks/usePostsBySourceName.ts index 27a3bcb..5621e9f 100644 --- a/src/hooks/usePostsBySourceName.ts +++ b/src/hooks/usePostsBySourceName.ts @@ -1,6 +1,6 @@ import likeCountAtom from '@/atoms/likeCount'; import { Post } from '@/types/post'; -import { fromNow } from '@/utils/dayjs'; +import { getFromNow } from '@/utils/dayjs'; import { supabase } from '@/utils/supabaseClient'; import { useAtomValue } from 'jotai'; import useSWRInfinite from 'swr/infinite'; @@ -52,7 +52,7 @@ export default function usePostsBySourceName(og_source: string) { ? data.flatMap((page) => page.map((post) => ({ ...post, - fromNow: fromNow(post.inserted_at), + fromNow: getFromNow(post.inserted_at), })), ) : []; diff --git a/src/hooks/useRealtimePosts.ts b/src/hooks/useRealtimePosts.ts index 1af59b2..0b1cb60 100644 --- a/src/hooks/useRealtimePosts.ts +++ b/src/hooks/useRealtimePosts.ts @@ -1,7 +1,7 @@ import likeCountAtom from '@/atoms/likeCount'; import realtimePostsAtom from '@/atoms/realtimePosts'; import { Post } from '@/types/post'; -import { fromNow } from '@/utils/dayjs'; +import { getFromNow } from '@/utils/dayjs'; import { supabase } from '@/utils/supabaseClient'; import { useAtom, useAtomValue } from 'jotai'; import { useEffect } from 'react'; @@ -23,7 +23,7 @@ export default function useRealtimePosts() { (payload) => { const post = { ...payload.new, - fromNow: fromNow(payload.new.inserted_at), + fromNow: getFromNow(payload.new.inserted_at), } as Post; setPosts((prev) => [post, ...prev]); @@ -56,4 +56,18 @@ export default function useRealtimePosts() { // setPosts가 수행되므로 posts를 의존성 배열에서 제외. // eslint-disable-next-line react-hooks/exhaustive-deps }, [likeCountMap]); + + useEffect(() => { + const interval = setInterval(() => { + setPosts( + posts.map((post) => { + const newFromNow = getFromNow(post.inserted_at); + if (post.fromNow !== newFromNow) { + return { ...post, fromNow: newFromNow }; + } else return post; + }), + ); + }, 60000); + return () => clearInterval(interval); + }); } diff --git a/src/utils/dayjs.ts b/src/utils/dayjs.ts index b901815..533be3d 100644 --- a/src/utils/dayjs.ts +++ b/src/utils/dayjs.ts @@ -1,37 +1,37 @@ -import dayjs from "dayjs"; -import relativeTime from "dayjs/plugin/relativeTime"; -import updateLocale from "dayjs/plugin/updateLocale"; -import "dayjs/locale/ko"; +import dayjs from 'dayjs'; +import 'dayjs/locale/ko'; +import relativeTime from 'dayjs/plugin/relativeTime'; +import updateLocale from 'dayjs/plugin/updateLocale'; dayjs.extend(relativeTime); dayjs.extend(updateLocale); -dayjs.updateLocale("ko", { - relativeTime: { - future: "%s 후", - past: "%s 전", - s: "몇 초", - m: "1분", - mm: "%d분", - h: "한 시간", - hh: "%d시간", - d: "하루", - dd: "%d일", - M: "한 달", - MM: "%d개월", - y: "일 년", - yy: "%d년", - }, +dayjs.updateLocale('ko', { + relativeTime: { + future: '%s 후', + past: '%s 전', + s: '몇 초', + m: '1분', + mm: '%d분', + h: '한 시간', + hh: '%d시간', + d: '하루', + dd: '%d일', + M: '한 달', + MM: '%d개월', + y: '일 년', + yy: '%d년', + }, }); -dayjs.locale("ko"); +dayjs.locale('ko'); -const fromNow = (date: string): string => { - return dayjs(date).fromNow(); +const getFromNow = (date: string): string => { + return dayjs(date).fromNow(); }; const getKoreanFormat = (date: string): string => { - return dayjs(date).format("YYYY년 M월 D일 HH:mm"); + return dayjs(date).format('YYYY년 M월 D일 HH:mm'); }; -export { fromNow, getKoreanFormat }; +export { getFromNow, getKoreanFormat };