From dfba314f3e65b25f17fbe5c69f13cee0abbdd4d4 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Wed, 5 Feb 2025 18:45:25 +0900
Subject: [PATCH 1/3] =?UTF-8?q?:sparkles:=20[feat]=20:=20TaskLabel=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?=EB=B0=8F=20PENDING=5FCOMPLETED=20->=20IN=5FREVIEWING=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20ENUM=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TaskCard.vue             |  8 +++++++-
 src/components/common/TaskLabel.vue     | 17 +++++++++++++++++
 src/components/task-board/TaskBoard.vue | 12 ++++++------
 src/constants/common.ts                 |  2 +-
 src/types/common.ts                     |  2 +-
 src/types/manager.ts                    |  2 +-
 src/utils/statusAsColor.ts              |  2 +-
 src/utils/statusAsText.ts               |  2 +-
 8 files changed, 35 insertions(+), 12 deletions(-)
 create mode 100644 src/components/common/TaskLabel.vue

diff --git a/src/components/TaskCard.vue b/src/components/TaskCard.vue
index ac134507..b4947851 100644
--- a/src/components/TaskCard.vue
+++ b/src/components/TaskCard.vue
@@ -5,7 +5,12 @@
     @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
+            :color="data.labelInfo.labelColor"
+            :content="data.labelInfo.labelName" />
+          <span class="text-black">{{ data.title }}</span>
+        </div>
         <CommonIcons
           v-if="draggable"
           :name="bentoIcon" />
@@ -34,6 +39,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 }>()
 
diff --git a/src/components/common/TaskLabel.vue b/src/components/common/TaskLabel.vue
new file mode 100644
index 00000000..9d829489
--- /dev/null
+++ b/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>
diff --git a/src/components/task-board/TaskBoard.vue b/src/components/task-board/TaskBoard.vue
index 8670a4ba..07f51035 100644
--- a/src/components/task-board/TaskBoard.vue
+++ b/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>
diff --git a/src/constants/common.ts b/src/constants/common.ts
index e8361b2c..8f1d143a 100644
--- a/src/constants/common.ts
+++ b/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: '종료' }
 ]
diff --git a/src/types/common.ts b/src/types/common.ts
index d9a38623..38147eac 100644
--- a/src/types/common.ts
+++ b/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'
 
diff --git a/src/types/manager.ts b/src/types/manager.ts
index 013d2c91..baaf927c 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -46,7 +46,7 @@ export interface TaskCardProps {
 
 export interface TaskCardList {
   tasksInProgress: TaskCardProps[]
-  tasksPendingComplete: TaskCardProps[]
+  tasksInReviewing: TaskCardProps[]
   tasksCompleted: TaskCardProps[]
 }
 
diff --git a/src/utils/statusAsColor.ts b/src/utils/statusAsColor.ts
index 78a65d8b..d15f6b20 100644
--- a/src/utils/statusAsColor.ts
+++ b/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'
 }
diff --git a/src/utils/statusAsText.ts b/src/utils/statusAsText.ts
index e2b4fa8f..74b9681c 100644
--- a/src/utils/statusAsText.ts
+++ b/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: '종료'
 }

From e8ea8eff3d16af7db459cd01682578a20f6f0038 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Wed, 5 Feb 2025 18:50:11 +0900
Subject: [PATCH 2/3] =?UTF-8?q?:bug:=20[fix]=20TaskCard=EC=97=90=20labelIn?=
 =?UTF-8?q?fo=EA=B0=80=20=EC=97=86=EC=9D=84=20=EB=95=8C=20=EC=83=9D?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TaskCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/TaskCard.vue b/src/components/TaskCard.vue
index b4947851..4ca4f307 100644
--- a/src/components/TaskCard.vue
+++ b/src/components/TaskCard.vue
@@ -7,6 +7,7 @@
       <div class="flex justify-between items-center gap-4">
         <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>

From da8c38c9c71fb516e7e15953b50d08fb89a6522c Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Wed, 5 Feb 2025 19:08:08 +0900
Subject: [PATCH 3/3] =?UTF-8?q?:bug:=20[fix]=201=EC=B0=A8=20=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=84=A0=ED=83=9D=20=EC=8B=9C=20?=
 =?UTF-8?q?2=EC=B0=A8=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EA=B0=B1?=
 =?UTF-8?q?=EC=8B=A0=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PieChart.vue                          |  2 +-
 src/components/statistics/StatisticsCard.vue         |  5 +----
 src/components/statistics/StatisticsCategoryCard.vue | 10 ++--------
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/PieChart.vue b/src/components/PieChart.vue
index c1b22f83..2850fc7b 100644
--- a/src/components/PieChart.vue
+++ b/src/components/PieChart.vue
@@ -5,7 +5,7 @@
     :options="options" />
   <NoContent
     v-else
-    content="데이터가 없습니다" />
+    content="집계된 데이터가 없습니다" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/statistics/StatisticsCard.vue b/src/components/statistics/StatisticsCard.vue
index 9a547990..02270d9e 100644
--- a/src/components/statistics/StatisticsCard.vue
+++ b/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
 })
 
diff --git a/src/components/statistics/StatisticsCategoryCard.vue b/src/components/statistics/StatisticsCategoryCard.vue
index 6fae0d6c..48b179f1 100644
--- a/src/components/statistics/StatisticsCategoryCard.vue
+++ b/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 !== '')
 })