오디션 상세 페이지 추가

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')
+            },
         ]
     },
     {

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>

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()
     },