CLAP-270 TaskCard의 라벨 컴포넌트 제작

src/components/PieChart.vue

@@ -5,7 +5,7 @@
     :options="options" />
   <NoContent
     v-else
-    content="데이터가 없습니다" />
+    content="집계된 데이터가 없습니다" />
 </template>
 
 <script setup lang="ts">

src/components/TaskCard.vue

@@ -5,7 +5,13 @@
     @click="onTaskClick">
     <div class="flex flex-col gap-1">
       <div class="flex justify-between items-center gap-4">
-        <span class="text-black">{{ data.title }}</span>
+        <div class="flex items-center gap-2">
+          <TaskLabel
+            v-if="data.labelInfo"
+            :color="data.labelInfo.labelColor"
+            :content="data.labelInfo.labelName" />
+          <span class="text-black">{{ data.title }}</span>
+        </div>
         <CommonIcons
           v-if="draggable"
           :name="bentoIcon" />
@@ -34,6 +40,7 @@ import { computed } from 'vue'
 import type { TaskCardProps } from '@/types/manager'
 import CommonIcons from './common/CommonIcons.vue'
 import { statusAsColor } from '@/utils/statusAsColor'
+import TaskLabel from './common/TaskLabel.vue'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
 

src/components/common/TaskLabel.vue

@@ -0,0 +1,17 @@
+<template>
+  <span
+    class="px-2 py-0.5 text-[10px] font-bold border-2 rounded-full whitespace-nowrap"
+    :style="{ borderColor, backgroundColor }">
+    {{ content }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { COLOR_LIST } from '@/constants/common'
+
+const { color, content } = defineProps<{ color: string; content: string }>()
+const [borderColor, backgroundColor] = [
+  COLOR_LIST.find(el => el.colorEnum === color)?.borderColor,
+  COLOR_LIST.find(el => el.colorEnum === color)?.fillColor
+]
+</script>

src/components/statistics/StatisticsCard.vue

@@ -53,9 +53,6 @@ const changePeriod = (newPeriodType: PeriodType) => {
 
 const fetchStatistics = async () => {
   const response = await axiosInstance.get('/api/tasks/statistics', {
-    headers: {
-      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
-    },
     params: {
       periodType: periodType.value,
       statisticsType
@@ -66,7 +63,7 @@ const fetchStatistics = async () => {
 }
 
 const { data } = useQuery<StatisticsData[]>({
-  queryKey: [statisticsType, periodType],
+  queryKey: computed(() => [statisticsType, periodType]),
   queryFn: fetchStatistics
 })
 

src/components/statistics/StatisticsCategoryCard.vue

@@ -45,9 +45,6 @@ const changeMainCategory = (value: string) => (mainCategory.value = value)
 
 const fetchMainStatistics = async () => {
   const response = await axiosInstance.get('/api/tasks/statistics', {
-    headers: {
-      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
-    },
     params: {
       periodType: periodType.value,
       statisticsType: 'REQUEST_BY_CATEGORY'
@@ -57,7 +54,7 @@ const fetchMainStatistics = async () => {
   return response.data
 }
 const { data: mainData } = useQuery<StatisticsData[]>({
-  queryKey: ['REQUEST_BY_CATEGORY', periodType],
+  queryKey: computed(() => ['REQUEST_BY_CATEGORY', periodType]),
   queryFn: fetchMainStatistics
 })
 const mainLabels = computed(() => {
@@ -69,9 +66,6 @@ const mainSeries = computed(() => {
 
 const fetchSubStatistics = async () => {
   const response = await axiosInstance.get('/api/tasks/statistics/subcategory', {
-    headers: {
-      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
-    },
     params: {
       periodType: periodType.value,
       mainCategory: mainCategory.value
@@ -81,7 +75,7 @@ const fetchSubStatistics = async () => {
   return response.data
 }
 const { data: subData } = useQuery<StatisticsData[]>({
-  queryKey: [mainCategory.value, periodType],
+  queryKey: computed(() => [mainCategory.value, periodType]),
   queryFn: fetchSubStatistics,
   enabled: computed(() => mainCategory.value !== '')
 })

src/components/task-board/TaskBoard.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="flex flex-1 bg-primary2 rounded-t-lg">
         <span class="text-xs font-bold text-body p-4">
-          검토 중 {{ data?.tasksPendingComplete.length }}
+          검토 중 {{ data?.tasksInProgress.length }}
         </span>
       </div>
       <div class="flex flex-1 bg-primary2 rounded-t-lg">
@@ -47,7 +47,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="data?.tasksPendingComplete.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끌어 놓으세요' }}
@@ -59,7 +59,7 @@
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
-          @change="event => onListChange(event, 'PENDING_COMPLETED')">
+          @change="event => onListChange(event, 'IN_REVIEWING')">
           <template #item="{ element }">
             <TaskCard
               :key="element.taskId"
@@ -113,8 +113,8 @@ 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 === 'IN_REVIEWING') {
+    return 'tasksInReviewing'
   } else if (status === 'COMPLETED') {
     return 'tasksCompleted'
   }
@@ -172,6 +172,6 @@ const { data } = useQuery<TaskCardList>({
 })
 
 const tasksInProgress = computed(() => [...(data.value?.tasksInProgress || [])])
-const tasksPendingComplete = computed(() => [...(data.value?.tasksPendingComplete || [])])
+const tasksPendingComplete = computed(() => [...(data.value?.tasksInReviewing || [])])
 const tasksCompleted = computed(() => [...(data.value?.tasksCompleted || [])])
 </script>

src/constants/common.ts

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

src/types/common.ts

@@ -50,7 +50,7 @@ export interface ListBarTabProps {
   justifyCenter?: boolean
 }
 
-export type Status = 'REQUESTED' | 'IN_PROGRESS' | 'PENDING_COMPLETED' | 'COMPLETED' | 'TERMINATED'
+export type Status = 'REQUESTED' | 'IN_PROGRESS' | 'IN_REVIEWING' | 'COMPLETED' | 'TERMINATED'
 
 export type SortDirection = 'DESC' | 'ASC'
 

src/types/manager.ts

@@ -46,7 +46,7 @@ export interface TaskCardProps {
 
 export interface TaskCardList {
   tasksInProgress: TaskCardProps[]
-  tasksPendingComplete: TaskCardProps[]
+  tasksInReviewing: TaskCardProps[]
   tasksCompleted: TaskCardProps[]
 }
 

src/utils/statusAsColor.ts

@@ -3,7 +3,7 @@ import type { Status } from '@/types/common'
 const defaultColor = {
   REQUESTED: 'gray',
   IN_PROGRESS: 'blue',
-  PENDING_COMPLETED: 'orange',
+  IN_REVIEWING: 'orange',
   COMPLETED: 'green',
   TERMINATED: 'red'
 }

src/utils/statusAsText.ts

@@ -3,7 +3,7 @@ import type { Status } from '@/types/common'
 const text = {
   REQUESTED: '요청',
   IN_PROGRESS: '진행 중',
-  PENDING_COMPLETED: '검토 중',
+  IN_REVIEWING: '검토 중',
   COMPLETED: '완료',
   TERMINATED: '종료'
 }