좋아요 버튼 만들기

좋아요 - 하트 버튼 누르면 빨간색으로 채워지게 하고,

좋아요 취소 - 다시 하트 버튼을 누르면 빨간색 사라지면서 취소 

<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 프로젝트 - 포토그램 만들기"