From 43e00a20fde3f8330c158fd0bf1b09e47f02d5ea Mon Sep 17 00:00:00 2001
From: TaehunLee <85233397+Todari@users.noreply.github.com>
Date: Thu, 10 Oct 2024 20:43:35 +0900
Subject: [PATCH] =?UTF-8?q?=08fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=A1=B0=ED=9A=8C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=EC=97=90=EC=84=9C=20=EB=B0=9C=EC=83=9D=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20(#737)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 이미지 추가 페이지에서 발생하던 오류 수정

* design: 사진 추가하기 버튼 색상 변경

* fix: 사진이 없을 때, 홈에서 사진 조회를 할 수 없도록 변경
---
 client/src/hooks/useAddImagesPage.ts          | 27 +++++--------------
 .../src/pages/AddImagesPage/AddImagesPage.tsx |  2 +-
 .../src/pages/EventPage/HomePage/HomePage.tsx |  8 +++---
 3 files changed, 12 insertions(+), 25 deletions(-)

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<HTMLInputElement>) => {
-    //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'}}
         />
-        <Button variants="primary" onClick={() => fileInputRef.current?.click()}>
+        <Button variants="tertiary" onClick={() => fileInputRef.current?.click()}>
           사진 추가하기
         </Button>
       </div>
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={
-          <button>
-            <Icon iconType="photoButton" onClick={() => navigate(`/event/${eventId}/images`)} />
-          </button>
+          images.length !== 0 && (
+            <button>
+              <Icon iconType="photoButton" onClick={() => navigate(`/event/${eventId}/images`)} />
+            </button>
+          )
         }
       />
       <Tabs>