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": {