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] =?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>