[FE] 이미지 추가 및 조회 기능에서 발생하는 버그

[Todari]

issue

• close [FE] 이미지 추가 및 조회 기능에서 발생하는 버그 #736

구현 목적

• 이미지 추가 페이지에서 A사진 등록 -> A 사진 등록 해제 -> 다시 A 사진 등록 과정이 안되는 문제가 있습니다.

2024-10-10.7.52.43.mov

• 이미 추가했던 사진이 있고, 이후에 사진들을 등록한 뒤 이미 추가한 사진을 삭제할 때, 등록한 이미지들이 사라지는 문제가 있습니다.

2024-10-10.7.53.23.mov

• 등록된 사진이 없을 때, 홈에서 사진 조회 페이지에 들어갈 수 있는 문제가 있습니다.

2024-10-10.7.53.57.mov

구현 사항

1. 이미지 추가 페이지에서 A사진 등록 -> A 사진 등록 해제 -> 다시 A 사진 등록 과정이 안되는 문제

두 사진이 같은 경우, file input의 onChange가 작동하지 않아서 handleChangeImage가 제대로 트리거되지 않는 문제입니다.

      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }

handleDeleteImage를 실행할 경우, inputRef의 value를 초기화 함으로써 handleChange가 항상 작동하도록 변경하였습니다.

• 이미 추가했던 사진이 있고, 이후에 사진들을 등록한 뒤 이미 추가한 사진을 삭제할 때, 등록한 이미지들이 사라지는 문제

  useEffect(() => {
    if (!isSuccess) return;
    setImages([...prevImages]);
  }, [prevImages, isSuccess]);

기존 코드에서, deleteImage API가 실행되어 prevImages가 변경되면 image를 prevImages로만 덮어씌워져 addedImages 가 사라지는 문제였습니다.

  useEffect(() => {
    if (!isSuccess) return;
    setImages([...prevImages, ...addedImages]);
  }, [isSuccess, prevImages]);

addImages 또한 함께 반영될 수 있도록 코드를 변경하였습니다.

• 등록된 사진이 없을 때, 홈에서 사진 조회 페이지에 들어갈 수 있는 오류

icon={
          images.length !== 0 && (
            <button>
              <Icon iconType="photoButton" onClick={() => navigate(`/event/${eventId}/images`)} />
            </button>
          )
        }

images.length가 0이 아닐때만 버튼이 보이도록 변경하였습니다.

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-iocxnffafe.chromatic.com/

[soi-ha]

👍🏻👍🏻🫧