개발일지 39 - 좋아요 버튼 이미지로 바꾸기

프로필 이미지를 추가하면서 media에 이미지를 저장할 수 있게 만들어 두어서 훨씬 수월하게 진행했다.

 

어제는 이미지를 추가하는 것에 성공했으니 이제 이미지를 클릭했을때 새로운 이미지로 변환이 되게 구현을 하고 싶었다. 

 

  event.preventDefault(); // 기본 폼 제출 방지
    const likeBtn = document.getElementById('like-btn');

    // 버튼의 배경 이미지 변경
    if (likeBtn.style.backgroundImage.includes('like_button.jpg')) {
        likeBtn.style.backgroundImage = "url('...liked_button.png')"; // 눌렀을 때 이미지
    } else {
        likeBtn.style.backgroundImage = "url('...like_button.jpg')"; // 원래 이미지
    }

    // 폼을 제출
    document.getElementById('like-form').submit();

 

자바 스크립트를 사용하는 방법이었다. 폼이 바로 제출이 되지 않게 preventDefault 함수를 사용해준다.

 

이후 includes를 사용하는데 해당 이미지가 있으면 true를 반환하고 그렇지 않으면 false를 반환한다. 그래서 좋아요 버튼을 클릭했을때 다른 이미지 경로로 이미지를 바꾸는 방식을 사용했다.

폼을 제출하는 것으로 마무리한다.

 

근데 아무리 생각을 해보니 이 방식은 내가 CSS로 구현한 방법에 맞지 않다고 생각을 하고 새로운 방법을 생각해야 했다.

 

.like-btn{
        background-image:url('.../like_button.png');
  
        width: 100px; /* 버튼 너비 */
        height: 50px;   
        border: none;
        transition: transform 0.2s
    }

 

다른 사이트를 뒤져보면서 자바스크립트를 사용하되, css로 이미지를 바꾸는 방법이 있을 것 같아서 구글링을 계속하다가 좋은 방법이 떠올랐다.