이미지와 유저정보를 들고 와서 1차로 뿌리자.
먼저 로그인된 유저정보와 이미지는 필요없다. 내가 로그인을 한것이기 때문에 내정보가아닌 내가 구독한 다른 사람의 유저정보와 이미지들이 들고 와져야 한다. 즉 2번이 로그인을 했다고 가정하고 1,3번의 스토리 페이지가 불러와져야 한다.
알맞은 유저정보와 이미지를 들고오는 쿼리는 다음과 같다
SELECT * FROM image WHERE userId IN (SELECT toUserId FROM subscribe WHERE fromUserId = 2);
2번이라고 가정하고 1,3 번 구독 유저의 정보와 이미지를 들고 온다.
Image.java 클래스가 이미 이미지에대한 클래스이기 때문에 User.java에서 이미지를 들고 올 필요가 없고 Image만 사용해서 이미지 + 유저정보만 들고 오면 된다
*Image.java에 무한참조 방지
@JsonIgnoreProperties({"images"})
@JoinColumn(name="userId")
@ManyToOne(fetch = FetchType.EAGER)
private User user;
무한참조 방지 세팅 이후 쿼리를 작동 시키기 위한 ImageRepository 세팅
public interface ImageRepository extends JpaRepository<Image, Integer>{
@Query(value="SELECT * FROM image WHERE userId IN
(SELECT toUserId FROM subscribe WHERE fromUserId = :principalId);", nativeQuery = true)
List<Image> mStroy(int principalId);
}
이를 호출하는 API 컨트롤러 세팅
@RequiredArgsConstructor
@RestController
public class ImageApiController {
private final ImageService imageService;
@GetMapping("/api/image")
public ResponseEntity<?> imageStroy(@AuthenticationPrincipal PrincipalDetails principalDetails){
List<Image> images = imageService.imageStroy(principalDetails.getUser().getId());
return new ResponseEntity<>(new CMRespDto<>(1, "성공", images), HttpStatus.OK);
}
}
public interface ImageRepository extends JpaRepository<Image, Integer>{
@Query(value="SELECT * FROM image WHERE userId IN
(SELECT toUserId FROM subscribe WHERE fromUserId = :principalId) ORDER BY id DESC",
nativeQuery = true)
Page<Image> mStroy(int principalId, Pageable pageable);
}
story.js 에서 로드 함수 포이치를 data가 아닌 content로 전환
function storyLoad() {
$.ajax({
url:`/api/image`,
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();
04 스크롤 페이징
story.js에서 스크롤 페이징 함수 정의가 필요한데 그전에 스크롤의 높이, 문서의 높이, 윈도우의 높이가 필요하다
