[FE] feat: Skeleton UI 추가

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<typeof Skeleton> = {
+  title: 'common/Skeleton',
+  component: Skeleton,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    width: 100,
+    height: 100,
+  },
+};

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 <SkeletonContainer width={width} height={height} />;
+};
+
+export default Skeleton;
+
+export const SkeletonContainer = styled.div<SkeletonProps>`
+  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%;
+    }
+  }
+`;

frontend/src/components/Common/index.ts

@@ -15,9 +15,9 @@ 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';
 export { default as CategoryItem } from './CategoryItem/CategoryItem';
 export { default as CategoryList } from './CategoryList/CategoryList';
+export { default as Skeleton } from './Skeleton/Skeleton';

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;
 `;

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 (
     <ProductItemContainer>
       {image !== null ? (
-        <ProductImage src={image} width={90} height={90} alt={`${name}사진`} />
+        <>
+          <ProductImage
+            src={image}
+            width={90}
+            height={90}
+            alt={`${name}사진`}
+            onLoad={() => setIsImageLoading(false)}
+          />
+          {isImageLoading && <Skeleton width={90} height={90} />}
+        </>
       ) : (
         <PreviewImage width={90} height={90} />
       )}

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';

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 (
     <RecipeRankingItemContainer>
@@ -26,7 +28,16 @@ const RecipeRankingItem = ({ rank, recipe }: RecipeRankingItemProps) => {
         <RankingRecipeWrapper>
           <Spacing direction="horizontal" size={12} />
           {image !== null ? (
-            <RecipeImage src={image} alt={`${rank}위 꿀조합`} width={60} height={60} />
+            <>
+              <RecipeImage
+                src={image}
+                alt={`${rank}위 꿀조합`}
+                width={60}
+                height={60}
+                onLoad={() => setIsImageLoading(false)}
+              />
+              {isImageLoading && <Skeleton width={60} height={60} />}
+            </>
           ) : (
             <RecipePreviewImage width={60} height={60} />
           )}
@@ -74,6 +85,7 @@ const RankingRecipeWrapper = styled.div`
 
 const RecipeImage = styled.img`
   border-radius: 5px;
+  object-fit: cover;
 `;
 
 const TitleFavoriteWrapper = styled.div`
@@ -100,4 +112,5 @@ const AuthorWrapper = styled.div`
 const AuthorImage = styled.img`
   border: 2px solid ${({ theme }) => theme.colors.primary};
   border-radius: 50%;
+  object-fit: cover;
 `;