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

src/components/my-request/MyRequestList.vue

@@ -15,7 +15,7 @@
     <template #pagination>
       <ListPagination
         :page-number="params.page + 1"
-        :total-page="totalPage"
+        :total-page="totalPage || 0"
         @update:page-number="onPageChange" />
     </template>
   </ListContainer>
@@ -26,20 +26,20 @@ import { useRequestParamsStore } from '@/stores/params'
 import type { MyRequestResponse } from '@/types/user'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
-import { ref, watch } from 'vue'
 import { useParseParams } from '../hooks/useParseParams'
 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 { computed } from 'vue'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
   params.page = value
 }
 
-const fetchRequestList = async () => {
+const fetchMyRequestList = async () => {
   const { parseRequestParams } = useParseParams()
   const parsedParams = parseRequestParams(params)
   const response = await axiosInstance.get('/api/tasks/requests', {
@@ -53,15 +53,10 @@ const fetchRequestList = async () => {
 
 const { data } = useQuery<MyRequestResponse>({
   queryKey: ['myRequest', params],
-  queryFn: fetchRequestList
+  queryFn: fetchMyRequestList
 })
 
-watch(
-  data,
-  () => {
-    if (data.value?.totalPages) totalPage.value = data.value.totalPages
-  },
-  { once: true }
-)
-const totalPage = ref(0)
+const totalPage = computed(() => {
+  return data.value?.totalPages
+})
 </script>

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

@@ -6,15 +6,16 @@
 
     <template #listCards>
       <RequestHistoryListCard
-        v-for="info in DUMMY_REQUEST_HISTORY_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_REQUEST_HISTORY_LIST_DATA } from '@/datas/dummy'
 import { useRequestParamsStore } from '@/stores/params'
 import RequestHistoryListBar from './RequestHistoryListBar.vue'
 import RequestHistoryListCard from './RequestHistoryListCard.vue'
+import { useParseParams } from '../hooks/useParseParams'
+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 DUMMY_TOTAL_PAGE = 18
 const onPageChange = (value: number) => {
   params.page = value
 }
 
-// Data Handling
+const fetchRequestHistoryList = async () => {
+  const { parseRequestParams } = useParseParams()
+  const parsedParams = parseRequestParams(params)
+  const response = await axiosInstance.get('/api/tasks', {
+    headers: {
+      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
+    },
+    params: parsedParams
+  })
+  return response.data
+}
+
+const { data } = useQuery<RequestHistoryResponse>({
+  queryKey: ['requestHistory', params],
+  queryFn: fetchRequestHistoryList
+})
+
+const totalPage = computed(() => {
+  return data.value?.totalPages
+})
 </script>

src/components/request-history/RequestHistoryListCard.vue

@@ -15,17 +15,18 @@
 import type { ListCardProps } from '@/types/common'
 import ListCardTab from '../lists/ListCardTab.vue'
 import type { RequestHistoryListData } from '@/types/manager'
+import { formatDate } from '@/utils/date'
 
 const { info } = defineProps<{ info: RequestHistoryListData }>()
 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.processorName, width: 120, profileImg: info.processorImg },
   { content: info.taskStatus, width: 64, isStatus: true },
-  { content: info.finishedAt, width: 80 }
+  { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 }
 ]
 </script>

src/components/requested/RequestedFilterBar.vue

@@ -16,7 +16,7 @@
       :value="store.params.title"
       @update:value="onParamsChange.onTitleChange" />
     <FilterInput
-      title="처리자"
+      title="요청자"
       :value="store.params.nickName"
       @update:value="onParamsChange.onNickNameChange" />
     <FilterDropdown

src/components/requested/RequestedList.vue

@@ -6,15 +6,16 @@
 
     <template #listCards>
       <RequestedListCard
-        v-for="info in DUMMY_REQUESTED_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>
@@ -24,15 +25,38 @@
 import ListPagination from '../lists/ListPagination.vue'
 import ListContainer from '../lists/ListContainer.vue'
 import RequestedListBar from './RequestedListBar.vue'
-import { DUMMY_REQUESTED_LIST_DATA } from '@/datas/dummy'
 import RequestedListCard from './RequestedListCard.vue'
 import { useRequestParamsStore } from '@/stores/params'
+import { useParseParams } from '../hooks/useParseParams'
+import axiosInstance from '@/utils/axios'
+import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+import type { RequestedResponse } from '@/types/manager'
+import NoContent from '../lists/NoContent.vue'
 
 const { params } = useRequestParamsStore()
-const DUMMY_TOTAL_PAGE = 18
 const onPageChange = (value: number) => {
   params.page = value
 }
 
-// Data Handling
+const fetchRequestedList = async () => {
+  const { parseRequestParams } = useParseParams()
+  const parsedParams = parseRequestParams(params)
+  const response = await axiosInstance.get('/api/tasks/requests/pending', {
+    headers: {
+      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
+    },
+    params: parsedParams
+  })
+  return response.data
+}
+
+const { data } = useQuery<RequestedResponse>({
+  queryKey: ['requested', params],
+  queryFn: fetchRequestedList
+})
+
+const totalPage = computed(() => {
+  return data.value?.totalPages
+})
 </script>

src/components/requested/RequestedListCard.vue

@@ -24,10 +24,11 @@ import type { ListCardProps } from '@/types/common'
 import ListCardTab from '../lists/ListCardTab.vue'
 import type { RequestedListData } from '@/types/manager'
 import { useRouter } from 'vue-router'
+import { formatDate } from '@/utils/date'
 
 const { info } = defineProps<{ info: RequestedListData }>()
 const requestedTabList: ListCardProps[] = [
-  { content: info.requestedAt, width: 80 },
+  { content: formatDate(info.requestedAt), width: 80 },
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },

src/constants/common.ts

@@ -9,7 +9,7 @@ export const TERM_LIST = [
 export const TASK_STATUS_LIST = [
   { value: 'REQUESTED', content: '요청' },
   { value: 'IN_PROGRESS', content: '진행 중' },
-  { value: 'IN_REVIEWING', content: '검토 중' },
+  { value: 'PENDING_COMPLETED', content: '검토 중' },
   { value: 'COMPLETED', content: '완료' },
   { value: 'TERMINATED', content: '종료' }
 ]