문제 상황

이미지 업로드 갯수를 20개로 제한하고자 함.

20개 이상 업로드시 경고창을 띄우는 예외처리 설정.

경고 창을 닫을 때 이전 페이지로 자동 이동하여 작성한 내용이 모두 사라지는 문제 발생

해결 시도

1. useNavigate의 문제로 생각하여 관련한 코드를 모두 주석처리 했으나 동일한 문제 발생
2. e.preventDefault로 기본 이벤트 전파를 차단 시도하였으나 동일 문제 발생

결과

1. Ant-Design 라이브러리를 커스텀하여 사용 중이었음
2. 상위 엘리먼트인 해당 라이브러리의 이벤트 동작 문제로 확인함.
3. e.stopPropagation() 처리하여 상위 요소로 이벤트 전파를 중단하여 해결함.

const beforeUpload = (file, fileList) => {
    const totalFiles = fileList.length + fileList.length;
    if (totalFiles > 20) {
      // 파일리스트 합이 20개를 초과하는 경우
      setShowExceedLimitModal(true); // 경고 모달 표시
      return Upload.LIST_IGNORE; // 파일 업로드 중단
    }
    return true; // 파일 추가를 계속 진행
  };

const handleExceedLimitModalOk = e => {
    setShowExceedLimitModal(false); // 경고 모달 닫기
    e.stopPropagation(); // 이벤트가 상위 엘리먼트에 전달되지 않게 막기
  };

{/* 파일 제한 초과 경고 모달 */}
  {showExceedLimitModal && (
    <ModalOneBtn
      isOpen={showExceedLimitModal}
      handleOk={handleExceedLimitModalOk}
      title="업로드 제한 초과"
      subTitle="업로드할 수 있는 파일 수는 최대 20개입니다."
    />
  )}