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