style: 이미지 비율 깨짐 없이 그대로 보여지도록 수정

team-acode · Feb 1, 2024 · eae357d · eae357d
1 parent 7558cf3
commit eae357d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
diff --git a/components/mypage/WishPreviewItem.tsx b/components/mypage/WishPreviewItem.tsx
@@ -15,17 +15,13 @@ interface WishPreviewItemProps {
 const WishPreviewItem = ({ perfume }: WishPreviewItemProps) => {
   const { isWishOn, handleClickWish } = useWish(perfume.fragranceId, true);
   return (
-    <li className="relative h-[158px] w-[138px] shrink-0">
-      <Link
-        href={`/perfumes/${perfume.fragranceId}`}
-        className="h-full w-full border-[1.5px] border-acodegray-50 rounded-[4px] overflow-clip flex items-center justify-center"
-      >
+    <li className="relative h-[158px] w-[138px] border-[1.5px] border-acodegray-50 shrink-0 flex items-center justify-center rounded overflow-hidden">
+      <Link href={`/perfumes/${perfume.fragranceId}`} className="">
         <Image
           src={perfume.thumbnail}
-          className="w-[158px] h-[158px]"
+          className="object-cover"
+          fill
           alt="perfume"
-          width={158}
-          height={158}
         />
         <button
           type="button"

diff --git a/components/reviews/InputPhoto.tsx b/components/reviews/InputPhoto.tsx
@@ -53,13 +53,16 @@ const InputPhoto = ({ onChange }: { onChange: (photos: File[]) => void }) => {
       {isSpread ? (
         <div className="flex flex-row items-center space-x-2">
           {photos.map((photo, index) => (
-            <div key={photo.name} className="relative">
+            <div
+              key={photo.name}
+              className="relative w-24 h-24 overflow-hidden rounded"
+            >
               <Image
                 src={URL.createObjectURL(photo)}
                 alt={`Preview ${index + 1}`}
                 width={96}
                 height={96}
-                className="w-24 h-24 rounded"
+                className="w-24 object-cover"
               />
               <button
                 type="button"

diff --git a/components/reviews/MoreReview.tsx b/components/reviews/MoreReview.tsx
@@ -83,11 +83,11 @@ const MoreReview = ({ id, initialReviewData }: PerfumeReviewProps) => {
               .filter((photo) => photo)
               .map((photo, photoIndex) => (
                 <div key={photo} className="item-center mb-5">
-                  <div className="relative w-[115px] h-[115px] overflow-hidden rounded-[4px]">
+                  <div className="relative w-[115px] h-[115px]  overflow-hidden rounded-[4px]">
                     <Image
                       src={photo}
                       alt={`Review Image ${photoIndex}`}
-                      className="rounded-md"
+                      className="rounded-md object-cover"
                       fill
                     />
                   </div>