From b37fd112e0927566653460d63f888a6281e743f1 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Mon, 3 Feb 2025 23:23:15 +0900
Subject: [PATCH 01/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EC=97=B0=EA=B2=B0=20=ED=9B=84=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EB=94=94=20=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=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

---
 .../request-approve/RequestApprove.vue           | 16 +++++++++++++---
 src/components/requested/RequestedListCard.vue   |  6 +++---
 src/router/index.ts                              |  1 -
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/request-approve/RequestApprove.vue b/src/components/request-approve/RequestApprove.vue
index af7e1e1b..f4f531cb 100644
--- a/src/components/request-approve/RequestApprove.vue
+++ b/src/components/request-approve/RequestApprove.vue
@@ -47,24 +47,34 @@
 </template>
 
 <script lang="ts" setup>
+import { getTaskDetailUser } from '@/api/user'
 import { INITIAL_REQUEST_APPROVE_FORM } from '@/constants/manager'
 import {
   DUMMY_REQUEST_PROCESSORS,
   DUMMY_REQUEST_TASK_CATEGORIES,
   DUMMY_REQUEST_TASK_LABELS
 } from '@/datas/taskdetail'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import FormButtonContainer from '../common/FormButtonContainer.vue'
 import ModalView from '../ModalView.vue'
 import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import DueDateInput from './DueDateInput.vue'
 import ProcessorDropdown from './ProcessorDropdown.vue'
-import { useRouter } from 'vue-router'
-import FormButtonContainer from '../common/FormButtonContainer.vue'
 
 const isModalVisible = ref(false)
 const approveForm = ref(INITIAL_REQUEST_APPROVE_FORM)
 
 const router = useRouter()
+const route = useRouter().currentRoute.value
+const requestId = route.query.requestId
+console.log(requestId)
+
+onMounted(() => {
+  const data = getTaskDetailUser(Number(requestId))
+  console.log(data, '응답')
+})
+
 const handleCancel = () => {
   approveForm.value = { ...INITIAL_REQUEST_APPROVE_FORM }
   isModalVisible.value = false
diff --git a/src/components/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue
index 6782eb0e..c19ee2e4 100644
--- a/src/components/requested/RequestedListCard.vue
+++ b/src/components/requested/RequestedListCard.vue
@@ -10,7 +10,7 @@
       :is-status="tab.isStatus" />
     <div class="w-[120px] flex gap-2 justify-center items-center shrink-0">
       <button
-        @click="router.push(`/assign/${info.taskId}`)"
+        @click="router.push(`/request-approve?requestId=${info.taskId}`)"
         class="button-medium-primary">
         승인
       </button>
@@ -21,10 +21,10 @@
 
 <script setup lang="ts">
 import type { ListCardProps } from '@/types/common'
-import ListCardTab from '../lists/ListCardTab.vue'
 import type { RequestedListData } from '@/types/manager'
-import { useRouter } from 'vue-router'
 import { formatDate } from '@/utils/date'
+import { useRouter } from 'vue-router'
+import ListCardTab from '../lists/ListCardTab.vue'
 
 const { info } = defineProps<{ info: RequestedListData }>()
 const requestedTabList: ListCardProps[] = [
diff --git a/src/router/index.ts b/src/router/index.ts
index a98db654..16331c50 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,7 +8,6 @@ const router = createRouter({
       name: 'Login',
       component: () => import('../views/LoginView.vue')
     },
-
     {
       path: '/pw-change',
       name: 'PwChange',

From 0fab5e89550c6470a0238068bb573207566f4eca Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 00:28:07 +0900
Subject: [PATCH 02/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EA=B0=80=EC=A0=B8=EC=98=A4?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../request-approve/RequestApprove.vue        | 71 ++++++++++++++-----
 1 file changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/components/request-approve/RequestApprove.vue b/src/components/request-approve/RequestApprove.vue
index f4f531cb..79f9e3df 100644
--- a/src/components/request-approve/RequestApprove.vue
+++ b/src/components/request-approve/RequestApprove.vue
@@ -6,16 +6,18 @@
       @close="handleCancel">
       <template #header> 요청이 승인되었습니다 </template>
     </ModalView>
-    <RequestTaskDropdown
-      v-model="approveForm.category1"
-      :options="DUMMY_REQUEST_TASK_CATEGORIES"
+    <CategoryDropDown
+      v-model="category1"
+      :options="mainCategoryArr"
       :label-name="'1차 카테고리'"
-      :placeholderText="'1차 카테고리를 선택해주세요'" />
-    <RequestTaskDropdown
-      v-model="approveForm.category2"
-      :options="DUMMY_REQUEST_TASK_CATEGORIES"
+      :isInvalidate="isInvalidate"
+      :isDisabled="false" />
+    <CategoryDropDown
+      v-model="category2"
+      :options="afterSubCategoryArr"
       :label-name="'2차 카테고리'"
-      :placeholderText="'2차 카테고리를 선택해주세요'" />
+      :is-invalidate="isInvalidate"
+      :isDisabled="!category1" />
     <ProcessorDropdown
       v-model="approveForm.processor"
       :options="DUMMY_REQUEST_PROCESSORS"
@@ -47,34 +49,60 @@
 </template>
 
 <script lang="ts" setup>
+import { getMainCategory, getSubCategory } from '@/api/common'
 import { getTaskDetailUser } from '@/api/user'
 import { INITIAL_REQUEST_APPROVE_FORM } from '@/constants/manager'
-import {
-  DUMMY_REQUEST_PROCESSORS,
-  DUMMY_REQUEST_TASK_CATEGORIES,
-  DUMMY_REQUEST_TASK_LABELS
-} from '@/datas/taskdetail'
-import { onMounted, ref } from 'vue'
+import { DUMMY_REQUEST_PROCESSORS, DUMMY_REQUEST_TASK_LABELS } from '@/datas/taskdetail'
+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 '../request-task/CategoryDropDown.vue'
 import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import DueDateInput from './DueDateInput.vue'
 import ProcessorDropdown from './ProcessorDropdown.vue'
 
 const isModalVisible = ref(false)
-const approveForm = ref(INITIAL_REQUEST_APPROVE_FORM)
+const category1 = ref<Category | null>(null)
+const category2 = ref<Category | null>(null)
+const mainCategoryArr = ref<Category[]>([])
+const subCategoryArr = ref<SubCategory[]>([])
+const afterSubCategoryArr = ref<SubCategory[]>([])
+const isInvalidate = ref('')
+const isFirst = ref(true)
 
 const router = useRouter()
 const route = useRouter().currentRoute.value
 const requestId = route.query.requestId
-console.log(requestId)
+const approveForm = ref(INITIAL_REQUEST_APPROVE_FORM)
 
-onMounted(() => {
-  const data = getTaskDetailUser(Number(requestId))
-  console.log(data, '응답')
+onMounted(async () => {
+  mainCategoryArr.value = await getMainCategory()
+  subCategoryArr.value = await getSubCategory()
+  const data = await getTaskDetailUser(Number(requestId))
+
+  const selected = mainCategoryArr.value.find(ct => ct.name === data.mainCategoryName) || null
+  category1.value = selected
+  category2.value = subCategoryArr.value.find(ct => ct.name === data.categoryName) || null
+  afterSubCategoryArr.value = subCategoryArr.value.filter(
+    subCategory => subCategory.mainCategoryId === selected?.id
+  )
+})
+
+watch(category1, async newValue => {
+  if (isFirst.value) {
+    isFirst.value = false
+  } else {
+    category2.value = null
+  }
+  afterSubCategoryArr.value = subCategoryArr.value.filter(
+    subCategory => subCategory.mainCategoryId === newValue?.id
+  )
 })
 
+console.log(requestId)
+
 const handleCancel = () => {
   approveForm.value = { ...INITIAL_REQUEST_APPROVE_FORM }
   isModalVisible.value = false
@@ -83,6 +111,11 @@ const handleCancel = () => {
 
 const handleSubmit = () => {
   const formData = new FormData()
+  if (!category1.value || !category2.value) {
+    isInvalidate.value = 'category'
+    console.log(isInvalidate.value, '변경됨')
+    return
+  }
   formData.append('approveForm', JSON.stringify(approveForm.value))
   console.log(JSON.parse(formData.get('approveForm') as string))
   isModalVisible.value = true

From 449debfd5354a4f506c4db399d958a3649e66da2 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 08:22:12 +0900
Subject: [PATCH 03/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20ISO=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=EC=9C=BC=EB=A1=9C=20=EB=82=A0=EC=A7=9C=20=EB=B3=80?=
 =?UTF-8?q?=ED=99=98=20=ED=95=A8=EC=88=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/date.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/utils/date.ts b/src/utils/date.ts
index a8aabe8b..5c10cc28 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -18,3 +18,9 @@ export const formatDateWithDay = (dateString: string) => {
 
   return `${year}년 ${month}월 ${day}일 ${dayOfWeek}`
 }
+
+export const convertToISO = (dateStr: string, timeStr: string) => {
+  const date = new Date(`${dateStr}T${timeStr}:00`)
+
+  return date.toISOString()
+}

From 15399f1c18241b307d643405bb059c4c529fdc7d Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 08:22:59 +0900
Subject: [PATCH 04/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EA=B5=AC?=
 =?UTF-8?q?=EB=B6=84=20=EC=A1=B0=ED=9A=8C=20api=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=EC=8A=B9=EC=9D=B8=20api=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts      | 17 ++++++++++++++---
 src/types/manager.ts | 18 ++++++++++++------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/api/user.ts b/src/api/user.ts
index 28ca9ccf..f42e7ffd 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,4 +1,5 @@
-import { formDataAxiosInstance } from '@/utils/axios'
+import type { RequestApprovePostTypes } from '@/types/manager'
+import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
 
 export const postTaskRequest = async (formdata: FormData) => {
   const response = await formDataAxiosInstance.post('/api/tasks', formdata)
@@ -6,11 +7,21 @@ export const postTaskRequest = async (formdata: FormData) => {
 }
 
 export const getTaskDetailUser = async (id: number) => {
-  const response = await formDataAxiosInstance.get(`/api/tasks/${id}/requests/details`)
+  const response = await axiosInstance.get(`/api/tasks/${id}/requests/details`)
   return response.data
 }
 
 export const getTaskDetailManager = async (id: number) => {
-  const response = await formDataAxiosInstance.get(`/api/tasks/${id}/details`)
+  const response = await axiosInstance.get(`/api/tasks/${id}/details`)
+  return response.data
+}
+
+export const getLabelsManager = async () => {
+  const response = await axiosInstance.get('/api/labels?page=0&size=5')
+  return response.data
+}
+
+export const postTaskApprove = async (id: number, data: RequestApprovePostTypes) => {
+  const response = await axiosInstance.post(`/api/tasks/${id}/approval`, data)
   return response.data
 }
diff --git a/src/types/manager.ts b/src/types/manager.ts
index 555dfe9e..d198576c 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -1,4 +1,4 @@
-import type { Status } from './common'
+import type { LabelDataTypes, Status } from './common'
 import type { AttachmentResponse } from './user'
 
 export interface RequestedListData {
@@ -71,11 +71,10 @@ export interface TeamBoardCardProps {
 
 export type PeriodType = 'DAY' | 'WEEK' | 'MONTH'
 
-export interface RequestApproveFormData {
-  category1: string
-  category2: string
-  processor: string
-  labeling: string
+export interface RequestApproveData {
+  categoryId: number
+  processorId: string
+  label: LabelDataTypes | null
   dueDate: string
   dueTime: string
 }
@@ -150,3 +149,10 @@ export interface MyTaskResponse {
   isFirst: boolean
   isLast: boolean
 }
+
+export interface RequestApprovePostTypes {
+  categoryId: number
+  processorId: number
+  dueDate: string
+  labelId: number
+}

From 917b1af635eaa13dcddfcbce39639ed79bb223de Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 08:23:18 +0900
Subject: [PATCH 05/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EB=B6=88?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=20=EB=AA=A9=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 | 36 +-----------------------------------
 1 file changed, 1 insertion(+), 35 deletions(-)

diff --git a/src/datas/taskdetail.ts b/src/datas/taskdetail.ts
index bf75fca6..7b8129d0 100644
--- a/src/datas/taskdetail.ts
+++ b/src/datas/taskdetail.ts
@@ -1,5 +1,5 @@
 import type { LabelDataTypes } from '@/types/common'
-import type { TaskDetailDatas, TaskDetailHistoryProps } from '@/types/user'
+import type { TaskDetailHistoryProps } from '@/types/user'
 
 export const DUMMY_REQUEST_TASK_CATEGORIES: string[] = [
   'Categroy 1',
@@ -8,40 +8,6 @@ export const DUMMY_REQUEST_TASK_CATEGORIES: string[] = [
   'Categroy 4'
 ]
 
-export const DUMMY_TASK_DETAIL: TaskDetailDatas = {
-  taskId: 1,
-  taskCode: 'T202310',
-  requestedAt: '2023-10-01T10:00:00Z',
-  finishedAt: '2023-10-02T15:00:00Z',
-  taskStatus: '진행 중',
-  requesterNickName: 'JohnDoe',
-  requesterImageUrl: 'images/mockProfile.jpg',
-  processorNickName: 'JaneSmith',
-  processorImageUrl: 'images/mockProfile.jpg',
-  mainCategoryName: 'Virtual Machine',
-  categoryName: 'Virtual Machine 생성',
-  title: '카카오워크',
-  description: `카카오워크입니다 인프라 지원 부탁드립니다 스크린샷과 로그 파일 첨부해드립니다`,
-  attachmentResponse: [
-    {
-      fileId: 1,
-      fileUrl: 'files/attachment1.pdf',
-      fileUploadedAt: '2023-10-01T10:00:00Z',
-      fileSize: '1MB',
-      fileName: '스크린샷.pdf'
-    },
-    {
-      fileId: 2,
-      fileUrl: 'files/attachment2.jpg',
-      fileUploadedAt: '2023-10-01T11:00:00Z',
-      fileSize: '2MB',
-      fileName: 'log2.jpg'
-    }
-  ],
-  dueDate: '2023-10-10',
-  labelName: '긴급'
-}
-
 export const DUMMY_TASK_DETAIL_HISTORY: TaskDetailHistoryProps[] = [
   {
     date: '2023-10-01',

From d85412daa2a50572e4f828b6cf651b9e70176433 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 09:06:09 +0900
Subject: [PATCH 06/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EA=B5=AC?=
 =?UTF-8?q?=EB=B6=84=20=EC=84=A0=ED=83=9D=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../request-approve/DueDateInput.vue          | 12 +++--
 .../request-approve/LabelDropdown.vue         | 49 +++++++++++++++++++
 2 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 src/components/request-approve/LabelDropdown.vue

diff --git a/src/components/request-approve/DueDateInput.vue b/src/components/request-approve/DueDateInput.vue
index 17043931..819cd687 100644
--- a/src/components/request-approve/DueDateInput.vue
+++ b/src/components/request-approve/DueDateInput.vue
@@ -1,14 +1,20 @@
 <template>
   <input
     :type="inputType"
-    :v-model="modelValue"
+    :value="modelValue"
     class="w-full border border-gray-300 rounded px-3 py-2 cursor-pointer focus:outline-none text-center text-black"
-    @focus="e => (e.target as HTMLInputElement).showPicker()" />
+    @focus="e => (e.target as HTMLInputElement).showPicker()"
+    @input="updateValue(($event.target as HTMLInputElement).value)" />
 </template>
 
 <script lang="ts" setup>
 import type { DueDateInputProps } from '@/types/common'
-import { defineProps } from 'vue'
+import { defineEmits, defineProps } from 'vue'
 
 const { modelValue, inputType } = defineProps<DueDateInputProps>()
+const emit = defineEmits(['update:modelValue'])
+
+const updateValue = (value: string) => {
+  emit('update:modelValue', value)
+}
 </script>
diff --git a/src/components/request-approve/LabelDropdown.vue b/src/components/request-approve/LabelDropdown.vue
new file mode 100644
index 00000000..ca2855e8
--- /dev/null
+++ b/src/components/request-approve/LabelDropdown.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div class="text-xs mb-2 text-body font-bold">구분</div>
+    <div class="relative flex text-base">
+      <div
+        class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black"
+        @click="toggleDropdown">
+        <p :class="{ 'text-disabled': !modelValue }">
+          {{ 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-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2 text-black">
+        <div
+          v-for="option in options"
+          :key="option.labelId"
+          class="w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer"
+          @click="selectOption(option)">
+          {{ option.labelName }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { dropdownIcon } from '@/constants/iconPath'
+import type { LabelDataTypes } from '@/types/common'
+import type { LabelDropdownProps } from '@/types/user'
+import { ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+
+const { options, modelValue, placeholderText } = defineProps<LabelDropdownProps>()
+const emit = defineEmits(['update:modelValue'])
+const dropdownOpen = ref(false)
+
+const toggleDropdown = () => {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+const selectOption = (option: LabelDataTypes) => {
+  emit('update:modelValue', option)
+  dropdownOpen.value = false
+}
+</script>

From 129f14dda90e39445503fd15d2a0c8113a0add26 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 09:53:04 +0900
Subject: [PATCH 07/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=EC=9E=90,=20=EA=B5=AC=EB=B6=84=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../request-approve/ProcessorDropdown.vue     | 21 ++++++++++---------
 src/constants/manager.ts                      | 11 +++++-----
 src/types/auth.ts                             |  7 -------
 src/types/common.ts                           |  2 +-
 src/types/manager.ts                          |  9 +++++++-
 src/types/user.ts                             | 13 ++++++++++++
 6 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/components/request-approve/ProcessorDropdown.vue b/src/components/request-approve/ProcessorDropdown.vue
index 196a32ce..2e1e0f12 100644
--- a/src/components/request-approve/ProcessorDropdown.vue
+++ b/src/components/request-approve/ProcessorDropdown.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
     <div class="flex text-xs gap-x-1 mb-2">
-      <p class="text-disabled font-bold">{{ labelName }}</p>
+      <p class="text-disabled font-bold">담당자 변경</p>
       <p class="text-red-1">*</p>
     </div>
     <div class="relative flex text-base">
       <div
         class="request-task-dropdown"
         @click="toggleDropdown">
-        <p :class="{ 'text-disabled': modelValue === placeholderText }">
-          {{ modelValue || placeholderText }}
+        <p :class="{ 'text-disabled': !modelValue }">
+          {{ modelValue?.nickname || placeholderText }}
         </p>
         <CommonIcons
           :name="dropdownIcon"
@@ -20,20 +20,20 @@
         class="request-task-dropdown-option-list">
         <div
           v-for="option in options"
-          :key="option"
+          :key="option.memberId"
           class="request-task-dropdown-option justify-between"
           @click="selectOption(option)">
           <div class="flex gap-2">
             <div class="w-6 h-6 rounded-full overflow-hidden">
               <img
-                src="/images/mockProfile.jpg"
+                :src="option.imageUrl || '/images/mockProfile.jpg'"
                 alt="userProfile" />
             </div>
             <p>
-              {{ option }}
+              {{ option.nickname }}
             </p>
           </div>
-          <p class="text-primary1 text-xs">잔여 작업 : {{ 3 }}</p>
+          <p class="text-primary1 text-xs">잔여 작업 : {{ option.remainingTasks }}</p>
         </div>
       </div>
     </div>
@@ -42,11 +42,12 @@
 
 <script lang="ts" setup>
 import { dropdownIcon } from '@/constants/iconPath'
-import type { RequestTaskDropdownProps } from '@/types/user'
+import type { ManagerTypes } from '@/types/manager'
+import type { ProcessorDropdownProps } from '@/types/user'
 import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { placeholderText, options, labelName, modelValue } = defineProps<RequestTaskDropdownProps>()
+const { placeholderText, options, modelValue } = defineProps<ProcessorDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
 const dropdownOpen = ref(false)
 
@@ -54,7 +55,7 @@ const toggleDropdown = () => {
   dropdownOpen.value = !dropdownOpen.value
 }
 
-const selectOption = (option: string) => {
+const selectOption = (option: ManagerTypes) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
diff --git a/src/constants/manager.ts b/src/constants/manager.ts
index 380eb26c..cfb3c1da 100644
--- a/src/constants/manager.ts
+++ b/src/constants/manager.ts
@@ -1,5 +1,5 @@
 import type { ListBarTabProps } from '@/types/common'
-import type { RequestApproveFormData } from '@/types/manager'
+import type { RequestApproveData } from '@/types/manager'
 
 export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' },
@@ -33,11 +33,10 @@ export const MY_TASK_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '종료일', width: 80, sortBy: 'FINISHED_AT' }
 ]
 
-export const INITIAL_REQUEST_APPROVE_FORM: RequestApproveFormData = {
-  category1: '1차 카테고리를 선택해주세요',
-  category2: '2차 카테고리를 선택해주세요',
-  processor: '담당자를 선택해주세요',
-  labeling: '구분을 선택해주세요',
+export const INITIAL_REQUEST_APPROVE_DATA: RequestApproveData = {
+  categoryId: 0,
+  processor: null,
+  label: null,
   dueDate: '',
   dueTime: ''
 }
diff --git a/src/types/auth.ts b/src/types/auth.ts
index 6a1bd51a..87007613 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -1,10 +1,3 @@
-export interface UserTypes {
-  id: number
-  name: string
-  created_at: string
-  updated_at: string
-}
-
 export interface User {
   memberName: string
   nickname: string
diff --git a/src/types/common.ts b/src/types/common.ts
index 9a179847..c341a802 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -95,7 +95,7 @@ export interface CategoryDropdownProps {
 }
 
 export interface LabelDataTypes {
-  labelId?: number
+  labelId: number
   labelName: string
   labelColor: string
 }
diff --git a/src/types/manager.ts b/src/types/manager.ts
index d198576c..370fdcd5 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -73,7 +73,7 @@ export type PeriodType = 'DAY' | 'WEEK' | 'MONTH'
 
 export interface RequestApproveData {
   categoryId: number
-  processorId: string
+  processor: ManagerTypes | null
   label: LabelDataTypes | null
   dueDate: string
   dueTime: string
@@ -156,3 +156,10 @@ export interface RequestApprovePostTypes {
   dueDate: string
   labelId: number
 }
+
+export interface ManagerTypes {
+  memberId: number
+  nickname: string
+  imageUrl: string
+  remainingTasks: number
+}
diff --git a/src/types/user.ts b/src/types/user.ts
index 97688607..5df3c49a 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -1,4 +1,5 @@
 import type { LabelDataTypes, Status } from './common'
+import type { ManagerTypes } from './manager'
 
 export interface MyRequestListData {
   taskId: number
@@ -150,3 +151,15 @@ export interface MyRequestResponse {
   isFirst: boolean
   isLast: boolean
 }
+
+export interface LabelDropdownProps {
+  modelValue: LabelDataTypes | null
+  options: LabelDataTypes[]
+  placeholderText: string
+}
+
+export interface ProcessorDropdownProps {
+  modelValue: ManagerTypes | null
+  options: ManagerTypes[]
+  placeholderText: string
+}

From bd35ed208e4993dc9f8a37fc392db5165fc51565 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 10:19:51 +0900
Subject: [PATCH 08/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=EB=90=98=EB=8A=94=20=EB=9D=BC=EB=B2=A8=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=ED=83=80=EC=9E=85=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin.ts                                     |  3 ++-
 src/components/request-approve/LabelDropdown.vue     | 12 +++++++++---
 src/components/task-management/LabelManagement.vue   |  5 ++---
 .../task-management/LabelManagementLine.vue          |  3 +--
 src/datas/taskdetail.ts                              |  2 --
 src/types/admin.ts                                   |  6 ------
 src/types/common.ts                                  |  1 -
 src/types/user.ts                                    |  4 +---
 8 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/api/admin.ts b/src/api/admin.ts
index 5a952967..1bb7b488 100644
--- a/src/api/admin.ts
+++ b/src/api/admin.ts
@@ -1,4 +1,5 @@
-import type { LabelDataTypes, NewLabelTypes } from '@/types/admin'
+import type { NewLabelTypes } from '@/types/admin'
+import type { LabelDataTypes } from '@/types/common'
 import { axiosInstance } from '@/utils/axios'
 
 export const getLabelsAdmin = async () => {
diff --git a/src/components/request-approve/LabelDropdown.vue b/src/components/request-approve/LabelDropdown.vue
index ca2855e8..1ec7240f 100644
--- a/src/components/request-approve/LabelDropdown.vue
+++ b/src/components/request-approve/LabelDropdown.vue
@@ -16,7 +16,7 @@
         v-if="dropdownOpen"
         class="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">
         <div
-          v-for="option in options"
+          v-for="option in labelArr"
           :key="option.labelId"
           class="w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer"
           @click="selectOption(option)">
@@ -28,16 +28,22 @@
 </template>
 
 <script lang="ts" setup>
+import { getLabelsManager } from '@/api/user'
 import { dropdownIcon } from '@/constants/iconPath'
 import type { LabelDataTypes } from '@/types/common'
 import type { LabelDropdownProps } from '@/types/user'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { options, modelValue, placeholderText } = defineProps<LabelDropdownProps>()
+const { modelValue, placeholderText } = 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
 }
diff --git a/src/components/task-management/LabelManagement.vue b/src/components/task-management/LabelManagement.vue
index 771f512d..f3e5d4a2 100644
--- a/src/components/task-management/LabelManagement.vue
+++ b/src/components/task-management/LabelManagement.vue
@@ -31,7 +31,6 @@
             @click="handleColor"></div>
           <ColorSelectModal
             :is-open="isColorVisible"
-            :newLabel
             @close="handleColor"
             @updateColor="updateLabelColor" />
           <input
@@ -60,8 +59,8 @@
 <script setup lang="ts">
 import { getLabelsAdmin, postAddLabelAdmin } from '@/api/admin'
 import { plusIcon } from '@/constants/iconPath'
-import type { LabelDataTypes, NewLabelTypes } from '@/types/admin'
-import type { LabelColorTypes } from '@/types/common'
+import type { NewLabelTypes } from '@/types/admin'
+import type { LabelColorTypes, LabelDataTypes } from '@/types/common'
 import { getColor } from '@/utils/color'
 import { onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
diff --git a/src/components/task-management/LabelManagementLine.vue b/src/components/task-management/LabelManagementLine.vue
index d954c18d..fa25bb81 100644
--- a/src/components/task-management/LabelManagementLine.vue
+++ b/src/components/task-management/LabelManagementLine.vue
@@ -65,8 +65,7 @@
 
 <script setup lang="ts">
 import { deleteLabelAdmin, patchLabelAdmin } from '@/api/admin'
-import type { LabelDataTypes } from '@/types/admin'
-import type { LabelColorTypes } from '@/types/common'
+import type { LabelColorTypes, LabelDataTypes } from '@/types/common'
 import { getColor } from '@/utils/color'
 import { defineProps, ref } from 'vue'
 import ModalView from '../ModalView.vue'
diff --git a/src/datas/taskdetail.ts b/src/datas/taskdetail.ts
index 7b8129d0..06afc167 100644
--- a/src/datas/taskdetail.ts
+++ b/src/datas/taskdetail.ts
@@ -67,8 +67,6 @@ export const DUMMY_TASK_DETAIL_HISTORY: TaskDetailHistoryProps[] = [
   }
 ]
 
-export const DUMMY_REQUEST_PROCESSORS: string[] = ['Tony', 'Chloe', 'Moya', 'MoyaMoya']
-
 export const DUMMY_REQUEST_TASK_LABELS: string[] = ['긴급', '정기', '오류', '점검']
 
 export const DUMMY_PROCESSOR = {
diff --git a/src/types/admin.ts b/src/types/admin.ts
index 08589211..6ed405bd 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -46,12 +46,6 @@ export interface CategoryAllData {
   categories: Category[]
 }
 
-export interface LabelDataTypes {
-  labelId: number
-  labelName: string
-  labelColor: string
-}
-
 export interface NewLabelTypes {
   labelName: string
   labelColor: string
diff --git a/src/types/common.ts b/src/types/common.ts
index c341a802..d9a38623 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -76,7 +76,6 @@ export interface FormCheckboxProps {
 
 export interface ColorSelectProps {
   isOpen: boolean
-  newLabel: LabelDataTypes
 }
 
 export interface CategoryForm {
diff --git a/src/types/user.ts b/src/types/user.ts
index 5df3c49a..48c76cfe 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -154,12 +154,10 @@ export interface MyRequestResponse {
 
 export interface LabelDropdownProps {
   modelValue: LabelDataTypes | null
-  options: LabelDataTypes[]
   placeholderText: string
 }
 
-export interface ProcessorDropdownProps {
+export interface ManagerDropdownProps {
   modelValue: ManagerTypes | null
-  options: ManagerTypes[]
   placeholderText: string
 }

From eb9f989a9bdc85ecdf56389382c15a1ba8debbe3 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 11:21:10 +0900
Subject: [PATCH 09/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=9A=94?=
 =?UTF-8?q?=EC=B2=AD=20=EC=8A=B9=EC=9D=B8=20=EC=97=B0=EA=B2=B0=20=EB=B0=8F?=
 =?UTF-8?q?=20=ED=95=84=EC=88=98=20=EC=A0=9C=EC=99=B8=EA=B0=92=20=EB=B6=84?=
 =?UTF-8?q?=EB=A5=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts                               |  5 ++
 ...cessorDropdown.vue => ManagerDropdown.vue} | 35 ++++++++--
 .../request-approve/RequestApprove.vue        | 69 +++++++++++--------
 .../task-detail/TaskDetailRight.vue           |  9 ++-
 .../task-management/ColorSelectModal.vue      |  4 +-
 src/types/manager.ts                          |  4 +-
 src/types/user.ts                             |  1 +
 src/utils/date.ts                             |  2 +-
 8 files changed, 82 insertions(+), 47 deletions(-)
 rename src/components/request-approve/{ProcessorDropdown.vue => ManagerDropdown.vue} (61%)

diff --git a/src/api/user.ts b/src/api/user.ts
index f42e7ffd..00bcc2d9 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -25,3 +25,8 @@ export const postTaskApprove = async (id: number, data: RequestApprovePostTypes)
   const response = await axiosInstance.post(`/api/tasks/${id}/approval`, data)
   return response.data
 }
+
+export const getManager = async () => {
+  const response = await axiosInstance.get('/api/managers')
+  return response.data
+}
diff --git a/src/components/request-approve/ProcessorDropdown.vue b/src/components/request-approve/ManagerDropdown.vue
similarity index 61%
rename from src/components/request-approve/ProcessorDropdown.vue
rename to src/components/request-approve/ManagerDropdown.vue
index 2e1e0f12..45ffe18a 100644
--- a/src/components/request-approve/ProcessorDropdown.vue
+++ b/src/components/request-approve/ManagerDropdown.vue
@@ -3,14 +3,28 @@
     <div class="flex text-xs gap-x-1 mb-2">
       <p class="text-disabled font-bold">담당자 변경</p>
       <p class="text-red-1">*</p>
+      <p
+        v-if="isInvalidateState === 'manager'"
+        class="text-red-1">
+        담당자를 선택해주세요
+      </p>
     </div>
     <div class="relative flex text-base">
       <div
         class="request-task-dropdown"
         @click="toggleDropdown">
-        <p :class="{ 'text-disabled': !modelValue }">
-          {{ modelValue?.nickname || placeholderText }}
-        </p>
+        <div class="flex gap-2 items-center">
+          <div
+            v-if="modelValue"
+            class="w-6 h-6 rounded-full overflow-hidden">
+            <img
+              :src="modelValue?.imageUrl || '/images/mockProfile.jpg'"
+              alt="userProfile" />
+          </div>
+          <p :class="{ 'text-disabled': !modelValue }">
+            {{ modelValue?.nickname || placeholderText }}
+          </p>
+        </div>
         <CommonIcons
           :name="dropdownIcon"
           :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
@@ -19,7 +33,7 @@
         v-if="dropdownOpen"
         class="request-task-dropdown-option-list">
         <div
-          v-for="option in options"
+          v-for="option in managerArr"
           :key="option.memberId"
           class="request-task-dropdown-option justify-between"
           @click="selectOption(option)">
@@ -41,15 +55,22 @@
 </template>
 
 <script lang="ts" setup>
+import { getManager } from '@/api/user'
 import { dropdownIcon } from '@/constants/iconPath'
 import type { ManagerTypes } from '@/types/manager'
-import type { ProcessorDropdownProps } from '@/types/user'
-import { ref } from 'vue'
+import type { ManagerDropdownProps } from '@/types/user'
+import { computed, onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { placeholderText, options, modelValue } = defineProps<ProcessorDropdownProps>()
+const { placeholderText, modelValue, isInvalidate } = defineProps<ManagerDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
 const dropdownOpen = ref(false)
+const managerArr = ref<ManagerTypes[]>([])
+const isInvalidateState = computed(() => isInvalidate)
+
+onMounted(async () => {
+  managerArr.value = await getManager()
+})
 
 const toggleDropdown = () => {
   dropdownOpen.value = !dropdownOpen.value
diff --git a/src/components/request-approve/RequestApprove.vue b/src/components/request-approve/RequestApprove.vue
index 79f9e3df..16eaec89 100644
--- a/src/components/request-approve/RequestApprove.vue
+++ b/src/components/request-approve/RequestApprove.vue
@@ -18,27 +18,23 @@
       :label-name="'2차 카테고리'"
       :is-invalidate="isInvalidate"
       :isDisabled="!category1" />
-    <ProcessorDropdown
-      v-model="approveForm.processor"
-      :options="DUMMY_REQUEST_PROCESSORS"
-      :label-name="'담당자'"
-      :placeholderText="'담당자를 선택해주세요'" />
+    <ManagerDropdown
+      v-model="approveData.processor"
+      :placeholderText="'담당자를 선택해주세요'"
+      :is-invalidate="isInvalidate" />
     <div class="flex flex-col gap-2">
       <p class="text-body text-xs font-bold">마감기한</p>
       <div class="flex w-full justify-center gap-6">
         <DueDateInput
-          v-model="approveForm.dueDate"
+          v-model="approveData.dueDate"
           inputType="date" />
         <DueDateInput
-          v-model="approveForm.dueTime"
+          v-model="approveData.dueTime"
           inputType="time" />
       </div>
     </div>
-    <RequestTaskDropdown
-      v-model="approveForm.labeling"
-      :options="DUMMY_REQUEST_TASK_LABELS"
-      :label-name="'구분'"
-      :is-label="true"
+    <LabelDropdown
+      v-model="approveData.label"
       :placeholderText="'구분을 선택해주세요'" />
     <FormButtonContainer
       :handleCancel="handleCancel"
@@ -50,18 +46,18 @@
 
 <script lang="ts" setup>
 import { getMainCategory, getSubCategory } from '@/api/common'
-import { getTaskDetailUser } from '@/api/user'
-import { INITIAL_REQUEST_APPROVE_FORM } from '@/constants/manager'
-import { DUMMY_REQUEST_PROCESSORS, DUMMY_REQUEST_TASK_LABELS } from '@/datas/taskdetail'
+import { getTaskDetailUser, postTaskApprove } from '@/api/user'
+import { INITIAL_REQUEST_APPROVE_DATA } from '@/constants/manager'
 import type { Category, SubCategory } from '@/types/common'
+import { convertToISO } from '@/utils/date'
 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 '../request-task/CategoryDropDown.vue'
-import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import DueDateInput from './DueDateInput.vue'
-import ProcessorDropdown from './ProcessorDropdown.vue'
+import LabelDropdown from './LabelDropdown.vue'
+import ManagerDropdown from './ManagerDropdown.vue'
 
 const isModalVisible = ref(false)
 const category1 = ref<Category | null>(null)
@@ -69,19 +65,21 @@ const category2 = ref<Category | null>(null)
 const mainCategoryArr = ref<Category[]>([])
 const subCategoryArr = ref<SubCategory[]>([])
 const afterSubCategoryArr = ref<SubCategory[]>([])
+const approveData = ref(INITIAL_REQUEST_APPROVE_DATA)
+
 const isInvalidate = ref('')
 const isFirst = ref(true)
 
 const router = useRouter()
 const route = useRouter().currentRoute.value
-const requestId = route.query.requestId
-const approveForm = ref(INITIAL_REQUEST_APPROVE_FORM)
+const requestId = Array.isArray(route.query.requestId)
+  ? Number(route.query.requestId[0])
+  : Number(route.query.requestId)
 
 onMounted(async () => {
   mainCategoryArr.value = await getMainCategory()
   subCategoryArr.value = await getSubCategory()
-  const data = await getTaskDetailUser(Number(requestId))
-
+  const data = await getTaskDetailUser(requestId)
   const selected = mainCategoryArr.value.find(ct => ct.name === data.mainCategoryName) || null
   category1.value = selected
   category2.value = subCategoryArr.value.find(ct => ct.name === data.categoryName) || null
@@ -101,23 +99,34 @@ watch(category1, async newValue => {
   )
 })
 
-console.log(requestId)
-
 const handleCancel = () => {
-  approveForm.value = { ...INITIAL_REQUEST_APPROVE_FORM }
   isModalVisible.value = false
   router.back()
 }
 
-const handleSubmit = () => {
-  const formData = new FormData()
+const handleSubmit = async () => {
   if (!category1.value || !category2.value) {
     isInvalidate.value = 'category'
-    console.log(isInvalidate.value, '변경됨')
     return
   }
-  formData.append('approveForm', JSON.stringify(approveForm.value))
-  console.log(JSON.parse(formData.get('approveForm') as string))
-  isModalVisible.value = true
+  if (!approveData.value.processor?.memberId) {
+    isInvalidate.value = 'manager'
+    return
+  }
+
+  const requestData = {
+    categoryId: category2.value.id,
+    processorId: approveData.value.processor.memberId,
+    dueDate: convertToISO(approveData.value.dueDate, approveData.value.dueTime),
+    labelId: approveData.value.label?.labelId || null
+  }
+
+  try {
+    await postTaskApprove(requestId, requestData)
+    isModalVisible.value = true
+    approveData.value = INITIAL_REQUEST_APPROVE_DATA
+  } catch (error) {
+    console.error('API 요청 실패:', error)
+  }
 }
 </script>
diff --git a/src/components/task-detail/TaskDetailRight.vue b/src/components/task-detail/TaskDetailRight.vue
index 66c6c2ef..c0055646 100644
--- a/src/components/task-detail/TaskDetailRight.vue
+++ b/src/components/task-detail/TaskDetailRight.vue
@@ -38,10 +38,10 @@
     <div>
       <p class="task-detail">처리자</p>
       <div v-if="isManager && data.processorNickName">
-        <TaskDetailDropdown
+        <!-- <TaskDetailDropdown
           v-model="processor"
           :options="DUMMY_REQUEST_PROCESSORS"
-          :processor="DUMMY_PROCESSOR" />
+          :processor="DUMMY_PROCESSOR" /> -->
       </div>
       <div
         v-else
@@ -73,14 +73,13 @@
 </template>
 
 <script setup lang="ts">
-import { DUMMY_PROCESSOR, DUMMY_REQUEST_PROCESSORS, DUMMY_TASK_LABELS } from '@/datas/taskdetail'
+import { DUMMY_TASK_LABELS } from '@/datas/taskdetail'
 import { useMemberStore } from '@/stores/member'
 import type { TaskDetailDatas } from '@/types/user'
 import { formatDate } from '@/utils/date'
 import { storeToRefs } from 'pinia'
 import { computed, defineProps, ref } from 'vue'
 import TaskStatus from '../TaskStatus.vue'
-import TaskDetailDropdown from './TaskDetailDropdown.vue'
 import TaskDetailLabelDropdown from './TaskDetailLabelDropdown.vue'
 import TaskStatusList from './TaskStatusList.vue'
 
@@ -91,6 +90,6 @@ const isManager = computed(() => info.value.memberName === data.processorNickNam
 const { data } = defineProps<{ data: TaskDetailDatas }>()
 console.log(data, '가져온 데이터')
 
-const processor = ref(DUMMY_PROCESSOR.nickName)
+// const processor = ref(DUMMY_PROCESSOR.nickName)
 const labeling = ref(DUMMY_TASK_LABELS[0].labelName)
 </script>
diff --git a/src/components/task-management/ColorSelectModal.vue b/src/components/task-management/ColorSelectModal.vue
index 814d57c9..4444bc7a 100644
--- a/src/components/task-management/ColorSelectModal.vue
+++ b/src/components/task-management/ColorSelectModal.vue
@@ -24,11 +24,11 @@
 <script setup lang="ts">
 import { COLOR_LIST } from '@/constants/common'
 import { closeIcon } from '@/constants/iconPath'
-import type { ColorSelectProps, LabelColorTypes } from '@/types/common'
+import type { LabelColorTypes } from '@/types/common'
 import { defineEmits, defineProps } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { isOpen } = defineProps<ColorSelectProps>()
+const { isOpen } = defineProps<{ isOpen: boolean }>()
 
 const emit = defineEmits<{
   (e: 'close'): void
diff --git a/src/types/manager.ts b/src/types/manager.ts
index 370fdcd5..0afe8950 100644
--- a/src/types/manager.ts
+++ b/src/types/manager.ts
@@ -153,8 +153,8 @@ export interface MyTaskResponse {
 export interface RequestApprovePostTypes {
   categoryId: number
   processorId: number
-  dueDate: string
-  labelId: number
+  dueDate: string | null
+  labelId: number | null
 }
 
 export interface ManagerTypes {
diff --git a/src/types/user.ts b/src/types/user.ts
index 48c76cfe..d1c0ce1e 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -160,4 +160,5 @@ export interface LabelDropdownProps {
 export interface ManagerDropdownProps {
   modelValue: ManagerTypes | null
   placeholderText: string
+  isInvalidate: string
 }
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 5c10cc28..753a9b85 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -20,7 +20,7 @@ export const formatDateWithDay = (dateString: string) => {
 }
 
 export const convertToISO = (dateStr: string, timeStr: string) => {
+  if (dateStr === '' || timeStr === '') return null
   const date = new Date(`${dateStr}T${timeStr}:00`)
-
   return date.toISOString()
 }

From a32dc8f462a628100924d3afa43c161e6215d480 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Tue, 4 Feb 2025 11:54:15 +0900
Subject: [PATCH 10/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=9A=94?=
 =?UTF-8?q?=EC=B2=AD=20=EC=8A=B9=EC=9D=B8=20=ED=9B=84=20=EA=B0=92=EB=93=A4?=
 =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EC=A7=84=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/request-approve/DueDateInput.vue    | 7 +++++--
 src/components/request-approve/LabelDropdown.vue   | 1 +
 src/components/request-approve/ManagerDropdown.vue | 1 +
 src/components/request-approve/RequestApprove.vue  | 8 ++++++--
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/request-approve/DueDateInput.vue b/src/components/request-approve/DueDateInput.vue
index 819cd687..166a4ee2 100644
--- a/src/components/request-approve/DueDateInput.vue
+++ b/src/components/request-approve/DueDateInput.vue
@@ -9,12 +9,15 @@
 
 <script lang="ts" setup>
 import type { DueDateInputProps } from '@/types/common'
-import { defineEmits, defineProps } from 'vue'
+import { defineEmits, defineProps, onMounted } from 'vue'
 
 const { modelValue, inputType } = defineProps<DueDateInputProps>()
 const emit = defineEmits(['update:modelValue'])
-
 const updateValue = (value: string) => {
   emit('update:modelValue', value)
 }
+
+onMounted(() => {
+  emit('update:modelValue', null)
+})
 </script>
diff --git a/src/components/request-approve/LabelDropdown.vue b/src/components/request-approve/LabelDropdown.vue
index 1ec7240f..3e55db73 100644
--- a/src/components/request-approve/LabelDropdown.vue
+++ b/src/components/request-approve/LabelDropdown.vue
@@ -42,6 +42,7 @@ const dropdownOpen = ref(false)
 const labelArr = ref<LabelDataTypes[]>([])
 
 onMounted(async () => {
+  emit('update:modelValue', null)
   labelArr.value = await getLabelsManager()
 })
 const toggleDropdown = () => {
diff --git a/src/components/request-approve/ManagerDropdown.vue b/src/components/request-approve/ManagerDropdown.vue
index 45ffe18a..2d313b35 100644
--- a/src/components/request-approve/ManagerDropdown.vue
+++ b/src/components/request-approve/ManagerDropdown.vue
@@ -69,6 +69,7 @@ const managerArr = ref<ManagerTypes[]>([])
 const isInvalidateState = computed(() => isInvalidate)
 
 onMounted(async () => {
+  emit('update:modelValue', null)
   managerArr.value = await getManager()
 })
 
diff --git a/src/components/request-approve/RequestApprove.vue b/src/components/request-approve/RequestApprove.vue
index 16eaec89..9e7cefbf 100644
--- a/src/components/request-approve/RequestApprove.vue
+++ b/src/components/request-approve/RequestApprove.vue
@@ -51,7 +51,7 @@ import { INITIAL_REQUEST_APPROVE_DATA } from '@/constants/manager'
 import type { Category, SubCategory } from '@/types/common'
 import { convertToISO } from '@/utils/date'
 import { onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
 import ModalView from '../ModalView.vue'
 import CategoryDropDown from '../request-task/CategoryDropDown.vue'
@@ -76,6 +76,11 @@ const requestId = Array.isArray(route.query.requestId)
   ? Number(route.query.requestId[0])
   : Number(route.query.requestId)
 
+onBeforeRouteLeave((to, from, next) => {
+  approveData.value = INITIAL_REQUEST_APPROVE_DATA
+  next()
+})
+
 onMounted(async () => {
   mainCategoryArr.value = await getMainCategory()
   subCategoryArr.value = await getSubCategory()
@@ -124,7 +129,6 @@ const handleSubmit = async () => {
   try {
     await postTaskApprove(requestId, requestData)
     isModalVisible.value = true
-    approveData.value = INITIAL_REQUEST_APPROVE_DATA
   } catch (error) {
     console.error('API 요청 실패:', error)
   }

From 05dfc4c60023a0a5adbdc4a84e5f716c9bd96fd8 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Wed, 5 Feb 2025 00:32:25 +0900
Subject: [PATCH 11/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EB=AF=B8?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81,=20te?=
 =?UTF-8?q?xt-base=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/request-approve/LabelDropdown.vue    | 2 +-
 src/components/request-approve/ManagerDropdown.vue  | 2 +-
 src/components/request-task/CategoryDropDown.vue    | 2 +-
 src/components/request-task/RequestTaskDropdown.vue | 2 +-
 src/components/request-task/RequestTaskInput.vue    | 2 +-
 src/components/request-task/RequestTaskTextArea.vue | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/request-approve/LabelDropdown.vue b/src/components/request-approve/LabelDropdown.vue
index 3e55db73..ea8c599b 100644
--- a/src/components/request-approve/LabelDropdown.vue
+++ b/src/components/request-approve/LabelDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="text-xs mb-2 text-body font-bold">구분</div>
-    <div class="relative flex text-base">
+    <div class="relative flex">
       <div
         class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black"
         @click="toggleDropdown">
diff --git a/src/components/request-approve/ManagerDropdown.vue b/src/components/request-approve/ManagerDropdown.vue
index 2d313b35..b6a11876 100644
--- a/src/components/request-approve/ManagerDropdown.vue
+++ b/src/components/request-approve/ManagerDropdown.vue
@@ -9,7 +9,7 @@
         담당자를 선택해주세요
       </p>
     </div>
-    <div class="relative flex text-base">
+    <div class="relative flex">
       <div
         class="request-task-dropdown"
         @click="toggleDropdown">
diff --git a/src/components/request-task/CategoryDropDown.vue b/src/components/request-task/CategoryDropDown.vue
index 030e3e62..ecf6c6de 100644
--- a/src/components/request-task/CategoryDropDown.vue
+++ b/src/components/request-task/CategoryDropDown.vue
@@ -13,7 +13,7 @@
         카테고리를 선택해주세요
       </p>
     </div>
-    <div class="relative flex text-base">
+    <div class="relative flex">
       <div
         class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black"
         @click="toggleDropdown">
diff --git a/src/components/request-task/RequestTaskDropdown.vue b/src/components/request-task/RequestTaskDropdown.vue
index 0ede8277..5e8a59d1 100644
--- a/src/components/request-task/RequestTaskDropdown.vue
+++ b/src/components/request-task/RequestTaskDropdown.vue
@@ -8,7 +8,7 @@
         *
       </p>
     </div>
-    <div class="relative flex text-base">
+    <div class="relative flex">
       <div
         class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black"
         @click="toggleDropdown">
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index 08949f94..c7bd4828 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -9,7 +9,7 @@
       </p>
     </div>
     <input
-      class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black"
+      class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black rounded"
       :value="modelValue"
       :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
diff --git a/src/components/request-task/RequestTaskTextArea.vue b/src/components/request-task/RequestTaskTextArea.vue
index b4bf9ca2..22953fbd 100644
--- a/src/components/request-task/RequestTaskTextArea.vue
+++ b/src/components/request-task/RequestTaskTextArea.vue
@@ -2,7 +2,7 @@
   <div>
     <p class="text-body text-xs font-bold">부가설명</p>
     <textarea
-      class="w-full h-24 mt-2 border border-border-1 px-4 py-2 resize-none focus:outline-none"
+      class="w-full h-24 mt-2 border border-border-1 px-4 py-2 resize-none focus:outline-none rounded"
       :value="modelValue"
       :placeholder="placeholderText"
       @input="updateValue(($event.target as HTMLInputElement).value)">