시리즈 관리 - scroll infinite loading으로 paging 처리

src/App.vue

@@ -38,4 +38,12 @@
     }
   }
 }
+
+html::-webkit-scrollbar, body::-webkit-scrollbar {
+  overflow-y: hidden;
+}
+
+html, body {
+  overflow-y: hidden;
+}
 </style>

src/views/Content/ContentSeriesList.vue

@@ -22,7 +22,11 @@
           </v-btn>
         </v-col>
       </v-row>
-      <v-row>
+      <v-row
+        ref="scroll_container"
+        class="scroll_container"
+        @scroll="onScroll"
+      >
         <v-col
           v-for="(item, i) in series_list"
           :key="i"
@@ -378,6 +382,14 @@ export default {
   },
 
   methods: {
+    async onScroll() {
+      const scrollContainer = this.$refs.scroll_container;
+      const threshold = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+      if (scrollContainer.scrollTop >= threshold - 10 && this.total_page >= this.page) {
+        await this.getSeriesList();
+      }
+    },
+
     imageAdd(payload) {
       const file = payload;
       if (file) {
@@ -486,7 +498,6 @@ export default {
     },
 
     async getSeriesGenreList() {
-      this.is_loading = true
       try {
         const res = await api.getGenreList()
         if (res.status === 200 && res.data.success === true) {
@@ -496,23 +507,24 @@ export default {
         } else {
           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }
-
-        this.is_loading = false
       } catch (e) {
         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-        this.is_loading = false
       }
     },
 
     async getSeriesList() {
+      if (this.is_loading) return;
+
       this.is_loading = true
       try {
         const res = await api.getSeriesList(this.page)
         if (res.status === 200 && res.data.success === true) {
           const data = res.data.data
+          const total_page = Math.ceil(data.totalCount / 10)
 
-          const total_page = Math.ceil(data.totalCount / 20)
+          if (this.page === 1) this.series_list.length = 0;
-          this.series_list = data.items
+          this.page += 1;
+          this.series_list.push(...data.items);
 
           if (total_page <= 0)
             this.total_page = 1
@@ -665,6 +677,11 @@ export default {
 </script>
 
 <style scoped>
+.scroll_container {
+  height: 100vh;
+  overflow-y: auto;
+}
+
 .image-select label {
   display: inline-block;
   padding: 10px 20px;