-
좋아요 버튼 만들기Spring Boot 2021. 11. 16. 19:44
좋아요 - 하트 버튼 누르면 빨간색으로 채워지게 하고,
좋아요 취소 - 다시 하트 버튼을 누르면 빨간색 사라지면서 취소
<jsp 파일>
<button>`; if(image.likeState){ item += `<i class="fas fa-heart active" id="storyLikeIcon-${image.id}" onclick="toggleLike(${image.id})"></i>`; }else{ item += `<i class="far fa-heart" id="storyLikeIcon-${image.id}" onclick="toggleLike(${image.id})"></i>`; } item += ` </button>
좋아요 버튼 누르면, likeState = true 가 되도록 구현해놨음
-> 그래서 likeState 라면, class = "fas fa -heart active"가 되도록 하고,
좋아요 버튼을 누르지 않았다면, likeState = false가 되서,
-> class = "far fa-heart"가 되도록 함
이것을 toggleLike 함수를 js 에 구현해서 적용시킴.
<js 파일>
function toggleLike(imageId) { let likeIcon = $(`#storyLikeIcon-${imageId}`); if (likeIcon.hasClass("far")) { // 좋아요 $.ajax({ type: "post", url: `/api/image/${imageId}/likes`, dataType: "json" }).done(res=>{ let likeCountStr = $(`#storyLikeCount-${imageId}`).text(); let likeCount = Number(likeCountStr) + 1; $(`#storyLikeCount-${imageId}`).text(likeCount); //************************** likeIcon.addClass("fas"); likeIcon.addClass("active"); likeIcon.removeClass("far"); //************************** }).fail(error=>{ console.log("오류", error); }); } else { // 좋아요취소 $.ajax({ type: "delete", url: `/api/image/${imageId}/likes`, dataType: "json" }).done(res=>{ let likeCountStr = $(`#storyLikeCount-${imageId}`).text(); let likeCount = Number(likeCountStr) - 1; $(`#storyLikeCount-${imageId}`).text(likeCount); //************************** likeIcon.removeClass("fas"); likeIcon.removeClass("active"); likeIcon.addClass("far"); //************************** }).fail(error=>{ console.log("오류", error); }); } }
//*********** 친 부분에서 이를 구현하고 있음.(나머지 코드는 좋아요 카운트 수 구현 등 다른 작업과 관련)
1. 좋아요 취소 -> 좋아요
if (likeIcon.hasClass("far"))즉, likeIcon에 class값이 far을 가지고 있다면,far fa-heart 이 값인 거고, 이는 좋아요 취소 상태이다.따라서,
likeIcon.addClass("fas");
likeIcon.addClass("active");
likeIcon.removeClass("far");이렇게 처리함으로써,
fas fa-heart active
이렇게, 즉 좋아요 상태가 된다.
2. 좋아요-> 좋아요 취소
역시 마찬가지이다.
<css 파일>
button:first-child .active { color: red;
css 에서 이런 식으로, 버튼의 color를 red 로 채워지게 하면 된다.
참고 자료 : 이지업 강의 사이트 "스프링부트 SNS 프로젝트 - 포토그램 만들기"
'Spring Boot' 카테고리의 다른 글
인기페이지 구현 (0) 2021.11.17 좋아요 버튼, 좋아요 수 구현 (0) 2021.11.16 페이지 스크롤 (0) 2021.11.12 페이징 처리 (0) 2021.11.12 @JsonIgnoreProperties (0) 2021.11.11