[FIX] 메인 이미지 업로드 후 삭제 기능 추가

Gam-develop · May 19, 2024 · 68b271d · 68b271d
1 parent 4fb591d
commit 68b271d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git 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
@@ -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>