Merge pull request #164 from TaskFlow-CLAP/CLAP-377

Clap-377 수정 요구 Moya

Author: Minkyu0424

.github/workflows/CD.yml

@@ -3,8 +3,7 @@ name: CD for front using github actions
 
 on:
   release:
-    types: [created, edited, published, released, prereleased]
-
+    types: [created]
 
 permissions:
   contents: read
@@ -48,7 +47,7 @@ jobs:
       - name: Docker build & push
         run: |
           docker login clap.kr-central-2.kcr.dev -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
-          docker build -t ${{ secrets.DOCKER_REPO }}:${{ steps.version.outputs.VERSION }} .
+          docker build -t ${{ secrets.DOCKER_REPO }}${{ steps.version.outputs.VERSION }} .
           docker push ${{ secrets.DOCKER_REPO }}:${{ steps.version.outputs.VERSION }}
       ## deploy
       - name: Deploy

src/components/common/TaskCard.vue

@@ -42,24 +42,37 @@
 
 <script setup lang="ts">
 import { bentoIcon } from '@/constants/iconPath'
+import { useTeamBoardParamsStore } from '@/stores/params'
 import type { Status } from '@/types/common'
 import type { TaskCardProps } from '@/types/manager'
 import { statusAsColor } from '@/utils/statusAsColor'
+import { useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
+import TaskDetail from '../task-detail/TaskDetail.vue'
 import CommonIcons from './CommonIcons.vue'
-import TaskLabel from './TaskLabel.vue'
 import ImageContainer from './ImageContainer.vue'
-import TaskDetail from '../task-detail/TaskDetail.vue'
+import TaskLabel from './TaskLabel.vue'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
 const emit = defineEmits(['toggleModal'])
 const selectedID = ref<number | null>(null)
+const queryClient = useQueryClient()
+const { params } = useTeamBoardParamsStore()
 
 const borderLeft = computed(() => {
   return `border-${statusAsColor(data.taskStatus as Status)}-1`
 })
 
 const handleModal = (id: number | null) => {
+  if (!id) {
+    queryClient.invalidateQueries({
+      queryKey: ['taskBoard']
+    })
+    queryClient.invalidateQueries({
+      queryKey: ['teamStatus', params]
+    })
+    document.body.style.overflow = ''
+  }
   emit('toggleModal')
   selectedID.value = id
 }

src/components/my-request/MyRequestList.vue

@@ -7,7 +7,7 @@
     <template #listCards>
       <MyRequestListCard
         v-for="info in data?.content"
-        :key="info.taskId"
+        :key="info.taskStatus + info.processorName + info.taskId"
         :info="info" />
       <NoContent v-if="data?.content.length === 0" />
     </template>
@@ -22,19 +22,19 @@
 </template>
 
 <script setup lang="ts">
+import { useParseParams } from '@/hooks/useParseParams'
+import { useMemberStore } from '@/stores/member'
 import { useRequestParamsStore } from '@/stores/params'
 import type { MyRequestResponse } from '@/types/user'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import ListContainer from '../lists/ListContainer.vue'
 import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
 import MyRequestListBar from './MyRequestListBar.vue'
 import MyRequestListCard from './MyRequestListCard.vue'
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
-import { useParseParams } from '@/hooks/useParseParams'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {

src/components/my-request/MyRequestListCard.vue

@@ -19,17 +19,26 @@
 </template>
 
 <script setup lang="ts">
+import { useRequestParamsStore } from '@/stores/params'
 import type { ListCardProps } from '@/types/common'
 import type { MyRequestListData } from '@/types/user'
 import { formatDate } from '@/utils/date'
+import { useQueryClient } from '@tanstack/vue-query'
 import { ref } from 'vue'
 import ListCardTab from '../lists/ListCardTab.vue'
 import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { info } = defineProps<{ info: MyRequestListData }>()
 const selectedID = ref<number | null>(null)
+const { params } = useRequestParamsStore()
+const queryClient = useQueryClient()
 
 const handleModal = (id: number | null) => {
+  if (!id) {
+    queryClient.invalidateQueries({
+      queryKey: ['myRequest', params]
+    })
+  }
   selectedID.value = id
 }
 

src/components/my-task/MyTaskList.vue

@@ -7,7 +7,7 @@
     <template #listCards>
       <MyTaskListCard
         v-for="info in data?.content"
-        :key="info.taskId"
+        :key="info.taskStatus + info.taskId"
         :info="info" />
       <NoContent v-if="data?.content.length === 0" />
     </template>

src/components/my-task/MyTaskListCard.vue

@@ -19,17 +19,26 @@
 </template>
 
 <script setup lang="ts">
+import { useRequestParamsStore } from '@/stores/params'
 import type { ListCardProps } from '@/types/common'
 import type { MyTaskListData } from '@/types/manager'
 import { formatDate } from '@/utils/date'
+import { useQueryClient } from '@tanstack/vue-query'
 import { ref } from 'vue'
 import ListCardTab from '../lists/ListCardTab.vue'
 import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { info } = defineProps<{ info: MyTaskListData }>()
 const selectedID = ref<number | null>(null)
+const queryClient = useQueryClient()
+const { params } = useRequestParamsStore()
 
 const handleModal = (id: number | null) => {
+  if (!id) {
+    queryClient.invalidateQueries({
+      queryKey: ['myTask', params]
+    })
+  }
   selectedID.value = id
 }
 const myRequestTabList: ListCardProps[] = [

src/components/request-history/RequestHistoryList.vue

@@ -7,7 +7,7 @@
     <template #listCards>
       <RequestHistoryListCard
         v-for="info in data?.content"
-        :key="info.taskId"
+        :key="info.taskStatus + info.processorName + info.taskId"
         :info="info" />
       <NoContent v-if="data?.content.length === 0" />
     </template>
@@ -22,19 +22,19 @@
 </template>
 
 <script setup lang="ts">
-import ListPagination from '../lists/ListPagination.vue'
-import ListContainer from '../lists/ListContainer.vue'
+import { useParseParams } from '@/hooks/useParseParams'
+import { useMemberStore } from '@/stores/member'
 import { useRequestParamsStore } from '@/stores/params'
-import RequestHistoryListBar from './RequestHistoryListBar.vue'
-import RequestHistoryListCard from './RequestHistoryListCard.vue'
+import type { RequestHistoryResponse } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
-import type { RequestHistoryResponse } from '@/types/manager'
+import ListContainer from '../lists/ListContainer.vue'
+import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
-import { useParseParams } from '@/hooks/useParseParams'
+import RequestHistoryListBar from './RequestHistoryListBar.vue'
+import RequestHistoryListCard from './RequestHistoryListCard.vue'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {

src/components/request-history/RequestHistoryListCard.vue

@@ -19,17 +19,26 @@
 </template>
 
 <script setup lang="ts">
+import { useRequestParamsStore } from '@/stores/params'
 import type { ListCardProps } from '@/types/common'
 import type { RequestHistoryListData } from '@/types/manager'
 import { formatDate } from '@/utils/date'
+import { useQueryClient } from '@tanstack/vue-query'
 import { ref } from 'vue'
 import ListCardTab from '../lists/ListCardTab.vue'
 import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { info } = defineProps<{ info: RequestHistoryListData }>()
 const selectedID = ref<number | null>(null)
+const { params } = useRequestParamsStore()
+const queryClient = useQueryClient()
 
 const handleModal = (id: number | null) => {
+  if (!id) {
+    queryClient.invalidateQueries({
+      queryKey: ['requestHistory', params]
+    })
+  }
   selectedID.value = id
 }
 const myRequestTabList: ListCardProps[] = [

src/components/request-task/ReRequestTask.vue

@@ -30,11 +30,18 @@
       cancelText="취소"
       submitText="수정" />
     <ModalView
-      :isOpen="isModalVisible"
+      :isOpen="isModalVisible === 'success'"
       :type="'successType'"
       @close="handleCancel">
       <template #header>작업이 수정되었습니다</template>
     </ModalView>
+    <ModalView
+      :isOpen="isModalVisible === 'fail'"
+      :type="'failType'"
+      @close="handleCancel">
+      <template #header>작업요청을 실패했습니다</template>
+      <template #body>잠시후 시도해주세요</template>
+    </ModalView>
   </div>
 </template>
 
@@ -59,7 +66,8 @@ const title = ref('')
 const description = ref('')
 const file = ref(null as File[] | null)
 const isInvalidate = ref('')
-const isModalVisible = ref(false)
+const isModalVisible = ref('')
+const isSubmitting = ref(false)
 
 const mainCategoryArr = ref<Category[]>([])
 const subCategoryArr = ref<SubCategory[]>([])
@@ -105,6 +113,7 @@ watch(category1, async newValue => {
 })
 
 const handleSubmit = async () => {
+  if (isSubmitting.value || isModalVisible.value) return
   if (!category2.value) {
     isInvalidate.value = 'category'
     return
@@ -158,9 +167,12 @@ const handleSubmit = async () => {
     } else {
       await patchTaskRequest(id, formData)
     }
-    isModalVisible.value = true
-  } catch (error) {
-    console.error('요청 실패:', error)
+    isModalVisible.value = 'success'
+  } catch (e) {
+    isModalVisible.value = 'fail'
+    console.error('요청 실패:', e)
+  } finally {
+    isSubmitting.value = false
   }
 }
 </script>

src/components/request-task/RequestTask.vue

@@ -30,11 +30,18 @@
       cancelText="취소"
       submitText="요청" />
     <ModalView
-      :isOpen="isModalVisible"
+      :isOpen="isModalVisible === 'success'"
       :type="'successType'"
       @close="handleCancel">
       <template #header>작업이 요청되었습니다</template>
     </ModalView>
+    <ModalView
+      :isOpen="isModalVisible === 'fail'"
+      :type="'failType'"
+      @close="handleCancel">
+      <template #header>작업요청을 실패했습니다</template>
+      <template #body>잠시후 시도해주세요</template>
+    </ModalView>
   </div>
 </template>
 
@@ -58,7 +65,8 @@ const title = ref('')
 const description = ref('')
 const file = ref(null as File[] | null)
 const isInvalidate = ref('')
-const isModalVisible = ref(false)
+const isModalVisible = ref('')
+const isSubmitting = ref(false)
 
 const mainCategoryArr = ref<Category[]>([])
 const subCategoryArr = ref<SubCategory[]>([])
@@ -92,10 +100,13 @@ const handleCancel = () => {
   title.value = ''
   description.value = ''
   file.value = []
+  isModalVisible.value = ''
   router.back()
 }
 
 const handleSubmit = async () => {
+  if (isSubmitting.value || isModalVisible.value) return
+
   if (!category1.value || !category2.value) {
     isInvalidate.value = 'category'
     return
@@ -109,26 +120,30 @@ const handleSubmit = async () => {
     isInvalidate.value = 'description'
     return
   }
+
+  isSubmitting.value = true
+
   const formData = new FormData()
   const taskInfo = {
     categoryId: category2.value.subCategoryId,
     title: title.value,
     description: description.value
   }
-
   const jsonTaskInfo = JSON.stringify(taskInfo)
   const newBlob = new Blob([jsonTaskInfo], { type: 'application/json' })
-
   formData.append('taskInfo', newBlob)
 
   if (file.value && file.value.length > 0) {
     file.value.forEach(f => formData.append('attachment', f))
   }
   try {
     await postTaskRequest(formData)
-    isModalVisible.value = true
-  } catch (error) {
-    console.error('요청 실패:', error)
+    isModalVisible.value = 'success'
+  } catch (e) {
+    console.error(e)
+    isModalVisible.value = 'fail'
+  } finally {
+    isSubmitting.value = false
   }
 }
 </script>