페이지네이션 구현

frontend/src/components/MainMap.vue

@@ -38,6 +38,7 @@ import Overlay from 'ol/Overlay.js';
 import ProgressSpinner from '@/components/ProgressSpinner.vue';
 import { toLonLat, transform } from 'ol/proj.js';
 import { defaults } from 'ol/control.js';
+import { mapState } from 'vuex';
 
 const EPSG_3857 = 'EPSG:3857';
 const EPSG_4326 = 'EPSG:4326';
@@ -61,15 +62,24 @@ export default {
         };
     },
     computed: {
-        reviews() {
-            return this.$store.state.reviews;
-        },
+        ...mapState({
+            reviewsForMap: (state) => state.reviewsForMap,
+            curReview: (state) => state.curReview,
+            curLon: (state) => state.curLon,
+            curLat: (state) => state.curLat,
+        }),
     },
     watch: {
-        async reviews() {
+        async reviewsForMap() {
             if (this.vectorSource) this.vectorSource.clear();
             this.drawFeatures();
         },
+        curReview() {
+            if (!this.curReview || !this.curLon || !this.curLat) return;
+            const coordinate = [this.curLon, this.curLat];
+            this.olMap.getView().setZoom(18);
+            this.olMap.getView().setCenter(this.coordi4326To3857(coordinate));
+        },
     },
     async mounted() {
         const that = this;
@@ -98,7 +108,7 @@ export default {
             }),
         });
 
-        await this.$store.dispatch('setReviews', this);
+        await this.$store.dispatch('setReviewsForMap', this);
 
         this.drawFeatures();
 
@@ -154,13 +164,9 @@ export default {
             );
 
             const existFeature = that.olMap.forEachFeatureAtPixel(e.pixel, (feature) => {
-                this.$store.commit('setCurTitle', feature.get('title'));
-                this.$store.commit('setCurAddress', feature.get('address'));
-                this.$store.commit('setCurGrade', feature.get('grade'));
-                this.$store.commit('setCurReview', feature.get('review'));
                 this.$store.commit('setCurReviewId', feature.get('reviewId'));
                 this.$store.commit('setIsDisabledInput', true);
-                this.$store.dispatch('setFileList', this);
+                this.$store.dispatch('setReview', this);
                 return true;
             });
 
@@ -200,15 +206,13 @@ export default {
                     src: require('../assets/images/spot.png'),
                 }),
             });
-            const features = this.reviews.map((review) => {
+            const features = this.reviewsForMap.map((review) => {
                 const point = this.coordi4326To3857([review.lon, review.lat]);
                 const feature = new OlFeature({
                     geometry: new OlPoint(point),
                 });
                 feature.set('title', review.title);
                 feature.set('grade', review.grade);
-                feature.set('address', review.address);
-                feature.set('review', review.review);
                 feature.set('reviewId', review.id);
                 feature.setStyle(style);
 

frontend/src/components/ReviewForm.vue

@@ -279,7 +279,7 @@ export default {
 
                 await ok(this, '삭제되었습니다.');
 
-                await this.$store.dispatch('setReviews', this);
+                await this.$store.dispatch('setReviewsByLimit', this);
             });
         },
         saveReview() {
@@ -317,8 +317,7 @@ export default {
                 );
                 await ok(this, '저장 완료되었습니다.');
                 this.fileList = [];
-                await this.$store.dispatch('setReviews', this);
-                await this.$store.dispatch('setFileList', this);
+                await this.$store.dispatch('setReview', this);
                 this.$store.commit('setIsDisabledInput', true);
             });
         },

frontend/src/components/ReviewList.vue

@@ -102,32 +102,75 @@
                 등록된 리뷰가 없습니다.
             </div>
         </div>
+        <div class="pagination-area">
+            <BPagination
+                v-model="curPage"
+                :per-page="countList"
+                :total-rows="reviewsCnt"
+                class="pagination"
+                hide-ellipsis
+                size="sm"
+                @change="changePage"
+            />
+        </div>
+        <ProgressSpinner v-if="processingCount > 0" />
     </div>
 </template>
 
 <script>
+const COUNT_LIST = 10;
+
 import { IMG_DIR_PATH } from '@/common/Config.js';
 import { utcDateStrToVisualLocalDateStr } from '@/common/DateUtil.js';
 import { process } from '@/common/Api.js';
 import { confirm, ok } from '@/common/Dialog.js';
 import axios from 'axios';
+import ProgressSpinner from '@/components/ProgressSpinner.vue';
 
 export default {
     name: 'ReviewList',
     data() {
         return {
+            processingCount: 0,
+
             imgDirPath: IMG_DIR_PATH,
             isEditMode: false,
             checkedReviewIds: [],
             isAllSelected: false,
+
+            // pagination
+            reviewsCnt: 0,
+            countList: COUNT_LIST,
+            curPage: 1,
         };
     },
+    components: {
+        ProgressSpinner,
+    },
     computed: {
         reviews() {
             return this.$store.state.reviews;
         },
     },
+    async created() {
+        await this.setReviewsCnt();
+        await this.setReviews();
+    },
     methods: {
+        changePage(e) {
+            this.curPage = e;
+            this.setReviews();
+        },
+        async setReviewsCnt() {
+            await process(this, async () => {
+                const result = await axios.get('/api/review/getReviewsCnt');
+                this.reviewsCnt = result.data;
+            });
+        },
+        async setReviews() {
+            const payload = { that: this, curPage: this.curPage, countList: this.countList };
+            await this.$store.dispatch('setReviewsByLimit', payload);
+        },
         checkAllReviews() {
             this.checkedReviewIds = [];
             if (this.isAllSelected) this.checkedReviewIds = this.reviews.map((re) => re.id);
@@ -147,7 +190,7 @@ export default {
                 });
 
                 await ok(this, '삭제되었습니다.');
-                await this.$store.dispatch('setReviews', this);
+                await this.$store.dispatch('setReviewsByLimit', this);
                 this.toggleEditMode();
             });
         },
@@ -160,9 +203,9 @@ export default {
             return utcDateStrToVisualLocalDateStr(reviewUpDateStr);
         },
         goToReview(review) {
-            this.$store.commit('setReview', review);
+            this.$store.commit('setCurReviewId', review.id);
             this.$store.commit('setIsVisibleReviewList', false);
-            this.$store.dispatch('setFileList', this);
+            this.$store.dispatch('setReview', this);
         },
     },
 };
@@ -278,5 +321,28 @@ export default {
             font-size: 25px;
         }
     }
+
+    > .pagination-area {
+        > .pagination {
+            background-color: transparent;
+            padding-top: 10px;
+            margin: 0;
+            display: flex;
+            justify-content: center;
+
+            ::v-deep .page-link {
+                background-color: transparent;
+                color: white;
+                border-color: white;
+                box-shadow: unset !important;
+            }
+
+            ::v-deep .page-item.active {
+                box-shadow: unset !important;
+                background-color: $warning;
+                border-color: $warning !important;
+            }
+        }
+    }
 }
 </style>

frontend/src/components/SideBar.vue

@@ -8,8 +8,8 @@
             :width="500"
             class="resizable-side-bar"
         >
-            <ReviewList v-if="isVisibleReviewList" />
-            <ReviewForm v-else />
+            <ReviewList v-show="isVisibleReviewList" />
+            <ReviewForm v-show="!isVisibleReviewList" />
         </VueResizable>
         <BButton
             class="side-bar-active-btn"
@@ -25,7 +25,6 @@
 import VueResizable from 'vue-resizable';
 import ReviewForm from '@/components/ReviewForm.vue';
 import ReviewList from '@/components/ReviewList.vue';
-import { mapState } from 'vuex';
 
 export default {
     name: 'SideBar',
@@ -41,11 +40,9 @@ export default {
         };
     },
     computed: {
-        ...mapState({
-            curReviewId: (state) => state.curReviewId,
-            isDisabledInput: (state) => state.isDisabledInput,
-            isVisibleReviewList: (state) => state.isVisibleReviewList,
-        }),
+        isVisibleReviewList() {
+            return this.$store.state.isVisibleReviewList;
+        },
     },
     methods: {
         showSideBar() {

frontend/src/store/index.js

@@ -8,6 +8,7 @@ Vue.use(Vuex);
 export default new Vuex.Store({
     state: {
         reviews: [],
+        reviewsForMap: [],
         curLon: undefined,
         curLat: undefined,
         curReviewId: undefined,
@@ -39,17 +40,12 @@ export default new Vuex.Store({
         setCurReview: (state, review) => {
             state.curReview = review;
         },
-        setReviews: (state, reviews) => {
-            if (state.reviews && reviews && state.reviews.length !== reviews.length) {
-                const ids = state.reviews.map((re) => re.id);
-                const curReview = reviews.find((review) => !ids.includes(review.id));
-                if (curReview) state.curReviewId = curReview.id;
-            }
+        setReviewsByLimit: (state, reviews) => {
             state.reviews = reviews;
-
-            const review = reviews.find((review) => review.id === state.curReviewId);
-
-            setReview(state, review);
+            setIsVisibleReviewList(state, true);
+        },
+        setReviewsForMap: (state, reviews) => {
+            state.reviewsForMap = reviews;
         },
         setReview: (state, review) => {
             setReview(state, review);
@@ -71,10 +67,32 @@ export default new Vuex.Store({
         },
     },
     actions: {
-        async setReviews({ commit }, that) {
+        async setReview({ state, dispatch }, that) {
+            await process(that, async () => {
+                const result = await axios.get('/api/review/getReview', {
+                    params: {
+                        reviewId: state.curReviewId,
+                    },
+                });
+                setReview(state, result.data);
+                dispatch('setFileList');
+            });
+        },
+        async setReviewsForMap({ commit }, that) {
+            await process(that, async () => {
+                const result = await axios.get('/api/review/getReviewsForMap');
+                await commit('setReviewsForMap', result.data);
+            });
+        },
+        async setReviewsByLimit({ commit }, { that, curPage, countList }) {
             await process(that, async () => {
-                const result = await axios.get('/api/review/getReviews');
-                await commit('setReviews', result.data);
+                const result = await axios.get('/api/review/getReviewsByLimit', {
+                    params: {
+                        curPage: curPage || 1,
+                        countList: countList || 10,
+                    },
+                });
+                await commit('setReviewsByLimit', result.data);
             });
         },
         async setFileList({ commit, state }, that) {

src/main/java/com/map/restaurant/good/controller/ReviewCtrl.java

@@ -26,9 +26,25 @@ public void saveReview(ReviewDTO reviewDTO) {
         fileService.saveFiles(reviewDTO);
     }
 
-    @GetMapping("/getReviews")
-    public List<ReviewDTO> getReviews() {
-        return reviewService.getReviews();
+    @GetMapping("/getReview")
+    public ReviewDTO getReview(@RequestParam String reviewId) {
+        return reviewService.getReview(reviewId);
+    }
+
+    @GetMapping("/getReviewsCnt")
+    public int getReviewsCnt() {
+        return reviewService.getReviewsCnt();
+    }
+
+    @GetMapping("/getReviewsByLimit")
+    public List<ReviewDTO> getReviewsByLimit(@RequestParam Integer curPage,
+                                             @RequestParam Integer countList) {
+        return reviewService.getReviewsByLimit(curPage, countList);
+    }
+
+    @GetMapping("/getReviewsForMap")
+    public List<ReviewDTO> getReviewsForMap() {
+        return reviewService.getReviewsForMap();
     }
 
     @DeleteMapping("/deleteReviews")

src/main/java/com/map/restaurant/good/dao/ReviewDAO.java

@@ -6,6 +6,10 @@
 import java.util.List;
 public interface ReviewDAO {
     void saveReview(ReviewDTO reviewDTO);
-    List<ReviewDTO> getReviews();
+    ReviewDTO getReview(@Param("reviewId") String reviewId);
+    int getReviewsCnt();
+    List<ReviewDTO> getReviewsByLimit(@Param("offset") Integer offset,
+                                      @Param("countList") Integer countList);
+    List<ReviewDTO> getReviewsForMap();
     void deleteReviews(@Param("reviewIds") List<String> reviewIds);
 }

src/main/java/com/map/restaurant/good/service/ReviewService.java

@@ -24,8 +24,21 @@ public void saveReview(ReviewDTO reviewDTO) {
         reviewDAO.saveReview(reviewDTO);
     }
 
-    public List<ReviewDTO> getReviews() {
-        return reviewDAO.getReviews();
+    public int getReviewsCnt() {
+        return reviewDAO.getReviewsCnt();
+    }
+
+    public ReviewDTO getReview(String reviewId) {
+        return reviewDAO.getReview(reviewId);
+    }
+
+    public List<ReviewDTO> getReviewsByLimit(Integer curPage, Integer countList) {
+        Integer offset = (curPage - 1) * countList;
+        return reviewDAO.getReviewsByLimit(offset, countList);
+    }
+
+    public List<ReviewDTO> getReviewsForMap() {
+        return reviewDAO.getReviewsForMap();
     }
 
     @Transactional