main에 반영된 핫픽스된 부분을 develop에 반영한다. (#892)

* 이미지 리사이징이 되지 않는 문제 해결 (#879)

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

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

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

* 인기게시물에서 isLike여부에 따라서 보여주는 UI를 변경한다.  (#896)

* fix: Carousel 의도를 들어낼 수 있는 네이밍으로 수정

* fix: 하트를 누른 경우에만 차보이도록 구현

* feat: aria-label 추가

Co-authored-by: JASUN LEE <[email protected]>

Author: hwangstar156

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.styles.tsx renamed to frontend/src/components/article/PopularArticleCarousel/PopularArticleCarousel.styles.tsx

@@ -1,14 +1,16 @@
+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 * as S from '@/components/article/PopularArticleCarousel/PopularArticleCarousel.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 PopularArticle = () => {
+const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
+
+const PopularArticleCarousel = () => {
 	const { handleCarouselElementRef, handleLeftSlideEvent, handleRightSlideEvent, currentIndex } =
 		useCarousel();
 	const { data, isLoading } = useGetPopularArticles();
@@ -57,4 +59,4 @@ const PopularArticle = () => {
 	) : null;
 };
 
-export default PopularArticle;
+export default PopularArticleCarousel;

frontend/src/components/article/PopularArticle/PopularArticle.tsx renamed to frontend/src/components/article/PopularArticleCarousel/PopularArticleCarousel.tsx

@@ -1,4 +1,4 @@
-import { AiOutlineEye, AiOutlineMessage, AiFillHeart } from 'react-icons/ai';
+import { AiOutlineEye, AiOutlineMessage, AiFillHeart, AiOutlineHeart } from 'react-icons/ai';
 
 import {
 	UserProfile,
@@ -32,7 +32,13 @@ export const ViewIcon = styled(AiOutlineEye)`
 	color: ${({ theme }) => theme.colors.BLACK_600};
 `;
 
-export const HeartIcon = styled(AiFillHeart)`
+export const FillHeartIcon = styled(AiFillHeart)`
+	font-size: ${({ theme }) => theme.size.SIZE_016};
+
+	color: ${({ theme }) => theme.colors.RED_600};
+`;
+
+export const EmptyHeartIcon = styled(AiOutlineHeart)`
 	font-size: ${({ theme }) => theme.size.SIZE_016};
 
 	color: ${({ theme }) => theme.colors.RED_600};

frontend/src/components/article/PopularArticleItem/PopularArticleItem.styles.tsx

@@ -64,7 +64,11 @@ const PopularArticleItem = ({
 								{views.toLocaleString()}
 							</PopularS.IconContainer>
 							<PopularS.IconContainer>
-								<PopularS.HeartIcon aria-label="좋아요수" />
+								{article.isLike ? (
+									<PopularS.FillHeartIcon aria-label="좋아요수" />
+								) : (
+									<PopularS.EmptyHeartIcon aria-label="좋아요수" />
+								)}
 								{likeCount.toLocaleString()}
 							</PopularS.IconContainer>
 						</S.ArticleInfoSubBox>

frontend/src/components/article/PopularArticleItem/PopularArticleItem.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/comment/CommentContent/CommentContent.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/search/SearchResult/SearchResult.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/tempArticle/TemporaryArticleList/TemporaryArticleList.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/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/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/components/user/UserCommentBox/UserCommentBox.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/CategoryArticles/CategoryArticles.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';
@@ -14,8 +13,9 @@ const ResponsiveInfiniteCardList = React.lazy(
 );
 const ArticleItem = React.lazy(() => import('@/components/article/ArticleItem/ArticleItem'));
 const PopularArticle = React.lazy(
-	() => import('@/components/article/PopularArticle/PopularArticle'),
+	() => import('@/components/article/PopularArticleCarousel/PopularArticleCarousel'),
 );
+const EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
 
 const Home = () => {
 	const [enterRef] = useEnterToClick();

frontend/src/pages/Home/index.tsx

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

frontend/src/pages/UpdateWriting/index.tsx

@@ -1,13 +1,13 @@
 import { rest } from 'msw';
 import { BrowserRouter } from 'react-router-dom';
 
-import PopularArticle from '@/components/article/PopularArticle/PopularArticle';
+import PopularArticleCarousel from '@/components/article/PopularArticleCarousel/PopularArticleCarousel';
 import { HOME_URL } from '@/constants/apiUrl';
 import { Meta, Story } from '@storybook/react';
 
 export default {
 	title: 'Article/PopularArticle',
-	component: PopularArticle,
+	component: PopularArticleCarousel,
 	decorators: [
 		(Story) => (
 			<BrowserRouter>
@@ -19,7 +19,7 @@ export default {
 	],
 } as Meta;
 
-const Template: Story = (args) => <PopularArticle {...args} />;
+const Template: Story = (args) => <PopularArticleCarousel {...args} />;
 
 export const DefaultPopularArticle = Template.bind({});
 DefaultPopularArticle.args = {};

frontend/src/storybook/Article/PopularArticle.stories.tsx

@@ -77,7 +77,7 @@ export const convertGithubAvatarUrlForResize = (avatarUrl: string) => {
 		return avatarUrl;
 	}
 
-	if (typeof global.process === 'undefined') {
+	if (process.env.STORYBOOK) {
 		return avatarUrl;
 	}