Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 8, 2022
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d7c69e
fix: Carousel 의도를 들어낼 수 있는 네이밍으로 수정
hwangstar156 Nov 4, 2022
7feb0c6
fix: 하트를 누른 경우에만 차보이도록 구현
hwangstar156 Nov 4, 2022
bd4b203
feat: aria-label 추가
hwangstar156 Nov 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 .../PopularArticle/PopularArticle.styles.tsx → ...arousel/PopularArticleCarousel.styles.tsx
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions ...article/PopularArticle/PopularArticle.tsx → ...rticleCarousel/PopularArticleCarousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -59,4 +59,4 @@ const PopularArticle = () => {
) : null;
};

export default PopularArticle;
export default PopularArticleCarousel;
10 changes: 8 additions & 2 deletions frontend/src/components/article/PopularArticleItem/PopularArticleItem.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AiOutlineEye, AiOutlineMessage, AiFillHeart } from 'react-icons/ai';
import { AiOutlineEye, AiOutlineMessage, AiFillHeart, AiOutlineHeart } from 'react-icons/ai';

import {
UserProfile,
Expand Down Expand Up @@ -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)`
liswktjs marked this conversation as resolved.
Show resolved Hide resolved
font-size: ${({ theme }) => theme.size.SIZE_016};

color: ${({ theme }) => theme.colors.RED_600};
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/article/PopularArticleItem/PopularArticleItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,11 @@ const PopularArticleItem = ({
{views.toLocaleString()}
</PopularS.IconContainer>
<PopularS.IconContainer>
<PopularS.HeartIcon aria-label="좋아요수" />
{article.isLike ? (
<PopularS.FillHeartIcon aria-label="좋아요수" />
) : (
<PopularS.EmptyHeartIcon />
liswktjs marked this conversation as resolved.
Show resolved Hide resolved
)}
{likeCount.toLocaleString()}
</PopularS.IconContainer>
</S.ArticleInfoSubBox>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/Home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));

Expand Down
6 changes: 3 additions & 3 deletions frontend/src/storybook/Article/PopularArticle.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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 = {};
Expand Down