Fix: 커뮤니티 QA 사항 반영 (#610)

* fix: 커뮤니티 검색 아이콘 제거 * fix: 게시글 제목 1줄 제한 ...표시 * fix: 게시글 작성 취소 메시지 수정 * fix: 게시글 생성 날짜 포멧 수정 * fix: 게시글 상세 제목 길이 수정, content 복사 * fix: comment form을 HydrationProvider하위로 이동 * fix: formatDate함수 컴포넌트 외부로 분리
gloddy-dev · Feb 18, 2024 · 3ca08fc · 3ca08fc
1 parent 6dcc73f
commit 3ca08fc
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 19 deletions.
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
@@ -63,9 +63,9 @@ export default function ArticleItem({ article }: ArticleItemProps) {
         countryImage={countryImage}
       />
       <Spacing size={16} />
-      <div className={'text-2xl font-semibold'}>{title}</div>
+      <div className={'break-words text-2xl font-semibold'}>{title}</div>
       <Spacing size={6} />
-      <div className="break-words text-paragraph-1 text-sign-primary">{content}</div>
+      <div className="select-auto break-words text-paragraph-1 text-sign-primary">{content}</div>
       {images.length > 0 && (
         <Flex className="my-16 h-160 gap-4 overflow-x-scroll">
           {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
@@ -24,10 +24,10 @@ export default function CommunityArticlePage({ params }: CommunityArticlePagePro
         >
           <ArticleDetailHeader />
           <ArticleDetail articleId={articleId} />
+          <CommentForm />
         </HydrationProvider>
       </LocalSuspenseErrorBoundary>
       <Spacing size={100} />
-      <CommentForm />
       <Spacing size={60} />
     </>
   );

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
@@ -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)
     <div className="p-20" onClick={onClick || (() => push(`/community/${articleId}`, false))}>
       <Flex justify="between" align="center">
         <ArticleBadge type={category.name}>{t(`category.${category.name}`)}</ArticleBadge>
-        <p className="text-caption text-sign-tertiary">
-          {formatDistanceStrict(new Date(createdAt), currentKoreaTime, { addSuffix: true, locale })}
-        </p>
+        <p className="text-caption text-sign-tertiary">{formatDate(createdAt, locale)}</p>
       </Flex>
       <Spacing size={12} />
       <Flex justify="between" className="gap-6">
         <div className={'w-full'}>
-          <p className="text-subtitle-1">{title}</p>
+          <p className="line-clamp-1 break-words text-subtitle-1">{title}</p>
           <Spacing size={4} />
           <p className="line-clamp-2 whitespace-pre-wrap break-words text-paragraph-2">{content}</p>
         </div>

diff --git 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 (
     <Header>
       <Header.Left className="pl-20">{t('community')}</Header.Left>
-      <Header.Right className="pr-4">
+      {/* <Header.Right className="pr-4">
         <NavLink href="/community/search">
           <IconButton size="large">
             <Icon id="24-search" />
           </IconButton>
         </NavLink>
-      </Header.Right>
+      </Header.Right> */}
     </Header>
   );
 }
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
@@ -27,10 +27,10 @@ export default function ContentSection() {
   return (
     <Tabs>
       <Tabs.List>
-        <Tabs.Tab text={t('all')} value="all" />
-        <Tabs.Tab text={t('kpop')} value="kpop" />
-        <Tabs.Tab text={t('question')} value="question" />
-        <Tabs.Tab text={t('language')} value="language" />
+        <Tabs.Tab text={t('category.All')} value="all" />
+        <Tabs.Tab text={t('category.K-POP')} value="kpop" />
+        <Tabs.Tab text={t('category.Q&A')} value="question" />
+        <Tabs.Tab text={t('category.Language')} value="language" />
       </Tabs.List>
       <Tabs.Panel value="all">
         <Suspense>

diff --git 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) {
           <ContentSection />
         </HydrationProvider>
       </LocalSuspenseErrorBoundary>
+      <CreateArticleButton />
       <Spacing size={60} />
       <Footer page="community" lng={lng} />
     </>

diff --git a/packages/web/src/app/i18n/locales/en/community.json b/packages/web/src/app/i18n/locales/en/community.json
@@ -25,7 +25,7 @@
       "content": "Do you want to submit the post?"
     },
     "cancel": {
-      "content": "Cancel post creation"
+      "content": "Cancel post creation?"
     }
   },
 

diff --git a/packages/web/src/app/i18n/locales/ko/community.json b/packages/web/src/app/i18n/locales/ko/community.json
@@ -25,7 +25,7 @@
       "content": "게시글을 등록하시겠습니까?"
     },
     "cancel": {
-      "content": "게시글 작성을 취소하시겠습니"
+      "content": "게시글 작성을 취소하시겠습니까?"
     }
   },