[Photogram] 인기 페이지 구현

• 이번시간에는 사용자가 좋아요 표시를 한 글들을 좋아요가 많은 순서대로 출력하여 보여주는 페이지를 구현해보려고 합니다.

---

📝 Repository

• 이를 위해 먼저 아래와 같이 네이티브 쿼리를 작성해주었습니다.

package com.cos.photogram.domain.image;

...

public interface ImageRepository extends JpaRepository<Image, Long>{

	...
	
	@Query(value = "SELECT i.* FROM image i INNER JOIN (SELECT image_id, COUNT(image_id) like_count FROM likes GROUP BY image_id) c ON i.id = c.image_id ORDER BY like_count DESC", nativeQuery = true)
	List<Image> popular();
}

• 해당 쿼리는 image 테이블과 likes 테이블을 조인하여 GROUP BY와 COUNT, ORDER BY를 통해 좋아요 개수에 따른 정렬을 수행한 뒤 image 테이블에 대한 정보만 뽑아내어 테이블을 구성합니다. 따라서 ImageRepository에서 해당 함수를 실행할 수 있습니다.

---

📝 Service

package com.cos.photogram.service;

...

@RequiredArgsConstructor
@Service
public class ImageService {

	private final ImageRepository imageRepository;
	
	...
	
	@Transactional(readOnly = true)
	public List<Image> popular() {
		return imageRepository.popular();
	}
}

---

📝 Controller

• 해당 페이지가 요청될 때 Model 객체에 해당 페이지에 출력될 이미지들을 저장하여 View 페이지로 전달하는 방식을 사용하였습니다.

@GetMapping("/image/popular")
public String popular(Model model) {
    List<Image> images = imageService.popular();
    model.addAttribute("images", images);

    return "image/popular";
}

---

📝 View

• View 페이지는 아래와 같이 구현되어있습니다.

<!--인기게시글 갤러리(GRID배치)-->
<div class="popular-gallery">
    <c:forEach var="image" items="${images}">
        <div class="p-img-box">
            <a href="/user/${image.user.id}"> <img src="/upload/${image.post_image_url}" />
            </a>
        </div>
    </c:forEach>
</div>

---

GitHub - Daegwon-Kim/SpringBoot-Photogram