ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 좋아요 버튼 만들기
    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

    댓글

Designed by Tistory.