Merge pull request #106 from TaskFlow-CLAP/CLAP-252

CLAP-252 팀 작업 현황 페이지 API 연결

Author: seorang42

src/components/hooks/useTeamBoardParamsChange.ts

@@ -7,11 +7,11 @@ export const useTeamBoardParamsChange = () => {
     return array.includes(value) ? array.filter(el => el !== value) : [...array, value]
   }
 
-  const onOrderChange = (value: string) => {
-    params.order = value
+  const onSortByChange = (value: string) => {
+    params.sortBy = value
   }
-  const onTitleChange = (value: string) => {
-    params.title = value
+  const onTaskTitleChange = (value: string) => {
+    params.taskTitle = value
   }
   const onMainChange = (value: number) => {
     params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value)
@@ -21,8 +21,8 @@ export const useTeamBoardParamsChange = () => {
   }
 
   return {
-    onOrderChange,
-    onTitleChange,
+    onSortByChange,
+    onTaskTitleChange,
     onMainChange,
     onSubChange
   }

src/components/team-board/CurrentTaskRatio.vue

@@ -6,9 +6,7 @@
         <div class="flex items-center gap-3">
           <span class="text-xs font-bold text-body">진행 중 {{ teamSummary.inProgress }}건</span>
           <div class="w-[1px] h-[10px] bg-body" />
-          <span class="text-xs font-bold text-body"
-            >완료 대기 {{ teamSummary.pendingCompletion }}건</span
-          >
+          <span class="text-xs font-bold text-body">완료 대기 {{ teamSummary.inReviewing }}건</span>
         </div>
         <span class="text-xs font-bold text-primary1">총 {{ teamSummary.totalTasks }}건</span>
       </div>
@@ -28,7 +26,7 @@ import PieChart from '../PieChart.vue'
 const { teamSummary, teamData } = defineProps<{
   teamSummary: {
     inProgress: number
-    pendingCompletion: number
+    inReviewing: number
     totalTasks: number
   }
   teamData: { name: string; tasks: number }[]

src/components/team-board/TeamBoard.vue

@@ -5,34 +5,54 @@
         :team-summary="teamSummary"
         :team-data="teamData" />
       <TeamBoardCard
-        v-for="member in DUMMY_TEAM_MEMBERS_LIST"
-        :key="member.name"
-        :name="member.name"
-        :department="member.department"
-        :task-status-summary="member.taskStatusSummary"
-        :tasks="member.tasks" />
+        v-for="member in data?.members"
+        :key="member.processorId"
+        :info="member" />
+      <NoContent
+        v-if="data?.members.length === 0"
+        content="검색된 담당자가 없습니다" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { DUMMY_TEAM_MEMBERS_LIST } from '@/datas/dummy'
 import TeamBoardCard from './TeamBoardCard.vue'
 import CurrentTaskRatio from './CurrentTaskRatio.vue'
+import { axiosInstance } from '@/utils/axios'
+import { useTeamBoardParamsStore } from '@/stores/params'
+import { useQuery } from '@tanstack/vue-query'
+import { useParseParams } from '../hooks/useParseParams'
+import type { TeamBoardResponse } from '@/types/manager'
+import { computed } from 'vue'
+import NoContent from '../lists/NoContent.vue'
 
-const getSummaryCount = (key: 'inProgress' | 'pendingCompletion' | 'totalTasks') => {
-  let count = 0
-  DUMMY_TEAM_MEMBERS_LIST.forEach(el => (count += el.taskStatusSummary[key]))
-  return count
-}
-const teamSummary = {
-  inProgress: getSummaryCount('inProgress'),
-  pendingCompletion: getSummaryCount('pendingCompletion'),
-  totalTasks: getSummaryCount('totalTasks')
+const { params } = useTeamBoardParamsStore()
+
+const fetchTeamStatus = async () => {
+  const { parseBoardParams } = useParseParams()
+  const parsedParams = parseBoardParams(params)
+  const response = await axiosInstance.get('/api/team-status/filter', { params: parsedParams })
+  return response.data
 }
+const { data } = useQuery<TeamBoardResponse>({
+  queryKey: ['teamStatus', params],
+  queryFn: fetchTeamStatus
+})
+
+const teamSummary = computed(() => {
+  return {
+    inProgress: data.value?.totalInProgressTaskCount || 0,
+    inReviewing: data.value?.totalInReviewingTaskCount || 0,
+    totalTasks: data.value?.totalTaskCount || 0
+  }
+})
 
-const teamData = DUMMY_TEAM_MEMBERS_LIST.map(el => ({
-  name: el.name,
-  tasks: el.taskStatusSummary.totalTasks
-}))
+const teamData = computed(() => {
+  return (
+    data.value?.members.map(el => ({
+      name: el.nickname,
+      tasks: el.totalTaskCount
+    })) || []
+  )
+})
 </script>

src/components/team-board/TeamBoardCard.vue

@@ -5,26 +5,22 @@
         <div class="w-6 h-6 rounded-full overflow-hidden">
           <img src="https://picsum.photos/24" />
         </div>
-        <span class="text-black">{{ name }}</span>
+        <span class="text-black">{{ info.nickname }}</span>
       </div>
-      <span class="text-xs font-bold text-body">{{ department }}</span>
+      <span class="text-xs font-bold text-body">{{ info.department }}</span>
     </div>
     <div class="flex justify-between items-center">
       <div class="flex items-center gap-3">
-        <span class="text-xs font-bold text-body"
-          >진행 중 {{ taskStatusSummary.inProgress }}건</span
-        >
+        <span class="text-xs font-bold text-body">진행 중 {{ info.inProgressTaskCount }}건</span>
         <div class="w-[1px] h-[10px] bg-body" />
-        <span class="text-xs font-bold text-body"
-          >완료 대기 {{ taskStatusSummary.pendingCompletion }}건</span
-        >
+        <span class="text-xs font-bold text-body">검토 중 {{ info.inReviewingTaskCount }}건</span>
       </div>
-      <span class="text-xs font-bold text-primary1">총 {{ taskStatusSummary.totalTasks }}건</span>
+      <span class="text-xs font-bold text-primary1">총 {{ info.totalTaskCount }}건</span>
     </div>
     <div
       class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-scroll flex flex-col items-center p-6 gap-4">
       <TaskCard
-        v-for="task in tasks"
+        v-for="task in info.tasks"
         :key="task.taskId"
         :data="task" />
     </div>
@@ -35,5 +31,5 @@
 import type { TeamBoardCardProps } from '@/types/manager'
 import TaskCard from '../TaskCard.vue'
 
-const { name, department, taskStatusSummary, tasks } = defineProps<TeamBoardCardProps>()
+const { info } = defineProps<{ info: TeamBoardCardProps }>()
 </script>

src/components/team-board/TeamBoardFilterBar.vue

@@ -3,15 +3,15 @@
     <FilterDropdown
       title="정렬"
       :option-list="[
-        { value: 'CONTRIBUTION', content: '기여도순' },
-        { value: 'NAME', content: '이름순' }
+        { value: 'CONTRIBUTE', content: '기여도순' },
+        { value: 'DEFAULT', content: '이름순' }
       ]"
-      :value="params.order"
-      @update:value="onParamsChange.onOrderChange" />
+      :value="params.sortBy"
+      @update:value="onParamsChange.onSortByChange" />
     <FilterInput
       title="제목"
       :value="''"
-      @update:value="onParamsChange.onTitleChange" />
+      @update:value="onParamsChange.onTaskTitleChange" />
     <FilterCategory
       :category-list="data"
       :main="params.mainCategoryIds"

src/stores/params.ts

@@ -79,10 +79,11 @@ export const useLogsParamsStore = defineStore('logsParams', () => {
 
 export const useTeamBoardParamsStore = defineStore('teamBoardParams', () => {
   const params = ref<TeamBoardParams>({
-    order: 'CONTRIBUTION',
-    title: '',
+    sortBy: 'CONTRIBUTE',
     mainCategoryIds: [],
-    categoryIds: []
+    categoryIds: [],
+    taskTitle: '',
+    valid: true
   })
 
   return { params }

src/types/manager.ts

@@ -64,10 +64,14 @@ export interface MyTaskListData {
 }
 
 export interface TeamBoardCardProps {
-  name: string
   department: string
-  taskStatusSummary: { inProgress: number; pendingCompletion: number; totalTasks: number }
+  imageUrl?: string
+  inProgressTaskCount: number
+  inReviewingTaskCount: number
+  nickname: string
+  processorId: number
   tasks: TaskCardProps[]
+  totalTaskCount: number
 }
 
 export type PeriodType = 'DAY' | 'WEEK' | 'MONTH'
@@ -166,3 +170,10 @@ export interface ManagerTypes {
   imageUrl: string
   remainingTasks: number
 }
+
+export interface TeamBoardResponse {
+  members: TeamBoardCardProps[]
+  totalInProgressTaskCount: number
+  totalInReviewingTaskCount: number
+  totalTaskCount: number
+}

src/types/stores.ts

@@ -35,10 +35,11 @@ export interface LogsParams {
 }
 
 export interface TeamBoardParams {
-  order: string
-  title: string
+  sortBy: string
   mainCategoryIds: number[]
   categoryIds: number[]
+  taskTitle: string
+  valid?: boolean
 }
 
 export interface TaskBoardParams {