[Springboot] 팔로우(언팔로우)기능 - 2 팔로우 언팔로우 기능 구현

profile.html
- 이전에 followState에 따라 버튼에 어떤 메시지가 보일지를 세팅했다.
- 버튼을 클릭했을때 팔로우, 혹은 언팔로우 기능을 실행할 자바스크립트 코드를 삽입했다. 
- toggleSubscribe 를 클릭했을때 this를 전달하는데 여기서 this란 이벤트 정보를 의미한다. 

<div th:if="${dto.followState == true}">
  <button class="cta blue" th:onclick="toggleSubscribe([[${dto.user.id}]], this)">팔로우 취소</button>
</div>
<div th:if="${dto.followState == false}">
  <button class="cta" th:onclick="toggleSubscribe([[${dto.user.id}]],this)">팔로우</button>
</div>

 

profile.js
- toggleClass: 클래스의 css이름을 넣었다 뺐대 함
- toggleSubscribe는 toUserId(현재 페이지 주인의 id)와 obj를 받는다. 

1. 버튼이 '언팔로우'일때
정상적으로 끝나면 "팔로우" 와 클래스의 색을 blue로 표시하게 한다. 
2. 버튼이 '팔로우' 일때 
정상적으로 끝나면 "팔로우" 와 클래스의 색을 blue로 표시하게 한다. 

function toggleSubscribe(toUserId, obj) {
   if ($(obj).text() === "팔로우 취소") {
       $.ajax({
        type:"delete",
        url: "/api/follow/"+toUserId,
        dataType: "json"
       }).done(res=>{
              $(obj).text("팔로우");
              $(obj).toggleClass("blue");
       }).fail(error=>{
            console.log("팔로우취소실패", error);
       });

   } else {
        $.ajax({
             type:"post",
             url: "/api/follow/"+toUserId,
             dataType: "json"
            }).done(res=>{
                $(obj).text("팔로우취소");
                $(obj).toggleClass("blue");
            }).fail(error=>{
                console.log("팔로우하기실패", error);
            });
   }
}