pagination 작업중

src/front/src/pages/articles/List.vue

@@ -12,7 +12,7 @@
 
             <div class="paginatior-wrapper" v-if="pages">
                 <ul class="clearfix">
-                    <li v-for="page in pages" v-bind:key="page" v-bind:class="{active: isActivePage(page)}">
+                    <li v-for="page in pages.range" v-bind:key="page" v-bind:class="{active: isActivePage(page)}">
                         <router-link :to="{ path: '/articles', query: { page: page - 1 }}" v-if="typeof(page) === 'number'">
                             {{ page }}
                         </router-link>
@@ -47,6 +47,7 @@
     import articleService from "../../services/articleService";
     import Header from '../../components/common/Header';
     import paginationUtil from "../../utils/paginationUtil";
+    import paginationUtil2 from "../../utils/paginationUtil2";
 
     export default {
         name: "List",
@@ -94,9 +95,16 @@
 
                 const page = +this.$route.query.page || 0;
                 const data = await articleService.getArticles({page});
-                const {content, totalPages} = data;
+                const {content, totalPages, pageable} = data;
 
-                this.pages = paginationUtil(page, totalPages);
+                // console.log(page, totalPages);
+
+                // this.pages = paginationUtil(page, totalPages);
+                // const pages2 = paginationUtil2(page, totalPages, 3);
+
+                this.pages = paginationUtil2(page + 1, totalPages);
+
+                console.log('');
 
                 this.articles = content;
                 this.pending = false;

src/front/src/utils/paginationUtil2.js

@@ -0,0 +1,77 @@
+
+export default function (currentPage, totalPage, chapterSize = 5) {
+
+    // first = 1, totalPage = 16, chapterSize = 5
+
+    // currentPage = 1
+    // [1,2,3,4,5]
+
+    // currentPage = 2
+    // [1,2,3,4,5]
+
+    // currentPage = 3
+    // [1,2,3,4,5]
+
+    // currentPage = 4
+    // [2,3,4,5,6]
+
+
+    // currentPage가 chapterSize의 중간 값(반올림)보다 작으면
+
+    // currentPage 1 => left -0, right +4
+    // currentPage 2 => left -1, right +3
+
+    const halfOfChapterSize = Math.ceil(chapterSize / 2);
+    const halfOfLastChapter = totalPage - halfOfChapterSize + 1;
+    let extra = chapterSize - 1;
+
+    let start;
+    let end;
+
+    if (currentPage < halfOfChapterSize) {
+        start = currentPage + (1 - currentPage);
+        end = currentPage + halfOfChapterSize + (halfOfChapterSize - currentPage);
+    } else if (currentPage > halfOfLastChapter) {
+        // halfOfLastChapter = 14;
+        extra = extra - (totalPage - currentPage);
+        start = currentPage + (totalPage - currentPage);
+        end = currentPage - extra;
+    } else {
+        start = currentPage - extra / 2;
+        end = currentPage + (extra / 2);
+        console.log(start,end);
+    }
+
+    // currentPage 12
+    // [10,11,12,13,14]
+
+    // currentPage 13
+    // [11,12,13,14,15]
+
+    // currentPage 14
+    // [12,13,14,15,16]
+
+    // currentPage 15
+    // [12,13,14,15,16]
+
+    // currentPage 16
+    // [12,13,14,15,16]
+
+    // currentPage가 totalPage - halfOfChapterSize + 1 (14) 보다 크면
+
+    // currentPage 15 => left -3, right +1
+    // currentPage 16 => left -4, right +0
+
+    const range = [];
+
+    for (let i = start; i < end; i++) {
+        range.push(i);
+    }
+
+    return {
+        range,
+        isPrev: currentPage > 0,
+        isNext: currentPage < totalPage - 1
+    }
+
+}

src/main/java/com/example/vue/domain/article/ArticleService.java

@@ -17,9 +17,7 @@ public class ArticleService {
     private final ArticleRepository articleRepository;
 
     public ArticleResponseDto save(ArticleRequestDto articleRequestDto, User user) {
-
         Article article = articleRepository.save(new Article(articleRequestDto, user));
-
         return new ArticleResponseDto(article, user);
     }
 
@@ -30,7 +28,6 @@ public class ArticleService {
         }
 
         article.update(articleRequestDto);
-
         return new ArticleResponseDto(articleRepository.save(article), user);
     }