Skip to content

Commit

Permalink
fix: 스켈레톤 위치 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
Leejin-Yang committed Apr 22, 2024
1 parent 525adb7 commit 24feca1
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 14 deletions.
29 changes: 16 additions & 13 deletions src/components/Product/ProductItem/ProductItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { memo, useState } from 'react';

import {
container,
imageWrapper,
preview,
previewWrapper,
productImage,
Expand All @@ -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' }} />
Expand Down
5 changes: 5 additions & 0 deletions src/components/Product/ProductItem/productItem.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 5 additions & 1 deletion src/components/Recipe/RecipeItem/RecipeItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/components/Recipe/RecipeItem/recipeItem.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { style } from '@vanilla-extract/css';

export const imageWrapper = style({
position: 'relative',
width: '100%',
lineHeight: 0,
});

Expand Down

0 comments on commit 24feca1

Please sign in to comment.