44. 스토리 페이지 - 스크롤 페이징 구현하기
'페이징'은 간단하게 마무리가 되었는데, '페이지를 넘기는 버튼'은 만들지 않았다.
우리는 이걸 마우스 '스크롤을 내림'으로써 자동으로 '다음페이지'의 정보를 가져오도록 만들것이다.
story.js에 이걸 구현하기 위한 준비가 되어있다.
(2) 스토리 스크롤 페이징하기 이다
-> 해당 화면에서 마우스 스크롤이 돌아가면 작동하는 방식이다.
마치, $("btn").click() 같은 형태이다.
우선 마우스 스크롤이 제대로 먹히는지부터 console.log를 통해서 확인해보자.
-> '스토리 페이지'에서 마우스 스크롤을 움직이면 이렇게 콘솔에 스크롤중이라는 log가 뜨는것을 확인할 수 있다.
위의 'GET 에러로그'는 해당 페이지에서 image올린 User의 profileImageUrl을 찾지 못해서 발생하는 것이므로 무시해도 된다. 아직 구현하지 않은것이기 때문이다.
마우스 스크롤을 움직일 때 마다 위아래 상관없이 움직인 크기만큼 숫자가 커지는것을 알 수 있다. 여기서 우리가 알아야 할 데이터가 있다
스크롤이 어디에 위치해 있는가? 가져온 이미지들을 다 뿌린 총 높이는 얼마인가? 현재 화면의 높이 사이즈는 얼마나 되는가?
이 세가지이다. 이 세가지의 정보를 알기위해 console에 데이터를 뽑아보자.
-> 이 값을 보면 정확하게 알 수 있다
window.scrollTop() : 현재 스크롤이 위치한 높이
window.height() : 현재 페이지의 높이
document.height() : 현재 페이지의 총 높이
스크롤을 '최대로 내렸을 때'가 결국 현재 페이지의 '총 높이'가 된다.
1721(scrollTop) + 970(window.height) = 2691(document.height)
이 데이터를 토대로 '스크롤 페이징'의 기준을 정할 수 있다.
결국 document.height()의 값이 '페이지의 끝점'이라는것을 알기 때문이다.
한마디로 스크롤탑-(총높이-현재페이지 높이) 값이 0이 된다.
스크롤을 최대로 내렸을 때 0이 되었다.
이 때, 다음 페이지를 더 뿌려주도록 만들어주면 되겠다.
사용자 편의를 위해 0 근접치에 왔을때 '페이지를 로드'할 수 있게 해주자.
checkNum이 0의 '근사치'인 1이내로 들어오면 storyLoad() 메서드를 더 호출해주도록 하면 된다.
'스크롤 페이징'이 되었다.
그런데 여기서 문제가 있다.
처음 0페이지에 있던 '3개의 image'만을 스크롤을 내릴 때 마다 계속 뿌려주고 있다.
때문에 '스크롤 페이징'이 작동할 때, 이미 뿌려진 데이터가 아닌, 아직 출력되지 않은 '다음페이지의 이미지'가 응답되어야 하고, 이미지의 응답이 끝났을 때, '스크롤 페이징'이 더이상 되지 않도록 해야한다.
우선 '페이지 번호'를 0을 기준으로 스크롤을 내릴 때 마다 '페이지 번호'가 바뀌도록 해주어야 한다.
처음 storyLoad() 가 호출될 땐 0이 호출되게 되고, 다시 storyLoad()를 호출할 땐, page값을 1씩 증가시켜 주자.
/**
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();
}
});
-> VSCODE에서도 6번의 image SELECT를 하고 끝이 났다.
'스크롤 페이징'은 이걸로 마무리 되었다.