From 333491cf3f4b26a82eaf57b49cf1f725cba136fe Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 14:55:51 +0900
Subject: [PATCH 01/17] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EB=8B=B4?=
 =?UTF-8?q?=EB=8B=B9=EC=9E=90=20=EB=B3=80=EA=B2=BD=20=EB=93=9C=EB=A1=AD?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../task-detail/TaskDetailManagerDropdown.vue | 74 +++++++++++++++++++
 .../task-detail/TaskDetailRight.vue           | 48 +++++++-----
 2 files changed, 105 insertions(+), 17 deletions(-)
 create mode 100644 src/components/task-detail/TaskDetailManagerDropdown.vue

diff --git a/src/components/task-detail/TaskDetailManagerDropdown.vue b/src/components/task-detail/TaskDetailManagerDropdown.vue
new file mode 100644
index 00000000..d4437cd0
--- /dev/null
+++ b/src/components/task-detail/TaskDetailManagerDropdown.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <p class="task-detail">담당자</p>
+    <div class="relative flex text-base">
+      <div
+        class="task-detail-manager-dropdown"
+        @click="toggleDropdown">
+        <div class="flex gap-2 items-center">
+          <div
+            v-if="modelValue"
+            class="w-5 h-5 rounded-full overflow-hidden">
+            <img
+              :src="modelValue?.imageUrl || '/images/mockProfile.jpg'"
+              alt="userProfile" />
+          </div>
+          <p>
+            {{ modelValue?.nickname }}
+          </p>
+        </div>
+        <CommonIcons
+          :name="dropdownIcon"
+          :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
+      </div>
+      <div
+        v-if="dropdownOpen"
+        class="request-task-dropdown-option-list">
+        <div
+          v-for="option in managerArr"
+          :key="option.memberId"
+          class="request-task-dropdown-option justify-between"
+          @click="selectOption(option)">
+          <div class="flex gap-2">
+            <div class="w-5 h-5 rounded-full overflow-hidden">
+              <img
+                :src="option.imageUrl || '/images/mockProfile.jpg'"
+                alt="userProfile" />
+            </div>
+            <p>
+              {{ option.nickname }}
+            </p>
+          </div>
+          <p class="text-primary1 text-xs">잔여 작업 : {{ option.remainingTasks }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getManager } from '@/api/user'
+import { dropdownIcon } from '@/constants/iconPath'
+import type { ManagerTypes } from '@/types/manager'
+import { onMounted, ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+
+const { modelValue } = defineProps<{ modelValue: ManagerTypes }>()
+const emit = defineEmits(['update:modelValue'])
+
+const dropdownOpen = ref(false)
+const managerArr = ref<ManagerTypes[]>([])
+
+onMounted(async () => {
+  managerArr.value = await getManager()
+})
+
+const toggleDropdown = () => {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+const selectOption = (option: ManagerTypes) => {
+  emit('update:modelValue', option)
+  dropdownOpen.value = false
+}
+</script>
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index c0055646..89262576 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -36,12 +36,10 @@
       </div>
     </div>
     <div>
-      <p class="task-detail">처리자</p>
-      <div v-if="isManager && data.processorNickName">
-        <!-- <TaskDetailDropdown
-          v-model="processor"
-          :options="DUMMY_REQUEST_PROCESSORS"
-          :processor="DUMMY_PROCESSOR" /> -->
+      <div v-if="isProcessor && data.processorNickName">
+        <TaskDetailManagerDropdown
+          v-model="newManager"
+          :placeholderText="data.processorNickName" />
       </div>
       <div
         v-else
@@ -54,7 +52,7 @@
         <p class="text-sm text-black">{{ data.processorNickName || '-' }}</p>
       </div>
     </div>
-    <div v-if="isManager && data.dueDate">
+    <div v-if="isProcessor && 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>
@@ -62,7 +60,7 @@
       </div>
       <p class="text-red-1 text-xs font-bold">3일 전</p>
     </div>
-    <div v-if="isManager && data.labelName">
+    <div v-if="isProcessor && data.labelName">
       <p class="task-detail">구분</p>
       <TaskDetailLabelDropdown
         v-model="labeling"
@@ -73,23 +71,39 @@
 </template>
 
 <script setup lang="ts">
+import { changeProcessor } from '@/api/user'
 import { DUMMY_TASK_LABELS } from '@/datas/taskdetail'
-import { useMemberStore } from '@/stores/member'
+import type { ManagerTypes } from '@/types/manager'
 import type { TaskDetailDatas } from '@/types/user'
 import { formatDate } from '@/utils/date'
-import { storeToRefs } from 'pinia'
-import { computed, defineProps, ref } from 'vue'
+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'
 
-const memberStore = useMemberStore()
-const { info } = storeToRefs(memberStore)
-const isManager = computed(() => info.value.memberName === data.processorNickName)
-
-const { data } = defineProps<{ data: TaskDetailDatas }>()
+const { data, isProcessor } = defineProps<{ data: TaskDetailDatas; isProcessor: boolean }>()
 console.log(data, '가져온 데이터')
 
-// const processor = ref(DUMMY_PROCESSOR.nickName)
+const selectedManager = ref({
+  memberId: -1,
+  nickname: data.processorNickName,
+  imageUrl: data.processorImageUrl,
+  remainingTasks: -1
+} as ManagerTypes)
+
+const newManager = ref(selectedManager.value)
+
+watch(newManager, async newValue => {
+  if (newValue?.nickname !== selectedManager.value.nickname && newValue) {
+    try {
+      await changeProcessor(data.taskId, newValue.memberId)
+      selectedManager.value = newValue
+    } catch (error) {
+      console.error('Error updating processor', error)
+    }
+  }
+})
+
 const labeling = ref(DUMMY_TASK_LABELS[0].labelName)
 </script>

From 4d56eea01e5d14af3e6e35e60bcff997b74d385d Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 14:58:07 +0900
Subject: [PATCH 02/17] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EB=8B=B4?=
 =?UTF-8?q?=EB=8B=B9=EC=9E=90=20=EB=B3=80=EA=B2=BD=20api=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts       | 5 +++++
 src/assets/styles.css | 3 +++
 src/types/user.ts     | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/src/api/user.ts b/src/api/user.ts
index 00bcc2d9..f64a3325 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -30,3 +30,8 @@ export const getManager = async () => {
   const response = await axiosInstance.get('/api/managers')
   return response.data
 }
+
+export const changeProcessor = async (taskID: number, processorId: number) => {
+  const response = await axiosInstance.patch(`/api/tasks/${taskID}/processor`, { processorId })
+  return response.data
+}
diff --git a/src/assets/styles.css b/src/assets/styles.css
index cce74742..f63b503c 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -138,3 +138,6 @@ body {
 .task-detail-dropdown-option {
   @apply w-full flex items-center h-10 p-2 rounded hover:bg-background-2 cursor-pointer;
 }
+.task-detail-manager-dropdown {
+  @apply flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black;
+}
diff --git a/src/types/user.ts b/src/types/user.ts
index d1c0ce1e..adb83f8d 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -162,3 +162,7 @@ export interface ManagerDropdownProps {
   placeholderText: string
   isInvalidate: string
 }
+
+export interface DetailManagerDropdownProps {
+  modelValue: ManagerTypes
+}

From 3f441a660de7be76c1f02c65938b30db38421892 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 14:58:52 +0900
Subject: [PATCH 03/17] =?UTF-8?q?:recycle:=20[refactor]=20:=20isManager?=
 =?UTF-8?q?=EC=9D=84=20=EC=B2=98=EB=A6=AC=EC=9E=90=EC=99=80=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A0=80=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EB=B9=84=EA=B5=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/my-task/MyTaskListCard.vue      | 15 ++++++++++++++-
 src/components/task-detail/TaskDetail.vue      | 11 +++++++++--
 .../task-detail/TaskDetailTopBar.vue           | 18 ++++++------------
 src/types/manager.ts                           |  1 +
 4 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/components/my-task/MyTaskListCard.vue b/src/components/my-task/MyTaskListCard.vue
index 1130aaed..6f65758b 100644
--- a/src/components/my-task/MyTaskListCard.vue
+++ b/src/components/my-task/MyTaskListCard.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,27 @@
       :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 { MyTaskListData } from '@/types/manager'
 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: MyTaskListData }>()
+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 531a2dc2..33397aa4 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -5,7 +5,8 @@
       <TaskDetailTopBar
         :is-approved="isApproved"
         :close-task-detail="closeTaskDetail"
-        :id="data?.taskId || 0" />
+        :id="data?.taskId || 0"
+        :isProcessor="data?.processorNickName === info.nickname" />
       <div
         class="w-full flex gap-6"
         v-if="data">
@@ -17,7 +18,9 @@
             :is-approved="false" />
         </div>
         <div class="w-[1px] bg-border-1"></div>
-        <TaskDetailRight :data />
+        <TaskDetailRight
+          :data
+          :isProcessor="data?.processorNickName === info.nickname" />
       </div>
     </div>
   </div>
@@ -26,8 +29,10 @@
 <script setup lang="ts">
 import { getTaskDetailManager } from '@/api/user'
 import * as taskDetailData from '@/datas/taskdetail'
+import { useMemberStore } from '@/stores/member'
 import type { TaskDetailDatas, TaskDetailProps } from '@/types/user'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import TaskDetailHistory from './TaskDetailHistory.vue'
 import TaskDetailLeft from './TaskDetailLeft.vue'
 import TaskDetailRight from './TaskDetailRight.vue'
@@ -36,6 +41,8 @@ import TaskDetailTopBar from './TaskDetailTopBar.vue'
 const { DUMMY_TASK_DETAIL_HISTORY } = taskDetailData
 const { isApproved, closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
 const { data } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
   queryFn: () => getTaskDetailManager(selectedId)
diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index 3674414d..46e31bb1 100644
--- a/src/components/task-detail/TaskDetailTopBar.vue
+++ b/src/components/task-detail/TaskDetailTopBar.vue
@@ -2,20 +2,20 @@
   <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"
+        v-if="!isProcessor && isApproved"
         class="flex gap-1 items-center cursor-pointer">
         <CommonIcons :name="reRequestIcon" />
         <p class="text-body">재요청</p>
       </div>
       <div
-        v-if="!isManager && !isApproved"
+        v-if="!isProcessor && !isApproved"
         class="flex gap-1 items-center cursor-pointer">
         <CommonIcons :name="modificationIcon" />
         <p class="text-primary1">요청 수정</p>
       </div>
       <div
         @click="ApproveTask"
-        v-if="isManager && !isApproved"
+        v-if="isProcessor && !isApproved"
         class="flex gap-1 items-center cursor-pointer">
         <CommonIcons :name="approveIcon" />
         <p class="text-primary1">요청 승인</p>
@@ -50,18 +50,14 @@ import {
   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 { 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 { isApproved, closeTaskDetail, id, isProcessor } = defineProps<TaskDetailTopBarProps>()
 
 const isModalOpen = ref({
   cancel: false,
@@ -81,7 +77,5 @@ const ApproveTask = () => {
   router.push(`/request-approve/${id}`)
 }
 
-const { isApproved, closeTaskDetail, id } = defineProps<TaskDetailTopBarProps>()
+console.log(isProcessor, '이즈 프로세서 값')
 </script>
-
-<style scoped></style>
diff --git a/src/types/manager.ts b/src/types/manager.ts
index 0afe8950..fa34785c 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -102,6 +102,7 @@ export interface TaskDetailTopBarProps {
   isApproved: boolean
   closeTaskDetail: () => void
   id: number
+  isProcessor: boolean
 }
 
 export interface DraggableEvent {

From a2bddc830884cd5da5f38c4044520a1fe57247b4 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 15:32:48 +0900
Subject: [PATCH 04/17] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EB=A7=88?=
 =?UTF-8?q?=EA=B0=90=EA=B8=B0=ED=95=9C=20=EB=B0=8F=20=EB=82=A8=EC=9D=80=20?=
 =?UTF-8?q?=EB=82=A0=EC=A7=9C=20=ED=8F=AC=EB=A7=B7=20=EC=9C=A0=ED=8B=B8?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-detail/TaskStatusList.vue | 48 +++++++++++++++----
 src/utils/date.ts                             | 26 ++++++++++
 2 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/src/components/task-detail/TaskStatusList.vue b/src/components/task-detail/TaskStatusList.vue
index 6b7edcad..f7867ea2 100644
--- a/src/components/task-detail/TaskStatusList.vue
+++ b/src/components/task-detail/TaskStatusList.vue
@@ -1,34 +1,62 @@
 <template>
   <div class="flex flex-wrap items-center gap-2.5">
     <div
-      v-for="status in TASK_STATUS_LIST"
-      :key="status.content"
+      v-for="statusItem in TASK_STATUS_LIST"
+      :key="statusItem.content"
       class="flex px-3 py-1 rounded-[45px]"
-      :class="bgColor(status.value)">
+      :class="[bgColor(statusItem.value), isProcessor ? 'cursor-pointer' : '']"
+      @click="isProcessor ? changeStatus(statusItem.value) : null">
       <span
         class="text-[11px] font-bold"
-        :class="textColor(status.value)">
-        {{ status.content }}
+        :class="textColor(statusItem.value)">
+        {{ statusItem.content }}
       </span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { patchChangeStatus } from '@/api/user'
 import { TASK_STATUS_LIST } from '@/constants/common'
 import type { Status } from '@/types/common'
+import type { TaskStatusListProps } from '@/types/user'
 import { statusAsColor } from '@/utils/statusAsColor'
+import { ref, watch } from 'vue'
 
-const { status } = defineProps<{
-  status: Status
-}>()
+const { modelValue, isProcessor, taskId } = defineProps<TaskStatusListProps>()
+
+const emit = defineEmits(['update:status'])
+
+const currentStatus = ref(modelValue)
+
+watch(
+  () => modelValue,
+  newValue => {
+    currentStatus.value = newValue
+  }
+)
 
 const textColor = (taskStatus: Status) => {
-  return status === taskStatus ? 'text-white' : `text-${statusAsColor(taskStatus)}-1`
+  return currentStatus.value === taskStatus ? 'text-white' : `text-${statusAsColor(taskStatus)}-1`
 }
 const bgColor = (taskStatus: Status) => {
-  return status === taskStatus
+  return currentStatus.value === taskStatus
     ? `bg-${statusAsColor(taskStatus)}-1`
     : `bg-${statusAsColor(taskStatus)}-2`
 }
+
+const changeStatus = async (newStatus: Status) => {
+  if (currentStatus.value === newStatus) {
+    return
+  }
+  currentStatus.value = newStatus
+  emit('update:status', newStatus)
+
+  try {
+    const res = await patchChangeStatus(taskId || 0, newStatus)
+    console.log(res)
+  } catch (error) {
+    console.error('Failed to update status:', error)
+  }
+}
 </script>
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 753a9b85..48a7ef26 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -24,3 +24,29 @@ export const convertToISO = (dateStr: string, timeStr: string) => {
   const date = new Date(`${dateStr}T${timeStr}:00`)
   return date.toISOString()
 }
+
+export const formatDueDate = (dateString: string) => {
+  const date = new Date(dateString)
+
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hours = date.getHours()
+  const minutes = date.getMinutes()
+
+  return `${year}년 ${month}월 ${day}일, ${hours}시 ${minutes}분까지`
+}
+
+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 diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+
+  return `${diffDays}일 남음`
+}

From 756a7ad5fb9fbe94906daadc886b9ae344654307 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 15:33:09 +0900
Subject: [PATCH 05/17] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=8C=80=ED=95=9C=20?=
 =?UTF-8?q?api=20=EC=97=B0=EA=B2=B0=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts                                |  6 ++++++
 src/components/task-detail/TaskDetailRight.vue | 16 ++++++++++------
 src/types/user.ts                              |  6 ++++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/api/user.ts b/src/api/user.ts
index f64a3325..8a8fc717 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,3 +1,4 @@
+import type { Status } from '@/types/common'
 import type { RequestApprovePostTypes } from '@/types/manager'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
 
@@ -35,3 +36,8 @@ export const changeProcessor = async (taskID: number, processorId: number) => {
   const response = await axiosInstance.patch(`/api/tasks/${taskID}/processor`, { processorId })
   return response.data
 }
+
+export const patchChangeStatus = async (taskID: number, status: Status) => {
+  const response = await axiosInstance.patch(`/api/tasks/${taskID}/status`, status)
+  return response.data
+}
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 89262576..643c9b71 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -22,7 +22,10 @@
         <TaskStatus :status="data.taskStatus" />
       </div>
       <div v-else>
-        <TaskStatusList :status="data.taskStatus" />
+        <TaskStatusList
+          v-model="taskStatus"
+          :isProcessor="isProcessor"
+          :taskId="data.taskId" />
       </div>
     </div>
     <div>
@@ -55,10 +58,9 @@
     <div v-if="isProcessor && 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>
-        <p class="text-primary1 text-xs font-bold">변경</p>
+        <p class="text-sm text-black">{{ formatDueDate(data.dueDate) || '-' }}</p>
       </div>
-      <p class="text-red-1 text-xs font-bold">3일 전</p>
+      <p class="text-red-1 text-xs font-bold">{{ formatDaysBefore(data.dueDate) }}</p>
     </div>
     <div v-if="isProcessor && data.labelName">
       <p class="task-detail">구분</p>
@@ -75,7 +77,7 @@ import { changeProcessor } from '@/api/user'
 import { DUMMY_TASK_LABELS } from '@/datas/taskdetail'
 import type { ManagerTypes } from '@/types/manager'
 import type { TaskDetailDatas } from '@/types/user'
-import { formatDate } from '@/utils/date'
+import { formatDate, formatDaysBefore, formatDueDate } from '@/utils/date'
 import { defineProps, ref, watch } from 'vue'
 import TaskStatus from '../TaskStatus.vue'
 import TaskDetailLabelDropdown from './TaskDetailLabelDropdown.vue'
@@ -83,7 +85,9 @@ import TaskDetailManagerDropdown from './TaskDetailManagerDropdown.vue'
 import TaskStatusList from './TaskStatusList.vue'
 
 const { data, isProcessor } = defineProps<{ data: TaskDetailDatas; isProcessor: boolean }>()
-console.log(data, '가져온 데이터')
+console.log(data.dueDate)
+
+const taskStatus = ref(data.taskStatus)
 
 const selectedManager = ref({
   memberId: -1,
diff --git a/src/types/user.ts b/src/types/user.ts
index adb83f8d..4e38d3bd 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -166,3 +166,9 @@ export interface ManagerDropdownProps {
 export interface DetailManagerDropdownProps {
   modelValue: ManagerTypes
 }
+
+export interface TaskStatusListProps {
+  modelValue: Status
+  isProcessor: boolean
+  taskId?: number
+}

From 0782839e6c3b9c99ff09181c462e83cddbe458c6 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 15:40:33 +0900
Subject: [PATCH 06/17] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EB=B6=88?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=20mockup=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/datas/taskdetail.ts | 34 ----------------------------------
 1 file changed, 34 deletions(-)

diff --git a/src/datas/taskdetail.ts b/src/datas/taskdetail.ts
index 06afc167..cafea856 100644
--- a/src/datas/taskdetail.ts
+++ b/src/datas/taskdetail.ts
@@ -1,4 +1,3 @@
-import type { LabelDataTypes } from '@/types/common'
 import type { TaskDetailHistoryProps } from '@/types/user'
 
 export const DUMMY_REQUEST_TASK_CATEGORIES: string[] = [
@@ -66,36 +65,3 @@ export const DUMMY_TASK_DETAIL_HISTORY: TaskDetailHistoryProps[] = [
     }
   }
 ]
-
-export const DUMMY_REQUEST_TASK_LABELS: string[] = ['긴급', '정기', '오류', '점검']
-
-export const DUMMY_PROCESSOR = {
-  nickName: 'Tony',
-  profileUrl: 'images/mockProfile.jpg',
-  totalAssignedTasks: 5
-}
-
-export const DUMMY_TASK_DETAIL_LABELS: string[] = ['긴급', '정기', '오류', '점검']
-
-export const DUMMY_TASK_LABELS: LabelDataTypes[] = [
-  {
-    labelId: 1,
-    labelName: '긴급',
-    labelColor: 'red'
-  },
-  {
-    labelId: 2,
-    labelName: '정기',
-    labelColor: 'green'
-  },
-  {
-    labelId: 3,
-    labelName: '오류',
-    labelColor: 'blue'
-  },
-  {
-    labelId: 4,
-    labelName: '점검',
-    labelColor: 'gray'
-  }
-]

From ce47a5b7cd7d4f6e083d0c9d95b8f3c07d02cff0 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 16:26:19 +0900
Subject: [PATCH 07/17] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EA=B5=AC?=
 =?UTF-8?q?=EB=B6=84=20=EB=B3=80=EA=B2=BD=20api=20=EC=97=B0=EA=B2=B0?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts                               |  5 ++
 .../task-detail/TaskDetailLabelDropdown.vue   | 66 +++++++++----------
 .../task-detail/TaskDetailRight.vue           | 26 +++++---
 src/types/user.ts                             |  3 +-
 4 files changed, 55 insertions(+), 45 deletions(-)

diff --git a/src/api/user.ts b/src/api/user.ts
index 8a8fc717..7fb748bb 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -41,3 +41,8 @@ export const patchChangeStatus = async (taskID: number, status: Status) => {
   const response = await axiosInstance.patch(`/api/tasks/${taskID}/status`, status)
   return response.data
 }
+
+export const changeLabel = async (taskID: number, labelId: number) => {
+  const response = await axiosInstance.patch(`/api/tasks/${taskID}/label`, { labelId })
+  return response.data
+}
diff --git a/src/components/task-detail/TaskDetailLabelDropdown.vue b/src/components/task-detail/TaskDetailLabelDropdown.vue
index 5a931857..bb5c46d8 100644
--- a/src/components/task-detail/TaskDetailLabelDropdown.vue
+++ b/src/components/task-detail/TaskDetailLabelDropdown.vue
@@ -1,57 +1,53 @@
 <template>
-  <div>
-    <div class="relative flex">
-      <div
-        class="task-detail-dropdown"
-        @click="toggleDropdown">
-        <div class="flex gap-2">
-          <div class="w-6 h-6 rounded-full border-red-1 border-2 bg-red-2"></div>
-          <p class="text-black">
-            {{ modelValue }}
-          </p>
-        </div>
-        <CommonIcons
-          :name="dropdownIcon"
-          :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
-      </div>
+  <div class="relative flex text-base">
+    <div
+      class="flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-sm text-black"
+      @click="toggleDropdown">
+      <p :class="{ 'text-disabled': !modelValue?.labelName }">
+        {{ modelValue?.labelName || placeholderText }}
+      </p>
+      <CommonIcons
+        :name="dropdownIcon"
+        :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
+    </div>
+    <div
+      v-if="dropdownOpen"
+      class="absolute w-full h-40 overflow-y-auto top-12 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow text-black">
       <div
-        v-if="dropdownOpen"
-        class="task-detail-dropdown-option-list">
-        <div
-          v-for="option in options"
-          :key="option.labelId"
-          class="task-detail-dropdown-option justify-between"
-          @click="selectOption(option.labelName)">
-          <div class="flex gap-2 items-center">
-            <div
-              class="w-6 h-6 rounded-full overflow-hidden"
-              :style="{ border: `2px solid ${option.labelColor}` }"></div>
-            <p class="text-sm">
-              {{ option.labelName }}
-            </p>
-          </div>
-        </div>
+        v-for="option in labelArr"
+        :key="option.labelId"
+        class="w-full flex text-sm items-center h-10 p-1.5 rounded hover:bg-background-2 cursor-pointer"
+        @click="selectOption(option)">
+        {{ option.labelName }}
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { changeLabel, getLabelsManager } from '@/api/user'
 import { dropdownIcon } from '@/constants/iconPath'
-import type { TaskDetailLabelDropdownProps } from '@/types/user'
-import { ref } from 'vue'
+import type { LabelDataTypes } from '@/types/common'
+import type { LabelDropdownProps } from '@/types/user'
+import { onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { options, modelValue } = defineProps<TaskDetailLabelDropdownProps>()
+const { modelValue, placeholderText, taskId } = defineProps<LabelDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
 const dropdownOpen = ref(false)
 
+const labelArr = ref<LabelDataTypes[]>([])
+
+onMounted(async () => {
+  labelArr.value = await getLabelsManager()
+})
 const toggleDropdown = () => {
   dropdownOpen.value = !dropdownOpen.value
 }
 
-const selectOption = (option: string) => {
+const selectOption = async (option: LabelDataTypes) => {
   emit('update:modelValue', option)
+  await changeLabel(taskId || 0, option.labelId || 0)
   dropdownOpen.value = false
 }
 </script>
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 643c9b71..53dabecd 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -55,26 +55,31 @@
         <p class="text-sm text-black">{{ data.processorNickName || '-' }}</p>
       </div>
     </div>
-    <div v-if="isProcessor && data.dueDate">
+    <div v-if="data.dueDate">
       <p class="task-detail">마감기한</p>
       <div class="w-full flex justify-between items-center">
         <p class="text-sm text-black">{{ formatDueDate(data.dueDate) || '-' }}</p>
       </div>
       <p class="text-red-1 text-xs font-bold">{{ formatDaysBefore(data.dueDate) }}</p>
     </div>
-    <div v-if="isProcessor && data.labelName">
+    <div>
       <p class="task-detail">구분</p>
       <TaskDetailLabelDropdown
-        v-model="labeling"
-        :options="DUMMY_TASK_LABELS"
-        :processor="data.labelName" />
+        v-if="isProcessor && data.labelName"
+        v-model="taskLabel"
+        :placeholder-text="'라벨을 선택해주세요'"
+        :task-id="data.taskId" />
+      <div
+        v-else-if="data.labelName && !isProcessor"
+        class="flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 px-4 text-sm text-black">
+        {{ data.labelName }}
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { changeProcessor } from '@/api/user'
-import { DUMMY_TASK_LABELS } from '@/datas/taskdetail'
 import type { ManagerTypes } from '@/types/manager'
 import type { TaskDetailDatas } from '@/types/user'
 import { formatDate, formatDaysBefore, formatDueDate } from '@/utils/date'
@@ -85,10 +90,15 @@ import TaskDetailManagerDropdown from './TaskDetailManagerDropdown.vue'
 import TaskStatusList from './TaskStatusList.vue'
 
 const { data, isProcessor } = defineProps<{ data: TaskDetailDatas; isProcessor: boolean }>()
-console.log(data.dueDate)
 
 const taskStatus = ref(data.taskStatus)
 
+const taskLabel = ref({
+  labelId: -1,
+  labelName: data.labelName || '',
+  labelColor: ''
+})
+
 const selectedManager = ref({
   memberId: -1,
   nickname: data.processorNickName,
@@ -108,6 +118,4 @@ watch(newManager, async newValue => {
     }
   }
 })
-
-const labeling = ref(DUMMY_TASK_LABELS[0].labelName)
 </script>
diff --git a/src/types/user.ts b/src/types/user.ts
index 4e38d3bd..1c7f8bc8 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -120,7 +120,7 @@ export interface TaskDetailRightProps {
 
 export interface TaskDetailLabelDropdownProps {
   options: LabelDataTypes[]
-  modelValue: string
+  modelValue: LabelDataTypes
 }
 
 export interface TaskHistoryDatas {
@@ -153,6 +153,7 @@ export interface MyRequestResponse {
 }
 
 export interface LabelDropdownProps {
+  taskId?:number
   modelValue: LabelDataTypes | null
   placeholderText: string
 }

From 05db462e750aa9899e231de059942d38e79f33fa Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 00:19:07 +0900
Subject: [PATCH 08/17] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EB=B6=88?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=20mockup=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/datas/taskdetail.ts | 67 -----------------------------------------
 1 file changed, 67 deletions(-)
 delete mode 100644 src/datas/taskdetail.ts

diff --git a/src/datas/taskdetail.ts b/src/datas/taskdetail.ts
deleted file mode 100644
index cafea856..00000000
--- a/src/datas/taskdetail.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { TaskDetailHistoryProps } from '@/types/user'
-
-export const DUMMY_REQUEST_TASK_CATEGORIES: string[] = [
-  'Categroy 1',
-  'Categroy 2',
-  'Categroy 3',
-  'Categroy 4'
-]
-
-export const DUMMY_TASK_DETAIL_HISTORY: TaskDetailHistoryProps[] = [
-  {
-    date: '2023-10-01',
-    time: '10:00',
-    name: 'John Doe',
-    profileImageUrl: 'images/mockProfile.jpg',
-    TaskHistoryType: 'COMMENT',
-    isModified: false,
-    details: {
-      previousProcessor: 'Hello.world',
-      currentProcessor: 'Tony.tsx',
-      comment: 'Initial comment on the task.'
-    }
-  },
-  {
-    date: '2023-10-02',
-    time: '11:30',
-    name: 'Jane Smith',
-    profileImageUrl: 'images/mockProfile.jpg',
-    TaskHistoryType: 'STATUS_SWITCHED',
-    isModified: true,
-    details: {
-      previousProcessor: 'Hello.world',
-      currentProcessor: 'Tony.tsx',
-      taskStatus: 'In Progress'
-    }
-  },
-  {
-    date: '2023-10-03',
-    time: '14:45',
-    name: 'Alice Johnson',
-    profileImageUrl: 'images/mockProfile.jpg',
-    TaskHistoryType: 'PROCESSOR_ASSIGNED',
-    isModified: false,
-    details: {
-      previousProcessor: 'Hello.world',
-      currentProcessor: 'Tony.tsx',
-      updateDetails: 'Processor assigned to Tony.'
-    }
-  },
-  {
-    date: '2023-10-04',
-    time: '16:20',
-    name: 'Bob Brown',
-    profileImageUrl: 'images/mockProfile.jpg',
-    TaskHistoryType: 'COMMENT_FILE',
-    isModified: true,
-    details: {
-      previousProcessor: 'Hello.world',
-      currentProcessor: 'Tony.tsx',
-      file: {
-        fileId: 1,
-        fileUrl: 'https://example.com/file1.pdf',
-        fileName: 'file1.pdf'
-      }
-    }
-  }
-]

From ad1d77d911052e155d3ed36af043c7cf9e716757 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 00:19:56 +0900
Subject: [PATCH 09/17] =?UTF-8?q?:sparkles:=20[feat]=20:=20=ED=9E=88?=
 =?UTF-8?q?=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EC=83=81=EC=84=B8=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=20=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?,=20=EB=8B=B4=EB=8B=B9=EC=9E=90=20=EB=B3=80=EA=B2=BD=EC=8B=9C?=
 =?UTF-8?q?=20invalidate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts                               |  5 ++
 src/assets/styles.css                         |  2 +-
 src/components/task-detail/TaskDetail.vue     | 18 ++++---
 .../task-detail/TaskDetailHistory.vue         | 29 +++++------
 .../task-detail/TaskDetailHistoryInput.vue    | 10 ++--
 .../task-detail/TaskDetailLabelDropdown.vue   |  2 +-
 .../task-detail/TaskDetailManagerDropdown.vue |  2 +-
 .../task-detail/TaskDetailRight.vue           |  5 +-
 src/components/task-detail/TaskStatusList.vue |  5 +-
 src/constants/user.ts                         |  6 ++-
 src/types/user.ts                             | 48 ++++++++++++-------
 11 files changed, 84 insertions(+), 48 deletions(-)

diff --git a/src/api/user.ts b/src/api/user.ts
index 7fb748bb..0315d6e2 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -46,3 +46,8 @@ export const changeLabel = async (taskID: number, labelId: number) => {
   const response = await axiosInstance.patch(`/api/tasks/${taskID}/label`, { labelId })
   return response.data
 }
+
+export const getHistory = async (taskID: number) => {
+  const response = await axiosInstance.get(`/api/tasks/${taskID}/histories`)
+  return response.data
+}
diff --git a/src/assets/styles.css b/src/assets/styles.css
index f63b503c..4627248b 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -110,7 +110,7 @@ body {
   @apply flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black;
 }
 .request-task-dropdown-option-list {
-  @apply absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2 text-black;
+  @apply absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom text-black;
 }
 .request-task-dropdown-option {
   @apply w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer;
diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 33397aa4..69e9beaa 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -14,8 +14,8 @@
           <TaskDetailLeft :data="data" />
           <div class="w-full border-[0.5px] border-border-1"></div>
           <TaskDetailHistory
-            :history="DUMMY_TASK_DETAIL_HISTORY"
-            :is-approved="false" />
+            :historyData="historyData?.histories || []"
+            :is-approved="isApproved" />
         </div>
         <div class="w-[1px] bg-border-1"></div>
         <TaskDetailRight
@@ -27,10 +27,9 @@
 </template>
 
 <script setup lang="ts">
-import { getTaskDetailManager } from '@/api/user'
-import * as taskDetailData from '@/datas/taskdetail'
+import { getHistory, getTaskDetailManager } from '@/api/user'
 import { useMemberStore } from '@/stores/member'
-import type { TaskDetailDatas, TaskDetailProps } from '@/types/user'
+import type { TaskDetailDatas, TaskDetailHistoryProps, TaskDetailProps } from '@/types/user'
 import { useQuery } from '@tanstack/vue-query'
 import { storeToRefs } from 'pinia'
 import TaskDetailHistory from './TaskDetailHistory.vue'
@@ -38,13 +37,20 @@ import TaskDetailLeft from './TaskDetailLeft.vue'
 import TaskDetailRight from './TaskDetailRight.vue'
 import TaskDetailTopBar from './TaskDetailTopBar.vue'
 
-const { DUMMY_TASK_DETAIL_HISTORY } = taskDetailData
 const { isApproved, closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
+
 const { data } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
   queryFn: () => getTaskDetailManager(selectedId)
 })
+
+const { data: historyData } = useQuery<TaskDetailHistoryProps>({
+  queryKey: ['historyData', selectedId],
+  queryFn: () => getHistory(selectedId)
+})
+
+console.log(historyData.value, '가져온 히스ㅇ토리', selectedId, '선택된 id')
 </script>
diff --git a/src/components/task-detail/TaskDetailHistory.vue b/src/components/task-detail/TaskDetailHistory.vue
index 4be13103..d6670ad3 100644
--- a/src/components/task-detail/TaskDetailHistory.vue
+++ b/src/components/task-detail/TaskDetailHistory.vue
@@ -1,33 +1,33 @@
 <template>
   <div>
     <p class="task-detail">히스토리</p>
-    <TaskDetailHistoryInput :history="history" />
+    <TaskDetailHistoryInput :history="historyData" />
     <div class="flex flex-col w-full items-center gap-6 mt-8">
       <div
         class="flex w-full flex-col items-center gap-6"
-        v-for="item in history"
-        :key="item.name">
+        v-for="item in historyData"
+        :key="item.historyId">
         <div
-          class="flex w-[150px] h-7 items-center justify-center bg-primary1 rounded-xl text-white text-xs font-bold">
+          class="flex px-4 h-7 items-center justify-center bg-primary1 rounded-full text-white text-xs font-bold">
           {{ formatDateWithDay(item.date) }}
         </div>
         <div class="flex w-full gap-1 justify-center text-body text-sm">
-          <p>{{ HistoryMessageBefore[item.TaskHistoryType] }}</p>
+          <p>{{ HistoryMessageBefore[item.taskHistoryType] }}</p>
           <p
-            v-if="item.TaskHistoryType === 'STATUS_SWITCHED'"
+            v-if="item.taskHistoryType === 'STATUS_SWITCHED'"
             class="text-primary1">
-            {{ item.details.taskStatus }}
+            {{ item.details.taskDetails?.value }}
           </p>
           <p
             v-else-if="
-              item.TaskHistoryType === 'PROCESSOR_CHANGED' ||
-              item.TaskHistoryType === 'PROCESSOR_ASSIGNED'
+              item.taskHistoryType === 'PROCESSOR_CHANGED' ||
+              item.taskHistoryType === 'PROCESSOR_ASSIGNED'
             "
             class="text-primary1">
-            {{ item.name }}
+            {{ item.details.taskDetails?.value }}
           </p>
-          <TaskDetailHistoryChat v-else-if="item.TaskHistoryType === 'COMMENT'" />
-          <p>{{ HistoryMessageAfter[item.TaskHistoryType] }}</p>
+          <TaskDetailHistoryChat v-else-if="item.taskHistoryType === 'COMMENT'" />
+          <p>{{ HistoryMessageAfter[item.taskHistoryType] }}</p>
         </div>
       </div>
     </div>
@@ -36,10 +36,11 @@
 
 <script setup lang="ts">
 import { HistoryMessageAfter, HistoryMessageBefore } from '@/constants/user'
-import type { TaskDetailHistoryProps } from '@/types/user'
+import type { TaskHistory } from '@/types/user'
 import { formatDateWithDay } from '@/utils/date'
 import TaskDetailHistoryChat from './TaskDetailHistoryChat.vue'
 import TaskDetailHistoryInput from './TaskDetailHistoryInput.vue'
 
-const { history } = defineProps<{ history: TaskDetailHistoryProps[] }>()
+const { historyData } = defineProps<{ historyData: TaskHistory[] }>()
+console.log(historyData, '가져온 히스토리')
 </script>
diff --git a/src/components/task-detail/TaskDetailHistoryInput.vue b/src/components/task-detail/TaskDetailHistoryInput.vue
index 227d7181..db6b0ba8 100644
--- a/src/components/task-detail/TaskDetailHistoryInput.vue
+++ b/src/components/task-detail/TaskDetailHistoryInput.vue
@@ -2,18 +2,18 @@
   <div
     :class="[
       'w-full flex gap-3 px-6 py-4 border border-border-1 items-center',
-      { 'bg-background-2': !isPossible }
+      { 'bg-background-2': isPossible }
     ]">
     <input
       class="w-full h-8 focus:outline-none"
       type="text"
       :placeholder="placeHolderText"
-      :disabled="!isPossible" />
+      :disabled="isPossible" />
     <input
       class="hidden"
       type="file"
       id="file"
-      :disabled="!isPossible"
+      :disabled="isPossible"
       multiple
       @change="handleFileUpload" />
     <label
@@ -30,11 +30,11 @@
 
 <script setup lang="ts">
 import { clipIcon, sendIcon } from '@/constants/iconPath'
-import type { TaskDetailHistoryProps } from '@/types/user'
+import type { TaskHistory } from '@/types/user'
 import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { history } = defineProps<{ history: TaskDetailHistoryProps[] }>()
+const { history } = defineProps<{ history: TaskHistory[] }>()
 const isPossible = ref(history.length === 0)
 const placeHolderText = ref(isPossible?.value ? '텍스트를 입력' : '요청 승인 후 작성할 수 있습니다')
 
diff --git a/src/components/task-detail/TaskDetailLabelDropdown.vue b/src/components/task-detail/TaskDetailLabelDropdown.vue
index bb5c46d8..71b657ac 100644
--- a/src/components/task-detail/TaskDetailLabelDropdown.vue
+++ b/src/components/task-detail/TaskDetailLabelDropdown.vue
@@ -12,7 +12,7 @@
     </div>
     <div
       v-if="dropdownOpen"
-      class="absolute w-full h-40 overflow-y-auto top-12 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow text-black">
+      class="absolute w-full h-40 overflow-y-auto top-12 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom text-black">
       <div
         v-for="option in labelArr"
         :key="option.labelId"
diff --git a/src/components/task-detail/TaskDetailManagerDropdown.vue b/src/components/task-detail/TaskDetailManagerDropdown.vue
index d4437cd0..8a04bb09 100644
--- a/src/components/task-detail/TaskDetailManagerDropdown.vue
+++ b/src/components/task-detail/TaskDetailManagerDropdown.vue
@@ -53,7 +53,7 @@ import type { ManagerTypes } from '@/types/manager'
 import { onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { modelValue } = defineProps<{ modelValue: ManagerTypes }>()
+const { modelValue } = defineProps<{ modelValue: ManagerTypes; taskId: number }>()
 const emit = defineEmits(['update:modelValue'])
 
 const dropdownOpen = ref(false)
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 53dabecd..a187462d 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -42,7 +42,7 @@
       <div v-if="isProcessor && data.processorNickName">
         <TaskDetailManagerDropdown
           v-model="newManager"
-          :placeholderText="data.processorNickName" />
+          :task-id="data.taskId" />
       </div>
       <div
         v-else
@@ -83,6 +83,7 @@ import { changeProcessor } from '@/api/user'
 import type { ManagerTypes } from '@/types/manager'
 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'
@@ -92,6 +93,7 @@ import TaskStatusList from './TaskStatusList.vue'
 const { data, isProcessor } = defineProps<{ data: TaskDetailDatas; isProcessor: boolean }>()
 
 const taskStatus = ref(data.taskStatus)
+const queryClient = useQueryClient()
 
 const taskLabel = ref({
   labelId: -1,
@@ -113,6 +115,7 @@ watch(newManager, async newValue => {
     try {
       await changeProcessor(data.taskId, newValue.memberId)
       selectedManager.value = newValue
+      queryClient.invalidateQueries({ queryKey: ['historyData', data.taskId] })
     } catch (error) {
       console.error('Error updating processor', error)
     }
diff --git a/src/components/task-detail/TaskStatusList.vue b/src/components/task-detail/TaskStatusList.vue
index f7867ea2..51e2995f 100644
--- a/src/components/task-detail/TaskStatusList.vue
+++ b/src/components/task-detail/TaskStatusList.vue
@@ -21,6 +21,7 @@ import { TASK_STATUS_LIST } from '@/constants/common'
 import type { Status } from '@/types/common'
 import type { TaskStatusListProps } from '@/types/user'
 import { statusAsColor } from '@/utils/statusAsColor'
+import { useQueryClient } from '@tanstack/vue-query'
 import { ref, watch } from 'vue'
 
 const { modelValue, isProcessor, taskId } = defineProps<TaskStatusListProps>()
@@ -28,6 +29,7 @@ const { modelValue, isProcessor, taskId } = defineProps<TaskStatusListProps>()
 const emit = defineEmits(['update:status'])
 
 const currentStatus = ref(modelValue)
+const queryClient = useQueryClient()
 
 watch(
   () => modelValue,
@@ -54,7 +56,8 @@ const changeStatus = async (newStatus: Status) => {
 
   try {
     const res = await patchChangeStatus(taskId || 0, newStatus)
-    console.log(res)
+    console.log(res, '상태 바꾸기')
+    queryClient.invalidateQueries({ queryKey: ['historyData', taskId] })
   } catch (error) {
     console.error('Failed to update status:', error)
   }
diff --git a/src/constants/user.ts b/src/constants/user.ts
index 3a719d20..28442bda 100644
--- a/src/constants/user.ts
+++ b/src/constants/user.ts
@@ -27,7 +27,8 @@ export const HistoryMessageBefore: Record<TaskHistoryType, string> = {
   PROCESSOR_CHANGED: '처리자가',
   COMMENT: '',
   COMMENT_FILE: '',
-  PROCESSOR_ASSIGNED: '처리자가'
+  PROCESSOR_ASSIGNED: '처리자가',
+  TASK_TERMINATED: '작업이'
 }
 
 export const HistoryMessageAfter: Record<TaskHistoryType, string> = {
@@ -35,5 +36,6 @@ export const HistoryMessageAfter: Record<TaskHistoryType, string> = {
   PROCESSOR_CHANGED: '님으로 변경되었습니다.',
   COMMENT: '',
   COMMENT_FILE: '',
-  PROCESSOR_ASSIGNED: '님으로 할당되었습니다.'
+  PROCESSOR_ASSIGNED: '님으로 할당되었습니다.',
+  TASK_TERMINATED: '종료되었습니다.'
 }
diff --git a/src/types/user.ts b/src/types/user.ts
index 1c7f8bc8..92059fae 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -73,28 +73,44 @@ export type TaskHistoryType =
   | 'STATUS_SWITCHED'
   | 'PROCESSOR_ASSIGNED'
   | 'PROCESSOR_CHANGED'
+  | 'TASK_TERMINATED'
 
-interface TaskDetailHistoryFileTypes {
-  fileId: number
-  fileUrl: string
-  fileName: string
+export interface TaskDetailHistoryProps {
+  histories: TaskHistory[]
 }
 
-export interface TaskDetailHistoryProps {
+export interface TaskHistory {
+  historyId: number
   date: string
   time: string
-  name: string
+  taskHistoryType: TaskHistoryType
+  details: TaskHistoryDetails
+}
+
+export interface TaskHistoryDetails {
+  taskDetails?: TaskDetails | null
+  commentDetails?: CommentDetails | null
+  commentFileDetails?: CommentFileDetails | null
+}
+
+export interface TaskDetails {
+  value: string
+}
+
+export interface CommentDetails {
+  nickName: string
   profileImageUrl: string
-  TaskHistoryType: TaskHistoryType
   isModified: boolean
-  details: {
-    previousProcessor: string
-    currentProcessor: string
-    comment?: string
-    updateDetails?: string
-    taskStatus?: string
-    file?: TaskDetailHistoryFileTypes
-  }
+  comment: string
+}
+
+export interface CommentFileDetails {
+  nickName: string
+  profileImageUrl: string
+  isModified: boolean
+  fileName: string
+  url: string
+  size: string
 }
 
 export interface TaskDetailProps {
@@ -153,7 +169,7 @@ export interface MyRequestResponse {
 }
 
 export interface LabelDropdownProps {
-  taskId?:number
+  taskId?: number
   modelValue: LabelDataTypes | null
   placeholderText: string
 }

From 0d9cf1c870285934eecb6d8c5846b034718f0b60 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 00:25:32 +0900
Subject: [PATCH 10/17] =?UTF-8?q?:bug:=20[fix]=20:=20=EC=9A=94=EC=B2=AD=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=9B=84=20=EB=AA=A8=EB=8B=AC=EC=9D=B4=20?=
 =?UTF-8?q?=EB=9C=A8=EC=A7=80=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/request-task/RequestTask.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/request-task/RequestTask.vue b/src/components/request-task/RequestTask.vue
index 65d8ffca..985e3d3f 100644
--- a/src/components/request-task/RequestTask.vue
+++ b/src/components/request-task/RequestTask.vue
@@ -42,6 +42,7 @@ 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'
@@ -87,7 +88,6 @@ const handleCancel = () => {
 const handleSubmit = async () => {
   if (!category1.value || !category2.value) {
     isInvalidate.value = 'category'
-    console.log(isInvalidate.value, '변경됨')
     return
   } else if (!title.value) {
     isInvalidate.value = 'input'
@@ -110,8 +110,8 @@ const handleSubmit = async () => {
     file.value.forEach(f => formData.append('attachment', f))
   }
   try {
-    const res = await postTaskRequest(formData)
-    console.error('요청 성공:', res)
+    await postTaskRequest(formData)
+    isModalVisible.value = true
   } catch (error) {
     console.error('요청 실패:', error)
   }

From 5298afbb79d3a7d3623e47102196643c728430f5 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 09:49:19 +0900
Subject: [PATCH 11/17] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=A0=84?=
 =?UTF-8?q?=EC=B2=B4=20=EC=9A=94=EC=B2=AD=20=EA=B8=B0=EB=A1=9D=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RequestHistoryListCard.vue                | 15 ++++-
 .../requested/RequestedListCard.vue           | 64 ++++++++++++++++++-
 src/types/user.ts                             |  2 +-
 3 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/src/components/request-history/RequestHistoryListCard.vue b/src/components/request-history/RequestHistoryListCard.vue
index e2f2bc87..b2b44fb0 100644
--- a/src/components/request-history/RequestHistoryListCard.vue
+++ b/src/components/request-history/RequestHistoryListCard.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,27 @@
       :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 { RequestHistoryListData } from '@/types/manager'
 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: RequestHistoryListData }>()
+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/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue
index c19ee2e4..e1ab1a2f 100644
--- a/src/components/requested/RequestedListCard.vue
+++ b/src/components/requested/RequestedListCard.vue
@@ -14,17 +14,46 @@
         class="button-medium-primary">
         승인
       </button>
-      <button class="button-medium-default">거부</button>
+      <button
+        @click="toggleModal('reject')"
+        class="button-medium-default">
+        거부
+      </button>
     </div>
   </div>
+
+  <ModalView
+    :is-open="isModalVisible.reject"
+    @update:model-value="value => (rejectReason = value)"
+    type="inputType"
+    @close="closeModal"
+    @click="rejectRequest">
+    <template #header>거부 사유를 입력해주세요</template>
+  </ModalView>
+  <ModalView
+    :is-open="isModalVisible.success"
+    type="successType"
+    @close="closeModal">
+    <template #header>거부가 완료되었습니다</template>
+  </ModalView>
+  <ModalView
+    :is-open="isModalVisible.fail"
+    type="failType"
+    @close="closeModal">
+    <template #header>{{ modalError }}</template>
+  </ModalView>
 </template>
 
 <script setup lang="ts">
 import type { ListCardProps } from '@/types/common'
 import type { RequestedListData } from '@/types/manager'
+import { axiosInstance } from '@/utils/axios'
 import { formatDate } from '@/utils/date'
+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'
 
 const { info } = defineProps<{ info: RequestedListData }>()
 const requestedTabList: ListCardProps[] = [
@@ -36,4 +65,37 @@ const requestedTabList: ListCardProps[] = [
 ]
 
 const router = useRouter()
+const queryClient = useQueryClient()
+
+const isModalVisible = ref({
+  reject: false,
+  fail: false,
+  success: false
+})
+const modalError = ref('')
+const rejectReason = ref('')
+const toggleModal = (key: keyof typeof isModalVisible.value) => {
+  isModalVisible.value = Object.fromEntries(
+    Object.keys(isModalVisible.value).map(k => [k, k === key])
+  ) as typeof isModalVisible.value
+}
+const closeModal = () => {
+  const prevSuccess = isModalVisible.value.success
+  isModalVisible.value = { reject: false, fail: false, success: false }
+  if (prevSuccess) queryClient.invalidateQueries({ queryKey: ['requested'] })
+}
+const rejectRequest = async () => {
+  if (rejectReason.value.length === 0) {
+    toggleModal('fail')
+    modalError.value = '거부 사유를 입력해주세요'
+    return
+  }
+  try {
+    await axiosInstance.patch(`/api/tasks/${info.taskId}/terminate`, rejectReason)
+    toggleModal('success')
+  } catch {
+    toggleModal('fail')
+    modalError.value = '작업 거부에 실패했습니다'
+  }
+}
 </script>
diff --git a/src/types/user.ts b/src/types/user.ts
index 92059fae..a4cc9d52 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -23,7 +23,7 @@ export interface RequestTaskDropdownProps {
 }
 
 export interface RequestTaskInputProps {
-  modelValue: string
+  modelValue: string|number
   placeholderText: string
   labelName: string
   isNotRequired?: boolean

From 2f8ecf9ad2fea79893e0f880f1c55a5a8d363d1e Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 09:49:53 +0900
Subject: [PATCH 12/17] =?UTF-8?q?:sparkles:=20[feat]=20:=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=EC=B6=94=EA=B0=80=20api=20=EC=9E=84=EC=8B=9C=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin.ts                                 | 15 +++++++++++----
 src/components/request-task/RequestTaskInput.vue |  1 +
 src/components/user-manage/UserRegistration.vue  | 12 ++++++++----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/api/admin.ts b/src/api/admin.ts
index 1bb7b488..18e2b801 100644
--- a/src/api/admin.ts
+++ b/src/api/admin.ts
@@ -1,4 +1,4 @@
-import type { NewLabelTypes } from '@/types/admin'
+import type { NewLabelTypes, UserRegistrationProps } from '@/types/admin'
 import type { LabelDataTypes } from '@/types/common'
 import { axiosInstance } from '@/utils/axios'
 
@@ -8,17 +8,17 @@ export const getLabelsAdmin = async () => {
 }
 
 export const deleteLabelAdmin = async (id: number) => {
-  const response = await axiosInstance.delete(`/api/management/labels/${id}`)
+  const response = await axiosInstance.delete(`/api/managements/labels/${id}`)
   return response.data
 }
 
 export const postAddLabelAdmin = async (newLabel: NewLabelTypes) => {
-  const response = await axiosInstance.post('/api/management/labels', newLabel)
+  const response = await axiosInstance.post('/api/managements/labels', newLabel)
   return response.data
 }
 
 export const patchLabelAdmin = async (editLabel: LabelDataTypes) => {
-  const response = await axiosInstance.patch(`/api/management/labels/${editLabel.labelId}`, {
+  const response = await axiosInstance.patch(`/api/managements/labels/${editLabel.labelId}`, {
     labelName: editLabel.labelName,
     labelColor: editLabel.labelColor
   })
@@ -29,3 +29,10 @@ export const deleteCategoryAdmin = async (id: number) => {
   const response = await axiosInstance.delete(`/api/managements/categories/${id}`)
   return response.data
 }
+
+export const addMemberAdmin = async (memberData: UserRegistrationProps) => {
+  console.log(memberData, '요청 데이터')
+
+  const response = await axiosInstance.post('/api/managements/members', { memberData })
+  return response.data
+}
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index 08949f94..ed6343b6 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -11,6 +11,7 @@
     <input
       class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black"
       :value="modelValue"
+      type="number"
       :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
       :placeholder="placeholderText" />
diff --git a/src/components/user-manage/UserRegistration.vue b/src/components/user-manage/UserRegistration.vue
index d3221d82..7ecc75bd 100644
--- a/src/components/user-manage/UserRegistration.vue
+++ b/src/components/user-manage/UserRegistration.vue
@@ -47,27 +47,31 @@
 </template>
 
 <script lang="ts" setup>
+import { addMemberAdmin } from '@/api/admin'
 import { INITIAL_USER_REGISTRATION, RoleKeys } from '@/constants/admin'
 import { 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 { useRouter } from 'vue-router'
-import FormCheckbox from '../common/FormCheckbox.vue'
-import FormButtonContainer from '../common/FormButtonContainer.vue'
 
 const isModalVisible = ref(false)
 const userRegistrationForm = ref(INITIAL_USER_REGISTRATION)
 
 const router = useRouter()
+
 const handleCancel = () => {
   userRegistrationForm.value = { ...INITIAL_USER_REGISTRATION }
   isModalVisible.value = false
   router.back()
 }
 
-const handleSubmit = () => {
+const handleSubmit = async () => {
   console.log(userRegistrationForm.value)
+  const formData = { ...userRegistrationForm.value, role: 'ROLE_USER' }
+  await addMemberAdmin(formData)
   isModalVisible.value = true
 }
 </script>

From ab0c3b3bba3b2e6d79e1de28ed8e7cc30f58a616 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 09:50:15 +0900
Subject: [PATCH 13/17] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=9A=94?=
 =?UTF-8?q?=EC=B2=AD=20=EC=84=B8=EB=B6=80=EC=82=AC=ED=95=AD=20=EB=88=84?=
 =?UTF-8?q?=EB=9D=BD=EC=A0=95=EB=B3=B4=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-detail/TaskDetailManagerDropdown.vue | 1 -
 src/components/task-detail/TaskDetailRight.vue           | 9 +++++----
 src/components/task-management/LabelManagement.vue       | 5 +++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/task-detail/TaskDetailManagerDropdown.vue b/src/components/task-detail/TaskDetailManagerDropdown.vue
index 8a04bb09..cc88e0ea 100644
--- a/src/components/task-detail/TaskDetailManagerDropdown.vue
+++ b/src/components/task-detail/TaskDetailManagerDropdown.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-    <p class="task-detail">담당자</p>
     <div class="relative flex text-base">
       <div
         class="task-detail-manager-dropdown"
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index a187462d..bf992b9f 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -39,6 +39,7 @@
       </div>
     </div>
     <div>
+      <p class="task-detail">담당자</p>
       <div v-if="isProcessor && data.processorNickName">
         <TaskDetailManagerDropdown
           v-model="newManager"
@@ -62,16 +63,16 @@
       </div>
       <p class="text-red-1 text-xs font-bold">{{ formatDaysBefore(data.dueDate) }}</p>
     </div>
-    <div>
+    <div v-if="data.labelName">
       <p class="task-detail">구분</p>
       <TaskDetailLabelDropdown
-        v-if="isProcessor && data.labelName"
+        v-if="isProcessor"
         v-model="taskLabel"
         :placeholder-text="'라벨을 선택해주세요'"
         :task-id="data.taskId" />
       <div
-        v-else-if="data.labelName && !isProcessor"
-        class="flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 px-4 text-sm text-black">
+        v-else-if="!isProcessor"
+        class="flex w-full items-center bg-white text-sm text-black">
         {{ data.labelName }}
       </div>
     </div>
diff --git a/src/components/task-management/LabelManagement.vue b/src/components/task-management/LabelManagement.vue
index f3e5d4a2..ad26ec8a 100644
--- a/src/components/task-management/LabelManagement.vue
+++ b/src/components/task-management/LabelManagement.vue
@@ -57,7 +57,8 @@
 </template>
 
 <script setup lang="ts">
-import { getLabelsAdmin, postAddLabelAdmin } from '@/api/admin'
+import { postAddLabelAdmin } from '@/api/admin'
+import { getLabelsManager } from '@/api/user'
 import { plusIcon } from '@/constants/iconPath'
 import type { NewLabelTypes } from '@/types/admin'
 import type { LabelColorTypes, LabelDataTypes } from '@/types/common'
@@ -76,7 +77,7 @@ const isColorVisible = ref(false)
 const isAdd = ref(false)
 
 const fetchLabels = async () => {
-  labelData.value = await getLabelsAdmin()
+  labelData.value = await getLabelsManager()
 }
 
 onMounted(async () => {

From 73facf636986e3f0c0715f03a0a29966f833b396 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 11:01:24 +0900
Subject: [PATCH 14/17] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=ED=8C=A8=EB=94=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-detail/TaskDetail.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 69e9beaa..11179f20 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50">
+  <div
+    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12">
     <div
       class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[1024px] bg-white p-6">
       <TaskDetailTopBar

From baf49b82b7e2622e7b822f15de7bf26c86ffeb58 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 11:11:32 +0900
Subject: [PATCH 15/17] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EB=AF=B8?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=20conflict=20=ED=95=B4=EA=B2=B0=20=EB=82=B4?=
 =?UTF-8?q?=EC=9A=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requested/RequestedListCard.vue           | 54 -------------------
 .../task-management/LabelManagement.vue       |  4 +-
 2 files changed, 1 insertion(+), 57 deletions(-)

diff --git a/src/components/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue
index dc4b7b54..ccfb088d 100644
--- a/src/components/requested/RequestedListCard.vue
+++ b/src/components/requested/RequestedListCard.vue
@@ -47,27 +47,6 @@
     @close="closeModal">
     <template #header>{{ modalError }}</template>
   </ModalView>
-
-  <ModalView
-    :is-open="isModalVisible.reject"
-    @update:model-value="value => (rejectReason = value)"
-    type="inputType"
-    @close="closeModal"
-    @click="rejectRequest">
-    <template #header>거부 사유를 입력해주세요</template>
-  </ModalView>
-  <ModalView
-    :is-open="isModalVisible.success"
-    type="successType"
-    @close="closeModal">
-    <template #header>거부가 완료되었습니다</template>
-  </ModalView>
-  <ModalView
-    :is-open="isModalVisible.fail"
-    type="failType"
-    @close="closeModal">
-    <template #header>{{ modalError }}</template>
-  </ModalView>
 </template>
 
 <script setup lang="ts">
@@ -93,39 +72,6 @@ const requestedTabList: ListCardProps[] = [
 const router = useRouter()
 const queryClient = useQueryClient()
 
-const isModalVisible = ref({
-  reject: false,
-  fail: false,
-  success: false
-})
-const modalError = ref('')
-const rejectReason = ref('')
-const toggleModal = (key: keyof typeof isModalVisible.value) => {
-  isModalVisible.value = Object.fromEntries(
-    Object.keys(isModalVisible.value).map(k => [k, k === key])
-  ) as typeof isModalVisible.value
-}
-const closeModal = () => {
-  const prevSuccess = isModalVisible.value.success
-  isModalVisible.value = { reject: false, fail: false, success: false }
-  if (prevSuccess) queryClient.invalidateQueries({ queryKey: ['requested'] })
-}
-const rejectRequest = async () => {
-  if (rejectReason.value.length === 0) {
-    toggleModal('fail')
-    modalError.value = '거부 사유를 입력해주세요'
-    return
-  }
-  try {
-    await axiosInstance.patch(`/api/tasks/${info.taskId}/terminate`, rejectReason)
-    toggleModal('success')
-  } catch {
-    toggleModal('fail')
-    modalError.value = '작업 거부에 실패했습니다'
-  }
-}
-const queryClient = useQueryClient()
-
 const isModalVisible = ref({
   reject: false,
   fail: false,
diff --git a/src/components/task-management/LabelManagement.vue b/src/components/task-management/LabelManagement.vue
index c424c60b..dbdf6448 100644
--- a/src/components/task-management/LabelManagement.vue
+++ b/src/components/task-management/LabelManagement.vue
@@ -58,8 +58,7 @@
 
 <script setup lang="ts">
 import { postAddLabelAdmin } from '@/api/admin'
-import { getLabelsManager } from '@/api/user'
-import { postAddLabelAdmin } from '@/api/admin'
+import { getLabels } from '@/api/common'
 import { plusIcon } from '@/constants/iconPath'
 import type { NewLabelTypes } from '@/types/admin'
 import type { LabelColorTypes, LabelDataTypes } from '@/types/common'
@@ -68,7 +67,6 @@ import { onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import ColorSelectModal from './ColorSelectModal.vue'
 import LabelManagementLine from './LabelManagementLine.vue'
-import { getLabels } from '@/api/common'
 
 const labelData = ref<LabelDataTypes[]>([])
 const newLabel = ref<NewLabelTypes>({

From 5a2f53faf10793b35aa04f093339ed2847eea3b7 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 11:18:09 +0900
Subject: [PATCH 16/17] =?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/TopBar.vue                 | 10 +++++-----
 src/components/task-detail/TaskDetail.vue |  3 +--
 src/types/user.ts                         |  2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index f39df6e6..5f74dcba 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -31,13 +31,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import CommonIcons from './common/CommonIcons.vue'
-import SideBar from './SideBar.vue'
+import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref } from 'vue'
 import { hamburgerIcon } from '../constants/iconPath'
+import CommonIcons from './common/CommonIcons.vue'
 import NotificationIcon from './icons/NotificationIcon.vue'
-import { storeToRefs } from 'pinia'
-import { useMemberStore } from '@/stores/member'
+import SideBar from './top-bar/SideBar.vue'
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 11179f20..69e1a5ac 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -1,6 +1,5 @@
 <template>
-  <div
-    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12">
+  <div class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12">
     <div
       class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[1024px] bg-white p-6">
       <TaskDetailTopBar
diff --git a/src/types/user.ts b/src/types/user.ts
index 1e060bab..d314bdd5 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -24,7 +24,7 @@ export interface RequestTaskDropdownProps {
 }
 
 export interface RequestTaskInputProps {
-  modelValue: string|number
+  modelValue: string | number
   placeholderText: string
   labelName: string
   isNotRequired?: boolean

From e1e264331c2eee0c86ac85a18a93e69ef546465b Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 13:37:29 +0900
Subject: [PATCH 17/17] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A0=80=20=EC=B6=94=EA=B0=80=20=EB=B6=80=EC=84=9C=20id=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=EC=A0=84=EA=B9=8C=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin.ts                                 |  3 +--
 src/components/request-task/RequestTaskInput.vue |  1 -
 src/components/user-manage/UserRegistration.vue  |  7 ++++---
 src/constants/admin.ts                           | 12 ++++++------
 src/types/admin.ts                               |  2 +-
 src/types/user.ts                                |  2 +-
 6 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/api/admin.ts b/src/api/admin.ts
index cdaae636..86c6c982 100644
--- a/src/api/admin.ts
+++ b/src/api/admin.ts
@@ -27,7 +27,6 @@ export const deleteCategoryAdmin = async (id: number) => {
 
 export const addMemberAdmin = async (memberData: UserRegistrationProps) => {
   console.log(memberData, '요청 데이터')
-
-  const response = await axiosInstance.post('/api/managements/members', { memberData })
+  const response = await axiosInstance.post('/api/managements/members', memberData)
   return response.data
 }
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index 5e9ddec4..c7bd4828 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -11,7 +11,6 @@
     <input
       class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black rounded"
       :value="modelValue"
-      type="number"
       :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
       :placeholder="placeholderText" />
diff --git a/src/components/user-manage/UserRegistration.vue b/src/components/user-manage/UserRegistration.vue
index 7ecc75bd..865aac49 100644
--- a/src/components/user-manage/UserRegistration.vue
+++ b/src/components/user-manage/UserRegistration.vue
@@ -28,11 +28,11 @@
       :labelName="'요청 승인 권한'"
       :checkButtonName="'허용'"
       :isChecked="userRegistrationForm.isReviewer" />
-    <RequestTaskInput
+    <!-- <RequestTaskInput
       v-model="userRegistrationForm.departmentId"
       :placeholderText="'회원의 부서를 입력해주세요'"
       :is-not-required="true"
-      :labelName="'부서'" />
+      :labelName="'부서'" /> -->
     <RequestTaskInput
       v-model="userRegistrationForm.departmentRole"
       :placeholderText="'회원의 직무를 입력해주세요'"
@@ -70,7 +70,8 @@ const handleCancel = () => {
 
 const handleSubmit = async () => {
   console.log(userRegistrationForm.value)
-  const formData = { ...userRegistrationForm.value, role: 'ROLE_USER' }
+  const formData = { ...userRegistrationForm.value, role: 'ROLE_USER', departmentId: 1 }
+  console.log(formData, '요청정보')
   await addMemberAdmin(formData)
   isModalVisible.value = true
 }
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index 44c1e4be..b5370a56 100644
--- a/src/constants/admin.ts
+++ b/src/constants/admin.ts
@@ -42,13 +42,13 @@ export const CATEGORY_FORM: CategoryForm = {
 }
 
 export const INITIAL_USER_REGISTRATION: UserRegistrationProps = {
-  name: '',
-  email: '',
-  nickname: '',
+  name: '조철득',
+  email: 'choiron@gmail.com',
+  nickname: 'iron.ch',
   isReviewer: false,
-  departmentId: '',
-  role: '회원의 역할을 선택해주세요',
-  departmentRole: ''
+  departmentId: 1,
+  role: 'ROLE_USER',
+  departmentRole: 'FE'
 }
 
 export const RoleTypeMapping: { [key in RoleTypes]: RoleTypesEnum } = {
diff --git a/src/types/admin.ts b/src/types/admin.ts
index d655ec38..abbfd33b 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -27,7 +27,7 @@ export interface UserRegistrationProps {
   email: string
   nickname: string
   isReviewer: boolean
-  departmentId: string
+  departmentId: number
   role: string
   departmentRole: string
 }
diff --git a/src/types/user.ts b/src/types/user.ts
index d314bdd5..14a699f4 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -24,7 +24,7 @@ export interface RequestTaskDropdownProps {
 }
 
 export interface RequestTaskInputProps {
-  modelValue: string | number
+  modelValue: string
   placeholderText: string
   labelName: string
   isNotRequired?: boolean