diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleItem.tsx b/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleItem.tsx index 101e694be..4b319f3c0 100644 --- a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleItem.tsx +++ b/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleItem.tsx @@ -63,9 +63,9 @@ export default function ArticleItem({ article }: ArticleItemProps) { countryImage={countryImage} /> -
{title}
+
{title}
-
{content}
+
{content}
{images.length > 0 && ( {images.map((imageUrl, index) => ( diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/page.tsx b/packages/web/src/app/[lng]/(main)/community/[articleId]/page.tsx index 0585d2777..a217e45e1 100644 --- a/packages/web/src/app/[lng]/(main)/community/[articleId]/page.tsx +++ b/packages/web/src/app/[lng]/(main)/community/[articleId]/page.tsx @@ -24,10 +24,10 @@ export default function CommunityArticlePage({ params }: CommunityArticlePagePro > + - ); diff --git a/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.client.tsx b/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.client.tsx index 9529cd1b1..0bb298bab 100644 --- a/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.client.tsx +++ b/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.client.tsx @@ -1,9 +1,5 @@ 'use client'; -import { formatDistanceStrict } from 'date-fns'; -import { enUS, ko } from 'date-fns/locale'; -import Image from 'next/image'; - import { CommunityArticle } from '@/apis/community'; import ArticleBadge from '@/app/[lng]/(main)/community/components/ArticleBadge.client'; import { useTranslation } from '@/app/i18n/client'; @@ -15,6 +11,22 @@ import { Spacing } from '@/components/Spacing'; import useAppRouter from '@/hooks/useAppRouter'; import cn from '@/utils/cn'; import { currentKoreaTime } from '@/utils/date'; +import { format, formatDistanceStrict, formatDistanceToNow } from 'date-fns'; +import { enUS, ko } from 'date-fns/locale'; +import Image from 'next/image'; + +const formatDate = (date: string, locale: Locale) => { + const d = new Date(date); + const now = Date.now(); + const diff = (now - d.getTime()) / 1000; + if (diff < 60 * 1) { + return '방금 전'; + } + if (diff < 60 * 60 * 24 * 3) { + return formatDistanceToNow(d, { addSuffix: true, locale }); + } + return format(d, 'MM/dd', { locale }); +}; interface ArticleItemProps { articleData: CommunityArticle; @@ -57,14 +69,12 @@ export default function ArticleItem({ articleData, onClick }: ArticleItemProps)
push(`/community/${articleId}`, false))}> {t(`category.${category.name}`)} -

- {formatDistanceStrict(new Date(createdAt), currentKoreaTime, { addSuffix: true, locale })} -

+

{formatDate(createdAt, locale)}

-

{title}

+

{title}

{content}

diff --git a/packages/web/src/app/[lng]/(main)/community/components/CommunityHeader.tsx b/packages/web/src/app/[lng]/(main)/community/components/CommunityHeader.tsx index c46a52399..47c2a5a78 100644 --- a/packages/web/src/app/[lng]/(main)/community/components/CommunityHeader.tsx +++ b/packages/web/src/app/[lng]/(main)/community/components/CommunityHeader.tsx @@ -14,13 +14,13 @@ export default async function CommunityHeader({ lng }: CommunityHeaderProps) { return (
{t('community')} - + {/* - + */}
); } diff --git a/packages/web/src/app/[lng]/(main)/community/components/ContentSection.client.tsx b/packages/web/src/app/[lng]/(main)/community/components/ContentSection.client.tsx index 804f79ab3..8deca55ee 100644 --- a/packages/web/src/app/[lng]/(main)/community/components/ContentSection.client.tsx +++ b/packages/web/src/app/[lng]/(main)/community/components/ContentSection.client.tsx @@ -27,10 +27,10 @@ export default function ContentSection() { return ( - - - - + + + + diff --git a/packages/web/src/app/[lng]/(main)/community/page.tsx b/packages/web/src/app/[lng]/(main)/community/page.tsx index 8a8371c03..0c10da232 100644 --- a/packages/web/src/app/[lng]/(main)/community/page.tsx +++ b/packages/web/src/app/[lng]/(main)/community/page.tsx @@ -1,5 +1,6 @@ import CommunityHeader from './components/CommunityHeader'; import ContentSection from './components/ContentSection.client'; +import CreateArticleButton from './components/CreateArticleButton'; import { Keys, getCommunityArticles } from '@/apis/community'; import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary'; import { HydrationProvider } from '@/components/Provider'; @@ -36,6 +37,7 @@ export default function CommunityPage({ params: { lng } }: CommunityPageProps) { +