From 0537b6df7dcc1672fe714cb81ec72c97750a5c90 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Fri, 27 Dec 2024 01:40:31 +0900
Subject: [PATCH 1/7] =?UTF-8?q?=EC=98=A4=EB=94=94=EC=85=98=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                   |  45 +++
 package.json                        |   2 +
 src/api/audition.js                 |  29 ++
 src/router/index.js                 |   5 +
 src/views/Audition/AuditionView.vue | 571 ++++++++++++++++++++++++++++
 5 files changed, 652 insertions(+)
 create mode 100644 src/api/audition.js
 create mode 100644 src/views/Audition/AuditionView.vue

diff --git a/package-lock.json b/package-lock.json
index 3ddd1ad..1b68638 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index e59af1b..a4fb6b2 100644
--- a/package.json
+++ b/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",
diff --git a/src/api/audition.js b/src/api/audition.js
new file mode 100644
index 0000000..9cc8b17
--- /dev/null
+++ b/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
+}
diff --git a/src/router/index.js b/src/router/index.js
index 1912aa1..a9bee22 100644
--- a/src/router/index.js
+++ b/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')
+            },
         ]
     },
     {
diff --git a/src/views/Audition/AuditionView.vue b/src/views/Audition/AuditionView.vue
new file mode 100644
index 0000000..45d70b7
--- /dev/null
+++ b/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>

From fedecfed9914374a66686e45905a39db41a3c65d Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Fri, 27 Dec 2024 02:45:22 +0900
Subject: [PATCH 2/7] =?UTF-8?q?=EC=98=A4=EB=94=94=EC=85=98=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EB=AA=A8=EC=A7=91=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Audition/AuditionView.vue | 61 ++++++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/views/Audition/AuditionView.vue b/src/views/Audition/AuditionView.vue
index 45d70b7..be02cad 100644
--- a/src/views/Audition/AuditionView.vue
+++ b/src/views/Audition/AuditionView.vue
@@ -40,6 +40,9 @@
             <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
@@ -183,6 +186,47 @@
             </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
@@ -193,7 +237,7 @@
             취소
           </v-btn>
           <v-btn
-            v-if="selected_audition !== undefined && selected_audition !== null"
+            v-if="selected_audition !== null"
             color="blue darken-1"
             text
             @click="modify"
@@ -304,6 +348,16 @@ export default {
       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
     },
@@ -315,6 +369,7 @@ export default {
         image_url: audition.imageUrl,
         is_adult: audition.isAdult,
         original_work_url: audition.originalWorkUrl,
+        status: audition.status,
       }
 
       if (audition.endDate !== undefined && audition.endDate !== null) {
@@ -465,6 +520,10 @@ export default {
           request.originalWorkUrl = this.audition.original_work_url
         }
 
+        if (this.audition.status !== this.selected_audition.status) {
+          request.status = this.audition.status
+        }
+
         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

From 521345b9c83c27f1f8033113f997cde20312b392 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Fri, 27 Dec 2024 23:43:42 +0900
Subject: [PATCH 3/7] =?UTF-8?q?=EC=98=A4=EB=94=94=EC=85=98=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                       |   7 +-
 src/views/Audition/AuditionDetailView.vue | 219 ++++++++++++++++++++++
 src/views/Audition/AuditionView.vue       |  12 ++
 3 files changed, 237 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Audition/AuditionDetailView.vue

diff --git a/src/router/index.js b/src/router/index.js
index a9bee22..7f82c10 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -197,9 +197,14 @@ const routes = [
             },
             {
                 path: '/audition',
-                name: 'AuditionListView',
+                name: 'AuditionView',
                 component: () => import(/* webpackChunkName: "audition" */ '../views/Audition/AuditionView.vue')
             },
+            {
+                path: '/audition/detail',
+                name: 'AuditionDetailView',
+                component: () => import(/* webpackChunkName: "audition" */ '../views/Audition/AuditionDetailView.vue')
+            },
         ]
     },
     {
diff --git a/src/views/Audition/AuditionDetailView.vue b/src/views/Audition/AuditionDetailView.vue
new file mode 100644
index 0000000..2243ab2
--- /dev/null
+++ b/src/views/Audition/AuditionDetailView.vue
@@ -0,0 +1,219 @@
+<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
+              >
+                배역 등록
+              </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="12"
+            >
+              <v-card>
+                <v-card-title>
+                  <v-spacer />
+                  <v-img
+                    :src="item.imageUrl"
+                    class="audition-image"
+                  />
+                  <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
+                  >
+                    수정
+                  </v-btn>
+                  <v-btn
+                    text
+                  >
+                    삭제
+                  </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>
+  </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: [],
+
+      audition_role: {},
+    }
+  },
+
+  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
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.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>
diff --git a/src/views/Audition/AuditionView.vue b/src/views/Audition/AuditionView.vue
index be02cad..c298b4f 100644
--- a/src/views/Audition/AuditionView.vue
+++ b/src/views/Audition/AuditionView.vue
@@ -34,6 +34,7 @@
               <v-img
                 :src="item.imageUrl"
                 class="cover-image"
+                @click="selectAudition(item)"
               />
               <v-spacer />
             </v-card-title>
@@ -467,6 +468,17 @@ export default {
       }
     },
 
+    selectAudition(audition) {
+      this.$router.push(
+        {
+          name: 'AuditionDetailView',
+          params: {
+            audition_id: audition.id, audition_title: audition.title
+          }
+        }
+      )
+    },
+
     async next() {
       await this.getAuditionList()
     },

From d5d365d0ad59492bd8119c614a801678bfd2a870 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 28 Dec 2024 02:32:44 +0900
Subject: [PATCH 4/7] =?UTF-8?q?=EC=98=A4=EB=94=94=EC=85=98=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20-=20=EB=B0=B0=EC=97=AD?=
 =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8/=EB=93=B1=EB=A1=9D/=EC=88=98?=
 =?UTF-8?q?=EC=A0=95/=EC=82=AD=EC=A0=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/audition.js                       |  29 +-
 src/views/Audition/AuditionDetailView.vue | 351 +++++++++++++++++++++-
 2 files changed, 377 insertions(+), 3 deletions(-)

diff --git a/src/api/audition.js b/src/api/audition.js
index 9cc8b17..7df4cd2 100644
--- a/src/api/audition.js
+++ b/src/api/audition.js
@@ -24,6 +24,31 @@ async function getAuditionDetail(id) {
     return Vue.axios.get("/admin/audition/" + id);
 }
 
-export {
-    getAuditionList, createAudition, updateAudition, getAuditionDetail
+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
 }
diff --git a/src/views/Audition/AuditionDetailView.vue b/src/views/Audition/AuditionDetailView.vue
index 2243ab2..43f65a2 100644
--- a/src/views/Audition/AuditionDetailView.vue
+++ b/src/views/Audition/AuditionDetailView.vue
@@ -50,6 +50,7 @@
                 color="#3bb9f1"
                 dark
                 depressed
+                @click="showWriteDialog"
               >
                 배역 등록
               </v-btn>
@@ -60,7 +61,7 @@
             <v-col
               v-for="(item, i) in audition_role_list"
               :key="i"
-              cols="12"
+              cols="4"
             >
               <v-card>
                 <v-card-title>
@@ -68,6 +69,7 @@
                   <v-img
                     :src="item.imageUrl"
                     class="audition-image"
+                    @click="selectAuditionRole(item)"
                   />
                   <v-spacer />
                 </v-card-title>
@@ -81,11 +83,13 @@
                   <v-spacer />
                   <v-btn
                     text
+                    @click="showModifyDialog(item)"
                   >
                     수정
                   </v-btn>
                   <v-btn
                     text
+                    @click="deleteConfirm(item)"
                   >
                     삭제
                   </v-btn>
@@ -101,6 +105,152 @@
         </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">
+              오디션 대본 URL
+            </v-col>
+            <v-col cols="8">
+              <v-textarea
+                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>
 
@@ -122,7 +272,11 @@ export default {
       audition_detail: {},
       audition_role_list: [],
 
+      show_write_dialog: false,
+      show_delete_confirm_dialog: false,
+
       audition_role: {},
+      selected_role: null,
     }
   },
 
@@ -190,11 +344,206 @@ export default {
         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,
+        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.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,
+          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.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) {
+    },
   },
 }
 </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;
 }

From 4b9259c5258c475981f5a9a71ce8ad810b8cf347 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 28 Dec 2024 03:53:48 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=EC=98=A4=EB=94=94=EC=85=98=20=EB=B0=B0?=
 =?UTF-8?q?=EC=97=AD=20=EB=93=B1=EB=A1=9D/=EC=88=98=EC=A0=95=20-=20?=
 =?UTF-8?q?=EB=B0=B0=EC=97=AD=20=EC=A0=95=EB=B3=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Audition/AuditionDetailView.vue | 31 ++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/views/Audition/AuditionDetailView.vue b/src/views/Audition/AuditionDetailView.vue
index 43f65a2..e90fc98 100644
--- a/src/views/Audition/AuditionDetailView.vue
+++ b/src/views/Audition/AuditionDetailView.vue
@@ -150,10 +150,24 @@
         <v-card-text>
           <v-row align="center">
             <v-col cols="4">
-              오디션 대본 URL
+              오디션 배역 정보*
             </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
@@ -363,6 +377,7 @@ export default {
       this.audition_role = {
         name: auditionRole.name,
         image_url: auditionRole.imageUrl,
+        information: auditionRole.information,
         audition_script_url: auditionRole.auditionScriptUrl,
         status: auditionRole.status
       }
@@ -394,6 +409,15 @@ export default {
         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 ||
@@ -414,6 +438,7 @@ export default {
         const request = {
           auditionId: this.audition_id,
           name: this.audition_role.name,
+          information: this.audition_role.information,
           auditionScriptUrl: this.audition_role.audition_script_url
         }
 
@@ -449,6 +474,10 @@ export default {
           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
         }

From a0a80bf6268306dfc8994aaad346d6a7037f71c7 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 28 Dec 2024 05:31:22 +0900
Subject: [PATCH 6/7] =?UTF-8?q?=EC=98=A4=EB=94=94=EC=85=98=20=EB=B0=B0?=
 =?UTF-8?q?=EC=97=AD=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |   5 +
 src/views/Audition/AuditionDetailView.vue     |   9 +
 src/views/Audition/AuditionRoleDetailView.vue | 234 ++++++++++++++++++
 3 files changed, 248 insertions(+)
 create mode 100644 src/views/Audition/AuditionRoleDetailView.vue

diff --git a/src/router/index.js b/src/router/index.js
index 7f82c10..4b84bda 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -205,6 +205,11 @@ const routes = [
                 name: 'AuditionDetailView',
                 component: () => import(/* webpackChunkName: "audition" */ '../views/Audition/AuditionDetailView.vue')
             },
+            {
+                path: '/audition/role/detail',
+                name: 'AuditionRoleDetailView',
+                component: () => import(/* webpackChunkName: "audition" */ '../views/Audition/AuditionRoleDetailView.vue')
+            },
         ]
     },
     {
diff --git a/src/views/Audition/AuditionDetailView.vue b/src/views/Audition/AuditionDetailView.vue
index e90fc98..ed10907 100644
--- a/src/views/Audition/AuditionDetailView.vue
+++ b/src/views/Audition/AuditionDetailView.vue
@@ -540,6 +540,15 @@ export default {
     },
 
     selectAuditionRole(auditionRole) {
+      this.$router.push(
+        {
+          name: 'AuditionRoleDetailView',
+          params: {
+            audition_role_id: auditionRole.id,
+            audition_title: this.audition_title
+          }
+        }
+      )
     },
   },
 }
diff --git a/src/views/Audition/AuditionRoleDetailView.vue b/src/views/Audition/AuditionRoleDetailView.vue
new file mode 100644
index 0000000..0777ae9
--- /dev/null
+++ b/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>

From 67a17a44aa73f6bc8a27bc16b58842c6fd4e5e6d Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sun, 5 Jan 2025 15:28:48 +0900
Subject: [PATCH 7/7] =?UTF-8?q?=EB=A7=88=EA=B0=90=EB=82=A0=EC=A7=9C=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Audition/AuditionView.vue | 49 -----------------------------
 1 file changed, 49 deletions(-)

diff --git a/src/views/Audition/AuditionView.vue b/src/views/Audition/AuditionView.vue
index c298b4f..90d9623 100644
--- a/src/views/Audition/AuditionView.vue
+++ b/src/views/Audition/AuditionView.vue
@@ -148,29 +148,6 @@
             </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">
@@ -291,17 +268,10 @@
 
 <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,
@@ -312,8 +282,6 @@ export default {
         title: '',
         information: '',
         image_url: '',
-        end_date: '',
-        end_time: '',
         is_adult: false,
         original_work_url: ''
       },
@@ -373,12 +341,6 @@ export default {
         status: audition.status,
       }
 
-      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
     },
@@ -388,8 +350,6 @@ export default {
         title: '',
         information: '',
         image_url: '',
-        end_date: '',
-        end_time: '',
         is_adult: false,
         original_work_url: ''
       }
@@ -437,10 +397,6 @@ export default {
           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
         }
@@ -536,11 +492,6 @@ export default {
           request.status = this.audition.status
         }
 
-        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))