[Java] 게시글 공감기능 추가(tistory버전)

0. 결과

공감 버튼을 클릭하면

공감 버튼이 바뀌고 추천이 늘어나고, 다시 누르면 

다시 추천이 줄어들고 원상태로 돌아온다.

 

1. 로직을 짜기전에 DB테이블을 하나 생성해준다(board테이블과 user테이블의 id값을 fk로 설정)

 

2. 공감버튼 생성

<c:choose>
	<c:when test="${empty likeCount}">
		<button type="button"  class="btn btn-Light" onclick="index.like()"
			style="border: 1px solid black;">❤ 공감</button>
	</c:when>
	<c:otherwise>
		<button type="button"  class="btn btn-Light" onclick="index.like()"
			style="border: 1px solid black;" >🤍 ${board.blike}</button>
	</c:otherwise>
</c:choose> 

<script src="/js/board.js"></script>

 

3. 버튼 클릭시

- board.js

like:function(){  
	var id = $("#id").text();    
	$.ajax({ 
		method: "POST",
		url: "/api/boardlike/"+id,
		data: JSON.stringify(id),
		contentType: "application/json; charset=utf-8", 
		dataType: "json", 
	}).done(function(resp){
		// 성공 
		location.href=`/board/${id}`;
	}).fail(function(error){
		// 실패
		alert(JSON.stringify(error))
	});  
},

 

@PostMapping("/api/boardlike/{id}")
public ResponseDto<Integer> like(@PathVariable("id") int boardId, @AuthenticationPrincipal PrincipalDetail principal){
	User user = userRepository.findByUsername(principal.getUsername()).orElseThrow(()->{
		return new IllegalArgumentException("유저 찾기 실패 : 아이디를 찾을 수 없습니다.");
	});  
    // likeCount 테이블 조회
	LikeCount likeCount = likeCountRepository.like(user.getId(), boardId); 
	if(likeCount == null) { // 값이 없으면 추천+1 하고 likeCount 값 생성
		boardService.추천(boardId); 
		Board board = boardRepository.findById(boardId).orElseThrow(()->{
			return new IllegalArgumentException("글 상세보기 실패 : 아이디를 찾을 수 없습니다.");
		});  
		likeCountService.추천유무(board, user);
	} else { // 값이 있으면 값을 삭제하고 추천 - 1
		likeCountRepository.delete(likeCount); 
		boardService.비추천(boardId);   
	}
	return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
}

- LikeCountService.java

@Transactional
public void 추천유무(Board board, User user) {  
	LikeCount likeCount = new LikeCount();
	likeCount.setBoard(board);
	likeCount.setUser(user);
	likeCountRepository.save(likeCount);
} 

- boardService.java

@Transactional
public void 추천(int id) {
	Board board = boardRepository.findById(id).orElseThrow(()->{
		return new IllegalArgumentException("글 찾기 실패 : 아이디를 찾을 수 없습니다.");
	}); 
	int cnt = board.getBlike() + 1; 
	board.setBlike(cnt); 
}

@Transactional
public void 비추천(int id) {
	Board board = boardRepository.findById(id).orElseThrow(()->{
		return new IllegalArgumentException("글 찾기 실패 : 아이디를 찾을 수 없습니다.");
	}); 
	int cnt = board.getBlike() - 1; 
	board.setBlike(cnt); 
}

 

---

- 앞의 게시글 추천/비추천 기능을 코딩했을때와는 다르게 로직이 간단해졌다.