diff --git a/src/api/auth.ts b/src/api/auth.ts
index 58720fdf..7ec7a9eb 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -3,11 +3,8 @@ import Cookies from 'js-cookie'
 import type { loginDataTypes } from '@/types/auth'
 import { useMemberStore } from '@/stores/member'
 
-export const postLogin = async (loginData: loginDataTypes, sessionId: string) => {
-  const memberStore = useMemberStore()
-  const response = await axiosInstance.post('/api/auths/login', loginData, {
-    headers: { sessionId: sessionId }
-  })
+export const postLogin = async (loginData: loginDataTypes) => {
+  const response = await axiosInstance.post('/api/auths/login', loginData)
   Cookies.set('accessToken', response.data.accessToken, {
     path: '/',
     sameSite: 'strict'
@@ -16,7 +13,6 @@ export const postLogin = async (loginData: loginDataTypes, sessionId: string) =>
     path: '/',
     sameSite: 'strict'
   })
-  await memberStore.updateMemberInfoWithToken()
   return response.data
 }
 
@@ -26,16 +22,8 @@ export const patchPassword = async (password: string) => {
 }
 
 export const deleteLogout = async () => {
-  const refreshToken = Cookies.get('refreshToken')
-  const accessToken = Cookies.get('accessToken')
-
-  const response = await axiosInstance.delete('/api/auths/logout', {
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      refreshToken: refreshToken
-    }
-  })
-  Cookies.remove('accessToken', { path: '/' })
-  Cookies.remove('refreshToken', { path: '/' })
-  return response
+  const memberStore = useMemberStore()
+  memberStore.$reset()
+  Cookies.remove('accessToken')
+  Cookies.remove('refreshToken')
 }
diff --git a/src/components/LineChart.vue b/src/components/LineChart.vue
index d0f3fe06..16cd703f 100644
--- a/src/components/LineChart.vue
+++ b/src/components/LineChart.vue
@@ -5,7 +5,7 @@
     :options="options" />
   <NoContent
     v-else
-    content="데이터가 없습니다" />
+    :content="`집계된 ${periodText[periodType]} 데이터가 없습니다`" />
 </template>
 
 <script setup lang="ts">
@@ -22,6 +22,7 @@ import {
   Colors
 } from 'chart.js'
 import NoContent from './lists/NoContent.vue'
+import type { PeriodType } from '@/types/manager'
 
 ChartJS.register(
   Title,
@@ -34,12 +35,15 @@ ChartJS.register(
   Colors
 )
 
-const { labels, series, dataLabel } = defineProps<{
+const { labels, series, dataLabel, periodType } = defineProps<{
   labels: string[]
   series: number[]
   dataLabel: string
+  periodType: PeriodType
 }>()
 
+const periodText = { DAY: '일간', WEEK: '주간', MONTH: '월간' }
+
 const teamData = {
   labels,
   datasets: [
diff --git a/src/components/PieChart.vue b/src/components/PieChart.vue
index 2850fc7b..50239597 100644
--- a/src/components/PieChart.vue
+++ b/src/components/PieChart.vue
@@ -5,7 +5,9 @@
     :options="options" />
   <NoContent
     v-else
-    content="집계된 데이터가 없습니다" />
+    :content="
+      !content && periodType ? `집계된 ${periodText[periodType]} 데이터가 없습니다` : content
+    " />
 </template>
 
 <script setup lang="ts">
@@ -21,11 +23,19 @@ import {
   type ActiveElement
 } from 'chart.js'
 import NoContent from './lists/NoContent.vue'
+import type { PeriodType } from '@/types/manager'
 ChartJS.register(Title, Tooltip, Legend, ArcElement, Colors)
 
-const { labels, series } = defineProps<{ labels: string[]; series: number[] }>()
+const { labels, series, periodType, content } = defineProps<{
+  labels: string[]
+  series: number[]
+  periodType?: PeriodType
+  content?: string
+}>()
 const emit = defineEmits(['onClick'])
 
+const periodText = { DAY: '일간', WEEK: '주간', MONTH: '월간' }
+
 const teamData = {
   labels,
   datasets: [
diff --git a/src/components/common/ResultModal.vue b/src/components/common/ResultModal.vue
new file mode 100644
index 00000000..ffa49930
--- /dev/null
+++ b/src/components/common/ResultModal.vue
@@ -0,0 +1,19 @@
+<template>
+  <ModalView
+    :type="type"
+    :is-open="isOpen"
+    @close="emit('close')">
+    <template #header>{{ message }}</template>
+  </ModalView>
+</template>
+
+<script setup lang="ts">
+import ModalView from '../ModalView.vue'
+
+const { type, isOpen, message } = defineProps<{
+  type: string
+  isOpen: boolean
+  message: string
+}>()
+const emit = defineEmits(['close'])
+</script>
diff --git a/src/components/icons/NotificationIcon.vue b/src/components/icons/NotificationIcon.vue
index c3ddc046..7fb6b58d 100644
--- a/src/components/icons/NotificationIcon.vue
+++ b/src/components/icons/NotificationIcon.vue
@@ -19,7 +19,7 @@
     <div
       v-if="newNotification"
       class="absolute top-0 right-0 w-5 h-5 rounded-full bg-red-1 text-white font-bold text-xs flex justify-center items-center">
-      {{ newNotification }}
+      {{ newNotification < 100 ? newNotification : 99 }}
     </div>
   </div>
 </template>
diff --git a/src/components/lists/NoContent.vue b/src/components/lists/NoContent.vue
index c92585f8..79354acc 100644
--- a/src/components/lists/NoContent.vue
+++ b/src/components/lists/NoContent.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="w-full h-full flex justify-center items-center">
-    <span class="text-lg text-disabled font-bold">{{ content }}</span>
+    <span class="text-lg text-disabled font-bold text-center">{{ content }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
-const { content = '표시할 항목이 없어요' } = defineProps<{ content?: string }>()
+const { content = '표시할 항목이 없습니다' } = defineProps<{ content?: string }>()
 </script>
diff --git a/src/components/login-logs/LoginLogsListCard.vue b/src/components/login-logs/LoginLogsListCard.vue
index d8346563..9624fbec 100644
--- a/src/components/login-logs/LoginLogsListCard.vue
+++ b/src/components/login-logs/LoginLogsListCard.vue
@@ -16,7 +16,7 @@
 import type { ListCardProps } from '@/types/common'
 import ListCardTab from '../lists/ListCardTab.vue'
 import type { LoginLogsListData } from '@/types/admin'
-import { formatDate } from '@/utils/date'
+import { formatFullDateTime } from '@/utils/date'
 
 const logStatus = {
   LOGIN: '로그인 시도',
@@ -31,7 +31,7 @@ const myRequestTabList: ListCardProps[] = [
     isTextXs: true,
     isTextBody: true
   },
-  { content: formatDate(info.requestAt), width: 180, isTextXs: true },
+  { content: formatFullDateTime(info.requestAt), width: 180, isTextXs: true },
   { content: info.nickName, width: 80 },
   { content: info.clientIp, width: 120, isTextXs: true },
   { content: String(info.statusCode), width: 40, isTextXs: true, isStatusCode: true },
diff --git a/src/components/member-management/MemberManagementListCard.vue b/src/components/member-management/MemberManagementListCard.vue
index f0573174..44f0a470 100644
--- a/src/components/member-management/MemberManagementListCard.vue
+++ b/src/components/member-management/MemberManagementListCard.vue
@@ -35,25 +35,11 @@
     <template #header>회원을 삭제 하시겠습니까?</template>
     <template #body>삭제된 회원은 복구할 수 없습니다</template>
   </ModalView>
-  <ModalView
-    type="failType"
-    :is-open="isModalVisible.fail"
-    @close="closeModal">
-    <template #header>회원 삭제에 실패했습니다</template>
-  </ModalView>
-  <ModalView
-    type="successType"
-    :is-open="isModalVisible.success"
-    @close="closeModal">
-    <template #header>회원을 삭제했습니다</template>
-  </ModalView>
-
-  <ModalView
-    type="successType"
-    :is-open="isModalVisible.invite"
-    @close="closeModal">
-    <template #header>초대 메일을 발송하였습니다</template>
-  </ModalView>
+  <ResultModal
+    :type="resultModalType"
+    :is-open="isModalVisible.result"
+    :message="message"
+    @close="closeModal" />
 </template>
 
 <script setup lang="ts">
@@ -66,6 +52,7 @@ import { ref } from 'vue'
 import { axiosInstance } from '@/utils/axios'
 import { useQueryClient } from '@tanstack/vue-query'
 import { formatDate } from '@/utils/date'
+import ResultModal from '../common/ResultModal.vue'
 
 const roleContent = (role: Role) => {
   return role === 'ROLE_USER' ? '사용자' : role === 'ROLE_MANAGER' ? '담당자' : '관리자'
@@ -88,32 +75,44 @@ const queryClient = useQueryClient()
 
 const isModalVisible = ref({
   delete: false,
-  invite: false,
-  fail: false,
-  success: false
+  result: false
 })
+const resultModalType = ref('')
+const message = ref('')
 const toggleModal = (key: keyof typeof isModalVisible.value) => {
   isModalVisible.value = Object.fromEntries(
     Object.keys(isModalVisible.value).map(k => [k, k === key])
   ) as typeof isModalVisible.value
 }
 const closeModal = () => {
-  const prevSuccess = isModalVisible.value.success
-  isModalVisible.value = { delete: false, invite: false, fail: false, success: false }
+  const prevSuccess = isModalVisible.value.result
+  isModalVisible.value = { delete: false, result: false }
   if (prevSuccess) queryClient.invalidateQueries({ queryKey: ['member'] })
 }
 
 const onMemberDelete = async (memberId: number) => {
   try {
-    await axiosInstance.patch(`/api/managements/members/delete`, { memberId })
-    toggleModal('success')
+    await axiosInstance.delete(`/api/managements/members`, { data: { memberId } })
+    resultModalType.value = 'successType'
+    message.value = '회원을 삭제했습니다'
+    toggleModal('result')
   } catch {
-    toggleModal('fail')
+    resultModalType.value = 'failType'
+    message.value = '회원 삭제에 실패했습니다'
+    toggleModal('result')
   }
 }
 
-const onMemberInvite = (memberId: number) => {
-  console.log(memberId)
-  toggleModal('invite')
+const onMemberInvite = async (memberId: number) => {
+  try {
+    await axiosInstance.post('/api/managements/members/invite', { memberId })
+    resultModalType.value = 'successType'
+    message.value = '초대 메일을 발송하였습니다'
+    toggleModal('result')
+  } catch {
+    resultModalType.value = 'failType'
+    message.value = '초대 메일 발송에 실패했습니다'
+    toggleModal('result')
+  }
 }
 </script>
diff --git a/src/components/my-request/MyRequestListCard.vue b/src/components/my-request/MyRequestListCard.vue
index 9d838b34..390a61a5 100644
--- a/src/components/my-request/MyRequestListCard.vue
+++ b/src/components/my-request/MyRequestListCard.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="list-card">
+  <div
+    class="list-card"
+    @click="handleModal(info.taskId)">
     <ListCardTab
       v-for="tab in myRequestTabList"
-      @click="handleModal(info.taskId)"
       :key="tab.content"
       :content="tab.content"
       :width="tab.width"
@@ -29,6 +30,8 @@ const { info } = defineProps<{ info: MyRequestListData }>()
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
+  if (id) document.body.style.overflow = 'hidden'
+  else document.body.style.overflow = ''
   selectedID.value = id
 }
 
diff --git a/src/components/my-task/MyTaskListCard.vue b/src/components/my-task/MyTaskListCard.vue
index 6f65758b..d9d24c9c 100644
--- a/src/components/my-task/MyTaskListCard.vue
+++ b/src/components/my-task/MyTaskListCard.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="list-card">
+  <div
+    class="list-card"
+    @click="handleModal(info.taskId)">
     <ListCardTab
       v-for="tab in myRequestTabList"
-      @click="handleModal(info.taskId)"
       :key="tab.content"
       :content="tab.content"
       :width="tab.width"
@@ -29,6 +30,8 @@ const { info } = defineProps<{ info: MyTaskListData }>()
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
+  if (id) document.body.style.overflow = 'hidden'
+  else document.body.style.overflow = ''
   selectedID.value = id
 }
 const myRequestTabList: ListCardProps[] = [
diff --git a/src/components/request-history/RequestHistoryListCard.vue b/src/components/request-history/RequestHistoryListCard.vue
index b2b44fb0..000b85c9 100644
--- a/src/components/request-history/RequestHistoryListCard.vue
+++ b/src/components/request-history/RequestHistoryListCard.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="list-card">
+  <div
+    class="list-card"
+    @click="handleModal(info.taskId)">
     <ListCardTab
       v-for="tab in myRequestTabList"
-      @click="handleModal(info.taskId)"
       :key="tab.content"
       :content="tab.content"
       :width="tab.width"
@@ -29,6 +30,8 @@ const { info } = defineProps<{ info: RequestHistoryListData }>()
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
+  if (id) document.body.style.overflow = 'hidden'
+  else document.body.style.overflow = ''
   selectedID.value = id
 }
 const myRequestTabList: ListCardProps[] = [
diff --git a/src/components/request-task/CategoryDropDown.vue b/src/components/request-task/CategoryDropDown.vue
index ecf6c6de..ec9bb1d9 100644
--- a/src/components/request-task/CategoryDropDown.vue
+++ b/src/components/request-task/CategoryDropDown.vue
@@ -13,9 +13,12 @@
         카테고리를 선택해주세요
       </p>
     </div>
-    <div class="relative flex">
+    <div
+      ref="htmlRef"
+      class="relative flex">
       <div
-        class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black"
+        class="flex w-full h-11 items-center rounded p-4 border border-border-1 cursor-pointer text-black"
+        :class="isDisabled ? 'bg-background-1' : 'bg-white'"
         @click="toggleDropdown">
         <p :class="{ 'text-disabled': !modelValue?.name }">
           {{ modelValue?.name ?? labelName + '를 선택해주세요' }}
@@ -26,7 +29,7 @@
       </div>
       <div
         v-if="dropdownOpen"
-        class="absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2 text-black">
+        class="absolute w-full max-h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2 text-black">
         <div
           v-for="option in options"
           :key="option.id"
@@ -44,6 +47,7 @@ import { dropdownIcon } from '@/constants/iconPath'
 import type { Category, CategoryDropdownProps } from '@/types/common'
 import { computed, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { options, labelName, modelValue, isLabel, isDisabled, isInvalidate } =
   defineProps<CategoryDropdownProps>()
@@ -62,4 +66,6 @@ const selectOption = (option: Category) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
+
+const { htmlRef } = useOutsideClick(() => dropdownOpen.value && toggleDropdown())
 </script>
diff --git a/src/components/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue
index d792a4c8..248e08e1 100644
--- a/src/components/requested/RequestedListCard.vue
+++ b/src/components/requested/RequestedListCard.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="list-card">
+  <div
+    class="list-card"
+    @click="handleModal(info.taskId)">
     <ListCardTab
       v-for="tab in requestedTabList"
-      @click="handleModal(info.taskId)"
       :key="tab.content"
       :content="tab.content"
       :width="tab.width"
@@ -16,7 +17,7 @@
         승인
       </button>
       <button
-        @click="toggleModal('reject')"
+        @click.stop="toggleModal('reject')"
         class="button-medium-default">
         거부
       </button>
@@ -74,6 +75,8 @@ const requestedTabList: ListCardProps[] = [
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
+  if (id) document.body.style.overflow = 'hidden'
+  else document.body.style.overflow = ''
   selectedID.value = id
 }
 
@@ -88,11 +91,13 @@ const isModalVisible = ref({
 const modalError = ref('')
 const rejectReason = ref('')
 const toggleModal = (key: keyof typeof isModalVisible.value) => {
+  document.body.style.overflow = 'hidden'
   isModalVisible.value = Object.fromEntries(
     Object.keys(isModalVisible.value).map(k => [k, k === key])
   ) as typeof isModalVisible.value
 }
 const closeModal = () => {
+  document.body.style.overflow = ''
   const prevSuccess = isModalVisible.value.success
   isModalVisible.value = { reject: false, fail: false, success: false }
   if (prevSuccess) queryClient.invalidateQueries({ queryKey: ['requested'] })
diff --git a/src/components/statistics/StatisticsCard.vue b/src/components/statistics/StatisticsCard.vue
index 02270d9e..84f1f439 100644
--- a/src/components/statistics/StatisticsCard.vue
+++ b/src/components/statistics/StatisticsCard.vue
@@ -13,13 +13,15 @@
         :key="JSON.stringify(labels) + periodType"
         v-if="chartType === 'pie'"
         :labels="labels"
-        :series="series" />
+        :series="series"
+        :period-type="periodType" />
       <LineChart
         :key="JSON.stringify(labels) + periodType"
         v-if="chartType === 'line'"
         :labels="labels"
         :series="series"
-        :data-label="title.slice(4)" />
+        :data-label="title.slice(4)"
+        :period-type="periodType" />
     </div>
   </div>
 </template>
diff --git a/src/components/statistics/StatisticsCategoryCard.vue b/src/components/statistics/StatisticsCategoryCard.vue
index 48b179f1..371b4641 100644
--- a/src/components/statistics/StatisticsCategoryCard.vue
+++ b/src/components/statistics/StatisticsCategoryCard.vue
@@ -14,13 +14,16 @@
           :key="JSON.stringify(mainLabels) + periodType"
           :labels="mainLabels"
           :series="mainSeries"
+          :period-type="periodType"
           @on-click="changeMainCategory" />
       </div>
       <div class="w-1/2 px-1">
         <PieChart
           :key="JSON.stringify(subLabels) + mainCategory + periodType"
           :labels="subLabels"
-          :series="subSeries" />
+          :series="subSeries"
+          :period-type="periodType"
+          :content="mainCategory && '1차 카테고리를 선택해주세요'" />
       </div>
     </div>
   </div>
diff --git a/src/components/task-board/TaskBoard.vue b/src/components/task-board/TaskBoard.vue
index 07f51035..c7cd4823 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?.tasksInProgress.length }}
+          검토 중 {{ data?.tasksInReviewing.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?.tasksInProgress.length === 0"
+            v-if="data?.tasksInReviewing.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끌어 놓으세요' }}
@@ -55,7 +55,7 @@
           </div>
         </div>
         <draggableComponent
-          :list="tasksPendingComplete"
+          :list="tasksInReviewing"
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
@@ -132,7 +132,6 @@ const onListChange = async (event: DraggableEvent, status: Status) => {
       targetTaskId,
       nextTaskId
     }
-    console.log(prevTaskId, targetTaskId, nextTaskId)
     await axiosInstance.patch('/api/task-board', body, { params: { status } })
     queryClient.invalidateQueries({ queryKey: ['taskBoard'] })
   }
@@ -172,6 +171,6 @@ const { data } = useQuery<TaskCardList>({
 })
 
 const tasksInProgress = computed(() => [...(data.value?.tasksInProgress || [])])
-const tasksPendingComplete = computed(() => [...(data.value?.tasksInReviewing || [])])
+const tasksInReviewing = computed(() => [...(data.value?.tasksInReviewing || [])])
 const tasksCompleted = computed(() => [...(data.value?.tasksCompleted || [])])
 </script>
diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 27b5fcf6..1fead0bb 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -1,17 +1,21 @@
 <template>
-  <div class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12">
+  <div
+    :onClick="closeTaskDetail"
+    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12">
     <div
-      class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[1024px] bg-white p-6">
+      @click.stop
+      class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[768px] h-full bg-white p-6">
       <TaskDetailTopBar
+        v-if="data"
         :is-approved="data?.taskStatus !== 'REQUESTED'"
         :close-task-detail="closeTaskDetail"
         :id="data?.taskId || 0"
         :isProcessor="data?.processorNickName === info.nickname || info.role === 'ROLE_MANAGER'"
         :isRequestor="data?.requesterNickName === info.nickname" />
       <div
-        class="w-full flex gap-6"
-        v-if="data">
-        <div class="w-full h-[718px] flex flex-col gap-y-8 overflow-y-auto scrollbar-hide">
+        v-if="data"
+        class="w-full flex gap-6 relative overflow-y-auto">
+        <div class="w-full flex flex-col gap-y-8 overflow-y-auto scrollbar-hide">
           <TaskDetailLeft :data="data" />
           <div class="w-full h-[1px] bg-border-1 shrink-0"></div>
           <TaskDetailHistory
@@ -32,28 +36,54 @@
 import { getHistory, getTaskDetailManager, getTaskDetailUser } from '@/api/user'
 import { useMemberStore } from '@/stores/member'
 import type { TaskDetailDatas, TaskDetailHistoryData, TaskDetailProps } from '@/types/user'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { storeToRefs } from 'pinia'
+import { computed, watch, ref } from 'vue'
 import TaskDetailHistory from './TaskDetailHistory.vue'
 import TaskDetailLeft from './TaskDetailLeft.vue'
 import TaskDetailRight from './TaskDetailRight.vue'
 import TaskDetailTopBar from './TaskDetailTopBar.vue'
 
 const { closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
+const queryClient = useQueryClient()
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
 
-const { data } = useQuery<TaskDetailDatas>({
+const userRole = computed(() => info.value.role)
+const isDataFetched = ref(false)
+
+const fetchData = async () => {
+  if (!userRole.value) return
+  const result =
+    userRole.value === 'ROLE_USER'
+      ? await getTaskDetailUser(selectedId)
+      : await getTaskDetailManager(selectedId)
+  isDataFetched.value = true
+  return result
+}
+
+const { data, refetch } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
-  queryFn:
-    info.value.role === 'ROLE_USER'
-      ? () => getTaskDetailUser(selectedId)
-      : () => getTaskDetailManager(selectedId)
+  queryFn: fetchData,
+  enabled: false // Initially disabled
 })
 
 const { data: historyData } = useQuery<TaskDetailHistoryData>({
   queryKey: ['historyData', selectedId],
-  queryFn: () => getHistory(selectedId)
+  queryFn: () => getHistory(selectedId),
+  enabled: isDataFetched.value
 })
+
+// Watch for role changes and trigger refetch
+watch(
+  userRole,
+  async newRole => {
+    if (newRole) {
+      await queryClient.invalidateQueries({ queryKey: ['taskDetailUser', selectedId] })
+      await refetch()
+    }
+  },
+  { immediate: true }
+)
 </script>
diff --git a/src/components/task-detail/TaskDetailHistoryChat.vue b/src/components/task-detail/TaskDetailHistoryChat.vue
index 4f6fbaed..b63278ad 100644
--- a/src/components/task-detail/TaskDetailHistoryChat.vue
+++ b/src/components/task-detail/TaskDetailHistoryChat.vue
@@ -1,9 +1,13 @@
 <template>
   <div :class="['flex w-full', isProcessor ? 'justify-end' : 'justify-start']">
-    <div :class="['w-10 h-10 rounded-full pt-1.5', isProcessor ? 'order-3' : 'order-1']">
+    <div
+      :class="[
+        'flex justify-center items-center w-10 h-10 shrink-0 rounded-full overflow-hidden mt-1.5',
+        isProcessor ? 'order-3' : 'order-1'
+      ]">
       <img
         :src="history.details.commentDetails?.profileImageUrl || '/images/mockProfile.jpg'"
-        class="rounded-full" />
+        class="center" />
     </div>
     <div
       :class="[
@@ -13,7 +17,7 @@
       <p>{{ history.details.commentDetails?.nickName }}</p>
       <p
         :class="[
-          'flex max-w-[400px] flex-wrap px-6 py-4  text-black rounded-lg',
+          'flex max-w-[400px] flex-wrap px-4 py-3  text-black rounded-lg',
           isProcessor ? 'bg-primary2' : 'bg-background-2'
         ]">
         {{ history.details.commentDetails?.comment }}
diff --git a/src/components/task-detail/TaskDetailHistoryInput.vue b/src/components/task-detail/TaskDetailHistoryInput.vue
index 3ce09df5..e632d497 100644
--- a/src/components/task-detail/TaskDetailHistoryInput.vue
+++ b/src/components/task-detail/TaskDetailHistoryInput.vue
@@ -56,8 +56,7 @@ const isComposing = ref(false)
 
 const isPossible = computed(
   () =>
-    history.length !== 0 &&
-    (info.value.memberRole !== 'ROLE_USER' || info.value.nickname === requestorName)
+    history.length !== 0 && (info.value.role !== 'ROLE_USER' || info.value.role === requestorName)
 )
 
 const isSendable = computed(() => isPossible.value && messageText.value.trim() !== '')
diff --git a/src/components/task-detail/TaskDetailLabelDropdown.vue b/src/components/task-detail/TaskDetailLabelDropdown.vue
index 71b657ac..67f95fbd 100644
--- a/src/components/task-detail/TaskDetailLabelDropdown.vue
+++ b/src/components/task-detail/TaskDetailLabelDropdown.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="relative flex text-base">
+  <div
+    ref="htmlRef"
+    class="relative flex text-base">
     <div
       class="flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-sm text-black"
       @click="toggleDropdown">
@@ -12,7 +14,7 @@
     </div>
     <div
       v-if="dropdownOpen"
-      class="absolute w-full h-40 overflow-y-auto top-12 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom text-black">
+      class="absolute w-full h-32 overflow-y-auto top-12 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom text-black">
       <div
         v-for="option in labelArr"
         :key="option.labelId"
@@ -31,6 +33,7 @@ import type { LabelDataTypes } from '@/types/common'
 import type { LabelDropdownProps } from '@/types/user'
 import { onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { modelValue, placeholderText, taskId } = defineProps<LabelDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
@@ -50,4 +53,6 @@ const selectOption = async (option: LabelDataTypes) => {
   await changeLabel(taskId || 0, option.labelId || 0)
   dropdownOpen.value = false
 }
+
+const { htmlRef } = useOutsideClick(() => dropdownOpen.value && toggleDropdown())
 </script>
diff --git a/src/components/task-detail/TaskDetailManagerDropdown.vue b/src/components/task-detail/TaskDetailManagerDropdown.vue
index cc88e0ea..772ded8f 100644
--- a/src/components/task-detail/TaskDetailManagerDropdown.vue
+++ b/src/components/task-detail/TaskDetailManagerDropdown.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div class="relative flex text-base">
+    <div
+      ref="htmlRef"
+      class="relative flex">
       <div
         class="task-detail-manager-dropdown"
         @click="toggleDropdown">
@@ -51,6 +53,7 @@ import { dropdownIcon } from '@/constants/iconPath'
 import type { ManagerTypes } from '@/types/manager'
 import { onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { modelValue } = defineProps<{ modelValue: ManagerTypes; taskId: number }>()
 const emit = defineEmits(['update:modelValue'])
@@ -70,4 +73,6 @@ const selectOption = (option: ManagerTypes) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
+
+const { htmlRef } = useOutsideClick(() => dropdownOpen.value && toggleDropdown())
 </script>
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 7332f94e..3fa2fe92 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-w-60 flex flex-col gap-y-6 pb-6 text-black">
+  <div class="sticky top-0 min-w-60 flex flex-col gap-y-6 pb-6 text-black overflow-y-auto">
     <div>
       <p class="task-detail">고유코드</p>
       <p class="text-sm text-black">{{ data.taskCode || '-' }}</p>
diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index 5da2987f..05ac4c2c 100644
--- a/src/components/task-detail/TaskDetailTopBar.vue
+++ b/src/components/task-detail/TaskDetailTopBar.vue
@@ -27,7 +27,7 @@
         v-if="!isApproved && (isRequestor || isProcessor)"
         class="flex gap-1 items-center cursor-pointer">
         <CommonIcons :name="cancelIcon" />
-        <p class="text-red-1">요청취소</p>
+        <p class="text-red-1">요청 취소</p>
       </div>
     </div>
     <CommonIcons
diff --git a/src/components/team-board/CurrentTaskRatio.vue b/src/components/team-board/CurrentTaskRatio.vue
index 1dc99c2f..435d4b50 100644
--- a/src/components/team-board/CurrentTaskRatio.vue
+++ b/src/components/team-board/CurrentTaskRatio.vue
@@ -13,14 +13,17 @@
       <div
         class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-scroll items-center p-6 gap-4">
         <PieChart
+          :key="chartLabels.length || 0"
           :labels="chartLabels"
-          :series="chartSeries" />
+          :series="chartSeries"
+          content="진행 중인 작업이 없습니다" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import PieChart from '../PieChart.vue'
 
 const { teamSummary, teamData } = defineProps<{
@@ -32,6 +35,6 @@ const { teamSummary, teamData } = defineProps<{
   teamData: { name: string; tasks: number }[]
 }>()
 
-const chartSeries = teamData.map(member => member.tasks)
-const chartLabels = teamData.map(member => member.name)
+const chartSeries = computed(() => teamData.map(member => member.tasks))
+const chartLabels = computed(() => teamData.map(member => member.name))
 </script>
diff --git a/src/components/top-bar/NotificationMessage.vue b/src/components/top-bar/NotificationMessage.vue
new file mode 100644
index 00000000..e0768d49
--- /dev/null
+++ b/src/components/top-bar/NotificationMessage.vue
@@ -0,0 +1,63 @@
+<template>
+  <div
+    :class="[
+      'flex flex-col border-b py-3 px-4 cursor-pointer hover:bg-background-2 gap-2',
+      { 'bg-primary2': !isRead }
+    ]">
+    <p class="text-xs text-body font-bold whitespace-pre-wrap">
+      {{ notificationType[type] }}
+    </p>
+    <div
+      class="flex flex-col text-xs gap-1"
+      v-if="type === 'COMMENT'">
+      <span>
+        <span class="font-bold text-primary1">"{{ title }}""</span> 작업에 새로운 댓글이
+        추가되었습니다
+      </span>
+      <span class="font-bold text-body">"{{ message }}"</span>
+    </div>
+    <div
+      class="flex flex-col text-xs gap-1"
+      v-else-if="type === 'TASK_REQUESTED'">
+      <span>새 작업이 요청되었습니다</span>
+      <span class="font-bold text-primary1">"{{ title }}"</span>
+    </div>
+    <div
+      class="text-xs"
+      v-else-if="type === 'STATUS_SWITCHED'">
+      <span class="font-bold text-primary1">"{{ title }}"</span> 작업이
+      <span class="font-bold text-primary1">{{ statusAsText(message as Status) }}</span> 상태로
+      변경되었습니다
+    </div>
+    <div
+      class="text-xs"
+      v-else-if="type === 'PROCESSOR_ASSIGNED'">
+      <span class="font-bold text-primary1">"{{ title }}"</span> 작업이 할당되었습니다
+    </div>
+    <div
+      class="text-xs"
+      v-else-if="type === 'PROCESSOR_CHANGED'">
+      <span class="font-bold text-primary1">"{{ title }}"</span> 작업이 재할당되었습니다
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NotificationType, Status } from '@/types/common'
+import { statusAsText } from '@/utils/statusAsText'
+
+const { type, title, message, isRead } = defineProps<{
+  type: NotificationType
+  title: string
+  message?: string
+  isRead?: boolean
+}>()
+
+const notificationType = {
+  COMMENT: '새 댓글 추가',
+  TASK_REQUESTED: '새 작업 요청',
+  STATUS_SWITCHED: '작업 상태 변경',
+  PROCESSOR_ASSIGNED: '내 작업 추가',
+  PROCESSOR_CHANGED: '담당자 변경'
+}
+</script>
diff --git a/src/components/top-bar/NotificationModal.vue b/src/components/top-bar/NotificationModal.vue
index 02e83f48..35622a31 100644
--- a/src/components/top-bar/NotificationModal.vue
+++ b/src/components/top-bar/NotificationModal.vue
@@ -1,88 +1,72 @@
 <template>
   <div
     v-if="isOpen"
-    class="fixed inset-0 flex z-50 justify-center"
-    @click.self="closeModal">
-    <div
-      class="flex relative w-[1200px] h-[72px] bg-opacity-15"
-      @click.self="closeModal">
-      <div
-        class="absolute right-6 top-[72px] h-60 w-80 bg-white rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)] overflow-hidden">
-        <div class="flex relative px-4 pt-3 pb-2 border-b border-border-2">
-          <p class="text-body font-bold text-xs">알림</p>
-          <div class="absolute right-4">
-            <div class="flex items-center">
-              <button class="flex items-center">
-                <CommonIcons
-                  :name="smallCheckIcon"
-                  class="w-2.5 h-1.5 mr-1 fill-primary1" />
-                <p class="font-bold text-primary1 text-xs">모두 읽음</p>
-              </button>
-              <CommonIcons
-                :name="closeIcon"
-                class="ml-2 cursor-pointer"
-                @click="closeModal" />
-            </div>
-          </div>
-        </div>
-        <div class="max-h-[185px] flex flex-col h-full overflow-y-auto">
-          <div class="overflow-y-scroll flex flex-col">
-            <button
-              v-for="notification in notifications"
-              :key="notification.notificationId"
-              @click="readNotifi(notification.notificationId)"
-              :class="[
-                'flex flex-col border-b py-3 px-4',
-                { 'bg-primary2': !notification.isRead }
-              ]">
-              <p class="text-xs text-body font-bold">
-                {{ notification.notificationType }}
-              </p>
-              <div class="flex text-xs pt-2">
-                <span class="text-black">
-                  <span class="text-primary1 font-bold"> "{{ notification.taskTitle }}" </span>
-                  &nbsp;요청이&nbsp;
-                  <span class="text-primary1 font-bold">
-                    {{ notification.message }}
-                  </span>
-                  &nbsp;상태로 변경되었습니다.
-                </span>
-              </div>
-            </button>
-            <InfiniteLoading
-              @infinite="loadMoreNotifications"
-              class="flex items-center justify-center"
-              ><template v-slot:complete>
-                <span class="flex py-2 items-center justify-center text-xs text-primary1"
-                  >더 이상 없음</span
-                >
-              </template></InfiniteLoading
-            >
-          </div>
-        </div>
+    @click.stop
+    class="absolute right-6 top-[calc(100%+16px)] h-60 w-80 bg-white rounded-lg shadow-custom overflow-hidden flex flex-col">
+    <div class="flex justify-between px-4 pt-3 pb-2 border-b border-border-2">
+      <p class="text-body font-bold text-xs">알림</p>
+      <div class="flex items-center gap-2">
+        <button
+          @click="readAllNotifi"
+          class="flex items-center gap-1">
+          <CommonIcons :name="smallCheckIcon" />
+          <p class="font-bold text-primary1 text-xs">모두 읽음</p>
+        </button>
+        <button @click="closeModal">
+          <CommonIcons :name="closeIcon" />
+        </button>
       </div>
     </div>
+    <div class="grow h-full flex flex-col overflow-y-auto">
+      <NotificationMessage
+        v-for="notification in notifications"
+        :key="notification.notificationId"
+        @click="readNotifi(notification.notificationId)"
+        :type="notification.notificationType"
+        :title="notification.taskTitle"
+        :message="notification.message"
+        :is-read="notification.isRead">
+      </NotificationMessage>
+      <InfiniteLoading
+        @infinite="loadMoreNotifications"
+        class="flex items-center justify-center">
+        <template v-slot:complete>
+          <span class="flex py-4 items-center justify-center text-xs text-primary1">
+            알림을 전부 확인하였습니다
+          </span>
+        </template>
+      </InfiniteLoading>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import InfiniteLoading from 'v3-infinite-loading'
 import 'v3-infinite-loading/lib/style.css'
 import CommonIcons from '../common/CommonIcons.vue'
 import { smallCheckIcon, closeIcon } from '@/constants/iconPath'
 import { getNotification, patchNotificationRead } from '@/api/common'
+import { axiosInstance } from '@/utils/axios'
+import type { NotificationContent } from '@/types/common'
+import NotificationMessage from './NotificationMessage.vue'
 
-const props = defineProps<{
+const { isOpen } = defineProps<{
   isOpen: boolean
 }>()
 
-const notifications = ref<any[]>([])
+const notifications = ref<NotificationContent[]>([])
 const page = ref(0)
 const pageSize = 5
 const hasNext = ref(true)
 
-const loadMoreNotifications = async ($state: any) => {
+interface InfiniteLoadingState {
+  loaded: () => void
+  complete: () => void
+  error: () => void
+}
+
+const loadMoreNotifications = async ($state: InfiniteLoadingState) => {
   try {
     const response = await getNotification(page.value, pageSize)
 
@@ -106,8 +90,9 @@ const loadMoreNotifications = async ($state: any) => {
   }
 }
 
-const readNotifi = (id: number) => {
-  patchNotificationRead(id)
+const readNotifi = async (id: number) => {
+  await patchNotificationRead(id)
+  emit('close')
 }
 
 const emit = defineEmits<{
@@ -117,4 +102,9 @@ const emit = defineEmits<{
 const closeModal = () => {
   emit('close')
 }
+
+const readAllNotifi = async () => {
+  await axiosInstance.patch('/api/notification')
+  emit('close')
+}
 </script>
diff --git a/src/components/top-bar/ProfileModal.vue b/src/components/top-bar/ProfileModal.vue
index eda33884..d2c3551d 100644
--- a/src/components/top-bar/ProfileModal.vue
+++ b/src/components/top-bar/ProfileModal.vue
@@ -1,54 +1,47 @@
 <template>
   <div
     v-if="isOpen"
-    class="fixed inset-0 flex z-50 justify-center"
-    @click.self="closeModal">
-    <ModalView
-      :isOpen="isModalVisible"
-      type="successType"
-      @close="closeLogoutModal">
-      <template #header> 로그아웃 되었습니다. </template>
-    </ModalView>
+    @click.stop
+    class="absolute w-60 bg-white right-6 top-[calc(100%+16px)] rounded-lg shadow-custom overflow-hidden">
     <div
-      class="flex relative w-[1200px] h-[72px] bg-opacity-15"
-      @click.self="closeModal">
-      <div
-        class="absolute w-60 bg-white right-6 top-[72px] rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
+      class="flex items-center justify-center relative px-6 py-8 border-b bg-primary2 border-border-2">
+      <div class="flex flex-col items-center justify-center">
+        <img
+          v-if="imgUrl"
+          class="rounded-full mb-6 w-24 h-24"
+          :src="info.profileImageUrl"
+          alt="프로필 이미지" />
         <div
-          class="flex items-center justify-center relative px-6 py-8 border-b bg-primary2 border-border-2">
-          <div class="flex flex-col items-center justify-center">
-            <img
-              v-if="imgUrl"
-              class="rounded-full mb-6 w-24 h-24"
-              :src="info.imageUrl"
-              alt="프로필 이미지" />
-            <div
-              v-else
-              class="w-24 h-24 bg-background-1 rounded-full mb-6" />
-            <div>
-              <div class="flex flex-col justify-center items-center w-[172px]">
-                <p class="text-xs text-body font-bold">{{ name }}</p>
+          v-else
+          class="w-24 h-24 bg-background-1 rounded-full mb-6" />
+        <div>
+          <div class="flex flex-col justify-center items-center w-[172px]">
+            <p class="text-xs text-body font-bold">{{ name }}</p>
 
-                <p class="text-black">{{ nickname }}</p>
-              </div>
-            </div>
+            <p class="text-black">{{ nickname }}</p>
           </div>
         </div>
-        <button
-          @click="handleEdit"
-          type="button"
-          class="flex w-full py-4 px-6 text-sm text-black font-bold border-b border-border-2">
-          내 정보 수정
-        </button>
-        <button
-          @click="handleLogout"
-          type="button"
-          class="flex w-full py-4 px-6 text-sm text-red-1 font-bold">
-          로그아웃
-        </button>
       </div>
     </div>
+    <button
+      @click="handleEdit"
+      type="button"
+      class="flex w-full py-4 px-6 text-sm text-black font-bold border-b border-border-2 hover:bg-background-2">
+      내 정보 수정
+    </button>
+    <button
+      @click="handleLogout"
+      type="button"
+      class="flex w-full py-4 px-6 text-sm text-red-1 font-bold hover:bg-background-2">
+      로그아웃
+    </button>
   </div>
+  <ModalView
+    :isOpen="isModalVisible"
+    type="successType"
+    @close="closeLogoutModal">
+    <template #header> 로그아웃 되었습니다. </template>
+  </ModalView>
 </template>
 
 <script setup lang="ts">
@@ -65,13 +58,13 @@ const isModalVisible = ref(false)
 const memberStore = useMemberStore()
 const { isLogined, info } = storeToRefs(memberStore)
 
-const imgUrl = computed(() => info.value.imageUrl)
-const name = computed(() => info.value.memberName)
+const imgUrl = computed(() => info.value.profileImageUrl)
+const name = computed(() => info.value.name)
 const nickname = computed(() => info.value.nickname)
 
 const router = useRouter()
 
-const props = defineProps<{
+const { isOpen } = defineProps<{
   isOpen: boolean
 }>()
 
@@ -79,25 +72,22 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
-const closeModal = () => {
-  emit('close')
-}
 const handleEdit = () => {
   router.push('/edit-information')
   emit('close')
 }
 const openLogoutModal = () => {
   isModalVisible.value = true
-  isLogined.value = false
 }
 const closeLogoutModal = () => {
   isModalVisible.value = false
-  emit('close')
+  isLogined.value = false
   router.push('/login')
 }
 
-const handleLogout = () => {
+const handleLogout = async () => {
   deleteLogout()
   openLogoutModal()
+  emit('close')
 }
 </script>
diff --git a/src/components/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue
index 4576347f..714367d9 100644
--- a/src/components/top-bar/TopBar.vue
+++ b/src/components/top-bar/TopBar.vue
@@ -1,42 +1,50 @@
 <template>
-  <NotificationModal
-    :isOpen="isNotifiVisible"
-    @close="toggleNotifi" />
-  <ProfileModal
-    :isOpen="isProfileVisible"
-    @close="toggleProfile" />
-  <div class="fixed w-full bg-white text-black py-2 border-b border-border-1">
-    <div
-      class="max-w-[1200px] min-w-[1024px] mx-auto px-6 flex w-full justify-between items-center">
+  <div class="fixed w-full bg-white text-black py-2 border-b border-border-1 z-50">
+    <div class="max-w-[1200px] mx-auto px-6 flex w-full justify-between items-center relative">
       <div class="flex justify-center items-center gap-6 h-full">
         <button
           type="button"
-          v-show="isLogined"
-          @click="isSideOpen = true">
+          v-if="isLogined"
+          @click="onOpenSide">
           <CommonIcons :name="hamburgerIcon" />
         </button>
         <img src="/MainLogo.svg" />
       </div>
       <div
-        v-show="isLogined"
+        v-if="isLogined"
         class="flex items-center gap-6">
-        <button
-          type="button"
-          @click="toggleNotifi">
-          <NotificationIcon :new-notification="countNotifi" />
-        </button>
-        <button
-          type="button"
-          @click="toggleProfile">
-          <img
-            v-if="info?.profileImageUrl"
-            class="rounded-[50%] w-10 h-10"
-            :src="info.profileImageUrl"
-            alt="프로필 이미지" />
-          <div
-            v-else
-            class="rounded-[50%] bg-zinc-100 p-5" />
-        </button>
+        <div
+          :key="isNotifiVisible + ''"
+          ref="notifiRef"
+          class="flex">
+          <button
+            type="button"
+            @click="toggleNotifi">
+            <NotificationIcon :new-notification="countNotifi" />
+          </button>
+          <NotificationModal
+            :isOpen="isNotifiVisible"
+            @close="toggleNotifi" />
+        </div>
+        <div
+          ref="profileRef"
+          class="flex">
+          <button
+            type="button"
+            @click="toggleProfile">
+            <img
+              v-if="info?.profileImageUrl"
+              class="rounded-[50%] w-10 h-10"
+              :src="info.profileImageUrl"
+              alt="프로필 이미지" />
+            <div
+              v-else
+              class="rounded-[50%] bg-zinc-100 p-5" />
+          </button>
+          <ProfileModal
+            :isOpen="isProfileVisible"
+            @close="toggleProfile" />
+        </div>
       </div>
     </div>
   </div>
@@ -58,6 +66,7 @@ import ProfileModal from './ProfileModal.vue'
 import { getNotifiCount } from '@/api/common'
 import { useRoute, useRouter } from 'vue-router'
 import { PERMITTED_URL } from '@/constants/common'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const memberStore = useMemberStore()
 const { isLogined, info } = storeToRefs(memberStore)
@@ -77,10 +86,6 @@ onMounted(async () => {
     if (!PERMITTED_URL.ROLE_MANAGER.includes(originUrl)) router.push('/my-task')
   } else if (info.value.role === 'ROLE_ADMIN') {
     if (!PERMITTED_URL.ROLE_ADMIN.includes(originUrl)) router.push('/member-management')
-  } else {
-    if (!PERMITTED_URL.UNKNOWN.includes(originUrl)) {
-      router.push('/login')
-    }
   }
 })
 
@@ -91,17 +96,17 @@ const isNotifiVisible = ref(false)
 const isProfileVisible = ref(false)
 
 const fetchNotificationCount = async () => {
-  if (isLogined.value) {
-    try {
-      const data = await getNotifiCount()
-      countNotifi.value = data.count
-    } catch (error) {
-      console.error('알림 개수 불러오기 실패:', error)
-    }
+  if (!isLogined.value) return
+  try {
+    const data = await getNotifiCount()
+    countNotifi.value = data.count
+  } catch (error) {
+    console.error('알림 개수 불러오기 실패:', error)
   }
 }
 
-const toggleNotifi = () => {
+const toggleNotifi = async () => {
+  await fetchNotificationCount()
   isNotifiVisible.value = !isNotifiVisible.value
 }
 const toggleProfile = () => {
@@ -110,6 +115,7 @@ const toggleProfile = () => {
 
 const onCloseSide = () => {
   isSideOpen.value = false
+  document.body.style.overflow = ''
 }
 
 watch(isLogined, newValue => {
@@ -121,10 +127,18 @@ watch(isLogined, newValue => {
 watch(
   () => info.value,
   async newInfo => {
-    if (newInfo.name && isLogined) {
+    if (newInfo.name) {
       await fetchNotificationCount()
     }
   },
   { deep: true }
 )
+
+const { htmlRef: notifiRef } = useOutsideClick(() => isNotifiVisible.value && toggleNotifi())
+const { htmlRef: profileRef } = useOutsideClick(() => isProfileVisible.value && toggleProfile())
+
+const onOpenSide = () => {
+  document.body.style.overflow = 'hidden'
+  isSideOpen.value = !isSideOpen.value
+}
 </script>
diff --git a/src/constants/iconPath.ts b/src/constants/iconPath.ts
index 4a79d92b..161d2042 100644
--- a/src/constants/iconPath.ts
+++ b/src/constants/iconPath.ts
@@ -77,10 +77,10 @@ export const deleteIcon = {
 }
 
 export const smallCheckIcon = {
-  path: 'M7.35497 0.605052C7.30849 0.558188 7.25319 0.520991 7.19226 0.495607C7.13133 0.470222 7.06598 0.457153 6.99997 0.457153C6.93397 0.457153 6.86862 0.470222 6.80769 0.495607C6.74676 0.520991 6.69146 0.558188 6.64498 0.605052L2.91998 4.33505L1.35497 2.76505C1.30671 2.71843 1.24974 2.68178 1.18732 2.65717C1.12489 2.63257 1.05823 2.62051 0.991136 2.62167C0.924046 2.62283 0.857841 2.63719 0.796302 2.66394C0.734763 2.69069 0.679094 2.72929 0.632475 2.77755C0.585856 2.82581 0.549199 2.88278 0.524597 2.94521C0.499995 3.00764 0.487929 3.0743 0.48909 3.14139C0.490251 3.20848 0.504615 3.27469 0.531362 3.33623C0.558108 3.39776 0.596714 3.45343 0.644975 3.50005L2.56498 5.42005C2.61146 5.46692 2.66676 5.50411 2.72769 5.5295C2.78862 5.55488 2.85397 5.56795 2.91998 5.56795C2.98598 5.56795 3.05133 5.55488 3.11226 5.5295C3.17319 5.50411 3.22849 5.46692 3.27498 5.42005L7.35497 1.34005C7.40573 1.29323 7.44623 1.23641 7.47393 1.17316C7.50164 1.10991 7.51594 1.0416 7.51594 0.972552C7.51594 0.903502 7.50164 0.835199 7.47393 0.771949C7.44623 0.708699 7.40573 0.651874 7.35497 0.605052Z',
-  width: 8,
-  height: 6,
-  fill: '#A1A1AA'
+  path: 'M12.4733 4.80657C12.4114 4.74409 12.3376 4.69449 12.2564 4.66065C12.1752 4.6268 12.088 4.60938 12 4.60938C11.912 4.60938 11.8249 4.6268 11.7436 4.66065C11.6624 4.69449 11.5886 4.74409 11.5267 4.80657L6.56001 9.77991L4.47334 7.68657C4.40899 7.62441 4.33303 7.57554 4.2498 7.54274C4.16656 7.50993 4.07768 7.49385 3.98822 7.49539C3.89877 7.49694 3.8105 7.51609 3.72844 7.55176C3.64639 7.58742 3.57217 7.63889 3.51001 7.70324C3.44785 7.76759 3.39897 7.84355 3.36617 7.92679C3.33337 8.01002 3.31728 8.0989 3.31883 8.18836C3.32038 8.27781 3.33953 8.36609 3.37519 8.44814C3.41085 8.53019 3.46233 8.60441 3.52667 8.66657L6.08667 11.2266C6.14865 11.2891 6.22238 11.3387 6.30362 11.3725C6.38486 11.4063 6.472 11.4238 6.56001 11.4238C6.64802 11.4238 6.73515 11.4063 6.81639 11.3725C6.89763 11.3387 6.97137 11.2891 7.03334 11.2266L12.4733 5.78657C12.541 5.72415 12.595 5.64838 12.632 5.56404C12.6689 5.47971 12.688 5.38864 12.688 5.29657C12.688 5.20451 12.6689 5.11344 12.632 5.0291C12.595 4.94477 12.541 4.869 12.4733 4.80657Z',
+  width: 16,
+  height: 16,
+  fill: '#7879EB'
 }
 
 export const plusIcon = {
diff --git a/src/stores/member.ts b/src/stores/member.ts
index 3c164ea2..4a64b046 100644
--- a/src/stores/member.ts
+++ b/src/stores/member.ts
@@ -3,15 +3,16 @@ import { axiosInstance } from '@/utils/axios'
 import { ref } from 'vue'
 import type { User } from '@/types/auth'
 import Cookies from 'js-cookie'
+import { useRouter } from 'vue-router'
 
 export const useMemberStore = defineStore('memberInfo', () => {
-  const info = ref<User>({
+  const INITIAL_INFO: User = {
+    profileImageUrl: '',
     name: '',
     nickname: '',
-    profileImageUrl: '',
-    role: '',
-    memberStatus: '',
     email: '',
+    isReviewer: false,
+    role: '',
     departmentName: '',
     departmentRole: '',
     notificationSettingInfo: {
@@ -19,46 +20,44 @@ export const useMemberStore = defineStore('memberInfo', () => {
       email: false,
       kakaoWork: false
     }
-  })
+  }
 
+  const info = ref<User>(INITIAL_INFO)
   const refreshToken = ref(Cookies.get('refreshToken') || '')
   const isLogined = ref(!!refreshToken.value)
+  const router = useRouter()
 
   async function updateMemberInfoWithToken() {
-    const response = await axiosInstance.get('/api/members/info')
-    updateMemberInfo(response.data)
-    isLogined.value = true
-  }
-
-  function updateMemberInfo(responseData: User) {
-    info.value = {
-      name: responseData.name || '',
-      nickname: responseData.nickname || '',
-      email: responseData.email || '',
-      profileImageUrl: responseData.profileImageUrl || '',
-      role: responseData.role || '',
-      memberStatus: responseData.memberStatus || '',
-      departmentName: responseData.departmentName || '',
-      departmentRole: responseData.departmentRole || '',
-      notificationSettingInfo: {
-        agit: responseData.notificationSettingInfo.agit,
-        email: responseData.notificationSettingInfo.email,
-        kakaoWork: responseData.notificationSettingInfo.kakaoWork
-      }
+    if (!Cookies.get('accessToken')) {
+      router.push('/login')
+      return
+    }
+    try {
+      const { data }: { data: User } = await axiosInstance.get('/api/members/info')
+      info.value = data
+      isLogined.value = true
+      return data.role
+    } catch {
+      router.push('/login')
     }
   }
 
   function logout() {
+    $reset()
     isLogined.value = false
     Cookies.remove('accessToken')
     Cookies.remove('refreshToken')
   }
 
+  function $reset() {
+    info.value = INITIAL_INFO
+  }
+
   return {
     info,
     isLogined,
-    updateMemberInfo,
     updateMemberInfoWithToken,
-    logout
+    logout,
+    $reset
   }
 })
diff --git a/src/types/auth.ts b/src/types/auth.ts
index 43a1407d..97648f14 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -1,10 +1,12 @@
+import type { Role } from './common'
+
 export interface User {
+  profileImageUrl: string
   name: string
   nickname: string
   email: string
-  profileImageUrl: string
-  role: string
-  memberStatus: string
+  isReviewer: boolean
+  role: Role | ''
   departmentName: string
   departmentRole: string
   notificationSettingInfo: {
diff --git a/src/types/common.ts b/src/types/common.ts
index 4c18d85a..f83de8c4 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -111,6 +111,23 @@ export interface TaskStatusListTypes {
   content: string
 }
 
+export type NotificationType =
+  | 'COMMENT'
+  | 'TASK_REQUESTED'
+  | 'STATUS_SWITCHED'
+  | 'PROCESSOR_ASSIGNED'
+  | 'PROCESSOR_CHANGED'
+
+export interface NotificationContent {
+  notificationId: number
+  taskId: number
+  notificationType: NotificationType
+  receiverId: number
+  taskTitle: string
+  message: string
+  isRead: boolean
+  createdAt: string
+}
 export interface TaskDetailHistoryProps {
   historyData: TaskHistory[]
   taskId: number
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 9c12f4c6..de4651c4 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -26,7 +26,7 @@ const getNewAccessToken = async () => {
     console.error('토큰 발행 실패', e)
     Cookies.remove('accessToken')
     Cookies.remove('refreshToken')
-    window.location.reload()
+    window.location.href = '/login'
   }
 }
 const setInterceptors = (instance: AxiosInstance) => {
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 7b7f2378..269f5ef1 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -62,3 +62,20 @@ export const formatTodayOrNot = (dateStr: string, timeStr: string) => {
     return `${inputDate.getMonth() + 1}월 ${inputDate.getDate()}일`
   }
 }
+
+export const formatFullDateTime = (dateString: string) => {
+  const date = new Date(dateString)
+
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+
+  let hours = date.getHours()
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+
+  const period = hours < 12 ? '오전' : '오후'
+  hours = hours % 12 || 12
+
+  return `${year}.${month}.${day} ${period} ${hours}:${minutes}:${seconds}`
+}
diff --git a/src/utils/getNotification.ts b/src/utils/getNotification.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index a5617ef9..e332f5ff 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -46,12 +46,14 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { postLogin } from '@/api/auth'
+import { useMemberStore } from '@/stores/member'
 import TitleContainer from '@/components/common/TitleContainer.vue'
 
 const router = useRouter()
 
 const nickname = ref('')
 const password = ref('')
+const memberStore = useMemberStore()
 
 const handleLogin = async () => {
   try {
@@ -59,10 +61,11 @@ const handleLogin = async () => {
       nickname: nickname.value,
       password: password.value
     }
-    const sessionId = '000'
-    const res = await postLogin(loginData, sessionId)
-    if (res) {
-      switch (res.memberInfo.role) {
+    const res = await postLogin(loginData)
+    const role = await memberStore.updateMemberInfoWithToken()
+
+    if (res && role) {
+      switch (role) {
         case 'ROLE_ADMIN':
           router.push('/member-management')
           break