src/App.vue

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

src/api/audio_content_series.js

@@ -55,13 +55,6 @@ async function removeContentInTheSeries(seriesId, contentId) {
     )
 }
 
-async function updateSeriesOrders(ids) {
-    return Vue.axios.put(
-        "/creator-admin/audio-content/series/orders",
-        {ids: ids}
-    )
-}
-
 export {
     getGenreList,
     getSeriesList,
@@ -69,7 +62,6 @@ export {
     modifySeries,
     getSeriesDetail,
     getSeriesContent,
-    updateSeriesOrders,
     addingContentToTheSeries,
     removeContentInTheSeries,
     searchContentNotInSeries

src/views/Content/ContentSeriesList.vue

@@ -22,54 +22,44 @@
           </v-btn>
         </v-col>
       </v-row>
-      <div
+      <v-row>
-        ref="scroll_container"
+        <v-col
-        class="scroll_container"
+          v-for="(item, i) in series_list"
-        @scroll="onScroll"
+          :key="i"
-      >
+          cols="3"
-        <draggable
-          v-model="series_list"
-          class="row"
-          @end="onDropCallback(series_list)"
         >
-          <v-col
+          <v-card>
-            v-for="(item, i) in series_list"
+            <v-card-title>
-            :key="i"
+              <v-spacer />
-            cols="3"
+              <v-img
-          >
+                :src="item.coverImageUrl"
-            <v-card>
+                class="cover-image"
-              <v-card-title>
+                @click="selectSeries(item)"
-                <v-spacer />
+              />
-                <v-img
+              <v-spacer />
-                  :src="item.coverImageUrl"
+            </v-card-title>
-                  class="cover-image"
+            <v-card-text class="series-title-container">
-                  @click="selectSeries(item)"
+              {{ item.title }}
-                />
+            </v-card-text>
-                <v-spacer />
+            <v-card-actions>
-              </v-card-title>
+              <v-spacer />
-              <v-card-text class="series-title-container">
+              <v-btn
-                {{ item.title }}
+                text
-              </v-card-text>
+                @click="showModifyDialog(item)"
-              <v-card-actions>
+              >
-                <v-spacer />
+                수정
-                <v-btn
+              </v-btn>
-                  text
+              <v-btn
-                  @click="showModifyDialog(item)"
+                text
-                >
+                @click="deleteConfirm(item)"
-                  수정
+              >
-                </v-btn>
+                삭제
-                <v-btn
+              </v-btn>
-                  text
+              <v-spacer />
-                  @click="deleteConfirm(item)"
+            </v-card-actions>
-                >
+          </v-card>
-                  삭제
+        </v-col>
-                </v-btn>
+      </v-row>
-                <v-spacer />
-              </v-card-actions>
-            </v-card>
-          </v-col>
-        </draggable>
-      </div>
     </v-container>
 
     <v-dialog
@@ -355,11 +345,10 @@
 
 <script>
 import * as api from '@/api/audio_content_series';
-import Draggable from "vuedraggable";
 
 export default {
   name: "ContentSeriesList",
-  components: {Draggable},
+
   data() {
     return {
       is_loading: false,
@@ -389,14 +378,6 @@ 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) {
@@ -504,18 +485,8 @@ export default {
       this.$router.push({name: 'ContentSeriesDetail', params: {seriesId: series.seriesId}})
     },
 
-    async onDropCallback(items) {
-      const ids = items.map((item) => {
-        return item.seriesId
-      })
-
-      const res = await api.updateSeriesOrders(ids)
-      if (res.status === 200 && res.data.success === true) {
-        this.notifySuccess(res.data.message)
-      }
-    },
-
     async getSeriesGenreList() {
+      this.is_loading = true
       try {
         const res = await api.getGenreList()
         if (res.status === 200 && res.data.success === true) {
@@ -525,24 +496,23 @@ 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)
 
-          if (this.page === 1) this.series_list.length = 0;
+          const total_page = Math.ceil(data.totalCount / 20)
-          this.page += 1;
+          this.series_list = data.items
-          this.series_list.push(...data.items);
 
           if (total_page <= 0)
             this.total_page = 1
@@ -695,11 +665,6 @@ export default {
 </script>
 
 <style scoped>
-.scroll_container {
-  height: 100vh;
-  overflow-y: auto;
-}
-
 .image-select label {
   display: inline-block;
   padding: 10px 20px;