From 24feca1d7f4d7e750fcde7f7f3f32c760ffa7720 Mon Sep 17 00:00:00 2001
From: Leejin-Yang <ejin1996@gmail.com>
Date: Mon, 22 Apr 2024 21:09:50 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Product/ProductItem/ProductItem.tsx       | 29 ++++++++++---------
 .../Product/ProductItem/productItem.css.ts    |  5 ++++
 .../Recipe/RecipeItem/RecipeItem.tsx          |  6 +++-
 .../Recipe/RecipeItem/recipeItem.css.ts       |  1 +
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/Product/ProductItem/ProductItem.tsx b/src/components/Product/ProductItem/ProductItem.tsx
index ebcec338..6e6e7def 100644
--- a/src/components/Product/ProductItem/ProductItem.tsx
+++ b/src/components/Product/ProductItem/ProductItem.tsx
@@ -3,6 +3,7 @@ import { memo, useState } from 'react';
 
 import {
   container,
+  imageWrapper,
   preview,
   previewWrapper,
   productImage,
@@ -25,19 +26,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' }} />
       <p className={productName}>{name}</p>
       <div style={{ height: '2px' }} />
diff --git a/src/components/Product/ProductItem/productItem.css.ts b/src/components/Product/ProductItem/productItem.css.ts
index 8533c335..891e86e6 100644
--- 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
index 6bbf7de6..7dce2e8d 100644
--- 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
index 75d9c8f9..14ab9768 100644
--- 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,
 });