refactor: UseMultipleImageUpload 사진 여러번 input시 발생하는 문제 수정

woowacourse-teams · Oct 6, 2023 · 569db1b · 569db1b
1 parent 7805efe
commit 569db1b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 22 deletions.
diff --git a/frontend/src/components/trip/TripItemAddModal/ImageInput/ImageInput.tsx b/frontend/src/components/trip/TripItemAddModal/ImageInput/ImageInput.tsx
@@ -11,15 +11,10 @@ import { TRIP_ITEM_ADD_MAX_IMAGE_UPLOAD_COUNT } from '@constants/ui';
 
 interface ImageInputProps {
   initialImageUrls: string[];
-  handleInitialImage: (images: string[]) => void;
   updateInputValue: <K extends keyof TripItemFormData>(key: K, value: TripItemFormData[K]) => void;
 }
 
-const ImageInput = ({
-  initialImageUrls,
-  handleInitialImage,
-  updateInputValue,
-}: ImageInputProps) => {
+const ImageInput = ({ initialImageUrls, updateInputValue }: ImageInputProps) => {
   const { createToast } = useToast();
 
   const handleImageUrlsChange = useCallback(
@@ -35,7 +30,6 @@ const ImageInput = ({
 
   const { uploadedImageUrls, handleImageUpload, handleImageRemoval } = useMultipleImageUpload({
     initialImageUrls,
-    handleInitialImage,
     onSuccess: handleImageUrlsChange,
     onError: handleImageUploadError,
   });

diff --git a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx
@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { useRecoilValue } from 'recoil';
 
 import { Button, Flex, Modal, Theme } from 'hang-log-design-system';
@@ -56,12 +54,6 @@ const TripItemAddModal = ({
       onSuccess: onClose,
     });
 
-  const [tripImages, setTripImages] = useState(tripItemInformation.imageUrls);
-
-  const handleInitialImages = (images: string[]) => {
-    setTripImages(images);
-  };
-
   return (
     <Modal css={wrapperStyling} isOpen={isOpen} closeModal={onClose} hasCloseButton>
       <GoogleMapWrapper>
@@ -122,8 +114,7 @@ const TripItemAddModal = ({
             >
               <MemoInput value={tripItemInformation.memo} updateInputValue={updateInputValue} />
               <ImageInput
-                initialImageUrls={tripImages}
-                handleInitialImage={handleInitialImages}
+                initialImageUrls={tripItemInformation.imageUrls}
                 updateInputValue={updateInputValue}
               />
             </Flex>

diff --git a/frontend/src/hooks/common/useMultipleImageUpload.ts b/frontend/src/hooks/common/useMultipleImageUpload.ts
@@ -20,7 +20,7 @@ interface UseMultipleImageUploadParams {
 export const useMultipleImageUpload = ({
   initialImageUrls,
   maxUploadCount = TRIP_ITEM_ADD_MAX_IMAGE_UPLOAD_COUNT,
-  handleInitialImage = () => {},
+
   onSuccess,
   onError,
 }: UseMultipleImageUploadParams) => {
@@ -55,9 +55,11 @@ export const useMultipleImageUpload = ({
         await Promise.all(
           [...originalImageFiles].map(async (file) => {
             const compressedImageFile = await imageCompression(file, IMAGE_COMPRESSION_OPTIONS);
+
             const fileName = file.name;
             const fileType = compressedImageFile.type;
             const convertedFile = new File([compressedImageFile], fileName, { type: fileType });
+
             imageFiles.push(convertedFile);
           })
         );
@@ -75,8 +77,7 @@ export const useMultipleImageUpload = ({
         { images: imageUploadFormData },
         {
           onSuccess: ({ imageUrls }) => {
-            onSuccess?.([...prevImageUrls, ...imageUrls]);
-            handleInitialImage([...prevImageUrls, ...imageUrls]);
+            onSuccess?.([...initialImageUrls, ...imageUrls]);
             createToast('이미지 업로드에 성공했습니다', 'success');
           },
           onError: () => {
@@ -88,7 +89,15 @@ export const useMultipleImageUpload = ({
       // eslint-disable-next-line no-param-reassign
       event.target.value = '';
     },
-    [createToast, imageMutation, maxUploadCount, onError, onSuccess, uploadedImageUrls]
+    [
+      createToast,
+      imageMutation,
+      initialImageUrls,
+      maxUploadCount,
+      onError,
+      onSuccess,
+      uploadedImageUrls,
+    ]
   );
 
   const handleImageRemoval = useCallback(
@@ -102,6 +111,6 @@ export const useMultipleImageUpload = ({
     },
     [onSuccess]
   );
-  console.log(uploadedImageUrls);
+
   return { uploadedImageUrls, handleImageUpload, handleImageRemoval };
 };