[최종 프로젝트] VIEW 상품 상세 페이지네이션

VIEW 상품 상세 페이지네이션

프로젝트 구현 기능: 상품 상세 페이지에서 상품과 해당되는 상품의 후기들이 함께 출력

직접 구현한 부분: 후기가 출력될때의 페이지네이션

 

 

기능 설명

상품 상세 페이지에서 상품과 해당되는 상품의 후기들이 함께 출력
저는 해당 기능에서 후기가 출력될때 페이징되는 부분을 구현

 

상품 상세 페이지에 진입시 상품의 하단에 해당되는 상품의 후기가 4개씩 출력

더 보여줄 후기가 있을시 더보기 버튼을 활성화하여 추가로 후기를 하단에 출력하여 보여질 수 있도록 함

더 보여줄 후기가 존재하지 않을시 더보기 버튼이 보이지 않도록 구현

 

기획의도

set 구조가 JDBC Template 방식에 비효율적이기 때문에 페이징 방식 변경

 

기존의 다른 상품 목록이나 후기 목록 같은 경우에는 컨트롤러에서 페이징을 담당하여 구현
VIEW에서도 구현을 하고 싶어 해당 방식으로 구현

 

코드 구현

<c:set var="reviewSize" value="${ fn:length(reviewDatas) }"/>
<c:set var="endRnum" value="4"/>
<c:forEach var="reviewData" items="${ reviewDatas }" begin="0" end="${ reviewSize }" varStatus="status">
	<div id="${ status.index }" class="col-md-6 col-lg-3 ftco-animate" style="display: none;">
</c:forEach>

먼저 컨트롤러에서 해당 상품 페이지로 진입시 상품PK를 통해 해당 상품의 모든 후기 정보를 조회 후
"reviewDatasTotal"이라는 변수명으로 model 객체에 담아 VIEW 까지 전달
VIEW에서는 해당 정보들을 JSTL 라이브러리의  표현식을 활용하여 전부 출력

 

<script>
	$(document).ready(function(){
	var endRnum = ${ endRnum };
	console.log("최초 endRnum: " + endRnum);
		    				
	for (i = 0; i < endRnum; i++){
		document.getElementsByClassName("col-md-6 col-lg-3 ftco-animate")[i].style.display="block";
		console.log("i 확인: "+ i);
	}
		    				
	$('#reviewPlus').click(function(){
		console.log("리뷰 더하기 버튼 클릭 확인");
		
        endRnum += 4;
		console.log("endRnum: " + endRnum);
		    					
		if(endRnum >= ${ reviewSize }){
			console.log("확인2 endRnum: "+ endRnum);
		    var con = document.getElementById("reviewPlus");
		    con.style.display = "none";
		}
		    					
		for (i = 0; i < endRnum; i++){
        	document.getElementsByClassName("col-md-6 col-lg-3 ftco-animate")[i].style.display="block";
			console.log("i 확인: "+ i);
		}    					
	});
		    				
	if(endRnum >= ${ reviewSize }){
		console.log("확인2 endRnum: "+ endRnum);
		var con = document.getElementById("reviewPlus");
		con.style.display = "none";
	}
		    				
	});
</script>

<c:if test="${ endRnum < reviewSize }">
	<p><a id="reviewPlus" class="btn btn-primary py-2 px-3">Read more</a></p>
</c:if>

단 4개씩 보여야 하므로

모든 후기를 출력할때 스타일을 통해 안보이도록 지정한 뒤
JSTL function을 활용하여 넘겨받은 총 후기 데이터들의 사이즈를 구하여 4로 나눈 후
현재 출력된 후기의 수와 비교하여

더 출력할 것이 있으면 더보기 버튼을 보여주고

없다면 더보기 버튼을 보여주지 않도록 구현

 

더보기 버튼을 클릭할 시 

현재 보여주고 있는 리뷰의 갯수를 4씩 증가시키고

해당 수만큼 반복하여 안보이게 하였던 스타일 설정을 제거

 

문제해결

처음 의도한 방식은 데이터를 애초에 보여줄만큼만 출력하도록 하는 것
하지만 위의 방식으로 구현시 문제 발생

JSTL에서 설정한 변수를 스크립트에서 사용할 수 있지만
스크립트에서 연산한 결과를 다시 할당하는 것이 불가한 문제 발생

 

먼저 받아온 데이터를 다 출력한뒤 안보이도록 스타일을 활용하여 가려놓고
더보기 버튼을 클릭시 다시 보이도록하는 방식으로 변경

 

개선점

4개씩 보여줄 데이터의 사이즈가 증가하며 그 크기만큼 for문이 반복되는데
이때 꼭 보여줄 데이터가 4의 배수로 나누어 떨어지는 것이 아니라

스타일 속성 부여시 없는 존재 선택 오류 발생

지금처럼 for문 뒤에 다른 처리를 할 것이 없다면 상관없지만
추후 해당 스크립트 이후에 추가될 코드가 작동하지 않을 수 있으므로
전체 리뷰 사이즈를 같이 가져와 한번 더 비교 후 for문 반복을 하면 좋을 것 같음