SpringBoot + MariaDB 6-3 구독 구독정보 렌더링

구독정보 렌더링

profile.jsp

jsp에서 해당패이지의 id를 전달하도록 설정

    <div class="subscribe">
        <ul>
            <li><a href=""> 게시물<span>${dto.imageCount }</span>
            </a></li>
            <li><a href="javascript:subscribeInfoModalOpen(${dto.user.id });"> 구독정보<span>${dto.subscribeCount }</span>
            </a></li>
        </ul>
    </div>

 

profile.js

js에서 ajax요청으로 데이터를 가져와보자

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
}

getSubscribeModalItem함수를 만들어주고 html코드를 반환하게 된다

 

위에서 만든 html코드를 받아 내가원하는 위치에 append를 하여 출력시킴 

리스트 형태이니 forEach를 이용하여 데이터 하나씩 html화 시켜 출력해주는 모습이다.

// (2) 구독자 정보  모달 보기
function subscribeInfoModalOpen(pageUserId) {
	$(".modal-subscribe").css("display", "flex");
	$.ajax({
		url:`/api/user/${pageUserId}/subscribe`,
		dataType:"json"
	}).done(res=>{
		res.data.forEach((u)=>{
			let item = getSubscribeModalItem(u);
			$("#subscribeModalList").append(item);
		})
	}).fail(err=>{
	});
}

이제 출력은 완료되었고 모달창에 구독하기버튼과 구독취소하기 버튼을 활성화 시키러 가보자.

 

getSubscribeModalItem의 if부분만 수정해준다면 정상 작동 될것이다 u.id로 해당 유저의 아이디와 이벤트보내서 전에 사용했던 toggleSubscribe함수를 작동시키면 정상작동 되는것을 확인할 수 있다.

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>`;	
    }
}

이렇게해서 구독기능은 끝났다.