CLAP-192 내 요청 페이지 API 연결

src/components/TaskStatus.vue

@@ -5,14 +5,15 @@
     <span
       class="text-xs font-bold"
       :class="textColor">
-      {{ status }}
+      {{ statusAsText(status) }}
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { Status } from '@/types/common'
 import { statusAsColor } from '@/utils/statusAsColor'
+import { statusAsText } from '@/utils/statusAsText'
 import { computed } from 'vue'
 
 const { status, isActive } = defineProps<{

src/components/lists/ListContainer.vue

@@ -3,7 +3,7 @@
     <div class="w-full flex flex-col grow overflow-hidden">
       <slot name="listBar" />
 
-      <div class="overflow-y-auto">
+      <div class="grow overflow-y-auto">
         <slot name="listCards" />
       </div>
     </div>

src/components/lists/ListPagination.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="w-fit flex items-center gap-2 relative">
+  <div
+    v-if="totalPage"
+    class="w-fit h-6 flex items-center gap-2 relative">
     <div class="flex gap-1 absolute left-0 top-1/2 -translate-x-[calc(100%+8px)] -translate-y-1/2">
       <button
-        v-if="pageSet[0] !== 0"
+        v-if="pageSet[0] !== 1"
         @click="onPrevSetClick"
         class="rounded hover:bg-primary2">
         <CommonIcons :name="prevSetIcon" />
@@ -21,7 +23,7 @@
         page === pageNumber ? 'text-white font-bold bg-primary1' : 'text-black hover:bg-primary2'
       "
       @click="onNumClick(page)">
-      {{ page + 1 }}
+      {{ page }}
     </button>
     <div class="flex gap-1 absolute right-0 top-1/2 translate-x-[calc(100%+8px)] -translate-y-1/2">
       <button
@@ -49,7 +51,7 @@ const emit = defineEmits(['update:pageNumber'])
 
 const pageSet = computed(() => {
   const set: number[] = []
-  const startPage = Math.floor(pageNumber / 5) * 5
+  const startPage = Math.floor((pageNumber - 1) / 5) * 5 + 1
   for (let i = 0; i < 5; i++) {
     if (startPage + i > totalPage) break
     set.push(startPage + i)
@@ -58,24 +60,22 @@ const pageSet = computed(() => {
 })
 
 const onPrevSetClick = () => {
-  const prevSetEnd = Math.floor(pageNumber / 5) * 5 - 1
-  emit('update:pageNumber', prevSetEnd)
+  const prevSetEnd = Math.floor((pageNumber - 1) / 5) * 5
+  emit('update:pageNumber', prevSetEnd - 1)
 }
 const onPrevClick = () => {
-  const prev = Math.max(pageNumber - 1, 0)
-  emit('update:pageNumber', prev)
+  const prev = Math.max(pageNumber - 1, 1)
+  emit('update:pageNumber', prev - 1)
 }
 const onNextClick = () => {
   const next = Math.min(pageNumber + 1, totalPage)
-  emit('update:pageNumber', next)
+  emit('update:pageNumber', next - 1)
 }
 const onNextSetClick = () => {
-  const nextSetStart = Math.floor(pageNumber / 5) * 5 + 5
-  emit('update:pageNumber', Math.min(nextSetStart, totalPage))
+  const nextSetStart = Math.floor((pageNumber - 1) / 5) * 5 + 6
+  emit('update:pageNumber', nextSetStart - 1)
 }
 const onNumClick = (num: number) => {
-  emit('update:pageNumber', num)
+  emit('update:pageNumber', num - 1)
 }
 </script>
-
-<style scoped></style>

src/components/lists/NoContent.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="w-full h-full flex justify-center items-center">
+    <span class="text-lg text-disabled font-bold">{{ content }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { content = '표시할 항목이 없어요' } = defineProps<{ content?: string }>()
+</script>

src/components/my-request/MyRequestFilterBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-4">
+  <div class="flex gap-4 z-30">
     <FilterDropdown
       title="조회 기간"
       :option-list="TERM_LIST"

src/components/my-request/MyRequestList.vue

@@ -9,12 +9,13 @@
         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="data?.totalPages || 0"
+        :page-number="params.page + 1"
+        :total-page="totalPage"
         @update:page-number="onPageChange" />
     </template>
   </ListContainer>
@@ -30,6 +31,8 @@ import axiosInstance from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import { useParseParams } from '../hooks/useParseParams'
 import type { MyRequestResponse } from '@/types/user'
+import { ref, watch } from 'vue'
+import NoContent from '../lists/NoContent.vue'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
@@ -43,7 +46,7 @@ const fetchRequestList = async () => {
     headers: {
       Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
     },
-    params: parsedParams
+    params: { ...parsedParams, pageSize: 1 }
   })
   return response.data
 }
@@ -52,4 +55,13 @@ const { data } = useQuery<MyRequestResponse>({
   queryKey: ['myRequest', params],
   queryFn: fetchRequestList
 })
+
+watch(
+  data,
+  () => {
+    if (data.value?.totalPages) totalPage.value = data.value.totalPages
+  },
+  { once: true }
+)
+const totalPage = ref(0)
 </script>

src/components/my-request/MyRequestListCard.vue

@@ -15,16 +15,17 @@
 import type { ListCardProps } from '@/types/common'
 import ListCardTab from '../lists/ListCardTab.vue'
 import type { MyRequestListData } from '@/types/user'
+import { formatDate } from '@/utils/date'
 
 const { info } = defineProps<{ info: MyRequestListData }>()
 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.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>