CLAP-202 담당자 기능 목록 조회 API 연결

src/components/my-task/MyTaskList.vue

@@ -6,15 +6,16 @@
 
     <template #listCards>
       <MyTaskListCard
-        v-for="info in DUMMY_MY_TASK_LIST_DATA"
+        v-for="info in data?.content"
         :key="info.taskId"
         :info="info" />
+      <NoContent v-if="data?.content.length === 0" />
     </template>
 
     <template #pagination>
       <ListPagination
-        :page-number="params.page"
-        :total-page="DUMMY_TOTAL_PAGE"
+        :page-number="params.page + 1"
+        :total-page="totalPage || 0"
         @update:page-number="onPageChange" />
     </template>
   </ListContainer>
@@ -23,16 +24,39 @@
 <script setup lang="ts">
 import ListPagination from '../lists/ListPagination.vue'
 import ListContainer from '../lists/ListContainer.vue'
-import { DUMMY_MY_TASK_LIST_DATA } from '@/datas/dummy'
 import { useRequestParamsStore } from '@/stores/params'
 import MyTaskListCard from './MyTaskListCard.vue'
 import MyTaskListBar from './MyTaskListBar.vue'
+import { useParseParams } from '../hooks/useParseParams'
+import axiosInstance from '@/utils/axios'
+import type { MyTaskResponse } from '@/types/manager'
+import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+import NoContent from '../lists/NoContent.vue'
 
 const { params } = useRequestParamsStore()
-const DUMMY_TOTAL_PAGE = 18
 const onPageChange = (value: number) => {
   params.page = value
 }
 
-// Data Handling
+const fetchMyTaskList = async () => {
+  const { parseRequestParams } = useParseParams()
+  const parsedParams = parseRequestParams(params)
+  const response = await axiosInstance.get('/api/tasks/assigned', {
+    headers: {
+      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
+    },
+    params: parsedParams
+  })
+  return response.data
+}
+
+const { data } = useQuery<MyTaskResponse>({
+  queryKey: ['myTask', params],
+  queryFn: fetchMyTaskList
+})
+
+const totalPage = computed(() => {
+  return data.value?.totalPages
+})
 </script>

src/components/my-task/MyTaskListCard.vue

@@ -15,16 +15,17 @@
 import type { ListCardProps } from '@/types/common'
 import ListCardTab from '../lists/ListCardTab.vue'
 import type { MyTaskListData } from '@/types/manager'
+import { formatDate } from '@/utils/date'
 
 const { info } = defineProps<{ info: MyTaskListData }>()
 const myRequestTabList: ListCardProps[] = [
   { content: info.taskCode, width: 120, isTextXs: true },
-  { content: info.requestedAt, width: 80 },
+  { content: formatDate(info.requestedAt), width: 80 },
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },
   { content: info.requesterName, width: 120, profileImg: info.requesterImg },
   { content: info.taskStatus, width: 64, isStatus: true },
-  { content: info.finishedAt, width: 80 }
+  { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 }
 ]
 </script>

src/components/request-history/RequestHistoryList.vue

@@ -9,6 +9,7 @@
         v-for="info in data?.content"
         :key="info.taskId"
         :info="info" />
+      <NoContent v-if="data?.content.length === 0" />
     </template>
 
     <template #pagination>
@@ -31,6 +32,7 @@ import axiosInstance from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 import type { RequestHistoryResponse } from '@/types/manager'
+import NoContent from '../lists/NoContent.vue'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {