diff --git a/client/src/hooks/useAddImagesPage.ts b/client/src/hooks/useAddImagesPage.ts index 917a109a3..4bc3f62de 100644 --- a/client/src/hooks/useAddImagesPage.ts +++ b/client/src/hooks/useAddImagesPage.ts @@ -34,30 +34,12 @@ const useAddImagesPage = () => { useEffect(() => { if (!isSuccess) return; - setImages([...prevImages]); - }, [prevImages, isSuccess]); - - useEffect(() => { - console.log(images); - }, [images]); + setImages([...prevImages, ...addedImages]); + }, [isSuccess, prevImages]); const handleChangeImages = (event: React.ChangeEvent) => { - //TODO: (@Todari): 현재 A 이미지 추가 -> A 이미지 x 버튼 눌러 취소 -> 다시 A 이미지 추가 시 업로드 되지 않음 - // event.target.files가 변경되지 않기 때문에 onChange에 넣은 - // handleChangeImages가 실행되지 않아 일어나는 문제로 추정 - if (event.target.files) { - const dataTransfer = new DataTransfer(); - - if (addedImages) { - Array.from(addedImages).forEach(image => dataTransfer.items.add(image)); - } - - Array.from(event.target.files).forEach(image => dataTransfer.items.add(image)); - - setImages([...prevImages, ...dataTransfer.files]); - } + setImages(prev => [...prev, ...(event.target.files ? Array.from(event.target.files) : [])]); }; - const handleDeleteImage = (index: number) => { if ('url' in images[index]) { //TODO: (@Todari): 추후 낙관적 업데이트 적용 @@ -67,6 +49,9 @@ const useAddImagesPage = () => { setIsPrevImageDeleted(true); } else { setImages(prev => prev.filter((_, idx) => idx !== index)); + if (fileInputRef.current) { + fileInputRef.current.value = ''; + } } }; diff --git a/client/src/pages/AddImagesPage/AddImagesPage.tsx b/client/src/pages/AddImagesPage/AddImagesPage.tsx index 60c87a4d9..e467437d3 100644 --- a/client/src/pages/AddImagesPage/AddImagesPage.tsx +++ b/client/src/pages/AddImagesPage/AddImagesPage.tsx @@ -35,7 +35,7 @@ const AddImagesPage = () => { onChange={handleChangeImages} style={{display: 'none'}} /> - diff --git a/client/src/pages/EventPage/HomePage/HomePage.tsx b/client/src/pages/EventPage/HomePage/HomePage.tsx index 8cf15bc39..4314d9592 100644 --- a/client/src/pages/EventPage/HomePage/HomePage.tsx +++ b/client/src/pages/EventPage/HomePage/HomePage.tsx @@ -29,9 +29,11 @@ const HomePage = () => { title={eventName} amount={totalExpenseAmount} icon={ - + images.length !== 0 && ( + + ) } />