오디션 지원 취소기능 적용

src/views/Audition/AuditionRoleDetailView.vue

@@ -63,6 +63,9 @@
                       <th class="text-center">
                         추천수
                       </th>
+                      <th class="text-center">
+                        관리
+                      </th>
                     </tr>
                   </thead>
                   <tbody>
@@ -95,6 +98,14 @@
                         />
                       </td>
                       <td>{{ item.voteCount }}</td>
+                      <td>
+                        <v-btn
+                          :disabled="is_loading"
+                          @click="deleteConfirm(item)"
+                        >
+                          삭제
+                        </v-btn>
+                      </td>
                     </tr>
                   </tbody>
                 </template>
@@ -114,6 +125,36 @@
         </v-col>
       </v-row>
     </v-container>
+
+    <v-dialog
+      v-model="show_delete_confirm_dialog"
+      max-width="400px"
+      persistent
+    >
+      <v-card>
+        <v-card-text />
+        <v-card-text>
+          "{{ selected_audition_role_applicant.nickname }}"님의 오디션지원을 취소하시겠습니까?
+        </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="deleteAuditionApplicant"
+          >
+            확인
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -138,6 +179,9 @@ export default {
       audition_role_detail: {},
       audition_role_applicant_list: [],
 
+      selected_audition_role_applicant: {},
+      show_delete_confirm_dialog: false,
+
       page: 1,
       total_page: 0,
     }
@@ -164,6 +208,16 @@ export default {
       this.$dialog.notify.success(message)
     },
 
+    deleteConfirm(item) {
+      this.selected_audition_role_applicant = item
+      this.show_delete_confirm_dialog = true
+    },
+
+    deleteCancel() {
+      this.selected_audition_role_applicant = {}
+      this.show_delete_confirm_dialog = false
+    },
+
     isValidUrl(string) {
       try {
         new URL(string); // URL 생성 시 예외가 발생하면 유효하지 않은 URL
@@ -236,6 +290,29 @@ export default {
     async next() {
       await this.getAuditionRoleApplicant()
     },
+
+    async deleteAuditionApplicant() {
+      if (this.is_loading) return;
+      this.is_loading = true
+
+      try {
+        const res = await api.deleteAuditionApplicant(this.selected_audition_role_applicant.applicantId)
+        if (res.status === 200 && res.data.success === true) {
+          this.show_delete_confirm_dialog = false
+          this.notifySuccess(res.data.message || '오디션 지원이 취소 되었습니다.')
+
+          this.audition_role_applicant_list = []
+          this.page = 1
+          await this.getAuditionRoleApplicant()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
   }
 }
 </script>