src/api/audio_content.js

@@ -19,8 +19,8 @@ async function modifyAudioContent(request) {
     return Vue.axios.put("/admin/audio-content", request)
 }
 
-async function getBannerList() {
-    return Vue.axios.get("/admin/audio-content/banner")
+async function getBannerList(tabId) {
+    return Vue.axios.get("/admin/audio-content/banner?tabId=" + tabId)
 }
 
 async function saveBanner(formData) {
@@ -63,6 +63,10 @@ async function getAudioContentThemeList() {
     return Vue.axios.get("/admin/audio-content/theme")
 }
 
+async function getAudioContentMainTabList() {
+    return Vue.axios.get("/admin/audio-content/main/tab")
+}
+
 export {
     getAudioContentList,
     searchAudioContent,
@@ -75,5 +79,6 @@ export {
     saveCuration,
     modifyCuration,
     updateCurationOrders,
-    getAudioContentThemeList
+    getAudioContentThemeList,
+    getAudioContentMainTabList
 }

src/views/Content/ContentMainTopBanner.vue

@@ -16,11 +16,25 @@
       <template v-slot:activator="{ on, attrs }">
         <v-container>
           <v-row>
-            <v-col cols="10" />
+            <v-col cols="9">
+              <v-radio-group
+                v-model="selected_tab_id"
+                row
+                @change="getBanners"
+              >
+                <v-radio
+                  v-for="tab in tabs"
+                  :key="tab.tabId"
+                  :label="tab.title"
+                  :value="tab.tabId"
+                />
+              </v-radio-group>
+            </v-col>
+            <v-spacer />
             <v-col>
               <v-btn
                 block
-                color="#9970ff"
+                color="#3BB9F1"
                 dark
                 depressed
                 v-bind="attrs"
@@ -300,6 +314,8 @@ export default {
             series: [],
             search_query_creator: '',
             search_query_series: '',
+            tabs: [],
+            selected_tab_id: 1
         }
     },
 
@@ -319,7 +335,7 @@ export default {
 
     async created() {
         await this.getEvents()
-        await this.getBanners()
+        await this.getAudioContentMainTabList()
     },
 
     mounted() {
@@ -357,6 +373,27 @@ export default {
             this.$dialog.notify.success(message)
         },
 
+        async getAudioContentMainTabList() {
+          this.is_loading = true
+
+          try {
+            const res = await api.getAudioContentMainTabList()
+            if (res.status === 200 && res.data.success === true) {
+              const data = res.data.data
+
+              this.tabs = data
+              this.selected_tab_id = data[0].tabId
+              await this.getBanners()
+            } else {
+              this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            }
+          } catch (e) {
+            this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          } finally {
+            this.is_loading = false
+          }
+        },
+
         showModifyBannerDialog(banner) {
             this.is_modify = true
             this.selected_banner = banner
@@ -680,7 +717,7 @@ export default {
         async getBanners() {
             this.is_loading = true
             try {
-                const res = await api.getBannerList()
+                const res = await api.getBannerList(this.selected_tab_id)
                 if (res.status === 200 && res.data.success === true) {
                     this.banners = res.data.data
                 } else {