Merge pull request '오디션 메뉴 추가' (#50) from test into main

Reviewed-on: #50

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,54 @@
+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);
+}
+
+async function createAuditionRole(formData) {
+    return Vue.axios.post("/admin/audition/role", formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function updateAuditionRole(formData) {
+    return Vue.axios.put("/admin/audition/role", formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function getAuditionRoleDetail(id) {
+    return Vue.axios.get("/admin/audition/role/" + id);
+}
+
+async function getAuditionApplicantList(id, page) {
+    return Vue.axios.get("/admin/audition/role/" + id + "/applicant?page=" + (page - 1) + "&size=20");
+}
+
+export {
+    getAuditionList, createAudition, updateAudition, getAuditionDetail,
+    createAuditionRole, updateAuditionRole, getAuditionRoleDetail, getAuditionApplicantList
+}

src/router/index.js

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

src/views/Audition/AuditionDetailView.vue

@@ -0,0 +1,606 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>{{ audition_title }}</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col cols="4">
+          <v-card>
+            <v-img
+              :src="audition_detail.imageUrl"
+              class="audition-image"
+            />
+
+            <v-card-text
+              v-if="
+                audition_detail.originalWorkUrl !== undefined &&
+                  audition_detail.originalWorkUrl.length > 0
+              "
+            >
+              <a
+                :href="audition_detail.originalWorkUrl"
+                class="original-work-link"
+              >
+                원작링크
+              </a>
+            </v-card-text>
+
+            <v-card-text>
+              <b>오디션 정보</b>
+              <vue-show-more-text
+                :text="audition_detail.information"
+                :lines="3"
+              />
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="8">
+          <v-row>
+            <v-col cols="8" />
+            <v-col cols="4">
+              <v-btn
+                block
+                color="#3bb9f1"
+                dark
+                depressed
+                @click="showWriteDialog"
+              >
+                배역 등록
+              </v-btn>
+            </v-col>
+          </v-row>
+
+          <v-row v-if="audition_role_list.length > 0">
+            <v-col
+              v-for="(item, i) in audition_role_list"
+              :key="i"
+              cols="4"
+            >
+              <v-card>
+                <v-card-title>
+                  <v-spacer />
+                  <v-img
+                    :src="item.imageUrl"
+                    class="audition-image"
+                    @click="selectAuditionRole(item)"
+                  />
+                  <v-spacer />
+                </v-card-title>
+                <v-card-text class="audition-title-container">
+                  {{ item.name }}
+                </v-card-text>
+                <v-card-text>
+                  상태 : {{ getStatusStr(item.status) }}
+                </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-card-actions>
+              </v-card>
+            </v-col>
+          </v-row>
+          <v-row v-else>
+            <v-col>
+              등록된 배역이 없습니다.
+            </v-col>
+          </v-row>
+        </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_role.image"
+            accept="image/*"
+            @change="imageAdd"
+          />
+        </div>
+        <img
+          v-if="audition_role.image_url"
+          :src="audition_role.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_role.name"
+                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_role.information"
+                label="오디션 배역 정보"
+                required
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text>
+          <v-row align="center">
+            <v-col cols="4">
+              오디션 대본 URL*
+            </v-col>
+            <v-col cols="8">
+              <v-text-field
+                v-model="audition_role.audition_script_url"
+                label="오디션 대본 URL"
+                required
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text v-if="selected_role !== null">
+          <v-row>
+            <v-col cols="4">
+              모집상태
+            </v-col>
+            <v-col
+              cols="8"
+              align="left"
+            >
+              <v-row>
+                <v-col>
+                  <input
+                    id="radio_in_progress"
+                    v-model="audition_role.status"
+                    type="radio"
+                    value="IN_PROGRESS"
+                  >
+                  <label for="radio_in_progress"> 모집중</label>
+                </v-col>
+                <v-col>
+                  <input
+                    id="radio_complete"
+                    v-model="audition_role.status"
+                    type="radio"
+                    value="COMPLETED"
+                  >
+                  <label for="radio_complete"> 모집완료</label>
+                </v-col>
+              </v-row>
+            </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_role !== 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="cancel"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="deleteAuditionRole"
+          >
+            확인
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/audition'
+
+import VueShowMoreText from 'vue-show-more-text'
+
+export default {
+  name: "AuditionDetailView",
+
+  components: {VueShowMoreText},
+
+  data() {
+    return {
+      is_loading: false,
+      audition_id: 0,
+      audition_title: '',
+      audition_detail: {},
+      audition_role_list: [],
+
+      show_write_dialog: false,
+      show_delete_confirm_dialog: false,
+
+      audition_role: {},
+      selected_role: null,
+    }
+  },
+
+  async created() {
+    this.audition_id = this.$route.params.audition_id
+    this.audition_title = this.$route.params.audition_title
+
+    if (this.audition_id !== undefined && this.audition_id > 0) {
+      await this.getAuditionDetail()
+    } else {
+      this.$router.go(-1)
+    }
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    getStatusStr(status) {
+      if (status === 'NOT_STARTED') {
+        return "모집전"
+      } else if (status === 'COMPLETED') {
+        return "모집완료"
+      } else {
+        return "모집중"
+      }
+    },
+
+    isValidUrl(string) {
+      try {
+        new URL(string); // URL 생성 시 예외가 발생하면 유효하지 않은 URL
+        return true;
+      } catch (_) {
+        return false;
+      }
+    },
+
+    async getAuditionDetail() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getAuditionDetail(this.audition_id)
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+
+          this.audition_title = data.title
+          this.audition_detail.imageUrl = data.imageUrl
+          this.audition_detail.information = data.information
+          this.audition_role_list = data.roleList
+
+          if (this.isValidUrl(data.originalWorkUrl)) {
+            this.audition_detail.originalWorkUrl = data.originalWorkUrl
+          }
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    imageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.audition_role.image_url = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.audition_role.image_url = null
+      }
+    },
+
+    showWriteDialog() {
+      this.show_write_dialog = true
+    },
+
+    showModifyDialog(auditionRole) {
+      this.audition_role = {
+        name: auditionRole.name,
+        image_url: auditionRole.imageUrl,
+        information: auditionRole.information,
+        audition_script_url: auditionRole.auditionScriptUrl,
+        status: auditionRole.status
+      }
+
+      this.selected_role = auditionRole
+      this.show_write_dialog = true
+    },
+
+    cancel() {
+      this.audition_role = {}
+      this.selected_role = null
+      this.show_write_dialog = false
+      this.show_delete_confirm_dialog = false
+    },
+
+    deleteConfirm(auditionRole) {
+      this.selected_role = auditionRole
+      this.show_delete_confirm_dialog = true
+    },
+
+    validate() {
+      if (this.audition_role.image === undefined || this.audition_role.image === null) {
+        this.notifyError('배역 이미지를 선택하세요')
+        return
+      }
+
+      if (this.audition_role.name.trim().length <= 0) {
+        this.notifyError('배역 이름을 입력하세요')
+        return
+      }
+
+      if (
+        this.audition_role.information === undefined ||
+        this.audition_role.information === null ||
+        this.audition_role.information.trim().length <= 10
+      ) {
+        this.notifyError('오디션 배역 정보를 입력하세요')
+        return
+      }
+
+      if (
+        this.audition_role.audition_script_url === undefined ||
+        this.audition_role.audition_script_url === null ||
+        this.audition_role.audition_script_url.trim().length <= 10
+      ) {
+        this.notifyError('오디션 대본 URL을 입력하세요')
+        return
+      }
+
+      this.submit()
+    },
+
+    async submit() {
+      if (this.is_loading) return;
+      this.is_loading = true
+
+      try {
+        const request = {
+          auditionId: this.audition_id,
+          name: this.audition_role.name,
+          information: this.audition_role.information,
+          auditionScriptUrl: this.audition_role.audition_script_url
+        }
+
+        const formData = new FormData()
+        formData.append("image", this.audition_role.image);
+        formData.append("request", JSON.stringify(request))
+
+        const res = await api.createAuditionRole(formData);
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel();
+          this.notifySuccess(res.data.message || '등록되었습니다.')
+          this.is_loading = false
+
+          await this.getAuditionDetail()
+        } else {
+          this.is_loading = false
+          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_role.id}
+        if (this.audition_role.name !== this.selected_role.name) {
+          request.name = this.audition_role.name
+        }
+
+        if (this.audition_role.information !== this.selected_role.information) {
+          request.information = this.audition_role.information
+        }
+
+        if (this.audition_role.audition_script_url !== this.selected_role.audition_script_url) {
+          request.auditionScriptUrl = this.audition_role.audition_script_url
+        }
+
+        if (this.audition_role.status !== this.selected_role.status) {
+          request.status = this.audition_role.status
+        }
+
+        const formData = new FormData()
+        formData.append("request", JSON.stringify(request))
+
+        if (this.audition_role.image !== undefined && this.audition_role.image !== null) {
+          formData.append("image", this.audition_role.image)
+        }
+
+        const res = await api.updateAuditionRole(formData);
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel();
+          this.notifySuccess(res.data.message || '등록되었습니다.')
+          this.is_loading = false
+
+          await this.getAuditionDetail()
+        } else {
+          this.is_loading = false
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async deleteAuditionRole() {
+      if (this.is_loading) return;
+      this.is_loading = true
+
+      try {
+        const request = {id: this.selected_role.id, isActive: false}
+        const formData = new FormData()
+        formData.append("request", JSON.stringify(request))
+
+        const res = await api.updateAuditionRole(formData)
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel();
+          this.notifySuccess('오디션 배역이 삭제되었습니다.')
+          this.is_loading = false
+
+          await this.getAuditionDetail()
+        } else {
+          this.is_loading = false
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    selectAuditionRole(auditionRole) {
+      this.$router.push(
+        {
+          name: 'AuditionRoleDetailView',
+          params: {
+            audition_role_id: auditionRole.id,
+            audition_title: this.audition_title
+          }
+        }
+      )
+    },
+  },
+}
+</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;
+}
+
+.original-work-link {
+  text-decoration: none;
+}
+
+.audition-image {
+  aspect-ratio: 1000 / 530;
+}
+
+.audition-title-container {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  max-height: 2em;
+}
+
+.no-audition_role {
+  height: 50vh;
+  margin-top: 100px;
+}
+</style>

src/views/Audition/AuditionRoleDetailView.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>{{ audition_title }} - {{ audition_role_name }}</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col cols="4">
+          <v-card>
+            <v-img
+              :src="audition_role_detail.imageUrl"
+              class="audition-image"
+            />
+
+            <v-card-text
+              v-if="
+                audition_role_detail.auditionScriptUrl !== undefined &&
+                  audition_role_detail.auditionScriptUrl.length > 0
+              "
+            >
+              <a
+                :href="audition_role_detail.auditionScriptUrl"
+                class="audition-script-link"
+              >
+                오디션 대본 링크
+              </a>
+            </v-card-text>
+
+            <v-card-text>
+              <b>오디션 배역 정보</b>
+              <vue-show-more-text
+                :text="audition_role_detail.information"
+                :lines="3"
+              />
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="8">
+          <v-row>
+            <v-col>
+              <v-simple-table class="elevation-10">
+                <template>
+                  <thead>
+                    <tr>
+                      <th class="text-center">
+                        지원 번호
+                      </th>
+                      <th class="text-center">
+                        프로필
+                      </th>
+                      <th class="text-center">
+                        닉네임
+                      </th>
+                      <th class="text-center">
+                        듣기
+                      </th>
+                      <th class="text-center">
+                        추천수
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="item in audition_role_applicant_list"
+                      :key="item.applicantId"
+                    >
+                      <td>{{ item.applicantId }}</td>
+                      <td align="center">
+                        <v-img
+                          max-width="70"
+                          max-height="70"
+                          :src="item.profileImageUrl"
+                          class="rounded-circle"
+                        />
+                        <br>
+                        <a
+                          :href="item.profileImageUrl"
+                          class="v-btn v-btn--outlined"
+                        >
+                          다운로드
+                        </a>
+                      </td>
+                      <td>{{ item.nickname }}</td>
+                      <td>
+                        <vuetify-audio
+                          :file="item.voiceUrl"
+                          :downloadable="true"
+                          :auto-play="false"
+                        />
+                      </td>
+                      <td>{{ item.voteCount }}</td>
+                    </tr>
+                  </tbody>
+                </template>
+              </v-simple-table>
+            </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-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/audition'
+
+import VueShowMoreText from 'vue-show-more-text'
+import VuetifyAudio from "vuetify-audio";
+
+export default {
+  name: "AuditionDetailView",
+
+  components: {VuetifyAudio, VueShowMoreText},
+
+  data() {
+    return {
+      is_loading: false,
+      audition_role_id: 0,
+      audition_title: '',
+      audition_role_name: '',
+
+      audition_role_detail: {},
+      audition_role_applicant_list: [],
+
+      page: 1,
+      total_page: 0,
+    }
+  },
+
+  async created() {
+    this.audition_role_id = this.$route.params.audition_role_id
+    this.audition_title = this.$route.params.audition_title
+
+    if (this.audition_role_id !== undefined && this.audition_role_id > 0) {
+      await this.getAuditionRoleDetail()
+      await this.getAuditionRoleApplicant()
+    } else {
+      this.$router.go(-1)
+    }
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    isValidUrl(string) {
+      try {
+        new URL(string); // URL 생성 시 예외가 발생하면 유효하지 않은 URL
+        return true;
+      } catch (_) {
+        return false;
+      }
+    },
+
+    async getAuditionRoleDetail() {
+      try {
+        const res = await api.getAuditionRoleDetail(this.audition_role_id)
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+
+          this.audition_role_name = data.name
+          this.audition_role_detail.imageUrl = data.imageUrl
+          this.audition_role_detail.information = data.information
+
+          if (this.isValidUrl(data.auditionScriptUrl)) {
+            this.audition_role_detail.auditionScriptUrl = data.auditionScriptUrl
+          }
+        } else {
+          this.is_loading = false
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async getAuditionRoleApplicant() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getAuditionApplicantList(this.audition_role_id, 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_role_applicant_list = data.items
+
+          if (total_page <= 0) {
+            this.total_page = 1
+          } else {
+            this.total_page = total_page
+          }
+        } else {
+          this.is_loading = false
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async next() {
+      await this.getAuditionRoleApplicant()
+    },
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/Audition/AuditionView.vue

@@ -0,0 +1,593 @@
+<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"
+                @click="selectAudition(item)"
+              />
+              <v-spacer />
+            </v-card-title>
+            <v-card-text class="audition-title-container">
+              {{ item.title }}
+            </v-card-text>
+            <v-card-text>
+              상태 : {{ getStatusStr(item.status) }}
+            </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>
+            <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-text v-if="selected_audition !== null">
+          <v-row>
+            <v-col cols="4">
+              모집상태
+            </v-col>
+            <v-col
+              cols="8"
+              align="left"
+            >
+              <v-row>
+                <v-col v-if="selected_audition.status === 'NOT_STARTED'">
+                  <input
+                    id="radio_not_started"
+                    v-model="audition.status"
+                    type="radio"
+                    value="NOT_STARTED"
+                  >
+                  <label for="radio_not_started"> 모집전</label>
+                </v-col>
+                <v-col>
+                  <input
+                    id="radio_in_progress"
+                    v-model="audition.status"
+                    type="radio"
+                    value="IN_PROGRESS"
+                  >
+                  <label for="radio_in_progress"> 모집중</label>
+                </v-col>
+                <v-col>
+                  <input
+                    id="radio_complete"
+                    v-model="audition.status"
+                    type="radio"
+                    value="COMPLETED"
+                  >
+                  <label for="radio_complete"> 모집완료</label>
+                </v-col>
+              </v-row>
+            </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 !== 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'
+
+export default {
+  name: "AuditionView",
+
+  data() {
+    return {
+      is_loading: false,
+      show_write_dialog: false,
+      show_delete_confirm_dialog: false,
+
+      audition: {
+        title: '',
+        information: '',
+        image_url: '',
+        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)
+    },
+
+    getStatusStr(status) {
+      if (status === 'NOT_STARTED') {
+        return "모집전"
+      } else if (status === 'COMPLETED') {
+        return "모집완료"
+      } else {
+        return "모집중"
+      }
+    },
+
+    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,
+        status: audition.status,
+      }
+
+      this.selected_audition = audition
+      this.show_write_dialog = true
+    },
+
+    cancel() {
+      this.audition = {
+        title: '',
+        information: '',
+        image_url: '',
+        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.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
+      }
+    },
+
+    selectAudition(audition) {
+      this.$router.push(
+        {
+          name: 'AuditionDetailView',
+          params: {
+            audition_id: audition.id, audition_title: audition.title
+          }
+        }
+      )
+    },
+
+    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
+        }
+
+        if (this.audition.status !== this.selected_audition.status) {
+          request.status = this.audition.status
+        }
+
+        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>