From e2efeab20d41e1e2a940120176b7342af888998c Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Wed, 29 May 2024 03:08:44 +0900
Subject: [PATCH] =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20-=20=ED=98=84=EC=9E=AC=EC=B0=B8=EC=97=AC?=
 =?UTF-8?q?=EC=9D=B8=EC=9B=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/live.js             |  4 ++--
 src/views/Live/LiveList.vue | 40 ++++++++++++++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/api/live.js b/src/api/live.js
index 72652d7..7678094 100644
--- a/src/api/live.js
+++ b/src/api/live.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 
-async function getLive() {
-    return Vue.axios.get('/admin/live')
+async function getLive(page, size) {
+    return Vue.axios.get('/admin/live?page=' + (page - 1) + '&size=' + size)
 }
 
 export { getLive }
diff --git a/src/views/Live/LiveList.vue b/src/views/Live/LiveList.vue
index eb0ffc2..dc4d7bc 100644
--- a/src/views/Live/LiveList.vue
+++ b/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 || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }