구독 정보 뷰 랜더링
profile.jsp에 구독정보 모달을 호출하는 함수는
profile.js에
여기에 아이디를 받아와야한다.
// (2) 구독자 정보 모달 보기
function subscribeInfoModalOpen(pageUserId) {
alert(pageUserId);
$(".modal-subscribe").css("display", "flex");
}
JavaScript
복사
profile.jsp에
<li><a href="javascript:subscribeInfoModalOpen(${dto.user.id});"> 구독정보<span>${dto.subscribeCount}</span>
JavaScript
복사
이렇게 구독정보 누르면 아이디값이 알럿으로 뜬다
이제 ajax 를 통해서 데이터값을 받아온다
$.ajax({
}).done(res=>{
}).fail(error=>{
});
JavaScript
복사
// (2) 구독자 정보 모달 보기
function subscribeInfoModalOpen(pageUserId) {
//alert(pageUserId);
$(".modal-subscribe").css("display", "flex");
$.ajax({
url: `/api/user/${pageUserId}/subscribe`,
dataType: "json"
}).done(res=>{
console.log(res)
}).faile(error=>{
console.log("구독정보 불로오기 오류",error)
});
}
JavaScript
복사
이제 왼쪽에 해당 리절트 값으로 이미지를 그려줘야하는데
profile.jsp 하단에
이 부분을 ctrl+ x 누르고
profile.js에
function getSubscribeModalItem() {
let item = `<div class="subscribe__item" id="subscribeModalItem-1">
<div class="subscribe__img">
<img src="#" onerror="this.src='/images/person.jpeg'"/>
</div>
<div class="subscribe__text">
<h2>love</h2>
</div>
<div class="subscribe__btn">
<button class="cta blue" onclick="toggleSubscribeModal(this)">구독취소</button>
</div>
</div>`;
return item;
}
JavaScript
복사
이렇게 추가해주고 <h2> love</h2> 요부분의 love는 이제 데이터를 받아와서 처리해줄거다.
$.ajax({
url: `/api/user/${pageUserId}/subscribe`,
dataType: "json"
}).done(res=>{
console.log(res.data)
res.data.forEach((u)=> {
let item = getSubscribeModalItem(u);
$("#subscribeModalList").append(item);
});
}).fail(error=>{
console.log("구독정보 불러오기 오류",error)
});
JavaScript
복사
성공부분에 이렇게 forEach를 돌리면서 user데이터인 u getSubscribeModalItem에 보내준다
function getSubscribeModalItem(u) {
let item = `<div class="subscribe__item" id="subscribeModalItem-1">
<div class="subscribe__img">
<img src="#" onerror="this.src='/images/person.jpeg'"/>
</div>
<div class="subscribe__text">
<h2>${u.username}</h2>
</div>
<div class="subscribe__btn">
<button class="cta blue" onclick="toggleSubscribeModal(this)">구독취소</button>
</div>
</div>`;
return item;
}
JavaScript
복사
이제 모달에 받아온 데이터로 잘 뿌려진다
모달 아이디값이 유일해야하니까 1이라고 하드코딩 됐던 부분을
이렇게 변경하면서 img도 같이 변경해주자
이제 구독취소 버튼이 조건에 따라 변경되야 하는데
if문 조건을 추가해주면서
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="toggleSubscribeModal(this)">구독취소</button>`;
}else{
item += `<button class="cta" onclick="toggleSubscribeModal(this)">구독하기</button>`;
}
}
item += `
</div>
</div>`;
return item;
}
JavaScript
복사
내가 로그인한 ssar이니까 구독버튼이 안뜨는게 맞다
그럼 코스를 구독취소 하고 내프로필 구독자수를 보면은
구독정보가 1로 바꼈다.