Home이 로드 될 때에 바로 사용되지 않는 컴포넌트에 대해서 동적 import를 진행한다 (#882)

* fix: 바로 사용되지 않는 EmptyMessage component에 대해서 lazy loading 처리

* chore: 당장 사용하지 않는 ts-loader 제거

Author: liswktjs

frontend/package.json

@@ -75,7 +75,6 @@
 		"prettier": "^2.7.1",
 		"storybook-addon-react-router-v6": "^0.2.1",
 		"style-loader": "^3.3.1",
-		"ts-loader": "^9.4.1",
 		"typescript": "^4.7.4",
 		"webpack": "^5.73.0",
 		"webpack-bundle-analyzer": "^4.6.1",

frontend/src/components/article/PopularArticle/PopularArticle.tsx

@@ -1,13 +1,15 @@
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import EmptyMessage from '@/components/@common/EmptyMessage/EmptyMessage';
 import Loading from '@/components/@common/Loading/Loading';
 import * as S from '@/components/article/PopularArticle/PopularArticle.styles';
 import PopularArticleItem from '@/components/article/PopularArticleItem/PopularArticleItem';
 import useGetPopularArticles from '@/hooks/article/useGetPopularArticles';
 import useCarousel from '@/hooks/common/useCarousel';
 import { Category } from '@/types/articleResponse';
 
+const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
+
 const PopularArticle = () => {
 	const { handleCarouselElementRef, handleLeftSlideEvent, handleRightSlideEvent, currentIndex } =
 		useCarousel();

frontend/src/components/comment/CommentContent/CommentContent.tsx

@@ -1,4 +1,5 @@
-import EmptyMessage from '@/components/@common/EmptyMessage/EmptyMessage';
+import React from 'react';
+
 import Comment from '@/components/comment/Comment/Comment';
 import * as S from '@/components/comment/CommentContent/CommentContent.styles';
 import useDetailCommentState from '@/hooks/comment/useDetailCommentState';
@@ -9,6 +10,8 @@ export interface CommentContentProps {
 	commentList: CommentType[];
 }
 
+const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
+
 const CommentContent = ({ articleId, commentList }: CommentContentProps) => {
 	const { handleClickCommentPlusButton, isLogin } = useDetailCommentState({ articleId });
 	return (

frontend/src/components/search/SearchResult/SearchResult.tsx

@@ -1,7 +1,6 @@
 import React, { Suspense, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import EmptyMessage from '@/components/@common/EmptyMessage/EmptyMessage';
 import Loading from '@/components/@common/Loading/Loading';
 import ArticleItem from '@/components/article/ArticleItem/ArticleItem';
 import * as S from '@/components/search/SearchResult/SearchResult.styles';
@@ -11,6 +10,7 @@ import { CommonArticleType } from '@/types/articleResponse';
 const ResponsiveInfiniteCardList = React.lazy(
 	() => import('@/components/@common/ResponsiveInfiniteCardList/ResponsiveInfiniteCardList'),
 );
+const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
 
 const SearchResult = ({ target, searchIndex }: { target: string; searchIndex: string }) => {
 	const { data, isLoading, isIdle, refetch, fetchNextPage } = useGetSearch({ target, searchIndex });

frontend/src/components/tempArticle/TemporaryArticleList/TemporaryArticleList.tsx

@@ -1,13 +1,15 @@
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import EmptyMessage from '@/components/@common/EmptyMessage/EmptyMessage';
 import Loading from '@/components/@common/Loading/Loading';
 import TemporaryArticleItem from '@/components/tempArticle/TemporaryArticleItem/TemporaryArticleItem';
 import * as S from '@/components/tempArticle/TemporaryArticleList/TemporaryArticleList.styles';
 import useDeleteTempArticle from '@/hooks/tempArticle/useDeleteTempArticle';
 import useGetTempArticles from '@/hooks/tempArticle/useGetTempArticles';
 import { TempArticleItem } from '@/types/articleResponse';
 
+const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
+
 const TemporaryArticleList = () => {
 	const { data, isLoading } = useGetTempArticles();
 	const { deleteTempArticleId } = useDeleteTempArticle();

frontend/src/components/user/UserArticleBox/UserArticleBox.tsx

@@ -1,9 +1,12 @@
-import EmptyMessage from '@/components/@common/EmptyMessage/EmptyMessage';
+import React from 'react';
+
 import Loading from '@/components/@common/Loading/Loading';
 import * as S from '@/components/user/UserArticleBox/UserArticleBox.styles';
 import UserArticleItem from '@/components/user/UserArticleItem/UserArticleItem';
 import useGetUserArticles from '@/hooks/user/useGetUserArticles';
 
+const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
+
 const UserArticleBox = () => {
 	const {
 		data: articles,

frontend/src/components/user/UserCommentBox/UserCommentBox.tsx

@@ -1,9 +1,12 @@
-import EmptyMessage from '@/components/@common/EmptyMessage/EmptyMessage';
+import React from 'react';
+
 import Loading from '@/components/@common/Loading/Loading';
 import * as S from '@/components/user/UserCommentBox/UserCommentBox.styles';
 import UserCommentItem from '@/components/user/UserCommentItem/UserCommentItem';
 import useGetUserComments from '@/hooks/user/useGetUserComments';
 
+const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
+
 const UserCommentBox = () => {
 	const {
 		data: comments,

frontend/src/pages/CategoryArticles/CategoryArticles.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import EmptyMessage from '@/components/@common/EmptyMessage/EmptyMessage';
 import Loading from '@/components/@common/Loading/Loading';
 import ResponsiveInfiniteCardList from '@/components/@common/ResponsiveInfiniteCardList/ResponsiveInfiniteCardList';
 import SortDropdown from '@/components/@common/SortDropdown/SortDropDown';
@@ -11,6 +11,8 @@ import * as S from '@/pages/CategoryArticles/CategoryArticles.styles';
 import { CommonArticleType } from '@/types/articleResponse';
 import { categoryNameConverter } from '@/utils/converter';
 
+const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
+
 const CategoryArticles = () => {
 	const navigate = useNavigate();
 	const { category } = useParams();

frontend/src/pages/Home/index.tsx

@@ -1,7 +1,6 @@
 import React, { Suspense } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import EmptyMessage from '@/components/@common/EmptyMessage/EmptyMessage';
 import Loading from '@/components/@common/Loading/Loading';
 import SortDropdown from '@/components/@common/SortDropdown/SortDropDown';
 import useGetAllArticles from '@/hooks/article/useGetAllArticles';
@@ -16,6 +15,7 @@ const ArticleItem = React.lazy(() => import('@/components/article/ArticleItem/Ar
 const PopularArticle = React.lazy(
 	() => import('@/components/article/PopularArticle/PopularArticle'),
 );
+const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
 
 const Home = () => {
 	const [enterRef] = useEnterToClick();

frontend/src/pages/UpdateWriting/index.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import Card from '@/components/@common/Card/Card';