From ad71a8b0ed7c5302bfc736a57c720248fbd57a18 Mon Sep 17 00:00:00 2001
From: hojin <devbang5674@gmail.com>
Date: Thu, 30 May 2024 18:40:19 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20fill=20=EC=86=8D=EC=84=B1=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/community/shared/PostDetail.tsx        | 8 +++++---
 src/components/community/shared/PostItemImageItem.tsx | 9 ++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/community/shared/PostDetail.tsx b/src/components/community/shared/PostDetail.tsx
index db9d5eb..a4df89d 100644
--- 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
index c0eca14..e946747 100644
--- 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