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

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

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

* feat: aria-label 추가

Author: hwangstar156

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

@@ -2,15 +2,15 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 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 EmptyMessage = React.lazy(() => import('@/components/@common/EmptyMessage/EmptyMessage'));
 
-const PopularArticle = () => {
+const PopularArticleCarousel = () => {
 	const { handleCarouselElementRef, handleLeftSlideEvent, handleRightSlideEvent, currentIndex } =
 		useCarousel();
 	const { data, isLoading } = useGetPopularArticles();
@@ -59,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

@@ -13,7 +13,7 @@ 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'));
 

frontend/src/pages/Home/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 = {};