CLAP-256 작업 거부 API 연결

src/components/ModalView.vue

@@ -92,6 +92,7 @@ watch(textValue, newValue => {
 })
 
 const closeModal = () => {
+  textValue.value = ''
   emit('close')
 }
 

src/components/requested/RequestedListCard.vue

@@ -14,9 +14,34 @@
         class="button-medium-primary">
         승인
       </button>
-      <button class="button-medium-default">거부</button>
+      <button
+        @click="toggleModal('reject')"
+        class="button-medium-default">
+        거부
+      </button>
     </div>
   </div>
+
+  <ModalView
+    :is-open="isModalVisible.reject"
+    @update:model-value="value => (rejectReason = value)"
+    type="inputType"
+    @close="closeModal"
+    @click="rejectRequest">
+    <template #header>거부 사유를 입력해주세요</template>
+  </ModalView>
+  <ModalView
+    :is-open="isModalVisible.success"
+    type="successType"
+    @close="closeModal">
+    <template #header>거부가 완료되었습니다</template>
+  </ModalView>
+  <ModalView
+    :is-open="isModalVisible.fail"
+    type="failType"
+    @close="closeModal">
+    <template #header>{{ modalError }}</template>
+  </ModalView>
 </template>
 
 <script setup lang="ts">
@@ -25,6 +50,10 @@ import ListCardTab from '../lists/ListCardTab.vue'
 import type { RequestedListData } from '@/types/manager'
 import { useRouter } from 'vue-router'
 import { formatDate } from '@/utils/date'
+import ModalView from '../ModalView.vue'
+import { ref } from 'vue'
+import { axiosInstance } from '@/utils/axios'
+import { useQueryClient } from '@tanstack/vue-query'
 
 const { info } = defineProps<{ info: RequestedListData }>()
 const requestedTabList: ListCardProps[] = [
@@ -36,4 +65,37 @@ const requestedTabList: ListCardProps[] = [
 ]
 
 const router = useRouter()
+const queryClient = useQueryClient()
+
+const isModalVisible = ref({
+  reject: false,
+  fail: false,
+  success: false
+})
+const modalError = ref('')
+const rejectReason = ref('')
+const toggleModal = (key: keyof typeof isModalVisible.value) => {
+  isModalVisible.value = Object.fromEntries(
+    Object.keys(isModalVisible.value).map(k => [k, k === key])
+  ) as typeof isModalVisible.value
+}
+const closeModal = () => {
+  const prevSuccess = isModalVisible.value.success
+  isModalVisible.value = { reject: false, fail: false, success: false }
+  if (prevSuccess) queryClient.invalidateQueries({ queryKey: ['requested'] })
+}
+const rejectRequest = async () => {
+  if (rejectReason.value.length === 0) {
+    toggleModal('fail')
+    modalError.value = '거부 사유를 입력해주세요'
+    return
+  }
+  try {
+    await axiosInstance.patch(`/api/tasks/${info.taskId}/terminate`, rejectReason)
+    toggleModal('success')
+  } catch {
+    toggleModal('fail')
+    modalError.value = '작업 거부에 실패했습니다'
+  }
+}
 </script>