diff --git a/packages/web/next.config.mjs b/packages/web/next.config.mjs
index 5963aab24..0d1fe0d59 100644
--- 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
index 1bb1d0fca..385852db4 100644
--- 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
deleted file mode 100644
index 6d7b09c24..000000000
--- a/packages/web/public/sprite/icons/32-footer-community_selected.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/packages/web/public/sprite/icons/32-footer-grouping_selected.svg b/packages/web/public/sprite/icons/32-footer-grouping_selected.svg
deleted file mode 100644
index 71756e171..000000000
--- a/packages/web/public/sprite/icons/32-footer-grouping_selected.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/packages/web/public/sprite/icons/32-footer-meeting_selected.svg b/packages/web/public/sprite/icons/32-footer-meeting_selected.svg
deleted file mode 100644
index 335d562b8..000000000
--- a/packages/web/public/sprite/icons/32-footer-meeting_selected.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/packages/web/public/sprite/icons/32-footer-profile_selected.svg b/packages/web/public/sprite/icons/32-footer-profile_selected.svg
deleted file mode 100644
index 126825068..000000000
--- a/packages/web/public/sprite/icons/32-footer-profile_selected.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.tsx b/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.tsx
index 1b0ab9c47..93dd16fbd 100644
--- 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: ,
+ MATE: ,
+ SOUL_MATE: ,
+ GLODDY: ,
+ };
+
return (
{nickName}
-
+ {reliabilityIcon[reliabilityLevel]}
-
+
{likeCount.toString().padStart(2, '0')}
-
+
{commentCount.toString().padStart(2, '0')}
diff --git a/packages/web/src/app/[lng]/(main)/community/components/CommunityArticles.tsx b/packages/web/src/app/[lng]/(main)/community/components/CommunityArticles.tsx
index a4882d363..1f159c0f4 100644
--- 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={() => }
+ renderEmpty={() => }
/>
>
diff --git a/packages/web/src/app/[lng]/(main)/community/components/Empty.tsx b/packages/web/src/app/[lng]/(main)/community/components/Empty.tsx
deleted file mode 100644
index 94f9a7f24..000000000
--- a/packages/web/src/app/[lng]/(main)/community/components/Empty.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Icon } from '@/components/Icon';
-import { Flex } from '@/components/Layout';
-import { Spacing } from '@/components/Spacing';
-
-interface EmptyProps {
- message?: string;
-}
-export default function Empty({ message = '아직 글이 없어요' }: EmptyProps) {
- return (
-
-
-
- {message}
-
- );
-}
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
index a60238898..709678747 100644
--- 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={() => }
+ renderEmpty={() => }
/>
>
);
}
-
-function EmptyComment() {
- const { t } = useTranslation('community');
-
- return (
-
-
-
- {t('comment.firstComment')}
-
- );
-}
diff --git a/packages/web/src/app/[lng]/(main)/grouping/components/GroupingCardList.tsx b/packages/web/src/app/[lng]/(main)/grouping/components/GroupingCardList.tsx
index b723cb2c5..67d30d78a 100644
--- 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
index af441bcc9..7d3b29f67 100644
--- 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')}
>
-
+
-
+
diff --git a/packages/web/src/app/[lng]/(main)/profile/components/ProfileDetailSection.tsx b/packages/web/src/app/[lng]/(main)/profile/components/ProfileDetailSection.tsx
index 0c35fb7b5..f7a133831 100644
--- 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: ,
+ MATE: ,
+ SOUL_MATE: ,
+ GLODDY: ,
+ };
+
return (
<>
@@ -88,29 +103,35 @@ export default function ProfileDetailSection({ profileData }: ProfileDetailProps
{countryImage && (
-
+
)}
{nickname}
-
+ {reliabilityIcon[reliabilityLevel]}
-
+
{school}
-
- {gender === 'MALE' ? t('home.gender.male') : t('home.gender.female')}
+ {gender === 'MALE' ? (
+ <>
+
+ {t('home.gender.male')}
+ >
+ ) : (
+ <>
+
+ {t('home.gender.female')}
+ >
+ )}
-
+
{age}
{t('세')}
@@ -163,13 +184,10 @@ export default function ProfileDetailSection({ profileData }: ProfileDetailProps
{reliabilities.map((reliabilityItem) => (
-
+ {reliabilityIcon[reliabilityItem.name]}
{reliabilityItem.name}
diff --git a/packages/web/src/app/[lng]/(main)/profile/components/ProfileHeader.tsx b/packages/web/src/app/[lng]/(main)/profile/components/ProfileHeader.tsx
index e6c285b74..0c40cca33 100644
--- 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() {
-
+
diff --git a/packages/web/src/app/[lng]/layout.tsx b/packages/web/src/app/[lng]/layout.tsx
index 5ca69de6f..74d45a6d3 100644
--- 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
index eb9240a76..e14ac6f33 100644
--- 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
index 831163c95..34caf6986 100644
--- 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
index a51cacc5f..8634be9e0 100644
--- 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": {
diff --git a/packages/web/src/app/i18n/locales/zh-TW/community.json b/packages/web/src/app/i18n/locales/zh-TW/community.json
index afb060104..1e9a0ea43 100644
--- a/packages/web/src/app/i18n/locales/zh-TW/community.json
+++ b/packages/web/src/app/i18n/locales/zh-TW/community.json
@@ -5,6 +5,9 @@
"Q&A": "我想知道",
"Language": "語言交換"
},
+
+ "empty": "還沒有文章",
+
"create": {
"headerTitle": "創建帖子",
"category": {
diff --git a/packages/web/public/sprite/icons/16-application.svg b/packages/web/src/assets/svgs/16-application.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-application.svg
rename to packages/web/src/assets/svgs/16-application.svg
diff --git a/packages/web/public/sprite/icons/16-birth.svg b/packages/web/src/assets/svgs/16-birth.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-birth.svg
rename to packages/web/src/assets/svgs/16-birth.svg
diff --git a/packages/web/public/sprite/icons/16-comment_fill.svg b/packages/web/src/assets/svgs/16-comment_fill.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-comment_fill.svg
rename to packages/web/src/assets/svgs/16-comment_fill.svg
diff --git a/packages/web/public/sprite/icons/16-date_range.svg b/packages/web/src/assets/svgs/16-date_range.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-date_range.svg
rename to packages/web/src/assets/svgs/16-date_range.svg
diff --git a/packages/web/public/sprite/icons/16-favorite_fill.svg b/packages/web/src/assets/svgs/16-favorite.svg
similarity index 90%
rename from packages/web/public/sprite/icons/16-favorite_fill.svg
rename to packages/web/src/assets/svgs/16-favorite.svg
index edd5fd3a1..76a63e6f9 100644
--- a/packages/web/public/sprite/icons/16-favorite_fill.svg
+++ b/packages/web/src/assets/svgs/16-favorite.svg
@@ -1,5 +1,5 @@
diff --git a/packages/web/src/assets/svgs/16-female.svg b/packages/web/src/assets/svgs/16-female.svg
new file mode 100644
index 000000000..0c8c734c7
--- /dev/null
+++ b/packages/web/src/assets/svgs/16-female.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/web/public/sprite/icons/16-group_blue.svg b/packages/web/src/assets/svgs/16-group_blue.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-group_blue.svg
rename to packages/web/src/assets/svgs/16-group_blue.svg
diff --git a/packages/web/public/sprite/icons/16-group_gray.svg b/packages/web/src/assets/svgs/16-group_gray.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-group_gray.svg
rename to packages/web/src/assets/svgs/16-group_gray.svg
diff --git a/packages/web/public/sprite/icons/16-group_warning.svg b/packages/web/src/assets/svgs/16-group_warning.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-group_warning.svg
rename to packages/web/src/assets/svgs/16-group_warning.svg
diff --git a/packages/web/public/sprite/icons/16-host.svg b/packages/web/src/assets/svgs/16-host.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-host.svg
rename to packages/web/src/assets/svgs/16-host.svg
diff --git a/packages/web/public/sprite/icons/16-info.svg b/packages/web/src/assets/svgs/16-info.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-info.svg
rename to packages/web/src/assets/svgs/16-info.svg
diff --git a/packages/web/public/sprite/icons/16-location.svg b/packages/web/src/assets/svgs/16-location.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-location.svg
rename to packages/web/src/assets/svgs/16-location.svg
diff --git a/packages/web/public/sprite/icons/16-male.svg b/packages/web/src/assets/svgs/16-male.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-male.svg
rename to packages/web/src/assets/svgs/16-male.svg
diff --git a/packages/web/public/sprite/icons/16-reliability-gloddy.svg b/packages/web/src/assets/svgs/16-reliability-gloddy.svg
similarity index 100%
rename from packages/web/public/sprite/icons/16-reliability-gloddy.svg
rename to packages/web/src/assets/svgs/16-reliability-gloddy.svg
diff --git a/packages/web/public/sprite/icons/16-reliability-hood.svg b/packages/web/src/assets/svgs/16-reliability-hood.svg
similarity index 96%
rename from packages/web/public/sprite/icons/16-reliability-hood.svg
rename to packages/web/src/assets/svgs/16-reliability-hood.svg
index b8119d5db..33a923bda 100644
--- a/packages/web/public/sprite/icons/16-reliability-hood.svg
+++ b/packages/web/src/assets/svgs/16-reliability-hood.svg
@@ -1,4 +1,4 @@
-