북마크 기능

북마크 기능 구현

 

html

<div th:if="${userId} == null" onclick='alert("로그인 후 이용해주세요!")' class="bookmarkBox" >
    <i class="fa-bookmark"></i>
</div>
<div th:if="${userId} != null" onclick="bookmark()" class="bookmarkBox" >
    <i class="fa-bookmark"></i>
</div>

로그인이 되어있는 유저만 북마크 api 요청 가능하도록 th:if문 사용

 

js

function showBookmarkStatus(){
    let class_bookmark;
    if(bookmarkByLoginUser === "false") {
        class_bookmark = "fa-regular";
    }else {
        class_bookmark = "fa-solid";
    }
    $('.fa-bookmark').addClass(class_bookmark);
}

function bookmark(){
    if ($('.fa-bookmark').hasClass("fa-regular")){
        $.ajax({
            type: "POST",
            url: `/api/cafes/${id}/bookmark`,
            data: {},
            success: function (response) {
                $('.fa-bookmark').addClass("fa-solid").removeClass("fa-regular");
            }
        })
    } else {
        $.ajax({
            type: "DELETE",
            url: `/api/cafes/${id}/bookmark`,
            data: {},
            success: function (response) {
                $('.fa-bookmark').addClass("fa-regular").removeClass("fa-solid");
            }
        })
    }
}

페이지 호출시 로그인한 유저가 해당 게시물에 북마크 했는지 여부에 따라 다른 class를 적용하여 북마크 이모지를 다르게 표시하도록 분기처리

-> 적용된 클레스에 따라 ajax 호출 분기 처리

 

controller

@PostMapping("/api/cafes/{id}/bookmark")
public void createBookmark(@PathVariable Long id, User loginUser) {
    cafeService.saveCafeBookmark(id, loginUser);
}

@DeleteMapping("/api/cafes/{id}/bookmark")
public void deleteBookmark(@PathVariable Long id, User loginUser) {
    cafeService.removeCafeBookmark(id, loginUser);
}

 

service

@Transactional
public void saveCafeBookmark(Long cafeId, User loginUser) {
    User user = userRepoistory.findById(loginUser.getId()).orElseThrow(
            () -> new IllegalArgumentException(USER_NOT_FOUND.getMessage()));
    Cafe cafe = cafeRepository.findById(cafeId).orElseThrow(
            () -> new IllegalArgumentException(CAFE_NOT_FOUND.getMessage()));

    CafeBookmark cafeBookmark = CafeBookmark.builder()
            .user(user)
            .cafe(cafe)
            .build();
    cafeBookmarkRepository.save(cafeBookmark);
}

@Transactional
public void removeCafeBookmark(Long cafeId, User loginUser) {
    cafeBookmarkRepository.deleteByCafeIdAndUserId(cafeId, loginUser.getId());
}