⭐북마크, 좋아요 설정및 해제

🖊️프런트 javascript

📜touristDetail.html

<script th:inline="javascript">
   /*<![CDATA[*/
   const contentId = /*[[${item.contentId}]]*/;
   /*]]>*/
   // 북마크
   $("#bookmark").on("click", (e)=>{
      $.ajax({
         type: "GET",
         url: location.origin + "/tourist/detail/" + contentId + "/bookmark",
         success: function (response) {
            console.log("Bookmark", response);
            if(response){
               e.target.className = "btn btn-primary";
            } else {
               e.target.className = 'btn btn-outline-secondary';
            }
         },
         error: function (error) {
            console.error("Error occurred", error);
         }
      });
   });

   // 좋아요
   $("#like").on("click", (e)=>{
      $.ajax({
         type: "GET",
         url: location.origin + "/tourist/detail/" + contentId + "/like",
         success: function (response) {
            console.log("Liked", response);
            e.target.innerText = '좋아요 ' + response;
         },
         error: function (error) {
            console.error("Error occurred", error);
         }
      });
   });
</script>

컨트롤러

📜TouristController.java

public class TouristController {
   // 북마크
   @ResponseBody
   @GetMapping("/detail/{contentId}/bookmark")
   public boolean bookmark(@PathVariable("contentId") Long contentId, 
         @AuthenticationPrincipal MemberDetails memberDetails) throws IOException{
      Member member = memberDetails.getMember();
      Board board = boardService.findOne(contentId);
      return bookmarkService.bookmarking(board, member);
   }

   // 좋아요
   @ResponseBody // html이 아닌 값 그대로를 응답 메서지 
   @GetMapping("/detail/{contentId}/like")
   public long like(@PathVariable("contentId") Long contentId, 
            @AuthenticationPrincipal MemberDetails memberDetails) throws IOException {
      Member member = memberDetails.getMember();
      Board board = boardService.findOne(contentId);
      boardService.like(board, member);
      return boardService.countLike(board);  // 해당 board의 like의 수를 출력
   }
}

서비스, 리포지토리

📖북마크 설정과 해제

📜BookmarkService.java

@Service
@RequiredArgsConstructor
@Transactional(readOnly = true)
public class BookmarkService {

   private final BookmarkRepository bookmarkRepository;
   
   @Transactional
	public boolean bookmarking(Board board, Member member) {

		Bookmark bookmark = bookmarkRepository.findByMemberAndBoard(member, board);
      // 북마크가 이미 존재할 경우, 조회된 북마크를 db에서 삭제하여 북마크를 해제한다.
		if (bookmark != null) {
			bookmarkRepository.delete(bookmark);
			return false;
		}
      // 북마크가 존재하지 않을 경우, 북마크를 db 추가하여 북마크를 설정한다.
		bookmark = new Bookmark();
		bookmark.setMember(member);
		bookmark.setBoard(board);
		bookmarkRepository.save(bookmark);
		return true;
	}
}

📜BookmarkReposotory.java

public interface BookmarkRepository extends JpaRepository<Bookmark, Long>{
   Bookmark findByMemberAndBoard(Member member, Board board);
}

👍좋아요

📜BoardService.java

@Service
@RequiredArgsConstructor
@Transactional(readOnly = true)
public class BoardService {

   private final LikeRepository likeRepository;

   // 좋아요 설정및 삭제
   @Transactional
	public boolean like(Board board, Member member) {

		Like like = likeRepository.findByMemberAndBoard(member, board);
		if (like != null) {
			likeRepository.delete(like);
			return false;
		}

		like = new Like();
		like.setMember(member);
		like.setBoard(board);
		likeRepository.save(like);
		return true;
	}

   // 해당 게시판의 좋아요 개수
	public Long countLike(Board board) {
		return likeRepository.countByBoard(board);
	}
}

📜LikeReposotory.java

public interface LikeRepository extends JpaRepository<Like, Long> {
   Like findByMemberAndBoard(Member member, Board board);
   long countByBoard(Board board);
}

좋아요, 북마크 기능 구현

마이페이지에서 확인 가능