src/api/live.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 
-async function getLive() {
+async function getLive(page, size) {
-    return Vue.axios.get('/admin/live')
+    return Vue.axios.get('/admin/live?page=' + (page - 1) + '&size=' + size)
 }
 
 export { getLive }

src/views/Live/LiveList.vue

@@ -31,6 +31,10 @@
               {{ item.content }}
             </template>
 
+            <template v-slot:item.numberOfParticipants="{ item }">
+              {{ item.numberOfParticipants }}
+            </template>
+
             <template v-slot:item.nickname="{ item }">
               {{ item.managerNickname }}
             </template>
@@ -55,7 +59,7 @@
               <span v-else>공개</span>
             </template>
 
-            <template v-slot:item.nickname="{ item }">
+            <template v-slot:item.password="{ item }">
               {{ item.password }}
             </template>
 
@@ -66,6 +70,16 @@
           </v-data-table>
         </v-col>
       </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
     </v-container>
   </div>
 </template>
@@ -79,6 +93,9 @@ export default {
   data() {
     return {
       isLoading: false,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
       liveList: [],
       headers: [
         {
@@ -99,6 +116,12 @@ export default {
           sortable: false,
           value: 'content',
         },
+        {
+          text: '현재참여인원',
+          align: 'center',
+          sortable: false,
+          value: 'numberOfParticipants',
+        },
         {
           text: '방장',
           align: 'center',
@@ -152,16 +175,27 @@ export default {
       this.$dialog.notify.success(message)
     },
 
+    async next() {
+      await this.getLive()
+    },
+
     async getLive() {
       this.isLoading = true
 
       try {
         this.isLoading = false
 
-        const res = await api.getLive()
+        const res = await api.getLive(this.page, this.page_size)
 
         if (res.status === 200 && res.data.success === true) {
-          this.liveList = res.data.data.liveList
+          const data = res.data.data;
+          const totalPage = Math.ceil(data.totalCount / this.page_size)
+          this.liveList = data.liveList
+
+          if (totalPage <= 0)
+            this.total_page = 1
+          else
+            this.total_page = totalPage
         } else {
           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }