From d310fbface649fe269b0ca6eef2dd7a8bd462b85 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Wed, 20 Sep 2023 14:06:33 +0900 Subject: [PATCH 1/8] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/MoreButton/MoreButton.stories.tsx | 13 ---- .../Common/MoreButton/MoreButton.tsx | 46 ----------- frontend/src/components/Common/index.ts | 1 - .../PBProductItem/PBProductItem.stories.tsx | 18 ----- .../Product/PBProductItem/PBProductItem.tsx | 78 ------------------- .../PBProductList/PBProductList.stories.tsx | 13 ---- .../Product/PBProductList/PBProductList.tsx | 47 ----------- frontend/src/components/Product/index.ts | 1 - 8 files changed, 217 deletions(-) delete mode 100644 frontend/src/components/Common/MoreButton/MoreButton.stories.tsx delete mode 100644 frontend/src/components/Common/MoreButton/MoreButton.tsx delete mode 100644 frontend/src/components/Product/PBProductItem/PBProductItem.stories.tsx delete mode 100644 frontend/src/components/Product/PBProductItem/PBProductItem.tsx delete mode 100644 frontend/src/components/Product/PBProductList/PBProductList.stories.tsx delete mode 100644 frontend/src/components/Product/PBProductList/PBProductList.tsx diff --git a/frontend/src/components/Common/MoreButton/MoreButton.stories.tsx b/frontend/src/components/Common/MoreButton/MoreButton.stories.tsx deleted file mode 100644 index 292e12c06..000000000 --- a/frontend/src/components/Common/MoreButton/MoreButton.stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import MoreButton from './MoreButton'; - -const meta: Meta = { - title: 'common/MoreButton', - component: MoreButton, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/frontend/src/components/Common/MoreButton/MoreButton.tsx b/frontend/src/components/Common/MoreButton/MoreButton.tsx deleted file mode 100644 index 479aec96d..000000000 --- a/frontend/src/components/Common/MoreButton/MoreButton.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { Link, Text } from '@fun-eat/design-system'; -import { Link as RouterLink } from 'react-router-dom'; -import styled from 'styled-components'; - -import SvgIcon from '../Svg/SvgIcon'; - -import { PATH } from '@/constants/path'; - -const MoreButton = () => { - return ( - - - - - - - 더보기 - - - - ); -}; - -export default MoreButton; - -const MoreButtonWrapper = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 110px; - height: 110px; - border-radius: 5px; - background: ${({ theme }) => theme.colors.gray1}; -`; - -const PlusIconWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 40px; - height: 40px; - margin-bottom: 5px; - border-radius: 50%; - background: ${({ theme }) => theme.colors.white}; -`; diff --git a/frontend/src/components/Common/index.ts b/frontend/src/components/Common/index.ts index 493fe72bb..85596d7bc 100644 --- a/frontend/src/components/Common/index.ts +++ b/frontend/src/components/Common/index.ts @@ -15,7 +15,6 @@ export { default as ErrorBoundary } from './ErrorBoundary/ErrorBoundary'; export { default as ErrorComponent } from './ErrorComponent/ErrorComponent'; export { default as Loading } from './Loading/Loading'; export { default as MarkedText } from './MarkedText/MarkedText'; -export { default as MoreButton } from './MoreButton/MoreButton'; export { default as NavigableSectionTitle } from './NavigableSectionTitle/NavigableSectionTitle'; export { default as Carousel } from './Carousel/Carousel'; export { default as RegisterButton } from './RegisterButton/RegisterButton'; diff --git a/frontend/src/components/Product/PBProductItem/PBProductItem.stories.tsx b/frontend/src/components/Product/PBProductItem/PBProductItem.stories.tsx deleted file mode 100644 index 175918ec5..000000000 --- a/frontend/src/components/Product/PBProductItem/PBProductItem.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import PBProductItem from './PBProductItem'; - -import pbProducts from '@/mocks/data/pbProducts.json'; - -const meta: Meta = { - title: 'product/PBProductItem', - component: PBProductItem, - args: { - pbProduct: pbProducts.products[0], - }, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/frontend/src/components/Product/PBProductItem/PBProductItem.tsx b/frontend/src/components/Product/PBProductItem/PBProductItem.tsx deleted file mode 100644 index 63cf774ef..000000000 --- a/frontend/src/components/Product/PBProductItem/PBProductItem.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { Text, theme } from '@fun-eat/design-system'; -import styled from 'styled-components'; - -import PBPreviewImage from '@/assets/samgakgimbab.svg'; -import { SvgIcon } from '@/components/Common'; -import type { PBProduct } from '@/types/product'; - -interface PBProductItemProps { - pbProduct: PBProduct; -} - -const PBProductItem = ({ pbProduct }: PBProductItemProps) => { - const { name, price, image, averageRating } = pbProduct; - - return ( - - {image !== null ? ( - - ) : ( - - )} - - {name} - - - - - {averageRating} - - - - {price.toLocaleString('ko-KR')}원 - - - - - ); -}; - -export default PBProductItem; - -const PBProductItemContainer = styled.div` - width: 110px; -`; - -const PBProductImage = styled.img` - object-fit: cover; -`; - -const PBProductInfoWrapper = styled.div` - height: 50%; - margin-top: 10px; -`; - -const PBProductName = styled(Text)` - display: inline-block; - width: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -`; - -const PBProductReviewWrapper = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - margin: 5px 0; -`; - -const RatingWrapper = styled.div` - display: flex; - align-items: center; - column-gap: 4px; - - & > svg { - padding-bottom: 2px; - } -`; diff --git a/frontend/src/components/Product/PBProductList/PBProductList.stories.tsx b/frontend/src/components/Product/PBProductList/PBProductList.stories.tsx deleted file mode 100644 index dc1804f08..000000000 --- a/frontend/src/components/Product/PBProductList/PBProductList.stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import PBProductList from './PBProductList'; - -const meta: Meta = { - title: 'product/PBProductList', - component: PBProductList, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/frontend/src/components/Product/PBProductList/PBProductList.tsx b/frontend/src/components/Product/PBProductList/PBProductList.tsx deleted file mode 100644 index 576ea05a4..000000000 --- a/frontend/src/components/Product/PBProductList/PBProductList.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { Link } from '@fun-eat/design-system'; -import { Link as RouterLink } from 'react-router-dom'; -import styled from 'styled-components'; - -import PBProductItem from '../PBProductItem/PBProductItem'; - -import { MoreButton } from '@/components/Common'; -import { PATH } from '@/constants/path'; -import { useCategoryValueContext } from '@/hooks/context'; -import { useInfiniteProductsQuery } from '@/hooks/queries/product'; - -const PBProductList = () => { - const { categoryIds } = useCategoryValueContext(); - - const { data: pbProductListResponse } = useInfiniteProductsQuery(categoryIds.store); - const pbProducts = pbProductListResponse.pages.flatMap((page) => page.products); - - return ( - <> - - {pbProducts.map((pbProduct) => ( -
  • - - - -
    • - ))} -
  • - -
    • -     - - ); -}; - -export default PBProductList; - -const PBProductListContainer = styled.ul` - display: flex; - gap: 40px; - overflow-x: auto; - overflow-y: hidden; - - &::-webkit-scrollbar { - display: none; - } -`; diff --git a/frontend/src/components/Product/index.ts b/frontend/src/components/Product/index.ts index 47ce2703d..25a06f28f 100644 --- a/frontend/src/components/Product/index.ts +++ b/frontend/src/components/Product/index.ts @@ -2,6 +2,5 @@ export { default as ProductDetailItem } from './ProductDetailItem/ProductDetailI export { default as ProductItem } from './ProductItem/ProductItem'; export { default as ProductList } from './ProductList/ProductList'; export { default as ProductOverviewItem } from './ProductOverviewItem/ProductOverviewItem'; -export { default as PBProductList } from './PBProductList/PBProductList'; export { default as ProductRecipeList } from './ProductRecipeList/ProductRecipeList'; export { default as ProductTitle } from './ProductTitle/ProductTitle'; From e22187bc4fffea2149941629a042f9fcc00c7f1a Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Wed, 20 Sep 2023 15:46:52 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EC=8A=A4=EC=BC=88=EB=A0=88?= =?UTF-8?q?=ED=86=A4=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/Skeleton/Skeleton.stories.tsx | 18 ++++++++++ .../components/Common/Skeleton/Skeleton.tsx | 36 +++++++++++++++++++ frontend/src/components/Common/index.ts | 1 + 3 files changed, 55 insertions(+) create mode 100644 frontend/src/components/Common/Skeleton/Skeleton.stories.tsx create mode 100644 frontend/src/components/Common/Skeleton/Skeleton.tsx diff --git a/frontend/src/components/Common/Skeleton/Skeleton.stories.tsx b/frontend/src/components/Common/Skeleton/Skeleton.stories.tsx new file mode 100644 index 000000000..e8952c316 --- /dev/null +++ b/frontend/src/components/Common/Skeleton/Skeleton.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import Skeleton from './Skeleton'; + +const meta: Meta = { + title: 'common/Skeleton', + component: Skeleton, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + width: 100, + height: 100, + }, +}; diff --git a/frontend/src/components/Common/Skeleton/Skeleton.tsx b/frontend/src/components/Common/Skeleton/Skeleton.tsx new file mode 100644 index 000000000..857d03079 --- /dev/null +++ b/frontend/src/components/Common/Skeleton/Skeleton.tsx @@ -0,0 +1,36 @@ +import type { ComponentPropsWithoutRef } from 'react'; +import styled from 'styled-components'; + +interface SkeletonProps extends ComponentPropsWithoutRef<'div'> { + width?: string | number; + height?: string | number; +} + +const Skeleton = ({ width, height }: SkeletonProps) => { + return ; +}; + +export default Skeleton; + +export const SkeletonContainer = styled.div` + position: absolute; + width: ${({ width }) => (typeof width === 'number' ? width + 'px' : width)}; + height: ${({ height }) => (typeof height === 'number' ? height + 'px' : height)}; + border-radius: 8px; + background: linear-gradient(-90deg, #dddddd, #f7f7f7, #dddddd, #f7f7f7); + background-size: 400%; + overflow: hidden; + animation: skeleton-gradient 5s infinite ease-out; + + @keyframes skeleton-gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } + } +`; diff --git a/frontend/src/components/Common/index.ts b/frontend/src/components/Common/index.ts index 85596d7bc..7144a82ba 100644 --- a/frontend/src/components/Common/index.ts +++ b/frontend/src/components/Common/index.ts @@ -20,3 +20,4 @@ export { default as Carousel } from './Carousel/Carousel'; export { default as RegisterButton } from './RegisterButton/RegisterButton'; export { default as CategoryItem } from './CategoryItem/CategoryItem'; export { default as CategoryList } from './CategoryList/CategoryList'; +export { default as Skeleton } from './Skeleton/Skeleton'; From 584750942cdcd69c6cb9ecd446da87799892573c Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Wed, 20 Sep 2023 15:47:14 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=EC=97=90=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20ui=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Product/ProductItem/ProductItem.tsx | 15 +++++++++++++-- .../Rank/RecipeRankingItem/RecipeRankingItem.tsx | 15 +++++++++++++-- .../components/Recipe/RecipeItem/RecipeItem.tsx | 10 +++++++--- 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Product/ProductItem/ProductItem.tsx b/frontend/src/components/Product/ProductItem/ProductItem.tsx index 6fb9ce673..c7e9ba92a 100644 --- a/frontend/src/components/Product/ProductItem/ProductItem.tsx +++ b/frontend/src/components/Product/ProductItem/ProductItem.tsx @@ -1,8 +1,9 @@ import { Text, useTheme } from '@fun-eat/design-system'; +import { useState } from 'react'; import styled from 'styled-components'; import PreviewImage from '@/assets/characters.svg'; -import { SvgIcon } from '@/components/Common'; +import { Skeleton, SvgIcon } from '@/components/Common'; import type { Product } from '@/types/product'; interface ProductItemProps { @@ -12,11 +13,21 @@ interface ProductItemProps { const ProductItem = ({ product }: ProductItemProps) => { const theme = useTheme(); const { name, price, image, averageRating, reviewCount } = product; + const [isImageLoading, setIsImageLoading] = useState(true); return ( {image !== null ? ( - + <> + setIsImageLoading(false)} + /> + {isImageLoading && } + ) : ( )} diff --git a/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx b/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx index b9ac0cab6..92d9caf6a 100644 --- a/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx +++ b/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx @@ -1,8 +1,9 @@ import { Spacing, Text, useTheme } from '@fun-eat/design-system'; +import { useState } from 'react'; import styled from 'styled-components'; import RecipePreviewImage from '@/assets/plate.svg'; -import { SvgIcon } from '@/components/Common'; +import { Skeleton, SvgIcon } from '@/components/Common'; import type { RecipeRanking } from '@/types/ranking'; interface RecipeRankingItemProps { @@ -18,6 +19,7 @@ const RecipeRankingItem = ({ rank, recipe }: RecipeRankingItemProps) => { author: { nickname, profileImage }, favoriteCount, } = recipe; + const [isImageLoading, setIsImageLoading] = useState(true); return ( @@ -26,7 +28,16 @@ const RecipeRankingItem = ({ rank, recipe }: RecipeRankingItemProps) => { {image !== null ? ( - + <> + setIsImageLoading(false)} + /> + {isImageLoading && } + ) : ( )} diff --git a/frontend/src/components/Recipe/RecipeItem/RecipeItem.tsx b/frontend/src/components/Recipe/RecipeItem/RecipeItem.tsx index 2ad70c90a..d656e6e30 100644 --- a/frontend/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/frontend/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -1,9 +1,9 @@ import { Heading, Text, useTheme } from '@fun-eat/design-system'; -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import styled from 'styled-components'; import PreviewImage from '@/assets/plate.svg'; -import { SvgIcon } from '@/components/Common'; +import { Skeleton, SvgIcon } from '@/components/Common'; import type { MemberRecipe, Recipe } from '@/types/recipe'; import { getFormattedDate } from '@/utils/date'; @@ -15,6 +15,7 @@ interface RecipeItemProps { const RecipeItem = ({ recipe, isMemberPage = false }: RecipeItemProps) => { const { image, title, createdAt, favoriteCount, products } = recipe; const author = 'author' in recipe ? recipe.author : null; + const [isImageLoading, setIsImageLoading] = useState(true); const theme = useTheme(); return ( @@ -22,7 +23,10 @@ const RecipeItem = ({ recipe, isMemberPage = false }: RecipeItemProps) => { {!isMemberPage && ( {image !== null ? ( - + <> + setIsImageLoading(false)} /> + {isImageLoading && } + ) : ( )} From 533c51daee0bc0220c9e1b2bbd1223466188f653 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Wed, 20 Sep 2023 15:55:52 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=EC=97=90=20object-fit:cover=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Members/MembersInfo/MembersInfo.tsx | 1 + .../src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx | 2 ++ frontend/src/components/Review/ReviewItem/ReviewItem.tsx | 1 + 3 files changed, 4 insertions(+) diff --git a/frontend/src/components/Members/MembersInfo/MembersInfo.tsx b/frontend/src/components/Members/MembersInfo/MembersInfo.tsx index 5ed9e89e3..1b2e94839 100644 --- a/frontend/src/components/Members/MembersInfo/MembersInfo.tsx +++ b/frontend/src/components/Members/MembersInfo/MembersInfo.tsx @@ -60,4 +60,5 @@ const MembersImage = styled.img` margin-right: 16px; border: 2px solid ${({ theme }) => theme.colors.primary}; border-radius: 50%; + object-fit: cover; `; diff --git a/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx b/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx index 92d9caf6a..81086851d 100644 --- a/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx +++ b/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx @@ -85,6 +85,7 @@ const RankingRecipeWrapper = styled.div` const RecipeImage = styled.img` border-radius: 5px; + object-fit: cover; `; const TitleFavoriteWrapper = styled.div` @@ -111,4 +112,5 @@ const AuthorWrapper = styled.div` const AuthorImage = styled.img` border: 2px solid ${({ theme }) => theme.colors.primary}; border-radius: 50%; + object-fit: cover; `; diff --git a/frontend/src/components/Review/ReviewItem/ReviewItem.tsx b/frontend/src/components/Review/ReviewItem/ReviewItem.tsx index 782bdd928..1ec031690 100644 --- a/frontend/src/components/Review/ReviewItem/ReviewItem.tsx +++ b/frontend/src/components/Review/ReviewItem/ReviewItem.tsx @@ -118,6 +118,7 @@ const RebuyBadge = styled(Badge)` const ReviewerImage = styled.img` border: 2px solid ${({ theme }) => theme.colors.primary}; border-radius: 50%; + object-fit: cover; `; const RatingIconWrapper = styled.div` From db7e9d6defd61ca07e6cbc2593bb7227f3e322a6 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Wed, 20 Sep 2023 16:01:46 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EB=B0=B0=EB=84=88=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=86=92=EC=9D=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/HomePage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index e6e701b07..ca7b4e19e 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -81,6 +81,7 @@ export default HomePage; const Banner = styled.img` width: 100%; + height: auto; `; const SectionWrapper = styled.section` From 266c0da48a85ccfce011a13f741c2237f9c83d02 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Thu, 21 Sep 2023 11:48:38 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EB=B0=B0=EB=84=88=EC=97=90=20?= =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/HomePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index ca7b4e19e..a9899cb3b 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -21,7 +21,7 @@ const HomePage = () => { <>
    - +
    From 74feca1c4f34fc6576b51c867421da7a88cc0db9 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Thu, 21 Sep 2023 19:24:03 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=EC=97=90=20lazy=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Product/ProductItem/ProductItem.tsx | 1 + frontend/src/pages/HomePage.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Product/ProductItem/ProductItem.tsx b/frontend/src/components/Product/ProductItem/ProductItem.tsx index c7e9ba92a..ecdf8b030 100644 --- a/frontend/src/components/Product/ProductItem/ProductItem.tsx +++ b/frontend/src/components/Product/ProductItem/ProductItem.tsx @@ -24,6 +24,7 @@ const ProductItem = ({ product }: ProductItemProps) => { width={90} height={90} alt={`${name}사진`} + loading="lazy" onLoad={() => setIsImageLoading(false)} /> {isImageLoading && } diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index a9899cb3b..4b236673e 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -21,7 +21,7 @@ const HomePage = () => { <>
    - +
    From 930c43e152b8c6c613fcdf7bb8b8d9af585193a3 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Thu, 21 Sep 2023 19:30:53 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=EA=BF=80=EC=A1=B0=ED=95=A9=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=EC=97=90=20loading=20lazy=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Recipe/RecipeItem/RecipeItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Recipe/RecipeItem/RecipeItem.tsx b/frontend/src/components/Recipe/RecipeItem/RecipeItem.tsx index d656e6e30..da7c51781 100644 --- a/frontend/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/frontend/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -24,7 +24,7 @@ const RecipeItem = ({ recipe, isMemberPage = false }: RecipeItemProps) => { {image !== null ? ( <> - setIsImageLoading(false)} /> + setIsImageLoading(false)} /> {isImageLoading && } ) : (