feat(series-banner): 배너 등록 언어 선택 추가

- 배너 등록/수정 다이얼로그에 언어 선택(ko/ja/en) UI를 추가
This commit is contained in:
Yu Sung
2026-04-02 15:56:37 +09:00
parent 1fc619dfd0
commit ad5c27abc3
2 changed files with 36 additions and 7 deletions

View File

@@ -43,7 +43,7 @@ async function getSeriesBannerList(page = 1, size = 20) {
async function createSeriesBanner(bannerData) { async function createSeriesBanner(bannerData) {
const formData = new FormData(); const formData = new FormData();
if (bannerData.image) formData.append("image", bannerData.image); if (bannerData.image) formData.append("image", bannerData.image);
const requestData = { seriesId: bannerData.seriesId }; const requestData = { seriesId: bannerData.seriesId, lang: bannerData.lang };
formData.append("request", JSON.stringify(requestData)); formData.append("request", JSON.stringify(requestData));
return Vue.axios.post("/admin/audio-content/series/banner/register", formData, { return Vue.axios.post("/admin/audio-content/series/banner/register", formData, {
headers: { "Content-Type": "multipart/form-data" } headers: { "Content-Type": "multipart/form-data" }

View File

@@ -66,6 +66,14 @@
/> />
<v-card-text class="text-center"> <v-card-text class="text-center">
<div>{{ resolveSeriesTitle(banner) }}</div> <div>{{ resolveSeriesTitle(banner) }}</div>
<v-chip
v-if="banner.lang"
x-small
label
class="mt-1"
>
{{ banner.lang === 'ko' ? '한국어' : banner.lang === 'ja' ? '일본어' : '영어' }}
</v-chip>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer /> <v-spacer />
@@ -146,6 +154,17 @@
/> />
</v-col> </v-col>
</v-row> </v-row>
<v-row v-if="!isEdit">
<v-col cols="12">
<v-select
v-model="bannerForm.lang"
:items="languages"
label="언어 선택"
outlined
:rules="[v => !!v || '언어를 선택하세요']"
/>
</v-col>
</v-row>
<v-row> <v-row>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
@@ -293,11 +312,17 @@ export default {
searchResults: [], searchResults: [],
searchPerformed: false, searchPerformed: false,
previewImage: null, previewImage: null,
languages: [
{ text: '한국어', value: 'ko' },
{ text: '일본어', value: 'ja' },
{ text: '영어', value: 'en' }
],
bannerForm: { bannerForm: {
image: null, image: null,
imageUrl: '', imageUrl: '',
seriesId: null, seriesId: null,
bannerId: null bannerId: null,
lang: 'ko'
}, },
imageRules: [ imageRules: [
v => !!v || this.isEdit || '이미지를 선택하세요' v => !!v || this.isEdit || '이미지를 선택하세요'
@@ -306,7 +331,7 @@ export default {
}, },
computed: { computed: {
isFormValid() { isFormValid() {
return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedSeries return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedSeries && (this.isEdit || this.bannerForm.lang)
} }
}, },
watch: { watch: {
@@ -368,7 +393,7 @@ export default {
showAddDialog() { showAddDialog() {
this.isEdit = false this.isEdit = false
this.selectedSeries = null this.selectedSeries = null
this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null } this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null, lang: 'ko' }
this.previewImage = null this.previewImage = null
this.searchKeyword = '' this.searchKeyword = ''
this.searchResults = [] this.searchResults = []
@@ -387,7 +412,8 @@ export default {
image: null, image: null,
imageUrl: banner.imageUrl || banner.imagePath, imageUrl: banner.imageUrl || banner.imagePath,
seriesId: banner.seriesId, seriesId: banner.seriesId,
bannerId: banner.id bannerId: banner.id,
lang: banner.lang || 'ko'
} }
this.previewImage = null this.previewImage = null
this.searchKeyword = '' this.searchKeyword = ''
@@ -398,7 +424,7 @@ export default {
closeDialog() { closeDialog() {
this.showDialog = false this.showDialog = false
this.selectedSeries = null this.selectedSeries = null
this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null } this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null, lang: 'ko' }
this.previewImage = null this.previewImage = null
this.searchKeyword = '' this.searchKeyword = ''
this.searchResults = [] this.searchResults = []
@@ -450,13 +476,16 @@ export default {
}) })
if (response && response.status === 200 && response.data && response.data.success === true) { if (response && response.status === 200 && response.data && response.data.success === true) {
this.notifySuccess('배너가 수정되었습니다.') this.notifySuccess('배너가 수정되었습니다.')
this.closeDialog()
this.refreshBanners()
} else { } else {
this.notifyError('배너 수정을 실패했습니다.') this.notifyError('배너 수정을 실패했습니다.')
} }
} else { } else {
const response = await createSeriesBanner({ const response = await createSeriesBanner({
image: this.bannerForm.image, image: this.bannerForm.image,
seriesId: this.selectedSeries.id seriesId: this.selectedSeries.id,
lang: this.bannerForm.lang
}) })
if (response && response.status === 200 && response.data && response.data.success === true) { if (response && response.status === 200 && response.data && response.data.success === true) {
this.notifySuccess('배너가 추가되었습니다.') this.notifySuccess('배너가 추가되었습니다.')