fix : 커뮤니티 이미지 fill 속성 추가

4bujak-4bujak · May 30, 2024 · ad71a8b · ad71a8b
1 parent 4838f2a
commit ad71a8b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/components/community/shared/PostDetail.tsx b/src/components/community/shared/PostDetail.tsx
@@ -98,10 +98,12 @@ const PostDetail = ({ postData }: PostDetailType) => {
       {(postData.images?.length as number) > 0 ? (
         <div className="flex flex-col gap-2 mt-5">
           {postData.images?.map((image, i) => (
-            <div className="w-[360px] h-[280px]" key={i}>
+            <div className="w-[360px] h-[280px] relative" key={i}>
               <Image
-                width={360}
-                height={280}
+                // width={360}
+                // height={280}
+                fill
+                sizes="360px"
                 alt="image"
                 quality={75}
                 src={image}

diff --git a/src/components/community/shared/PostItemImageItem.tsx b/src/components/community/shared/PostItemImageItem.tsx
@@ -3,11 +3,14 @@ import React from 'react';
 
 const PostItemImageItem = ({ image, count }: { image: string; count: number }) => {
   return (
-    <div className={`${count > 1 ? 'w-[260px] h-[180px] ' : 'w-[360px] h-[180px] z-1'}`}>
+    <div
+      className={`${count > 1 ? 'w-[260px] h-[180px] relative' : 'w-[360px] h-[180px] z-1 relative'}`}>
       <Image
         src={image}
-        width={`${count > 1 ? 260 : 360}`}
-        height={180}
+        // width={`${count > 1 ? 260 : 360}`}
+        // height={180}
+        sizes="(max-width: 640px) 100vw, (max-width: 768px) 80vw, 360px"
+        fill
         className="rounded-sm object-cover w-full h-full"
         alt="image"
         priority