feat: ImageFrame 컴포넌트 Image를 div로 wrapping

Nexters · Jul 23, 2023 · 97872c4 · 97872c4
1 parent bdf3d4a
commit 97872c4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/components/shared/Card/Card.tsx b/src/components/shared/Card/Card.tsx
@@ -10,9 +10,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 export function Card({ thumbnail, title, description, ...restProps }: Props) {
   return (
     <div className='flex w-full flex-col' {...restProps}>
-      <div className='relative aspect-[3/4] overflow-hidden'>
-        <ImageFrame src={thumbnail} alt={title} sizes='200px' priority />
-      </div>
+      <ImageFrame src={thumbnail} alt={title} sizes='200px' priority />
       <div className='gap flex flex-col px-5 py-[6px]'>
         <h2 className='text-sub-headline overflow-hidden text-ellipsis whitespace-nowrap'>{title}</h2>
         <p className='text-body2 overflow-hidden text-ellipsis whitespace-nowrap'>{description}</p>

diff --git a/src/components/shared/ImageFrame/ImageFrame.tsx b/src/components/shared/ImageFrame/ImageFrame.tsx
@@ -13,13 +13,15 @@ export function ImageFrame({
   ...restProps
 }: Props) {
   return (
-    <Image
-      alt={alt}
-      fill={fill}
-      sizes={sizes}
-      placeholder={placeholder}
-      className={cn('h-auto w-full object-cover object-center', className)}
-      {...restProps}
-    />
+    <div className='relative aspect-[3/4] overflow-hidden'>
+      <Image
+        alt={alt}
+        fill={fill}
+        sizes={sizes}
+        placeholder={placeholder}
+        className={cn('h-auto w-full object-cover object-center', className)}
+        {...restProps}
+      />
+    </div>
   );
 }