구현 계획

album에 있는 사진을 눌렀을 때 모달창이 띄워지며 사진이 확대되어 볼 수 있도록 구현했다. 이후 모달창에서 사진을 업로드한 작성자 이메일과 현재 로그인한 user 이메일이 같은 경우에만 삭제 버튼이 보여서 삭제 가능하도록 구현하고자 하였다.

오류

아래 코드처럼 구현했는데
1. 이메일이 같지 않은 사진 먼저 눌렀을 때 : 삭제 버튼 안 보임
2. 이메일 같은 사진 눌렀을 때 : 삭제 버튼 보임
3. 다시 이메일이 같지 않은 사진 눌렀을 때 : 삭제 버튼 보임

2번에서 삭제 버튼이 show() 되고 나면 이후 계속 show() 상태가 되어 이메일이 같지 않은 사진의 모달창에서도 삭제 버튼이 보이는 에러가 발생했다.

// 현재 사용자의 이메일을 가져오기
  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();
    }

문제 해결

문제를 해결하는 방법은 생각보다 간단했다. 어떻게 생각해보면 당연한 것이었다. 마지막 코드에서 if에 show()인 것으로만 끝나서는 안 되는 것이었다. else 조건을 추가해서 show() 인 경우와 이메일이 같지 않으면 hide()가 되도록 추가적인 코드가 필요했다.

//앨범사진 업로드 이메일과 현재 로그인한 이메일이 같아야 삭제 버튼이 보임
if (albumEmail === userEmail) {
   $("#btn-group").show();
 } else {
    $("#btn-group").hide(); // 다른 이메일로 올린 사진인 경우 삭제 버튼 숨김
 }

else로 hide()가 추가적으로 필요한 이유

일반적인 게시글이면 하나의 게시글을 클릭했을 때 상세보기 페이지로 이동을 한다. 따라서 이동한 페이지에서는 show() 처리만 하면 이메일이 같을 때만 삭제 버튼을 보여주면 끝이다. 상세 페이지 안에서 다른 게시물도 같이 보여서 이 게시물에는 삭제 버튼을 안 보이도록 하겠다는 처리를 할 필요가 없는 것이다.

하지만 내가 구현한 상황은 앨범의 사진 리스트들이 쭉 있는 상태에서 하나의 사진을 눌렀을 때 같은 이메일이면 삭제버튼을 보여주고, 또 다른 사진을 눌렀을 땐 삭제버튼이 보이지 않아야 하는 게 같이 구현되어야 했다. 즉, 하나의 페이지에서 여러 경우의 수가 발생할 수 있는 구조인 것이다.

따라서 if eles 절을 이용해서 show()와 hide()인 상황을 같이 조건으로 제시해야 원하는 기능이 제대로 구현된다.