diff --git a/src/api/user.ts b/src/api/user.ts
index 8bcfa9f7..35fee2e7 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -38,7 +38,7 @@ export const changeProcessor = async (taskID: number, processorId: number) => {
 }
 
 export const patchChangeStatus = async (taskID: number, status: Status) => {
-  const response = await axiosInstance.patch(`/api/tasks/${taskID}/status`, status)
+  const response = await axiosInstance.patch(`/api/tasks/${taskID}/status`, { status })
   return response.data
 }
 
@@ -54,12 +54,15 @@ export const getHistory = async (taskID: number | null) => {
 }
 
 export const postComment = async (taskID: number, content: string) => {
-  const response = await axiosInstance.post(`/api/comments/${taskID}`, { content })
+  const response = await axiosInstance.post(`/api/tasks/${taskID}/comments`, { content })
   return response.data
 }
 
 export const postCommentAttachment = async (taskID: number, formdata: FormData) => {
-  const response = await formDataAxiosInstance.post(`/api/comments/attachment/${taskID}`, formdata)
+  const response = await formDataAxiosInstance.post(
+    `/api/tasks/${taskID}/comments/attachment`,
+    formdata
+  )
   return response.data
 }
 
@@ -82,3 +85,8 @@ export const cancelTaskUser = async (taskId: number) => {
   const response = await axiosInstance.patch(`/api/tasks/${taskId}/cancel`)
   return response.data
 }
+
+export const getSubCategoryDetail = async (categoryId: number) => {
+  const response = await axiosInstance.get(`/api/sub-categories/${categoryId}`)
+  return response.data
+}
diff --git a/src/components/api-logs/ApiLogsFilterBar.vue b/src/components/api-logs/ApiLogsFilterBar.vue
index 0f2181a7..bc855252 100644
--- a/src/components/api-logs/ApiLogsFilterBar.vue
+++ b/src/components/api-logs/ApiLogsFilterBar.vue
@@ -27,12 +27,12 @@
 <script setup lang="ts">
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
-import { useLogsParamsStore } from '@/stores/params'
-import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
 import { API_LOGS_DIVISION_LIST } from '@/constants/admin'
-import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
 import FilterIpAddress from '../filters/FilterIpAddress.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
+import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
+import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
+import { useLogsParamsStore } from '@/stores/params'
 
 const store = useLogsParamsStore()
 store.$reset()
diff --git a/src/components/api-logs/ApiLogsListBar.vue b/src/components/api-logs/ApiLogsListBar.vue
index d085ca13..14288ca7 100644
--- a/src/components/api-logs/ApiLogsListBar.vue
+++ b/src/components/api-logs/ApiLogsListBar.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script setup lang="ts">
-import { useLogsParamsStore } from '@/stores/params'
-import ListBarTab from '../lists/ListBarTab.vue'
 import { LOGS_LIST_BAR_TAB } from '@/constants/admin'
-import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
+import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
+import { useLogsParamsStore } from '@/stores/params'
 import { computed } from 'vue'
+import ListBarTab from '../lists/ListBarTab.vue'
 
 const { params } = useLogsParamsStore()
 const orderRequest = computed(() => ({
diff --git a/src/components/LineChart.vue b/src/components/charts/LineChart.vue
similarity index 96%
rename from src/components/LineChart.vue
rename to src/components/charts/LineChart.vue
index 121e6fe5..4fb21907 100644
--- a/src/components/LineChart.vue
+++ b/src/components/charts/LineChart.vue
@@ -22,8 +22,8 @@ import {
   Colors,
   Filler
 } from 'chart.js'
-import NoContent from './lists/NoContent.vue'
 import type { PeriodType } from '@/types/manager'
+import NoContent from '../lists/NoContent.vue'
 
 ChartJS.register(
   Title,
diff --git a/src/components/PieChart.vue b/src/components/charts/PieChart.vue
similarity index 96%
rename from src/components/PieChart.vue
rename to src/components/charts/PieChart.vue
index 50239597..e27b1343 100644
--- a/src/components/PieChart.vue
+++ b/src/components/charts/PieChart.vue
@@ -22,8 +22,8 @@ import {
   type ChartEvent,
   type ActiveElement
 } from 'chart.js'
-import NoContent from './lists/NoContent.vue'
 import type { PeriodType } from '@/types/manager'
+import NoContent from '../lists/NoContent.vue'
 ChartJS.register(Title, Tooltip, Legend, ArcElement, Colors)
 
 const { labels, series, periodType, content } = defineProps<{
diff --git a/src/components/EditInformation.vue b/src/components/common/EditInformation.vue
similarity index 97%
rename from src/components/EditInformation.vue
rename to src/components/common/EditInformation.vue
index 520f30cf..d4a35441 100644
--- a/src/components/EditInformation.vue
+++ b/src/components/common/EditInformation.vue
@@ -101,6 +101,7 @@
     <div>
       <p class="text-body text-xs font-bold">비밀번호 재설정</p>
       <button
+        type="button"
         class="button-medium-secondary mt-2"
         @click="handlePwChange">
         재설정하기
@@ -116,16 +117,16 @@
 </template>
 
 <script lang="ts" setup>
+import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 import { nextTick, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import ModalView from './ModalView.vue'
-import FormButtonContainer from './common/FormButtonContainer.vue'
-import FormCheckbox from './common/FormCheckbox.vue'
-const router = useRouter()
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
 import { patchEditInfo } from '@/api/common'
-import ImageContainer from './common/ImageContainer.vue'
+import FormButtonContainer from './FormButtonContainer.vue'
+import FormCheckbox from './FormCheckbox.vue'
+import ImageContainer from './ImageContainer.vue'
+const router = useRouter()
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
diff --git a/src/components/common/FormButtonContainer.vue b/src/components/common/FormButtonContainer.vue
index 591817d1..1ffdbc3e 100644
--- a/src/components/common/FormButtonContainer.vue
+++ b/src/components/common/FormButtonContainer.vue
@@ -2,11 +2,13 @@
   <div class="w-full mt-4 flex justify-center">
     <div class="w-[400px] flex gap-6">
       <button
+        type="button"
         class="button-large-default"
         @click="handleCancel">
         {{ cancelText }}
       </button>
       <button
+        type="button"
         class="button-large-primary"
         @click="handleSubmit">
         {{ submitText }}
diff --git a/src/components/ModalView.vue b/src/components/common/ModalView.vue
similarity index 94%
rename from src/components/ModalView.vue
rename to src/components/common/ModalView.vue
index a75ea473..43b5483f 100644
--- a/src/components/ModalView.vue
+++ b/src/components/common/ModalView.vue
@@ -39,6 +39,7 @@
         </div>
 
         <button
+          type="button"
           class="button-large-primary"
           v-if="type == 'successType'"
           @click="closeModal">
@@ -46,6 +47,7 @@
         </button>
 
         <button
+          type="button"
           class="button-large-default"
           v-if="type == 'failType'"
           @click="closeModal">
@@ -56,11 +58,13 @@
           class="flex items-center gap-6"
           v-if="type == 'warningType' || type == 'inputType'">
           <button
+            type="button"
             class="button-large-default"
             @click="closeModal">
             취소
           </button>
           <button
+            type="button"
             class="button-large-red"
             @click="confirmModal">
             {{ type === 'inputType' ? '거부' : '삭제' }}
@@ -72,9 +76,8 @@
 </template>
 
 <script setup lang="ts">
+import { failIcon, successIcon, warningIcon } from '@/constants/iconPath'
 import { ref, watch } from 'vue'
-import CommonIcons from './common/CommonIcons.vue'
-import { successIcon, failIcon, warningIcon } from '../constants/iconPath'
 
 const props = defineProps<{
   isOpen: boolean
diff --git a/src/components/OrderIcon.vue b/src/components/common/OrderIcon.vue
similarity index 100%
rename from src/components/OrderIcon.vue
rename to src/components/common/OrderIcon.vue
diff --git a/src/components/common/ResultModal.vue b/src/components/common/ResultModal.vue
index ffa49930..9f0ffb46 100644
--- a/src/components/common/ResultModal.vue
+++ b/src/components/common/ResultModal.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import ModalView from '../ModalView.vue'
+import ModalView from './ModalView.vue'
 
 const { type, isOpen, message } = defineProps<{
   type: string
diff --git a/src/components/TaskCard.vue b/src/components/common/TaskCard.vue
similarity index 73%
rename from src/components/TaskCard.vue
rename to src/components/common/TaskCard.vue
index da9e277d..82180412 100644
--- a/src/components/TaskCard.vue
+++ b/src/components/common/TaskCard.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="w-full max-w-80 border-l-8 bg-white py-4 pl-6 pr-4 flex flex-col gap-6 rounded-lg shadow-custom hover:bg-background-2"
+    class="w-full max-w-80 border-l-8 bg-white py-4 pl-6 pr-4 flex flex-col gap-6 rounded-lg shadow-custom hover:bg-background-2 cursor-pointer"
     :class="borderLeft"
-    @click="onTaskClick">
+    @click="handleModal(data.taskId)">
     <div class="flex flex-col gap-1">
       <div class="flex justify-between items-center gap-4">
         <div class="flex items-center gap-2 overflow-hidden">
@@ -34,26 +34,35 @@
         </div>
       </div>
     </div>
+    <TaskDetail
+      v-if="selectedID"
+      :is-approved="data.taskStatus !== 'REQUESTED'"
+      :selected-id="selectedID"
+      :close-task-detail="() => handleModal(null)" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { bentoIcon } from '@/constants/iconPath'
 import type { Status } from '@/types/common'
-import { computed } from 'vue'
 import type { TaskCardProps } from '@/types/manager'
-import CommonIcons from './common/CommonIcons.vue'
 import { statusAsColor } from '@/utils/statusAsColor'
-import TaskLabel from './common/TaskLabel.vue'
-import ImageContainer from './common/ImageContainer.vue'
+import { computed, ref } from 'vue'
+import CommonIcons from './CommonIcons.vue'
+import TaskLabel from './TaskLabel.vue'
+import ImageContainer from './ImageContainer.vue'
+import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
+const selectedID = ref<number | null>(null)
 
 const borderLeft = computed(() => {
   return `border-${statusAsColor(data.taskStatus as Status)}-1`
 })
 
-const onTaskClick = () => {
-  console.log('clicked')
+const handleModal = (id: number | null) => {
+  if (data.taskId) document.body.style.overflow = 'hidden'
+  else document.body.style.overflow = ''
+  selectedID.value = id
 }
 </script>
diff --git a/src/components/TaskStatus.vue b/src/components/common/TaskStatus.vue
similarity index 100%
rename from src/components/TaskStatus.vue
rename to src/components/common/TaskStatus.vue
diff --git a/src/components/TitleBar.vue b/src/components/common/TitleBar.vue
similarity index 94%
rename from src/components/TitleBar.vue
rename to src/components/common/TitleBar.vue
index ec6bc0e0..a28382af 100644
--- a/src/components/TitleBar.vue
+++ b/src/components/common/TitleBar.vue
@@ -3,7 +3,7 @@
     <span class="text-2xl font-bold text-black">{{ title }}</span>
     <div
       v-if="$slots.button"
-      class="flex gap-4">
+      class="flex gap-2">
       <slot
         name="button"
         class="flex gap-4" />
diff --git a/src/components/filters/FilterCategory.vue b/src/components/filters/FilterCategory.vue
index c9aadf57..2cda2cb7 100644
--- a/src/components/filters/FilterCategory.vue
+++ b/src/components/filters/FilterCategory.vue
@@ -79,7 +79,7 @@ import { dropdownIcon } from '@/constants/iconPath'
 import type { Category, FilterCategoryProps } from '@/types/common'
 import { computed, ref, watchEffect } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
-import { useOutsideClick } from '../hooks/useOutsideClick'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 const { categoryList = [], main, sub } = defineProps<FilterCategoryProps>()
 const emit = defineEmits(['update:main', 'update:sub'])
diff --git a/src/components/filters/FilterDropdown.vue b/src/components/filters/FilterDropdown.vue
index 85ef31d6..8bed1198 100644
--- a/src/components/filters/FilterDropdown.vue
+++ b/src/components/filters/FilterDropdown.vue
@@ -29,11 +29,11 @@
 </template>
 
 <script setup lang="ts">
+import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 import type { Filter } from '@/types/common'
 import { ref } from 'vue'
-import { dropdownIcon } from '@/constants/iconPath'
 import CommonIcons from '../common/CommonIcons.vue'
-import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { title, value, width = '120', optionList } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])
diff --git a/src/components/filters/FilterDropdownMulti.vue b/src/components/filters/FilterDropdownMulti.vue
index eabbd29a..5e39e0e3 100644
--- a/src/components/filters/FilterDropdownMulti.vue
+++ b/src/components/filters/FilterDropdownMulti.vue
@@ -32,11 +32,11 @@
 </template>
 
 <script setup lang="ts">
+import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 import type { Filter } from '@/types/common'
 import { ref } from 'vue'
-import { dropdownIcon } from '@/constants/iconPath'
 import CommonIcons from '../common/CommonIcons.vue'
-import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { title, width = '120', optionList, value } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])
diff --git a/src/components/lists/ListBarTab.vue b/src/components/lists/ListBarTab.vue
index 691be80b..3ff40cc3 100644
--- a/src/components/lists/ListBarTab.vue
+++ b/src/components/lists/ListBarTab.vue
@@ -5,6 +5,7 @@
     :class="`${!width && 'grow'} ${justifyCenter && 'justify-center'}`">
     {{ content }}
     <button
+      type="button"
       v-if="sortBy"
       @click="$emit('toggleSortBy', sortBy)">
       <OrderIcon
@@ -15,9 +16,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import OrderIcon from '../OrderIcon.vue'
 import type { ListBarTabProps } from '@/types/common'
+import { computed } from 'vue'
+import OrderIcon from '../common/OrderIcon.vue'
 
 const { content, width, sortBy, currentOrderRequest } = defineProps<ListBarTabProps>()
 defineEmits(['toggleSortBy'])
diff --git a/src/components/lists/ListCardTab.vue b/src/components/lists/ListCardTab.vue
index 8ebbe83f..cf102fb9 100644
--- a/src/components/lists/ListCardTab.vue
+++ b/src/components/lists/ListCardTab.vue
@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 import type { ListCardProps, Status } from '@/types/common'
-import TaskStatus from '../TaskStatus.vue'
+import TaskStatus from '../common/TaskStatus.vue'
 
 const { content, width, isTextXs, profileImg, isStatus, isStatusCode, isTextBody } =
   defineProps<ListCardProps>()
diff --git a/src/components/lists/ListPagination.vue b/src/components/lists/ListPagination.vue
index b5421813..d65f57d2 100644
--- a/src/components/lists/ListPagination.vue
+++ b/src/components/lists/ListPagination.vue
@@ -5,6 +5,7 @@
     <div class="flex gap-1 absolute left-0 top-1/2 -translate-x-[calc(100%+8px)] -translate-y-1/2">
       <button
         v-if="pageSet[0] !== 1"
+        type="button"
         @click="onPrevSetClick"
         class="rounded hover:bg-primary2">
         <CommonIcons :name="prevSetIcon" />
@@ -17,6 +18,7 @@
     </div>
     <button
       v-for="page in pageSet"
+      type="button"
       :key="page"
       class="w-6 h-6 flex justify-center items-center rounded text-sm"
       :class="
diff --git a/src/components/login-logs/LoginLogsFilterBar.vue b/src/components/login-logs/LoginLogsFilterBar.vue
index 451f82c9..711a3c09 100644
--- a/src/components/login-logs/LoginLogsFilterBar.vue
+++ b/src/components/login-logs/LoginLogsFilterBar.vue
@@ -29,10 +29,10 @@ import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useLogsParamsStore } from '@/stores/params'
 import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
-import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
 import FilterIpAddress from '../filters/FilterIpAddress.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import { LOGIN_LOGS_DIVISION_LIST } from '@/constants/admin'
+import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
 
 const store = useLogsParamsStore()
 store.$reset()
diff --git a/src/components/login-logs/LoginLogsList.vue b/src/components/login-logs/LoginLogsList.vue
index c2a81b01..0ae89649 100644
--- a/src/components/login-logs/LoginLogsList.vue
+++ b/src/components/login-logs/LoginLogsList.vue
@@ -22,18 +22,18 @@
 </template>
 
 <script setup lang="ts">
-import ListPagination from '../lists/ListPagination.vue'
-import ListContainer from '../lists/ListContainer.vue'
+import { useMemberStore } from '@/stores/member'
 import { useLogsParamsStore } from '@/stores/params'
-import LoginLogsListBar from './LoginLogsListBar.vue'
-import LoginLogsListCard from './LoginLogsListCard.vue'
+import type { LoginLogsResponse } from '@/types/admin'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
-import type { LoginLogsResponse } from '@/types/admin'
+import ListContainer from '../lists/ListContainer.vue'
+import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
+import LoginLogsListBar from './LoginLogsListBar.vue'
+import LoginLogsListCard from './LoginLogsListCard.vue'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {
diff --git a/src/components/login-logs/LoginLogsListBar.vue b/src/components/login-logs/LoginLogsListBar.vue
index a0fcaac5..de5434dd 100644
--- a/src/components/login-logs/LoginLogsListBar.vue
+++ b/src/components/login-logs/LoginLogsListBar.vue
@@ -15,8 +15,8 @@
 import ListBarTab from '../lists/ListBarTab.vue'
 import { useLogsParamsStore } from '@/stores/params'
 import { LOGS_LIST_BAR_TAB } from '@/constants/admin'
-import { useLogsParamsChange } from '../hooks/useLogsParamsChange'
 import { computed } from 'vue'
+import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
 
 const { params } = useLogsParamsStore()
 const orderRequest = computed(() => ({
diff --git a/src/components/member-management/MemberManagementAddByCsv.vue b/src/components/member-management/MemberManagementAddByCsv.vue
index fc25fadd..84233591 100644
--- a/src/components/member-management/MemberManagementAddByCsv.vue
+++ b/src/components/member-management/MemberManagementAddByCsv.vue
@@ -1,24 +1,26 @@
 <template>
-  <input
-    class="hidden"
-    type="file"
-    id="file"
-    accept=".csv"
-    @change="handleFileUpload" />
-  <label
-    for="file"
-    class="cursor-pointer flex items-center gap-1 text-xs font-bold text-primary1">
-    <CommonIcons
-      :name="plusIcon"
-      :style="{ fill: '#7879EB' }" />
-    파일로 일괄 추가
-  </label>
-  <ModalView
-    :isOpen="isModalVisible"
-    :type="'successType'"
-    @close="handleCancel">
-    <template #header> 회원이 추가되었습니다 </template>
-  </ModalView>
+  <div class="py-1 px-2 rounded">
+    <input
+      class="hidden"
+      type="file"
+      id="file"
+      accept=".csv"
+      @change="handleFileUpload" />
+    <label
+      for="file"
+      class="cursor-pointer flex items-center gap-1 text-xs font-bold text-primary1">
+      <CommonIcons
+        :name="plusIcon"
+        :style="{ fill: '#7879EB' }" />
+      파일로 일괄 추가
+    </label>
+    <ModalView
+      :isOpen="isModalVisible"
+      :type="'successType'"
+      @close="handleCancel">
+      <template #header> 회원이 추가되었습니다 </template>
+    </ModalView>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -28,7 +30,7 @@ import { useMemberManagementParamsStore } from '@/stores/params'
 import { useQueryClient } from '@tanstack/vue-query'
 import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
-import ModalView from '../ModalView.vue'
+import ModalView from '../common/ModalView.vue'
 
 const queryClient = useQueryClient()
 const isModalVisible = ref(false)
diff --git a/src/components/member-management/MemberManagementListCard.vue b/src/components/member-management/MemberManagementListCard.vue
index a8f9750a..fff02836 100644
--- a/src/components/member-management/MemberManagementListCard.vue
+++ b/src/components/member-management/MemberManagementListCard.vue
@@ -10,16 +10,19 @@
       :is-status="tab.isStatus" />
     <div class="w-[180px] flex gap-2 justify-center items-center shrink-0">
       <button
+        type="button"
         @click="router.push(`/user-update?id=${info.memberId}`)"
         class="button-medium-primary">
         수정
       </button>
       <button
+        type="button"
         class="button-medium-red"
         @click="toggleModal('delete')">
         삭제
       </button>
       <button
+        type="button"
         class="button-medium-secondary"
         @click="onMemberInvite(info.memberId)">
         초대
@@ -43,16 +46,16 @@
 </template>
 
 <script setup lang="ts">
-import type { ListCardProps, Role } from '@/types/common'
-import ListCardTab from '../lists/ListCardTab.vue'
 import type { MemberManagementListData } from '@/types/admin'
-import { useRouter } from 'vue-router'
-import ModalView from '../ModalView.vue'
-import { ref } from 'vue'
+import type { ListCardProps, Role } from '@/types/common'
 import { axiosInstance } from '@/utils/axios'
-import { useQueryClient } from '@tanstack/vue-query'
 import { formatDate } from '@/utils/date'
+import { useQueryClient } from '@tanstack/vue-query'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import ResultModal from '../common/ResultModal.vue'
+import ListCardTab from '../lists/ListCardTab.vue'
+import ModalView from '../common/ModalView.vue'
 
 const roleContent = (role: Role) => {
   return role === 'ROLE_USER' ? '사용자' : role === 'ROLE_MANAGER' ? '담당자' : '관리자'
diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue
index 22a3f067..b4bf0b75 100644
--- a/src/components/my-request/MyRequestFilterBar.vue
+++ b/src/components/my-request/MyRequestFilterBar.vue
@@ -16,7 +16,7 @@
       :value="store.params.title"
       @update:value="onParamsChange.onTitleChange" />
     <FilterInput
-      title="처리자"
+      title="담당자"
       :value="store.params.nickName"
       @update:value="onParamsChange.onNickNameChange" />
     <FilterDropdownMulti
@@ -40,10 +40,10 @@ import FilterCategory from '../filters/FilterCategory.vue'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 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'
 import { storeToRefs } from 'pinia'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
 
 const store = useRequestParamsStore()
 store.$reset()
diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue
index 4f8fba0c..f025fd73 100644
--- a/src/components/my-request/MyRequestList.vue
+++ b/src/components/my-request/MyRequestList.vue
@@ -27,7 +27,6 @@ import type { MyRequestResponse } from '@/types/user'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
-import { useParseParams } from '../hooks/useParseParams'
 import ListContainer from '../lists/ListContainer.vue'
 import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
@@ -35,6 +34,7 @@ import MyRequestListBar from './MyRequestListBar.vue'
 import MyRequestListCard from './MyRequestListCard.vue'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
+import { useParseParams } from '@/hooks/useParseParams'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
diff --git a/src/components/my-request/MyRequestListBar.vue b/src/components/my-request/MyRequestListBar.vue
index 1c51644d..925c5ed4 100644
--- a/src/components/my-request/MyRequestListBar.vue
+++ b/src/components/my-request/MyRequestListBar.vue
@@ -13,10 +13,10 @@
 
 <script setup lang="ts">
 import { MY_REQUEST_LIST_BAR_TAB } from '@/constants/user'
-import ListBarTab from '../lists/ListBarTab.vue'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
 import { useRequestParamsStore } from '@/stores/params'
-import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { computed } from 'vue'
+import ListBarTab from '../lists/ListBarTab.vue'
 
 const { params } = useRequestParamsStore()
 const orderRequest = computed(() => ({
diff --git a/src/components/my-task/MyTaskFilterBar.vue b/src/components/my-task/MyTaskFilterBar.vue
index 8ebaf24e..883fe124 100644
--- a/src/components/my-task/MyTaskFilterBar.vue
+++ b/src/components/my-task/MyTaskFilterBar.vue
@@ -33,17 +33,17 @@
 </template>
 
 <script setup lang="ts">
-import FilterDropdown from '../filters/FilterDropdown.vue'
-import FilterCategory from '../filters/FilterCategory.vue'
-import FilterInput from '../filters/FilterInput.vue'
-import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
-import { useRequestParamsStore } from '@/stores/params'
-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 { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
 import { useMemberStore } from '@/stores/member'
+import { useRequestParamsStore } from '@/stores/params'
+import { useQuery } from '@tanstack/vue-query'
 import { storeToRefs } from 'pinia'
+import FilterCategory from '../filters/FilterCategory.vue'
+import FilterDropdown from '../filters/FilterDropdown.vue'
+import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
+import FilterInput from '../filters/FilterInput.vue'
 
 const store = useRequestParamsStore()
 store.$reset()
diff --git a/src/components/my-task/MyTaskList.vue b/src/components/my-task/MyTaskList.vue
index c8c52ded..ff31a896 100644
--- a/src/components/my-task/MyTaskList.vue
+++ b/src/components/my-task/MyTaskList.vue
@@ -22,19 +22,19 @@
 </template>
 
 <script setup lang="ts">
-import ListPagination from '../lists/ListPagination.vue'
-import ListContainer from '../lists/ListContainer.vue'
+import { useParseParams } from '@/hooks/useParseParams'
+import { useMemberStore } from '@/stores/member'
 import { useRequestParamsStore } from '@/stores/params'
-import MyTaskListCard from './MyTaskListCard.vue'
-import MyTaskListBar from './MyTaskListBar.vue'
-import { useParseParams } from '../hooks/useParseParams'
-import { axiosInstance } from '@/utils/axios'
 import type { MyTaskResponse } from '@/types/manager'
+import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
+import ListContainer from '../lists/ListContainer.vue'
+import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
+import MyTaskListBar from './MyTaskListBar.vue'
+import MyTaskListCard from './MyTaskListCard.vue'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
diff --git a/src/components/my-task/MyTaskListBar.vue b/src/components/my-task/MyTaskListBar.vue
index 0779a8ba..ae621e41 100644
--- a/src/components/my-task/MyTaskListBar.vue
+++ b/src/components/my-task/MyTaskListBar.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script setup lang="ts">
-import ListBarTab from '../lists/ListBarTab.vue'
-import { useRequestParamsStore } from '@/stores/params'
 import { MY_TASK_LIST_BAR_TAB } from '@/constants/manager'
-import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
+import { useRequestParamsStore } from '@/stores/params'
 import { computed } from 'vue'
+import ListBarTab from '../lists/ListBarTab.vue'
 
 const { params } = useRequestParamsStore()
 const orderRequest = computed(() => ({
diff --git a/src/components/request-approve/DueDateInput.vue b/src/components/request-approve/DueDateInput.vue
index 166a4ee2..888fb356 100644
--- a/src/components/request-approve/DueDateInput.vue
+++ b/src/components/request-approve/DueDateInput.vue
@@ -2,6 +2,7 @@
   <input
     :type="inputType"
     :value="modelValue"
+    :min="new Date().toISOString().split('T')[0]"
     class="w-full border border-gray-300 rounded px-3 py-2 cursor-pointer focus:outline-none text-center text-black"
     @focus="e => (e.target as HTMLInputElement).showPicker()"
     @input="updateValue(($event.target as HTMLInputElement).value)" />
@@ -12,6 +13,7 @@ import type { DueDateInputProps } from '@/types/common'
 import { defineEmits, defineProps, onMounted } from 'vue'
 
 const { modelValue, inputType } = defineProps<DueDateInputProps>()
+
 const emit = defineEmits(['update:modelValue'])
 const updateValue = (value: string) => {
   emit('update:modelValue', value)
diff --git a/src/components/request-approve/LabelDropdown.vue b/src/components/request-approve/LabelDropdown.vue
index 14ab5def..19edef3c 100644
--- a/src/components/request-approve/LabelDropdown.vue
+++ b/src/components/request-approve/LabelDropdown.vue
@@ -32,11 +32,11 @@
 <script lang="ts" setup>
 import { getLabelsManager } from '@/api/user'
 import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 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'])
diff --git a/src/components/request-approve/ManagerDropdown.vue b/src/components/request-approve/ManagerDropdown.vue
index 49056d9c..93e4baf7 100644
--- a/src/components/request-approve/ManagerDropdown.vue
+++ b/src/components/request-approve/ManagerDropdown.vue
@@ -53,12 +53,12 @@
 <script lang="ts" setup>
 import { getManager } from '@/api/user'
 import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 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'])
diff --git a/src/components/request-approve/RequestApprove.vue b/src/components/request-approve/RequestApprove.vue
index 9e7cefbf..6ccebe17 100644
--- a/src/components/request-approve/RequestApprove.vue
+++ b/src/components/request-approve/RequestApprove.vue
@@ -23,13 +23,22 @@
       :placeholderText="'담당자를 선택해주세요'"
       :is-invalidate="isInvalidate" />
     <div class="flex flex-col gap-2">
-      <p class="text-body text-xs font-bold">마감기한</p>
+      <div class="flex gap-1">
+        <p class="text-body text-xs font-bold">마감기한</p>
+        <p
+          v-if="isInvalidate === 'date'"
+          class="text-red-1 text-xs">
+          기한정보를 모두 입력하세요
+        </p>
+      </div>
       <div class="flex w-full justify-center gap-6">
         <DueDateInput
           v-model="approveData.dueDate"
+          :is-invalidate="isInvalidate"
           inputType="date" />
         <DueDateInput
           v-model="approveData.dueTime"
+          :is-invalidate="isInvalidate"
           inputType="time" />
       </div>
     </div>
@@ -53,11 +62,11 @@ import { convertToISO } from '@/utils/date'
 import { onMounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
-import ModalView from '../ModalView.vue'
 import CategoryDropDown from '../request-task/CategoryDropDown.vue'
 import DueDateInput from './DueDateInput.vue'
 import LabelDropdown from './LabelDropdown.vue'
 import ManagerDropdown from './ManagerDropdown.vue'
+import ModalView from '../common/ModalView.vue'
 
 const isModalVisible = ref(false)
 const category1 = ref<Category | null>(null)
@@ -118,6 +127,13 @@ const handleSubmit = async () => {
     isInvalidate.value = 'manager'
     return
   }
+  if (
+    (approveData.value.dueDate && !approveData.value.dueTime) ||
+    (!approveData.value.dueDate && approveData.value.dueTime)
+  ) {
+    isInvalidate.value = 'date'
+    return
+  }
 
   const requestData = {
     categoryId: category2.value.id,
diff --git a/src/components/request-history/RequestHistoryFilterBar.vue b/src/components/request-history/RequestHistoryFilterBar.vue
index e7a2813c..beedc59f 100644
--- a/src/components/request-history/RequestHistoryFilterBar.vue
+++ b/src/components/request-history/RequestHistoryFilterBar.vue
@@ -33,17 +33,17 @@
 </template>
 
 <script setup lang="ts">
+import { getCategory } from '@/api/common'
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
+import { useMemberStore } from '@/stores/member'
 import { useRequestParamsStore } from '@/stores/params'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 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'
-import { storeToRefs } from 'pinia'
 
 const store = useRequestParamsStore()
 store.$reset()
diff --git a/src/components/request-history/RequestHistoryList.vue b/src/components/request-history/RequestHistoryList.vue
index b1052542..8a000fed 100644
--- a/src/components/request-history/RequestHistoryList.vue
+++ b/src/components/request-history/RequestHistoryList.vue
@@ -27,7 +27,6 @@ import ListContainer from '../lists/ListContainer.vue'
 import { useRequestParamsStore } from '@/stores/params'
 import RequestHistoryListBar from './RequestHistoryListBar.vue'
 import RequestHistoryListCard from './RequestHistoryListCard.vue'
-import { useParseParams } from '../hooks/useParseParams'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
@@ -35,6 +34,7 @@ import type { RequestHistoryResponse } from '@/types/manager'
 import NoContent from '../lists/NoContent.vue'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
+import { useParseParams } from '@/hooks/useParseParams'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
diff --git a/src/components/request-history/RequestHistoryListBar.vue b/src/components/request-history/RequestHistoryListBar.vue
index 8b566760..b96948d7 100644
--- a/src/components/request-history/RequestHistoryListBar.vue
+++ b/src/components/request-history/RequestHistoryListBar.vue
@@ -15,8 +15,8 @@
 import ListBarTab from '../lists/ListBarTab.vue'
 import { useRequestParamsStore } from '@/stores/params'
 import { REQUEST_HISTORY_LIST_BAR_TAB } from '@/constants/manager'
-import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { computed } from 'vue'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
 
 const { params } = useRequestParamsStore()
 const orderRequest = computed(() => ({
diff --git a/src/components/request-task/CategoryDropDown.vue b/src/components/request-task/CategoryDropDown.vue
index 1950c7f6..baf0197f 100644
--- a/src/components/request-task/CategoryDropDown.vue
+++ b/src/components/request-task/CategoryDropDown.vue
@@ -44,10 +44,10 @@
 
 <script lang="ts" setup>
 import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 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>()
diff --git a/src/components/request-task/ReRequestTask.vue b/src/components/request-task/ReRequestTask.vue
index 270a2ff9..c313dd18 100644
--- a/src/components/request-task/ReRequestTask.vue
+++ b/src/components/request-task/ReRequestTask.vue
@@ -5,13 +5,15 @@
       :options="mainCategoryArr"
       :label-name="'1차 카테고리'"
       :placeholderText="'1차 카테고리를 선택해주세요'"
-      :isDisabled="false" />
+      :isDisabled="false"
+      :is-invalidate="isInvalidate" />
     <CategoryDropDown
       v-model="category2"
       :options="afterSubCategoryArr"
       :label-name="'2차 카테고리'"
       :placeholderText="'2차 카테고리를 선택해주세요'"
-      :isDisabled="!category1" />
+      :isDisabled="!category1"
+      :is-invalidate="isInvalidate" />
     <RequestTaskInput
       v-model="title"
       :placeholderText="'제목을 입력해주세요'"
@@ -43,11 +45,11 @@ import type { AttachmentResponse } from '@/types/user'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
-import ModalView from '../ModalView.vue'
 import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
+import ModalView from '../common/ModalView.vue'
 
 const category1 = ref<Category | null>(null)
 const category2 = ref<Category | null>(null)
@@ -65,8 +67,6 @@ const initFileArr = ref<AttachmentResponse[]>([])
 const isFirst = ref(true)
 
 const { id, reqType } = defineProps<{ id: string; reqType: string }>()
-console.log(reqType, id, '가져온 값')
-
 const router = useRouter()
 
 const handleCancel = () => {
@@ -78,7 +78,6 @@ onMounted(async () => {
   subCategoryArr.value = await getSubCategory()
   afterSubCategoryArr.value = await getSubCategory()
   const data = await getTaskDetailUser(Number(id))
-  console.log(data, '데이터')
   const selected = mainCategoryArr.value.find(ct => ct.name === data.mainCategoryName) || null
   category1.value = selected
   category2.value = subCategoryArr.value.find(ct => ct.name === data.categoryName) || null
@@ -129,8 +128,6 @@ const handleSubmit = async () => {
     attachmentsToDelete: attachmentsToDelete
   }
 
-  console.log(taskInfoEdit, '뭘 삭제할건지')
-
   const jsonTaskInfo = JSON.stringify(taskInfoEdit)
   const newBlob = new Blob([jsonTaskInfo], { type: 'application/json' })
   formData.append('taskInfo', newBlob)
@@ -140,12 +137,10 @@ const handleSubmit = async () => {
       f => !initFileArr.value.some(initFile => initFile.fileName === f.name)
     )
     newFiles.forEach(f => {
-      console.log('첨부 파일:', f)
       formData.append('attachment', f)
     })
   } else {
     file.value?.forEach(f => {
-      console.log('첨부 파일:', f)
       formData.append('attachment', f)
     })
   }
diff --git a/src/components/request-task/RequestTask.vue b/src/components/request-task/RequestTask.vue
index 34d716ed..3028087f 100644
--- a/src/components/request-task/RequestTask.vue
+++ b/src/components/request-task/RequestTask.vue
@@ -5,12 +5,14 @@
       :options="mainCategoryArr"
       :label-name="'1차 카테고리'"
       :placeholderText="'1차 카테고리를 선택해주세요'"
+      :is-invalidate="isInvalidate"
       :isDisabled="false" />
     <CategoryDropDown
       v-model="category2"
       :options="afterSubCategoryArr"
       :label-name="'2차 카테고리'"
       :placeholderText="'2차 카테고리를 선택해주세요'"
+      :is-invalidate="isInvalidate"
       :isDisabled="!category1" />
     <RequestTaskInput
       v-model="title"
@@ -37,16 +39,16 @@
 
 <script lang="ts" setup>
 import { getMainCategory, getSubCategory } from '@/api/common'
-import { postTaskRequest } from '@/api/user'
+import { getSubCategoryDetail, postTaskRequest } from '@/api/user'
 import type { Category, SubCategory } from '@/types/common'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
-import ModalView from '../ModalView.vue'
 import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
+import ModalView from '../common/ModalView.vue'
 
 const category1 = ref<Category | null>(null)
 const category2 = ref<Category | null>(null)
@@ -74,6 +76,13 @@ watch(category1, async newValue => {
   )
 })
 
+watch(category2, async newVal => {
+  if (newVal) {
+    const res = await getSubCategoryDetail(newVal.id)
+    description.value = res.descriptionExample
+  }
+})
+
 const router = useRouter()
 
 const handleCancel = () => {
diff --git a/src/components/request-task/RequestTaskFileInput.vue b/src/components/request-task/RequestTaskFileInput.vue
index 74cc26b9..e29208cb 100644
--- a/src/components/request-task/RequestTaskFileInput.vue
+++ b/src/components/request-task/RequestTaskFileInput.vue
@@ -22,14 +22,22 @@
         <p>파일 선택</p>
       </label>
     </div>
+    <ModalView
+      :is-open="isModalVisible"
+      type="failType"
+      @close="handleModal">
+      <template #header>파일추가를 실패했습니다</template>
+      <template #body>최대 5개, 각 5mb까지 가능합니다.</template>
+    </ModalView>
   </div>
 </template>
 
 <script lang="ts" setup>
 import CommonIcons from '@/components/common/CommonIcons.vue'
 import { uploadIcon } from '@/constants/iconPath'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import RequestTaskFileInputAfter from './RequestTaskFileInputAfter.vue'
+import ModalView from '../common/ModalView.vue'
 
 const { modelValue } = defineProps<{
   modelValue: File[] | null
@@ -37,13 +45,26 @@ const { modelValue } = defineProps<{
 const emit = defineEmits(['update:modelValue'])
 
 const hasFiles = computed(() => modelValue && modelValue.length > 0)
+const isModalVisible = ref(false)
+
+const handleModal = () => {
+  isModalVisible.value = !isModalVisible.value
+}
 
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target.files && target.files.length > 0) {
-    const newFiles = Array.from(target.files)
+    const newFiles = Array.from(target.files).filter(file => file.size <= 5 * 1024 * 1024)
+    if (newFiles.length !== target.files.length) {
+      handleModal()
+      return
+    }
     const updatedFiles = modelValue ? [...modelValue, ...newFiles] : newFiles
-    emit('update:modelValue', updatedFiles)
+    if (updatedFiles.length > 5) {
+      handleModal()
+      return
+    }
+    emit('update:modelValue', updatedFiles.length === 1 ? [updatedFiles[0]] : updatedFiles)
   }
 }
 
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index ac036112..6bb85033 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -7,6 +7,11 @@
         class="text-red-1">
         *
       </p>
+      <p
+        v-if="isInvalidateState === 'input'"
+        class="text-red-1 text-xs">
+        {{ labelName }}을 입력해주세요
+      </p>
     </div>
     <input
       class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black rounded"
@@ -14,12 +19,9 @@
       :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
       :placeholder="placeholderText"
-      :class="{ 'text-gray-500': isEdit, 'text-black': !isEdit }" />
-    <p
-      v-if="isInvalidateState === 'input'"
-      class="text-red-1 text-xs absolute top-[calc(100%+4px)]">
-      {{ labelName }}을 입력해주세요
-    </p>
+      :class="{ 'text-gray-500': isEdit, 'text-black': !isEdit }"
+      :maxlength="labelName === '제목' ? 30 : undefined" />
+
     <p
       v-if="isInvalidateState === 'code'"
       class="text-red-1 text-xs absolute top-[calc(100%+4px)]">
diff --git a/src/components/request-task/RequestTaskTextArea.vue b/src/components/request-task/RequestTaskTextArea.vue
index 4bdab517..c8dd47b2 100644
--- a/src/components/request-task/RequestTaskTextArea.vue
+++ b/src/components/request-task/RequestTaskTextArea.vue
@@ -5,6 +5,7 @@
       class="w-full h-32 border border-border-1 px-4 py-2 resize-none focus:outline-none rounded"
       :value="modelValue"
       :placeholder="placeholderText"
+      :maxlength="500"
       @input="updateValue(($event.target as HTMLInputElement).value)">
     </textarea>
   </div>
diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue
index d85868ef..14bef28f 100644
--- a/src/components/requested/RequestedFilterBar.vue
+++ b/src/components/requested/RequestedFilterBar.vue
@@ -33,11 +33,11 @@ import FilterCategory from '../filters/FilterCategory.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
 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'
 import { storeToRefs } from 'pinia'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
 
 const store = useRequestParamsStore()
 store.$reset()
diff --git a/src/components/requested/RequestedList.vue b/src/components/requested/RequestedList.vue
index fb3724ad..4789e31c 100644
--- a/src/components/requested/RequestedList.vue
+++ b/src/components/requested/RequestedList.vue
@@ -22,19 +22,19 @@
 </template>
 
 <script setup lang="ts">
-import ListPagination from '../lists/ListPagination.vue'
-import ListContainer from '../lists/ListContainer.vue'
-import RequestedListBar from './RequestedListBar.vue'
-import RequestedListCard from './RequestedListCard.vue'
+import { useMemberStore } from '@/stores/member'
 import { useRequestParamsStore } from '@/stores/params'
-import { useParseParams } from '../hooks/useParseParams'
+import type { RequestedResponse } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
-import type { RequestedResponse } from '@/types/manager'
+import ListContainer from '../lists/ListContainer.vue'
+import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
+import RequestedListBar from './RequestedListBar.vue'
+import RequestedListCard from './RequestedListCard.vue'
+import { useParseParams } from '@/hooks/useParseParams'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
diff --git a/src/components/requested/RequestedListBar.vue b/src/components/requested/RequestedListBar.vue
index 848db315..9dbd7fc4 100644
--- a/src/components/requested/RequestedListBar.vue
+++ b/src/components/requested/RequestedListBar.vue
@@ -16,8 +16,8 @@
 import { REQUESTED_LIST_BAR_TAB } from '@/constants/manager'
 import ListBarTab from '../lists/ListBarTab.vue'
 import { useRequestParamsStore } from '@/stores/params'
-import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { computed } from 'vue'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
 
 const { params } = useRequestParamsStore()
 const orderRequest = computed(() => ({
diff --git a/src/components/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue
index 5bda5157..4d31ff8e 100644
--- a/src/components/requested/RequestedListCard.vue
+++ b/src/components/requested/RequestedListCard.vue
@@ -12,6 +12,7 @@
       :is-status="tab.isStatus" />
     <div class="w-[120px] flex gap-2 justify-center items-center shrink-0">
       <button
+        type="button"
         @click.stop="
           userInfo.isReviewer && router.push(`/request-approve?requestId=${info.taskId}`)
         "
@@ -23,6 +24,7 @@
         승인
       </button>
       <button
+        type="button"
         @click.stop="userInfo.isReviewer && toggleModal('reject')"
         :class="
           userInfo.isReviewer
@@ -70,9 +72,9 @@ import { useQueryClient } from '@tanstack/vue-query'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ListCardTab from '../lists/ListCardTab.vue'
-import ModalView from '../ModalView.vue'
 import TaskDetail from '../task-detail/TaskDetail.vue'
 import { useMemberStore } from '@/stores/member'
+import ModalView from '../common/ModalView.vue'
 
 const { info } = defineProps<{ info: RequestedListData }>()
 const requestedTabList: ListCardProps[] = [
diff --git a/src/components/statistics/PeriodButtons.vue b/src/components/statistics/PeriodButtons.vue
index 5cf9bd47..9f7517b9 100644
--- a/src/components/statistics/PeriodButtons.vue
+++ b/src/components/statistics/PeriodButtons.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="text-xs font-bold flex gap-4">
     <button
+      type="button"
       @click="changePeriod('DAY')"
       :class="
         periodType === 'DAY'
@@ -10,6 +11,7 @@
       일간
     </button>
     <button
+      type="button"
       @click="changePeriod('WEEK')"
       :class="
         periodType === 'WEEK'
@@ -19,6 +21,7 @@
       주간
     </button>
     <button
+      type="button"
       @click="changePeriod('MONTH')"
       :class="
         periodType === 'MONTH'
diff --git a/src/components/statistics/StatisticsCard.vue b/src/components/statistics/StatisticsCard.vue
index d83cd7f4..bb7cf8ac 100644
--- a/src/components/statistics/StatisticsCard.vue
+++ b/src/components/statistics/StatisticsCard.vue
@@ -28,8 +28,6 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import PieChart from '../PieChart.vue'
-import LineChart from '../LineChart.vue'
 import PeriodButtons from './PeriodButtons.vue'
 import type { PeriodType } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
@@ -37,6 +35,8 @@ import { useQuery } from '@tanstack/vue-query'
 import type { StatisticsData } from '@/types/admin'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
+import PieChart from '../charts/PieChart.vue'
+import LineChart from '../charts/LineChart.vue'
 
 const { title, statisticsType, chartType } = defineProps<{
   title: string
diff --git a/src/components/statistics/StatisticsCategoryCard.vue b/src/components/statistics/StatisticsCategoryCard.vue
index 7aa46b88..3133d513 100644
--- a/src/components/statistics/StatisticsCategoryCard.vue
+++ b/src/components/statistics/StatisticsCategoryCard.vue
@@ -31,7 +31,6 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import PieChart from '../PieChart.vue'
 import PeriodButtons from './PeriodButtons.vue'
 import type { PeriodType } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
@@ -39,6 +38,7 @@ import { useQuery } from '@tanstack/vue-query'
 import type { StatisticsData } from '@/types/admin'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
+import PieChart from '../charts/PieChart.vue'
 
 const periodType = ref<PeriodType>('DAY')
 const changePeriod = (newPeriodType: PeriodType) => {
diff --git a/src/components/task-board/TaskBoard.vue b/src/components/task-board/TaskBoard.vue
index 326146bf..0dcae960 100644
--- a/src/components/task-board/TaskBoard.vue
+++ b/src/components/task-board/TaskBoard.vue
@@ -98,17 +98,17 @@
 </template>
 
 <script setup lang="ts">
-import draggableComponent from 'vuedraggable'
-import TaskCard from '../TaskCard.vue'
+import { useMemberStore } from '@/stores/member'
+import { useTaskBoardParamsStore } from '@/stores/params'
+import type { Status } from '@/types/common'
 import type { DraggableEvent, TaskCardList } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
-import { useParseParams } from '../hooks/useParseParams'
-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'
+import draggableComponent from 'vuedraggable'
 import { storeToRefs } from 'pinia'
+import { useParseParams } from '@/hooks/useParseParams'
+import TaskCard from '../common/TaskCard.vue'
 
 const queryClient = useQueryClient()
 
@@ -154,7 +154,6 @@ const onListChange = async (event: DraggableEvent, status: Status) => {
       targetTaskId,
       nextTaskId
     }
-    console.log(prevTaskId, targetTaskId, nextTaskId)
     await axiosInstance.patch('/api/task-board', body)
     queryClient.invalidateQueries({ queryKey: ['taskBoard'] })
   }
diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index d3ab9a56..71924963 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -46,7 +46,6 @@ const { closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
-console.log(info, '인포')
 
 const { data } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
@@ -60,6 +59,4 @@ const { data: historyData } = useQuery<TaskDetailHistoryData>({
   queryKey: ['historyData', selectedId],
   queryFn: () => getHistory(selectedId)
 })
-
-console.log(historyData.value, '가져온 히스ㅇ토리', selectedId, '선택된 id')
 </script>
diff --git a/src/components/task-detail/TaskDetailDropdown.vue b/src/components/task-detail/TaskDetailDropdown.vue
index 5e829141..7db88f7d 100644
--- a/src/components/task-detail/TaskDetailDropdown.vue
+++ b/src/components/task-detail/TaskDetailDropdown.vue
@@ -45,10 +45,10 @@
 
 <script lang="ts" setup>
 import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 import type { TaskDetailDropdownProps } from '@/types/user'
 import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
-import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { options, modelValue, processor } = defineProps<TaskDetailDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
diff --git a/src/components/task-detail/TaskDetailHistoryInput.vue b/src/components/task-detail/TaskDetailHistoryInput.vue
index d160af20..59cb71b8 100644
--- a/src/components/task-detail/TaskDetailHistoryInput.vue
+++ b/src/components/task-detail/TaskDetailHistoryInput.vue
@@ -6,10 +6,10 @@
     ]">
     <textarea
       class="w-full h-20 focus:outline-none resize-none"
-      type="text"
       :placeholder="placeHolderText"
       v-model="messageText"
       :disabled="!isPossible"
+      maxlength="254"
       @compositionstart="isComposing = true"
       @compositionend="isComposing = false"
       @keydown.enter.stop.prevent="handleEnterKey"></textarea>
@@ -56,7 +56,8 @@ const isComposing = ref(false)
 
 const isPossible = computed(
   () =>
-    history.length !== 0 && (info.value.role !== 'ROLE_USER' || info.value.role === requestorName)
+    history.length !== 0 &&
+    (info.value.role !== 'ROLE_USER' || info.value.nickname === 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 67f95fbd..c69abc9c 100644
--- a/src/components/task-detail/TaskDetailLabelDropdown.vue
+++ b/src/components/task-detail/TaskDetailLabelDropdown.vue
@@ -29,11 +29,11 @@
 <script lang="ts" setup>
 import { changeLabel, getLabelsManager } from '@/api/user'
 import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 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'])
diff --git a/src/components/task-detail/TaskDetailManagerDropdown.vue b/src/components/task-detail/TaskDetailManagerDropdown.vue
index 725936b9..5f8cf070 100644
--- a/src/components/task-detail/TaskDetailManagerDropdown.vue
+++ b/src/components/task-detail/TaskDetailManagerDropdown.vue
@@ -42,10 +42,10 @@
 <script lang="ts" setup>
 import { getManager } from '@/api/user'
 import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 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 }>()
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 3e76098c..c3c1ab80 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -90,11 +90,11 @@ import type { TaskDetailDatas } from '@/types/user'
 import { formatDate, formatDaysBefore, formatDueDate } from '@/utils/date'
 import { useQueryClient } from '@tanstack/vue-query'
 import { defineProps, ref, watch } from 'vue'
-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'
+import TaskStatus from '../common/TaskStatus.vue'
 
 const { data, isProcessor } = defineProps<{ data: TaskDetailDatas; isProcessor: boolean }>()
 
diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index 9f63ab2f..ea6f429c 100644
--- a/src/components/task-detail/TaskDetailTopBar.vue
+++ b/src/components/task-detail/TaskDetailTopBar.vue
@@ -31,6 +31,7 @@
       </div>
     </div>
     <button
+      type="button"
       @click="closeTaskDetail"
       class="hover:bg-background-2 p-[2px] rounded">
       <CommonIcons :name="closeIcon" />
@@ -46,7 +47,7 @@
     <ModalView
       :is-open="isModalOpen.success"
       type="successType"
-      @close="toggleModal('success')">
+      @close="finishCancel">
       <template #header>요청이 취소되었습니다</template>
     </ModalView>
   </div>
@@ -65,12 +66,16 @@ import type { TaskDetailTopBarProps } from '@/types/manager'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import CommonIcons from '../common/CommonIcons.vue'
-import ModalView from '../ModalView.vue'
 
 const router = useRouter()
 const { isApproved, closeTaskDetail, id, isProcessor, isRequestor } =
   defineProps<TaskDetailTopBarProps>()
 
+import { useQueryClient } from '@tanstack/vue-query'
+import ModalView from '../common/ModalView.vue'
+
+const queryClient = useQueryClient()
+
 const isModalOpen = ref({
   cancel: false,
   success: false
@@ -90,7 +95,16 @@ const cancelTask = async () => {
   toggleModal('success')
 }
 
+const finishCancel = async () => {
+  await queryClient.refetchQueries({
+    queryKey: ['myRequest']
+  })
+
+  toggleModal('success')
+  closeTaskDetail()
+}
+
 const ApproveTask = () => {
-  router.push(`/request-approve/${id}`)
+  router.push(`/request-approve?requestId=${id}`)
 }
 </script>
diff --git a/src/components/task-detail/TaskStatusList.vue b/src/components/task-detail/TaskStatusList.vue
index e0e1a2a2..4b0b1aad 100644
--- a/src/components/task-detail/TaskStatusList.vue
+++ b/src/components/task-detail/TaskStatusList.vue
@@ -44,7 +44,7 @@ import { axiosInstance } from '@/utils/axios'
 import { statusAsColor } from '@/utils/statusAsColor'
 import { useQueryClient } from '@tanstack/vue-query'
 import { ref, watch } from 'vue'
-import ModalView from '../ModalView.vue'
+import ModalView from '../common/ModalView.vue'
 
 const { modelValue, isProcessor, taskId } = defineProps<TaskStatusListProps>()
 const modalError = ref('')
diff --git a/src/components/task-management/CategoryAdd.vue b/src/components/task-management/CategoryAdd.vue
index 31fa98f3..bc75d7dd 100644
--- a/src/components/task-management/CategoryAdd.vue
+++ b/src/components/task-management/CategoryAdd.vue
@@ -20,7 +20,6 @@
       @close="handleFailModal">
       <template #header>카테고리 정보를 확인해주세요</template>
     </ModalView>
-    <!-- 카테고리 목록 API 필요, 임시로 역할로 설정 -->
     <RequestTaskDropdown
       v-model="mainCategory"
       :options="categoryOptions.map(el => el.name)"
@@ -63,12 +62,12 @@ import { CATEGORY_FORM } from '@/constants/admin'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
-import ModalView from '../ModalView.vue'
 import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import RequestTaskInput from '../request-task/RequestTaskInput.vue'
 import { axiosInstance } from '@/utils/axios'
 import { getMainCategory } from '@/api/common'
 import type { Category, CategoryForm } from '@/types/common'
+import ModalView from '../common/ModalView.vue'
 
 const router = useRouter()
 const route = useRoute()
diff --git a/src/components/task-management/CategoryLine.vue b/src/components/task-management/CategoryLine.vue
index 179973f3..eaf18900 100644
--- a/src/components/task-management/CategoryLine.vue
+++ b/src/components/task-management/CategoryLine.vue
@@ -17,11 +17,13 @@
           </div>
           <div class="flex gap-2 text-xs font-bold">
             <button
+              type="button"
               @click="router.push(`/category-first/${main.id}`)"
               class="text-primary1 hover:underline">
               수정
             </button>
             <button
+              type="button"
               @click="openModal(main.id)"
               class="text-red-1 hover:underline">
               삭제
@@ -49,7 +51,7 @@ import { deleteCategoryAdmin } from '@/api/admin'
 import type { CategoryAllData } from '@/types/admin'
 import { defineProps, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import ModalView from '../ModalView.vue'
+import ModalView from '../common/ModalView.vue'
 
 const { categories } = defineProps<CategoryAllData>()
 const router = useRouter()
diff --git a/src/components/task-management/CategoryLineSub.vue b/src/components/task-management/CategoryLineSub.vue
index a968bd52..9c9f34ac 100644
--- a/src/components/task-management/CategoryLineSub.vue
+++ b/src/components/task-management/CategoryLineSub.vue
@@ -15,11 +15,13 @@
           </div>
           <div class="flex gap-2 text-xs font-bold">
             <button
+              type="button"
               @click="router.push(`/category-second/${sub.id}`)"
               class="text-primary1 hover:underline">
               수정
             </button>
             <button
+              type="button"
               @click="openModal(sub.id)"
               class="text-red-1 hover:underline">
               삭제
@@ -52,8 +54,8 @@ import type { CategoryAllData } from '@/types/admin'
 import { useQueryClient } from '@tanstack/vue-query'
 import { defineProps, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import ModalView from '../ModalView.vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import ModalView from '../common/ModalView.vue'
 
 const { categories } = defineProps<CategoryAllData>()
 const router = useRouter()
diff --git a/src/components/task-management/LabelManagement.vue b/src/components/task-management/LabelManagement.vue
index 88736949..0c0839b6 100644
--- a/src/components/task-management/LabelManagement.vue
+++ b/src/components/task-management/LabelManagement.vue
@@ -41,11 +41,13 @@
         </div>
         <div class="flex gap-2 text-xs font-bold">
           <button
+            type="button"
             @click="addNewLabel"
             class="text-primary1 w-[21px]">
             확인
           </button>
           <button
+            type="button"
             @click="handleAdd"
             class="text-disabled w-[21px]">
             취소
diff --git a/src/components/task-management/LabelManagementLine.vue b/src/components/task-management/LabelManagementLine.vue
index e7edf148..70a8646e 100644
--- a/src/components/task-management/LabelManagementLine.vue
+++ b/src/components/task-management/LabelManagementLine.vue
@@ -32,11 +32,13 @@
         </div>
         <div class="flex gap-2 text-xs font-bold">
           <button
+            type="button"
             @click="isEdit && editValue.labelId === label.labelId ? finishEdit() : startEdit(label)"
             class="text-primary1 w-[21px] hover:underline">
             {{ isEdit && editValue.labelId === label.labelId ? '확인' : '수정' }}
           </button>
           <button
+            type="button"
             @click="
               isEdit && editValue.labelId === label.labelId
                 ? handleEdit()
@@ -68,8 +70,8 @@ import { deleteLabelAdmin, patchLabelAdmin } from '@/api/admin'
 import type { LabelColorTypes, LabelDataTypes } from '@/types/common'
 import { getColor } from '@/utils/color'
 import { defineProps, ref } from 'vue'
-import ModalView from '../ModalView.vue'
 import ColorSelectModal from './ColorSelectModal.vue'
+import ModalView from '../common/ModalView.vue'
 
 const { labelData } = defineProps<{ labelData: LabelDataTypes[] }>()
 
diff --git a/src/components/team-board/CurrentTaskRatio.vue b/src/components/team-board/CurrentTaskRatio.vue
index 435d4b50..aa38a4ed 100644
--- a/src/components/team-board/CurrentTaskRatio.vue
+++ b/src/components/team-board/CurrentTaskRatio.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import PieChart from '../PieChart.vue'
+import PieChart from '../charts/PieChart.vue'
 
 const { teamSummary, teamData } = defineProps<{
   teamSummary: {
diff --git a/src/components/team-board/TeamBoard.vue b/src/components/team-board/TeamBoard.vue
index 12b2b155..5a02088d 100644
--- a/src/components/team-board/TeamBoard.vue
+++ b/src/components/team-board/TeamBoard.vue
@@ -21,19 +21,19 @@ import CurrentTaskRatio from './CurrentTaskRatio.vue'
 import { axiosInstance } from '@/utils/axios'
 import { useTeamBoardParamsStore } from '@/stores/params'
 import { useQuery } from '@tanstack/vue-query'
-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'
 import { storeToRefs } from 'pinia'
+import { useParseParams } from '@/hooks/useParseParams'
 
 const { params } = useTeamBoardParamsStore()
 
 const fetchTeamStatus = async () => {
   const { parseBoardParams } = useParseParams()
   const parsedParams = parseBoardParams(params)
-  const response = await axiosInstance.get('/api/team-status/filter', { params: parsedParams })
+  const response = await axiosInstance.get('/api/team-status', { params: parsedParams })
   return response.data
 }
 const memberStore = useMemberStore()
diff --git a/src/components/team-board/TeamBoardCard.vue b/src/components/team-board/TeamBoardCard.vue
index ca7d9986..be667866 100644
--- a/src/components/team-board/TeamBoardCard.vue
+++ b/src/components/team-board/TeamBoardCard.vue
@@ -29,8 +29,8 @@
 
 <script setup lang="ts">
 import type { TeamBoardCardProps } from '@/types/manager'
-import TaskCard from '../TaskCard.vue'
 import ImageContainer from '../common/ImageContainer.vue'
+import TaskCard from '../common/TaskCard.vue'
 
 const { info } = defineProps<{ info: TeamBoardCardProps }>()
 </script>
diff --git a/src/components/team-board/TeamBoardFilterBar.vue b/src/components/team-board/TeamBoardFilterBar.vue
index 5011517e..9f8ccff2 100644
--- a/src/components/team-board/TeamBoardFilterBar.vue
+++ b/src/components/team-board/TeamBoardFilterBar.vue
@@ -27,10 +27,10 @@ import { useQuery } from '@tanstack/vue-query'
 import FilterCategory from '../filters/FilterCategory.vue'
 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'
 import { storeToRefs } from 'pinia'
+import { useTeamBoardParamsChange } from '@/hooks/useTeamBoardParamsChange'
 
 const { params } = useTeamBoardParamsStore()
 
diff --git a/src/components/top-bar/NotificationModal.vue b/src/components/top-bar/NotificationModal.vue
index 7edd046e..fb532c25 100644
--- a/src/components/top-bar/NotificationModal.vue
+++ b/src/components/top-bar/NotificationModal.vue
@@ -7,12 +7,14 @@
       <p class="text-body font-bold text-xs">알림</p>
       <div class="flex items-center gap-2">
         <button
+          type="button"
           @click="readAllNotifi"
           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
+          type="button"
           class="hover:bg-background-2 rounded"
           @click="closeModal">
           <CommonIcons :name="closeIcon" />
@@ -43,14 +45,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { getNotification, patchNotificationRead } from '@/api/common'
+import { closeIcon, smallCheckIcon } from '@/constants/iconPath'
+import type { NotificationContent } from '@/types/common'
+import { axiosInstance } from '@/utils/axios'
 import InfiniteLoading from 'v3-infinite-loading'
 import 'v3-infinite-loading/lib/style.css'
+import { ref } from 'vue'
 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 { isOpen } = defineProps<{
diff --git a/src/components/top-bar/ProfileModal.vue b/src/components/top-bar/ProfileModal.vue
index 82de3e14..3ed586a2 100644
--- a/src/components/top-bar/ProfileModal.vue
+++ b/src/components/top-bar/ProfileModal.vue
@@ -40,14 +40,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import { deleteLogout } from '@/api/auth'
-import ModalView from '../ModalView.vue'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import ImageContainer from '../common/ImageContainer.vue'
+import ModalView from '../common/ModalView.vue'
 
 const isModalVisible = ref(false)
 
diff --git a/src/components/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue
index 14e19132..93b8cc2c 100644
--- a/src/components/top-bar/TopBar.vue
+++ b/src/components/top-bar/TopBar.vue
@@ -62,8 +62,8 @@ 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'
 import ImageContainer from '../common/ImageContainer.vue'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 const memberStore = useMemberStore()
 const { isLogined, info } = storeToRefs(memberStore)
diff --git a/src/components/user-manage/UserRegistration.vue b/src/components/user-manage/UserRegistration.vue
index 2b01daf1..88f9674c 100644
--- a/src/components/user-manage/UserRegistration.vue
+++ b/src/components/user-manage/UserRegistration.vue
@@ -59,10 +59,10 @@ import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
 import FormCheckbox from '../common/FormCheckbox.vue'
-import ModalView from '../ModalView.vue'
 import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import RequestTaskInput from '../request-task/RequestTaskInput.vue'
 import DepartmentDropDown from './DepartmentDropDown.vue'
+import ModalView from '../common/ModalView.vue'
 
 const router = useRouter()
 const isModalVisible = ref(false)
diff --git a/src/components/user-manage/UserUpdate.vue b/src/components/user-manage/UserUpdate.vue
index 165f7c2c..0619016a 100644
--- a/src/components/user-manage/UserUpdate.vue
+++ b/src/components/user-manage/UserUpdate.vue
@@ -67,10 +67,10 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
 import FormCheckbox from '../common/FormCheckbox.vue'
-import ModalView from '../ModalView.vue'
 import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import RequestTaskInput from '../request-task/RequestTaskInput.vue'
 import DepartmentDropDown from './DepartmentDropDown.vue'
+import ModalView from '../common/ModalView.vue'
 
 const route = useRoute()
 const router = useRouter()
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index 94033cb7..1f7aa37a 100644
--- a/src/constants/admin.ts
+++ b/src/constants/admin.ts
@@ -22,7 +22,7 @@ export const API_LOGS_DIVISION_LIST: Option[] = [
   { content: '요청 수정', value: 'REQUEST_UPDATED' },
   { content: '요청 취소', value: 'REQUEST_CANCELLED' },
   { content: '요청 승인', value: 'REQUEST_APPROVED' },
-  { content: '처리자 변경', value: 'ASSIGNER_CHANGED' },
+  { content: '담당자 변경', value: 'ASSIGNER_CHANGED' },
   { content: '댓글 추가', value: 'COMMENT_ADDED' },
   { content: '댓글 수정', value: 'COMMENT_UPDATED' },
   { content: '작업 상태 변경', value: 'STATUS_CHANGED' },
@@ -69,3 +69,6 @@ export const RoleMapping: { [key in RoleTypesEnum]: RoleTypes } = {
 }
 
 export const RoleKeys: RoleTypes[] = Object.keys(RoleTypeMapping) as RoleTypes[]
+
+export const csvPath =
+  'https://objectstorage.kr-central-2.kakaocloud.com/v1/34481374c1ee4bbb8745df43e4c13fff/taskflow/example/member_form_example.csv'
diff --git a/src/constants/iconPath.ts b/src/constants/iconPath.ts
index 0533515c..0fd2fcb6 100644
--- a/src/constants/iconPath.ts
+++ b/src/constants/iconPath.ts
@@ -18,22 +18,6 @@ export const hamburgerIcon = {
   }
 }
 
-export const notificationIcon = {
-  path: [
-    'M5.74669 9.95C5.99914 7.67237 7.08274 5.56786 8.79006 4.03933C10.4974 2.51079 12.7084 1.66563 15 1.66563C17.2916 1.66563 19.5027 2.51079 21.21 4.03933C22.9173 5.56786 24.0009 7.67237 24.2534 9.95L24.6734 13.7267L24.6834 13.8217C24.8985 15.695 25.5086 17.5015 26.4734 19.1217L26.5234 19.205L27.485 20.81C28.36 22.2667 28.7967 22.995 28.7017 23.5933C28.6389 23.9905 28.4347 24.3516 28.1267 24.61C27.6617 25 26.8117 25 25.1134 25H4.88669C3.18669 25 2.33669 25 1.87336 24.6117C1.56437 24.3531 1.35951 23.9913 1.29669 23.5933C1.20336 22.995 1.64003 22.2667 2.51336 20.81L3.47836 19.2033L3.52836 19.12C4.49229 17.5002 5.1018 15.6943 5.31669 13.8217L5.32669 13.7267L5.74669 9.95Z',
-    'M10.17 25.6767C10.455 26.9167 11.0834 28.0133 11.9567 28.7933C12.83 29.5767 13.9 30 15 30C16.1 30 17.17 29.5767 18.0434 28.795C18.9167 28.0117 19.5434 26.9167 19.83 25.6767'
-  ],
-  width: 30,
-  height: 31,
-  fill: 'none',
-  options: {
-    stroke: '#71717A',
-    'stroke-width': 1.66667,
-    'stroke-linecap': 'round' as const,
-    'stroke-linejoin': 'round' as const
-  }
-}
-
 export const bentoIcon = {
   path: 'M0.5 1.125C0.5 0.977263 0.529099 0.830972 0.585635 0.694481C0.642172 0.55799 0.725039 0.433971 0.829505 0.329505C0.933971 0.225039 1.05799 0.142172 1.19448 0.0856354C1.33097 0.0290989 1.47726 0 1.625 0C1.77274 0 1.91903 0.0290989 2.05552 0.0856354C2.19201 0.142172 2.31603 0.225039 2.4205 0.329505C2.52496 0.433971 2.60783 0.55799 2.66436 0.694481C2.7209 0.830972 2.75 0.977263 2.75 1.125C2.75 1.42337 2.63147 1.70952 2.4205 1.9205C2.20952 2.13147 1.92337 2.25 1.625 2.25C1.32663 2.25 1.04048 2.13147 0.829505 1.9205C0.618526 1.70952 0.5 1.42337 0.5 1.125ZM5.75 1.125C5.75 0.826631 5.86853 0.540483 6.07951 0.329505C6.29048 0.118526 6.57663 0 6.875 0C7.17337 0 7.45952 0.118526 7.67049 0.329505C7.88147 0.540483 8 0.826631 8 1.125C8 1.42337 7.88147 1.70952 7.67049 1.9205C7.45952 2.13147 7.17337 2.25 6.875 2.25C6.57663 2.25 6.29048 2.13147 6.07951 1.9205C5.86853 1.70952 5.75 1.42337 5.75 1.125ZM0.5 5.9925C0.5 5.84476 0.529099 5.69847 0.585635 5.56198C0.642172 5.42549 0.725039 5.30147 0.829505 5.197C0.933971 5.09254 1.05799 5.00967 1.19448 4.95314C1.33097 4.8966 1.47726 4.8675 1.625 4.8675C1.77274 4.8675 1.91903 4.8966 2.05552 4.95314C2.19201 5.00967 2.31603 5.09254 2.4205 5.197C2.52496 5.30147 2.60783 5.42549 2.66436 5.56198C2.7209 5.69847 2.75 5.84476 2.75 5.9925C2.75 6.29087 2.63147 6.57702 2.4205 6.788C2.20952 6.99897 1.92337 7.1175 1.625 7.1175C1.32663 7.1175 1.04048 6.99897 0.829505 6.788C0.618526 6.57702 0.5 6.29087 0.5 5.9925ZM5.75 5.9925C5.75 5.69413 5.86853 5.40798 6.07951 5.197C6.29048 4.98603 6.57663 4.8675 6.875 4.8675C7.17337 4.8675 7.45952 4.98603 7.67049 5.197C7.88147 5.40798 8 5.69413 8 5.9925C8 6.29087 7.88147 6.57702 7.67049 6.788C7.45952 6.99897 7.17337 7.1175 6.875 7.1175C6.57663 7.1175 6.29048 6.99897 6.07951 6.788C5.86853 6.57702 5.75 6.29087 5.75 5.9925ZM0.5 10.875C0.5 10.7273 0.529099 10.581 0.585635 10.4445C0.642172 10.308 0.725039 10.184 0.829505 10.0795C0.933971 9.97504 1.05799 9.89217 1.19448 9.83564C1.33097 9.7791 1.47726 9.75 1.625 9.75C1.77274 9.75 1.91903 9.7791 2.05552 9.83564C2.19201 9.89217 2.31603 9.97504 2.4205 10.0795C2.52496 10.184 2.60783 10.308 2.66436 10.4445C2.7209 10.581 2.75 10.7273 2.75 10.875C2.75 11.1734 2.63147 11.4595 2.4205 11.6705C2.20952 11.8815 1.92337 12 1.625 12C1.32663 12 1.04048 11.8815 0.829505 11.6705C0.618526 11.4595 0.5 11.1734 0.5 10.875ZM5.75 10.875C5.75 10.5766 5.86853 10.2905 6.07951 10.0795C6.29048 9.86853 6.57663 9.75 6.875 9.75C7.17337 9.75 7.45952 9.86853 7.67049 10.0795C7.88147 10.2905 8 10.5766 8 10.875C8 11.1734 7.88147 11.4595 7.67049 11.6705C7.45952 11.8815 7.17337 12 6.875 12C6.57663 12 6.29048 11.8815 6.07951 11.6705C5.86853 11.4595 5.75 11.1734 5.75 10.875Z',
   width: 8,
@@ -90,35 +74,6 @@ export const plusIcon = {
   fill: '#A1A1AA'
 }
 
-export const calendarIcon = {
-  path: 'M10.875 12.375H12.375V17.25M3.75 9H20.25M15.75 6V3M8.25 6V3M5.25 21H18.75C19.1478 21 19.5294 20.842 19.8107 20.5607C20.092 20.2794 20.25 19.8978 20.25 19.5V6C20.25 5.60218 20.092 5.22064 19.8107 4.93934C19.5294 4.65804 19.1478 4.5 18.75 4.5H5.25C4.85218 4.5 4.47064 4.65804 4.18934 4.93934C3.90804 5.22064 3.75 5.60218 3.75 6V19.5C3.75 19.8978 3.90804 20.2794 4.18934 20.5607C4.47064 20.842 4.85218 21 5.25 21Z',
-  width: 24,
-  height: 24,
-  fill: 'none',
-  options: {
-    stroke: '#18181B',
-    'stroke-width': 1.5,
-    'stroke-linecap': 'round' as const,
-    'stroke-linejoin': 'round' as const
-  }
-}
-
-export const clockIcon = {
-  path: [
-    'M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z',
-    'M11 8V13H16'
-  ],
-  width: 24,
-  height: 24,
-  fill: 'none',
-  options: {
-    stroke: '#18181B',
-    'stroke-width': 1.5,
-    'stroke-linecap': 'round' as const,
-    'stroke-linejoin': 'round' as const
-  }
-}
-
 export const closeIcon = {
   path: 'M12 13.3998L7.10005 18.2998C6.91672 18.4831 6.68338 18.5748 6.40005 18.5748C6.11672 18.5748 5.88338 18.4831 5.70005 18.2998C5.51672 18.1165 5.42505 17.8831 5.42505 17.5998C5.42505 17.3165 5.51672 17.0831 5.70005 16.8998L10.6 11.9998L5.70005 7.0998C5.51672 6.91647 5.42505 6.68314 5.42505 6.3998C5.42505 6.11647 5.51672 5.88314 5.70005 5.6998C5.88338 5.51647 6.11672 5.4248 6.40005 5.4248C6.68338 5.4248 6.91672 5.51647 7.10005 5.6998L12 10.5998L16.9 5.6998C17.0834 5.51647 17.3167 5.4248 17.6 5.4248C17.8834 5.4248 18.1167 5.51647 18.3 5.6998C18.4834 5.88314 18.575 6.11647 18.575 6.3998C18.575 6.68314 18.4834 6.91647 18.3 7.0998L13.4 11.9998L18.3 16.8998C18.4834 17.0831 18.575 17.3165 18.575 17.5998C18.575 17.8831 18.4834 18.1165 18.3 18.2998C18.1167 18.4831 17.8834 18.5748 17.6 18.5748C17.3167 18.5748 17.0834 18.4831 16.9 18.2998L12 13.3998Z',
   width: 24,
diff --git a/src/constants/manager.ts b/src/constants/manager.ts
index cfb3c1da..9ca7cd74 100644
--- a/src/constants/manager.ts
+++ b/src/constants/manager.ts
@@ -17,7 +17,7 @@ export const REQUEST_HISTORY_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '2차 카테고리', width: 80 },
   { content: '제목' },
   { content: '요청자', width: 120 },
-  { content: '처리자', width: 120 },
+  { content: '담당자', width: 120 },
   { content: '상태', width: 64 },
   { content: '종료일', width: 80, sortBy: 'FINISHED_AT' }
 ]
diff --git a/src/constants/user.ts b/src/constants/user.ts
index 28442bda..c599a706 100644
--- a/src/constants/user.ts
+++ b/src/constants/user.ts
@@ -1,6 +1,5 @@
-import type { TaskHistoryType } from '@/types/user'
-
 import type { ListBarTabProps } from '@/types/common'
+import type { TaskHistoryType } from '@/types/user'
 
 export const MY_REQUEST_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '고유코드', width: 120 },
@@ -8,7 +7,7 @@ export const MY_REQUEST_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '1차 카테고리', width: 80 },
   { content: '2차 카테고리', width: 80 },
   { content: '제목' },
-  { content: '처리자', width: 120 },
+  { content: '담당자', width: 120 },
   { content: '상태', width: 64 },
   { content: '종료일', width: 80, sortBy: 'FINISHED_AT' }
 ]
@@ -24,10 +23,10 @@ export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [
 
 export const HistoryMessageBefore: Record<TaskHistoryType, string> = {
   STATUS_SWITCHED: '요청이',
-  PROCESSOR_CHANGED: '처리자가',
+  PROCESSOR_CHANGED: '담당자가',
   COMMENT: '',
   COMMENT_FILE: '',
-  PROCESSOR_ASSIGNED: '처리자가',
+  PROCESSOR_ASSIGNED: '담당자가',
   TASK_TERMINATED: '작업이'
 }
 
diff --git a/src/datas/dummy.ts b/src/datas/dummy.ts
deleted file mode 100644
index 33376b86..00000000
--- a/src/datas/dummy.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-export const DUMMY_TEAM_MEMBERS_LIST = [
-  {
-    name: 'Tony.tsx',
-    department: '기획팀',
-    taskStatusSummary: {
-      inProgress: 5,
-      pendingCompletion: 3,
-      totalTasks: 8
-    },
-    tasks: [
-      {
-        taskId: 1,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      },
-
-      {
-        taskId: 2,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      }
-    ]
-  },
-  {
-    name: 'Hello.world',
-    department: '개발팀',
-    taskStatusSummary: {
-      inProgress: 3,
-      pendingCompletion: 2,
-      totalTasks: 5
-    },
-    tasks: [
-      {
-        taskId: 3,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      },
-
-      {
-        taskId: 4,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      }
-    ]
-  },
-  {
-    name: 'John.doe',
-    department: '기획팀',
-    taskStatusSummary: {
-      inProgress: 5,
-      pendingCompletion: 3,
-      totalTasks: 8
-    },
-    tasks: [
-      {
-        taskId: 1,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      },
-
-      {
-        taskId: 2,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      }
-    ]
-  },
-  {
-    name: 'Jane.doe',
-    department: '개발팀',
-    taskStatusSummary: {
-      inProgress: 3,
-      pendingCompletion: 2,
-      totalTasks: 5
-    },
-    tasks: [
-      {
-        taskId: 3,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      },
-
-      {
-        taskId: 4,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      }
-    ]
-  },
-  {
-    name: 'atom.park',
-    department: '기획팀',
-    taskStatusSummary: {
-      inProgress: 5,
-      pendingCompletion: 3,
-      totalTasks: 8
-    },
-    tasks: [
-      {
-        taskId: 1,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      },
-
-      {
-        taskId: 2,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      }
-    ]
-  },
-  {
-    name: 'kim.lee',
-    department: '개발팀',
-    taskStatusSummary: {
-      inProgress: 3,
-      pendingCompletion: 2,
-      totalTasks: 5
-    },
-    tasks: [
-      {
-        taskId: 3,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      },
-
-      {
-        taskId: 4,
-        taskCode: 'string',
-        mainCategoryName: 'string',
-        categoryName: 'string',
-        title: 'string',
-        requesterNickName: 'string',
-        requesterImageUrl: 'string',
-        requesterDepartment: 'string',
-        processorOrder: 0,
-        taskStatus: '진행 중',
-        createdAt: '2025-01-28T09:34:00.128Z'
-      }
-    ]
-  }
-]
-
-export const DUMMY_DIVISION_LIST = [
-  { value: '', content: '전체' },
-  { value: '‼️ 긴급', content: '‼️ 긴급' },
-  { value: '❌ 오류', content: '❌ 오류' },
-  { value: '🕑 정기', content: '🕑 정기' }
-]
diff --git a/src/components/hooks/useLogsParamsChange.ts b/src/hooks/useLogsParamsChange.ts
similarity index 100%
rename from src/components/hooks/useLogsParamsChange.ts
rename to src/hooks/useLogsParamsChange.ts
diff --git a/src/components/hooks/useOutsideClick.ts b/src/hooks/useOutsideClick.ts
similarity index 100%
rename from src/components/hooks/useOutsideClick.ts
rename to src/hooks/useOutsideClick.ts
diff --git a/src/components/hooks/useParseParams.ts b/src/hooks/useParseParams.ts
similarity index 100%
rename from src/components/hooks/useParseParams.ts
rename to src/hooks/useParseParams.ts
diff --git a/src/components/hooks/useRequestParamsChange.ts b/src/hooks/useRequestParamsChange.ts
similarity index 100%
rename from src/components/hooks/useRequestParamsChange.ts
rename to src/hooks/useRequestParamsChange.ts
diff --git a/src/components/hooks/useTeamBoardParamsChange.ts b/src/hooks/useTeamBoardParamsChange.ts
similarity index 100%
rename from src/components/hooks/useTeamBoardParamsChange.ts
rename to src/hooks/useTeamBoardParamsChange.ts
diff --git a/src/layout/TheView.vue b/src/layout/TheView.vue
index a378a855..087e4e37 100644
--- a/src/layout/TheView.vue
+++ b/src/layout/TheView.vue
@@ -17,7 +17,7 @@ import { useRoute } from 'vue-router'
 import TaskDetail from '@/components/task-detail/TaskDetail.vue'
 
 const route = useRoute()
-const selectedID = ref(route.query.taskId || null)
+const selectedID = ref(route.query?.taskId || null)
 
 watch(
   () => route.query.taskId,
diff --git a/src/router/index.ts b/src/router/index.ts
index 26425524..c70468ff 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,5 @@
-import { createRouter, createWebHistory } from 'vue-router'
 import Cookies from 'js-cookie'
+import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,7 +12,7 @@ const router = createRouter({
     {
       path: '/pw-change',
       name: 'PwChange',
-      component: () => import('../views/PwChange.vue')
+      component: () => import('../views/PwChangeView.vue')
     },
     {
       path: '/pw-change-email',
@@ -23,7 +23,7 @@ const router = createRouter({
     {
       path: '/pw-check',
       name: 'PWCheckView',
-      component: () => import('../views/PwCheck.vue'),
+      component: () => import('../views/PwCheckView.vue'),
       meta: { requiresAuth: true }
     },
     {
@@ -44,7 +44,7 @@ const router = createRouter({
     {
       path: '/request-history',
       name: 'RequestHistory',
-      component: () => import('../views/RequestHistory.vue')
+      component: () => import('../views/RequestHistoryView.vue')
     },
     {
       path: '/task-board',
@@ -55,29 +55,29 @@ const router = createRouter({
     {
       path: '/member-management',
       name: 'MemberManagement',
-      component: () => import('../views/MemberManagement.vue')
+      component: () => import('../views/MemberManagementView.vue')
     },
     {
       path: '/category-first',
       name: 'CategoryFirst',
-      component: () => import('../views/CategoryFirstAdd.vue'),
+      component: () => import('../views/CategoryFirstAddView.vue'),
       children: [
         {
           path: ':id',
           name: 'EditSubCategory',
-          component: () => import('../views/CategoryFirstAdd.vue')
+          component: () => import('../views/CategoryFirstAddView.vue')
         }
       ]
     },
     {
       path: '/category-second',
       name: 'CategorySecond',
-      component: () => import('../views/CategorySecondAdd.vue'),
+      component: () => import('../views/CategorySecondAddView.vue'),
       children: [
         {
           path: ':id',
           name: 'EditMainCategory',
-          component: () => import('../views/CategorySecondAdd.vue')
+          component: () => import('../views/CategorySecondAddView.vue')
         }
       ]
     },
diff --git a/src/types/user.ts b/src/types/user.ts
index 82350959..b3b59fbf 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -120,7 +120,6 @@ export interface CommentFileDetails {
 export interface TaskDetailProps {
   selectedId: number
   closeTaskDetail: () => void
-  isApproved?: boolean
 }
 export interface ManagerInfoTypes {
   nickName: string
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 269f5ef1..1eaafa03 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -20,7 +20,8 @@ export const formatDateWithDay = (dateString: string) => {
 }
 
 export const convertToISO = (dateStr: string, timeStr: string) => {
-  if (dateStr === '' || timeStr === '') return null
+  if (dateStr === '') return null
+  if (!timeStr) timeStr = '00:00'
   const date = new Date(`${dateStr}T${timeStr}:00`)
   return date.toISOString()
 }
@@ -41,14 +42,16 @@ export const formatDaysBefore = (dateString: string) => {
   const date = new Date(dateString)
   const today = new Date()
 
-  const koreaOffset = 9 * 60 * 60 * 1000
-  const koreaDate = new Date(date.getTime() + koreaOffset)
-  const koreaToday = new Date(today.getTime() + koreaOffset)
-
-  const diffTime = koreaDate.getTime() - koreaToday.getTime()
+  const diffTime = today.getTime() - date.getTime()
   const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
 
-  return `${diffDays}일 남음`
+  if (diffDays > 0) {
+    return `${diffDays}일 초과`
+  } else if (diffDays === 0) {
+    return '오늘 마감'
+  } else {
+    return `${Math.abs(diffDays)}일 남음`
+  }
 }
 export const formatTodayOrNot = (dateStr: string, timeStr: string) => {
   const inputDate = new Date(`${dateStr}T${timeStr}`)
diff --git a/src/utils/getNotification.ts b/src/utils/getNotification.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/ApiLogsView.vue b/src/views/ApiLogsView.vue
index e0f32eb5..5e31d9db 100644
--- a/src/views/ApiLogsView.vue
+++ b/src/views/ApiLogsView.vue
@@ -11,5 +11,5 @@
 <script setup lang="ts">
 import ApiLogsFilterBar from '@/components/api-logs/ApiLogsFilterBar.vue'
 import ApiLogsList from '@/components/api-logs/ApiLogsList.vue'
-import TitleBar from '@/components/TitleBar.vue'
+import TitleBar from '@/components/common/TitleBar.vue'
 </script>
diff --git a/src/views/CategoryFirstAdd.vue b/src/views/CategoryFirstAddView.vue
similarity index 84%
rename from src/views/CategoryFirstAdd.vue
rename to src/views/CategoryFirstAddView.vue
index a0c0c1ec..1e40776e 100644
--- a/src/views/CategoryFirstAdd.vue
+++ b/src/views/CategoryFirstAddView.vue
@@ -6,6 +6,6 @@
 </template>
 
 <script setup lang="ts">
-import TitleBar from '@/components/TitleBar.vue'
+import TitleBar from '@/components/common/TitleBar.vue'
 import CategoryAdd from '../components/task-management/CategoryAdd.vue'
 </script>
diff --git a/src/views/CategorySecondAdd.vue b/src/views/CategorySecondAddView.vue
similarity index 85%
rename from src/views/CategorySecondAdd.vue
rename to src/views/CategorySecondAddView.vue
index cdea7edf..f2949fe9 100644
--- a/src/views/CategorySecondAdd.vue
+++ b/src/views/CategorySecondAddView.vue
@@ -7,6 +7,6 @@
 </template>
 
 <script setup lang="ts">
-import TitleBar from '@/components/TitleBar.vue'
+import TitleBar from '@/components/common/TitleBar.vue'
 import CategoryAdd from '../components/task-management/CategoryAdd.vue'
 </script>
diff --git a/src/views/EditInformationView.vue b/src/views/EditInformationView.vue
index 08e21859..255e1e0f 100644
--- a/src/views/EditInformationView.vue
+++ b/src/views/EditInformationView.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script setup lang="ts">
-import TitleBar from '@/components/TitleBar.vue'
-import EditInformation from '../components/EditInformation.vue'
+import EditInformation from '@/components/common/EditInformation.vue'
+import TitleBar from '@/components/common/TitleBar.vue'
 </script>
 
 <style scoped></style>
diff --git a/src/views/LoginLogsView.vue b/src/views/LoginLogsView.vue
index ac076e1a..9b84a234 100644
--- a/src/views/LoginLogsView.vue
+++ b/src/views/LoginLogsView.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
+import TitleBar from '@/components/common/TitleBar.vue'
 import LoginLogsFilterBar from '@/components/login-logs/LoginLogsFilterBar.vue'
 import LoginLogsList from '@/components/login-logs/LoginLogsList.vue'
-import TitleBar from '@/components/TitleBar.vue'
 </script>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 2a687513..02cf29cd 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -50,13 +50,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import { postLogin } from '@/api/auth'
-import { useMemberStore } from '@/stores/member'
+import ModalView from '@/components/common/ModalView.vue'
 import TitleContainer from '@/components/common/TitleContainer.vue'
+import { useMemberStore } from '@/stores/member'
+import axios from 'axios'
 import Cookies from 'js-cookie'
-import ModalView from '@/components/ModalView.vue'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 const router = useRouter()
 
@@ -100,18 +101,20 @@ const handleLogin = async () => {
       }
     }
   } catch (error) {
-    switch (error?.response?.status) {
-      case 401:
-        isModalVisible.value = !isModalVisible.value
-        messageHeader.value = '일치하는 정보가 없습니다'
-        messageBody.value = '닉네임과 비밀번호를 다시 확인해 주세요'
-        break
+    if (axios.isAxiosError(error)) {
+      switch (error.response?.status) {
+        case 401:
+          isModalVisible.value = !isModalVisible.value
+          messageHeader.value = '일치하는 정보가 없습니다'
+          messageBody.value = '닉네임과 비밀번호를 다시 확인해 주세요'
+          break
 
-      case 500:
-        isModalVisible.value = !isModalVisible.value
-        messageHeader.value = '서버에 문제가 발생했습니다'
-        messageBody.value = '잠시후 다시 이용해주세요'
-        break
+        case 500:
+          isModalVisible.value = !isModalVisible.value
+          messageHeader.value = '서버에 문제가 발생했습니다'
+          messageBody.value = '잠시후 다시 이용해주세요'
+          break
+      }
     }
   }
 }
diff --git a/src/views/MemberManagement.vue b/src/views/MemberManagementView.vue
similarity index 61%
rename from src/views/MemberManagement.vue
rename to src/views/MemberManagementView.vue
index 8b33d3dd..16537939 100644
--- a/src/views/MemberManagement.vue
+++ b/src/views/MemberManagementView.vue
@@ -2,15 +2,20 @@
   <div class="list-view">
     <TitleBar title="회원 관리">
       <template #button>
-        <MemberManagementAddByCsv />
         <button
-          class="flex items-center gap-1 text-xs font-bold text-primary1"
+          type="button"
+          class="flex py-1 px-2 rounded hover:bg-background-2 items-center gap-1 text-xs font-bold text-primary1"
           @click="createNewMember">
-          <CommonIcons
-            :name="plusIcon"
-            :style="{ fill: '#7879EB' }" />
           새 회원 추가
         </button>
+        <MemberManagementAddByCsv />
+        <a
+          :href="csvPath"
+          class="flex py-1 px-2 rounded hover:bg-background-2 items-center gap-1 text-xs font-bold text-primary1"
+          download>
+          <CommonIcons :name="downloadIcon" />
+          일괄추가 파일양식
+        </a>
       </template>
     </TitleBar>
 
@@ -22,11 +27,12 @@
 
 <script setup lang="ts">
 import CommonIcons from '@/components/common/CommonIcons.vue'
+import TitleBar from '@/components/common/TitleBar.vue'
 import MemberManagementAddByCsv from '@/components/member-management/MemberManagementAddByCsv.vue'
 import MemberManagementFilterBar from '@/components/member-management/MemberManagementFilterBar.vue'
 import MemberManagementList from '@/components/member-management/MemberManagementList.vue'
-import TitleBar from '@/components/TitleBar.vue'
-import { plusIcon } from '@/constants/iconPath'
+import { csvPath } from '@/constants/admin'
+import { downloadIcon } from '@/constants/iconPath'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
diff --git a/src/views/MyRequestView.vue b/src/views/MyRequestView.vue
index fdabdbd1..2d3b50cb 100644
--- a/src/views/MyRequestView.vue
+++ b/src/views/MyRequestView.vue
@@ -3,7 +3,8 @@
     <TitleBar title="내 요청">
       <template #button>
         <button
-          class="flex items-center gap-1 text-xs font-bold text-primary1"
+          type="button"
+          class="flex items-center gap-1 py-1 px-2 rounded hover:bg-background-2 text-xs font-bold text-primary1"
           @click="createNewRequest">
           <CommonIcons
             :name="plusIcon"
@@ -21,9 +22,9 @@
 
 <script setup lang="ts">
 import CommonIcons from '@/components/common/CommonIcons.vue'
+import TitleBar from '@/components/common/TitleBar.vue'
 import MyRequestFilterBar from '@/components/my-request/MyRequestFilterBar.vue'
 import MyRequestList from '@/components/my-request/MyRequestList.vue'
-import TitleBar from '@/components/TitleBar.vue'
 import { plusIcon } from '@/constants/iconPath'
 import { useRouter } from 'vue-router'
 
diff --git a/src/views/MyTaskView.vue b/src/views/MyTaskView.vue
index d97b7b7d..e13f7549 100644
--- a/src/views/MyTaskView.vue
+++ b/src/views/MyTaskView.vue
@@ -9,9 +9,9 @@
 </template>
 
 <script setup lang="ts">
+import TitleBar from '@/components/common/TitleBar.vue'
 import MyTaskFilterBar from '@/components/my-task/MyTaskFilterBar.vue'
 import MyTaskList from '@/components/my-task/MyTaskList.vue'
-import TitleBar from '@/components/TitleBar.vue'
 </script>
 
 <style scoped></style>
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index ec74d8fd..2a3c671a 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -4,6 +4,7 @@
       title="404 Error"
       :content="'요청하신 페이지는\n없는 페이지입니다'" />
     <button
+      type="button"
       class="button-large-primary"
       @click="router.back()">
       이전으로
diff --git a/src/views/PwChangeEmail.vue b/src/views/PwChangeEmail.vue
index 0171a3e2..58709f8c 100644
--- a/src/views/PwChangeEmail.vue
+++ b/src/views/PwChangeEmail.vue
@@ -51,11 +51,12 @@
 </template>
 
 <script setup lang="ts">
+import { postPasswordEmailSend } from '@/api/auth'
+import TitleContainer from '@/components/common/TitleContainer.vue'
+import axios from 'axios'
 import { ref } from 'vue'
 import router from '../router/index'
-import ModalView from '../components/ModalView.vue'
-import TitleContainer from '@/components/common/TitleContainer.vue'
-import { postPasswordEmailSend } from '@/api/auth'
+import ModalView from '@/components/common/ModalView.vue'
 
 const messageHeader = ref('')
 const messageBody = ref('')
@@ -78,24 +79,26 @@ const handleCheck = async () => {
     await postPasswordEmailSend(name.value, email.value)
     isModalVisible.value = !isModalVisible.value
   } catch (error) {
-    switch (error?.response?.status) {
-      case 404:
-        isFailModalVisible.value = !isFailModalVisible.value
-        messageHeader.value = '일치하는 정보가 없습니다'
-        messageBody.value = '이메일과 이름을 다시 확인해 주세요'
-        break
+    if (axios.isAxiosError(error)) {
+      switch (error?.response?.status) {
+        case 404:
+          isFailModalVisible.value = !isFailModalVisible.value
+          messageHeader.value = '일치하는 정보가 없습니다'
+          messageBody.value = '이메일과 이름을 다시 확인해 주세요'
+          break
 
-      case 500:
-        isFailModalVisible.value = !isFailModalVisible.value
-        messageHeader.value = '서버에 문제가 발생했습니다'
-        messageBody.value = '잠시후 다시 이용해주세요'
-        break
+        case 500:
+          isFailModalVisible.value = !isFailModalVisible.value
+          messageHeader.value = '서버에 문제가 발생했습니다'
+          messageBody.value = '잠시후 다시 이용해주세요'
+          break
 
-      default:
-        isFailModalVisible.value = !isFailModalVisible.value
-        messageHeader.value = '문제가 발생했습니다'
-        messageBody.value = '잠시후 다시 이용해주세요'
-        break
+        default:
+          isFailModalVisible.value = !isFailModalVisible.value
+          messageHeader.value = '문제가 발생했습니다'
+          messageBody.value = '잠시후 다시 이용해주세요'
+          break
+      }
     }
   }
 }
diff --git a/src/views/PwChange.vue b/src/views/PwChangeView.vue
similarity index 98%
rename from src/views/PwChange.vue
rename to src/views/PwChangeView.vue
index ec488f4e..9feca27f 100644
--- a/src/views/PwChange.vue
+++ b/src/views/PwChangeView.vue
@@ -70,12 +70,12 @@
 <script setup lang="ts">
 import { nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import ModalView from '../components/ModalView.vue'
 import { deleteLogout, patchPassword } from '@/api/auth'
 import TitleContainer from '@/components/common/TitleContainer.vue'
 import Cookies from 'js-cookie'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
+import ModalView from '@/components/common/ModalView.vue'
 const memberStore = useMemberStore()
 const { isLogined } = storeToRefs(memberStore)
 
diff --git a/src/views/PwCheck.vue b/src/views/PwCheckView.vue
similarity index 58%
rename from src/views/PwCheck.vue
rename to src/views/PwCheckView.vue
index 4fbe03a0..24e3cf16 100644
--- a/src/views/PwCheck.vue
+++ b/src/views/PwCheckView.vue
@@ -37,11 +37,12 @@
 </template>
 
 <script setup lang="ts">
+import { postPasswordCheck } from '@/api/auth'
+import TitleContainer from '@/components/common/TitleContainer.vue'
+import axios from 'axios'
 import { ref } from 'vue'
 import router from '../router/index'
-import TitleContainer from '@/components/common/TitleContainer.vue'
-import { postPasswordCheck } from '@/api/auth'
-import ModalView from '@/components/ModalView.vue'
+import ModalView from '@/components/common/ModalView.vue'
 
 const isModalVisible = ref(false)
 
@@ -59,31 +60,32 @@ const handleCheck = async () => {
     await postPasswordCheck(pw.value)
     router.push('/pw-change')
   } catch (error) {
-    console.log(error?.response?.status)
-    switch (error?.response?.status) {
-      case 400:
-        isModalVisible.value = !isModalVisible.value
-        messageHeader.value = '비밀번호가 일치 하지 않습니다'
-        messageBody.value = '다시 확인하여 주세요'
-        break
+    if (axios.isAxiosError(error)) {
+      switch (error?.response?.status) {
+        case 400:
+          isModalVisible.value = !isModalVisible.value
+          messageHeader.value = '비밀번호가 일치 하지 않습니다'
+          messageBody.value = '다시 확인하여 주세요'
+          break
 
-      case 401:
-        isModalVisible.value = !isModalVisible.value
-        messageHeader.value = '비밀번호가 일치 하지 않습니다'
-        messageBody.value = '다시 확인하여 주세요'
-        break
+        case 401:
+          isModalVisible.value = !isModalVisible.value
+          messageHeader.value = '비밀번호가 일치 하지 않습니다'
+          messageBody.value = '다시 확인하여 주세요'
+          break
 
-      case 500:
-        isModalVisible.value = !isModalVisible.value
-        messageHeader.value = '서버에 문제가 발생했습니다'
-        messageBody.value = '잠시후 다시 이용해주세요'
-        break
+        case 500:
+          isModalVisible.value = !isModalVisible.value
+          messageHeader.value = '서버에 문제가 발생했습니다'
+          messageBody.value = '잠시후 다시 이용해주세요'
+          break
 
-      default:
-        isModalVisible.value = !isModalVisible.value
-        messageHeader.value = '문제가 발생했습니다'
-        messageBody.value = '잠시후 다시 이용해주세요'
-        break
+        default:
+          isModalVisible.value = !isModalVisible.value
+          messageHeader.value = '문제가 발생했습니다'
+          messageBody.value = '잠시후 다시 이용해주세요'
+          break
+      }
     }
   }
 }
diff --git a/src/views/RequestApproveView.vue b/src/views/RequestApproveView.vue
index d5489860..f6348227 100644
--- a/src/views/RequestApproveView.vue
+++ b/src/views/RequestApproveView.vue
@@ -7,6 +7,6 @@
 </template>
 
 <script setup lang="ts">
+import TitleBar from '@/components/common/TitleBar.vue'
 import RequestApprove from '@/components/request-approve/RequestApprove.vue'
-import TitleBar from '@/components/TitleBar.vue'
 </script>
diff --git a/src/views/RequestHistory.vue b/src/views/RequestHistoryView.vue
similarity index 87%
rename from src/views/RequestHistory.vue
rename to src/views/RequestHistoryView.vue
index 5c826a57..09a4600d 100644
--- a/src/views/RequestHistory.vue
+++ b/src/views/RequestHistoryView.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
+import TitleBar from '@/components/common/TitleBar.vue'
 import RequestHistoryFilterBar from '@/components/request-history/RequestHistoryFilterBar.vue'
 import RequestHistoryList from '@/components/request-history/RequestHistoryList.vue'
-import TitleBar from '@/components/TitleBar.vue'
 </script>
diff --git a/src/views/RequestedView.vue b/src/views/RequestedView.vue
index a200f185..6562c289 100644
--- a/src/views/RequestedView.vue
+++ b/src/views/RequestedView.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
+import TitleBar from '@/components/common/TitleBar.vue'
 import RequestedFilterBar from '@/components/requested/RequestedFilterBar.vue'
 import RequestedList from '@/components/requested/RequestedList.vue'
-import TitleBar from '@/components/TitleBar.vue'
 </script>
diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index d61562b6..bdaf194f 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
+import TitleBar from '@/components/common/TitleBar.vue'
 import StatisticsCard from '@/components/statistics/StatisticsCard.vue'
 import StatisticsCategoryCard from '@/components/statistics/StatisticsCategoryCard.vue'
-import TitleBar from '@/components/TitleBar.vue'
 </script>
diff --git a/src/views/TaskBoardView.vue b/src/views/TaskBoardView.vue
index 4f35c089..7ecf62aa 100644
--- a/src/views/TaskBoardView.vue
+++ b/src/views/TaskBoardView.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
+import TitleBar from '@/components/common/TitleBar.vue'
 import TaskBoard from '@/components/task-board/TaskBoard.vue'
-import TitleBar from '@/components/TitleBar.vue'
 import TaskBoardFilterBar from '@/components/task-board/TaskBoardFilterBar.vue'
 </script>
diff --git a/src/views/TaskManagementView.vue b/src/views/TaskManagementView.vue
index 3a1fc58a..75eeb77f 100644
--- a/src/views/TaskManagementView.vue
+++ b/src/views/TaskManagementView.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
+import TitleBar from '@/components/common/TitleBar.vue'
 import CategoryManagement from '@/components/task-management/CategoryManagement.vue'
 import LabelManagement from '@/components/task-management/LabelManagement.vue'
-import TitleBar from '@/components/TitleBar.vue'
 </script>
diff --git a/src/views/TaskRequestView.vue b/src/views/TaskRequestView.vue
index a7e152a5..90483d91 100644
--- a/src/views/TaskRequestView.vue
+++ b/src/views/TaskRequestView.vue
@@ -9,9 +9,9 @@
 </template>
 
 <script setup lang="ts">
+import TitleBar from '@/components/common/TitleBar.vue'
 import RequestTask from '@/components/request-task/RequestTask.vue'
 import ReRequestTask from '@/components/request-task/ReRequestTask.vue'
-import TitleBar from '@/components/TitleBar.vue'
 import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
diff --git a/src/views/TeamBoardView.vue b/src/views/TeamBoardView.vue
index b452500c..ae99b55c 100644
--- a/src/views/TeamBoardView.vue
+++ b/src/views/TeamBoardView.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
+import TitleBar from '@/components/common/TitleBar.vue'
 import TeamBoard from '@/components/team-board/TeamBoard.vue'
 import TeamBoardFilterBar from '@/components/team-board/TeamBoardFilterBar.vue'
-import TitleBar from '@/components/TitleBar.vue'
 </script>
diff --git a/src/views/UserRegistrationView.vue b/src/views/UserRegistrationView.vue
index 929b11c5..37e2b411 100644
--- a/src/views/UserRegistrationView.vue
+++ b/src/views/UserRegistrationView.vue
@@ -6,6 +6,6 @@
 </template>
 
 <script setup lang="ts">
-import TitleBar from '@/components/TitleBar.vue'
+import TitleBar from '@/components/common/TitleBar.vue'
 import UserRegistration from '@/components/user-manage/UserRegistration.vue'
 </script>
diff --git a/src/views/UserUpdateView.vue b/src/views/UserUpdateView.vue
index e0481a79..7e6beae6 100644
--- a/src/views/UserUpdateView.vue
+++ b/src/views/UserUpdateView.vue
@@ -7,6 +7,6 @@
 </template>
 
 <script setup lang="ts">
-import TitleBar from '@/components/TitleBar.vue'
+import TitleBar from '@/components/common/TitleBar.vue'
 import UserUpdate from '@/components/user-manage/UserUpdate.vue'
 </script>