�fix: 이미지 추가 및 조회 기능에서 발생하는 버그 (#737)

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

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

* fix: 사진이 없을 때, 홈에서 사진 조회를 할 수 없도록 변경

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 = '';
+      }
     }
   };
 

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>

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>