Icon 깜빡임 현상 개선, Image 최적화 (#689)

* feat: svgr 설정 및 svg icon 폴더 이동 * refactor: Icon 개선, 중복되는 Emty 컴포넌트 제거 * refactor: image 설정 수정, 불필요한 로깅 제거
gloddy-dev · Apr 12, 2024 · 37702d3 · 37702d3
1 parent d729eb6
commit 37702d3
Show file tree

Hide file tree

Showing 104 changed files with 1,173 additions and 125 deletions.
diff --git a/packages/web/next.config.mjs b/packages/web/next.config.mjs
@@ -9,6 +9,19 @@ const withBundleAnalyzer = createBundleAnalyzer({
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
+  webpack: (config) => {
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
+
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: fileLoaderRule.issuer,
+      resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+      use: ['@svgr/webpack'],
+    });
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
   images: {
     remotePatterns: [
       {
@@ -21,9 +34,10 @@ const nextConfig = {
       },
     ],
     deviceSizes: [450],
-    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384, 450],
-    minimumCacheTTL: 31536000,
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 450],
+    minimumCacheTTL: 6000,
     formats: ['image/webp'],
   },
 };
+
 export default withBundleAnalyzer(withPlaiceholder(nextConfig));
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -56,6 +56,7 @@
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-typescript": "^7.22.5",
     "@hookform/devtools": "^4.3.1",
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",

diff --git a/packages/web/public/sprite/icons/32-footer-community_selected.svg b/packages/web/public/sprite/icons/32-footer-community_selected.svg
diff --git a/packages/web/public/sprite/icons/32-footer-grouping_selected.svg b/packages/web/public/sprite/icons/32-footer-grouping_selected.svg
diff --git a/packages/web/public/sprite/icons/32-footer-meeting_selected.svg b/packages/web/public/sprite/icons/32-footer-meeting_selected.svg
diff --git a/packages/web/public/sprite/icons/32-footer-profile_selected.svg b/packages/web/public/sprite/icons/32-footer-profile_selected.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
@@ -6,6 +6,12 @@ import Image from 'next/image';
 import { CommunityArticle } from '@/apis/community';
 import ArticleBadge from '@/app/[lng]/(main)/community/components/ArticleBadge';
 import { useTranslation } from '@/app/i18n/client';
+import CommentIcon from '@/assets/svgs/16-comment_fill.svg';
+import FavoritIcon from '@/assets/svgs/16-favorite.svg';
+import GloddyIcon from '@/assets/svgs/16-reliability-gloddy.svg';
+import HoodIcon from '@/assets/svgs/16-reliability-hood.svg';
+import MateIcon from '@/assets/svgs/16-reliability-mate.svg';
+import SoulMateIcon from '@/assets/svgs/16-reliability-soulmate.svg';
 import { Avatar } from '@/components/Avatar';
 import { Divider } from '@/components/Divider';
 import { Icon } from '@/components/Icon';
@@ -39,6 +45,13 @@ export default function ArticleItem({ articleData, onClick }: ArticleItemProps)
 
   const { isCertifiedStudent, reliabilityLevel, nickName, countryImage, profileImage } = writer;
 
+  const reliabilityIcon = {
+    HOOD: <HoodIcon width={16} height={16} />,
+    MATE: <MateIcon width={16} height={16} />,
+    SOUL_MATE: <SoulMateIcon width={16} height={16} />,
+    GLODDY: <GloddyIcon width={16} height={16} />,
+  };
+
   return (
     <div
       className="p-20"
@@ -71,22 +84,17 @@ export default function ArticleItem({ articleData, onClick }: ArticleItemProps)
             countryImage={countryImage}
           />
           <p className="text-paragraph-2">{nickName}</p>
-          <Icon id={`16-reliability-${reliabilityLevel.toLowerCase()}`} width={16} height={16} />
+          {reliabilityIcon[reliabilityLevel]}
         </Flex>
         <Flex align="center" className="gap-8">
           <Flex align="center" className="gap-4">
-            <Icon
-              id="16-favorite_fill"
-              width={16}
-              height={16}
-              className={cn(isLiked ? 'text-warning' : 'text-sign-caption')}
-            />
+            <FavoritIcon className={cn(isLiked ? 'text-warning' : 'text-sign-caption')} />
             <p className={cn(isLiked ? 'text-warning' : 'text-sign-caption') + ' text-subtitle-3'}>
               {likeCount.toString().padStart(2, '0')}
             </p>
           </Flex>
           <Flex align="center" className="gap-4">
-            <Icon id="16-comment_fill" width={16} height={16} />
+            <CommentIcon />
             <p className="text-caption text-sign-brand">
               {commentCount.toString().padStart(2, '0')}
             </p>

diff --git a/packages/web/src/app/[lng]/(main)/community/components/CommunityArticles.tsx b/packages/web/src/app/[lng]/(main)/community/components/CommunityArticles.tsx
@@ -4,9 +4,10 @@ import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 import ArticleItem from './ArticleItem';
-import Empty from './Empty';
 
 import { useGetCommunityArticles } from '@/apis/community/queries';
+import { useTranslation } from '@/app/i18n/client';
+import { Empty } from '@/components/Empty';
 import { ItemList } from '@/components/List';
 import { useBlockStore } from '@/store/useBlockStore';
 
@@ -15,6 +16,7 @@ interface CommunityArticle {
 }
 
 export default function CommunityArticles({ categoryId }: CommunityArticle) {
+  const { t } = useTranslation('community');
   const { ref, inView } = useInView();
   const { blockCommunityArticleIds } = useBlockStore();
   const { data: articleList, fetchNextPage, hasNextPage } = useGetCommunityArticles(categoryId);
@@ -34,7 +36,7 @@ export default function CommunityArticles({ categoryId }: CommunityArticle) {
             )
           );
         }}
-        renderEmpty={() => <Empty />}
+        renderEmpty={() => <Empty message={t('empty')} />}
       />
       <div ref={ref} />
     </>

diff --git a/packages/web/src/app/[lng]/(main)/community/components/Empty.tsx b/packages/web/src/app/[lng]/(main)/community/components/Empty.tsx
diff --git a/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentList.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentList.tsx
@@ -3,8 +3,7 @@ import CommentItem from './CommentItem';
 
 import { Comment } from '@/apis/community/type';
 import { useTranslation } from '@/app/i18n/client';
-import { Icon } from '@/components/Icon';
-import { Flex } from '@/components/Layout';
+import { Empty } from '@/components/Empty';
 import { ItemList } from '@/components/List';
 import { Spacing } from '@/components/Spacing';
 import { useNumberParams } from '@/hooks/useNumberParams';
@@ -16,6 +15,7 @@ interface CommentListProps {
 }
 
 export default function CommentList({ commentList, articleWriterId }: CommentListProps) {
+  const { t } = useTranslation('community');
   const { articleId } = useNumberParams<['articleId']>();
   const { blockCommunityCommentIds } = useBlockStore();
 
@@ -35,21 +35,9 @@ export default function CommentList({ commentList, articleWriterId }: CommentLis
             )
           );
         }}
-        renderEmpty={() => <EmptyComment />}
+        renderEmpty={() => <Empty message={t('comment.firstComment')} />}
       />
       <Spacing size={102} />
     </>
   );
 }
-
-function EmptyComment() {
-  const { t } = useTranslation('community');
-
-  return (
-    <Flex direction="column" justify="center" align="center" className="my-80">
-      <Icon id="48-cancel" width={48} height={48} />
-      <Spacing size={8} />
-      <p className="text-sign-tertiary">{t('comment.firstComment')}</p>
-    </Flex>
-  );
-}
diff --git a/packages/web/src/app/[lng]/(main)/grouping/components/GroupingCardList.tsx b/packages/web/src/app/[lng]/(main)/grouping/components/GroupingCardList.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 

diff --git a/packages/web/src/app/[lng]/(main)/grouping/components/GroupingHeader.tsx b/packages/web/src/app/[lng]/(main)/grouping/components/GroupingHeader.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { useTranslation } from '@/app/i18n/client';
+import CommentsIcon from '@/assets/svgs/24-comments.svg';
+import NotifiIcon from '@/assets/svgs/24-notification.svg';
 import { IconButton } from '@/components/Button';
 import { Header } from '@/components/Header';
-import { Icon } from '@/components/Icon';
 import { NavLink } from '@/components/NavLink';
 
 export default function GroupingHeader() {
@@ -28,11 +29,11 @@ export default function GroupingHeader() {
           size="large"
           onClick={() => window.open('https://forms.gle/YJvNzLniP8he4xv68', '_blank')}
         >
-          <Icon id="24-comments" />
+          <CommentsIcon />
         </IconButton>
         <NavLink href="/notification">
           <IconButton size="large">
-            <Icon id="24-notification" className={'text-primary'} />
+            <NotifiIcon />
           </IconButton>
         </NavLink>
       </Header.Right>

diff --git a/packages/web/src/app/[lng]/(main)/profile/components/ProfileDetailSection.tsx b/packages/web/src/app/[lng]/(main)/profile/components/ProfileDetailSection.tsx
@@ -6,6 +6,14 @@ import { useParams, usePathname } from 'next/navigation';
 
 import { useGetProfileById } from '@/apis/profile';
 import { useTranslation } from '@/app/i18n/client';
+import BirthIcon from '@/assets/svgs/16-birth.svg';
+import FemaleIcon from '@/assets/svgs/16-female.svg';
+import MaleIcon from '@/assets/svgs/16-male.svg';
+import GloddyIcon from '@/assets/svgs/16-reliability-gloddy.svg';
+import HoodIcon from '@/assets/svgs/16-reliability-hood.svg';
+import MateIcon from '@/assets/svgs/16-reliability-mate.svg';
+import SoulMateIcon from '@/assets/svgs/16-reliability-soulmate.svg';
+import ScooleIcon from '@/assets/svgs/16-school.svg';
 import { Avatar } from '@/components/Avatar';
 import { Divider } from '@/components/Divider';
 import { Icon } from '@/components/Icon';
@@ -61,6 +69,13 @@ export default function ProfileDetailSection({ profileData }: ProfileDetailProps
     return num < 10 ? '0' + num : num;
   }
 
+  const reliabilityIcon = {
+    HOOD: <HoodIcon width={16} height={16} />,
+    MATE: <MateIcon width={16} height={16} />,
+    SOUL_MATE: <SoulMateIcon width={16} height={16} />,
+    GLODDY: <GloddyIcon width={16} height={16} />,
+  };
+
   return (
     <>
       <section className="rounded-b-24 shadow-float bg-white">
@@ -88,29 +103,35 @@ export default function ProfileDetailSection({ profileData }: ProfileDetailProps
           <h4 className="text-h4 relative flex items-center gap-5">
             {countryImage && (
               <div className="relative h-16 w-24">
-                <Image src={countryImage} fill sizes="32px" className="object-fill" alt="국가" />
+                <Image src={countryImage} fill sizes="24px" className="object-fill" alt="국가" />
               </div>
             )}
             <span>{nickname}</span>
-            <Icon
-              id={`16-reliability-${reliabilityLevel.toLowerCase()}`}
-              className="-right-22 absolute top-0"
-            />
+            {reliabilityIcon[reliabilityLevel]}
           </h4>
           <Spacing size={4} />
           <Flex className="h-18 text-caption text-sign-tertiary gap-4" align="start">
             <Flex className="gap-4" align="center">
-              <Icon id="16-school" width={16} height={16} />
+              <ScooleIcon />
               <span>{school}</span>
             </Flex>
             <Divider direction="vertical" className="h-12" />
             <Flex className="gap-4" align="center">
-              <Icon id="16-male" width={16} height={16} />
-              <span>{gender === 'MALE' ? t('home.gender.male') : t('home.gender.female')}</span>
+              {gender === 'MALE' ? (
+                <>
+                  <MaleIcon />
+                  <span>{t('home.gender.male')}</span>
+                </>
+              ) : (
+                <>
+                  <FemaleIcon />
+                  {t('home.gender.female')}
+                </>
+              )}
             </Flex>
             <Divider direction="vertical" className="h-12" />
             <Flex className="gap-4" align="center">
-              <Icon id="16-birth" width={16} height={16} />
+              <BirthIcon />
               <span>
                 {age}
                 {t('세')}
@@ -163,13 +184,10 @@ export default function ProfileDetailSection({ profileData }: ProfileDetailProps
               {reliabilities.map((reliabilityItem) => (
                 <Flex
                   key={reliabilityItem.id}
+                  align="center"
                   className={cn({ 'opacity-30': reliabilityLevel !== reliabilityItem.name })}
                 >
-                  <Icon
-                    id={`16-reliability-${reliabilityItem.name.toLowerCase()}`}
-                    width={16}
-                    height={16}
-                  />
+                  {reliabilityIcon[reliabilityItem.name]}
                   <Spacing size={2} direction="horizontal" />
                   <p>{reliabilityItem.name}</p>
                 </Flex>

diff --git a/packages/web/src/app/[lng]/(main)/profile/components/ProfileHeader.tsx b/packages/web/src/app/[lng]/(main)/profile/components/ProfileHeader.tsx
@@ -1,7 +1,7 @@
 'use client';
+import SettingIcon from '@/assets/svgs/24-settings.svg';
 import { IconButton } from '@/components/Button';
 import { Header } from '@/components/Header';
-import { Icon } from '@/components/Icon';
 import { NavLink } from '@/components/NavLink';
 
 export default function ProfileHeader() {
@@ -10,7 +10,7 @@ export default function ProfileHeader() {
       <Header.Right>
         <NavLink href="/profile/setting">
           <IconButton size="large">
-            <Icon id="24-settings" />
+            <SettingIcon />
           </IconButton>
         </NavLink>
       </Header.Right>

diff --git a/packages/web/src/app/[lng]/layout.tsx b/packages/web/src/app/[lng]/layout.tsx
@@ -21,7 +21,7 @@ const DEFAULT_OG_IMAGE = '/images/main_logo.png';
 const SansFont = localFont({
   src: [
     {
-      path: './fonts/Pretendard-Medium.woff2',
+      path: 'fonts/Pretendard-Medium.woff2',
       weight: '500',
       style: 'normal',
     },

diff --git a/packages/web/src/app/i18n/locales/en/community.json b/packages/web/src/app/i18n/locales/en/community.json
@@ -6,6 +6,8 @@
     "Language": "Language"
   },
 
+  "empty": "No posts yet",
+
   "create": {
     "headerTitle": "Create Post",
     "category": {

diff --git a/packages/web/src/app/i18n/locales/ko/community.json b/packages/web/src/app/i18n/locales/ko/community.json
@@ -6,6 +6,8 @@
     "Language": "언어교환"
   },
 
+  "empty": "아직 글이 없어요",
+
   "create": {
     "headerTitle": "게시글 작성",
     "category": {

diff --git a/packages/web/src/app/i18n/locales/zh-CN/community.json b/packages/web/src/app/i18n/locales/zh-CN/community.json
@@ -5,6 +5,9 @@
     "Q&A": "我想知道",
     "Language": "语言交换"
   },
+
+  "empty": "还没有文章",
+
   "create": {
     "headerTitle": "创建帖子",
     "category": {