From 68b271da6d431428ed458f808d3c5645a9f84e76 Mon Sep 17 00:00:00 2001
From: boeunLee <bounjaeun@gmail.com>
Date: Sun, 19 May 2024 18:28:35 +0900
Subject: [PATCH] =?UTF-8?q?[FIX]=20=EB=A9=94=EC=9D=B8=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20=ED=9B=84=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImageUploader.tsx | 12 ++++++++++--
 src/pages/CreateMagazine.tsx     | 11 ++++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageUploader.tsx b/src/components/ImageUploader.tsx
index f0907f6..897b289 100644
--- a/src/components/ImageUploader.tsx
+++ b/src/components/ImageUploader.tsx
@@ -9,12 +9,13 @@ interface containerSize {
   target: string;
   width: number;
   height: number;
+  onDelete?: () => void;
 }
 
 const baseURL = import.meta.env.VITE_IMAGE_URL;
 
 const ImageUploader = (props: containerSize) => {
-  const { setValue, width, height, target, watch } = props;
+  const { setValue, width, height, target, watch, onDelete } = props;
   const inputRef = useRef<HTMLInputElement | null>(null);
   const selectorRef = useRef<HTMLDivElement>(null);
 
@@ -81,7 +82,14 @@ const ImageUploader = (props: containerSize) => {
   };
 
   const handleClick = () => {
-    handleChange();
+    if (watchedValue && onDelete) {
+      const confirm = window.confirm('정말로 삭제하시겠어요?');
+      if (confirm) {
+        onDelete();
+      }
+    } else {
+      handleChange();
+    }
   };
 
   const openSelector = () => {
diff --git a/src/pages/CreateMagazine.tsx b/src/pages/CreateMagazine.tsx
index efdcbc7..4424ba9 100644
--- a/src/pages/CreateMagazine.tsx
+++ b/src/pages/CreateMagazine.tsx
@@ -214,6 +214,15 @@ const CreateMagazineDemo = () => {
     }
   };
 
+  /**
+   * 메인 이미지 삭제
+   * @param indexToRemove
+   */
+  const handleImageChange = (indexToRemove: number) => {
+    const newPhotos = watch('magazinePhotos').filter((_, index) => index !== indexToRemove);
+    setValue('magazinePhotos', newPhotos);
+  };
+
   return (
     <PageLayoutWrapper isPreviewOpen={isPreviewOpen}>
       <PageLayout>
@@ -230,7 +239,7 @@ const CreateMagazineDemo = () => {
                 <St.TitleReprase>1 : 1 비율의 이미지를 등록해주세요. 최대 4장 등록 가능합니다.</St.TitleReprase>
                 <St.ImageUploadContainer>
                   {[...Array(4)].map((item, index) => (
-                    <ImageUploader key={index} setValue={setValue} watch={watch} target={`magazinePhotos[${index}]`} width={28.2} height={28.2} />
+                    <ImageUploader key={index} onDelete={() => handleImageChange(index)} setValue={setValue} watch={watch} target={`magazinePhotos[${index}]`} width={28.2} height={28.2} />
                   ))}
                 </St.ImageUploadContainer>
                 <St.TitleHeader>서론</St.TitleHeader>