diff --git a/src/assets/deafultProfile.png b/src/assets/deafultProfile.png
new file mode 100644
index 00000000..7536854f
Binary files /dev/null and b/src/assets/deafultProfile.png differ
diff --git a/src/components/EditInformation.vue b/src/components/EditInformation.vue
index b5eceec3..d33d9bbb 100644
--- a/src/components/EditInformation.vue
+++ b/src/components/EditInformation.vue
@@ -18,11 +18,10 @@
 
     <div class="profile">
       <p class="text-body text-xs font-bold">프로필 사진</p>
-      <img
-        v-if="previewUrl || info.profileImageUrl"
-        :src="previewUrl || info.profileImageUrl"
-        alt="프로필 이미지"
-        class="w-24 h-24 rounded-full object-cover border mt-3" />
+      <ImageContainer
+        class="mt-3"
+        :url="previewUrl || info.profileImageUrl"
+        :size="96" />
 
       <label
         for="fileInput"
@@ -104,6 +103,7 @@ const router = useRouter()
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
 import { patchEditInfo } from '@/api/common'
+import ImageContainer from './common/ImageContainer.vue'
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
diff --git a/src/components/TaskCard.vue b/src/components/TaskCard.vue
index 4ca4f307..da9e277d 100644
--- a/src/components/TaskCard.vue
+++ b/src/components/TaskCard.vue
@@ -5,12 +5,14 @@
     @click="onTaskClick">
     <div class="flex flex-col gap-1">
       <div class="flex justify-between items-center gap-4">
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 overflow-hidden">
           <TaskLabel
             v-if="data.labelInfo"
             :color="data.labelInfo.labelColor"
             :content="data.labelInfo.labelName" />
-          <span class="text-black">{{ data.title }}</span>
+          <span class="text-black text-ellipsis overflow-hidden whitespace-nowrap">{{
+            data.title
+          }}</span>
         </div>
         <CommonIcons
           v-if="draggable"
@@ -19,13 +21,15 @@
       <span class="text-xs text-body">{{ data.mainCategoryName }} - {{ data.categoryName }}</span>
     </div>
     <div class="flex justify-between items-end">
-      <span class="text-xs font-bold text-black">{{ data.taskCode }}</span>
+      <span class="text-xs font-bold text-black whitespace-nowrap overflow-hidden text-ellipsis">{{
+        data.taskCode
+      }}</span>
       <div class="flex flex-col gap-1 items-end">
         <span class="text-xs font-bold text-body">{{ data.requesterDepartment }}</span>
         <div class="flex items-center gap-1.5">
-          <div class="w-4 h-4 rounded-full bg-background-1 overflow-hidden">
-            <img :src="data.requesterImageUrl" />
-          </div>
+          <ImageContainer
+            :url="data.requesterImageUrl"
+            :size="16" />
           <span class="text-xs font-bold text-black">{{ data.requesterNickname }}</span>
         </div>
       </div>
@@ -41,6 +45,7 @@ import type { TaskCardProps } from '@/types/manager'
 import CommonIcons from './common/CommonIcons.vue'
 import { statusAsColor } from '@/utils/statusAsColor'
 import TaskLabel from './common/TaskLabel.vue'
+import ImageContainer from './common/ImageContainer.vue'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
 
diff --git a/src/components/api-logs/ApiLogsList.vue b/src/components/api-logs/ApiLogsList.vue
index c8c67368..c35f9c81 100644
--- a/src/components/api-logs/ApiLogsList.vue
+++ b/src/components/api-logs/ApiLogsList.vue
@@ -30,6 +30,7 @@ import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import type { ApiLogsResponse } from '@/types/admin'
 import { computed } from 'vue'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {
@@ -46,9 +47,11 @@ const fetchApiLogsList = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<ApiLogsResponse>({
   queryKey: ['apiLogs', params],
-  queryFn: fetchApiLogsList
+  queryFn: fetchApiLogsList,
+  enabled: !!isLogined
 })
 
 const totalPage = computed(() => {
diff --git a/src/components/common/ImageContainer.vue b/src/components/common/ImageContainer.vue
new file mode 100644
index 00000000..44d19f0b
--- /dev/null
+++ b/src/components/common/ImageContainer.vue
@@ -0,0 +1,16 @@
+<template>
+  <div
+    :style="{ width: `${size}px`, height: `${size}px` }"
+    class="rounded-full overflow-hidden flex justify-center items-center shrink-0">
+    <img
+      :src="url || defaultProfile"
+      alt="프로필 이미지"
+      class="w-full h-full object-cover" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import defaultProfile from '@/assets/deafultProfile.png'
+
+const { url, size } = defineProps<{ url?: string; size: number }>()
+</script>
diff --git a/src/components/login-logs/LoginLogsList.vue b/src/components/login-logs/LoginLogsList.vue
index 930abfe7..e795599d 100644
--- a/src/components/login-logs/LoginLogsList.vue
+++ b/src/components/login-logs/LoginLogsList.vue
@@ -32,6 +32,7 @@ import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 import type { LoginLogsResponse } from '@/types/admin'
 import NoContent from '../lists/NoContent.vue'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {
@@ -48,9 +49,11 @@ const fetchLoginLogsList = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<LoginLogsResponse>({
   queryKey: ['loginLogs', params],
-  queryFn: fetchLoginLogsList
+  queryFn: fetchLoginLogsList,
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {
diff --git a/src/components/member-management/MemberManagementList.vue b/src/components/member-management/MemberManagementList.vue
index bda06767..5a625600 100644
--- a/src/components/member-management/MemberManagementList.vue
+++ b/src/components/member-management/MemberManagementList.vue
@@ -32,6 +32,7 @@ import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
 import MemberManagementListBar from './MemberManagementListBar.vue'
 import MemberManagementListCard from './MemberManagementListCard.vue'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useMemberManagementParamsStore()
 const onPageChange = (value: number) => {
@@ -42,9 +43,11 @@ const fetchMemberList = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<MemberManagementResponse>({
   queryKey: ['member', params],
-  queryFn: fetchMemberList
+  queryFn: fetchMemberList,
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {
diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue
index f8980594..be47173e 100644
--- a/src/components/my-request/MyRequestFilterBar.vue
+++ b/src/components/my-request/MyRequestFilterBar.vue
@@ -53,6 +53,6 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery({
   queryKey: ['category'],
   queryFn: getCategory,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 </script>
diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue
index a2f2bc88..eb8b3032 100644
--- a/src/components/my-request/MyRequestList.vue
+++ b/src/components/my-request/MyRequestList.vue
@@ -51,7 +51,7 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery<MyRequestResponse>({
   queryKey: ['myRequest', params],
   queryFn: fetchMyRequestList,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {
diff --git a/src/components/my-request/MyRequestListCard.vue b/src/components/my-request/MyRequestListCard.vue
index c277f2ad..390a61a5 100644
--- a/src/components/my-request/MyRequestListCard.vue
+++ b/src/components/my-request/MyRequestListCard.vue
@@ -12,6 +12,7 @@
       :is-status="tab.isStatus" />
   </div>
   <TaskDetail
+    v-if="selectedID"
     :is-approved="info.taskStatus !== 'REQUESTED'"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />
diff --git a/src/components/my-task/MyTaskFilterBar.vue b/src/components/my-task/MyTaskFilterBar.vue
index da9deb32..aba9560d 100644
--- a/src/components/my-task/MyTaskFilterBar.vue
+++ b/src/components/my-task/MyTaskFilterBar.vue
@@ -42,14 +42,17 @@ import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
 import { getCategory } from '@/api/common'
+import { useMemberStore } from '@/stores/member'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: getCategory
+  queryFn: getCategory,
+  enabled: isLogined
 })
 </script>
diff --git a/src/components/my-task/MyTaskList.vue b/src/components/my-task/MyTaskList.vue
index 017e3417..fc9c45eb 100644
--- a/src/components/my-task/MyTaskList.vue
+++ b/src/components/my-task/MyTaskList.vue
@@ -51,7 +51,7 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery<MyTaskResponse>({
   queryKey: ['myTask', params],
   queryFn: fetchMyTaskList,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {
diff --git a/src/components/my-task/MyTaskListCard.vue b/src/components/my-task/MyTaskListCard.vue
index be9594a9..d9d24c9c 100644
--- a/src/components/my-task/MyTaskListCard.vue
+++ b/src/components/my-task/MyTaskListCard.vue
@@ -12,6 +12,7 @@
       :is-status="tab.isStatus" />
   </div>
   <TaskDetail
+    v-if="selectedID"
     :is-approved="info.taskStatus !== 'REQUESTED'"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />
diff --git a/src/components/request-approve/LabelDropdown.vue b/src/components/request-approve/LabelDropdown.vue
index ea8c599b..14ab5def 100644
--- a/src/components/request-approve/LabelDropdown.vue
+++ b/src/components/request-approve/LabelDropdown.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="text-xs mb-2 text-body font-bold">구분</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"
         @click="toggleDropdown">
@@ -34,6 +36,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 } = defineProps<LabelDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
@@ -53,4 +56,6 @@ const selectOption = (option: LabelDataTypes) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
+
+const { htmlRef } = useOutsideClick(() => dropdownOpen.value && toggleDropdown())
 </script>
diff --git a/src/components/request-approve/ManagerDropdown.vue b/src/components/request-approve/ManagerDropdown.vue
index b6a11876..49056d9c 100644
--- a/src/components/request-approve/ManagerDropdown.vue
+++ b/src/components/request-approve/ManagerDropdown.vue
@@ -9,18 +9,16 @@
         담당자를 선택해주세요
       </p>
     </div>
-    <div class="relative flex">
+    <div
+      ref="htmlRef"
+      class="relative flex">
       <div
         class="request-task-dropdown"
         @click="toggleDropdown">
         <div class="flex gap-2 items-center">
-          <div
-            v-if="modelValue"
-            class="w-6 h-6 rounded-full overflow-hidden">
-            <img
-              :src="modelValue?.imageUrl || '/images/mockProfile.jpg'"
-              alt="userProfile" />
-          </div>
+          <ImageContainer
+            :size="24"
+            :url="modelValue?.imageUrl" />
           <p :class="{ 'text-disabled': !modelValue }">
             {{ modelValue?.nickname || placeholderText }}
           </p>
@@ -38,11 +36,9 @@
           class="request-task-dropdown-option justify-between"
           @click="selectOption(option)">
           <div class="flex gap-2">
-            <div class="w-6 h-6 rounded-full overflow-hidden">
-              <img
-                :src="option.imageUrl || '/images/mockProfile.jpg'"
-                alt="userProfile" />
-            </div>
+            <ImageContainer
+              :size="24"
+              :url="option.imageUrl" />
             <p>
               {{ option.nickname }}
             </p>
@@ -61,6 +57,8 @@ import type { ManagerTypes } from '@/types/manager'
 import type { ManagerDropdownProps } from '@/types/user'
 import { computed, onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import ImageContainer from '../common/ImageContainer.vue'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { placeholderText, modelValue, isInvalidate } = defineProps<ManagerDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
@@ -81,4 +79,6 @@ const selectOption = (option: ManagerTypes) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
+
+const { htmlRef } = useOutsideClick(() => dropdownOpen.value && toggleDropdown())
 </script>
diff --git a/src/components/request-history/RequestHistoryFilterBar.vue b/src/components/request-history/RequestHistoryFilterBar.vue
index df5c3496..7ead99e5 100644
--- a/src/components/request-history/RequestHistoryFilterBar.vue
+++ b/src/components/request-history/RequestHistoryFilterBar.vue
@@ -42,14 +42,17 @@ import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { getCategory } from '@/api/common'
+import { useMemberStore } from '@/stores/member'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: getCategory
+  queryFn: getCategory,
+  enabled: isLogined
 })
 </script>
diff --git a/src/components/request-history/RequestHistoryList.vue b/src/components/request-history/RequestHistoryList.vue
index 9acf0b90..e10d0b1e 100644
--- a/src/components/request-history/RequestHistoryList.vue
+++ b/src/components/request-history/RequestHistoryList.vue
@@ -51,7 +51,7 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery<RequestHistoryResponse>({
   queryKey: ['requestHistory', params],
   queryFn: fetchRequestHistoryList,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {
diff --git a/src/components/request-history/RequestHistoryListCard.vue b/src/components/request-history/RequestHistoryListCard.vue
index bbfc1223..000b85c9 100644
--- a/src/components/request-history/RequestHistoryListCard.vue
+++ b/src/components/request-history/RequestHistoryListCard.vue
@@ -12,6 +12,7 @@
       :is-status="tab.isStatus" />
   </div>
   <TaskDetail
+    v-if="selectedID"
     :is-approved="info.taskStatus !== 'REQUESTED'"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />
diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue
index ab432350..07b22d35 100644
--- a/src/components/requested/RequestedFilterBar.vue
+++ b/src/components/requested/RequestedFilterBar.vue
@@ -36,14 +36,17 @@ import { useRequestParamsStore } from '@/stores/params'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
 import { getCategory } from '@/api/common'
+import { useMemberStore } from '@/stores/member'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: getCategory
+  queryFn: getCategory,
+  enabled: isLogined
 })
 </script>
diff --git a/src/components/requested/RequestedList.vue b/src/components/requested/RequestedList.vue
index 06f509fa..1c52172d 100644
--- a/src/components/requested/RequestedList.vue
+++ b/src/components/requested/RequestedList.vue
@@ -51,7 +51,7 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery<RequestedResponse>({
   queryKey: ['requested', params],
   queryFn: fetchRequestedList,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {
diff --git a/src/components/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue
index a307ee7b..2f105e1e 100644
--- a/src/components/requested/RequestedListCard.vue
+++ b/src/components/requested/RequestedListCard.vue
@@ -24,6 +24,7 @@
     </div>
   </div>
   <TaskDetail
+    v-if="selectedID"
     :is-approved="true"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />
diff --git a/src/components/statistics/StatisticsCard.vue b/src/components/statistics/StatisticsCard.vue
index 351b8330..3fd49fc9 100644
--- a/src/components/statistics/StatisticsCard.vue
+++ b/src/components/statistics/StatisticsCard.vue
@@ -69,7 +69,7 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery<StatisticsData[]>({
   queryKey: computed(() => [statisticsType, periodType]),
   queryFn: fetchStatistics,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 
 const labels = computed(() => {
diff --git a/src/components/statistics/StatisticsCategoryCard.vue b/src/components/statistics/StatisticsCategoryCard.vue
index e99036ff..c6ea1bce 100644
--- a/src/components/statistics/StatisticsCategoryCard.vue
+++ b/src/components/statistics/StatisticsCategoryCard.vue
@@ -23,7 +23,7 @@
           :labels="subLabels"
           :series="subSeries"
           :period-type="periodType"
-          :content="mainCategory && '1차 카테고리를 선택해주세요'" />
+          :content="!mainCategory ? '1차 카테고리를 선택해주세요' : ''" />
       </div>
     </div>
   </div>
@@ -61,7 +61,7 @@ const { isLogined } = useMemberStore()
 const { data: mainData } = useQuery<StatisticsData[]>({
   queryKey: computed(() => ['REQUEST_BY_CATEGORY', periodType]),
   queryFn: fetchMainStatistics,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 const mainLabels = computed(() => {
   return mainData.value?.map(el => el.key) || []
@@ -83,7 +83,7 @@ const fetchSubStatistics = async () => {
 const { data: subData } = useQuery<StatisticsData[]>({
   queryKey: computed(() => [mainCategory.value, periodType]),
   queryFn: fetchSubStatistics,
-  enabled: computed(() => mainCategory.value !== '')
+  enabled: computed(() => mainCategory.value !== '') && isLogined
 })
 const subLabels = computed(() => {
   return subData.value?.map(el => el.key) || []
diff --git a/src/components/task-board/TaskBoard.vue b/src/components/task-board/TaskBoard.vue
index c7cd4823..587f8444 100644
--- a/src/components/task-board/TaskBoard.vue
+++ b/src/components/task-board/TaskBoard.vue
@@ -107,6 +107,7 @@ import { useTaskBoardParamsStore } from '@/stores/params'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import type { Status } from '@/types/common'
 import { computed } from 'vue'
+import { useMemberStore } from '@/stores/member'
 
 const queryClient = useQueryClient()
 
@@ -165,9 +166,11 @@ const fetchTaskBoard = async () => {
   const response = await axiosInstance.get('/api/task-board', { params: parsedParams })
   return response.data
 }
+const { isLogined } = useMemberStore()
 const { data } = useQuery<TaskCardList>({
   queryKey: ['taskBoard', params],
-  queryFn: fetchTaskBoard
+  queryFn: fetchTaskBoard,
+  enabled: isLogined
 })
 
 const tasksInProgress = computed(() => [...(data.value?.tasksInProgress || [])])
diff --git a/src/components/task-board/TaskBoardFilterBar.vue b/src/components/task-board/TaskBoardFilterBar.vue
index 7429391f..b0b34dba 100644
--- a/src/components/task-board/TaskBoardFilterBar.vue
+++ b/src/components/task-board/TaskBoardFilterBar.vue
@@ -31,6 +31,7 @@ import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 import type { LabelDataTypes } from '@/types/common'
 import { getCategory, getLabels } from '@/api/common'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useTaskBoardParamsStore()
 
@@ -55,14 +56,17 @@ const onTitleChange = (value: string) => {
   params.title = value
 }
 
+const { isLogined } = useMemberStore()
 const { data: categoryList } = useQuery({
   queryKey: ['category'],
-  queryFn: getCategory
+  queryFn: getCategory,
+  enabled: isLogined
 })
 
 const { data: labelList } = useQuery<LabelDataTypes[]>({
   queryKey: ['label'],
-  queryFn: getLabels
+  queryFn: getLabels,
+  enabled: isLogined
 })
 const labelOptionList = computed(() => {
   const list = [{ value: '', content: '전체' }]
diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 1ca080c0..d3ab9a56 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -1,92 +1,65 @@
 <template>
   <div
-    v-if="selectedId"
     :onClick="closeTaskDetail"
     class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12" />
-  <Transition name="modal">
+  <div
+    @click.stop
+    class="flex flex-col overflow-y-auto rounded-lg w-[calc(100%-96px)] max-w-[1104px] min-w-[768px] h-[calc(100%-96px)] bg-white shadow-custom py-6 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
+    <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
-      v-if="selectedId"
-      @click.stop
-      class="flex flex-col overflow-y-auto rounded-lg w-[calc(100%-96px)] max-w-[1104px] min-w-[768px] h-[calc(100%-96px)] bg-white shadow-custom py-6 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
-      <TaskDetailTopBar
-        v-if="data"
-        :is-approved="isApproved"
-        :close-task-detail="closeTaskDetail"
-        :id="data?.taskId || 0"
-        :isProcessor="data?.processorNickName === info.nickname || info.role === 'ROLE_MANAGER'"
-        :isRequestor="data?.requesterNickName === info.nickname" />
-      <div
-        v-if="data"
-        class="w-full flex relative overflow-y-auto">
-        <div class="w-full flex flex-col gap-y-8 overflow-y-auto scrollbar-hide p-6">
-          <TaskDetailLeft :data="data" />
-          <div class="w-full h-[1px] bg-border-1 shrink-0"></div>
-          <TaskDetailHistory
-            :historyData="historyData?.histories || []"
-            :task-id="selectedId"
-            :requestor-name="data.requesterNickName" />
-        </div>
-        <div class="w-[1px] bg-border-1"></div>
-        <TaskDetailRight
-          :data
-          :isProcessor="data?.processorNickName === info.nickname" />
+      v-if="data"
+      class="w-full flex relative overflow-y-auto">
+      <div class="w-full flex flex-col gap-y-8 overflow-y-auto scrollbar-hide p-6">
+        <TaskDetailLeft :data="data" />
+        <div class="w-full h-[1px] bg-border-1 shrink-0"></div>
+        <TaskDetailHistory
+          :historyData="historyData?.histories || []"
+          :task-id="selectedId"
+          :requestor-name="data.requesterNickName" />
       </div>
+      <div class="w-[1px] bg-border-1"></div>
+      <TaskDetailRight
+        :data
+        :isProcessor="data?.processorNickName === info.nickname" />
     </div>
-  </Transition>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { getHistory, getTaskDetailManager, getTaskDetailUser } from '@/api/user'
 import { useMemberStore } from '@/stores/member'
 import type { TaskDetailDatas, TaskDetailHistoryData, TaskDetailProps } from '@/types/user'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useQuery } from '@tanstack/vue-query'
 import { storeToRefs } from 'pinia'
-import { computed, ref, watch } 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, isApproved } = defineProps<TaskDetailProps>()
-const queryClient = useQueryClient()
+const { closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
+console.log(info, '인포')
 
-const userRole = computed(() => info.value.role)
-const checkId = computed(() => selectedId !== null)
-const isDataFetched = ref(false)
-
-const fetchData = async () => {
-  if (!userRole.value || !selectedId) return null
-  const result =
-    userRole.value === 'ROLE_USER'
-      ? await getTaskDetailUser(selectedId)
-      : await getTaskDetailManager(selectedId)
-  isDataFetched.value = true
-  return result
-}
-
-const { data, refetch } = useQuery<TaskDetailDatas>({
+const { data } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
-  queryFn: fetchData,
-  enabled: false
+  queryFn:
+    info.value.role === 'ROLE_USER'
+      ? () => getTaskDetailUser(selectedId)
+      : () => getTaskDetailManager(selectedId)
 })
 
 const { data: historyData } = useQuery<TaskDetailHistoryData>({
   queryKey: ['historyData', selectedId],
-  queryFn: () => getHistory(selectedId),
-  enabled: isDataFetched.value
+  queryFn: () => getHistory(selectedId)
 })
 
-watch(
-  [userRole, checkId],
-  async params => {
-    if (params) {
-      await queryClient.invalidateQueries({ queryKey: ['taskDetailUser', selectedId] })
-      await refetch()
-    }
-  },
-  { immediate: true }
-)
+console.log(historyData.value, '가져온 히스ㅇ토리', selectedId, '선택된 id')
 </script>
diff --git a/src/components/task-detail/TaskDetailHistoryChat.vue b/src/components/task-detail/TaskDetailHistoryChat.vue
index b63278ad..9b3dbeb5 100644
--- a/src/components/task-detail/TaskDetailHistoryChat.vue
+++ b/src/components/task-detail/TaskDetailHistoryChat.vue
@@ -5,9 +5,9 @@
         '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="center" />
+      <ImageContainer
+        :url="history.details.commentDetails?.profileImageUrl"
+        :size="40" />
     </div>
     <div
       :class="[
@@ -62,6 +62,7 @@ import { useQueryClient } from '@tanstack/vue-query'
 import { storeToRefs } from 'pinia'
 import { computed, defineProps, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import ImageContainer from '../common/ImageContainer.vue'
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
diff --git a/src/components/task-detail/TaskDetailLeft.vue b/src/components/task-detail/TaskDetailLeft.vue
index c7b12d6e..61438e12 100644
--- a/src/components/task-detail/TaskDetailLeft.vue
+++ b/src/components/task-detail/TaskDetailLeft.vue
@@ -12,7 +12,7 @@
       <p class="task-detail">제목</p>
       <p>{{ data.title }}</p>
     </div>
-    <div>
+    <div v-if="data.description">
       <p class="task-detail">부가 설명</p>
       <p class="px-6 py-4 bg-primary2 rounded-lg font-normal min-h-[120px] whitespace-pre-wrap">
         {{ data.description }}
diff --git a/src/components/task-detail/TaskDetailManagerDropdown.vue b/src/components/task-detail/TaskDetailManagerDropdown.vue
index df36a88d..725936b9 100644
--- a/src/components/task-detail/TaskDetailManagerDropdown.vue
+++ b/src/components/task-detail/TaskDetailManagerDropdown.vue
@@ -6,11 +6,9 @@
       class="task-detail-manager-dropdown"
       @click="toggleDropdown">
       <div class="flex gap-2 items-center">
-        <div class="w-5 h-5 rounded-full overflow-hidden">
-          <img
-            :src="modelValue?.imageUrl || '/images/mockProfile.jpg'"
-            alt="userProfile" />
-        </div>
+        <ImageContainer
+          :url="modelValue?.imageUrl"
+          :size="20" />
         <p>
           {{ modelValue?.nickname }}
         </p>
@@ -28,11 +26,9 @@
         class="request-task-dropdown-option justify-between"
         @click="selectOption(option)">
         <div class="flex gap-2">
-          <div class="w-5 h-5 rounded-full overflow-hidden">
-            <img
-              :src="option.imageUrl || '/images/mockProfile.jpg'"
-              alt="userProfile" />
-          </div>
+          <ImageContainer
+            :url="option.imageUrl"
+            :size="20" />
           <p>
             {{ option.nickname }}
           </p>
@@ -50,6 +46,7 @@ import type { ManagerTypes } from '@/types/manager'
 import { onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import { useOutsideClick } from '../hooks/useOutsideClick'
+import ImageContainer from '../common/ImageContainer.vue'
 
 const { modelValue } = defineProps<{ modelValue: ManagerTypes; taskId: number }>()
 const emit = defineEmits(['update:modelValue'])
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 39ac8724..3e76098c 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -31,10 +31,9 @@
     <div>
       <p class="task-detail">요청자</p>
       <div class="flex gap-2">
-        <img
-          :src="data.requesterImageUrl || '/images/mockProfile.jpg'"
-          class="rounded-full overflow-hidden w-5 h-5"
-          alt="requesterImg" />
+        <ImageContainer
+          :url="data.requesterImageUrl"
+          :size="20" />
         <p class="text-sm text-black">{{ data.requesterNickName }}</p>
       </div>
     </div>
@@ -48,11 +47,10 @@
       <div
         v-else
         class="flex gap-2">
-        <img
+        <ImageContainer
           v-if="data.processorNickName"
-          :src="data.processorImageUrl || '/images/mockProfile.jpg'"
-          class="rounded-full overflow-hidden w-5 h-5"
-          alt="processorImg" />
+          :url="data.processorImageUrl"
+          :size="20" />
         <p class="text-sm text-black">{{ data.processorNickName || '-' }}</p>
       </div>
     </div>
@@ -96,6 +94,7 @@ import TaskStatus from '../TaskStatus.vue'
 import TaskDetailLabelDropdown from './TaskDetailLabelDropdown.vue'
 import TaskDetailManagerDropdown from './TaskDetailManagerDropdown.vue'
 import TaskStatusList from './TaskStatusList.vue'
+import ImageContainer from '../common/ImageContainer.vue'
 
 const { data, isProcessor } = defineProps<{ data: TaskDetailDatas; isProcessor: boolean }>()
 
diff --git a/src/components/task-management/CategoryManagement.vue b/src/components/task-management/CategoryManagement.vue
index b32f45ec..7e9ab725 100644
--- a/src/components/task-management/CategoryManagement.vue
+++ b/src/components/task-management/CategoryManagement.vue
@@ -37,12 +37,15 @@ import CommonIcons from '../common/CommonIcons.vue'
 import CategoryLine from './CategoryLine.vue'
 import CategoryLineSub from './CategoryLineSub.vue'
 import { getCategory } from '@/api/common'
+import { useMemberStore } from '@/stores/member'
 
 const router = useRouter()
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: getCategory
+  queryFn: getCategory,
+  enabled: isLogined
 })
 
 const MovetoAddCategory = () => {
diff --git a/src/components/team-board/TeamBoard.vue b/src/components/team-board/TeamBoard.vue
index ac193f4c..1795e718 100644
--- a/src/components/team-board/TeamBoard.vue
+++ b/src/components/team-board/TeamBoard.vue
@@ -25,6 +25,7 @@ import { useParseParams } from '../hooks/useParseParams'
 import type { TeamBoardResponse } from '@/types/manager'
 import { computed } from 'vue'
 import NoContent from '../lists/NoContent.vue'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useTeamBoardParamsStore()
 
@@ -34,9 +35,11 @@ const fetchTeamStatus = async () => {
   const response = await axiosInstance.get('/api/team-status/filter', { params: parsedParams })
   return response.data
 }
+const { isLogined } = useMemberStore()
 const { data } = useQuery<TeamBoardResponse>({
   queryKey: ['teamStatus', params],
-  queryFn: fetchTeamStatus
+  queryFn: fetchTeamStatus,
+  enabled: isLogined
 })
 
 const teamSummary = computed(() => {
diff --git a/src/components/team-board/TeamBoardCard.vue b/src/components/team-board/TeamBoardCard.vue
index fcab5c61..ca7d9986 100644
--- a/src/components/team-board/TeamBoardCard.vue
+++ b/src/components/team-board/TeamBoardCard.vue
@@ -2,9 +2,9 @@
   <div class="flex flex-col gap-4">
     <div class="flex justify-between items-center">
       <div class="flex items-center gap-2">
-        <div class="w-6 h-6 rounded-full overflow-hidden">
-          <img src="https://picsum.photos/24" />
-        </div>
+        <ImageContainer
+          :url="info.imageUrl"
+          :size="24" />
         <span class="text-black">{{ info.nickname }}</span>
       </div>
       <span class="text-xs font-bold text-body">{{ info.department }}</span>
@@ -30,6 +30,7 @@
 <script setup lang="ts">
 import type { TeamBoardCardProps } from '@/types/manager'
 import TaskCard from '../TaskCard.vue'
+import ImageContainer from '../common/ImageContainer.vue'
 
 const { info } = defineProps<{ info: TeamBoardCardProps }>()
 </script>
diff --git a/src/components/team-board/TeamBoardFilterBar.vue b/src/components/team-board/TeamBoardFilterBar.vue
index 22495375..de52abb0 100644
--- a/src/components/team-board/TeamBoardFilterBar.vue
+++ b/src/components/team-board/TeamBoardFilterBar.vue
@@ -29,13 +29,16 @@ import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useTeamBoardParamsChange } from '../hooks/useTeamBoardParamsChange'
 import { getCategory } from '@/api/common'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useTeamBoardParamsStore()
 
 const onParamsChange = useTeamBoardParamsChange()
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: getCategory
+  queryFn: getCategory,
+  enabled: isLogined
 })
 </script>
diff --git a/src/components/top-bar/NotificationModal.vue b/src/components/top-bar/NotificationModal.vue
index 35622a31..7edd046e 100644
--- a/src/components/top-bar/NotificationModal.vue
+++ b/src/components/top-bar/NotificationModal.vue
@@ -3,16 +3,18 @@
     v-if="isOpen"
     @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">
+    <div class="flex justify-between items-center 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">
+          class="flex items-center gap-1 p-1 rounded hover:bg-background-2">
           <CommonIcons :name="smallCheckIcon" />
           <p class="font-bold text-primary1 text-xs">모두 읽음</p>
         </button>
-        <button @click="closeModal">
+        <button
+          class="hover:bg-background-2 rounded"
+          @click="closeModal">
           <CommonIcons :name="closeIcon" />
         </button>
       </div>
diff --git a/src/components/top-bar/ProfileModal.vue b/src/components/top-bar/ProfileModal.vue
index d2c3551d..82de3e14 100644
--- a/src/components/top-bar/ProfileModal.vue
+++ b/src/components/top-bar/ProfileModal.vue
@@ -5,15 +5,10 @@
     class="absolute w-60 bg-white right-6 top-[calc(100%+16px)] rounded-lg shadow-custom overflow-hidden">
     <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.profileImageUrl"
-          alt="프로필 이미지" />
-        <div
-          v-else
-          class="w-24 h-24 bg-background-1 rounded-full mb-6" />
+      <div class="flex flex-col items-center justify-center gap-6">
+        <ImageContainer
+          :url="info.profileImageUrl"
+          :size="96" />
         <div>
           <div class="flex flex-col justify-center items-center w-[172px]">
             <p class="text-xs text-body font-bold">{{ name }}</p>
@@ -52,13 +47,13 @@ import ModalView from '../ModalView.vue'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
+import ImageContainer from '../common/ImageContainer.vue'
 
 const isModalVisible = ref(false)
 
 const memberStore = useMemberStore()
 const { isLogined, info } = storeToRefs(memberStore)
 
-const imgUrl = computed(() => info.value.profileImageUrl)
 const name = computed(() => info.value.name)
 const nickname = computed(() => info.value.nickname)
 
diff --git a/src/components/top-bar/SideBar.vue b/src/components/top-bar/SideBar.vue
index 3b6aca1e..8a67b73d 100644
--- a/src/components/top-bar/SideBar.vue
+++ b/src/components/top-bar/SideBar.vue
@@ -43,14 +43,9 @@
 
       <div class="flex w-full justify-between px-6 py-4 bg-white">
         <div class="flex w-full items-center gap-3">
-          <img
-            v-if="info?.profileImageUrl"
-            class="rounded-[50%] w-10 h-10"
-            :src="info.profileImageUrl"
-            alt="프로필 이미지" />
-          <div
-            v-else
-            class="w-10 h-10 rounded-full bg-background-1" />
+          <ImageContainer
+            :url="info.profileImageUrl"
+            :size="40" />
           <div class="flex flex-col gap-1">
             <p class="text-xs text-body font-bold">{{ name }}</p>
             <p class="text-sm text-black">{{ nickname }}</p>
@@ -77,6 +72,7 @@ import { hamburgerIcon } from '@/constants/iconPath'
 import { SIDE_USER_MENU, SIDE_MANAGER_MENU, SIDE_ADMIN_MENU } from '@/constants/menu'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
+import ImageContainer from '../common/ImageContainer.vue'
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
diff --git a/src/components/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue
index 7afd9e7e..ce9b5532 100644
--- a/src/components/top-bar/TopBar.vue
+++ b/src/components/top-bar/TopBar.vue
@@ -31,15 +31,11 @@
           class="flex">
           <button
             type="button"
+            class="flex"
             @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" />
+            <ImageContainer
+              :url="info.profileImageUrl"
+              :size="40" />
           </button>
           <ProfileModal
             :isOpen="isProfileVisible"
@@ -67,6 +63,7 @@ import { getNotifiCount } from '@/api/common'
 import { useRoute, useRouter } from 'vue-router'
 import { PERMITTED_URL } from '@/constants/common'
 import { useOutsideClick } from '../hooks/useOutsideClick'
+import ImageContainer from '../common/ImageContainer.vue'
 
 const memberStore = useMemberStore()
 const { isLogined, info } = storeToRefs(memberStore)
@@ -98,6 +95,7 @@ const isNotifiVisible = ref(false)
 const isProfileVisible = ref(false)
 
 const fetchNotificationCount = async () => {
+  if (!info.value.role) return
   try {
     const data = await getNotifiCount()
     countNotifi.value = data.count
@@ -122,7 +120,7 @@ const onCloseSide = () => {
 watch(
   () => info.value,
   async newInfo => {
-    if (newInfo.name) {
+    if (newInfo.role) {
       await fetchNotificationCount()
     }
   },
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index aefb085c..50b321bb 100644
--- a/src/constants/admin.ts
+++ b/src/constants/admin.ts
@@ -26,8 +26,6 @@ export const API_LOGS_DIVISION_LIST: Option[] = [
   { content: '댓글 추가', value: 'COMMENT_ADDED' },
   { content: '댓글 수정', value: 'COMMENT_UPDATED' },
   { content: '작업 상태 변경', value: 'STATUS_CHANGED' },
-  { content: '작업 완료', value: 'TASK_COMPLETED' },
-  { content: '작업 실패', value: 'TASK_FAILED' },
   { content: '작업 조회', value: 'TASK_VIEWED' }
 ]
 
diff --git a/src/layout/TheView.vue b/src/layout/TheView.vue
index bb11551a..a378a855 100644
--- a/src/layout/TheView.vue
+++ b/src/layout/TheView.vue
@@ -2,6 +2,7 @@
   <div class="w-full">
     <div v-if="selectedID">
       <TaskDetail
+        v-if="selectedID"
         :selected-id="Number(selectedID)"
         :close-task-detail="() => handleModal(null)" />
     </div>
diff --git a/src/stores/member.ts b/src/stores/member.ts
index 402908e2..6a1803ba 100644
--- a/src/stores/member.ts
+++ b/src/stores/member.ts
@@ -36,8 +36,8 @@ export const useMemberStore = defineStore('memberInfo', () => {
       info.value = data
       isLogined.value = Cookies.get('refreshToken') ? true : false
       return data.role
-    } catch {
-      router.push('/login')
+    } catch (e) {
+      console.log(e)
     }
   }
 
diff --git a/src/stores/params.ts b/src/stores/params.ts
index bfaba7b8..a5db7b07 100644
--- a/src/stores/params.ts
+++ b/src/stores/params.ts
@@ -82,8 +82,7 @@ export const useTeamBoardParamsStore = defineStore('teamBoardParams', () => {
     sortBy: 'CONTRIBUTE',
     mainCategoryIds: [],
     categoryIds: [],
-    taskTitle: '',
-    valid: true
+    taskTitle: ''
   })
 
   return { params }
diff --git a/src/types/common.ts b/src/types/common.ts
index be4c829f..22819b14 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -58,7 +58,7 @@ export type SortDirection = 'DESC' | 'ASC'
 export type Role = 'ROLE_USER' | 'ROLE_MANAGER' | 'ROLE_ADMIN'
 
 export interface DueDateInputProps {
-  modelValue: string
+  modelValue: string | null
   inputType: string
 }
 
diff --git a/src/types/stores.ts b/src/types/stores.ts
index 3b0453ca..5c25dc74 100644
--- a/src/types/stores.ts
+++ b/src/types/stores.ts
@@ -39,7 +39,6 @@ export interface TeamBoardParams {
   mainCategoryIds: number[]
   categoryIds: number[]
   taskTitle: string
-  valid?: boolean
 }
 
 export interface TaskBoardParams {
diff --git a/src/types/user.ts b/src/types/user.ts
index d298ec61..2e10c256 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -117,7 +117,7 @@ export interface CommentFileDetails {
 }
 
 export interface TaskDetailProps {
-  selectedId: number | null
+  selectedId: number
   closeTaskDetail: () => void
   isApproved?: boolean
 }
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index afbac70d..da4ffb87 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -19,10 +19,11 @@ const getNewAccessToken = async () => {
 
     return response.data.accessToken
   } catch (e) {
-    console.error('토큰 발행 실패', e)
-    Cookies.remove('accessToken')
-    Cookies.remove('refreshToken')
-    window.location.href = 'login'
+    console.log(e)
+    // console.error('토큰 발행 실패', e)
+    // Cookies.remove('accessToken')
+    // Cookies.remove('refreshToken')
+    // window.location.href = 'login'
   }
 }
 const setInterceptors = (instance: AxiosInstance) => {
@@ -48,13 +49,13 @@ const setInterceptors = (instance: AxiosInstance) => {
         console.log('상태확인 에러메세지:', error.response)
         switch (error.response.status) {
           case 401:
-            Cookies.remove('accessToken')
-            Cookies.remove('refreshToken')
-            window.location.href = 'login'
+            if (error.response.data === 'AUTH_003') {
+              Cookies.remove('refreshToken')
+            }
             break
           case 403: {
             if (error.response.data !== 'AUTH_002') {
-              Cookies.remove('accessToken')
+              // Cookies.remove('accessToken')
               const originalRequest = error.config
               if (!originalRequest._retry) {
                 originalRequest._retry = true