2/16 Spring Boot 스토리 스크롤 페이징하기!

---

// (2) 스토리 스크롤 페이징하기
$(window).scroll(() => {
	console.log("스크롤중");
});

$(window).scroll(() => {
	console.log("윈도우 scrollTop",$(window).scrollTop());
	console.log("문서의 높이",$(document).height());
	console.log("윈도우 높이",$(window).height());
});

이렇게 해서 이 값들이 무엇을 의미하는지 체크해보자!

내리면 내릴수록 ScrollTOp이 이 스크롤의 위치이다. 

문서의 높이와 윈도우 높이는 고정이다! 

윈도우 높이는 

문서의 높이에서 윈도우 높이를 빼면 정확히 ScrollTop 결과가 나온다.

컴퓨터 화면마다 문서의 높이와 윈도우 높이가 다르다. 

 

$(window).scroll(() => {
	//console.log("윈도우 scrollTop",$(window).scrollTop());
	//console.log("문서의 높이",$(document).height());
	//console.log("윈도우 높이",$(window).height());
	
	let checkNum = $(window).scrollTop() - ($(document).height() - $(window).height() );
	console.log(checkNum);
	
	if(checkNum <1 && checkNum > -1){
		
	}
});

여기서 checkNum이 1 밑으로 떨어지면 storyLoad(); 를 다시한번 호출하면된다! 

/**
	2. 스토리 페이지
	(1) 스토리 로드하기
	(2) 스토리 스크롤 페이징하기
	(3) 좋아요, 안좋아요
	(4) 댓글쓰기
	(5) 댓글삭제
 */

// (1) 스토리 로드하기
let page = 0;

function storyLoad() {
	$.ajax({
		url: `/api/image?page=${page}`,
		dataType: "json"
	}).done(res=> {
		console.log(res);
		res.data.content.forEach((image)=>{
			let storyItem = getStoryItem(image);
			$("#storyList").append(storyItem);
		});
	}).fail(error=>{
		console.log("오류",error);
	});
}

storyLoad();

function getStoryItem(image) {
	let item =`<div class="story-list__item">
	<div class="sl__item__header">
		<div>
			<img class="profile-image" src="/upload/${image.user.profileImageUrl}"
				onerror="this.src='/images/person.jpeg'" />
		</div>
		<div>${image.user.username}</div>
	</div>

	<div class="sl__item__img">
		<img src="/upload/${image.postImageUrl}" />
	</div>

	<div class="sl__item__contents">
		<div class="sl__item__contents__icon">

			<button>
				<i class="fas fa-heart active" id="storyLikeIcon-1" onclick="toggleLike()"></i>
	</button>
</div>

<span class="like"><b id="storyLikeCount-1">3 </b>likes</span>

<div class="sl__item__contents__content">
	<p>${image.caption}</p>
</div>

<div id="storyCommentList-1">

	<div class="sl__item__contents__comment" id="storyCommentItem-1"">
		<p>
			<b>Lovely :</b> 부럽습니다.
		</p>

		<button>
			<i class="fas fa-times"></i>
		</button>

	</div>

</div>

<div class="sl__item__input">
	<input type="text" placeholder="댓글 달기..." id="storyCommentInput-1" />
	<button type="button" onClick="addComment()">게시</button>
		</div>

	</div>
</div>`;
	return item;
}

// (2) 스토리 스크롤 페이징하기
$(window).scroll(() => {
	//console.log("윈도우 scrollTop",$(window).scrollTop());
	//console.log("문서의 높이",$(document).height());
	//console.log("윈도우 높이",$(window).height());
	
	let checkNum = $(window).scrollTop() - ($(document).height() - $(window).height() );
	console.log(checkNum);
	
	if(checkNum <1 && checkNum > -1){
			page++;
			storyLoad();
	}
});


// (3) 좋아요, 안좋아요
function toggleLike() {
	let likeIcon = $("#storyLikeIcon-1");
	if (likeIcon.hasClass("far")) {
		likeIcon.addClass("fas");
		likeIcon.addClass("active");
		likeIcon.removeClass("far");
	} else {
		likeIcon.removeClass("fas");
		likeIcon.removeClass("active");
		likeIcon.addClass("far");
	}
}

// (4) 댓글쓰기
function addComment() {

	let commentInput = $("#storyCommentInput-1");
	let commentList = $("#storyCommentList-1");

	let data = {
		content: commentInput.val()
	}

	if (data.content === "") {
		alert("댓글을 작성해주세요!");
		return;
	}

	let content = `
			  <div class="sl__item__contents__comment" id="storyCommentItem-2""> 
			    <p>
			      <b>GilDong :</b>
			      댓글 샘플입니다.
			    </p>
			    <button><i class="fas fa-times"></i></button>
			  </div>
	`;
	commentList.prepend(content);
	commentInput.val("");
}

// (5) 댓글 삭제
function deleteComment() {

}

페이징 성공!!