diff --git a/src/api/user.ts b/src/api/user.ts
index 86bbbbf4..28ca9ccf 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -4,3 +4,13 @@ export const postTaskRequest = async (formdata: FormData) => {
   const response = await formDataAxiosInstance.post('/api/tasks', formdata)
   return response.data
 }
+
+export const getTaskDetailUser = async (id: number) => {
+  const response = await formDataAxiosInstance.get(`/api/tasks/${id}/requests/details`)
+  return response.data
+}
+
+export const getTaskDetailManager = async (id: number) => {
+  const response = await formDataAxiosInstance.get(`/api/tasks/${id}/details`)
+  return response.data
+}
diff --git a/src/components/TaskStatus.vue b/src/components/TaskStatus.vue
index 582228bb..5041dbbe 100644
--- a/src/components/TaskStatus.vue
+++ b/src/components/TaskStatus.vue
@@ -28,5 +28,3 @@ const bgColor = computed(() => {
   return isActive ? `bg-${statusAsColor(status)}-1` : `bg-${statusAsColor(status)}-2`
 })
 </script>
-
-<style scoped></style>
diff --git a/src/components/my-request/MyRequestListCard.vue b/src/components/my-request/MyRequestListCard.vue
index 2f277aaf..9d838b34 100644
--- a/src/components/my-request/MyRequestListCard.vue
+++ b/src/components/my-request/MyRequestListCard.vue
@@ -2,6 +2,7 @@
   <div class="list-card">
     <ListCardTab
       v-for="tab in myRequestTabList"
+      @click="handleModal(info.taskId)"
       :key="tab.content"
       :content="tab.content"
       :width="tab.width"
@@ -9,15 +10,28 @@
       :profile-img="tab.profileImg"
       :is-status="tab.isStatus" />
   </div>
+  <TaskDetail
+    v-if="selectedID"
+    :is-approved="info.taskStatus !== 'REQUESTED'"
+    :selected-id="selectedID"
+    :close-task-detail="() => handleModal(null)" />
 </template>
 
 <script setup lang="ts">
 import type { ListCardProps } from '@/types/common'
-import ListCardTab from '../lists/ListCardTab.vue'
 import type { MyRequestListData } from '@/types/user'
 import { formatDate } from '@/utils/date'
+import { ref } from 'vue'
+import ListCardTab from '../lists/ListCardTab.vue'
+import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { info } = defineProps<{ info: MyRequestListData }>()
+const selectedID = ref<number | null>(null)
+
+const handleModal = (id: number | null) => {
+  selectedID.value = id
+}
+
 const myRequestTabList: ListCardProps[] = [
   { content: info.taskCode, width: 120, isTextXs: true },
   { content: formatDate(info.requestedAt), width: 80 },
diff --git a/src/components/my-task/MyTaskFilterBar.vue b/src/components/my-task/MyTaskFilterBar.vue
index 9410997d..f55d6a49 100644
--- a/src/components/my-task/MyTaskFilterBar.vue
+++ b/src/components/my-task/MyTaskFilterBar.vue
@@ -41,7 +41,7 @@ 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 {axiosInstance} from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 
 const store = useRequestParamsStore()
 store.$reset()
diff --git a/src/components/request-task/CategoryDropDown.vue b/src/components/request-task/CategoryDropDown.vue
index 7f377299..030e3e62 100644
--- a/src/components/request-task/CategoryDropDown.vue
+++ b/src/components/request-task/CategoryDropDown.vue
@@ -41,7 +41,7 @@
 
 <script lang="ts" setup>
 import { dropdownIcon } from '@/constants/iconPath'
-import type { CategoryDropdownProps, MainCategoryTypes, SubCategoryTypes } from '@/types/common'
+import type { Category, CategoryDropdownProps } from '@/types/common'
 import { computed, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
@@ -58,7 +58,7 @@ const toggleDropdown = () => {
   dropdownOpen.value = !dropdownOpen.value
 }
 
-const selectOption = (option: MainCategoryTypes | SubCategoryTypes) => {
+const selectOption = (option: Category) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
diff --git a/src/components/request-task/RequestTask.vue b/src/components/request-task/RequestTask.vue
index f2cfcd2f..17d3e32c 100644
--- a/src/components/request-task/RequestTask.vue
+++ b/src/components/request-task/RequestTask.vue
@@ -38,7 +38,7 @@
 <script lang="ts" setup>
 import { getMainCategory, getSubCategory } from '@/api/common'
 import { postTaskRequest } from '@/api/user'
-import type { MainCategoryTypes, SubCategoryTypes } from '@/types/common'
+import type { Category, SubCategory } from '@/types/common'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
@@ -48,8 +48,8 @@ import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
 
-const category1 = ref<MainCategoryTypes | null>(null)
-const category2 = ref<MainCategoryTypes | null>(null)
+const category1 = ref<Category | null>(null)
+const category2 = ref<Category | null>(null)
 
 const title = ref('')
 const description = ref('')
@@ -57,9 +57,9 @@ const file = ref(null as File[] | null)
 const isInvalidate = ref('')
 const isModalVisible = ref(false)
 
-const mainCategoryArr = ref<MainCategoryTypes[]>([])
-const subCategoryArr = ref<SubCategoryTypes[]>([])
-const afterSubCategoryArr = ref<SubCategoryTypes[]>([])
+const mainCategoryArr = ref<Category[]>([])
+const subCategoryArr = ref<SubCategory[]>([])
+const afterSubCategoryArr = ref<SubCategory[]>([])
 
 onMounted(async () => {
   mainCategoryArr.value = await getMainCategory()
diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue
index 0539f796..6fbd6a13 100644
--- a/src/components/requested/RequestedFilterBar.vue
+++ b/src/components/requested/RequestedFilterBar.vue
@@ -35,7 +35,7 @@ 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 {axiosInstance} from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 
 const store = useRequestParamsStore()
 store.$reset()
diff --git a/src/components/task-board/TaskBoardFilterBar.vue b/src/components/task-board/TaskBoardFilterBar.vue
index d9c2f338..b19ab197 100644
--- a/src/components/task-board/TaskBoardFilterBar.vue
+++ b/src/components/task-board/TaskBoardFilterBar.vue
@@ -29,7 +29,7 @@ import FilterInput from '../filters/FilterInput.vue'
 import { DUMMY_DIVISION_LIST } from '@/datas/dummy'
 import { useTaskBoardParamsStore } from '@/stores/params'
 import { useQuery } from '@tanstack/vue-query'
-import {axiosInstance} from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 
 const { params } = useTaskBoardParamsStore()
 
diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index edce187f..531a2dc2 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -1,36 +1,43 @@
 <template>
-  <div
-    class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[1024px] bg-white p-6">
-    <TaskDetailTopBar
-      :is-manager="isManager"
-      :is-approved="isApproved"
-      :close-task-detail="closeTaskDetail" />
-    <div class="w-full flex gap-6">
-      <div class="w-full h-[718px] flex flex-col gap-y-8 overflow-y-auto scrollbar-hide">
-        <TaskDetailLeft :task-detail="DUMMY_TASK_DETAIL" />
-        <div class="w-full border-border-1 border"></div>
-        <TaskDetailHistory
-          :history="DUMMY_TASK_DETAIL_HISTORY"
-          :is-approved="false"
-          :is-manager="false" />
+  <div class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50">
+    <div
+      class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[1024px] bg-white p-6">
+      <TaskDetailTopBar
+        :is-approved="isApproved"
+        :close-task-detail="closeTaskDetail"
+        :id="data?.taskId || 0" />
+      <div
+        class="w-full flex gap-6"
+        v-if="data">
+        <div class="w-full h-[718px] flex flex-col gap-y-8 overflow-y-auto scrollbar-hide">
+          <TaskDetailLeft :data="data" />
+          <div class="w-full border-[0.5px] border-border-1"></div>
+          <TaskDetailHistory
+            :history="DUMMY_TASK_DETAIL_HISTORY"
+            :is-approved="false" />
+        </div>
+        <div class="w-[1px] bg-border-1"></div>
+        <TaskDetailRight :data />
       </div>
-      <div class="w-[1px] bg-border-1"></div>
-      <TaskDetailRight
-        :task-detail="DUMMY_TASK_DETAIL"
-        :is-manager="true" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { getTaskDetailManager } from '@/api/user'
 import * as taskDetailData from '@/datas/taskdetail'
-import type { TaskDetailProps } from '@/types/user'
+import type { TaskDetailDatas, TaskDetailProps } from '@/types/user'
+import { useQuery } from '@tanstack/vue-query'
 import TaskDetailHistory from './TaskDetailHistory.vue'
 import TaskDetailLeft from './TaskDetailLeft.vue'
 import TaskDetailRight from './TaskDetailRight.vue'
 import TaskDetailTopBar from './TaskDetailTopBar.vue'
 
-const { DUMMY_TASK_DETAIL_HISTORY, DUMMY_TASK_DETAIL } = taskDetailData
+const { DUMMY_TASK_DETAIL_HISTORY } = taskDetailData
+const { isApproved, closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
-const { isManager, isApproved, closeTaskDetail } = defineProps<TaskDetailProps>()
+const { data } = useQuery<TaskDetailDatas>({
+  queryKey: ['taskDetailUser', selectedId],
+  queryFn: () => getTaskDetailManager(selectedId)
+})
 </script>
diff --git a/src/components/task-detail/TaskDetailFiles.vue b/src/components/task-detail/TaskDetailFiles.vue
index bbc8959d..480b9eb1 100644
--- a/src/components/task-detail/TaskDetailFiles.vue
+++ b/src/components/task-detail/TaskDetailFiles.vue
@@ -18,7 +18,7 @@
         class="flex w-full justify-between items-center h-8 text-xs border-b border-b-border-2 text-black px-4 shrink-0">
         <p class="flex truncate mr-3">{{ file.fileName }}</p>
         <div class="flex gap-6">
-          <p class="w-[60px]">{{ formatFileSize(Number(file.fileSize)) }}</p>
+          <p class="w-[60px]">{{ file.fileSize }}</p>
           <p class="w-36">{{ new Date().toLocaleString() }}</p>
           <div class="w-10 flex items-center justify-center cursor-pointer">
             <CommonIcons
@@ -35,11 +35,16 @@
 <script lang="ts" setup>
 import { downloadIcon } from '@/constants/iconPath'
 import type { AttachmentResponse } from '@/types/user'
-import { formatFileSize } from '@/utils/unit'
 import CommonIcons from '../common/CommonIcons.vue'
 
 const { files } = defineProps<{ files: AttachmentResponse[] }>()
+
 const downloadFile = (file: AttachmentResponse) => {
-  console.log('향후 파일 다운 로직 추가', file)
+  const link = document.createElement('a')
+  link.href = file.fileUrl
+  link.download = file.fileName
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
 }
 </script>
diff --git a/src/components/task-detail/TaskDetailLeft.vue b/src/components/task-detail/TaskDetailLeft.vue
index b1a7b60e..0f466524 100644
--- a/src/components/task-detail/TaskDetailLeft.vue
+++ b/src/components/task-detail/TaskDetailLeft.vue
@@ -2,23 +2,23 @@
   <div class="flex-grow flex flex-col gap-6">
     <div>
       <p class="task-detail">1차 카테고리</p>
-      <p>{{ taskDetail.mainCategoryName }}</p>
+      <p>{{ data.mainCategoryName }}</p>
     </div>
     <div>
       <p class="task-detail">2차 카테고리</p>
-      <p>{{ taskDetail.categoryName }}</p>
+      <p>{{ data.categoryName }}</p>
     </div>
     <div>
       <p class="task-detail">제목</p>
-      <p>{{ taskDetail.title }}</p>
+      <p>{{ data.title }}</p>
     </div>
     <div>
       <p class="task-detail">부가 설명</p>
-      <p class="px-6 py-4 bg-primary2 rounded-lg font-normal">{{ taskDetail.description }}</p>
+      <p class="px-6 py-4 bg-primary2 rounded-lg font-normal">{{ data.description }}</p>
     </div>
     <div>
       <p class="task-detail">첨부 파일</p>
-      <TaskDetailFiles :files="taskDetail.attachmentResponse" />
+      <TaskDetailFiles :files="data.attachmentResponses" />
     </div>
   </div>
 </template>
@@ -26,7 +26,7 @@
 <script setup lang="ts">
 import type { TaskDetailDatas } from '@/types/user'
 import TaskDetailFiles from './TaskDetailFiles.vue'
-const { taskDetail } = defineProps<{ taskDetail: TaskDetailDatas }>()
+const { data } = defineProps<{
+  data: TaskDetailDatas
+}>()
 </script>
-
-<style scoped></style>
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index a61e60f3..66c6c2ef 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -1,36 +1,43 @@
 <template>
-  <div class="w-60 flex flex-col gap-y-6 pb-6 text-black">
+  <div class="min-w-60 flex flex-col gap-y-6 pb-6 text-black">
     <div>
       <p class="task-detail">ID</p>
-      <p class="text-sm text-black">{{ taskDetail.taskId || '-' }}</p>
+      <p class="text-sm text-black">{{ data.taskId || '-' }}</p>
     </div>
     <div>
       <p class="task-detail">요청일</p>
-      <p class="text-sm text-black">{{ formatDate(taskDetail.requestedAt) }}</p>
+      <p class="text-sm text-black">{{ formatDate(data.requestedAt) }}</p>
     </div>
     <div>
       <p class="task-detail">종료일</p>
-      <p class="text-sm text-black">{{ formatDate(taskDetail.finishedAt) || '-' }}</p>
+      <p class="text-sm text-black">
+        {{ (data.finishedAt && formatDate(data.finishedAt)) || '-' }}
+      </p>
     </div>
     <div>
       <p class="task-detail">상태</p>
-      <div class="w-fit">
-        <TaskStatus :status="taskDetail.taskStatus" />
+      <div
+        v-if="data.taskStatus === 'REQUESTED'"
+        class="w-fit">
+        <TaskStatus :status="data.taskStatus" />
+      </div>
+      <div v-else>
+        <TaskStatusList :status="data.taskStatus" />
       </div>
     </div>
     <div>
       <p class="task-detail">요청자</p>
       <div class="flex gap-2">
         <img
-          :src="taskDetail.requesterImageUrl"
+          :src="data.requesterImageUrl || '/images/mockProfile.jpg'"
           class="rounded-full overflow-hidden w-5 h-5"
           alt="requesterImg" />
-        <p class="text-sm text-black">{{ taskDetail.requesterNickName }}</p>
+        <p class="text-sm text-black">{{ data.requesterNickName }}</p>
       </div>
     </div>
     <div>
       <p class="task-detail">처리자</p>
-      <div v-if="isManager">
+      <div v-if="isManager && data.processorNickName">
         <TaskDetailDropdown
           v-model="processor"
           :options="DUMMY_REQUEST_PROCESSORS"
@@ -40,44 +47,50 @@
         v-else
         class="flex gap-2">
         <img
-          v-if="taskDetail.processorImageUrl"
-          :src="taskDetail.processorImageUrl"
+          v-if="data.processorNickName"
+          :src="data.processorImageUrl || '/images/mockProfile.jpg'"
           class="rounded-full overflow-hidden w-5 h-5"
           alt="processorImg" />
-        <p class="text-sm text-black">{{ taskDetail.processorNickName || '-' }}</p>
+        <p class="text-sm text-black">{{ data.processorNickName || '-' }}</p>
       </div>
     </div>
-    <div v-if="isManager">
+    <div v-if="isManager && data.dueDate">
       <p class="task-detail">마감기한</p>
       <div class="w-full flex justify-between items-center">
-        <p class="text-sm text-black">{{ taskDetail.dueDate || '-' }}까지</p>
+        <p class="text-sm text-black">{{ data.dueDate || '-' }}까지</p>
         <p class="text-primary1 text-xs font-bold">변경</p>
       </div>
       <p class="text-red-1 text-xs font-bold">3일 전</p>
     </div>
-    <div v-if="isManager">
+    <div v-if="isManager && data.labelName">
       <p class="task-detail">구분</p>
       <TaskDetailLabelDropdown
         v-model="labeling"
         :options="DUMMY_TASK_LABELS"
-        :processor="taskDetail.labelName" />
+        :processor="data.labelName" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { DUMMY_PROCESSOR, DUMMY_REQUEST_PROCESSORS, DUMMY_TASK_LABELS } from '@/datas/taskdetail'
-import type { TaskDetailRightProps } from '@/types/user'
+import { useMemberStore } from '@/stores/member'
+import type { TaskDetailDatas } from '@/types/user'
 import { formatDate } from '@/utils/date'
-import { defineProps, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { computed, defineProps, ref } from 'vue'
 import TaskStatus from '../TaskStatus.vue'
 import TaskDetailDropdown from './TaskDetailDropdown.vue'
 import TaskDetailLabelDropdown from './TaskDetailLabelDropdown.vue'
+import TaskStatusList from './TaskStatusList.vue'
 
-const { taskDetail, isManager } = defineProps<TaskDetailRightProps>()
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+const isManager = computed(() => info.value.memberName === data.processorNickName)
+
+const { data } = defineProps<{ data: TaskDetailDatas }>()
+console.log(data, '가져온 데이터')
 
 const processor = ref(DUMMY_PROCESSOR.nickName)
 const labeling = ref(DUMMY_TASK_LABELS[0].labelName)
 </script>
-
-<script setup lang="ts"></script>
diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index 27327e3e..3674414d 100644
--- a/src/components/task-detail/TaskDetailTopBar.vue
+++ b/src/components/task-detail/TaskDetailTopBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full flex justify-between items-center">
+  <div class="w-full flex justify-between items-center bg-white">
     <div class="flex gap-4 text-sm font-bold pb-6">
       <div
         v-if="!isManager && isApproved"
@@ -17,7 +17,7 @@
         @click="ApproveTask"
         v-if="isManager && !isApproved"
         class="flex gap-1 items-center cursor-pointer">
-        <CommonIcons :name="modificationIcon" />
+        <CommonIcons :name="approveIcon" />
         <p class="text-primary1">요청 승인</p>
       </div>
       <div
@@ -32,13 +32,6 @@
       :name="closeIcon"
       @click="closeTaskDetail"
       class="cursor-pointer" />
-    <ModalView
-      type="successType"
-      :is-open="isModalOpen.approve"
-      @click="ApproveTask"
-      @close="ApproveTask">
-      <template #header>작업이 승인되었습니다.</template>
-    </ModalView>
     <ModalView
       type="inputType"
       :is-open="isModalOpen.cancel"
@@ -50,12 +43,26 @@
 </template>
 
 <script setup lang="ts">
-import { cancelIcon, closeIcon, modificationIcon, reRequestIcon } from '@/constants/iconPath'
+import {
+  approveIcon,
+  cancelIcon,
+  closeIcon,
+  modificationIcon,
+  reRequestIcon
+} from '@/constants/iconPath'
+import { useMemberStore } from '@/stores/member'
 import type { TaskDetailTopBarProps } from '@/types/manager'
-import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import CommonIcons from '../common/CommonIcons.vue'
 import ModalView from '../ModalView.vue'
 
+const memberStore = useMemberStore()
+const router = useRouter()
+const { info } = storeToRefs(memberStore)
+const isManager = computed(() => info.value.memberRole === 'ROLE_MANAGER')
+
 const isModalOpen = ref({
   cancel: false,
   approve: false
@@ -71,9 +78,10 @@ const cancelTask = () => {
 
 const ApproveTask = () => {
   toggleModal('approve')
+  router.push(`/request-approve/${id}`)
 }
 
-const { isManager, isApproved, closeTaskDetail } = defineProps<TaskDetailTopBarProps>()
+const { isApproved, closeTaskDetail, id } = defineProps<TaskDetailTopBarProps>()
 </script>
 
 <style scoped></style>
diff --git a/src/components/task-detail/TaskStatusList.vue b/src/components/task-detail/TaskStatusList.vue
new file mode 100644
index 00000000..6b7edcad
--- /dev/null
+++ b/src/components/task-detail/TaskStatusList.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex flex-wrap items-center gap-2.5">
+    <div
+      v-for="status in TASK_STATUS_LIST"
+      :key="status.content"
+      class="flex px-3 py-1 rounded-[45px]"
+      :class="bgColor(status.value)">
+      <span
+        class="text-[11px] font-bold"
+        :class="textColor(status.value)">
+        {{ status.content }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TASK_STATUS_LIST } from '@/constants/common'
+import type { Status } from '@/types/common'
+import { statusAsColor } from '@/utils/statusAsColor'
+
+const { status } = defineProps<{
+  status: Status
+}>()
+
+const textColor = (taskStatus: Status) => {
+  return status === taskStatus ? 'text-white' : `text-${statusAsColor(taskStatus)}-1`
+}
+const bgColor = (taskStatus: Status) => {
+  return status === taskStatus
+    ? `bg-${statusAsColor(taskStatus)}-1`
+    : `bg-${statusAsColor(taskStatus)}-2`
+}
+</script>
diff --git a/src/components/task-management/CategoryLine.vue b/src/components/task-management/CategoryLine.vue
index c2a2fe4e..f1a5669a 100644
--- a/src/components/task-management/CategoryLine.vue
+++ b/src/components/task-management/CategoryLine.vue
@@ -5,7 +5,7 @@
       :key="main.id"
       class="flex w-full flex-col">
       <div
-        v-for="(sub, index) in main.subCategory.length + 1"
+        v-for="(sub, index) in (main.subCategory?.length || 0) + 1"
         :key="sub"
         class="category-management-line w-full justify-between bg-white">
         <template v-if="index === 0">
diff --git a/src/components/task-management/ColorSelectModal.vue b/src/components/task-management/ColorSelectModal.vue
index 1679d10a..814d57c9 100644
--- a/src/components/task-management/ColorSelectModal.vue
+++ b/src/components/task-management/ColorSelectModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="isOpen"
-    class="absolute top-7 left-3 w-[176px] h-[120px] p-4 flex flex-col z-50 shadow-custom rounded-lg bg-white gap-4"
+    class="absolute top-7 left-3 w-[176px] h-[120px] p-4 flex flex-col !z-50 shadow-custom rounded-lg bg-white gap-4 import"
     @click.self="closeModal">
     <div class="flex w-full justify-between">
       <p class="text-xs font-bold text-body">색상 선택</p>
diff --git a/src/components/task-management/LabelManagement.vue b/src/components/task-management/LabelManagement.vue
index e5921789..771f512d 100644
--- a/src/components/task-management/LabelManagement.vue
+++ b/src/components/task-management/LabelManagement.vue
@@ -7,7 +7,7 @@
         <p>구분명</p>
       </div>
     </div>
-    <div class="flex flex-col w-full max-h-[210px] overflow-y-auto">
+    <div class="flex flex-col w-full shrink-0 overflow-y-auto pb-8">
       <LabelManagementLine
         :label-data="labelData"
         @updateLabels="fetchLabels" />
diff --git a/src/constants/common.ts b/src/constants/common.ts
index 07c8ee5b..5b8f0806 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -1,3 +1,5 @@
+import type { TaskStatusListTypes } from '@/types/common'
+
 export const TERM_LIST = [
   { value: '', content: '전체' },
   { value: '1', content: '1시간 이내' },
@@ -6,8 +8,7 @@ export const TERM_LIST = [
   { value: '730', content: '1개월 이내' },
   { value: '2190', content: '3개월 이내' }
 ]
-export const TASK_STATUS_LIST = [
-  { value: 'REQUESTED', content: '요청' },
+export const TASK_STATUS_LIST: TaskStatusListTypes[] = [
   { value: 'IN_PROGRESS', content: '진행 중' },
   { value: 'PENDING_COMPLETED', content: '검토 중' },
   { value: 'COMPLETED', content: '완료' },
diff --git a/src/router/index.ts b/src/router/index.ts
index 1d335fae..a98db654 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -111,11 +111,6 @@ const router = createRouter({
       path: '/statistics',
       name: 'Statistics',
       component: () => import('../views/StatisticsView.vue')
-    },
-    {
-      path: '/task-detail',
-      name: 'TaskDetail',
-      component: () => import('../views/TaskDetailView.vue')
     }
   ]
 })
diff --git a/src/types/admin.ts b/src/types/admin.ts
index d27418c6..08589211 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -1,4 +1,4 @@
-import type { Role, SubCategoryTypes } from './common'
+import type { Category, Role } from './common'
 
 export interface MemberManagementListData {
   memberId: number
@@ -42,15 +42,8 @@ export interface CategoryLineProps {
   mainCategoryId?: string
 }
 
-export interface categoriesTypes {
-  id: number
-  name: string
-  code: string
-  subCategory: SubCategoryTypes[]
-}
-
 export interface CategoryAllData {
-  categories: categoriesTypes[]
+  categories: Category[]
 }
 
 export interface LabelDataTypes {
diff --git a/src/types/common.ts b/src/types/common.ts
index b60f11af..9a179847 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -16,7 +16,14 @@ export interface Category {
   id: number
   name: string
   code: string
-  subCategory?: { id: number; mainCategoryId: number; name: string; code: string }[]
+  subCategory?: SubCategory[]
+}
+
+export interface SubCategory {
+  id: number
+  mainCategoryId: number
+  name: string
+  code: string
 }
 
 export interface FilterCategoryProps {
@@ -79,9 +86,9 @@ export interface CategoryForm {
 }
 
 export interface CategoryDropdownProps {
-  options: CategoryForm
+  options: Category[] | SubCategory[]
   labelName: string
-  modelValue?: CategoryForm
+  modelValue: Category | SubCategory | null
   isLabel?: boolean
   isDisabled?: boolean
   isInvalidate?: string
@@ -98,3 +105,8 @@ export interface LabelColorTypes {
   fillColor: string
   colorEnum: string
 }
+
+export interface TaskStatusListTypes {
+  value: Status
+  content: string
+}
diff --git a/src/types/manager.ts b/src/types/manager.ts
index b6147a71..555dfe9e 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -100,9 +100,9 @@ export interface MyTaskDetailDatas {
 }
 
 export interface TaskDetailTopBarProps {
-  isManager: boolean
   isApproved: boolean
   closeTaskDetail: () => void
+  id: number
 }
 
 export interface DraggableEvent {
diff --git a/src/types/user.ts b/src/types/user.ts
index b77be02e..97688607 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -61,7 +61,7 @@ export interface TaskDetailDatas {
   categoryName: string
   title: string
   description: string
-  attachmentResponse: AttachmentResponse[]
+  attachmentResponses: AttachmentResponse[]
   dueDate?: string
   labelName?: string
 }
@@ -97,8 +97,8 @@ export interface TaskDetailHistoryProps {
 }
 
 export interface TaskDetailProps {
-  isManager: boolean
   isApproved: boolean
+  selectedId: number
   closeTaskDetail: () => void
 }
 export interface ManagerInfoTypes {
@@ -115,7 +115,6 @@ export interface TaskDetailDropdownProps {
 
 export interface TaskDetailRightProps {
   taskDetail: TaskDetailDatas
-  isManager: boolean
 }
 
 export interface TaskDetailLabelDropdownProps {
diff --git a/src/views/TaskDetailView.vue b/src/views/TaskDetailView.vue
deleted file mode 100644
index d9538031..00000000
--- a/src/views/TaskDetailView.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div class="w-full flex items-center justify-center h-screen bg-disabled">
-    <TaskDetail
-      :isManager="true"
-      :isApproved="false"
-      :closeTaskDetail="closeTaskDetail" />
-  </div>
-  <div class="w-full bg-body"></div>
-</template>
-
-<script setup lang="ts">
-import TaskDetail from '@/components/task-detail/TaskDetail.vue'
-
-const closeTaskDetail = () => {
-  console.log('닫기')
-}
-</script>