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

package.json

@@ -13,6 +13,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@tanstack/vue-query": "^5.66.0",
     "axios": "^1.7.9",
     "chart.js": "^4.4.7",
     "js-cookie": "^3.0.5",

src/components/SideBar.vue

@@ -69,7 +69,7 @@ import { SIDE_USER_MENU, SIDE_MANAGER_MENU, SIDE_ADMIN_MENU } from '@/constants/
 const route = useRoute()
 
 // 회원 역할, 닉네임 필요
-const role = ref('admin')
+const role = ref('manager')
 const name = ref('백지연')
 const nickname = ref('Chloe.yeon')
 

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/filters/FilterCategory.vue

@@ -23,7 +23,7 @@
                 : 'hover:bg-background-2 text-black'
             "
             @click="() => onMainClick(category)">
-            {{ category.content }}
+            {{ category.name }}
           </li>
         </ul>
       </div>
@@ -45,25 +45,25 @@
           <ul
             class="flex flex-col gap-2"
             v-for="category in selectedCategoryList"
-            :key="category.content">
+            :key="category.name">
             <div class="w-full flex items-center gap-2">
               <div class="h-[1px] grow bg-border-2" />
               <span class="text-[10px] font-bold text-disabled">
-                {{ category.content }}
+                {{ category.name }}
               </span>
               <div class="h-[1px] grow bg-border-2" />
             </div>
             <li
               class="filter-dropdown-option"
-              v-for="subCategory in category.subCategoryList"
+              v-for="subCategory in category.subCategory"
               :key="subCategory.id"
               :class="
                 (sub as number[]).includes(subCategory.id)
                   ? 'bg-primary1 text-white font-bold'
                   : 'hover:bg-background-2 text-black'
               "
               @click="() => onSubClick(subCategory.id)">
-              {{ subCategory.content }}
+              {{ subCategory.name }}
             </li>
           </ul>
         </ul>
@@ -78,7 +78,7 @@ import type { Category, FilterCategoryProps } from '@/types/common'
 import { computed, ref, watchEffect } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { categoryList, main, sub } = defineProps<FilterCategoryProps>()
+const { categoryList = [], main, sub } = defineProps<FilterCategoryProps>()
 const emit = defineEmits(['update:main', 'update:sub'])
 
 const isMainOpened = ref(false)
@@ -88,7 +88,7 @@ const toggleDropdown = (type: 'main' | 'sub') =>
     ? (isMainOpened.value = !isMainOpened.value)
     : (isSubOpened.value = !isSubOpened.value)
 
-const selectedCategoryList = ref<{ content: string; subCategoryList: Category[] }[]>([])
+const selectedCategoryList = ref<{ name: string; subCategory: Category[] }[]>([])
 const isDisabled = computed(() => {
   return selectedCategoryList.value.length === 0
 })
@@ -97,22 +97,22 @@ watchEffect(() => {
 })
 
 const onMainClick = (category: Category) => {
-  if (selectedCategoryList.value.map(el => el.content).includes(category.content)) {
+  if (selectedCategoryList.value.map(el => el.name).includes(category.name)) {
     selectedCategoryList.value = [...selectedCategoryList.value].filter(
-      el => el.content !== category.content
+      el => el.name !== category.name
     )
-    if (category.subCategoryList) {
-      category.subCategoryList.forEach(el => {
+    if (category.subCategory) {
+      category.subCategory.forEach(el => {
         if ((sub as number[]).includes(el.id)) {
           emit('update:sub', el.id)
         }
       })
     }
   } else {
-    if (category.subCategoryList) {
+    if (category.subCategory) {
       selectedCategoryList.value.push({
-        content: category.content,
-        subCategoryList: category.subCategoryList
+        name: category.name,
+        subCategory: category.subCategory
       })
     }
   }
@@ -122,5 +122,3 @@ const onSubClick = (value: number) => {
   emit('update:sub', value)
 }
 </script>
-
-<style scoped></style>

src/components/hooks/useLogsParamsChange.ts

@@ -24,8 +24,7 @@ export const useLogsParamsChange = () => {
   }
 
   const toggleSortBy = () => {
-    params.orderRequest.sortDirection =
-      params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC'
+    params.sortDirection = params.sortDirection === 'DESC' ? 'ASC' : 'DESC'
   }
 
   return {

src/components/hooks/useParseParams.ts

@@ -0,0 +1,24 @@
+import type { RequestParams, TaskBoardParams, TeamBoardParams } from '@/types/stores'
+
+export const useParseParams = () => {
+  const parseRequestParams = (params: RequestParams) => {
+    const newParams = {
+      ...params,
+      mainCategoryIds: params.mainCategoryIds.join(','),
+      categoryIds: params.categoryIds.join(','),
+      taskStatus: params.taskStatus?.join(',')
+    }
+    return newParams
+  }
+
+  const parseBoardParams = (params: TaskBoardParams | TeamBoardParams) => {
+    const newParams = {
+      ...params,
+      mainCategoryIds: params.mainCategoryIds.join(','),
+      categoryIds: params.categoryIds.join(',')
+    }
+    return newParams
+  }
+
+  return { parseRequestParams, parseBoardParams }
+}

src/components/hooks/useRequestParamsChange.ts

@@ -21,10 +21,10 @@ export const useRequestParamsChange = () => {
     params.nickName = value
   }
   const onMainChange = (value: number) => {
-    params.mainCategoryId = onArrayChange(params.mainCategoryId, value)
+    params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value)
   }
   const onSubChange = (value: number) => {
-    params.categoryId = onArrayChange(params.categoryId, value)
+    params.categoryIds = onArrayChange(params.categoryIds, value)
   }
   const onTaskStatusChange = (value: string) => {
     params.taskStatus = onArrayChange(params.taskStatus!, value)
@@ -33,12 +33,12 @@ export const useRequestParamsChange = () => {
     params.pageSize = Number(value)
   }
 
-  const toggleSortBy = (sortBy: 'REQUESTED' | 'FINISHED') => {
-    if (sortBy === params.orderRequest.sortBy) {
-      params.orderRequest.sortDirection =
-        params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC'
+  const toggleSortBy = (sortBy: 'REQUESTED_AT' | 'FINISHED_AT') => {
+    if (sortBy === params.sortBy) {
+      params.sortDirection = params.sortDirection === 'DESC' ? 'ASC' : 'DESC'
     } else {
-      params.orderRequest = { sortBy, sortDirection: 'DESC' }
+      params.sortBy = sortBy
+      params.sortDirection = 'DESC'
     }
   }
 

src/components/hooks/useTeamBoardParamsChange.ts

@@ -14,10 +14,10 @@ export const useTeamBoardParamsChange = () => {
     params.title = value
   }
   const onMainChange = (value: number) => {
-    params.mainCategoryId = onArrayChange(params.mainCategoryId, value)
+    params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value)
   }
   const onSubChange = (value: number) => {
-    params.categoryId = onArrayChange(params.categoryId, value)
+    params.categoryIds = onArrayChange(params.categoryIds, value)
   }
 
   return {

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,5 +1,7 @@
 <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] !== 1"
@@ -59,23 +61,21 @@ const pageSet = computed(() => {
 
 const onPrevSetClick = () => {
   const prevSetEnd = Math.floor((pageNumber - 1) / 5) * 5
-  emit('update:pageNumber', prevSetEnd)
+  emit('update:pageNumber', prevSetEnd - 1)
 }
 const onPrevClick = () => {
   const prev = Math.max(pageNumber - 1, 1)
-  emit('update:pageNumber', prev)
+  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 - 1) / 5) * 5 + 6
-  emit('update:pageNumber', nextSetStart)
+  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/member-management/MemberManagementListBar.vue

@@ -6,7 +6,7 @@
       :content="tab.content"
       :width="tab.width"
       :sortBy="tab.sortBy"
-      :current-order-request="params.orderRequest"
+      :current-order-request="orderRequest"
       :justify-center="tab.justifyCenter"
       @toggle-sort-by="toggleSortBy" />
   </div>
@@ -16,10 +16,15 @@
 import { MEMBER_MANAGEMENT_LIST_BAR_TAB } from '@/constants/admin'
 import ListBarTab from '../lists/ListBarTab.vue'
 import { useMemberManagementParamsStore } from '@/stores/params'
+import { computed } from 'vue'
 
 const { params } = useMemberManagementParamsStore()
+const orderRequest = computed(() => ({
+  sortBy: params.sortBy,
+  sortDirection: params.sortDirection
+}))
 
 const toggleSortBy = () => {
-  params.orderRequest.sortDirection = params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC'
+  params.sortDirection = params.sortDirection === 'DESC' ? 'ASC' : 'DESC'
 }
 </script>