구현 상황

앨범에서 자신이 업로드 사진을 눌렀을 때 모달창에 사진이 확대되어 띄워지면서 삭제버튼이 보이도록 구현했다. 삭제 버튼을 누르면 그 사진 하나에 대한 firestore database의 사진 id를 삭제하도록 코드를 구성했다.

오류 발생

선택한 사진 하나만 삭제를 하고 싶었는데 album에 있는 모든 사진의 id를 가져와 삭제하겠냐는 모달창에 계속 뜬다. 결국 다 확인을 누르면 앨범 속 모든 사진이 삭제되는 문제가 발생했다.

// 현재 사용자의 이메일을 가져오기
  const userEmail = localStorage.getItem("email");

  $(document).on('click', '.card', function(e) {
    console.log(e.currentTarget.children[1].children[0].children[2].textContent);
    let albumEmail = e.currentTarget.children[1].children[0].children[2].textContent;
    console.log(e.target);
    console.log("카드바디");
    const imageUrl = $(e.target).attr('src');
    const imageId = $(e.target).attr('id');
    console.log(imageUrl);
    console.log(imageId);
    $('#modalImage').attr('src', imageUrl);

    //앨범사진 업로드 이메일과 현재 로그인한 이메일이 같아야 삭제 버튼이 보임
    if (albumEmail === userEmail) {
    $("#btn-group").show();
    } else {
    $("#btn-group").hide(); // 다른 이메일로 올린 사진인 경우 삭제 버튼 숨김
    }   
    //사진 삭제
    $("#btn-delete").on('click', async function(){ 
    console.log("삭제");
    if(confirm( imageId +"번 사진 삭제하시겠습니까?")){
      await deleteDoc(doc(collection(db, `club-category-${category}`, clubId, 'album'), imageId));
      //삭제 후 목록페이지로 돌아감
      location.href = "/clubMain/<%=id%>/<%=id2%>/album";
    }
  })
  });
}

문제해결

문제는 "btn-delete" 클릭 이벤트가 여러 번 등록되어서 발생한 것이다. 각각의 사진을 클릭할 때마다 삭제 버튼 클릭 이벤트가 계속해서 바인딩되어 모달이 여러 번 열리고, 마지막 사진 삭제 확인 모달에서 모든 사진을 삭제하도록 실행된 것이다.

문제를 해결하려면 이벤트 바인딩을 한 번만 하고, 해당 모달에서만 삭제 기능이 실행되도록 코드를 수정해야 한다.

//앨범사진 업로드 이메일과 현재 로그인한 이메일이 같아야 삭제 버튼이 보임
    if (albumEmail === userEmail) {
      $("#btn-group").show();
      // 사진 삭제 버튼 클릭 시
      $("#btn-delete").off('click').on('click', async function() { 
        console.log("삭제");
        if(confirm( imageId +"번 사진 삭제하시겠습니까?")){
          await deleteDoc(doc(collection(db, `club-category-${category}`, clubId, 'album'), imageId));
          //삭제 후 목록페이지로 돌아감
          location.href = "/clubMain/<%=id%>/<%=id2%>/album";
        }
      })
    } else {
    $("#btn-group").hide(); // 다른 이메일로 올린 사진인 경우 삭제 버튼 숨김
    // 사진 삭제 버튼 클릭 시 이벤트 제거
    $("#btn-delete").off('click');
    }   
  });

기존에는 삭제버튼이 보여지고 숨겨지는 코드와 삭제버튼을 눌렀을 때 사진을 삭제시키는 기능을 따로 분리하여 작성했다. 이 둘을 합쳐 삭제버튼이 보이는 상태에서 삭제 버튼을 눌렀을 때 삭제되는 기능을 구현하도록 했다.

이렇게 둘을 합치면 수정 전 코드처럼 삭제버튼을 눌렀다는 것에 모든 사진의 삭제버튼이 반응하여 모든 사진이 앨범에서 없어지는 일을 방지할 수 있다.

off와 on의 기능

$("#btn-delete").off('click').on('click', async function()

$("#btn-delete").off('click').on('click', async function() { / ... / }); 코드 라인은 jQuery를 사용하여 HTML 요소에 대한 클릭 이벤트를 설정하고 있습니다. 여기서 off()와 on() 함수는 다음과 같은 역할을 합니다:

off('click'):

off() 함수는 선택한 요소에서 이전에 연결된 이벤트 핸들러를 제거합니다.
'click'은 제거할 이벤트 유형을 나타내며, 여기서는 'click' 이벤트가 제거됩니다.
on('click', async function() { / ... / }):

on() 함수는 선택한 요소에 새로운 이벤트 핸들러를 추가합니다.
'click'은 새로운 이벤트 유형을 지정하며, 여기서는 'click' 이벤트에 대한 새 핸들러가 추가됩니다.
async function() { / ... / }은 'click' 이벤트가 발생했을 때 실행될 새로운 함수를 정의합니다. 이 경우, 클릭이벤트가 발생하면 내부의 비동기 작업이 실행됩니다.
따라서 위 코드는 #btn-delete 요소에 대한 클릭 이벤트를 설정하기 전에 이전에 할당된 클릭 이벤트를 제거합니다. 그 후에 새로운 클릭 이벤트 핸들러를 추가하여 클릭이 발생하면 내부의 비동기 함수가 실행되도록 합니다.