[springBoot] 구독정보 -뷰 렌더링/구독,구독취소기능구현

구독정보 -뷰 렌더링/구독,구독취소기능구현

 

---

 

1. JSP 틀 만들기

// profile.jsp
...
<li>
	<a href="javascript:subscribeInfoModalOpen(${dto.user.id});"> 구독정보
...

	<div class="subscribe-list" id="subscribeModalList">
    <!-- 유저 구독정보가 들어갈 자리 -->
		</div>

 

2. JS에서 데이터 가져와 뿌려주기

// profile.js

// (2) 구독자 정보  모달 보기
function subscribeInfoModalOpen(pageUserId) {
$(".modal-subscribe").css("display", "flex");

$.ajax({ // 구독리스트
    url: `/api/user/${pageUserId}/subscribe`,
    dataType: "json"
}).done(res=>{
    console.log(res);
    res.data.forEach((u) => {
        let item = getSubscribeModalItem(u);
        $("#subscribeModalList").append(item);
    });
}).fail(error=>{
    console.log("실패",error)
})
}

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.subscribeState) { // 동일 유저가 아닐 때, 해당 유저를 구독한 상태
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>`;

console.log(item)
return item;

}