[Springboot] 팔로우 정보 모달에 노출하기3 - 팔로우 정보 렌더링 완료

profile.html
- 현재 페이지의 아이디를 subscribeInfoModalOpen함수에  전달해야한다.

<div class="subscribe">
        <ul>
          <li><a href=""> 게시물<span th:text="${dto.imageCount}">3</span>
          </a></li>
          <script  th:inline="javascript">
            /*<![CDATA[*/
            var id = "[[${dto.user.id}]]";
            /*]]>*/
          </script>

          <li>
            <a href="javascript:subscribeInfoModalOpen(id);">
              팔로우정보<span th:text="${dto.followCount} ">2</span>
            </a>
          </li>
        </ul>
      
 </div>

profile.js
- 요청 url 은 '/api/user/페이지유저아이디/follow
- 그렇게 얻어진 결과값인 res의 data를 forEach로 돌면서 유저정보u 를 getSubscribeModalItem() 함수에 넣어주고
  그 결과를 item 에 넣고 profile.html의 #subscribeModalList id 값을 가진 요소에 붙여준다.

// (2) 팔로우정보  모달 보기
function subscribeInfoModalOpen(pageUserId) {
//modal-subscribe라는 클래스를 찾아서 화면에 보여줌
   $(".modal-subscribe").css("display", "flex");

   $.ajax({
       url:`/api/user/${pageUserId}/follow`,
       dataType:"json"
   }).done(res=>{

        res.data.forEach((u) => {
            let item = getSubscribeModalItem(u);
            $("#subscribeModalList").append(item);

           });

   }).fail(error=>{
       console.log("구독정보 불러오기 오류", error);

   });
}

 

 if(!u.equalUserState):  동일유저가 아닐때 팔로우 관련 버튼이 보여야한다.
 if(u.followState) : 팔로우 상태에 따른 분기

function getSubscribeModalItem(u) {
let item =
`<div class="subscribe__item" id="subscribeModalItem-${u.id}">
     <div class="subscribe__img">
       <img src="/upload/${u.profileImageUrl}" onerror="this.src='/images/person.jpeg'"/>
     </div>
     <div class="subscribe__text">
       <h2>${u.username}</h2>
     </div> 
 <div class="subscribe__btn">`;

 if(!u.equalUserState){ 
    if(u.followState){ 
     item += `<button class="cta blue" onclick="toggleSubscribe(${u.id}, this)">팔로우취소</button>`
    }else{
     item += `<button class="cta" onclick="toggleSubscribe(${u.id},this)">팔로우</button>`
    }
 }

     item += `
     </div>
   </div>`;

    return item;
}

 

toggleSubscribe(): 팔로우(언팔) 함수

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);
            });
//    toggle: 클래스의 css이름을 넣었다 뺐대 함
   }
}