From 46cb58c1bc4e7212585a3dc3002e7113cb09a561 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Mon, 3 Feb 2025 16:25:38 +0900
Subject: [PATCH 1/3] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EA=B5=AC?=
 =?UTF-8?q?=EB=B6=84=20=EB=AA=A9=EB=A1=9D=20API=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/common.ts                             | 10 +++++++
 .../my-request/MyRequestFilterBar.vue         |  9 ++----
 src/components/my-task/MyTaskFilterBar.vue    |  9 ++----
 .../RequestHistoryFilterBar.vue               |  9 ++----
 .../requested/RequestedFilterBar.vue          |  9 ++----
 .../task-board/TaskBoardFilterBar.vue         | 28 +++++++++++--------
 .../team-board/TeamBoardFilterBar.vue         |  9 ++----
 src/types/common.ts                           |  6 ++++
 8 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/src/api/common.ts b/src/api/common.ts
index a0d4fd4e..2cdf19a5 100644
--- a/src/api/common.ts
+++ b/src/api/common.ts
@@ -9,3 +9,13 @@ export const getSubCategory = async () => {
   const response = await axiosInstance.get('/api/sub-category')
   return response.data
 }
+
+export const getLabels = async () => {
+  const response = await axiosInstance.get('/api/labels')
+  return response.data
+}
+
+export const getCategory = async () => {
+  const response = await axiosInstance.get('/api/category')
+  return response.data
+}
diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue
index cd96cacd..4d90dd5e 100644
--- a/src/components/my-request/MyRequestFilterBar.vue
+++ b/src/components/my-request/MyRequestFilterBar.vue
@@ -35,26 +35,21 @@
 <script setup lang="ts">
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsStore } from '@/stores/params'
-import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
+import { getCategory } from '@/api/common'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
-const fetchCategory = async () => {
-  const response = await axiosInstance.get('/api/category')
-  return response.data
-}
-
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: fetchCategory
+  queryFn: getCategory
 })
 </script>
diff --git a/src/components/my-task/MyTaskFilterBar.vue b/src/components/my-task/MyTaskFilterBar.vue
index 9410997d..da9deb32 100644
--- a/src/components/my-task/MyTaskFilterBar.vue
+++ b/src/components/my-task/MyTaskFilterBar.vue
@@ -41,20 +41,15 @@ import { useRequestParamsStore } from '@/stores/params'
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
-import {axiosInstance} from '@/utils/axios'
+import { getCategory } from '@/api/common'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
-const fetchCategory = async () => {
-  const response = await axiosInstance.get('/api/category')
-  return response.data
-}
-
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: fetchCategory
+  queryFn: getCategory
 })
 </script>
diff --git a/src/components/request-history/RequestHistoryFilterBar.vue b/src/components/request-history/RequestHistoryFilterBar.vue
index bc418079..df5c3496 100644
--- a/src/components/request-history/RequestHistoryFilterBar.vue
+++ b/src/components/request-history/RequestHistoryFilterBar.vue
@@ -35,26 +35,21 @@
 <script setup lang="ts">
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsStore } from '@/stores/params'
-import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
+import { getCategory } from '@/api/common'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
-const fetchCategory = async () => {
-  const response = await axiosInstance.get('/api/category')
-  return response.data
-}
-
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: fetchCategory
+  queryFn: getCategory
 })
 </script>
diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue
index 0539f796..ab432350 100644
--- a/src/components/requested/RequestedFilterBar.vue
+++ b/src/components/requested/RequestedFilterBar.vue
@@ -35,20 +35,15 @@ import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsStore } from '@/stores/params'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
-import {axiosInstance} from '@/utils/axios'
+import { getCategory } from '@/api/common'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
-const fetchCategory = async () => {
-  const response = await axiosInstance.get('/api/category')
-  return response.data
-}
-
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: fetchCategory
+  queryFn: getCategory
 })
 </script>
diff --git a/src/components/task-board/TaskBoardFilterBar.vue b/src/components/task-board/TaskBoardFilterBar.vue
index d9c2f338..24561a88 100644
--- a/src/components/task-board/TaskBoardFilterBar.vue
+++ b/src/components/task-board/TaskBoardFilterBar.vue
@@ -2,11 +2,11 @@
   <div class="flex gap-4 z-40">
     <FilterDropdown
       title="구분"
-      :option-list="DUMMY_DIVISION_LIST"
+      :option-list="labelOptionList"
       :value="params.division"
       @update:value="onDivisionChange" />
     <FilterCategory
-      :category-list="data"
+      :category-list="categoryList"
       :main="params.mainCategoryIds"
       :sub="params.categoryIds"
       @update:main="onMainChange"
@@ -26,10 +26,11 @@
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterInput from '../filters/FilterInput.vue'
-import { DUMMY_DIVISION_LIST } from '@/datas/dummy'
 import { useTaskBoardParamsStore } from '@/stores/params'
 import { useQuery } from '@tanstack/vue-query'
-import {axiosInstance} from '@/utils/axios'
+import { computed } from 'vue'
+import type { LabelResponse } from '@/types/common'
+import { getCategory, getLabels } from '@/api/common'
 
 const { params } = useTaskBoardParamsStore()
 
@@ -53,13 +54,18 @@ const onTitleChange = (value: string) => {
   params.title = value
 }
 
-const fetchCategory = async () => {
-  const response = await axiosInstance.get('/api/category')
-  return response.data
-}
-
-const { data } = useQuery({
+const { data: categoryList } = useQuery({
   queryKey: ['category'],
-  queryFn: fetchCategory
+  queryFn: getCategory
+})
+
+const { data: labelList } = useQuery<LabelResponse[]>({
+  queryKey: ['label'],
+  queryFn: getLabels
+})
+const labelOptionList = computed(() => {
+  const list = [{ value: '', content: '전체' }]
+  labelList.value?.forEach(el => list.push({ value: String(el.labelId), content: el.labelName }))
+  return list
 })
 </script>
diff --git a/src/components/team-board/TeamBoardFilterBar.vue b/src/components/team-board/TeamBoardFilterBar.vue
index e76be4e1..3959680f 100644
--- a/src/components/team-board/TeamBoardFilterBar.vue
+++ b/src/components/team-board/TeamBoardFilterBar.vue
@@ -23,24 +23,19 @@
 
 <script setup lang="ts">
 import { useTeamBoardParamsStore } from '@/stores/params'
-import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useTeamBoardParamsChange } from '../hooks/useTeamBoardParamsChange'
+import { getCategory } from '@/api/common'
 
 const { params } = useTeamBoardParamsStore()
 
 const onParamsChange = useTeamBoardParamsChange()
 
-const fetchCategory = async () => {
-  const response = await axiosInstance.get('/api/category')
-  return response.data
-}
-
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: fetchCategory
+  queryFn: getCategory
 })
 </script>
diff --git a/src/types/common.ts b/src/types/common.ts
index 3cb18d94..2196afbf 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -100,3 +100,9 @@ export interface CategoryDropdownProps {
   isDisabled?: boolean
   isInvalidate?: string
 }
+
+export interface LabelResponse {
+  labelId: number
+  labelName: string
+  labelColor: string
+}

From c97fff70bec87435c454c97ef80b3509078f3504 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Tue, 4 Feb 2025 11:40:22 +0900
Subject: [PATCH 2/3] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=20=EB=B3=B4=EB=93=9C=20=EC=A1=B0=ED=9A=8C=20API=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-board/TaskBoard.vue       |  49 +++--
 .../task-board/TaskBoardFilterBar.vue         |  17 +-
 src/datas/dummy.ts                            | 208 ------------------
 src/stores/params.ts                          |   6 +-
 src/types/manager.ts                          |   9 +-
 src/types/stores.ts                           |   6 +-
 6 files changed, 49 insertions(+), 246 deletions(-)

diff --git a/src/components/task-board/TaskBoard.vue b/src/components/task-board/TaskBoard.vue
index b4f76670..d2baa9f1 100644
--- a/src/components/task-board/TaskBoard.vue
+++ b/src/components/task-board/TaskBoard.vue
@@ -3,17 +3,17 @@
     <div class="w-full flex gap-12 sticky top-0 bg-white z-30">
       <div class="flex flex-1 bg-primary2 rounded-t-lg">
         <span class="text-xs font-bold text-body p-4">
-          진행 중 {{ cardList.tasksInProgress.length }}
+          진행 중 {{ data?.tasksInProgress.length }}
         </span>
       </div>
       <div class="flex flex-1 bg-primary2 rounded-t-lg">
         <span class="text-xs font-bold text-body p-4">
-          검토 중 {{ cardList.tasksPendingComplete.length }}
+          검토 중 {{ data?.tasksPendingComplete.length }}
         </span>
       </div>
       <div class="flex flex-1 bg-primary2 rounded-t-lg">
         <span class="text-xs font-bold text-body p-4">
-          완료 {{ cardList.tasksCompleted.length }}
+          완료 {{ data?.tasksCompleted.length }}
         </span>
       </div>
     </div>
@@ -22,7 +22,7 @@
       <div class="flex-1 px-4 pb-4 bg-primary2 rounded-b-lg relative">
         <div class="absolute top-0 left-0 px-4 w-full">
           <div
-            v-if="cardList.tasksInProgress.length === 0"
+            v-if="data?.tasksInProgress.length === 0"
             class="w-full max-w-80 h-[130px] bg-white border border-dashed border-border-1 rounded-lg flex justify-center items-center">
             <span class="whitespace-pre-wrap text-center text-sm font-bold text-disabled">
               {{ '상태를 변경할 작업을\n끌어 놓으세요' }}
@@ -30,7 +30,7 @@
           </div>
         </div>
         <draggableComponent
-          :list="cardList.tasksInProgress"
+          :list="data?.tasksInProgress"
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
@@ -46,7 +46,7 @@
       <div class="flex-1 px-4 pb-4 bg-primary2 rounded-b-lg relative">
         <div class="absolute top-0 left-0 px-4 w-full">
           <div
-            v-if="cardList.tasksPendingComplete.length === 0"
+            v-if="data?.tasksPendingComplete.length === 0"
             class="w-full max-w-80 h-[130px] bg-white border border-dashed border-border-1 rounded-lg flex justify-center items-center">
             <span class="whitespace-pre-wrap text-center text-sm font-bold text-disabled">
               {{ '상태를 변경할 작업을\n끌어 놓으세요' }}
@@ -54,7 +54,7 @@
           </div>
         </div>
         <draggableComponent
-          :list="cardList.tasksPendingComplete"
+          :list="data?.tasksPendingComplete"
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
@@ -70,7 +70,7 @@
       <div class="flex-1 px-4 pb-4 bg-primary2 rounded-b-lg relative">
         <div class="absolute top-0 left-0 px-4 w-full">
           <div
-            v-if="cardList.tasksCompleted.length === 0"
+            v-if="data?.tasksCompleted.length === 0"
             class="w-full max-w-80 h-[130px] bg-white border border-dashed border-border-1 rounded-lg flex justify-center items-center">
             <span class="whitespace-pre-wrap text-center text-sm font-bold text-disabled">
               {{ '상태를 변경할 작업을\n끌어 놓으세요' }}
@@ -78,7 +78,7 @@
           </div>
         </div>
         <draggableComponent
-          :list="cardList.tasksCompleted"
+          :list="data?.tasksCompleted"
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
@@ -95,13 +95,14 @@
 </template>
 
 <script setup lang="ts">
-import { DUMMY_TASK_CARD_LIST } from '@/datas/dummy'
 import { ref } from 'vue'
 import draggableComponent from 'vuedraggable'
 import TaskCard from '../TaskCard.vue'
-import type { DraggableEvent } from '@/types/manager'
-
-const cardList = ref(DUMMY_TASK_CARD_LIST)
+import type { DraggableEvent, TaskCardList } from '@/types/manager'
+import { axiosInstance } from '@/utils/axios'
+import { useParseParams } from '../hooks/useParseParams'
+import { useTaskBoardParamsStore } from '@/stores/params'
+import { useQuery } from '@tanstack/vue-query'
 
 const status = {
   tasksInProgress: '진행 중',
@@ -109,10 +110,22 @@ const status = {
   tasksCompleted: '완료'
 }
 
-const onListChange = (event: DraggableEvent, key: keyof typeof status) => {
-  const { added } = event
-  if (added) {
-    cardList.value[key][added.newIndex].taskStatus = status[key]
-  }
+// const onListChange = (event: DraggableEvent, key: keyof typeof status) => {
+//   const { added } = event
+//   if (added) {
+//     cardList.value[key][added.newIndex].taskStatus = status[key]
+//   }
+// }
+
+const { params } = useTaskBoardParamsStore()
+const fetchTaskBoard = async () => {
+  const { parseBoardParams } = useParseParams()
+  const parsedParams = parseBoardParams(params)
+  const response = await axiosInstance.get('/api/task-board', { params: parsedParams })
+  return response.data
 }
+const { data } = useQuery<TaskCardList>({
+  queryKey: ['taskBoard', params],
+  queryFn: fetchTaskBoard
+})
 </script>
diff --git a/src/components/task-board/TaskBoardFilterBar.vue b/src/components/task-board/TaskBoardFilterBar.vue
index 24561a88..02551cbc 100644
--- a/src/components/task-board/TaskBoardFilterBar.vue
+++ b/src/components/task-board/TaskBoardFilterBar.vue
@@ -3,8 +3,8 @@
     <FilterDropdown
       title="구분"
       :option-list="labelOptionList"
-      :value="params.division"
-      @update:value="onDivisionChange" />
+      :value="String(params.labelId)"
+      @update:value="onLabelIdChange" />
     <FilterCategory
       :category-list="categoryList"
       :main="params.mainCategoryIds"
@@ -17,8 +17,8 @@
       @update:value="onTitleChange" />
     <FilterInput
       title="요청자"
-      :value="params.nickName"
-      @update:value="onNickNameChange" />
+      :value="params.requesterNickname"
+      @update:value="onRequesterNicknameChange" />
   </div>
 </template>
 
@@ -38,8 +38,9 @@ const onArrayChange = <Value extends number | string>(array: Value[], value: Val
   return array.includes(value) ? array.filter(el => el !== value) : [...array, value]
 }
 
-const onDivisionChange = (value: string) => {
-  params.division = value
+const onLabelIdChange = (value: string) => {
+  if (value === '') params.labelId = ''
+  else params.labelId = Number(value)
 }
 const onMainChange = (value: number) => {
   params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value)
@@ -47,8 +48,8 @@ const onMainChange = (value: number) => {
 const onSubChange = (value: number) => {
   params.categoryIds = onArrayChange(params.categoryIds, value)
 }
-const onNickNameChange = (value: string) => {
-  params.nickName = value
+const onRequesterNicknameChange = (value: string) => {
+  params.requesterNickname = value
 }
 const onTitleChange = (value: string) => {
   params.title = value
diff --git a/src/datas/dummy.ts b/src/datas/dummy.ts
index c95ad50a..cccc0b4b 100644
--- a/src/datas/dummy.ts
+++ b/src/datas/dummy.ts
@@ -1,212 +1,4 @@
 import type { LogsListData, MemberManagementListData } from '@/types/admin'
-import type { TaskCardList } from '@/types/manager'
-
-export const DUMMY_TASK_CARD_LIST: TaskCardList = {
-  tasksInProgress: [
-    {
-      taskId: 0,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '진행 중',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 1,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '진행 중',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 2,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '진행 중',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 3,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '진행 중',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 4,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '진행 중',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    }
-  ],
-  tasksPendingComplete: [
-    {
-      taskId: 5,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '검토 중',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 6,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '검토 중',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 7,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '검토 중',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 8,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '검토 중',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 9,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '검토 중',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    }
-  ],
-  tasksCompleted: [
-    {
-      taskId: 10,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '완료',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 11,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '완료',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 12,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '완료',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 13,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '완료',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    },
-    {
-      taskId: 14,
-      taskCode: 'string',
-      mainCategoryName: 'string',
-      categoryName: 'string',
-      title: 'string',
-      requesterNickName: 'string',
-      requesterImageUrl: 'string',
-      requesterDepartment: 'string',
-      processorOrder: 0,
-      taskStatus: '완료',
-      createdAt: '2025-01-28T09:34:00.128Z'
-    }
-  ],
-  hasNext: true,
-  isFirst: true,
-  isLast: true
-}
 
 export const DUMMY_MEMBER_MANAGEMENT_LIST_DATA: MemberManagementListData[] = [
   {
diff --git a/src/stores/params.ts b/src/stores/params.ts
index 17eeb14b..b2bbec49 100644
--- a/src/stores/params.ts
+++ b/src/stores/params.ts
@@ -93,13 +93,11 @@ export const useTeamBoardParamsStore = defineStore('teamBoardParams', () => {
 
 export const useTaskBoardParamsStore = defineStore('taskBoardParams', () => {
   const params = ref<TaskBoardParams>({
-    division: '',
+    labelId: '',
     mainCategoryIds: [],
     categoryIds: [],
     title: '',
-    nickName: '',
-    pageSize: 20,
-    page: 1
+    requesterNickname: ''
   })
 
   return { params }
diff --git a/src/types/manager.ts b/src/types/manager.ts
index b6147a71..e37f4e90 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -29,9 +29,13 @@ export interface RequestHistoryListData {
 export interface TaskCardProps {
   taskId: number
   taskCode: string
+  title: string
   mainCategoryName: string
   categoryName: string
-  title: string
+  labelInfo: {
+    labelName: string
+    labelColor: string
+  }
   requesterNickName: string
   requesterImageUrl: string
   requesterDepartment: string
@@ -44,9 +48,6 @@ export interface TaskCardList {
   tasksInProgress: TaskCardProps[]
   tasksPendingComplete: TaskCardProps[]
   tasksCompleted: TaskCardProps[]
-  hasNext: boolean
-  isFirst: boolean
-  isLast: boolean
 }
 
 export interface MyTaskListData {
diff --git a/src/types/stores.ts b/src/types/stores.ts
index 9c3d2f3d..2d3731a0 100644
--- a/src/types/stores.ts
+++ b/src/types/stores.ts
@@ -44,11 +44,9 @@ export interface TeamBoardParams {
 }
 
 export interface TaskBoardParams {
-  division: string | ''
+  labelId: number | ''
   mainCategoryIds: number[]
   categoryIds: number[]
   title: string
-  nickName: string
-  pageSize: number
-  page: number
+  requesterNickname: string
 }

From 9f0a485ed29ad9a9aadad9e83641e5743e84d9d9 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Tue, 4 Feb 2025 14:35:28 +0900
Subject: [PATCH 3/3] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=20=EB=B3=B4=EB=93=9C=20=EC=88=9C=EC=84=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC=ED=98=84=20=EB=B0=8F?=
 =?UTF-8?q?=20API=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TaskCard.vue             |  4 +-
 src/components/task-board/TaskBoard.vue | 88 +++++++++++++++++++------
 src/types/manager.ts                    |  2 +-
 3 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/src/components/TaskCard.vue b/src/components/TaskCard.vue
index 33784f9a..ac134507 100644
--- a/src/components/TaskCard.vue
+++ b/src/components/TaskCard.vue
@@ -16,11 +16,11 @@
       <span class="text-xs font-bold text-black">{{ data.taskCode }}</span>
       <div class="flex flex-col gap-1 items-end">
         <span class="text-xs font-bold text-body">{{ data.requesterDepartment }}</span>
-        <div class="flex items-center gap-1">
+        <div class="flex items-center gap-1.5">
           <div class="w-4 h-4 rounded-full bg-background-1 overflow-hidden">
             <img :src="data.requesterImageUrl" />
           </div>
-          <span class="text-xs font-bold text-black">{{ data.requesterNickName }}</span>
+          <span class="text-xs font-bold text-black">{{ data.requesterNickname }}</span>
         </div>
       </div>
     </div>
diff --git a/src/components/task-board/TaskBoard.vue b/src/components/task-board/TaskBoard.vue
index d2baa9f1..8670a4ba 100644
--- a/src/components/task-board/TaskBoard.vue
+++ b/src/components/task-board/TaskBoard.vue
@@ -30,15 +30,16 @@
           </div>
         </div>
         <draggableComponent
-          :list="data?.tasksInProgress"
+          :list="tasksInProgress"
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
-          @change="event => onListChange(event, 'tasksInProgress')">
+          @change="event => onListChange(event, 'IN_PROGRESS')">
           <template #item="{ element }">
             <TaskCard
               :key="element.taskId"
-              :data="element" />
+              :data="element"
+              draggable />
           </template>
         </draggableComponent>
       </div>
@@ -54,15 +55,16 @@
           </div>
         </div>
         <draggableComponent
-          :list="data?.tasksPendingComplete"
+          :list="tasksPendingComplete"
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
-          @change="event => onListChange(event, 'tasksPendingComplete')">
+          @change="event => onListChange(event, 'PENDING_COMPLETED')">
           <template #item="{ element }">
             <TaskCard
               :key="element.taskId"
-              :data="element" />
+              :data="element"
+              draggable />
           </template>
         </draggableComponent>
       </div>
@@ -78,15 +80,16 @@
           </div>
         </div>
         <draggableComponent
-          :list="data?.tasksCompleted"
+          :list="tasksCompleted"
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
-          @change="event => onListChange(event, 'tasksCompleted')">
+          @change="event => onListChange(event, 'COMPLETED')">
           <template #item="{ element }">
             <TaskCard
               :key="element.taskId"
-              :data="element" />
+              :data="element"
+              draggable />
           </template>
         </draggableComponent>
       </div>
@@ -95,27 +98,66 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import draggableComponent from 'vuedraggable'
 import TaskCard from '../TaskCard.vue'
 import type { DraggableEvent, TaskCardList } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
 import { useParseParams } from '../hooks/useParseParams'
 import { useTaskBoardParamsStore } from '@/stores/params'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { Status } from '@/types/common'
+import { computed } from 'vue'
 
-const status = {
-  tasksInProgress: '진행 중',
-  tasksPendingComplete: '검토 중',
-  tasksCompleted: '완료'
+const queryClient = useQueryClient()
+
+const statusToKey = (status: Status): keyof TaskCardList | undefined => {
+  if (status === 'IN_PROGRESS') {
+    return 'tasksInProgress'
+  } else if (status === 'PENDING_COMPLETED') {
+    return 'tasksPendingComplete'
+  } else if (status === 'COMPLETED') {
+    return 'tasksCompleted'
+  }
 }
 
-// const onListChange = (event: DraggableEvent, key: keyof typeof status) => {
-//   const { added } = event
-//   if (added) {
-//     cardList.value[key][added.newIndex].taskStatus = status[key]
-//   }
-// }
+const onListChange = async (event: DraggableEvent, status: Status) => {
+  if (event.added) {
+    const key = statusToKey(status)
+    const targetIndex = event.added.newIndex
+    const prevTaskId = (data.value && data.value[key!][targetIndex - 1]?.taskId) || 0
+    const targetTaskId = event.added.element.taskId
+    const nextTaskId = (data.value && data.value[key!][targetIndex])?.taskId || 0
+    const body = {
+      prevTaskId,
+      targetTaskId,
+      nextTaskId
+    }
+    console.log(prevTaskId, targetTaskId, nextTaskId)
+    await axiosInstance.patch('/api/task-board', body, { params: { status } })
+    queryClient.invalidateQueries({ queryKey: ['taskBoard'] })
+  }
+  if (event.moved) {
+    const key = statusToKey(status)
+    const [oldIndex, newIndex] = [event.moved.oldIndex, event.moved.newIndex]
+    const targetTaskId = event.moved.element.taskId
+    let [prevTaskId, nextTaskId] = [0, 0]
+    if (oldIndex < newIndex) {
+      prevTaskId = (data.value && data.value[key!][newIndex]?.taskId) || 0
+      nextTaskId = (data.value && data.value[key!][newIndex + 1]?.taskId) || 0
+    } else {
+      prevTaskId = (data.value && data.value[key!][newIndex - 1]?.taskId) || 0
+      nextTaskId = (data.value && data.value[key!][newIndex]?.taskId) || 0
+    }
+    const body = {
+      prevTaskId,
+      targetTaskId,
+      nextTaskId
+    }
+    console.log(prevTaskId, targetTaskId, nextTaskId)
+    await axiosInstance.patch('/api/task-board', body)
+    queryClient.invalidateQueries({ queryKey: ['taskBoard'] })
+  }
+}
 
 const { params } = useTaskBoardParamsStore()
 const fetchTaskBoard = async () => {
@@ -128,4 +170,8 @@ const { data } = useQuery<TaskCardList>({
   queryKey: ['taskBoard', params],
   queryFn: fetchTaskBoard
 })
+
+const tasksInProgress = computed(() => [...(data.value?.tasksInProgress || [])])
+const tasksPendingComplete = computed(() => [...(data.value?.tasksPendingComplete || [])])
+const tasksCompleted = computed(() => [...(data.value?.tasksCompleted || [])])
 </script>
diff --git a/src/types/manager.ts b/src/types/manager.ts
index e37f4e90..b4752ed6 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -36,7 +36,7 @@ export interface TaskCardProps {
     labelName: string
     labelColor: string
   }
-  requesterNickName: string
+  requesterNickname: string
   requesterImageUrl: string
   requesterDepartment: string
   processorOrder: number