[springBoot] 스토리 -스토리 페이징 로딩 구현

스토리 -스토리 페이징 로딩 구현

 

---

 

1. Story뷰 렌더링

- 스토리 데이터가 들어갈 class 생성

// story.jsp
<main class="main">
	<section class="container">
		<!--전체 리스트 시작-->
		<article class="story-list" id="storyList">

			<!--전체 리스트 아이템-->


		</article>
	</section>

 

- Ajax로 데이터 뿌리기

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

	}).fail(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. 페이지 구현

- 컨트롤러의 스토리함수에 파라미터 생성

- 리턴값 Page로 바꾸기

- 서비스에 페이지 파라미터 전달

// ImageApiController.java

import org.springframework.data.domain.Pageable;

@GetMapping("/api/image")
public ResponseEntity<?> imageStory(@AuthenticationPrincipal PrincipalDetails principalDetails,
                                    @PageableDefault(size=3) Pageable pageable){
    Page<Image> images = imageService.이미지스토리(principalDetails.getUser().getId(),pageable);
    return new ResponseEntity<>(new CMRespDto<>(1,"성공",images), HttpStatus.OK);
}

 

- 리포지터리에 페이지 파라미터 전달

// ImageService.java
@Transactional(readOnly = true)
public Page<Image> 이미지스토리(int principalId, Pageable pageable){
    Page<Image> images = imageRepository.mStory(principalId,pageable);
    return images;
}

 

-리포지터리에서 인자받기 및 쿼리로 ORDER BY (NativeQuery라서)

// ImageRepository.java
@Query(value="SELECT * FROM image WHERE userId IN 
(SELECT toUserId FROM subscribe WHERE fromuserId=:principalId)
ORDER BY id DESC;",nativeQuery=true)
    Page<Image> mStory(int principalId, Pageable pageable);

 

---

 

3. 스크롤 페이징 로딩 구현

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

function storyLoad() {
	$.ajax({
		url:`/api/image?page=${page}`,
		dataType:"json",
...


// (2) 스토리 스크롤 페이징하기
$(window).scroll(() => {
	//console.log("윈도우 scrollTop",$(window).scrollTop());
	//console.log("문서의 높이",$(document).height());
	//console.log("윈도우 높이",$(window).height);

	let checkNum = $(window).scrollTop() - ($(document).height - $(window).height());

	if(checkNum<1 && checkNum > -1){
		page++;
		storyLoad();
	}

});