From 3269405a1f9a850ff1f447ebac10a2e28fe335db Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Thu, 13 Feb 2025 16:45:10 +0900
Subject: [PATCH 01/14] =?UTF-8?q?:bug:=20[fix]=20=EC=9E=91=EC=97=85=20?=
 =?UTF-8?q?=EA=B8=B0=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EB=AA=A9=EB=A1=9D=20=EC=97=86=EC=9D=84=20=EB=95=8C?=
 =?UTF-8?q?=20=EB=B9=88=20=ED=99=94=EB=A9=B4=20=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/api-logs/ApiLogsList.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/api-logs/ApiLogsList.vue b/src/components/api-logs/ApiLogsList.vue
index 5560ba89..93e8abda 100644
--- a/src/components/api-logs/ApiLogsList.vue
+++ b/src/components/api-logs/ApiLogsList.vue
@@ -9,6 +9,7 @@
         v-for="info in data?.content"
         :key="info.logId"
         :info="info" />
+      <NoContent v-if="data?.content.length === 0" />
     </template>
 
     <template #pagination>
@@ -32,6 +33,7 @@ import type { ApiLogsResponse } from '@/types/admin'
 import { computed } from 'vue'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
+import NoContent from '../lists/NoContent.vue'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {

From defcc1c421dbf5e6a74a849d5ce9d0ba99a61a2f Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 11:50:01 +0900
Subject: [PATCH 02/14] =?UTF-8?q?:bug:=20[fix]=20=EB=B9=84=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=9E=AC?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=EB=A1=9C=20=EC=A0=91=EA=B7=BC=20=EA=B0=80=EB=8A=A5?=
 =?UTF-8?q?=ED=95=9C=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=20=EB=B0=8F?=
 =?UTF-8?q?=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20=EA=B0=80?=
 =?UTF-8?q?=EB=93=9C=20=EC=9E=AC=EA=B5=AC=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/common.ts    |  2 +-
 src/router/index.ts        | 62 +++++++++++++++++++-------------------
 src/stores/member.ts       | 10 +++++-
 src/utils/axios.ts         |  2 ++
 src/views/LoginView.vue    |  3 +-
 src/views/PwChangeView.vue | 11 ++++++-
 6 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/src/constants/common.ts b/src/constants/common.ts
index 669c53cb..f459a611 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -40,7 +40,7 @@ export const COLOR_LIST = [
 ]
 
 export const PERMITTED_URL = {
-  UNKNOWN: ['/login', '/pw-change-email', '/pw-change'],
+  UNKNOWN: ['/login', '/pw-change-email'],
   ROLE_USER: ['/my-request', '/task-request', '/edit-information', '/pw-change'],
   ROLE_MANAGER: [
     '/my-task',
diff --git a/src/router/index.ts b/src/router/index.ts
index 2aea2b9c..bedc03a4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,6 +2,7 @@ import { PERMITTED_URL } from '@/constants/common'
 import { useErrorStore } from '@/stores/error'
 import { useMemberStore } from '@/stores/member'
 import { createRouter, createWebHistory } from 'vue-router'
+import Cookies from 'js-cookie'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -135,7 +136,7 @@ router.beforeEach(async (to, from, next) => {
   const { setError } = useErrorStore()
 
   await memberStore.updateMemberInfoWithToken()
-  const { info } = memberStore
+  const { info, isPendingUser } = memberStore
 
   const redirectMap = {
     ROLE_USER: '/my-request',
@@ -143,27 +144,6 @@ router.beforeEach(async (to, from, next) => {
     ROLE_ADMIN: '/member-management'
   }
 
-  if (
-    (info.role && PERMITTED_URL.UNKNOWN.includes(to.path) && to.path !== '/pw-change') ||
-    (info.role && to.path === '/')
-  ) {
-    return next(redirectMap[info.role])
-  }
-
-  if (!info.role) {
-    if (PERMITTED_URL.UNKNOWN.includes(to.path)) {
-      return next()
-    }
-    if (to.path === '/login') {
-      return next()
-    }
-    if (to.path === '/') {
-      return next('/login')
-    }
-    setError('로그인이 필요합니다')
-    return next('/login')
-  }
-
   const permittedUrlMap = {
     ROLE_USER: PERMITTED_URL.ROLE_USER,
     ROLE_MANAGER: PERMITTED_URL.ROLE_MANAGER,
@@ -176,19 +156,39 @@ router.beforeEach(async (to, from, next) => {
     })
   }
 
-  if (
-    from.path === redirectMap[info.role] &&
-    !isPathPermitted(to.path, permittedUrlMap[info.role])
-  ) {
-    return false
+  if (isPendingUser) {
+    if (to.path === '/login' || to.path === '/pw-change') {
+      return next()
+    }
+    setError('권한이 없는 페이지입니다')
+    return next('/login')
   }
 
-  if (!isPathPermitted(to.path, permittedUrlMap[info.role])) {
-    if (to.path === redirectMap[info.role]) {
+  if (!info.role) {
+    if (to.path === '/login') {
+      Cookies.remove('accessToken')
+      Cookies.remove('refreshToken')
       return next()
     }
-    setError('권한이 없는 페이지입니다')
-    return next(redirectMap[info.role])
+    if (PERMITTED_URL.UNKNOWN.includes(to.path)) {
+      return next()
+    }
+    if (to.path === '/') {
+      return next('/login')
+    }
+    setError('로그인이 필요합니다')
+    return next('/login')
+  }
+
+  if (info.role) {
+    if (PERMITTED_URL.UNKNOWN.includes(to.path) || to.path === '/') {
+      return next(redirectMap[info.role])
+    }
+
+    if (!isPathPermitted(to.path, permittedUrlMap[info.role])) {
+      setError('권한이 없는 페이지입니다')
+      return next(redirectMap[info.role])
+    }
   }
 
   return next()
diff --git a/src/stores/member.ts b/src/stores/member.ts
index 88bb4c32..d42572a0 100644
--- a/src/stores/member.ts
+++ b/src/stores/member.ts
@@ -23,11 +23,18 @@ export const useMemberStore = defineStore('memberInfo', () => {
 
   const info = ref<User>(INITIAL_INFO)
   const isLogined = ref(false)
+  const isPendingUser = ref(false)
 
   async function updateMemberInfoWithToken() {
+    isPendingUser.value = false
     const token = Cookies.get('accessToken')
     const refreshToken = Cookies.get('refreshToken')
-    if (!token || !refreshToken) return
+    if (!token) {
+      return
+    } else if (!refreshToken) {
+      isPendingUser.value = true
+      return
+    }
 
     const { data }: { data: User } = await axiosInstance.get('/api/members/info')
     info.value = data
@@ -49,6 +56,7 @@ export const useMemberStore = defineStore('memberInfo', () => {
   return {
     info,
     isLogined,
+    isPendingUser,
     updateMemberInfoWithToken,
     logout,
     $reset
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 38f1b2b1..a8c83f2f 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -72,6 +72,8 @@ const setInterceptors = (instance: AxiosInstance) => {
                 } catch {
                   setError('토큰 갱신에 실패하였습니다', '다시 로그인 해주세요', redirectToLogin)
                 }
+              } else {
+                setError('유효하지 않은 토큰입니다', '다시 로그인 해주세요', redirectToLogin)
               }
             }
             break
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 1a1ad980..551c6ccc 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -57,7 +57,6 @@ import ModalView from '@/components/common/ModalView.vue'
 import TitleContainer from '@/components/common/TitleContainer.vue'
 import { useMemberStore } from '@/stores/member'
 import axios from 'axios'
-import Cookies from 'js-cookie'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -82,7 +81,7 @@ const handleLogin = async () => {
     const res = await postLogin(name, password.value)
     const role = await memberStore.updateMemberInfoWithToken()
 
-    if (!Cookies.get('refreshToken')) {
+    if (memberStore.isPendingUser) {
       router.push('/pw-change')
     } else if (res) {
       switch (role) {
diff --git a/src/views/PwChangeView.vue b/src/views/PwChangeView.vue
index ebfdae62..89fb9a6c 100644
--- a/src/views/PwChangeView.vue
+++ b/src/views/PwChangeView.vue
@@ -100,7 +100,7 @@
         <button
           type="button"
           class="flex justify-center text-xs font-semibold text-body hover:underline"
-          @click="router.replace('/edit-information')">
+          @click="goBack">
           취소
         </button>
       </div>
@@ -186,4 +186,13 @@ const closeModal = () => {
 const closeError = () => {
   isErrorVisible.value = !isErrorVisible.value
 }
+
+const goBack = () => {
+  if (Cookies.get('refreshToken')) {
+    router.replace('/edit-information')
+  } else {
+    Cookies.remove('accessToken')
+    router.replace('/login')
+  }
+}
 </script>

From c81b801af6d3076e6ea23f6a7845c3e8c3aa7c1a Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 13:40:25 +0900
Subject: [PATCH 03/14] =?UTF-8?q?:lipstick:=20[design]=20:=20=EB=8B=A4?=
 =?UTF-8?q?=EC=A4=91=20=EC=84=A0=ED=83=9D=20=ED=95=84=ED=84=B0=EC=97=90=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=EB=90=9C=20=ED=95=AD=EB=AA=A9=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/filters/FilterCategory.vue      | 4 ++--
 src/components/filters/FilterDropdownMulti.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/filters/FilterCategory.vue b/src/components/filters/FilterCategory.vue
index c5908605..a26881d3 100644
--- a/src/components/filters/FilterCategory.vue
+++ b/src/components/filters/FilterCategory.vue
@@ -6,7 +6,7 @@
         ref="mainRef"
         class="filter-dropdown"
         @click="toggleDropdown('main')">
-        <span class="grow text-center">선택</span>
+        <span class="grow text-center">선택 ({{ (main as number[]).length }})</span>
         <CommonIcons
           :name="dropdownIcon"
           :style="{ fill: '#18181B' }" />
@@ -36,7 +36,7 @@
         class="filter-dropdown"
         :class="isDisabled ? 'bg-background-2 text-disabled' : ''"
         @click="!isDisabled && toggleDropdown('sub')">
-        <span class="grow text-center">선택</span>
+        <span class="grow text-center">선택 ({{ (sub as number[]).length }})</span>
         <CommonIcons
           :name="dropdownIcon"
           :style="{ fill: isDisabled ? '#A1A1AA' : '#18181B' }" />
diff --git a/src/components/filters/FilterDropdownMulti.vue b/src/components/filters/FilterDropdownMulti.vue
index 1668f0af..6b2df64e 100644
--- a/src/components/filters/FilterDropdownMulti.vue
+++ b/src/components/filters/FilterDropdownMulti.vue
@@ -8,7 +8,7 @@
       ref="htmlRef"
       class="filter-dropdown"
       @click="toggleDropdown">
-      <span class="grow text-center">선택</span>
+      <span class="grow text-center">선택 ({{ (value as string[]).length }})</span>
       <CommonIcons :name="dropdownIcon" />
       <ul
         @click.stop

From afc58cf95cb462434d3e0ddb131b7a8e31c2de21 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 14:02:49 +0900
Subject: [PATCH 04/14] =?UTF-8?q?:lipstick:=20[design]=20:=20input?=
 =?UTF-8?q?=EC=97=90=20=EA=B8=80=EC=9E=90=EC=88=98=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/EditInformation.vue             | 2 +-
 src/components/request-task/RequestTaskInput.vue      | 2 +-
 src/components/request-task/RequestTaskTextArea.vue   | 2 +-
 src/components/task-detail/TaskDetailHistoryInput.vue | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/common/EditInformation.vue b/src/components/common/EditInformation.vue
index 261037be..c54877ca 100644
--- a/src/components/common/EditInformation.vue
+++ b/src/components/common/EditInformation.vue
@@ -75,7 +75,7 @@
         maxlength="10"
         ref="nameInput"
         @blur="validateName" />
-      <span class="mt-1.5 text-xs text-gray-500"> {{ name.length }} / 10 </span>
+      <span class="mt-1.5 text-xs text-body flex w-full justify-end"> {{ name.length }} / 10 </span>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-semibold">아이디</p>
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index 992a5c8e..1594ea3b 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -29,7 +29,7 @@
       :maxlength="labelName === '제목' ? 30 : undefined" />
     <p
       v-if="limitLength"
-      class="text-xs mt-1.5">
+      class="text-xs mt-1.5 w-full flex justify-end text-body">
       ({{ inputLength }}/{{ limitLength }})
     </p>
   </div>
diff --git a/src/components/request-task/RequestTaskTextArea.vue b/src/components/request-task/RequestTaskTextArea.vue
index 2da712cb..a09ff31d 100644
--- a/src/components/request-task/RequestTaskTextArea.vue
+++ b/src/components/request-task/RequestTaskTextArea.vue
@@ -13,7 +13,7 @@
     </textarea>
     <p
       v-if="limitLength"
-      class="text-xs">
+      class="text-xs w-full flex justify-end text-body">
       ({{ inputLength }}/{{ limitLength }})
     </p>
   </div>
diff --git a/src/components/task-detail/TaskDetailHistoryInput.vue b/src/components/task-detail/TaskDetailHistoryInput.vue
index 2dcc29a8..b4b7eadf 100644
--- a/src/components/task-detail/TaskDetailHistoryInput.vue
+++ b/src/components/task-detail/TaskDetailHistoryInput.vue
@@ -34,7 +34,7 @@
         @click="sendMessage" />
     </button>
   </div>
-  <p class="text-xs mt-1.5">({{ inputLength }}/{{ 254 }})</p>
+  <p class="text-xs mt-1.5 flex w-full justify-end text-body">({{ inputLength }}/{{ 254 }})</p>
   <ModalView
     :is-open="isModalVisible"
     type="failType"

From fa4bcaa71280621306d98a78c671aeac030d021d Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 14:25:24 +0900
Subject: [PATCH 05/14] =?UTF-8?q?:recycle:=20[refactor]=20=EB=AA=85?=
 =?UTF-8?q?=ED=99=95=ED=95=9C=20=EC=9D=98=EB=AF=B8=20=EC=A0=84=EB=8B=AC?=
 =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=B4=20=ED=86=B5=EA=B3=84=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=EC=A7=80=20=EB=8B=A8=EC=96=B4=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/statistics/PeriodButtons.vue | 67 +++++++++++----------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/src/components/statistics/PeriodButtons.vue b/src/components/statistics/PeriodButtons.vue
index 8068ef15..55d5a963 100644
--- a/src/components/statistics/PeriodButtons.vue
+++ b/src/components/statistics/PeriodButtons.vue
@@ -1,35 +1,40 @@
 <template>
-  <div class="text-xs font-semibold flex gap-4">
-    <button
-      type="button"
-      @click="changePeriod('DAY')"
-      :class="
-        periodType === 'DAY'
-          ? 'button-small-primary underline'
-          : 'button-small-default hover:underline'
-      ">
-      일간
-    </button>
-    <button
-      type="button"
-      @click="changePeriod('WEEK')"
-      :class="
-        periodType === 'WEEK'
-          ? 'button-small-primary underline'
-          : 'button-small-default hover:underline'
-      ">
-      주간
-    </button>
-    <button
-      type="button"
-      @click="changePeriod('MONTH')"
-      :class="
-        periodType === 'MONTH'
-          ? 'button-small-primary underline'
-          : 'button-small-default hover:underline'
-      ">
-      월간
-    </button>
+  <div class="text-xs font-semibold flex gap-2 text-disabled">
+    <span class="text-primary1">지난</span>
+    <div class="flex gap-2">
+      <button
+        type="button"
+        @click="changePeriod('DAY')"
+        :class="
+          periodType === 'DAY'
+            ? 'button-small-primary underline'
+            : 'button-small-default hover:underline'
+        ">
+        1일
+      </button>
+      |
+      <button
+        type="button"
+        @click="changePeriod('WEEK')"
+        :class="
+          periodType === 'WEEK'
+            ? 'button-small-primary underline'
+            : 'button-small-default hover:underline'
+        ">
+        1주일
+      </button>
+      |
+      <button
+        type="button"
+        @click="changePeriod('MONTH')"
+        :class="
+          periodType === 'MONTH'
+            ? 'button-small-primary underline'
+            : 'button-small-default hover:underline'
+        ">
+        1개월
+      </button>
+    </div>
   </div>
 </template>
 

From a2000411e5ff2209636c82d2d2c9f0ecb3a878e4 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 15:56:32 +0900
Subject: [PATCH 06/14] =?UTF-8?q?:recycle:=20[refactor]=20=ED=86=B5?=
 =?UTF-8?q?=EA=B3=84=20=EB=B3=80=EA=B2=BD=20=EC=8B=9C=20=EA=B9=9C=EB=B9=A1?=
 =?UTF-8?q?=EC=9E=84=20=ED=95=B4=EA=B2=B0=20=EB=B0=8F=20=EA=B0=80=EB=8F=85?=
 =?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/LineChart.vue           |  9 ++-
 src/components/charts/PieChart.vue            | 50 ++++++++++---
 src/components/common/EditInformation.vue     |  4 +-
 src/components/lists/NoContent.vue            |  4 +-
 .../request-task/RequestTaskInput.vue         |  2 +-
 .../request-task/RequestTaskTextArea.vue      |  4 +-
 src/components/statistics/StatisticsCard.vue  |  8 +-
 .../statistics/StatisticsCategoryCard.vue     | 15 +++-
 .../task-detail/TaskDetailHistoryChat.vue     |  2 +-
 .../task-detail/TaskDetailHistoryInput.vue    | 74 ++++++++++---------
 .../team-board/CurrentTaskRatio.vue           |  2 +-
 11 files changed, 113 insertions(+), 61 deletions(-)

diff --git a/src/components/charts/LineChart.vue b/src/components/charts/LineChart.vue
index f3584b8b..3711b133 100644
--- a/src/components/charts/LineChart.vue
+++ b/src/components/charts/LineChart.vue
@@ -4,7 +4,7 @@
     :data="teamData"
     :options="options" />
   <NoContent
-    v-else
+    v-else-if="!isPending && labels.length === 0"
     :content="`집계된 ${periodText[periodType]} 데이터가 없습니다`" />
 </template>
 
@@ -42,6 +42,7 @@ const { labels, series, dataLabel, periodType } = defineProps<{
   series: number[]
   dataLabel: string
   periodType: PeriodType
+  isPending?: boolean
 }>()
 
 const periodText = { DAY: '일간', WEEK: '주간', MONTH: '월간' }
@@ -80,6 +81,12 @@ const options = {
       },
       suggestedMax: Math.max(...series) + 1
     }
+  },
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: { enabled: true }
   }
 }
 </script>
diff --git a/src/components/charts/PieChart.vue b/src/components/charts/PieChart.vue
index e27b1343..0682d187 100644
--- a/src/components/charts/PieChart.vue
+++ b/src/components/charts/PieChart.vue
@@ -1,13 +1,17 @@
 <template>
-  <Pie
-    v-if="labels.length !== 0"
-    :data="teamData"
-    :options="options" />
-  <NoContent
-    v-else
-    :content="
-      !content && periodType ? `집계된 ${periodText[periodType]} 데이터가 없습니다` : content
-    " />
+  <div class="w-full h-full flex items-center justify-center">
+    <Pie
+      v-if="labels.length !== 0"
+      :data="teamData"
+      :options="options" />
+    <NoContent
+      v-else-if="!isPending && labels.length === 0"
+      :content="
+        !content && periodType
+          ? `지난 ${periodText[periodType]}간 집계된\n데이터가 없습니다`
+          : content
+      " />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -26,15 +30,18 @@ import type { PeriodType } from '@/types/manager'
 import NoContent from '../lists/NoContent.vue'
 ChartJS.register(Title, Tooltip, Legend, ArcElement, Colors)
 
-const { labels, series, periodType, content } = defineProps<{
+const { labels, series, periodType, content, isPending, noLegend, title } = defineProps<{
   labels: string[]
   series: number[]
   periodType?: PeriodType
   content?: string
+  isPending?: boolean
+  noLegend?: boolean
+  title?: string
 }>()
 const emit = defineEmits(['onClick'])
 
-const periodText = { DAY: '일간', WEEK: '주간', MONTH: '월간' }
+const periodText = { DAY: '1일', WEEK: '1주일', MONTH: '1개월' }
 
 const teamData = {
   labels,
@@ -53,6 +60,27 @@ const options = {
       const clickedIndex = elements[0].index
       emit('onClick', labels[clickedIndex])
     }
+  },
+  hoverOffset: 10,
+  plugins: {
+    legend: {
+      display: noLegend === true ? false : true,
+      position: 'left' as const
+    },
+    tooltip: { enabled: true },
+    title: {
+      display: title ? true : false,
+      text: title,
+      font: { size: 12, weight: 400 },
+      color: '#71717A'
+    }
+  },
+  layout: {
+    padding: {
+      left: 8,
+      right: 8,
+      bottom: 8
+    }
   }
 }
 </script>
diff --git a/src/components/common/EditInformation.vue b/src/components/common/EditInformation.vue
index c54877ca..db619842 100644
--- a/src/components/common/EditInformation.vue
+++ b/src/components/common/EditInformation.vue
@@ -75,7 +75,9 @@
         maxlength="10"
         ref="nameInput"
         @blur="validateName" />
-      <span class="mt-1.5 text-xs text-body flex w-full justify-end"> {{ name.length }} / 10 </span>
+      <span class="absolute text-xs top-[calc(100%+4px)] w-full flex justify-end text-body">
+        {{ name.length }} / 10
+      </span>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-semibold">아이디</p>
diff --git a/src/components/lists/NoContent.vue b/src/components/lists/NoContent.vue
index c1d375ff..1a0e91ce 100644
--- a/src/components/lists/NoContent.vue
+++ b/src/components/lists/NoContent.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="w-full h-full flex justify-center items-center">
-    <span class="text-lg text-disabled font-semibold text-center">{{ content }}</span>
+    <span class="text-lg text-disabled font-semibold text-center whitespace-pre-wrap">{{
+      content
+    }}</span>
   </div>
 </template>
 
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index 1594ea3b..af454d9c 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -29,7 +29,7 @@
       :maxlength="labelName === '제목' ? 30 : undefined" />
     <p
       v-if="limitLength"
-      class="text-xs mt-1.5 w-full flex justify-end text-body">
+      class="absolute text-xs top-[calc(100%+4px)] w-full flex justify-end text-body">
       ({{ inputLength }}/{{ limitLength }})
     </p>
   </div>
diff --git a/src/components/request-task/RequestTaskTextArea.vue b/src/components/request-task/RequestTaskTextArea.vue
index a09ff31d..2a9a0d8a 100644
--- a/src/components/request-task/RequestTaskTextArea.vue
+++ b/src/components/request-task/RequestTaskTextArea.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-1.5">
+  <div class="flex flex-col gap-1.5 relative">
     <div class="text-xs flex gap-x-1 text-red-1">
       <p class="text-body text-xs font-semibold">부가설명</p>
       <p v-if="isInvalidateState === 'description'">부가설명은 200자 이내로 적어주세요</p>
@@ -13,7 +13,7 @@
     </textarea>
     <p
       v-if="limitLength"
-      class="text-xs w-full flex justify-end text-body">
+      class="absolute text-xs top-[calc(100%+4px)] w-full flex justify-end text-body">
       ({{ inputLength }}/{{ limitLength }})
     </p>
   </div>
diff --git a/src/components/statistics/StatisticsCard.vue b/src/components/statistics/StatisticsCard.vue
index b1bc7003..ebd5849e 100644
--- a/src/components/statistics/StatisticsCard.vue
+++ b/src/components/statistics/StatisticsCard.vue
@@ -14,14 +14,16 @@
         v-if="chartType === 'pie'"
         :labels="labels"
         :series="series"
-        :period-type="periodType" />
+        :period-type="periodType"
+        :is-pending="isPending" />
       <LineChart
         :key="JSON.stringify(labels) + periodType"
         v-if="chartType === 'line'"
         :labels="labels"
         :series="series"
         :data-label="title.slice(4)"
-        :period-type="periodType" />
+        :period-type="periodType"
+        :is-pending="isPending" />
     </div>
   </div>
 </template>
@@ -68,7 +70,7 @@ const fetchStatistics = async () => {
 
 const memberStore = useMemberStore()
 const { isLogined } = storeToRefs(memberStore)
-const { data } = useQuery<StatisticsData[]>({
+const { data, isPending } = useQuery<StatisticsData[]>({
   queryKey: computed(() => [statisticsType, periodType]),
   queryFn: fetchStatistics,
   enabled: isLogined
diff --git a/src/components/statistics/StatisticsCategoryCard.vue b/src/components/statistics/StatisticsCategoryCard.vue
index be8c4415..c72c0deb 100644
--- a/src/components/statistics/StatisticsCategoryCard.vue
+++ b/src/components/statistics/StatisticsCategoryCard.vue
@@ -15,7 +15,10 @@
           :labels="mainLabels"
           :series="mainSeries"
           :period-type="periodType"
-          @on-click="changeMainCategory" />
+          @on-click="changeMainCategory"
+          :is-pending="isMainPending"
+          title="1차 카테고리"
+          no-legend />
       </div>
       <div class="w-1/2 px-1">
         <PieChart
@@ -23,7 +26,10 @@
           :labels="subLabels"
           :series="subSeries"
           :period-type="periodType"
-          :content="!mainCategory ? '1차 카테고리를 선택해주세요' : ''" />
+          :content="!mainCategory ? '1차 카테고리를\n선택해주세요' : ''"
+          :is-pending="isSubPending"
+          :title="mainCategory"
+          no-legend />
       </div>
     </div>
   </div>
@@ -43,6 +49,7 @@ import PieChart from '../charts/PieChart.vue'
 const periodType = ref<PeriodType>('DAY')
 const changePeriod = (newPeriodType: PeriodType) => {
   periodType.value = newPeriodType
+  mainCategory.value = ''
 }
 
 const mainCategory = ref('')
@@ -60,7 +67,7 @@ const fetchMainStatistics = async () => {
 }
 const memberStore = useMemberStore()
 const { isLogined } = storeToRefs(memberStore)
-const { data: mainData } = useQuery<StatisticsData[]>({
+const { data: mainData, isPending: isMainPending } = useQuery<StatisticsData[]>({
   queryKey: computed(() => ['REQUEST_BY_CATEGORY', periodType]),
   queryFn: fetchMainStatistics,
   enabled: isLogined
@@ -83,7 +90,7 @@ const fetchSubStatistics = async () => {
 
   return response.data
 }
-const { data: subData } = useQuery<StatisticsData[]>({
+const { data: subData, isPending: isSubPending } = useQuery<StatisticsData[]>({
   queryKey: computed(() => [mainCategory.value, periodType]),
   queryFn: fetchSubStatistics,
   enabled: computed(() => mainCategory.value !== '') && isLogined
diff --git a/src/components/task-detail/TaskDetailHistoryChat.vue b/src/components/task-detail/TaskDetailHistoryChat.vue
index c94d6669..2026fb36 100644
--- a/src/components/task-detail/TaskDetailHistoryChat.vue
+++ b/src/components/task-detail/TaskDetailHistoryChat.vue
@@ -44,7 +44,7 @@
               삭제
             </div>
           </div>
-          <div class="flex flex-col gap-1 h-full justify-end font-semibold">
+          <div class="flex flex-col gap-1 h-full justify-end font-semibold whitespace-nowrap">
             {{ formatTimeShort(history.time) }}
           </div>
         </div>
diff --git a/src/components/task-detail/TaskDetailHistoryInput.vue b/src/components/task-detail/TaskDetailHistoryInput.vue
index b4b7eadf..4545b25c 100644
--- a/src/components/task-detail/TaskDetailHistoryInput.vue
+++ b/src/components/task-detail/TaskDetailHistoryInput.vue
@@ -1,40 +1,44 @@
 <template>
-  <div
-    :class="[
-      'w-full flex gap-1 px-4 py-3 border border-border-1 items-end rounded',
-      { 'bg-background-2': !isPossible, 'bg-white': isPossible }
-    ]">
-    <textarea
-      class="w-full h-20 focus:outline-none resize-none"
-      :class="isPossible ? 'bg-white' : 'bg-background-2'"
-      :placeholder="placeHolderText"
-      v-model="messageText"
-      :disabled="!isPossible"
-      maxlength="254"
-      @compositionstart="isComposing = true"
-      @compositionend="isComposing = false"
-      @keydown.enter.stop.prevent="handleEnterKey"></textarea>
-    <input
-      class="hidden"
-      type="file"
-      id="file"
-      :disabled="!isPossible"
-      @change="handleFileUpload" />
-    <label
-      for="file"
-      class="cursor-pointer hover:bg-background-2 rounded p-1">
-      <CommonIcons :name="clipIcon" />
-    </label>
-    <button
-      type="button"
-      class="hover:bg-background-2 rounded p-1">
-      <CommonIcons
-        :name="sendIcon"
-        :style="{ fill: isSendable ? '#7879EB' : '#A1A1AA' }"
-        @click="sendMessage" />
-    </button>
+  <div class="relative">
+    <div
+      :class="[
+        'w-full flex gap-1 px-4 py-3 border border-border-1 items-end rounded',
+        { 'bg-background-2': !isPossible, 'bg-white': isPossible }
+      ]">
+      <textarea
+        class="w-full h-20 focus:outline-none resize-none"
+        :class="isPossible ? 'bg-white' : 'bg-background-2'"
+        :placeholder="placeHolderText"
+        v-model="messageText"
+        :disabled="!isPossible"
+        maxlength="254"
+        @compositionstart="isComposing = true"
+        @compositionend="isComposing = false"
+        @keydown.enter.stop.prevent="handleEnterKey"></textarea>
+      <input
+        class="hidden"
+        type="file"
+        id="file"
+        :disabled="!isPossible"
+        @change="handleFileUpload" />
+      <label
+        for="file"
+        class="cursor-pointer hover:bg-background-2 rounded p-1">
+        <CommonIcons :name="clipIcon" />
+      </label>
+      <button
+        type="button"
+        class="hover:bg-background-2 rounded p-1">
+        <CommonIcons
+          :name="sendIcon"
+          :style="{ fill: isSendable ? '#7879EB' : '#A1A1AA' }"
+          @click="sendMessage" />
+      </button>
+    </div>
+    <p class="absolute text-xs top-[calc(100%+4px)] w-full flex justify-end text-body">
+      ({{ inputLength }}/{{ 254 }})
+    </p>
   </div>
-  <p class="text-xs mt-1.5 flex w-full justify-end text-body">({{ inputLength }}/{{ 254 }})</p>
   <ModalView
     :is-open="isModalVisible"
     type="failType"
diff --git a/src/components/team-board/CurrentTaskRatio.vue b/src/components/team-board/CurrentTaskRatio.vue
index 63c65108..55abe6d1 100644
--- a/src/components/team-board/CurrentTaskRatio.vue
+++ b/src/components/team-board/CurrentTaskRatio.vue
@@ -14,7 +14,7 @@
         </div>
         <span class="text-xs font-semibold text-primary1">총 {{ teamSummary.totalTasks }}건</span>
       </div>
-      <div class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom items-center p-6 gap-4">
+      <div class="w-full h-[360px] items-center p-6 gap-4">
         <PieChart
           :key="chartLabels.length || 0"
           :labels="chartLabels"

From 5a2d4e2381cd059d3aa1fa9a14c77624f2793f24 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 16:26:09 +0900
Subject: [PATCH 07/14] =?UTF-8?q?:bug:=20[fix]=20:=20=EB=8B=B4=EB=8B=B9?=
 =?UTF-8?q?=EC=9E=90=20=EC=99=84=EB=A3=8C=20=EC=9E=91=EC=97=85=EB=9F=89=20?=
 =?UTF-8?q?=ED=86=B5=EA=B3=84=EC=9D=98=20=ED=8C=8C=EC=9D=B4=20=EA=B7=B8?=
 =?UTF-8?q?=EB=9E=98=ED=94=84=20hover=20=EC=8B=9C=20=EC=9C=84=EC=AA=BD=20?=
 =?UTF-8?q?=EC=9D=BC=EB=B6=80=20=EC=9E=98=EB=A6=AC=EB=8A=94=20=ED=98=84?=
 =?UTF-8?q?=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/charts/PieChart.vue b/src/components/charts/PieChart.vue
index 0682d187..639c0880 100644
--- a/src/components/charts/PieChart.vue
+++ b/src/components/charts/PieChart.vue
@@ -77,6 +77,7 @@ const options = {
   },
   layout: {
     padding: {
+      top: title ? 0 : 8,
       left: 8,
       right: 8,
       bottom: 8

From 97f3c1703845d7da72fe1e7ac63fd5c8705422db Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 17:10:36 +0900
Subject: [PATCH 08/14] =?UTF-8?q?:bug:=20[fix]=20:=20=ED=8C=80=20=ED=98=84?=
 =?UTF-8?q?=ED=99=A9=20=EC=9E=91=EC=97=85=EC=97=90=EC=84=9C=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=B4=20=EA=B7=B8\=EB=9E=98=ED=94=84=20=EB=9D=BC=EB=B2=A8?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=B4=20=EA=B3=B5=EA=B0=84=20=EB=B6=80?=
 =?UTF-8?q?=EC=A1=B1=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/PieChart.vue             | 5 +++--
 src/components/team-board/CurrentTaskRatio.vue | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/charts/PieChart.vue b/src/components/charts/PieChart.vue
index 639c0880..7604cba0 100644
--- a/src/components/charts/PieChart.vue
+++ b/src/components/charts/PieChart.vue
@@ -30,7 +30,7 @@ import type { PeriodType } from '@/types/manager'
 import NoContent from '../lists/NoContent.vue'
 ChartJS.register(Title, Tooltip, Legend, ArcElement, Colors)
 
-const { labels, series, periodType, content, isPending, noLegend, title } = defineProps<{
+const { labels, series, periodType, content, isPending, noLegend, title, position } = defineProps<{
   labels: string[]
   series: number[]
   periodType?: PeriodType
@@ -38,6 +38,7 @@ const { labels, series, periodType, content, isPending, noLegend, title } = defi
   isPending?: boolean
   noLegend?: boolean
   title?: string
+  position?: 'top'
 }>()
 const emit = defineEmits(['onClick'])
 
@@ -65,7 +66,7 @@ const options = {
   plugins: {
     legend: {
       display: noLegend === true ? false : true,
-      position: 'left' as const
+      position: position || ('left' as const)
     },
     tooltip: { enabled: true },
     title: {
diff --git a/src/components/team-board/CurrentTaskRatio.vue b/src/components/team-board/CurrentTaskRatio.vue
index 55abe6d1..ded417eb 100644
--- a/src/components/team-board/CurrentTaskRatio.vue
+++ b/src/components/team-board/CurrentTaskRatio.vue
@@ -14,12 +14,13 @@
         </div>
         <span class="text-xs font-semibold text-primary1">총 {{ teamSummary.totalTasks }}건</span>
       </div>
-      <div class="w-full h-[360px] items-center p-6 gap-4">
+      <div class="w-full h-[360px] items-center gap-4">
         <PieChart
           :key="chartLabels.length || 0"
           :labels="chartLabels"
           :series="chartSeries"
-          content="진행 중인 작업이 없습니다" />
+          content="진행 중인 작업이 없습니다"
+          position="top" />
       </div>
     </div>
   </div>

From 34cc3474b2005f89540a99e605096708c6bc93c0 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 22:06:46 +0900
Subject: [PATCH 09/14] =?UTF-8?q?:bug:=20[fix]=20:=20=EC=B2=AB=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80,=20=EB=A7=88=EC=A7=80=EB=A7=89=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=9D=BC=20=EB=95=8C=20=EC=9D=B4=EC=A0=84,?=
 =?UTF-8?q?=20=EB=8B=A4=EC=9D=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=91=9C=EC=8B=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/lists/ListPagination.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/lists/ListPagination.vue b/src/components/lists/ListPagination.vue
index 6ccc9beb..6a09c85f 100644
--- a/src/components/lists/ListPagination.vue
+++ b/src/components/lists/ListPagination.vue
@@ -11,6 +11,7 @@
         <CommonIcons :name="prevSetIcon" />
       </button>
       <button
+        v-if="pageNumber !== 1"
         @click="onPrevClick"
         class="rounded hover:bg-primary2">
         <CommonIcons :name="prevIcon" />
@@ -27,6 +28,7 @@
     </button>
     <div class="flex gap-1 absolute right-0 top-1/2 translate-x-[calc(100%+8px)] -translate-y-1/2">
       <button
+        v-if="pageNumber !== totalPage"
         @click="onNextClick"
         class="rounded hover:bg-primary2">
         <CommonIcons :name="nextIcon" />

From 440d0a49f33da32affd64f1a89b4d1c090ca2d50 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 22:34:51 +0900
Subject: [PATCH 10/14] =?UTF-8?q?:lipstick:=20[design]=20:=20=ED=8C=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85=20=ED=98=84=ED=99=A9,=20=ED=86=B5=EA=B3=84?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EB=A7=A4=EC=BB=A4=EB=8B=88=EC=A6=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/StatisticsView.vue | 40 ++++++++++++++++++++----------------
 src/views/TeamBoardView.vue  | 12 +++++++----
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index 5256df6a..6bc02050 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -1,23 +1,27 @@
 <template>
-  <div class="list-view">
-    <TitleBar title="통계" />
+  <div class="max-w-1200 !pt-0">
+    <div class="w-full flex flex-col gap-6 sticky top-[64px] pt-6 pb-6 bg-white">
+      <TitleBar title="통계" />
+    </div>
 
-    <div class="grow bg-primary2 rounded-lg grid grid-cols-2 gap-12 px-12 py-6 overflow-y-auto">
-      <StatisticsCard
-        title="기간별 작업 요청량"
-        statistics-type="REQUEST_BY_PERIOD"
-        chart-type="line">
-      </StatisticsCard>
-      <StatisticsCategoryCard />
-      <StatisticsCard
-        title="기간별 완료 작업량"
-        statistics-type="PROCESS_BY_PERIOD"
-        chart-type="line">
-      </StatisticsCard>
-      <StatisticsCard
-        title="담당자별 완료 작업량"
-        statistics-type="PROCESS_BY_MANAGER"
-        chart-type="pie" />
+    <div class="pt-16">
+      <div class="bg-primary2 rounded-lg grid grid-cols-2 gap-12 px-12 py-6 overflow-y-auto">
+        <StatisticsCard
+          title="기간별 작업 요청량"
+          statistics-type="REQUEST_BY_PERIOD"
+          chart-type="line">
+        </StatisticsCard>
+        <StatisticsCategoryCard />
+        <StatisticsCard
+          title="기간별 완료 작업량"
+          statistics-type="PROCESS_BY_PERIOD"
+          chart-type="line">
+        </StatisticsCard>
+        <StatisticsCard
+          title="담당자별 완료 작업량"
+          statistics-type="PROCESS_BY_MANAGER"
+          chart-type="pie" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/views/TeamBoardView.vue b/src/views/TeamBoardView.vue
index ae99b55c..01b63672 100644
--- a/src/views/TeamBoardView.vue
+++ b/src/views/TeamBoardView.vue
@@ -1,10 +1,14 @@
 <template>
-  <div class="max-w-1200 h-screen flex flex-col gap-6 overflow-hidden">
-    <TitleBar title="팀 작업 현황" />
+  <div class="max-w-1200 !pt-0">
+    <div class="w-full flex flex-col gap-6 sticky top-[64px] pt-6 pb-6 bg-white">
+      <TitleBar title="팀 작업 현황" />
 
-    <TeamBoardFilterBar />
+      <TeamBoardFilterBar />
+    </div>
 
-    <TeamBoard />
+    <div class="pt-16">
+      <TeamBoard />
+    </div>
   </div>
 </template>
 

From 264754723d87be5f99f0a2c7fe8a92b353d30760 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 22:37:53 +0900
Subject: [PATCH 11/14] =?UTF-8?q?:bug:=20[fix]=20:=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=EC=8B=9C=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EC=9C=84=EC=B9=98=20=EC=9C=A0=EC=A7=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index bedc03a4..db8a5de2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -128,7 +128,10 @@ const router = createRouter({
       name: 'NotFound',
       component: () => import('../views/NotFoundView.vue')
     }
-  ]
+  ],
+  scrollBehavior() {
+    return { top: 0 }
+  }
 })
 
 router.beforeEach(async (to, from, next) => {

From 95090aabc47ed5669800a5ae6dd737e1d2e87d95 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Fri, 14 Feb 2025 23:02:47 +0900
Subject: [PATCH 12/14] =?UTF-8?q?:bug:=20[fix]=20:=20=EC=9E=91=EC=97=85=20?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EB=A7=A4=EC=BB=A4=EB=8B=88=EC=A6=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-board/TaskBoard.vue | 63 ++++++-------------------
 src/views/TaskBoardView.vue             | 53 +++++++++++++++++++--
 2 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/src/components/task-board/TaskBoard.vue b/src/components/task-board/TaskBoard.vue
index 50e7dbbc..f0050e4d 100644
--- a/src/components/task-board/TaskBoard.vue
+++ b/src/components/task-board/TaskBoard.vue
@@ -1,24 +1,6 @@
 <template>
-  <div class="overflow-y-auto grow">
-    <div class="w-full grid grid-cols-3 gap-12 sticky top-0 bg-white z-30">
-      <div class="flex bg-primary2 rounded-t-lg">
-        <span class="text-xs font-semibold text-body p-4">
-          진행 중 {{ data?.tasksInProgress.length }}
-        </span>
-      </div>
-      <div class="flex bg-primary2 rounded-t-lg">
-        <span class="text-xs font-semibold text-body p-4">
-          검토 중 {{ data?.tasksInReviewing.length }}
-        </span>
-      </div>
-      <div class="flex bg-primary2 rounded-t-lg">
-        <span class="text-xs font-semibold text-body p-4">
-          완료 {{ data?.tasksCompleted.length }}
-        </span>
-      </div>
-    </div>
-
-    <div class="w-full grid grid-cols-3 gap-12 min-h-[calc(100%-48px)] overflow-hidden">
+  <div class="grow">
+    <div class="w-full h-full grid grid-cols-3 gap-12 overflow-hidden">
       <div class="grow shrink-0 px-4 pb-4 bg-primary2 rounded-b-lg relative">
         <div class="absolute top-0 left-0 px-4 w-full">
           <div
@@ -110,18 +92,16 @@
 </template>
 
 <script setup lang="ts">
-import { useParseParams } from '@/hooks/useParseParams'
-import { useMemberStore } from '@/stores/member'
-import { useTaskBoardParamsStore } from '@/stores/params'
 import type { Status } from '@/types/common'
 import type { DraggableEvent, TaskCardList } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { storeToRefs } from 'pinia'
+import { useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 import draggableComponent from 'vuedraggable'
 import TaskCard from '../common/TaskCard.vue'
 
+const { data } = defineProps<{ data?: TaskCardList }>()
+
 const queryClient = useQueryClient()
 
 const statusToKey = (status: Status): keyof TaskCardList | undefined => {
@@ -138,9 +118,9 @@ 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 prevTaskId = (data && data[key!][targetIndex - 1]?.taskId) || 0
     const targetTaskId = event.added.element.taskId
-    const nextTaskId = (data.value && data.value[key!][targetIndex])?.taskId || 0
+    const nextTaskId = (data && data[key!][targetIndex])?.taskId || 0
     const body = {
       prevTaskId,
       targetTaskId,
@@ -155,11 +135,11 @@ const onListChange = async (event: DraggableEvent, status: Status) => {
     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
+      prevTaskId = (data && data[key!][newIndex]?.taskId) || 0
+      nextTaskId = (data && data[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
+      prevTaskId = (data && data[key!][newIndex - 1]?.taskId) || 0
+      nextTaskId = (data && data[key!][newIndex]?.taskId) || 0
     }
     const body = {
       prevTaskId,
@@ -171,24 +151,9 @@ const onListChange = async (event: DraggableEvent, status: Status) => {
   }
 }
 
-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 memberStore = useMemberStore()
-const { isLogined } = storeToRefs(memberStore)
-const { data } = useQuery<TaskCardList>({
-  queryKey: ['taskBoard', params],
-  queryFn: fetchTaskBoard,
-  enabled: isLogined
-})
-
-const tasksInProgress = computed(() => [...(data.value?.tasksInProgress || [])])
-const tasksInReviewing = computed(() => [...(data.value?.tasksInReviewing || [])])
-const tasksCompleted = computed(() => [...(data.value?.tasksCompleted || [])])
+const tasksInProgress = computed(() => [...(data?.tasksInProgress || [])])
+const tasksInReviewing = computed(() => [...(data?.tasksInReviewing || [])])
+const tasksCompleted = computed(() => [...(data?.tasksCompleted || [])])
 
 const isDetailOpen = ref(false)
 </script>
diff --git a/src/views/TaskBoardView.vue b/src/views/TaskBoardView.vue
index 7ecf62aa..5e5a6a13 100644
--- a/src/views/TaskBoardView.vue
+++ b/src/views/TaskBoardView.vue
@@ -1,10 +1,32 @@
 <template>
-  <div class="max-w-1200 h-screen flex flex-col gap-6">
-    <TitleBar title="작업 보드" />
+  <div class="max-w-1200 flex flex-col !pt-0 min-h-screen">
+    <div class="w-full flex flex-col gap-6 sticky top-[64px] pt-6 bg-white z-40">
+      <TitleBar title="작업 보드" />
 
-    <TaskBoardFilterBar />
+      <TaskBoardFilterBar />
 
-    <TaskBoard />
+      <div class="w-full grid grid-cols-3 gap-12 sticky top-0 bg-white z-30">
+        <div class="flex bg-primary2 rounded-t-lg">
+          <span class="text-xs font-semibold text-body p-4">
+            진행 중 {{ data?.tasksInProgress.length }}
+          </span>
+        </div>
+        <div class="flex bg-primary2 rounded-t-lg">
+          <span class="text-xs font-semibold text-body p-4">
+            검토 중 {{ data?.tasksInReviewing.length }}
+          </span>
+        </div>
+        <div class="flex bg-primary2 rounded-t-lg">
+          <span class="text-xs font-semibold text-body p-4">
+            완료 {{ data?.tasksCompleted.length }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="pt-16 flex grow">
+      <TaskBoard :data="data" />
+    </div>
   </div>
 </template>
 
@@ -12,4 +34,27 @@
 import TitleBar from '@/components/common/TitleBar.vue'
 import TaskBoard from '@/components/task-board/TaskBoard.vue'
 import TaskBoardFilterBar from '@/components/task-board/TaskBoardFilterBar.vue'
+import { useParseParams } from '@/hooks/useParseParams'
+import { useMemberStore } from '@/stores/member'
+import { useTaskBoardParamsStore } from '@/stores/params'
+import type { TaskCardList } from '@/types/manager'
+import { axiosInstance } from '@/utils/axios'
+import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
+
+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 memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
+
+const { data } = useQuery<TaskCardList>({
+  queryKey: ['taskBoard', params],
+  queryFn: fetchTaskBoard,
+  enabled: isLogined
+})
 </script>

From a5a04887abd980efc45c680bf36619735ad396e9 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sat, 15 Feb 2025 00:18:52 +0900
Subject: [PATCH 13/14] =?UTF-8?q?:lipstick:=20[design]=20:=20=ED=8C=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85=20=ED=98=84=ED=99=A9,=20=EA=B0=9C=EB=B3=84?=
 =?UTF-8?q?=20=EC=9E=91=EC=97=85=20=EC=B9=B4=EB=93=9C=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=EB=B0=94=20=EC=88=A8=EA=B9=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/team-board/TeamBoardCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/team-board/TeamBoardCard.vue b/src/components/team-board/TeamBoardCard.vue
index 29ef35d5..25385485 100644
--- a/src/components/team-board/TeamBoardCard.vue
+++ b/src/components/team-board/TeamBoardCard.vue
@@ -22,7 +22,7 @@
       <span class="text-xs font-semibold text-primary1">총 {{ info.totalTaskCount }}건</span>
     </div>
     <div
-      class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-auto flex flex-col items-center p-6 gap-4">
+      class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-auto scrollbar-hide flex flex-col items-center p-6 gap-4">
       <TaskCard
         v-for="task in info.tasks"
         :key="task.taskId"

From 05e2396ce8bbe3edc2a3b966301d7aad8b8b2050 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sat, 15 Feb 2025 00:54:45 +0900
Subject: [PATCH 14/14] =?UTF-8?q?:lipstick:=20[design]=20:=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=97=86=EB=8A=94=20?=
 =?UTF-8?q?ListCard=EC=97=90=20cursor-default=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/api-logs/ApiLogsListCard.vue                 | 2 +-
 src/components/login-logs/LoginLogsListCard.vue             | 2 +-
 .../member-management/MemberManagementListCard.vue          | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/api-logs/ApiLogsListCard.vue b/src/components/api-logs/ApiLogsListCard.vue
index 1c19f5d9..154a085a 100644
--- a/src/components/api-logs/ApiLogsListCard.vue
+++ b/src/components/api-logs/ApiLogsListCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="list-card">
+  <div class="list-card !cursor-default">
     <ListCardTab
       v-for="tab in myRequestTabList"
       :key="tab.content"
diff --git a/src/components/login-logs/LoginLogsListCard.vue b/src/components/login-logs/LoginLogsListCard.vue
index a0d99082..cd86697b 100644
--- a/src/components/login-logs/LoginLogsListCard.vue
+++ b/src/components/login-logs/LoginLogsListCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="list-card">
+  <div class="list-card !cursor-default">
     <ListCardTab
       v-for="tab in myRequestTabList"
       :key="tab.content"
diff --git a/src/components/member-management/MemberManagementListCard.vue b/src/components/member-management/MemberManagementListCard.vue
index ef5f8746..eb84fd87 100644
--- a/src/components/member-management/MemberManagementListCard.vue
+++ b/src/components/member-management/MemberManagementListCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="list-card">
+  <div class="list-card !cursor-default">
     <ListCardTab
       v-for="tab in myRequestTabList"
       :key="tab.content"
@@ -24,7 +24,9 @@
       <button
         type="button"
         :class="
-          info.memberStatus !== 'ACTIVE' ? 'button-medium-secondary' : 'button-medium-disabled'
+          info.memberStatus !== 'ACTIVE'
+            ? 'button-medium-secondary'
+            : 'button-medium-disabled !cursor-default'
         "
         @click="info.memberStatus !== 'ACTIVE' && onMemberInvite(info.memberId)">
         초대