오디션 관리 - 페이지 추가

package-lock.json

@@ -14,7 +14,9 @@
         "vue-excel-xlsx": "^1.2.2",
         "vue-router": "^3.2.0",
         "vue-show-more-text": "^2.0.2",
+        "vue2-datepicker": "^3.11.1",
         "vue2-editor": "^2.10.3",
+        "vue2-timepicker": "^1.1.6",
         "vuedraggable": "^2.24.3",
         "vuejs-datetimepicker": "^1.1.13",
         "vuetify": "2.6.10",
@@ -5239,6 +5241,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
       "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
     },
+    "node_modules/date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -14644,6 +14651,17 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue2-datepicker": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.11.1.tgz",
+      "integrity": "sha512-6PU/+pnp2mgZAfnSXmbdwj9516XsEvTiw61Q5SNrvvdy8W/FCxk1GAe9UZn/m9YfS5A47yK6XkcjMHbp7aFApA==",
+      "dependencies": {
+        "date-format-parse": "^0.2.7"
+      },
+      "peerDependencies": {
+        "vue": "^2.5.0"
+      }
+    },
     "node_modules/vue2-editor": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/vue2-editor/-/vue2-editor-2.10.3.tgz",
@@ -14652,6 +14670,14 @@
         "quill": "^1.3.6"
       }
     },
+    "node_modules/vue2-timepicker": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.6.tgz",
+      "integrity": "sha512-DhO2UH4CTer/lMWxg+jqxn/+h6g2vZrsM6vCe9u7/Ie+Pej9yA+8mQA3C3VPApZ+LauKc43WxCspOXb6SGBOTw==",
+      "peerDependencies": {
+        "vue": "^2.6.5"
+      }
+    },
     "node_modules/vuedraggable": {
       "version": "2.24.3",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
@@ -19946,6 +19972,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
       "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
     },
+    "date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -27496,6 +27527,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue2-datepicker": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.11.1.tgz",
+      "integrity": "sha512-6PU/+pnp2mgZAfnSXmbdwj9516XsEvTiw61Q5SNrvvdy8W/FCxk1GAe9UZn/m9YfS5A47yK6XkcjMHbp7aFApA==",
+      "requires": {
+        "date-format-parse": "^0.2.7"
+      }
+    },
     "vue2-editor": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/vue2-editor/-/vue2-editor-2.10.3.tgz",
@@ -27504,6 +27543,12 @@
         "quill": "^1.3.6"
       }
     },
+    "vue2-timepicker": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.6.tgz",
+      "integrity": "sha512-DhO2UH4CTer/lMWxg+jqxn/+h6g2vZrsM6vCe9u7/Ie+Pej9yA+8mQA3C3VPApZ+LauKc43WxCspOXb6SGBOTw==",
+      "requires": {}
+    },
     "vuedraggable": {
       "version": "2.24.3",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",

package.json

@@ -16,7 +16,9 @@
     "vue-excel-xlsx": "^1.2.2",
     "vue-router": "^3.2.0",
     "vue-show-more-text": "^2.0.2",
+    "vue2-datepicker": "^3.11.1",
     "vue2-editor": "^2.10.3",
+    "vue2-timepicker": "^1.1.6",
     "vuedraggable": "^2.24.3",
     "vuejs-datetimepicker": "^1.1.13",
     "vuetify": "2.6.10",

src/api/audition.js

@@ -0,0 +1,29 @@
+import Vue from 'vue';
+
+async function getAuditionList(page) {
+    return Vue.axios.get("/admin/audition?page=" + (page - 1) + "&size=20");
+}
+
+async function createAudition(formData) {
+    return Vue.axios.post("/admin/audition", formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function updateAudition(formData) {
+    return Vue.axios.put("/admin/audition", formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function getAuditionDetail(id) {
+    return Vue.axios.get("/admin/audition/" + id);
+}
+
+export {
+    getAuditionList, createAudition, updateAudition, getAuditionDetail
+}

src/router/index.js

@@ -195,6 +195,11 @@ const routes = [
                 name: 'PrivacyView',
                 component: () => import(/* webpackChunkName: "support" */ '../views/Support/PrivacyView.vue')
             },
+            {
+                path: '/audition',
+                name: 'AuditionListView',
+                component: () => import(/* webpackChunkName: "audition" */ '../views/Audition/AuditionView.vue')
+            },
         ]
     },
     {

src/views/Audition/AuditionView.vue

@@ -0,0 +1,571 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>오디션 관리</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+    <v-container>
+      <v-row>
+        <v-col cols="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#3bb9f1"
+            dark
+            depressed
+            @click="showWriteDialog"
+          >
+            오디션 작품 등록
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row v-if="audition_list.length > 0">
+        <v-col
+          v-for="(item, i) in audition_list"
+          :key="i"
+          cols="4"
+        >
+          <v-card>
+            <v-card-title>
+              <v-spacer />
+              <v-img
+                :src="item.imageUrl"
+                class="cover-image"
+              />
+              <v-spacer />
+            </v-card-title>
+            <v-card-text class="audition-title-container">
+              {{ item.title }}
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                text
+                @click="showModifyDialog(item)"
+              >
+                수정
+              </v-btn>
+              <v-btn
+                text
+                @click="deleteConfirm(item)"
+              >
+                삭제
+              </v-btn>
+              <v-spacer />
+            </v-card-actions>
+          </v-card>
+        </v-col>
+      </v-row>
+      <v-row v-else>
+        <v-col>
+          등록된 오디션이 없습니다.
+        </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>
+
+    <v-dialog
+      v-model="show_write_dialog"
+      max-width="1000px"
+      persistent
+    >
+      <v-card>
+        <v-card-title>
+          오디션 작품 등록
+        </v-card-title>
+
+        <div class="image-select">
+          <label for="image">
+            오디션 이미지 등록
+          </label>
+          <v-file-input
+            id="image"
+            v-model="audition.image"
+            accept="image/*"
+            @change="imageAdd"
+          />
+        </div>
+        <img
+          v-if="audition.image_url"
+          :src="audition.image_url"
+          alt=""
+          class="image-preview"
+        >
+        <v-card-text>
+          <v-row align="center">
+            <v-col cols="4">
+              오디션 제목*
+            </v-col>
+            <v-col cols="8">
+              <v-text-field
+                v-model="audition.title"
+                label="오디션 제목"
+                required
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text>
+          <v-row align="center">
+            <v-col cols="4">
+              오디션 정보*
+            </v-col>
+            <v-col cols="8">
+              <v-textarea
+                v-model="audition.information"
+                label="오디션 정보"
+                required
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text>
+          <v-row align="center">
+            <v-col cols="4">
+              원작
+            </v-col>
+            <v-col cols="8">
+              <v-text-field
+                v-model="audition.original_work_url"
+                label="원작 URL(없으면 입력X)"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text>
+          <v-row align="center">
+            <v-col cols="4">
+              마감날짜
+            </v-col>
+            <v-col
+              cols="8"
+              align="left"
+            >
+              <DatePicker
+                v-model="audition.end_date"
+                value-type="format"
+              />
+              &nbsp;&nbsp;
+              <vue-timepicker
+                v-model="audition.end_time"
+                format="HH:mm"
+                input-class="skip-error-style"
+                :minute-interval="15"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text>
+          <v-row>
+            <v-col cols="4">
+              연령제한
+            </v-col>
+            <v-col
+              cols="8"
+              align="left"
+            >
+              <input
+                v-model="audition.is_adult"
+                type="checkbox"
+              >
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions v-show="!is_loading">
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="cancel"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            v-if="selected_audition !== undefined && selected_audition !== null"
+            color="blue darken-1"
+            text
+            @click="modify"
+          >
+            수정
+          </v-btn>
+          <v-btn
+            v-else
+            color="blue darken-1"
+            text
+            @click="validate"
+          >
+            등록
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog
+      v-model="show_delete_confirm_dialog"
+      max-width="400px"
+      persistent
+    >
+      <v-card>
+        <v-card-text />
+        <v-card-text>
+          삭제하시겠습니까?
+        </v-card-text>
+        <v-card-actions v-show="!is_loading">
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="deleteCancel"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="deleteAudition"
+          >
+            확인
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/audition'
+import VueTimepicker from 'vue2-timepicker'
+import DatePicker from 'vue2-datepicker';
+
+import 'vue2-datepicker/index.css';
+import 'vue2-timepicker/dist/VueTimepicker.css'
+
+export default {
+  name: "AuditionView",
+
+  components: {VueTimepicker, DatePicker},
+
+  data() {
+    return {
+      is_loading: false,
+      show_write_dialog: false,
+      show_delete_confirm_dialog: false,
+
+      audition: {
+        title: '',
+        information: '',
+        image_url: '',
+        end_date: '',
+        end_time: '',
+        is_adult: false,
+        original_work_url: ''
+      },
+
+      audition_list: [],
+      selected_audition: null,
+
+      page: 1,
+      total_page: 0,
+    }
+  },
+
+  async created() {
+    await this.getAuditionList()
+  },
+
+  methods: {
+    imageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.audition.image_url = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.audition.image_url = null
+      }
+    },
+
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    showWriteDialog() {
+      this.show_write_dialog = true
+    },
+
+    showModifyDialog(audition) {
+      this.audition = {
+        title: audition.title,
+        information: audition.information,
+        image_url: audition.imageUrl,
+        is_adult: audition.isAdult,
+        original_work_url: audition.originalWorkUrl,
+      }
+
+      if (audition.endDate !== undefined && audition.endDate !== null) {
+        const splitEndDate = audition.endDate.split(" ")
+        this.audition.end_date = splitEndDate[0]
+        this.audition.end_time = splitEndDate[1]
+      }
+
+      this.selected_audition = audition
+      this.show_write_dialog = true
+    },
+
+    cancel() {
+      this.audition = {
+        title: '',
+        information: '',
+        image_url: '',
+        end_date: '',
+        end_time: '',
+        is_adult: false,
+        original_work_url: ''
+      }
+      this.selected_audition = null
+      this.show_write_dialog = false
+      this.show_delete_confirm_dialog = false
+    },
+
+    deleteConfirm(audition) {
+      this.selected_audition = audition
+      this.show_delete_confirm_dialog = true
+    },
+
+    deleteCancel() {
+      this.cancel();
+    },
+
+    validate() {
+      if (this.audition.image === undefined || this.audition.image === null) {
+        this.notifyError('오디션 이미지를 선택하세요')
+        return
+      }
+
+      if (this.audition.title.trim().length <= 0) {
+        this.notifyError('오디션 제목을 입력하세요')
+        return
+      }
+
+      if (this.audition.information.trim().length <= 10) {
+        this.notifyError('오디션 정보는 최소 10글자 입니다')
+        return
+      }
+
+      this.submit()
+    },
+
+    async submit() {
+      if (this.is_loading) return;
+      this.is_loading = true
+
+      try {
+        const request = {
+          title: this.audition.title,
+          information: this.audition.information,
+          isAdult: this.audition.is_adult
+        }
+
+        if (this.audition.end_date !== '' && this.audition.end_time !== '') {
+          request.endDateString = this.audition.end_date + ' ' + this.audition.end_time
+        }
+
+        if (this.audition.original_work_url !== '') {
+          request.originalWorkUrl = this.audition.original_work_url
+        }
+
+        const formData = new FormData()
+        formData.append("image", this.audition.image);
+        formData.append("request", JSON.stringify(request))
+
+        const res = await api.createAudition(formData);
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel();
+          this.notifySuccess(res.data.message || '등록되었습니다.')
+          this.is_loading = false
+
+          this.page = 1
+          await this.getAuditionList()
+        } else {
+          this.is_loading = false
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async next() {
+      await this.getAuditionList()
+    },
+
+    async getAuditionList() {
+      if (this.is_loading) return;
+
+      this.is_loading = true
+      try {
+        const res = await api.getAuditionList(this.page)
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+          const total_page = Math.ceil(data.totalCount / 20)
+
+          this.audition_list = data.items
+
+          if (total_page <= 0) {
+            this.total_page = 1
+          } else {
+            this.total_page = total_page
+          }
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async modify() {
+      if (this.is_loading) return;
+      this.is_loading = true
+
+      try {
+        const request = {id: this.selected_audition.id}
+        if (this.audition.title !== this.selected_audition.title) {
+          request.title = this.audition.title
+        }
+
+        if (this.audition.information !== this.selected_audition.information) {
+          request.information = this.audition.information
+        }
+
+        if (this.audition.is_adult !== this.selected_audition.isAdult) {
+          request.isAdult = this.audition.is_adult
+        }
+
+        if (this.audition.original_work_url !== this.selected_audition.originalWorkUrl) {
+          request.originalWorkUrl = this.audition.original_work_url
+        }
+
+        const splitEndDate = this.selected_audition.endDate.split(" ")
+        if (this.audition.end_date !== splitEndDate[0] || this.audition.end_time !== splitEndDate[1]) {
+          request.endDateString = this.audition.end_date + ' ' + this.audition.end_time
+        }
+
+        const formData = new FormData()
+        formData.append("request", JSON.stringify(request))
+
+        if (this.audition.image !== undefined && this.audition.image !== null) {
+          formData.append("image", this.audition.image)
+        }
+
+        const res = await api.updateAudition(formData);
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel();
+          this.notifySuccess(res.data.message || '수정되었습니다.')
+          this.is_loading = false
+
+          this.page = 1
+          await this.getAuditionList()
+        } else {
+          this.is_loading = false
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async deleteAudition() {
+      if (this.is_loading) return;
+      this.is_loading = true
+
+      try {
+        const request = {id: this.selected_audition.id, isActive: false}
+        const formData = new FormData()
+        formData.append("request", JSON.stringify(request))
+
+        const res = await api.updateAudition(formData)
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel();
+          this.notifySuccess('오디션이 삭제되었습니다.')
+          this.is_loading = false
+
+          this.page = 1
+          await this.getAuditionList()
+        } else {
+          this.is_loading = false
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.image-select label {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #232d4a;
+  color: #fff;
+  vertical-align: middle;
+  font-size: 15px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.v-file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+}
+
+.image-preview {
+  max-width: 100%;
+  width: 300px;
+  object-fit: cover;
+  margin-top: 10px;
+}
+
+.audition-title-container {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  max-height: 2em;
+}
+
+.cover-image {
+  aspect-ratio: 1000/530;
+}
+</style>