fix: 스켈레톤 위치 수정 (#113)

Co-authored-by: sᴏʟʙɪ ☔️ <[email protected]>
fun-eat · Apr 23, 2024 · 6c46176 · 6c46176
1 parent 793bf95
commit 6c46176
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 15 deletions.
diff --git a/src/components/Product/ProductItem/ProductItem.tsx b/src/components/Product/ProductItem/ProductItem.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from '@fun-eat/design-system';
 import { memo, useState } from 'react';
 
-import { container, previewWrapper, productImage, summaryWrapper } from './productItem.css';
+import { container, imageWrapper, previewWrapper, productImage, summaryWrapper } from './productItem.css';
 
 import { SvgIcon, Text } from '@/components/Common';
 import { ellipsis } from '@/styles/common.css';
@@ -18,19 +18,21 @@ const ProductItem = ({ product }: ProductItemProps) => {
 
   return (
     <div className={container}>
-      <img
-        src={image}
-        className={productImage}
-        alt={`${name}사진`}
-        loading="lazy"
-        onLoad={() => setIsImageLoading(false)}
-      />
-      {/*스켈레톤 디자인시스템에서 수정*/}
-      {isImageLoading && (
-        <div style={{ position: 'absolute', top: 0, left: 0 }}>
-          <Skeleton width={163} height={163} />
-        </div>
-      )}
+      <div className={imageWrapper}>
+        <img
+          src={image}
+          className={productImage}
+          alt={`${name}사진`}
+          loading="lazy"
+          onLoad={() => setIsImageLoading(false)}
+        />
+        {/*스켈레톤 디자인시스템에서 수정*/}
+        {isImageLoading && (
+          <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
+            <Skeleton width="100%" height="100%" />
+          </div>
+        )}
+      </div>
       <div style={{ height: '8px' }} />
       <Text className={ellipsis} size="caption3" weight="semiBold" color="sub">
         {name}

diff --git a/src/components/Product/ProductItem/productItem.css.ts b/src/components/Product/ProductItem/productItem.css.ts
@@ -4,6 +4,11 @@ export const container = style({
   position: 'relative',
 });
 
+export const imageWrapper = style({
+  position: 'relative',
+  width: '100%',
+});
+
 export const productImage = style({
   width: '100%',
   height: 'auto',

diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx
@@ -74,7 +74,11 @@ const ImageAndFavoriteButton = ({ children }: PropsWithChildren) => {
         loading="lazy"
         onLoad={() => image && setIsImageLoading(false)}
       />
-      {isImageLoading && image && <Skeleton width={163} height={200} />}
+      {isImageLoading && image && (
+        <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
+          <Skeleton width="100%" height="100%" />
+        </div>
+      )}
       <div className={favoriteButtonWrapper} onClick={(e) => e.preventDefault()}>
         <RecipeFavoriteButton recipeId={id} favorite={favorite} />
       </div>

diff --git a/src/components/Recipe/RecipeItem/recipeItem.css.ts b/src/components/Recipe/RecipeItem/recipeItem.css.ts
@@ -3,6 +3,7 @@ import { style } from '@vanilla-extract/css';
 
 export const imageWrapper = style({
   position: 'relative',
+  width: '100%',
   lineHeight: 0,
 });