Merge pull request #53 from moonwonki/master

페이지네이션 URL 및 js 구현
kookmin-sw · May 11, 2024 · 954d234 · 954d234
2 parents 87d008e + ede47b5
commit 954d234
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 5 deletions.
diff --git a/src/main/java/com/example/WebOrder/controller/ItemController.java b/src/main/java/com/example/WebOrder/controller/ItemController.java
@@ -43,9 +43,10 @@ public String getWholeMenuByOwner(Model model){
 
     //메뉴 상세보기
     @GetMapping("/admin/item/detail/{itemId}")
-    public String getMenuByOwner(@PathVariable("itemId") Long itemId, Model model) {
+    public String getMenuByOwner(@PathVariable("itemId") Long itemId, Model model, @RequestParam(name="page", defaultValue = "1") Integer page) {
         model.addAttribute("itemInfo", itemService.getItemInfoById(itemId));
-        model.addAttribute("reviewList", reviewService.getReviewsOfItem(itemId, PageRequest.of(0, 10, Sort.Direction.DESC, "id")));
+        model.addAttribute("reviewList", reviewService.getReviewsOfItem(itemId, PageRequest.of(page - 1, 10, Sort.Direction.DESC, "id")));
+        model.addAttribute("totalPage", reviewService.getNumberOfPages(itemId));
         return "item/itemDetail";
     }
 

diff --git a/src/main/java/com/example/WebOrder/controller/ReviewController.java b/src/main/java/com/example/WebOrder/controller/ReviewController.java
@@ -39,6 +39,16 @@ public List<ReviewDto> getReviewOfItem( @PathVariable("itemId") Long itemId, @Re
         return reviewsOfItem;
     }
 
+    @ResponseBody
+    @GetMapping("/review/page/{itemId}")
+    public Integer getReviewPageNumberOfItem( @PathVariable("itemId") Long itemId, @RequestParam(name="page", defaultValue = "1") Integer page){
+        Pageable pageable = PageRequest.of(page - 1, 10, Sort.Direction.DESC, "id");
+
+        Integer pageNumber =  reviewService.getReviewPageOfItem(itemId, pageable).getTotalPages();
+
+        return pageNumber;
+    }
+
     // 쿠키를 분석해서 주문한 메뉴의 리스트를 보여주는 페이지
     @GetMapping("/review/menu/{userId}")
     public String getReviewMenuPage(HttpServletRequest request, Model model, @PathVariable("userId") Long userId){

diff --git a/src/main/java/com/example/WebOrder/service/ReviewService.java b/src/main/java/com/example/WebOrder/service/ReviewService.java
@@ -13,6 +13,7 @@
 import jakarta.servlet.http.Cookie;
 import jakarta.servlet.http.HttpServletRequest;
 import lombok.extern.slf4j.Slf4j;
+import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
 import org.springframework.stereotype.Service;
 
@@ -59,6 +60,10 @@ public List<ReviewDto> getReviewsOfItem(Long itemId, Pageable pageable){
         return reviews.stream().map(ReviewDto::fromEntity).toList();
     }
 
+    public Page<Review> getReviewPageOfItem(Long itemId, Pageable pageable){
+        return reviewRepository.findByItemId(itemId, pageable);
+    }
+
 
     // 주문할 때, 주문 내역에 해당하는 item id를 쿠키로 생성하는 코드.
     // 리뷰 서비스에 활용 됨.

diff --git a/src/main/resources/static/css/itemDetail.css b/src/main/resources/static/css/itemDetail.css
@@ -131,4 +131,35 @@
     background-color: #ffffff;
     border-radius: 10px;
     padding: 20px;
+}
+
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    padding: 0;
+}
+
+.page-item {
+    margin: 0 5px;
+}
+
+.page-link {
+    display: inline-block;
+    padding: 5px 10px;
+    color: #030302; /* 기본 색상 설정 */
+    text-decoration: none;
+    border: 1px solid #f9ea85; /* 테두리 설정 */
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.page-link:hover {
+    background-color: #f9ea85; /* 호버 시 배경색 변경 */
+    color: #333; /* 호버 시 텍스트 색상 변경 */
+}
+
+#pagedown, #pageup {
+    margin-right: 5px; /* 좌우 마진 설정 */
 }
diff --git a/src/main/resources/static/css/orderForm.css b/src/main/resources/static/css/orderForm.css
@@ -433,3 +433,36 @@ button.order-btn {
     opacity: 1;
     visibility: visible;
 }
+
+
+/* Pagination 스타일 */
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 20%;
+}
+
+.page-item {
+    list-style: none;
+    margin: 0 5px;
+}
+
+.page-link {
+    color: #f9ea85;
+    text-decoration: none;
+    padding: 8px 12px;
+    border: 1px solid #f9ea85;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.page-link:hover {
+    background-color: #f9ea85;
+    color: #fff;
+}
+
+.page-item.active .page-link {
+    background-color: #f9ea85;
+    color: #fff;
+    border-color: #f9ea85;
+}
diff --git a/src/main/resources/templates/item/itemDetail.html b/src/main/resources/templates/item/itemDetail.html
@@ -42,8 +42,48 @@
                     <div class="menu-review-rate" th:text="${review.rate}">4.0</div>
                     <div class="menu-review-comment" th:text="${review.comment}">너무 맛있어요.</div>
                 </div>
+                <ul class="pagination">
+                    <li class="page-item">
+                        <a class="page-link" id="pagedown" th:attr="itemId=${itemId}" onclick="pageDown(this)"><</a>
+                        <a class="page-link" id="pageup" th:attr="itemId=${itemId}" onclick="pageUp(this)">></a>
+                    </li>
+                </ul>
             </div>
 
+            <script>
+                let currentPage = 1;
+                let urlParams = new URLSearchParams(window.location.search);
+                if (urlParams.has("page")){
+                    currentPage = parseInt(urlParams.get('page'));
+                    if (isNaN(currentPage) || currentPage <= 0) {
+                        currentPage = 1; // 파라미터가 숫자가 아니거나 1 이하일 경우 기본값으로 설정
+                    }
+                }
+                let totalPage = [[${totalPage}]];
+
+                function pageDown(element){
+                    if (currentPage == 1){
+                        return;
+                    }
+                    else {
+                        currentPage -= 1;
+                    }
+                    let itemId = element.getAttribute("itemId");
+                    window.location.href = '/admin/item/detail/' + itemId.toString() + '?page=' + currentPage;
+                }
+
+                function pageUp(element){
+                    if (currentPage == totalPage ){
+                        return;
+                    }
+                    else  {
+                        currentPage += 1;
+                    }
+                    let itemId = element.getAttribute('itemId');
+                    window.location.href = '/admin/item/detail/' + itemId.toString() + '?page=' + currentPage;
+                }
+            </script>
+
             <!--메뉴 버튼-->
             <form class="menu-bottom" th:action="@{'/admin/item/delete/' + ${itemInfo.itemId}}" th:method="post">
                 <a href="#" class="stop-btn">메뉴 중지</a>

diff --git a/src/main/resources/templates/order/orderForm.html b/src/main/resources/templates/order/orderForm.html
@@ -116,6 +116,12 @@ <h1 class="itemName">이름</h1>
                         </div>
                     </div>
                 </div>
+                <ul class="pagination">
+                    <li class="page-item">
+                        <a class="page-link" id="pagedown" onclick="pageDown(this)"><</a>
+                        <a class="page-link" id="pageup" onclick="pageUp(this)">></a>
+                    </li>
+                </ul>
             </div>
         </div>
 
@@ -145,6 +151,8 @@ <h1 class="heading">장바구니</h1>
 
     <script th:src="@{/js/orderForm.js}"></script>
     <script th:inline="javascript">
+        let currentPage = 1;
+        let totalPage = 1;
         let items = [[${items}]];
         const details = document.querySelector(".item-details");
         async function showItemDetail(element) {
@@ -155,13 +163,58 @@ <h1 class="heading">장바구니</h1>
             details.querySelector(".itemName").innerHTML = item.name;
             details.querySelector(".description").innerHTML = item.description;
             details.querySelector(".price").innerHTML = item.price + '원';
-            await getReview(itemId);
+            document.querySelector("#pagedown").setAttribute("itemId", itemId.toString());
+            document.querySelector("#pageup").setAttribute("itemId", itemId.toString());
+            await getTotalPageOfReview(itemId);
+            await getReview(itemId, currentPage);
         }
 
-        async function getReview(itemId){
+        async function getTotalPageOfReview(itemId){
+            await fetch('/review/page/' + itemId.toString(), {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include'
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.text(); // JSON으로 파싱된 응답 반환
+                })
+                .then(result => {
+                    totalPage = result;
+                });
+        }
+
+        async function pageDown(element){
+            let itemId = parseInt(element.getAttribute("itemId"));
+            if (currentPage == 1) {
+                await getReview(itemId, currentPage);
+            }
+            else {
+                currentPage -= 1;
+                await getReview(itemId, currentPage);
+            }
+        }
+
+        async function pageUp(element) {
+            let itemId = parseInt(element.getAttribute("itemId"));
+            if (currentPage == totalPage) {
+                await getReview(itemId, currentPage);
+            }
+            else {
+                currentPage += 1;
+                await getReview(itemId, currentPage);
+            }
+        }
+
+
+        async function getReview(itemId, page){
             const details = document.querySelector(".reviews");
             details.innerHTML = '';
-            await fetch('/review/get/'+ itemId.toString(), {
+            await fetch('/review/get/'+ itemId.toString() + '?page=' + page.toString(), {
                 method: 'GET',
                 headers: {
                     'Content-Type': 'application/json'