36. 구독정보 View - 구독, 구독취소 버튼 이벤트 구현하기

구독, 구독취소, 구독정보, 구독자수 확인하는 쿼리를 만들고 그 데이터들이 실제 DB에 들어가고 view에 뿌려지는 것까지 구현했다. 하지만 여태까지 '구독'하고 '구독취소'하는 기능은 MariaDB에서 직접 쿼리를 실행했었다.

이 기능을 만들어져 있는 '버튼의 이벤트'를 통해 웹페이지에서도 실행되도록 해주자.

profile.jsp 파일의 '구독 버튼'의 내용이다.

<c:choose>
   <c:when test="${dto.pageOwnerState}">
      <button class="cta" onclick="location.href='/image/upload'">사진등록</button>
   </c:when>
   <c:otherwise>
      <c:choose>
         <c:when test="${dto.subscribeState}">
            <button class="cta blue" onclick="toggleSubscribe(${dto.user.id},this)">구독취소</button>
         </c:when>
         <c:otherwise>
            <button class="cta" onclick="toggleSubscribe(${dto.user.id},this)">구독하기</button>
         </c:otherwise>
      </c:choose>
   </c:otherwise>
</c:choose>

'구독상태'(true, false)에 따라 '구독취소 버튼'이 뜰지, '구독하기 버튼'이 뜰지가 정해지고 해당 버튼들은 onclick기능으로 클릭시 toggleSubscribe()라는 '자바스크립트 메서드'가 뜨게 되어있다.

'매개변수'로는 this가 걸려있는데 this는 event를 받는다는 말이다.

toggleSubscribe() 메서드는 profile.js 파일에 이미만들어져 있다.

이 메서드를 살펴보면 '클릭 이벤트'가 발생할 때, 버튼의 내용이 '구독취소'가 아니라면 '구독하기'로 바꾸고 css에서 지정되어 있는 blue클래스를 실행하도록 되어있고, '구독취소'가 맞으면 '구독취소' 그대로 뜨고 blue클래스가 실행되도록 되어있다.

blue클래스는 toggle 기능으로써 on상태에서 실행되면 off, off상태에서 실행되면 on이 되도록 되어있다.

 

 

다음으로는 자바스크립트 AJAX 기술을 통해 해당기능을 구현해보겠다.

// (1) 유저 프로파일 페이지 구독하기, 구독취소
function toggleSubscribe(toUserId, obj) {

   //구독한 상태
   if ($(obj).text() === "구독취소") {
      $.ajax({
         type: "delete",
         url: "/api/subscribe/" + toUserId,
         dataType:"json"
      }).done(res=> {
            $(obj).text("구독하기");
         $(obj).toggleClass("blue");
      }).fail(error=> {
         console.log("구독취소 실패", error)
      });

   } else {

      //구독하지 않은 상태
      $.ajax({
         type:"post",
         url:"/api/subscribe/" + toUserId,
         dataType:"json"
      }).done(res=> {
         $(obj).text("구독취소");
         $(obj).toggleClass("blue");
      }).fail(error=> {
         console.log("구독 실패", error)
      });
   }
}

코드는 작성이 완료되었으니, 테스트를 해보자

ssar로 로그인 하여 cos 프로필 페이지로 가보자

header.jsp 파일에가서 코드에 '변수'로써 로그인한 유저의 ID를 찾아서 넣어줄 수 있도록 바꾸어주자.

                <li class="navi-item">
<%--                  <a href="/user/1"> /user/1로 '하드코딩'이 되어있는 상황 --%>
               <li class="navi-item"><a href="/user/${principal.user.id}">
                     <i class="far fa-user">

                     </i>
                  </a>
               </li>
            </ul>
         </nav>
      </div>
   </header>