diff --git a/src/api/common.ts b/src/api/common.ts
new file mode 100644
index 00000000..a0d4fd4e
--- /dev/null
+++ b/src/api/common.ts
@@ -0,0 +1,11 @@
+import { axiosInstance } from '../utils/axios'
+
+export const getMainCategory = async () => {
+  const response = await axiosInstance.get('/api/main-category')
+  return response.data
+}
+
+export const getSubCategory = async () => {
+  const response = await axiosInstance.get('/api/sub-category')
+  return response.data
+}
diff --git a/src/api/test.ts b/src/api/test.ts
index e28e9dd8..bb6f3d0b 100644
--- a/src/api/test.ts
+++ b/src/api/test.ts
@@ -1,4 +1,4 @@
-import axiosInstance from '../utils/axios'
+import { axiosInstance } from '../utils/axios'
 
 export const getNotifications = async () => {
   const response = await axiosInstance.get('/api/notifications?page=0&size=5')
diff --git a/src/api/user.ts b/src/api/user.ts
new file mode 100644
index 00000000..86bbbbf4
--- /dev/null
+++ b/src/api/user.ts
@@ -0,0 +1,6 @@
+import { formDataAxiosInstance } from '@/utils/axios'
+
+export const postTaskRequest = async (formdata: FormData) => {
+  const response = await formDataAxiosInstance.post('/api/tasks', formdata)
+  return response.data
+}
diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue
index e1c2735a..cd96cacd 100644
--- a/src/components/my-request/MyRequestFilterBar.vue
+++ b/src/components/my-request/MyRequestFilterBar.vue
@@ -33,15 +33,15 @@
 </template>
 
 <script setup lang="ts">
-import FilterDropdown from '../filters/FilterDropdown.vue'
+import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
+import { useRequestParamsStore } from '@/stores/params'
+import { axiosInstance } from '@/utils/axios'
+import { useQuery } from '@tanstack/vue-query'
 import FilterCategory from '../filters/FilterCategory.vue'
-import FilterInput from '../filters/FilterInput.vue'
+import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
-import { useRequestParamsStore } from '@/stores/params'
-import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
+import FilterInput from '../filters/FilterInput.vue'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
-import axiosInstance from '@/utils/axios'
-import { useQuery } from '@tanstack/vue-query'
 
 const store = useRequestParamsStore()
 store.$reset()
diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue
index 459ced6d..b91f588a 100644
--- a/src/components/my-request/MyRequestList.vue
+++ b/src/components/my-request/MyRequestList.vue
@@ -22,17 +22,17 @@
 </template>
 
 <script setup lang="ts">
-import MyRequestListBar from './MyRequestListBar.vue'
-import MyRequestListCard from './MyRequestListCard.vue'
-import ListPagination from '../lists/ListPagination.vue'
-import ListContainer from '../lists/ListContainer.vue'
 import { useRequestParamsStore } from '@/stores/params'
-import axiosInstance from '@/utils/axios'
-import { useQuery } from '@tanstack/vue-query'
-import { useParseParams } from '../hooks/useParseParams'
 import type { MyRequestResponse } from '@/types/user'
+import { axiosInstance } from '@/utils/axios'
+import { useQuery } from '@tanstack/vue-query'
 import { ref, watch } from 'vue'
+import { useParseParams } from '../hooks/useParseParams'
+import ListContainer from '../lists/ListContainer.vue'
+import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
+import MyRequestListBar from './MyRequestListBar.vue'
+import MyRequestListCard from './MyRequestListCard.vue'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
diff --git a/src/components/my-task/MyTaskFilterBar.vue b/src/components/my-task/MyTaskFilterBar.vue
index 26d411f8..9410997d 100644
--- a/src/components/my-task/MyTaskFilterBar.vue
+++ b/src/components/my-task/MyTaskFilterBar.vue
@@ -41,7 +41,7 @@ import { useRequestParamsStore } from '@/stores/params'
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
-import axiosInstance from '@/utils/axios'
+import {axiosInstance} from '@/utils/axios'
 
 const store = useRequestParamsStore()
 store.$reset()
diff --git a/src/components/request-history/RequestHistoryFilterBar.vue b/src/components/request-history/RequestHistoryFilterBar.vue
index 6dfcaf2c..bc418079 100644
--- a/src/components/request-history/RequestHistoryFilterBar.vue
+++ b/src/components/request-history/RequestHistoryFilterBar.vue
@@ -33,15 +33,15 @@
 </template>
 
 <script setup lang="ts">
-import FilterDropdown from '../filters/FilterDropdown.vue'
-import FilterCategory from '../filters/FilterCategory.vue'
-import FilterInput from '../filters/FilterInput.vue'
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
-import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import { useRequestParamsStore } from '@/stores/params'
-import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
+import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
-import axiosInstance from '@/utils/axios'
+import FilterCategory from '../filters/FilterCategory.vue'
+import FilterDropdown from '../filters/FilterDropdown.vue'
+import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
+import FilterInput from '../filters/FilterInput.vue'
+import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 
 const store = useRequestParamsStore()
 store.$reset()
diff --git a/src/components/request-task/CategoryDropDown.vue b/src/components/request-task/CategoryDropDown.vue
new file mode 100644
index 00000000..7f377299
--- /dev/null
+++ b/src/components/request-task/CategoryDropDown.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="flex text-xs gap-x-1 mb-2">
+      <p class="text-body font-bold">{{ labelName }}</p>
+      <p
+        v-if="!isLabel"
+        class="text-red-1">
+        *
+      </p>
+      <p
+        v-if="isInvalidateState === 'category'"
+        class="text-red-1">
+        카테고리를 선택해주세요
+      </p>
+    </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?.name }">
+          {{ modelValue?.name ?? labelName + '를 선택해주세요' }}
+        </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.id"
+          class="w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer"
+          @click="selectOption(option)">
+          {{ option.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { dropdownIcon } from '@/constants/iconPath'
+import type { CategoryDropdownProps, MainCategoryTypes, SubCategoryTypes } from '@/types/common'
+import { computed, ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+
+const { options, labelName, modelValue, isLabel, isDisabled, isInvalidate } =
+  defineProps<CategoryDropdownProps>()
+
+const isInvalidateState = computed(() => isInvalidate)
+
+const emit = defineEmits(['update:modelValue'])
+const dropdownOpen = ref(false)
+
+const toggleDropdown = () => {
+  if (isDisabled) return
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+const selectOption = (option: MainCategoryTypes | SubCategoryTypes) => {
+  emit('update:modelValue', option)
+  dropdownOpen.value = false
+}
+</script>
diff --git a/src/components/request-task/RequestTask.vue b/src/components/request-task/RequestTask.vue
index 6ee6e2f8..1374053b 100644
--- a/src/components/request-task/RequestTask.vue
+++ b/src/components/request-task/RequestTask.vue
@@ -1,69 +1,120 @@
 <template>
   <div class="w-full flex flex-col gap-y-6">
-    <RequestTaskDropdown
+    <CategoryDropDown
       v-model="category1"
-      :options="DUMMY_REQUEST_TASK_CATEGORIES"
+      :options="mainCategoryArr"
       :label-name="'1차 카테고리'"
-      :placeholderText="'1차 카테고리를 선택해주세요'" />
-    <RequestTaskDropdown
+      :isInvalidate="isInvalidate"
+      :isDisabled="false" />
+    <CategoryDropDown
       v-model="category2"
-      :options="DUMMY_REQUEST_TASK_CATEGORIES"
+      :options="afterSubCategoryArr"
       :label-name="'2차 카테고리'"
-      :placeholderText="'2차 카테고리를 선택해주세요'" />
+      :is-invalidate="isInvalidate"
+      :isDisabled="!category1" />
     <RequestTaskInput
       v-model="title"
-      :placeholderText="TITLE_PLACEHOLDER"
-      :label-name="'제목'" />
+      :placeholderText="'제목을 입력해주세요'"
+      :label-name="'제목'"
+      :is-invalidate="isInvalidate" />
     <RequestTaskTextArea
       v-model="description"
-      :placeholderText="EXPLANATION_PLACEHOLDER" />
+      :placeholderText="'부가 정보를 입력해주세요'" />
     <RequestTaskFileInput v-model="file" />
     <FormButtonContainer
       :handleCancel="handleCancel"
       :handleSubmit="handleSubmit"
       cancelText="취소"
       submitText="요청" />
+    <ModalView
+      :isOpen="isModalVisible"
+      :type="'successType'"
+      @close="handleCancel">
+      <template #header>작업이 요청되었습니다</template>
+    </ModalView>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { EXPLANATION_PLACEHOLDER, TITLE_PLACEHOLDER } from '@/constants/user'
-import { DUMMY_REQUEST_TASK_CATEGORIES } from '@/datas/taskdetail'
-import { ref } from 'vue'
+import { getMainCategory, getSubCategory } from '@/api/common'
+import { postTaskRequest } from '@/api/user'
+import type { MainCategoryTypes, SubCategoryTypes } from '@/types/common'
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
-import RequestTaskDropdown from './RequestTaskDropdown.vue'
+import ModalView from '../ModalView.vue'
+import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
-import { useRouter } from 'vue-router'
 
-const category1 = ref('1차 카테고리를 선택해주세요')
-const category2 = ref('2차 카테고리를 선택해주세요')
+const category1 = ref<MainCategoryTypes | null>(null)
+const category2 = ref<MainCategoryTypes | null>(null)
+
 const title = ref('')
 const description = ref('')
 const file = ref(null as File[] | null)
+const isInvalidate = ref('')
+const isModalVisible = ref(false)
+
+const mainCategoryArr = ref<MainCategoryTypes[]>([])
+const subCategoryArr = ref<SubCategoryTypes[]>([])
+const afterSubCategoryArr = ref<SubCategoryTypes[]>([])
+
+onMounted(async () => {
+  mainCategoryArr.value = await getMainCategory()
+  subCategoryArr.value = await getSubCategory()
+  afterSubCategoryArr.value = await getSubCategory()
+})
+
+watch(category1, async newValue => {
+  category2.value = null
+  afterSubCategoryArr.value = subCategoryArr.value.filter(
+    subCategory => subCategory.mainCategoryId === newValue?.id
+  )
+})
 
 const router = useRouter()
+
 const handleCancel = () => {
-  category1.value = ''
-  category2.value = ''
+  category1.value = null
+  category2.value = null
   title.value = ''
   description.value = ''
-  file.value = null
+  file.value = []
   router.back()
 }
 
-const handleSubmit = () => {
+const handleSubmit = async () => {
+  if (!category1.value || !category2.value) {
+    isInvalidate.value = 'category'
+    console.log(isInvalidate.value, '변경됨')
+    return
+  } else if (!title.value) {
+    isInvalidate.value = 'input'
+    return
+  }
   const formData = new FormData()
-  formData.append('category1', category1.value)
-  formData.append('category2', category2.value)
-  formData.append('title', title.value)
-  formData.append('description', description.value)
-  if (file.value) {
-    file.value.forEach(f => {
-      formData.append('file', f)
-    })
+  const taskInfo = {
+    categoryId: category2.value.id,
+    title: title.value,
+    description: description.value
+  }
+
+  const jsonTaskInfo = JSON.stringify(taskInfo)
+  const newBlob = new Blob([jsonTaskInfo], { type: 'application/json' })
+
+  formData.append('taskInfo', newBlob)
+
+  if (file.value && file.value.length > 0) {
+    file.value.forEach(f => formData.append('attachment', f))
+  }
+  try {
+    const res = await postTaskRequest(formData)
+    isModalVisible.value = true
+    console.error('요청 성공:', res)
+  } catch (error) {
+    console.error('요청 실패:', error)
   }
-  console.log(Object.fromEntries(formData))
 }
 </script>
diff --git a/src/components/request-task/RequestTaskFileInput.vue b/src/components/request-task/RequestTaskFileInput.vue
index 6ee08c50..74cc26b9 100644
--- a/src/components/request-task/RequestTaskFileInput.vue
+++ b/src/components/request-task/RequestTaskFileInput.vue
@@ -9,7 +9,7 @@
       @change="handleFileUpload" />
     <RequestTaskFileInputAfter
       v-if="hasFiles"
-      :files="props.modelValue"
+      :files="modelValue"
       :removeFile="removeFile" />
     <div
       v-else
@@ -31,25 +31,25 @@ import { uploadIcon } from '@/constants/iconPath'
 import { computed } from 'vue'
 import RequestTaskFileInputAfter from './RequestTaskFileInputAfter.vue'
 
-const props = defineProps<{
+const { modelValue } = defineProps<{
   modelValue: File[] | null
 }>()
 const emit = defineEmits(['update:modelValue'])
 
-const hasFiles = computed(() => props.modelValue && props.modelValue.length > 0)
+const hasFiles = computed(() => modelValue && modelValue.length > 0)
 
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target.files && target.files.length > 0) {
     const newFiles = Array.from(target.files)
-    const updatedFiles = props.modelValue ? [...props.modelValue, ...newFiles] : newFiles
+    const updatedFiles = modelValue ? [...modelValue, ...newFiles] : newFiles
     emit('update:modelValue', updatedFiles)
   }
 }
 
 const removeFile = (index: number) => {
-  if (props.modelValue) {
-    const updatedFiles = [...props.modelValue]
+  if (modelValue) {
+    const updatedFiles = [...modelValue]
     updatedFiles.splice(index, 1)
     emit('update:modelValue', updatedFiles)
   }
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index 7646a033..df55151e 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -7,6 +7,11 @@
         class="text-red-1">
         *
       </p>
+      <p
+        v-if="isInvalidateState === 'input'"
+        class="text-red-1">
+        {{ labelName }}을 입력해주세요
+      </p>
     </div>
     <input
       class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black"
@@ -19,9 +24,12 @@
 
 <script lang="ts" setup>
 import type { RequestTaskInputProps } from '@/types/user'
-
-const { modelValue, placeholderText, labelName, isNotRequired, isEdit } =
+import { computed } from 'vue'
+const { modelValue, placeholderText, labelName, isNotRequired, isEdit, isInvalidate } =
   defineProps<RequestTaskInputProps>()
+
+const isInvalidateState = computed(() => isInvalidate)
+
 const emit = defineEmits(['update:modelValue'])
 
 const updateValue = (value: string) => {
diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue
index cfecbcec..7c28ce9e 100644
--- a/src/components/requested/RequestedFilterBar.vue
+++ b/src/components/requested/RequestedFilterBar.vue
@@ -35,7 +35,7 @@ import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsStore } from '@/stores/params'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
-import axiosInstance from '@/utils/axios'
+import {axiosInstance} from '@/utils/axios'
 
 const store = useRequestParamsStore()
 store.$reset()
diff --git a/src/components/task-board/TaskBoardFilterBar.vue b/src/components/task-board/TaskBoardFilterBar.vue
index a4841f5d..d9c2f338 100644
--- a/src/components/task-board/TaskBoardFilterBar.vue
+++ b/src/components/task-board/TaskBoardFilterBar.vue
@@ -29,7 +29,7 @@ import FilterInput from '../filters/FilterInput.vue'
 import { DUMMY_DIVISION_LIST } from '@/datas/dummy'
 import { useTaskBoardParamsStore } from '@/stores/params'
 import { useQuery } from '@tanstack/vue-query'
-import axiosInstance from '@/utils/axios'
+import {axiosInstance} from '@/utils/axios'
 
 const { params } = useTaskBoardParamsStore()
 
diff --git a/src/components/task-management/CategoryAdd.vue b/src/components/task-management/CategoryAdd.vue
index b0a0ca07..22686e00 100644
--- a/src/components/task-management/CategoryAdd.vue
+++ b/src/components/task-management/CategoryAdd.vue
@@ -42,10 +42,10 @@
 import { CATEGORY_FIRST_ADD, CATEGORY_SECOND_ADD, RoleKeys } from '@/constants/admin'
 import { 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 RequestTaskInput from '../request-task/RequestTaskInput.vue'
-import FormButtonContainer from '../common/FormButtonContainer.vue'
 
 const router = useRouter()
 
diff --git a/src/components/team-board/TeamBoardFilterBar.vue b/src/components/team-board/TeamBoardFilterBar.vue
index 729e046e..e76be4e1 100644
--- a/src/components/team-board/TeamBoardFilterBar.vue
+++ b/src/components/team-board/TeamBoardFilterBar.vue
@@ -22,13 +22,13 @@
 </template>
 
 <script setup lang="ts">
+import { useTeamBoardParamsStore } from '@/stores/params'
+import { axiosInstance } from '@/utils/axios'
+import { useQuery } from '@tanstack/vue-query'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
-import { useTeamBoardParamsStore } from '@/stores/params'
 import { useTeamBoardParamsChange } from '../hooks/useTeamBoardParamsChange'
-import axiosInstance from '@/utils/axios'
-import { useQuery } from '@tanstack/vue-query'
 
 const { params } = useTeamBoardParamsStore()
 
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index 197cb3e5..15fef027 100644
--- a/src/constants/admin.ts
+++ b/src/constants/admin.ts
@@ -1,4 +1,4 @@
-import type { ListBarTabProps, Option } from '@/types/common'
+import type { ListBarTabProps, MainCategoryTypes, Option, SubCategoryTypes } from '@/types/common'
 
 export const MEMBER_MANAGEMENT_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '이름', width: 60 },
@@ -34,21 +34,15 @@ export const LOGS_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '결과' }
 ]
 
-import type {
-  RoleTypes,
-  RoleTypesEnum,
-  UserRegistrationProps,
-  mainCategoryTypes,
-  subCategoryTypes
-} from '@/types/admin'
+import type { RoleTypes, RoleTypesEnum, UserRegistrationProps } from '@/types/admin'
 
-export const CATEGORY_FIRST_ADD: mainCategoryTypes = {
+export const CATEGORY_FIRST_ADD: MainCategoryTypes = {
   name: '',
   code: '',
   id: 0
 }
 
-export const CATEGORY_SECOND_ADD: subCategoryTypes = {
+export const CATEGORY_SECOND_ADD: SubCategoryTypes = {
   name: '',
   mainCategoryId: 0,
   code: '',
diff --git a/src/constants/user.ts b/src/constants/user.ts
index 317d1db4..3a719d20 100644
--- a/src/constants/user.ts
+++ b/src/constants/user.ts
@@ -22,10 +22,6 @@ export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '처리', width: 120, justifyCenter: true }
 ]
 
-export const TITLE_PLACEHOLDER = '제목을 입력해주세요'
-
-export const EXPLANATION_PLACEHOLDER = '부가 정보를 입력해주세요'
-
 export const HistoryMessageBefore: Record<TaskHistoryType, string> = {
   STATUS_SWITCHED: '요청이',
   PROCESSOR_CHANGED: '처리자가',
diff --git a/src/types/admin.ts b/src/types/admin.ts
index 436b33f5..f266f587 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -1,4 +1,4 @@
-import type { Role } from './common'
+import type { Role, SubCategoryTypes } from './common'
 
 export interface MemberManagementListData {
   memberId: number
@@ -42,24 +42,11 @@ export interface CategoryLineProps {
   mainCategoryId?: string
 }
 
-export interface mainCategoryTypes {
-  id: number
-  name: string
-  code: string
-}
-
-export interface subCategoryTypes {
-  id: number
-  mainCategoryId: number
-  name: string
-  code: string
-}
-
 export interface categoriesTypes {
   id: number
   name: string
   code: string
-  subCategory: subCategoryTypes[]
+  subCategory: SubCategoryTypes[]
 }
 
 export interface CategoryAllData {
diff --git a/src/types/common.ts b/src/types/common.ts
index 92ae0f91..3cb18d94 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -72,3 +72,31 @@ export interface ColorSelectProps {
   selectedDivisionId: number | null
   isOpen: boolean
 }
+
+export interface LabelDataTypes {
+  labelId: number
+  labelName: string
+  labelColor: string
+}
+
+export interface MainCategoryTypes {
+  id: number
+  name: string
+  code: string
+}
+
+export interface SubCategoryTypes {
+  id: number
+  mainCategoryId: number
+  name: string
+  code: string
+}
+
+export interface CategoryDropdownProps {
+  options: MainCategoryTypes[] | SubCategoryTypes[]
+  labelName: string
+  modelValue: MainCategoryTypes | SubCategoryTypes | null
+  isLabel?: boolean
+  isDisabled?: boolean
+  isInvalidate?: string
+}
diff --git a/src/types/user.ts b/src/types/user.ts
index ffb30fb1..b77be02e 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -27,6 +27,7 @@ export interface RequestTaskInputProps {
   labelName: string
   isNotRequired?: boolean
   isEdit?: boolean
+  isInvalidate?: string
 }
 
 export interface RequestTaskFileInputProps {
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 4b1d7254..ae769d70 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -1,36 +1,29 @@
-import axios, { type InternalAxiosRequestConfig } from 'axios'
+import axios, { type AxiosInstance, type InternalAxiosRequestConfig } from 'axios'
 import Cookies from 'js-cookie'
-const baseURL = import.meta.env.VITE_API_BASE_URL
 
-const axiosInstance = axios.create({
-  baseURL: baseURL,
-  withCredentials: true,
-  headers: {
-    'Content-Type': 'application/json',
-    Accept: 'application/json'
-  }
-})
+const baseURL = import.meta.env.VITE_API_BASE_URL
 
-axiosInstance.interceptors.request.use(
-  (config: InternalAxiosRequestConfig) => {
-    if (typeof window !== 'undefined') {
-      const token = Cookies.get('accessToken')
-      if (token) {
-        config.headers.Authorization = `Bearer ${token}`
+const setInterceptors = (instance: AxiosInstance) => {
+  instance.interceptors.request.use(
+    (config: InternalAxiosRequestConfig) => {
+      if (typeof window !== 'undefined') {
+        const token = Cookies.get('accessToken')
+        if (token) {
+          config.headers.Authorization = `Bearer ${token}`
+        }
+        console.log(token, '으로 요청 중')
       }
-    }
-    return config
-  },
-  error => Promise.reject(error)
-)
+      return config
+    },
+    error => Promise.reject(error)
+  )
 
-axiosInstance.interceptors.response.use(
-  response => response,
-  error => {
-    if (axios.isCancel(error)) {
-      console.log('요청이 취소되었습니다:', error.message)
-    } else {
-      if (error.response) {
+  instance.interceptors.response.use(
+    response => response,
+    error => {
+      if (axios.isCancel(error)) {
+        console.log('요청이 취소되었습니다:', error.message)
+      } else if (error.response) {
         switch (error.response.status) {
           case 401:
             console.error('인증 오류: 다시 로그인하세요.')
@@ -50,9 +43,26 @@ axiosInstance.interceptors.response.use(
       } else {
         console.error('네트워크 오류: 서버에 연결할 수 없습니다.')
       }
+      return Promise.reject(error)
     }
-    return Promise.reject(error)
-  }
-)
+  )
+}
+
+const createAxiosInstance = (contentType: string) => {
+  const instance = axios.create({
+    baseURL: baseURL,
+    withCredentials: true,
+    headers: {
+      'Content-Type': contentType,
+      Accept: 'application/json'
+    }
+  })
+  setInterceptors(instance)
+  return instance
+}
+
+const axiosInstance = createAxiosInstance('application/json')
+
+const formDataAxiosInstance = createAxiosInstance('multipart/form-data')
 
-export default axiosInstance
+export { axiosInstance, formDataAxiosInstance }