블로그-V3. 좋아요 뷰 렌더링

좋아요 로직은 어떤 게시글을 누가 좋아요 했는지만 알고 있으면 된다.

 

게시글 상세보기에서 좋아요를 확인하고 싶을 때

좋아요 정보를 담아가려면 Dto에 값을 추가해줘야겠다.

public class PostDetailRespDto {
    private Post post;
    private boolean isPageOwner; // Lombok일 때 getter가 변수명 그대로 나옴(getter : isPageOwner(){}, setter :
                                 // setPageOwner(){}
    private boolean isLove; // 좋아요를 했으면 true, 아니면 false
}

 

좋아요 로직은 포스트 컨트롤러에 만들것이다.

 

주소를 /s/api/post/{id}/love로 설정할 수 있고

post라는 대상이 있기 때문에 러브 컨트롤러가 아닌 포스트 컨트롤러에 만들어준다.

 

내부 상세 로직은 내일 만들 것이다!!

// /s/api/post/{id}/lovd
@PostMapping("/s/api/post/{id}/lovd")
public ResponseEntity<?> love(@PathVariable Integer id, @AuthenticationPrincipal LoginUser loginUser) {
    // 누가 어떤 포스트를 좋아요했는가?
    return null;
}

@DeleteMapping("/s/api/post/{id}/lovd")
public ResponseEntity<?> unLove(@PathVariable Integer id, @AuthenticationPrincipal LoginUser loginUser) {
    // 누가 어떤 포스트를 좋아요 취소했는가?
    return null;
}

 

게시글 상세보기를 했을 때 좋아요 정보를 담아가야 하기 때문에

포스트 서비스에서 게시글 상세보기 메서드에서 Love 정보를 추가해주자.

 

로그인하지 않고 게시글 상세보기를 들어갔을 때는

isLove에 false를 넣어주면 된다.

// 좋아요 유무 추가하기 (로그인 한 사람이 해당 게시글을 좋아하는지)
postDetailRespDto.setLove(false);

 

로그인 한 사람의 userId와 상세보기 한 postId로 Love 테이블에서 SELECT 하여 결과값에 따라

true or false를 리턴해준다.

 

public interface LoveRepository extends JpaRepository<Love, Integer> {
    @Query(value = "SELECT * FROM love WHERE userId = :userId AND postId = :postId", nativeQuery = true)
    Optional<Love> mFindByUserIdAndPostId(@Param("userId") Integer userId, @Param("postId") Integer postId);
}

// 좋아요 유무 추가하기 (로그인 한 사람이 해당 게시글을 좋아하는지)
// (1) 로그인 한 사람의 userId와 상세보기 한 postId로 Love 테이블에서 SELECT해서 row가 있으면 true
Optional<Love> loveOp = loveRepository.mFindByUserIdAndPostId(principal.getId(), id);
if (loveOp.isPresent()) {
    postDetailRespDto.setLove(true);
} else {
    postDetailRespDto.setLove(false);
}

 

dto에 정보를 담았으니 머스태치 뷰에 뿌려주면 되겠다.

 

boolean 타입은 getter의 이름이 변수명 그대로 나온다.

isLove의 경우 getter의 이름이 getIsLove가 아닌 isLove이다.

 

주의할 점!

boolean 타입의 setter 이름은 setLove이다.

is가 빠진다는 것을 알아두자.

 

{{#data.isLove}}
<i class="fa-solid fa-heart my_fake_like my_mr_sm_1" id="heart-{{data.post.id}}"
    onclick="postLikeClick('{{data.post.id}}')"></i>
{{/data.isLove}}
{{^data.isLove}}
<i class="fa-regular fa-heart my_fake_un_like my_mr_sm_1" id="heart-{{data.post.id}}"
    onclick="postLikeClick('{{data.post.id}}')"></i>
{{/data.isLove}}

 

아직 fetch를 완성하지 않았기 때문에

DB에서 강제로 INSERT 하고 뷰에 잘 그려지는지 테스트해보자.

 

-- 1 = ssar
SELECT * FROM user;

INSERT INTO love(userId, postId) VALUES(1, 14);
COMMIT;
SELECT * FROM love;

 

 

데이터는 잘 들어갔다.

 

 

게시글 상세보기 페이지를 확인해보니

좋아요 된 상태의 하트가 그려져 있다!!

 

 

 

[출처]

 

https://cafe.naver.com/metacoding

메타코딩 : 네이버 카페

메타 코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

메타코딩