refactor: Icon 개선, 중복되는 Emty 컴포넌트 제거

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>

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} />
  </>

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>
- );
-}

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';
 

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>

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,15 @@ 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} />,
+ };
+
+ console.log(reliabilityLevel);
+
  return (
  <>
  <section className="rounded-b-24 shadow-float bg-white">
@@ -92,25 +109,31 @@ export default function ProfileDetailSection({ profileData }: ProfileDetailProps
  </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 +186,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>

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>

packages/web/src/app/i18n/locales/en/community.json

@@ -6,6 +6,8 @@
  "Language": "Language"
  },
 
+ "empty": "No posts yet",
+
  "create": {
  "headerTitle": "Create Post",
  "category": {

packages/web/src/app/i18n/locales/ko/community.json

@@ -6,6 +6,8 @@
  "Language": "언어교환"
  },
 
+ "empty": "아직 글이 없어요",
+
  "create": {
  "headerTitle": "게시글 작성",
  "category": {

packages/web/src/app/i18n/locales/zh-CN/community.json

@@ -5,6 +5,9 @@
  "Q&A": "我想知道",
  "Language": "语言交换"
  },
+
+ "empty": "还没有文章",
+
  "create": {
  "headerTitle": "创建帖子",
  "category": {

packages/web/src/app/i18n/locales/zh-TW/community.json

@@ -5,6 +5,9 @@
  "Q&A": "我想知道",
  "Language": "語言交換"
  },
+
+ "empty": "還沒有文章",
+
  "create": {
  "headerTitle": "創建帖子",
  "category": {