From b70cfa0df37d45547f7c10539d8e5cd2bb76a5da Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Tue, 4 Feb 2025 11:11:45 +0900
Subject: [PATCH 1/2] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=20=EA=B1=B0=EB=B6=80=20API=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requested/RequestedListCard.vue           | 64 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/src/components/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue
index 6782eb0e..8f81c7e4 100644
--- a/src/components/requested/RequestedListCard.vue
+++ b/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>

From 8804f6c9b6cbd5b162712d9c68f681e1ea204587 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Tue, 4 Feb 2025 21:21:26 +0900
Subject: [PATCH 2/2] =?UTF-8?q?:recycle:=20[refactor]=20:=20Modal=20?=
 =?UTF-8?q?=EB=8B=AB=ED=9E=90=20=EB=95=8C=20textValue=20=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ModalView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ModalView.vue b/src/components/ModalView.vue
index 6a6196d5..ccdfcb9b 100644
--- a/src/components/ModalView.vue
+++ b/src/components/ModalView.vue
@@ -92,6 +92,7 @@ watch(textValue, newValue => {
 })
 
 const closeModal = () => {
+  textValue.value = ''
   emit('close')
 }