From dc1abe83faa7e70f792a4dd9c6a7bd5b92a7e09f Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 9 Apr 2025 09:31:12 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20next=20image=20'objectFit'=20?=
 =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/banner/model/banner-table-columns.tsx |  2 +-
 apps/cs/src/pages/banner/ui/banner-form.tsx         |  4 ++--
 .../src/pages/banner/ui/preview-banner-dialog.tsx   | 13 ++++++++-----
 apps/cs/src/pages/image/ui/image-form.tsx           |  4 ++--
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/cs/src/pages/banner/model/banner-table-columns.tsx b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
index 65c8c6e87..9b36a54fc 100644
--- a/apps/cs/src/pages/banner/model/banner-table-columns.tsx
+++ b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
@@ -94,7 +94,7 @@ const BannerImage = ({ atflCd, bnrSn, imageRefs }: BannerImageProps) => {
 
   return (
     <div className="relative flex h-[4rem] w-[16rem] items-center justify-center">
-      <Image src={imageUrl} alt="배너 이미지" fill objectFit="contain" />
+      <Image src={imageUrl} className="object-contain" fill alt="배너 이미지" />
     </div>
   );
 };
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
index 3b439653c..49c9cc6a1 100644
--- a/apps/cs/src/pages/banner/ui/banner-form.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-form.tsx
@@ -155,9 +155,9 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
                                     {imageUrl && (
                                       <Image
                                         src={imageUrl}
-                                        alt="업로드된 이미지"
+                                        className="object-contain"
                                         fill
-                                        objectFit="contain"
+                                        alt="업로드된 이미지"
                                       />
                                     )}
                                   </div>
diff --git a/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx b/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx
index bdd9e3237..74be653dd 100644
--- a/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx
+++ b/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx
@@ -23,7 +23,10 @@ function PreviewBannerDialog({ images }: PreviewBannerDialogProps) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button disabled={!images.length}>미리보기</Button>
+        <Button color="white" disabled={!images.length}>
+          <i className="diveicon di-display" />
+          미리보기
+        </Button>
       </DialogTrigger>
       <DialogContent className="max-w-[80rem]" aria-describedby={undefined}>
         <DialogHeader>
@@ -32,14 +35,14 @@ function PreviewBannerDialog({ images }: PreviewBannerDialogProps) {
         <div className="mt-4 px-12">
           <Carousel>
             <CarouselContent>
-              {images.map((image, index) => (
-                <CarouselItem key={index} className="basis-1/3">
+              {images.map((image, i) => (
+                <CarouselItem key={`banner-${i}`} className="basis-1/3">
                   <div className="relative flex aspect-video items-center justify-center">
                     <Image
                       src={image}
-                      alt={`배너 이미지 ${index + 1}`}
+                      className="object-contain"
                       fill
-                      objectFit="contain"
+                      alt={`배너 이미지 ${i + 1}`}
                     />
                   </div>
                 </CarouselItem>
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index c3a8cca7a..10c6fee6b 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -213,9 +213,9 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                                       {imageUrl && (
                                         <Image
                                           src={imageUrl}
-                                          alt="업로드된 이미지"
+                                          className="object-contain"
                                           fill
-                                          objectFit="contain"
+                                          alt="업로드된 이미지"
                                         />
                                       )}
                                     </div>