From 9bf78d923169ac5b3f7b0d6c8bad11e1f2ea0732 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 13:43:20 +0900
Subject: [PATCH 01/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EA=B5=AC?=
 =?UTF-8?q?=EB=B6=84=20=EC=83=89=EC=83=81=20=EB=B3=B4=EC=97=AC=EC=A7=80?=
 =?UTF-8?q?=EB=8A=94=20=EB=B2=94=EC=9C=84=20=EC=A6=9D=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-management/ColorSelectModal.vue | 2 +-
 src/components/task-management/LabelManagement.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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" />

From 015d8eaea665a2dc44dac8f52fc04668719050b3 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 14:05:27 +0900
Subject: [PATCH 02/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EB=82=B4=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=EB=88=8C=EB=A0=80=EC=9D=84=20=EB=95=8C=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=EC=A0=95=EB=B3=B4=20+=20isManager=20pinia?=
 =?UTF-8?q?=ED=86=B5=ED=95=B4=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../my-request/MyRequestListCard.vue          | 16 +++++-
 src/components/task-detail/TaskDetail.vue     | 50 +++++++++++--------
 .../task-detail/TaskDetailTopBar.vue          |  2 +-
 src/types/user.ts                             |  2 +-
 4 files changed, 47 insertions(+), 23 deletions(-)

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/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index edce187f..1f998439 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -1,36 +1,46 @@
 <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">
+      {{ selectedId }} 요청 번호
+      <TaskDetailTopBar
+        :is-manager="role === 'ROLE_MANAGER'"
+        :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>
+        <div class="w-[1px] bg-border-1"></div>
+        <TaskDetailRight
+          :task-detail="DUMMY_TASK_DETAIL"
+          :is-manager="true" />
       </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 * as taskDetailData from '@/datas/taskdetail'
+import { useMemberStore } from '@/stores/member'
 import type { TaskDetailProps } from '@/types/user'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
 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 memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+const role = computed(() => info.value.memberRole)
+console.log(role.value, '역할')
 
-const { isManager, isApproved, closeTaskDetail } = defineProps<TaskDetailProps>()
+const { DUMMY_TASK_DETAIL_HISTORY, DUMMY_TASK_DETAIL } = taskDetailData
+const { isApproved, closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 </script>
diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index 27327e3e..78570883 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"
diff --git a/src/types/user.ts b/src/types/user.ts
index b77be02e..cabf8366 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -97,8 +97,8 @@ export interface TaskDetailHistoryProps {
 }
 
 export interface TaskDetailProps {
-  isManager: boolean
   isApproved: boolean
+  selectedId: number
   closeTaskDetail: () => void
 }
 export interface ManagerInfoTypes {

From 7f5a30c031b188ff0897186a0c1a7cd7a49c6305 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 14:53:37 +0900
Subject: [PATCH 03/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EC=9A=94?=
 =?UTF-8?q?=EC=B2=AD=20=EC=83=81=EC=84=B8=EC=A0=95=EB=B3=B4=20=EA=B0=80?=
 =?UTF-8?q?=EC=A0=B8=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts                               |  5 +++
 src/components/task-detail/TaskDetail.vue     | 35 +++++++++----------
 src/components/task-detail/TaskDetailLeft.vue | 16 ++++-----
 .../task-detail/TaskDetailRight.vue           | 34 ++++++++++--------
 .../task-detail/TaskDetailTopBar.vue          | 10 ++++--
 src/types/manager.ts                          |  1 -
 src/types/user.ts                             |  1 -
 7 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/src/api/user.ts b/src/api/user.ts
index 86bbbbf4..582284e0 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -4,3 +4,8 @@ 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
+}
diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 1f998439..676f1646 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -4,43 +4,42 @@
       class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[1024px] bg-white p-6">
       {{ selectedId }} 요청 번호
       <TaskDetailTopBar
-        :is-manager="role === 'ROLE_MANAGER'"
         :is-approved="isApproved"
         :close-task-detail="closeTaskDetail" />
-      <div class="w-full flex gap-6">
+      <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 :task-detail="DUMMY_TASK_DETAIL" />
+          <TaskDetailLeft :data="data" />
           <div class="w-full border-border-1 border"></div>
           <TaskDetailHistory
             :history="DUMMY_TASK_DETAIL_HISTORY"
-            :is-approved="false"
-            :is-manager="false" />
+            :is-approved="false" />
         </div>
         <div class="w-[1px] bg-border-1"></div>
-        <TaskDetailRight
-          :task-detail="DUMMY_TASK_DETAIL"
-          :is-manager="true" />
+        <TaskDetailRight :data />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { getTaskDetailUser } from '@/api/user'
 import * as taskDetailData from '@/datas/taskdetail'
-import { useMemberStore } from '@/stores/member'
-import type { TaskDetailProps } from '@/types/user'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
+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 memberStore = useMemberStore()
-const { info } = storeToRefs(memberStore)
-const role = computed(() => info.value.memberRole)
-console.log(role.value, '역할')
-
-const { DUMMY_TASK_DETAIL_HISTORY, DUMMY_TASK_DETAIL } = taskDetailData
+const { DUMMY_TASK_DETAIL_HISTORY } = taskDetailData
 const { isApproved, closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
+
+const { data } = useQuery<TaskDetailDatas>({
+  queryKey: ['taskDetailUser', selectedId],
+  queryFn: () => getTaskDetailUser(selectedId)
+})
+
+console.log(data, 'data')
 </script>
diff --git a/src/components/task-detail/TaskDetailLeft.vue b/src/components/task-detail/TaskDetailLeft.vue
index b1a7b60e..5cbe6c0e 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.attachmentResponse" />
     </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..1870a782 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -2,30 +2,30 @@
   <div class="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">{{ formatDate(data.finishedAt) || '-' }}</p>
     </div>
     <div>
       <p class="task-detail">상태</p>
       <div class="w-fit">
-        <TaskStatus :status="taskDetail.taskStatus" />
+        <TaskStatus :status="data.taskStatus" />
       </div>
     </div>
     <div>
       <p class="task-detail">요청자</p>
       <div class="flex gap-2">
         <img
-          :src="taskDetail.requesterImageUrl"
+          :src="data.requesterImageUrl"
           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>
@@ -40,17 +40,17 @@
         v-else
         class="flex gap-2">
         <img
-          v-if="taskDetail.processorImageUrl"
-          :src="taskDetail.processorImageUrl"
+          v-if="data.processorImageUrl"
+          :src="data.processorImageUrl"
           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">
       <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>
@@ -60,21 +60,27 @@
       <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'
 
-const { taskDetail, isManager } = defineProps<TaskDetailRightProps>()
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+const isManager = computed(() => info.value.memberRole === 'ROLE_MANAGER')
+
+const { data } = defineProps<{ data: TaskDetailDatas }>()
 
 const processor = ref(DUMMY_PROCESSOR.nickName)
 const labeling = ref(DUMMY_TASK_LABELS[0].labelName)
diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index 78570883..d1c3cbf5 100644
--- a/src/components/task-detail/TaskDetailTopBar.vue
+++ b/src/components/task-detail/TaskDetailTopBar.vue
@@ -51,11 +51,17 @@
 
 <script setup lang="ts">
 import { 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 CommonIcons from '../common/CommonIcons.vue'
 import ModalView from '../ModalView.vue'
 
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+const isManager = computed(() => info.value.memberRole === 'ROLE_MANAGER')
+
 const isModalOpen = ref({
   cancel: false,
   approve: false
@@ -73,7 +79,7 @@ const ApproveTask = () => {
   toggleModal('approve')
 }
 
-const { isManager, isApproved, closeTaskDetail } = defineProps<TaskDetailTopBarProps>()
+const { isApproved, closeTaskDetail } = defineProps<TaskDetailTopBarProps>()
 </script>
 
 <style scoped></style>
diff --git a/src/types/manager.ts b/src/types/manager.ts
index b6147a71..12f0b22b 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -100,7 +100,6 @@ export interface MyTaskDetailDatas {
 }
 
 export interface TaskDetailTopBarProps {
-  isManager: boolean
   isApproved: boolean
   closeTaskDetail: () => void
 }
diff --git a/src/types/user.ts b/src/types/user.ts
index cabf8366..6e852f7f 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -115,7 +115,6 @@ export interface TaskDetailDropdownProps {
 
 export interface TaskDetailRightProps {
   taskDetail: TaskDetailDatas
-  isManager: boolean
 }
 
 export interface TaskDetailLabelDropdownProps {

From 445257eaedffbb94473585865e463a46e60c74ac Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 15:20:11 +0900
Subject: [PATCH 04/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EC=9E=90=EC=9D=98=20=EA=B6=8C=ED=95=9C=EC=97=90=20?=
 =?UTF-8?q?=EB=A7=9E=EB=8A=94=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EA=B8=B0,=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=8B=A4=EC=9A=B4,=20=EC=9A=A9=ED=96=98?=
 =?UTF-8?q?=20=ED=91=9C=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-detail/TaskDetail.vue      |  3 ---
 src/components/task-detail/TaskDetailFiles.vue | 11 ++++++++---
 src/components/task-detail/TaskDetailLeft.vue  |  2 +-
 src/components/task-detail/TaskDetailRight.vue | 14 +++++++-------
 src/types/user.ts                              |  2 +-
 src/utils/date.ts                              |  3 ++-
 6 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 676f1646..2b6039e6 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -2,7 +2,6 @@
   <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">
-      {{ selectedId }} 요청 번호
       <TaskDetailTopBar
         :is-approved="isApproved"
         :close-task-detail="closeTaskDetail" />
@@ -40,6 +39,4 @@ const { data } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
   queryFn: () => getTaskDetailUser(selectedId)
 })
-
-console.log(data, 'data')
 </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 5cbe6c0e..0f466524 100644
--- a/src/components/task-detail/TaskDetailLeft.vue
+++ b/src/components/task-detail/TaskDetailLeft.vue
@@ -18,7 +18,7 @@
     </div>
     <div>
       <p class="task-detail">첨부 파일</p>
-      <TaskDetailFiles :files="data.attachmentResponse" />
+      <TaskDetailFiles :files="data.attachmentResponses" />
     </div>
   </div>
 </template>
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 1870a782..614db82f 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -10,7 +10,9 @@
     </div>
     <div>
       <p class="task-detail">종료일</p>
-      <p class="text-sm text-black">{{ formatDate(data.finishedAt) || '-' }}</p>
+      <p class="text-sm text-black">
+        {{ formatDate(data.finishedAt) || '-' }}
+      </p>
     </div>
     <div>
       <p class="task-detail">상태</p>
@@ -22,7 +24,7 @@
       <p class="task-detail">요청자</p>
       <div class="flex gap-2">
         <img
-          :src="data.requesterImageUrl"
+          :src="data.requesterImageUrl || '/images/mockProfile.jpg'"
           class="rounded-full overflow-hidden w-5 h-5"
           alt="requesterImg" />
         <p class="text-sm text-black">{{ data.requesterNickName }}</p>
@@ -30,7 +32,7 @@
     </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"
@@ -47,7 +49,7 @@
         <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">{{ data.dueDate || '-' }}까지</p>
@@ -55,7 +57,7 @@
       </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"
@@ -79,11 +81,9 @@ import TaskDetailLabelDropdown from './TaskDetailLabelDropdown.vue'
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
 const isManager = computed(() => info.value.memberRole === 'ROLE_MANAGER')
-
 const { data } = defineProps<{ data: TaskDetailDatas }>()
 
 const processor = ref(DUMMY_PROCESSOR.nickName)
 const labeling = ref(DUMMY_TASK_LABELS[0].labelName)
 </script>
 
-<script setup lang="ts"></script>
diff --git a/src/types/user.ts b/src/types/user.ts
index 6e852f7f..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
 }
diff --git a/src/utils/date.ts b/src/utils/date.ts
index a8aabe8b..ea13a64d 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,4 +1,5 @@
-export const formatDate = (dateString: string) => {
+export const formatDate = (dateString: string | null) => {
+  if (dateString === null) return null
   const date = new Date(dateString)
 
   const year = date.getFullYear()

From 491b537b7c33c0a60e30945d48c8a8a86af7f586 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 15:22:15 +0900
Subject: [PATCH 05/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EC=9E=90=EC=9D=98=20=EA=B6=8C=ED=95=9C=EC=97=90=20?=
 =?UTF-8?q?=EB=A7=9E=EB=8A=94=20top=20bar=20+=20icon=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-detail/TaskDetailTopBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index d1c3cbf5..f92730d7 100644
--- a/src/components/task-detail/TaskDetailTopBar.vue
+++ b/src/components/task-detail/TaskDetailTopBar.vue
@@ -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
@@ -50,7 +50,7 @@
 </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 { storeToRefs } from 'pinia'

From d6cc9454ea2da1188a027c385b9bc0df3329bc9a Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 15:31:15 +0900
Subject: [PATCH 06/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=EC=9E=90=EA=B0=80=20=EC=95=84=EB=8B=8C=20=EB=8B=B4?=
 =?UTF-8?q?=EB=8B=B9=EC=9E=90=EC=9D=98=20=EA=B2=BD=EC=9A=B0=20=EB=B3=B4?=
 =?UTF-8?q?=EC=9D=B4=EB=8A=94=20=EC=9E=A5=EB=A9=B4=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-detail/TaskDetailRight.vue | 10 +++++-----
 src/utils/date.ts                              |  3 +--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 614db82f..6a29766f 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -11,7 +11,7 @@
     <div>
       <p class="task-detail">종료일</p>
       <p class="text-sm text-black">
-        {{ formatDate(data.finishedAt) || '-' }}
+        {{ (data.finishedAt && formatDate(data.finishedAt)) || '-' }}
       </p>
     </div>
     <div>
@@ -42,8 +42,7 @@
         v-else
         class="flex gap-2">
         <img
-          v-if="data.processorImageUrl"
-          :src="data.processorImageUrl"
+          :src="data.processorImageUrl || '/images/mockProfile.jpg'"
           class="rounded-full overflow-hidden w-5 h-5"
           alt="processorImg" />
         <p class="text-sm text-black">{{ data.processorNickName || '-' }}</p>
@@ -80,10 +79,11 @@ import TaskDetailLabelDropdown from './TaskDetailLabelDropdown.vue'
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
-const isManager = computed(() => info.value.memberRole === 'ROLE_MANAGER')
+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>
-
diff --git a/src/utils/date.ts b/src/utils/date.ts
index ea13a64d..a8aabe8b 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,5 +1,4 @@
-export const formatDate = (dateString: string | null) => {
-  if (dateString === null) return null
+export const formatDate = (dateString: string) => {
   const date = new Date(dateString)
 
   const year = date.getFullYear()

From e3b8fba9136a138a276fc9461ca12c6c020d9706 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 16:04:33 +0900
Subject: [PATCH 07/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=ED=83=80=EC=9E=85=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../request-task/CategoryDropDown.vue         |  4 +--
 src/components/request-task/RequestTask.vue   | 12 ++++-----
 src/constants/admin.ts                        |  6 ++---
 src/types/admin.ts                            | 11 ++------
 src/types/common.ts                           | 26 +++++++------------
 5 files changed, 23 insertions(+), 36 deletions(-)

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/constants/admin.ts b/src/constants/admin.ts
index 15fef027..4a848952 100644
--- a/src/constants/admin.ts
+++ b/src/constants/admin.ts
@@ -1,4 +1,4 @@
-import type { ListBarTabProps, MainCategoryTypes, Option, SubCategoryTypes } from '@/types/common'
+import type { Category, ListBarTabProps, Option, SubCategory } from '@/types/common'
 
 export const MEMBER_MANAGEMENT_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '이름', width: 60 },
@@ -36,13 +36,13 @@ export const LOGS_LIST_BAR_TAB: ListBarTabProps[] = [
 
 import type { RoleTypes, RoleTypesEnum, UserRegistrationProps } from '@/types/admin'
 
-export const CATEGORY_FIRST_ADD: MainCategoryTypes = {
+export const CATEGORY_FIRST_ADD: Category = {
   name: '',
   code: '',
   id: 0
 }
 
-export const CATEGORY_SECOND_ADD: SubCategoryTypes = {
+export const CATEGORY_SECOND_ADD: SubCategory = {
   name: '',
   mainCategoryId: 0,
   code: '',
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 566155d0..a96b9526 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 {
@@ -72,23 +79,10 @@ export interface ColorSelectProps {
   newLabel: LabelDataTypes
 }
 
-export interface MainCategoryTypes {
-  id: number
-  name: string
-  code: string
-}
-
-export interface SubCategoryTypes {
-  id: number
-  mainCategoryId: number
-  name: string
-  code: string
-}
-
 export interface CategoryDropdownProps {
-  options: MainCategoryTypes[] | SubCategoryTypes[]
+  options: Category[] | SubCategory[]
   labelName: string
-  modelValue: MainCategoryTypes | SubCategoryTypes | null
+  modelValue: Category | SubCategory | null
   isLabel?: boolean
   isDisabled?: boolean
   isInvalidate?: string

From 3cca5e272861662d86b85f7fb3ef20432157a6eb Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 16:33:54 +0900
Subject: [PATCH 08/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EC=A7=80=EB=82=9C=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EB=82=B4?=
 =?UTF-8?q?=EC=9A=A9=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TaskStatus.vue                 |  2 --
 src/components/task-detail/TaskDetail.vue     |  2 +-
 .../task-detail/TaskDetailRight.vue           |  9 +++--
 src/components/task-detail/TaskStatusList.vue | 34 +++++++++++++++++++
 .../task-management/CategoryLine.vue          |  2 +-
 src/constants/common.ts                       |  5 +--
 src/types/common.ts                           |  5 +++
 7 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 src/components/task-detail/TaskStatusList.vue

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/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 2b6039e6..90b4cb43 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -10,7 +10,7 @@
         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-border-1 border"></div>
+          <div class="w-full border-[0.5px] border-border-1"></div>
           <TaskDetailHistory
             :history="DUMMY_TASK_DETAIL_HISTORY"
             :is-approved="false" />
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 6a29766f..8475afbf 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -1,5 +1,5 @@
 <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">{{ data.taskId || '-' }}</p>
@@ -16,9 +16,12 @@
     </div>
     <div>
       <p class="task-detail">상태</p>
-      <div class="w-fit">
+      <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>
@@ -42,6 +45,7 @@
         v-else
         class="flex gap-2">
         <img
+          v-if="data.processorNickName"
           :src="data.processorImageUrl || '/images/mockProfile.jpg'"
           class="rounded-full overflow-hidden w-5 h-5"
           alt="processorImg" />
@@ -76,6 +80,7 @@ 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 memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
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/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/types/common.ts b/src/types/common.ts
index a96b9526..9bedb317 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -99,3 +99,8 @@ export interface LabelColorTypes {
   fillColor: string
   colorEnum: string
 }
+
+export interface TaskStatusListTypes{
+  value: Status
+  content: string
+}

From 9fdc49c3c9bd90825f664848e48117ab04f22a4d Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 16:51:31 +0900
Subject: [PATCH 09/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EB=8B=B4?=
 =?UTF-8?q?=EB=8B=B9=EC=9E=90=EC=9A=A9=20api=20get=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=EC=8A=B9=EC=9D=B8=20=EC=8B=9C=20=EC=8A=B9?=
 =?UTF-8?q?=EC=9D=B8=20=EA=B2=BD=EB=A1=9C=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts                               |  5 +++++
 src/components/task-detail/TaskDetail.vue     |  7 ++++---
 .../task-detail/TaskDetailTopBar.vue          | 20 ++++++++++---------
 src/types/manager.ts                          |  1 +
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/api/user.ts b/src/api/user.ts
index 582284e0..28ca9ccf 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -9,3 +9,8 @@ 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/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 90b4cb43..531a2dc2 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -4,7 +4,8 @@
       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" />
+        :close-task-detail="closeTaskDetail"
+        :id="data?.taskId || 0" />
       <div
         class="w-full flex gap-6"
         v-if="data">
@@ -23,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { getTaskDetailUser } from '@/api/user'
+import { getTaskDetailManager } from '@/api/user'
 import * as taskDetailData from '@/datas/taskdetail'
 import type { TaskDetailDatas, TaskDetailProps } from '@/types/user'
 import { useQuery } from '@tanstack/vue-query'
@@ -37,6 +38,6 @@ const { isApproved, closeTaskDetail, selectedId } = defineProps<TaskDetailProps>
 
 const { data } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
-  queryFn: () => getTaskDetailUser(selectedId)
+  queryFn: () => getTaskDetailManager(selectedId)
 })
 </script>
diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index f92730d7..3674414d 100644
--- a/src/components/task-detail/TaskDetailTopBar.vue
+++ b/src/components/task-detail/TaskDetailTopBar.vue
@@ -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,15 +43,23 @@
 </template>
 
 <script setup lang="ts">
-import { approveIcon, 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 { 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')
 
@@ -77,9 +78,10 @@ const cancelTask = () => {
 
 const ApproveTask = () => {
   toggleModal('approve')
+  router.push(`/request-approve/${id}`)
 }
 
-const { isApproved, closeTaskDetail } = defineProps<TaskDetailTopBarProps>()
+const { isApproved, closeTaskDetail, id } = defineProps<TaskDetailTopBarProps>()
 </script>
 
 <style scoped></style>
diff --git a/src/types/manager.ts b/src/types/manager.ts
index 12f0b22b..555dfe9e 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -102,6 +102,7 @@ export interface MyTaskDetailDatas {
 export interface TaskDetailTopBarProps {
   isApproved: boolean
   closeTaskDetail: () => void
+  id: number
 }
 
 export interface DraggableEvent {

From 26d27c1d182d29ae81409c734dde6a37d04f6cac Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 16:52:09 +0900
Subject: [PATCH 10/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=ED=8F=AC=EB=A7=A4=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/my-task/MyTaskFilterBar.vue       | 2 +-
 src/components/requested/RequestedFilterBar.vue  | 2 +-
 src/components/task-board/TaskBoardFilterBar.vue | 2 +-
 src/components/task-detail/TaskDetailRight.vue   | 4 +++-
 src/types/common.ts                              | 2 +-
 5 files changed, 7 insertions(+), 5 deletions(-)

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/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/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 8475afbf..66c6c2ef 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -16,7 +16,9 @@
     </div>
     <div>
       <p class="task-detail">상태</p>
-      <div v-if="data.taskStatus === 'REQUESTED'" class="w-fit">
+      <div
+        v-if="data.taskStatus === 'REQUESTED'"
+        class="w-fit">
         <TaskStatus :status="data.taskStatus" />
       </div>
       <div v-else>
diff --git a/src/types/common.ts b/src/types/common.ts
index 9bedb317..6a4ecc51 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -100,7 +100,7 @@ export interface LabelColorTypes {
   colorEnum: string
 }
 
-export interface TaskStatusListTypes{
+export interface TaskStatusListTypes {
   value: Status
   content: string
 }

From a925642bad5bb0e947394e685c07994765ca5110 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 22:16:58 +0900
Subject: [PATCH 11/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EB=88=84?=
 =?UTF-8?q?=EB=9D=BD=20=ED=83=80=EC=9E=85=20=EC=A0=81=EC=9A=A9=20=EB=B6=88?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=20=EB=B7=B0=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts          |  5 -----
 src/types/common.ts          |  6 ++++++
 src/views/TaskDetailView.vue | 17 -----------------
 3 files changed, 6 insertions(+), 22 deletions(-)
 delete mode 100644 src/views/TaskDetailView.vue

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/common.ts b/src/types/common.ts
index 6a4ecc51..9a179847 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -79,6 +79,12 @@ export interface ColorSelectProps {
   newLabel: LabelDataTypes
 }
 
+export interface CategoryForm {
+  name: string
+  code: string
+  mainCategoryId?: number
+}
+
 export interface CategoryDropdownProps {
   options: Category[] | SubCategory[]
   labelName: string
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>