first commit

src/views/Live/LiveList.vue

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>라이브 관리 (진행예정 / 진행중)</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="liveList"
+            :loading="isLoading"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template v-slot:item.id="{ item }">
+              {{ item.id }}
+            </template>
+
+            <template v-slot:item.title="{ item }">
+              {{ item.title }}
+            </template>
+
+            <template v-slot:item.content="{ item }">
+              {{ item.content }}
+            </template>
+
+            <template v-slot:item.nickname="{ item }">
+              {{ item.managerNickname }}
+            </template>
+
+            <template v-slot:item.cover="{ item }">
+              <img
+                :src="item.coverImageUrl"
+                alt=""
+                height="100"
+                width="100"
+              >
+            </template>
+
+            <template v-slot:item.ing="{ item }">
+              <span v-if="item.channelName.length > 0">진행중</span>
+              <span v-else>진행예정</span>
+            </template>
+
+            <template v-slot:item.type="{ item }">
+              <span v-if="item.type === 'SECRET'">비밀</span>
+              <span v-else-if="item.type === 'PRIVATE'">비공개</span>
+              <span v-else>공개</span>
+            </template>
+
+            <template v-slot:item.nickname="{ item }">
+              {{ item.password }}
+            </template>
+
+            <template v-slot:item.isAdult="{ item }">
+              <span v-if="item.isAdult">O</span>
+              <span v-else>X</span>
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from "@/api/live"
+
+export default {
+  name: "LiveRoom",
+
+  data() {
+    return {
+      isLoading: false,
+      liveList: [],
+      headers: [
+        {
+          text: '방번호',
+          align: 'center',
+          sortable: false,
+          value: 'id',
+        },
+        {
+          text: '타이틀',
+          align: 'center',
+          sortable: false,
+          value: 'title',
+        },
+        {
+          text: '공지',
+          align: 'center',
+          sortable: false,
+          value: 'content',
+        },
+        {
+          text: '방장',
+          align: 'center',
+          sortable: false,
+          value: 'managerNickname',
+        },
+        {
+          text: '커버이미지',
+          align: 'center',
+          sortable: false,
+          value: 'cover',
+        },
+        {
+          text: '진행여부',
+          align: 'center',
+          sortable: false,
+          value: 'ing',
+        },
+        {
+          text: '공개여부',
+          align: 'center',
+          sortable: false,
+          value: 'type',
+        },
+        {
+          text: '비밀번호',
+          align: 'center',
+          sortable: false,
+          value: 'password',
+        },
+        {
+          text: '19금',
+          align: 'center',
+          sortable: false,
+          value: 'isAdult',
+        },
+      ],
+    }
+  },
+
+  async created() {
+    await this.getLive()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async getLive() {
+      this.isLoading = true
+
+      try {
+        this.isLoading = false
+
+        const res = await api.getLive()
+
+        if (res.status === 200 && res.data.success === true) {
+          this.liveList = res.data.data.liveList
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.isLoading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.isLoading = false
+      }
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>