콘텐츠 배너 등록/수정 레이어 팝업

- 탭 추가

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"
@@ -75,6 +89,26 @@
         <v-card-title v-else>
           배너 등록
         </v-card-title>
+        <v-card-text>
+          <v-row align="center">
+            <v-col cols="4">
+              메인 탭
+            </v-col>
+            <v-col cols="8">
+              <v-radio-group
+                v-model="banner.tab_id"
+                row
+              >
+                <v-radio
+                  v-for="tab in tabs"
+                  :key="tab.tabId"
+                  :label="tab.title"
+                  :value="tab.tabId"
+                />
+              </v-radio-group>
+            </v-col>
+          </v-row>
+        </v-card-text>
         <v-card-text>
           <v-row align="center">
             <v-col cols="4">
@@ -293,13 +327,15 @@ export default {
             show_write_dialog: false,
             show_delete_confirm_dialog: false,
             selected_banner: {},
-            banner: {type: 'CREATOR'},
+            banner: {type: 'CREATOR', tab_id: 1},
             banners: [],
             events: [],
             creators: [],
             series: [],
             search_query_creator: '',
             search_query_series: '',
+            tabs: [],
+            selected_tab_id: 1
         }
     },
 
@@ -319,7 +355,7 @@ export default {
 
     async created() {
         await this.getEvents()
-        await this.getBanners()
+        await this.getAudioContentMainTabList()
     },
 
     mounted() {
@@ -343,7 +379,7 @@ export default {
             this.is_selecting = false
             this.show_write_dialog = false
             this.show_delete_confirm_dialog = false
-            this.banner = {type: 'CREATOR'}
+            this.banner = {type: 'CREATOR', tab_id: 1}
             this.selected_banner = {}
             this.search_query_creator = ''
             this.search_query_series = ''
@@ -357,6 +393,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
@@ -374,6 +431,7 @@ export default {
             this.banner.series_title = banner.seriesTitle
             this.banner.link = banner.link
             this.banner.is_adult = banner.isAdult
+            this.banner.tab_id = banner.tabId
 
             setTimeout(() => {
               this.is_selecting = false; // 선택 상태 해제
@@ -452,6 +510,10 @@ export default {
                   request.seriesId = this.banner.series_id
                 }
 
+                if (this.banner.tab_id !== 1) {
+                  request.tabId = this.banner.tab_id
+                }
+
                 formData.append("request", JSON.stringify(request))
 
                 const res = await api.saveBanner(formData)
@@ -523,6 +585,10 @@ export default {
                     request.isAdult = this.banner.is_adult
                 }
 
+                if (this.selected_banner.tabId !== this.banner.tab_id) {
+                  request.tabId = this.banner.tab_id
+                }
+
                 formData.append("request", JSON.stringify(request))
 
                 const res = await api.modifyBanner(formData)
@@ -680,7 +746,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 {