Feature: Footer prefetch 최적화, 채팅 기능 퍼블리싱 80% (#686)

* refactor: 일부 이미지 최적화 * feat: ChatList 퍼블리싱, formatDate 함수 모듈화 * refactor: 이미지 최적화, Footer의 페이지들 prefetch * refactor: 최적화 사항 베포를 위한 chat 퍼블리싱 주석
gloddy-dev · Apr 11, 2024 · df29fb3 · df29fb3
1 parent 7043a6e
commit df29fb3
Show file tree

Hide file tree

Showing 24 changed files with 977 additions and 668 deletions.
diff --git a/packages/web/next.config.mjs b/packages/web/next.config.mjs
@@ -20,6 +20,10 @@ const nextConfig = {
         hostname: 'opendata.mofa.go.kr',
       },
     ],
+    deviceSizes: [450],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384, 450],
+    minimumCacheTTL: 31536000,
+    formats: ['image/webp'],
   },
 };
 export default withBundleAnalyzer(withPlaiceholder(nextConfig));
diff --git a/packages/web/public/sprite/sprite.svg b/packages/web/public/sprite/sprite.svg
diff --git a/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.tsx b/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { format, formatDistanceToNow } from 'date-fns';
-import { enUS, ko } from 'date-fns/locale';
+import { ko } from 'date-fns/locale';
 import Image from 'next/image';
 
 import { CommunityArticle } from '@/apis/community';
@@ -14,27 +13,15 @@ import { Flex } from '@/components/Layout';
 import { Spacing } from '@/components/Spacing';
 import useAppRouter from '@/hooks/useAppRouter';
 import cn from '@/utils/cn';
-
-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 });
-};
+import { formatDate } from '@/utils/formatDate';
 
 interface ArticleItemProps {
   articleData: CommunityArticle;
   onClick?: () => void;
 }
 
 export default function ArticleItem({ articleData, onClick }: ArticleItemProps) {
-  const { t, i18n } = useTranslation('community');
+  const { t } = useTranslation('community');
   const { push } = useAppRouter();
   const { article, writer } = articleData;
 
@@ -52,16 +39,14 @@ export default function ArticleItem({ articleData, onClick }: ArticleItemProps)
 
   const { isCertifiedStudent, reliabilityLevel, nickName, countryImage, profileImage } = writer;
 
-  const locale = i18n.language === 'ko' ? ko : enUS;
-
   return (
     <div
       className="p-20"
       onClick={onClick || (() => push(`/community/detail/${articleId}`, false))}
     >
       <Flex justify="between" align="center">
         <ArticleBadge type={category.name}>{t(`category.${category.name}`)}</ArticleBadge>
-        <p className="text-caption text-sign-tertiary">{formatDate(createdAt, locale)}</p>
+        <p className="text-caption text-sign-tertiary">{formatDate(createdAt, ko)}</p>
       </Flex>
       <Spacing size={12} />
       <Flex justify="between" className="gap-6">
@@ -72,7 +57,7 @@ export default function ArticleItem({ articleData, onClick }: ArticleItemProps)
         </div>
         {!!images?.length && (
           <div className="rounded-8 relative h-80 w-80 shrink-0 overflow-hidden">
-            <Image src={images[0]} alt="이미지" sizes="80px" fill className="object-cover" />
+            <Image src={images[0]} alt="이미지" sizes={'90px'} fill className="object-cover" />
           </div>
         )}
       </Flex>

diff --git a/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ArticleItem.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ArticleItem.tsx
@@ -114,7 +114,13 @@ export default function ArticleItem({ article }: ArticleItemProps) {
                 open(() => <ImageModal images={images} currentImage={imageUrl} onClose={exit} />)
               }
             >
-              <Image src={imageUrl} alt="article_image" className="object-cover" fill />
+              <Image
+                src={imageUrl}
+                alt="article_image"
+                className="object-cover"
+                fill
+                sizes={'128px'}
+              />
             </div>
           ))}
         </Flex>

diff --git a/packages/web/src/app/[lng]/(main)/grouping/chatList/components/ChatCardList.tsx b/packages/web/src/app/[lng]/(main)/grouping/chatList/components/ChatCardList.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import ChatCard from './ChatItem';
+import { chatList } from './dummy';
+
+import { useTranslation } from '@/app/i18n/client';
+import { Empty } from '@/components/Empty';
+import { ItemList } from '@/components/List';
+
+export default function ChatCardList() {
+  const { t } = useTranslation('grouping');
+
+  return (
+    <>
+      <ItemList
+        data={chatList}
+        renderItem={(chat) => <ChatCard chatData={chat} />}
+        renderEmpty={() => <Empty message={t('noGroup')} />}
+      />
+      <div />
+    </>
+  );
+}
diff --git a/packages/web/src/app/[lng]/(main)/grouping/chatList/components/ChatItem.tsx b/packages/web/src/app/[lng]/(main)/grouping/chatList/components/ChatItem.tsx
@@ -0,0 +1,64 @@
+import { ko } from 'date-fns/locale';
+import Image from 'next/image';
+
+import { Chat } from './dummy';
+
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+import ImageSample from '@/components/Image/ImageSample';
+import { Flex } from '@/components/Layout';
+import { NavLink } from '@/components/NavLink';
+import { Spacing } from '@/components/Spacing';
+import cn from '@/utils/cn';
+import { formatDate } from '@/utils/formatDate';
+
+interface ChatCardProps extends HTMLAttributes<HTMLDivElement> {
+  chatData: Chat;
+}
+
+export default function ChatCard({ chatData, children }: PropsWithChildren<ChatCardProps>) {
+  const { title, content, imageUrl, newMessag, groupId, latestMessageTiem } = chatData;
+
+  return (
+    <Flex className="bg-white px-20 py-12" direction="column">
+      <NavLink href={`/grouping/detail/${groupId}?tab=detail`} className="flex items-center">
+        <section className="relative h-60 w-60 shrink-0">
+          {imageUrl ? (
+            <Image
+              fill
+              src={imageUrl}
+              alt="group"
+              className="rounded-8 object-cover"
+              loading="lazy"
+              sizes="32px"
+            />
+          ) : (
+            <ImageSample width={96} height={96} />
+          )}
+        </section>
+
+        <Spacing size={12} direction="horizontal" />
+
+        <section className="relative grow overflow-hidden  ">
+          <Flex justify="between" direction="row">
+            <Flex align="start" direction="column">
+              <p className="text-subtitle-2 grow truncate">{title}</p>
+              <p className="text-paragraph-2 text-sign-tertiary truncate">{content}</p>
+            </Flex>
+            <Flex align="end" justify="between" direction="column">
+              <p className="text-paragraph-2 text-sign-caption truncate">
+                {formatDate(latestMessageTiem, ko)}
+              </p>
+              {newMessag && (
+                <div className="text-paragraph-2 text-sign-white flex h-20 w-20 items-center justify-center rounded-full bg-red-400">
+                  {newMessag}
+                </div>
+              )}
+            </Flex>
+          </Flex>
+        </section>
+      </NavLink>
+      {children}
+    </Flex>
+  );
+}
diff --git a/packages/web/src/app/[lng]/(main)/grouping/chatList/components/ChatListHeader.tsx b/packages/web/src/app/[lng]/(main)/grouping/chatList/components/ChatListHeader.tsx
@@ -1,23 +1,24 @@
 'use client';
 
-import { useTranslation } from 'react-i18next';
-
 import { IconButton } from '@/components/Button';
 import { Header } from '@/components/Header';
 import { Icon } from '@/components/Icon';
 import useAppRouter from '@/hooks/useAppRouter';
 
-export default function ChatListHeader() {
+interface ChatListHeaderProps {
+  title: string;
+}
+
+export default function ChatListHeader({ title }: ChatListHeaderProps) {
   const { back } = useAppRouter();
-  const { t } = useTranslation('grouping');
 
   return (
     <Header className="px-4">
       <Header.Left>
         <IconButton size="large" onClick={() => back()}>
           <Icon id="24-arrow_back" />
         </IconButton>
-        <p>{t('chat.listHeader')}</p>
+        <p>{title}</p>
       </Header.Left>
     </Header>
   );

diff --git a/packages/web/src/app/[lng]/(main)/grouping/chatList/components/dummy.ts b/packages/web/src/app/[lng]/(main)/grouping/chatList/components/dummy.ts
@@ -0,0 +1,44 @@
+export interface Chat {
+  title: string;
+  content: string;
+  imageUrl: string;
+  newMessag?: number;
+  groupId: number;
+  latestMessageTiem: string;
+}
+
+export const chatList: Chat[] = [
+  {
+    title: '응가 뿌직',
+    content: '응가좀 치는사람 모이셈',
+    newMessag: 2,
+    imageUrl: '/images/approve_character.png',
+    groupId: 10,
+    latestMessageTiem: '2024-04-06T20:32',
+  },
+  {
+    title: '응가 뿌직',
+    content: '응가좀 치는사람 모이셈',
+    newMessag: 1,
+    imageUrl: '/images/approve_character.png',
+    groupId: 10,
+    latestMessageTiem: '2024-04-10T18:44',
+  },
+  {
+    title: '응가 뿌직',
+    content: '응가좀 치는사람 모이셈',
+
+    imageUrl: '/images/approve_character.png',
+    groupId: 10,
+    latestMessageTiem: '2024-04-06T20:32',
+  },
+  {
+    title: '응가 뿌직',
+    content: '응가좀 치는사람 모이셈',
+    newMessag: 3,
+
+    imageUrl: '/images/approve_character.png',
+    groupId: 10,
+    latestMessageTiem: '2024-04-06T20:32',
+  },
+];
diff --git a/packages/web/src/app/[lng]/(main)/grouping/chatList/page.tsx b/packages/web/src/app/[lng]/(main)/grouping/chatList/page.tsx
@@ -1,10 +1,21 @@
+import ChatCardList from './components/ChatCardList';
 import ChatListHeader from './components/ChatListHeader';
 
-export default function ChatListPage() {
+import { serverTranslation } from '@/app/i18n';
+
+interface ChatListPageProps {
+  params: {
+    lng: string;
+  };
+}
+
+export default async function ChatListPage({ params: { lng } }: ChatListPageProps) {
+  const { t } = await serverTranslation(lng, 'grouping');
+
   return (
     <>
-      <ChatListHeader />
-      <div className={'flex flex-col'}></div>
+      <ChatListHeader title={t('chat.listHeader')} />
+      <ChatCardList />
     </>
   );
 }
diff --git a/packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/chat/page.tsx b/packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/chat/page.tsx
diff --git a/packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/components/GroupDetail.tsx b/packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/components/GroupDetail.tsx
@@ -1,8 +1,10 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
 
+import ArticlesContent from './articles/ArticlesContent';
+import ChatContent from './chat/ChatContent';
+import DetailContent from './detail/DetailContent';
 import TopSection from './TopSection';
 
 import { useGetGroupDetail } from '@/apis/groups';
@@ -12,34 +14,34 @@ import { Spacing } from '@/components/Spacing';
 import { Tabs } from '@/components/Tabs';
 import { useNumberParams } from '@/hooks/useNumberParams';
 
-const DetailContent = dynamic(() => import('./detail/DetailContent'));
-const ArticlesContent = dynamic(() => import('./articles/ArticlesContent'));
-
-export default function GroupDetailPage() {
+export default function GroupDetail() {
   const { t } = useTranslation('groupDetail');
   const { groupId } = useNumberParams<['groupId']>();
+
+  const searchParams = useSearchParams().get('tab');
+
   const { data: groupDetailData } = useGetGroupDetail(groupId);
   const { myGroup } = groupDetailData;
 
   return (
     <>
-      <TopSection />
+      {searchParams !== 'chat' && <TopSection />}
       <Divider />
       <Tabs>
         <Tabs.List>
           <Tabs.Tab value="detail" text={t('details.tab')} />
           <Tabs.Tab value="articles" text={t('board.tab')} disabled={!myGroup} />
+          {/* <Tabs.Tab value="chat" text={t('board.chat')} /> */}
         </Tabs.List>
         <Tabs.Panel value="detail">
-          <Suspense>
-            <DetailContent />
-          </Suspense>
+          <DetailContent />
         </Tabs.Panel>
         <Tabs.Panel value="articles">
-          <Suspense>
-            <ArticlesContent />
-          </Suspense>
+          <ArticlesContent />
         </Tabs.Panel>
+        {/* <Tabs.Panel value="chat">
+          <ChatContent />
+        </Tabs.Panel> */}
       </Tabs>
       <Spacing size={60} />
     </>

diff --git a/packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/components/GroupDetailHeader.tsx b/packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/components/GroupDetailHeader.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useSearchParams } from 'next/navigation';
 import { Suspense } from 'react';
 
 import BlockDoneModal from '../../../components/BlockDoneModal';
@@ -20,9 +21,10 @@ import { useBlockStore } from '@/store/useBlockStore';
 export default function GroupDetailHeader() {
   const { back } = useAppRouter();
   const { groupId } = useNumberParams<['groupId']>();
+  const searchParams = useSearchParams().get('tab');
 
   return (
-    <Header className="px-4">
+    <Header className="px-4" isSpacing={searchParams !== 'chat'}>
       <Header.Left>
         <IconButton size="large" onClick={() => back()}>
           <Icon id="24-arrow_back" />

diff --git a/packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/components/chat/ChatContent.tsx b/packages/web/src/app/[lng]/(main)/grouping/detail/[groupId]/components/chat/ChatContent.tsx
@@ -0,0 +1,29 @@
+import { usePathname } from 'next/navigation';
+
+import MessageForm from '@/components/Form/MessageForm';
+import { Spacing } from '@/components/Spacing';
+import { useNumberParams } from '@/hooks/useNumberParams';
+
+export default function ChatContent() {
+  const pathname = usePathname();
+  const { groupId } = useNumberParams<['groupId']>();
+
+  return (
+    <section className="bg-brand-color h-full overflow-auto">
+      <Spacing size={48} />
+
+      <div className="flex flex-col gap-10">
+        <div className="h-300 bg-primary"></div>
+        <div className="h-300 bg-primary"></div>
+        <div className="h-300 bg-primary"></div>
+        <div className="h-300 bg-primary"></div>
+        <div className="h-300 bg-primary"></div>
+        <div className="h-300 bg-primary"></div>
+        <div className="h-300 bg-primary"></div>
+        <div className="h-300 bg-primary"></div>
+      </div>
+
+      <MessageForm />
+    </section>
+  );
+}