diff --git a/package-lock.json b/package-lock.json
index 8ecaade2..a06955bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "taskflow",
       "version": "0.0.0",
       "dependencies": {
+        "@tanstack/vue-query": "^5.66.0",
         "axios": "^1.7.9",
         "chart.js": "^4.4.7",
         "js-cookie": "^3.0.5",
@@ -1650,6 +1651,57 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@tanstack/match-sorter-utils": {
+      "version": "8.19.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
+      "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
+      "license": "MIT",
+      "dependencies": {
+        "remove-accents": "0.5.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.66.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.66.0.tgz",
+      "integrity": "sha512-J+JeBtthiKxrpzUu7rfIPDzhscXF2p5zE/hVdrqkACBP8Yu0M96mwJ5m/8cPPYQE9aRNvXztXHlNwIh4FEeMZw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-query": {
+      "version": "5.66.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.66.0.tgz",
+      "integrity": "sha512-P0IIpP2n0Ovn2aRfjn9fyb3Agse5JNZOhCkML+arVkTu6sOSc5QlZkha5R06viE3vGnGGOLHVBTTzm4dBz/USQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/match-sorter-utils": "^8.19.4",
+        "@tanstack/query-core": "5.66.0",
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.2",
+        "vue": "^2.6.0 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tsconfig/node22": {
       "version": "22.0.0",
       "resolved": "https://registry.npmjs.org/@tsconfig/node22/-/node22-22.0.0.tgz",
@@ -4917,6 +4969,12 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
diff --git a/package.json b/package.json
index 53360169..4adbec52 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@tanstack/vue-query": "^5.66.0",
     "axios": "^1.7.9",
     "chart.js": "^4.4.7",
     "js-cookie": "^3.0.5",
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 192a0811..fe08f51f 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -69,7 +69,7 @@ import { SIDE_USER_MENU, SIDE_MANAGER_MENU, SIDE_ADMIN_MENU } from '@/constants/
 const route = useRoute()
 
 // 회원 역할, 닉네임 필요
-const role = ref('admin')
+const role = ref('manager')
 const name = ref('백지연')
 const nickname = ref('Chloe.yeon')
 
diff --git a/src/components/TaskStatus.vue b/src/components/TaskStatus.vue
index f9935189..582228bb 100644
--- a/src/components/TaskStatus.vue
+++ b/src/components/TaskStatus.vue
@@ -5,7 +5,7 @@
     <span
       class="text-xs font-bold"
       :class="textColor">
-      {{ status }}
+      {{ statusAsText(status) }}
     </span>
   </div>
 </template>
@@ -13,6 +13,7 @@
 <script setup lang="ts">
 import type { Status } from '@/types/common'
 import { statusAsColor } from '@/utils/statusAsColor'
+import { statusAsText } from '@/utils/statusAsText'
 import { computed } from 'vue'
 
 const { status, isActive } = defineProps<{
diff --git a/src/components/filters/FilterCategory.vue b/src/components/filters/FilterCategory.vue
index 78dd9c6a..acb7c27d 100644
--- a/src/components/filters/FilterCategory.vue
+++ b/src/components/filters/FilterCategory.vue
@@ -23,7 +23,7 @@
                 : 'hover:bg-background-2 text-black'
             "
             @click="() => onMainClick(category)">
-            {{ category.content }}
+            {{ category.name }}
           </li>
         </ul>
       </div>
@@ -45,17 +45,17 @@
           <ul
             class="flex flex-col gap-2"
             v-for="category in selectedCategoryList"
-            :key="category.content">
+            :key="category.name">
             <div class="w-full flex items-center gap-2">
               <div class="h-[1px] grow bg-border-2" />
               <span class="text-[10px] font-bold text-disabled">
-                {{ category.content }}
+                {{ category.name }}
               </span>
               <div class="h-[1px] grow bg-border-2" />
             </div>
             <li
               class="filter-dropdown-option"
-              v-for="subCategory in category.subCategoryList"
+              v-for="subCategory in category.subCategory"
               :key="subCategory.id"
               :class="
                 (sub as number[]).includes(subCategory.id)
@@ -63,7 +63,7 @@
                   : 'hover:bg-background-2 text-black'
               "
               @click="() => onSubClick(subCategory.id)">
-              {{ subCategory.content }}
+              {{ subCategory.name }}
             </li>
           </ul>
         </ul>
@@ -78,7 +78,7 @@ import type { Category, FilterCategoryProps } from '@/types/common'
 import { computed, ref, watchEffect } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { categoryList, main, sub } = defineProps<FilterCategoryProps>()
+const { categoryList = [], main, sub } = defineProps<FilterCategoryProps>()
 const emit = defineEmits(['update:main', 'update:sub'])
 
 const isMainOpened = ref(false)
@@ -88,7 +88,7 @@ const toggleDropdown = (type: 'main' | 'sub') =>
     ? (isMainOpened.value = !isMainOpened.value)
     : (isSubOpened.value = !isSubOpened.value)
 
-const selectedCategoryList = ref<{ content: string; subCategoryList: Category[] }[]>([])
+const selectedCategoryList = ref<{ name: string; subCategory: Category[] }[]>([])
 const isDisabled = computed(() => {
   return selectedCategoryList.value.length === 0
 })
@@ -97,22 +97,22 @@ watchEffect(() => {
 })
 
 const onMainClick = (category: Category) => {
-  if (selectedCategoryList.value.map(el => el.content).includes(category.content)) {
+  if (selectedCategoryList.value.map(el => el.name).includes(category.name)) {
     selectedCategoryList.value = [...selectedCategoryList.value].filter(
-      el => el.content !== category.content
+      el => el.name !== category.name
     )
-    if (category.subCategoryList) {
-      category.subCategoryList.forEach(el => {
+    if (category.subCategory) {
+      category.subCategory.forEach(el => {
         if ((sub as number[]).includes(el.id)) {
           emit('update:sub', el.id)
         }
       })
     }
   } else {
-    if (category.subCategoryList) {
+    if (category.subCategory) {
       selectedCategoryList.value.push({
-        content: category.content,
-        subCategoryList: category.subCategoryList
+        name: category.name,
+        subCategory: category.subCategory
       })
     }
   }
@@ -122,5 +122,3 @@ const onSubClick = (value: number) => {
   emit('update:sub', value)
 }
 </script>
-
-<style scoped></style>
diff --git a/src/components/hooks/useLogsParamsChange.ts b/src/components/hooks/useLogsParamsChange.ts
index 43001418..9ebc4473 100644
--- a/src/components/hooks/useLogsParamsChange.ts
+++ b/src/components/hooks/useLogsParamsChange.ts
@@ -24,8 +24,7 @@ export const useLogsParamsChange = () => {
   }
 
   const toggleSortBy = () => {
-    params.orderRequest.sortDirection =
-      params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC'
+    params.sortDirection = params.sortDirection === 'DESC' ? 'ASC' : 'DESC'
   }
 
   return {
diff --git a/src/components/hooks/useParseParams.ts b/src/components/hooks/useParseParams.ts
new file mode 100644
index 00000000..e1e4dcb0
--- /dev/null
+++ b/src/components/hooks/useParseParams.ts
@@ -0,0 +1,24 @@
+import type { RequestParams, TaskBoardParams, TeamBoardParams } from '@/types/stores'
+
+export const useParseParams = () => {
+  const parseRequestParams = (params: RequestParams) => {
+    const newParams = {
+      ...params,
+      mainCategoryIds: params.mainCategoryIds.join(','),
+      categoryIds: params.categoryIds.join(','),
+      taskStatus: params.taskStatus?.join(',')
+    }
+    return newParams
+  }
+
+  const parseBoardParams = (params: TaskBoardParams | TeamBoardParams) => {
+    const newParams = {
+      ...params,
+      mainCategoryIds: params.mainCategoryIds.join(','),
+      categoryIds: params.categoryIds.join(',')
+    }
+    return newParams
+  }
+
+  return { parseRequestParams, parseBoardParams }
+}
diff --git a/src/components/hooks/useRequestParamsChange.ts b/src/components/hooks/useRequestParamsChange.ts
index 383e715f..26b8f90e 100644
--- a/src/components/hooks/useRequestParamsChange.ts
+++ b/src/components/hooks/useRequestParamsChange.ts
@@ -21,10 +21,10 @@ export const useRequestParamsChange = () => {
     params.nickName = value
   }
   const onMainChange = (value: number) => {
-    params.mainCategoryId = onArrayChange(params.mainCategoryId, value)
+    params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value)
   }
   const onSubChange = (value: number) => {
-    params.categoryId = onArrayChange(params.categoryId, value)
+    params.categoryIds = onArrayChange(params.categoryIds, value)
   }
   const onTaskStatusChange = (value: string) => {
     params.taskStatus = onArrayChange(params.taskStatus!, value)
@@ -33,12 +33,12 @@ export const useRequestParamsChange = () => {
     params.pageSize = Number(value)
   }
 
-  const toggleSortBy = (sortBy: 'REQUESTED' | 'FINISHED') => {
-    if (sortBy === params.orderRequest.sortBy) {
-      params.orderRequest.sortDirection =
-        params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC'
+  const toggleSortBy = (sortBy: 'REQUESTED_AT' | 'FINISHED_AT') => {
+    if (sortBy === params.sortBy) {
+      params.sortDirection = params.sortDirection === 'DESC' ? 'ASC' : 'DESC'
     } else {
-      params.orderRequest = { sortBy, sortDirection: 'DESC' }
+      params.sortBy = sortBy
+      params.sortDirection = 'DESC'
     }
   }
 
diff --git a/src/components/hooks/useTeamBoardParamsChange.ts b/src/components/hooks/useTeamBoardParamsChange.ts
index 5b00aa3f..53c92f15 100644
--- a/src/components/hooks/useTeamBoardParamsChange.ts
+++ b/src/components/hooks/useTeamBoardParamsChange.ts
@@ -14,10 +14,10 @@ export const useTeamBoardParamsChange = () => {
     params.title = value
   }
   const onMainChange = (value: number) => {
-    params.mainCategoryId = onArrayChange(params.mainCategoryId, value)
+    params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value)
   }
   const onSubChange = (value: number) => {
-    params.categoryId = onArrayChange(params.categoryId, value)
+    params.categoryIds = onArrayChange(params.categoryIds, value)
   }
 
   return {
diff --git a/src/components/lists/ListContainer.vue b/src/components/lists/ListContainer.vue
index cd9ea20a..4a1927cf 100644
--- a/src/components/lists/ListContainer.vue
+++ b/src/components/lists/ListContainer.vue
@@ -3,7 +3,7 @@
     <div class="w-full flex flex-col grow overflow-hidden">
       <slot name="listBar" />
 
-      <div class="overflow-y-auto">
+      <div class="grow overflow-y-auto">
         <slot name="listCards" />
       </div>
     </div>
diff --git a/src/components/lists/ListPagination.vue b/src/components/lists/ListPagination.vue
index 6a8476c8..b5421813 100644
--- a/src/components/lists/ListPagination.vue
+++ b/src/components/lists/ListPagination.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="w-fit flex items-center gap-2 relative">
+  <div
+    v-if="totalPage"
+    class="w-fit h-6 flex items-center gap-2 relative">
     <div class="flex gap-1 absolute left-0 top-1/2 -translate-x-[calc(100%+8px)] -translate-y-1/2">
       <button
         v-if="pageSet[0] !== 1"
@@ -59,23 +61,21 @@ const pageSet = computed(() => {
 
 const onPrevSetClick = () => {
   const prevSetEnd = Math.floor((pageNumber - 1) / 5) * 5
-  emit('update:pageNumber', prevSetEnd)
+  emit('update:pageNumber', prevSetEnd - 1)
 }
 const onPrevClick = () => {
   const prev = Math.max(pageNumber - 1, 1)
-  emit('update:pageNumber', prev)
+  emit('update:pageNumber', prev - 1)
 }
 const onNextClick = () => {
   const next = Math.min(pageNumber + 1, totalPage)
-  emit('update:pageNumber', next)
+  emit('update:pageNumber', next - 1)
 }
 const onNextSetClick = () => {
   const nextSetStart = Math.floor((pageNumber - 1) / 5) * 5 + 6
-  emit('update:pageNumber', nextSetStart)
+  emit('update:pageNumber', nextSetStart - 1)
 }
 const onNumClick = (num: number) => {
-  emit('update:pageNumber', num)
+  emit('update:pageNumber', num - 1)
 }
 </script>
-
-<style scoped></style>
diff --git a/src/components/lists/NoContent.vue b/src/components/lists/NoContent.vue
new file mode 100644
index 00000000..c92585f8
--- /dev/null
+++ b/src/components/lists/NoContent.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="w-full h-full flex justify-center items-center">
+    <span class="text-lg text-disabled font-bold">{{ content }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { content = '표시할 항목이 없어요' } = defineProps<{ content?: string }>()
+</script>
diff --git a/src/components/member-management/MemberManagementListBar.vue b/src/components/member-management/MemberManagementListBar.vue
index b51cacc1..f4c26bc6 100644
--- a/src/components/member-management/MemberManagementListBar.vue
+++ b/src/components/member-management/MemberManagementListBar.vue
@@ -6,7 +6,7 @@
       :content="tab.content"
       :width="tab.width"
       :sortBy="tab.sortBy"
-      :current-order-request="params.orderRequest"
+      :current-order-request="orderRequest"
       :justify-center="tab.justifyCenter"
       @toggle-sort-by="toggleSortBy" />
   </div>
@@ -16,10 +16,15 @@
 import { MEMBER_MANAGEMENT_LIST_BAR_TAB } from '@/constants/admin'
 import ListBarTab from '../lists/ListBarTab.vue'
 import { useMemberManagementParamsStore } from '@/stores/params'
+import { computed } from 'vue'
 
 const { params } = useMemberManagementParamsStore()
+const orderRequest = computed(() => ({
+  sortBy: params.sortBy,
+  sortDirection: params.sortDirection
+}))
 
 const toggleSortBy = () => {
-  params.orderRequest.sortDirection = params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC'
+  params.sortDirection = params.sortDirection === 'DESC' ? 'ASC' : 'DESC'
 }
 </script>
diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue
index 4113b075..e1c2735a 100644
--- a/src/components/my-request/MyRequestFilterBar.vue
+++ b/src/components/my-request/MyRequestFilterBar.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="flex gap-4">
+  <div class="flex gap-4 z-30">
     <FilterDropdown
       title="조회 기간"
       :option-list="TERM_LIST"
       :value="String(store.params.term)"
       @update:value="onParamsChange.onTermChange" />
     <FilterCategory
-      :category-list="DUMMY_CATEGORY_LIST"
-      :main="store.params.mainCategoryId"
-      :sub="store.params.categoryId"
+      :category-list="data"
+      :main="store.params.mainCategoryIds"
+      :sub="store.params.categoryIds"
       @update:main="onParamsChange.onMainChange"
       @update:sub="onParamsChange.onSubChange" />
     <FilterInput
@@ -38,12 +38,23 @@ import FilterCategory from '../filters/FilterCategory.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import { useRequestParamsStore } from '@/stores/params'
-import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
+import axiosInstance from '@/utils/axios'
+import { useQuery } from '@tanstack/vue-query'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
+
+const fetchCategory = async () => {
+  const response = await axiosInstance.get('/api/category')
+  return response.data
+}
+
+const { data } = useQuery({
+  queryKey: ['category'],
+  queryFn: fetchCategory
+})
 </script>
diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue
index 9b224032..459ced6d 100644
--- a/src/components/my-request/MyRequestList.vue
+++ b/src/components/my-request/MyRequestList.vue
@@ -6,15 +6,16 @@
 
     <template #listCards>
       <MyRequestListCard
-        v-for="info in DUMMY_MY_REQUEST_LIST_DATA"
+        v-for="info in data?.content"
         :key="info.taskId"
         :info="info" />
+      <NoContent v-if="data?.content.length === 0" />
     </template>
 
     <template #pagination>
       <ListPagination
-        :page-number="params.page"
-        :total-page="DUMMY_TOTAL_PAGE"
+        :page-number="params.page + 1"
+        :total-page="totalPage"
         @update:page-number="onPageChange" />
     </template>
   </ListContainer>
@@ -25,14 +26,42 @@ import MyRequestListBar from './MyRequestListBar.vue'
 import MyRequestListCard from './MyRequestListCard.vue'
 import ListPagination from '../lists/ListPagination.vue'
 import ListContainer from '../lists/ListContainer.vue'
-import { DUMMY_MY_REQUEST_LIST_DATA } from '@/datas/dummy'
 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 { ref, watch } from 'vue'
+import NoContent from '../lists/NoContent.vue'
 
 const { params } = useRequestParamsStore()
-const DUMMY_TOTAL_PAGE = 18
 const onPageChange = (value: number) => {
   params.page = value
 }
 
-// Data Handling
+const fetchRequestList = async () => {
+  const { parseRequestParams } = useParseParams()
+  const parsedParams = parseRequestParams(params)
+  const response = await axiosInstance.get('/api/tasks/requests', {
+    headers: {
+      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
+    },
+    params: parsedParams
+  })
+  return response.data
+}
+
+const { data } = useQuery<MyRequestResponse>({
+  queryKey: ['myRequest', params],
+  queryFn: fetchRequestList
+})
+
+watch(
+  data,
+  () => {
+    if (data.value?.totalPages) totalPage.value = data.value.totalPages
+  },
+  { once: true }
+)
+const totalPage = ref(0)
 </script>
diff --git a/src/components/my-request/MyRequestListBar.vue b/src/components/my-request/MyRequestListBar.vue
index 690a7ffe..1c51644d 100644
--- a/src/components/my-request/MyRequestListBar.vue
+++ b/src/components/my-request/MyRequestListBar.vue
@@ -6,7 +6,7 @@
       :content="tab.content"
       :width="tab.width"
       :sortBy="tab.sortBy"
-      :current-order-request="params.orderRequest"
+      :current-order-request="orderRequest"
       @toggle-sort-by="toggleSortBy" />
   </div>
 </template>
@@ -16,8 +16,13 @@ import { MY_REQUEST_LIST_BAR_TAB } from '@/constants/user'
 import ListBarTab from '../lists/ListBarTab.vue'
 import { useRequestParamsStore } from '@/stores/params'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
+import { computed } from 'vue'
 
 const { params } = useRequestParamsStore()
+const orderRequest = computed(() => ({
+  sortBy: params.sortBy,
+  sortDirection: params.sortDirection
+}))
 
 const { toggleSortBy } = useRequestParamsChange()
 </script>
diff --git a/src/components/my-request/MyRequestListCard.vue b/src/components/my-request/MyRequestListCard.vue
index bafeb18b..2f277aaf 100644
--- a/src/components/my-request/MyRequestListCard.vue
+++ b/src/components/my-request/MyRequestListCard.vue
@@ -15,16 +15,17 @@
 import type { ListCardProps } from '@/types/common'
 import ListCardTab from '../lists/ListCardTab.vue'
 import type { MyRequestListData } from '@/types/user'
+import { formatDate } from '@/utils/date'
 
 const { info } = defineProps<{ info: MyRequestListData }>()
 const myRequestTabList: ListCardProps[] = [
   { content: info.taskCode, width: 120, isTextXs: true },
-  { content: info.requestedAt, width: 80 },
+  { content: formatDate(info.requestedAt), width: 80 },
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },
   { content: info.processorName, width: 120, profileImg: info.processorImg },
   { content: info.taskStatus, width: 64, isStatus: true },
-  { content: info.finishedAt, width: 80 }
+  { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 }
 ]
 </script>
diff --git a/src/components/my-task/MyTaskFilterBar.vue b/src/components/my-task/MyTaskFilterBar.vue
index b78acb65..26d411f8 100644
--- a/src/components/my-task/MyTaskFilterBar.vue
+++ b/src/components/my-task/MyTaskFilterBar.vue
@@ -6,9 +6,9 @@
       :value="String(store.params.term)"
       @update:value="onParamsChange.onTermChange" />
     <FilterCategory
-      :category-list="DUMMY_CATEGORY_LIST"
-      :main="store.params.mainCategoryId"
-      :sub="store.params.categoryId"
+      :category-list="data"
+      :main="store.params.mainCategoryIds"
+      :sub="store.params.categoryIds"
       @update:main="onParamsChange.onMainChange"
       @update:sub="onParamsChange.onSubChange" />
     <FilterInput
@@ -38,12 +38,23 @@ import FilterCategory from '../filters/FilterCategory.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import { useRequestParamsStore } from '@/stores/params'
-import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
 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'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
+
+const fetchCategory = async () => {
+  const response = await axiosInstance.get('/api/category')
+  return response.data
+}
+
+const { data } = useQuery({
+  queryKey: ['category'],
+  queryFn: fetchCategory
+})
 </script>
diff --git a/src/components/my-task/MyTaskListBar.vue b/src/components/my-task/MyTaskListBar.vue
index 760cad73..0779a8ba 100644
--- a/src/components/my-task/MyTaskListBar.vue
+++ b/src/components/my-task/MyTaskListBar.vue
@@ -6,7 +6,7 @@
       :content="tab.content"
       :width="tab.width"
       :sortBy="tab.sortBy"
-      :current-order-request="params.orderRequest"
+      :current-order-request="orderRequest"
       @toggle-sort-by="toggleSortBy" />
   </div>
 </template>
@@ -16,8 +16,13 @@ import ListBarTab from '../lists/ListBarTab.vue'
 import { useRequestParamsStore } from '@/stores/params'
 import { MY_TASK_LIST_BAR_TAB } from '@/constants/manager'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
+import { computed } from 'vue'
 
 const { params } = useRequestParamsStore()
+const orderRequest = computed(() => ({
+  sortBy: params.sortBy,
+  sortDirection: params.sortDirection
+}))
 
 const { toggleSortBy } = useRequestParamsChange()
 </script>
diff --git a/src/components/request-history/RequestHistoryFilterBar.vue b/src/components/request-history/RequestHistoryFilterBar.vue
index 74065fd7..6dfcaf2c 100644
--- a/src/components/request-history/RequestHistoryFilterBar.vue
+++ b/src/components/request-history/RequestHistoryFilterBar.vue
@@ -6,9 +6,9 @@
       :value="String(store.params.term)"
       @update:value="onParamsChange.onTermChange" />
     <FilterCategory
-      :category-list="DUMMY_CATEGORY_LIST"
-      :main="store.params.mainCategoryId"
-      :sub="store.params.categoryId"
+      :category-list="data"
+      :main="store.params.mainCategoryIds"
+      :sub="store.params.categoryIds"
       @update:main="onParamsChange.onMainChange"
       @update:sub="onParamsChange.onSubChange" />
     <FilterInput
@@ -36,14 +36,25 @@
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterInput from '../filters/FilterInput.vue'
-import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
 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 { useQuery } from '@tanstack/vue-query'
+import axiosInstance from '@/utils/axios'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
+
+const fetchCategory = async () => {
+  const response = await axiosInstance.get('/api/category')
+  return response.data
+}
+
+const { data } = useQuery({
+  queryKey: ['category'],
+  queryFn: fetchCategory
+})
 </script>
diff --git a/src/components/request-history/RequestHistoryListBar.vue b/src/components/request-history/RequestHistoryListBar.vue
index 4be5006f..8b566760 100644
--- a/src/components/request-history/RequestHistoryListBar.vue
+++ b/src/components/request-history/RequestHistoryListBar.vue
@@ -6,7 +6,7 @@
       :content="tab.content"
       :width="tab.width"
       :sortBy="tab.sortBy"
-      :current-order-request="params.orderRequest"
+      :current-order-request="orderRequest"
       @toggle-sort-by="toggleSortBy" />
   </div>
 </template>
@@ -16,8 +16,13 @@ import ListBarTab from '../lists/ListBarTab.vue'
 import { useRequestParamsStore } from '@/stores/params'
 import { REQUEST_HISTORY_LIST_BAR_TAB } from '@/constants/manager'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
+import { computed } from 'vue'
 
 const { params } = useRequestParamsStore()
+const orderRequest = computed(() => ({
+  sortBy: params.sortBy,
+  sortDirection: params.sortDirection
+}))
 
 const { toggleSortBy } = useRequestParamsChange()
 </script>
diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue
index c25519a5..cfecbcec 100644
--- a/src/components/requested/RequestedFilterBar.vue
+++ b/src/components/requested/RequestedFilterBar.vue
@@ -6,9 +6,9 @@
       :value="String(store.params.term)"
       @update:value="onParamsChange.onTermChange" />
     <FilterCategory
-      :category-list="DUMMY_CATEGORY_LIST"
-      :main="store.params.mainCategoryId"
-      :sub="store.params.categoryId"
+      :category-list="data"
+      :main="store.params.mainCategoryIds"
+      :sub="store.params.categoryIds"
       @update:main="onParamsChange.onMainChange"
       @update:sub="onParamsChange.onSubChange" />
     <FilterInput
@@ -31,13 +31,24 @@
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterInput from '../filters/FilterInput.vue'
-import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
 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'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
+
+const fetchCategory = async () => {
+  const response = await axiosInstance.get('/api/category')
+  return response.data
+}
+
+const { data } = useQuery({
+  queryKey: ['category'],
+  queryFn: fetchCategory
+})
 </script>
diff --git a/src/components/requested/RequestedListBar.vue b/src/components/requested/RequestedListBar.vue
index 438535ed..848db315 100644
--- a/src/components/requested/RequestedListBar.vue
+++ b/src/components/requested/RequestedListBar.vue
@@ -6,7 +6,7 @@
       :content="tab.content"
       :width="tab.width"
       :sort-by="tab.sortBy"
-      :current-order-request="params.orderRequest"
+      :current-order-request="orderRequest"
       @toggle-sort-by="toggleSortBy"
       :justify-center="tab.justifyCenter" />
   </div>
@@ -17,8 +17,13 @@ import { REQUESTED_LIST_BAR_TAB } from '@/constants/manager'
 import ListBarTab from '../lists/ListBarTab.vue'
 import { useRequestParamsStore } from '@/stores/params'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
+import { computed } from 'vue'
 
 const { params } = useRequestParamsStore()
+const orderRequest = computed(() => ({
+  sortBy: params.sortBy,
+  sortDirection: params.sortDirection
+}))
 
 const { toggleSortBy } = useRequestParamsChange()
 </script>
diff --git a/src/components/task-board/TaskBoardFilterBar.vue b/src/components/task-board/TaskBoardFilterBar.vue
index 530de1ce..a4841f5d 100644
--- a/src/components/task-board/TaskBoardFilterBar.vue
+++ b/src/components/task-board/TaskBoardFilterBar.vue
@@ -6,9 +6,9 @@
       :value="params.division"
       @update:value="onDivisionChange" />
     <FilterCategory
-      :category-list="DUMMY_CATEGORY_LIST"
-      :main="params.mainCategoryId"
-      :sub="params.categoryId"
+      :category-list="data"
+      :main="params.mainCategoryIds"
+      :sub="params.categoryIds"
       @update:main="onMainChange"
       @update:sub="onSubChange" />
     <FilterInput
@@ -26,8 +26,10 @@
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterInput from '../filters/FilterInput.vue'
-import { DUMMY_CATEGORY_LIST, DUMMY_DIVISION_LIST } from '@/datas/dummy'
+import { DUMMY_DIVISION_LIST } from '@/datas/dummy'
 import { useTaskBoardParamsStore } from '@/stores/params'
+import { useQuery } from '@tanstack/vue-query'
+import axiosInstance from '@/utils/axios'
 
 const { params } = useTaskBoardParamsStore()
 
@@ -39,10 +41,10 @@ const onDivisionChange = (value: string) => {
   params.division = value
 }
 const onMainChange = (value: number) => {
-  params.mainCategoryId = onArrayChange(params.mainCategoryId, value)
+  params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value)
 }
 const onSubChange = (value: number) => {
-  params.categoryId = onArrayChange(params.categoryId, value)
+  params.categoryIds = onArrayChange(params.categoryIds, value)
 }
 const onNickNameChange = (value: string) => {
   params.nickName = value
@@ -50,4 +52,14 @@ const onNickNameChange = (value: string) => {
 const onTitleChange = (value: string) => {
   params.title = value
 }
+
+const fetchCategory = async () => {
+  const response = await axiosInstance.get('/api/category')
+  return response.data
+}
+
+const { data } = useQuery({
+  queryKey: ['category'],
+  queryFn: fetchCategory
+})
 </script>
diff --git a/src/components/team-board/TeamBoardFilterBar.vue b/src/components/team-board/TeamBoardFilterBar.vue
index 3e673e49..729e046e 100644
--- a/src/components/team-board/TeamBoardFilterBar.vue
+++ b/src/components/team-board/TeamBoardFilterBar.vue
@@ -13,23 +13,34 @@
       :value="''"
       @update:value="onParamsChange.onTitleChange" />
     <FilterCategory
-      :category-list="DUMMY_CATEGORY_LIST"
-      :main="params.mainCategoryId"
-      :sub="params.categoryId"
+      :category-list="data"
+      :main="params.mainCategoryIds"
+      :sub="params.categoryIds"
       @update:main="onParamsChange.onMainChange"
       @update:sub="onParamsChange.onSubChange" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
 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()
 
 const onParamsChange = useTeamBoardParamsChange()
+
+const fetchCategory = async () => {
+  const response = await axiosInstance.get('/api/category')
+  return response.data
+}
+
+const { data } = useQuery({
+  queryKey: ['category'],
+  queryFn: fetchCategory
+})
 </script>
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index da93912f..197cb3e5 100644
--- a/src/constants/admin.ts
+++ b/src/constants/admin.ts
@@ -8,7 +8,7 @@ export const MEMBER_MANAGEMENT_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '이메일' },
   { content: '역할', width: 60 },
   { content: '승인 권한', width: 60 },
-  { content: '가입일', width: 80, sortBy: 'REGISTERED' },
+  { content: '가입일', width: 80, sortBy: 'REGISTERED_AT' },
   { content: '처리', width: 180, justifyCenter: true }
 ]
 
@@ -27,7 +27,7 @@ export const API_LOGS_DIVISION_LIST: Option[] = [
 
 export const LOGS_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '구분', width: 80 },
-  { content: '시각', width: 180, sortBy: 'CREATED' },
+  { content: '시각', width: 180, sortBy: 'CREATED_AT' },
   { content: '아이디', width: 80 },
   { content: 'IP 주소', width: 120 },
   { content: 'Status', width: 40 },
diff --git a/src/constants/manager.ts b/src/constants/manager.ts
index 2ca41e92..380eb26c 100644
--- a/src/constants/manager.ts
+++ b/src/constants/manager.ts
@@ -2,7 +2,7 @@ import type { ListBarTabProps } from '@/types/common'
 import type { RequestApproveFormData } from '@/types/manager'
 
 export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [
-  { content: '요청일', width: 80, sortBy: 'REQUESTED' },
+  { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' },
   { content: '1차 카테고리', width: 80 },
   { content: '2차 카테고리', width: 80 },
   { content: '제목' },
@@ -12,25 +12,25 @@ export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [
 
 export const REQUEST_HISTORY_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '고유코드', width: 120 },
-  { content: '요청일', width: 80, sortBy: 'REQUESTED' },
+  { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' },
   { content: '1차 카테고리', width: 80 },
   { content: '2차 카테고리', width: 80 },
   { content: '제목' },
   { content: '요청자', width: 120 },
   { content: '처리자', width: 120 },
   { content: '상태', width: 64 },
-  { content: '종료일', width: 80, sortBy: 'FINISHED' }
+  { content: '종료일', width: 80, sortBy: 'FINISHED_AT' }
 ]
 
 export const MY_TASK_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '고유코드', width: 120 },
-  { content: '요청일', width: 80, sortBy: 'REQUESTED' },
+  { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' },
   { content: '1차 카테고리', width: 80 },
   { content: '2차 카테고리', width: 80 },
   { content: '제목' },
   { content: '요청자', width: 120 },
   { content: '상태', width: 64 },
-  { content: '종료일', width: 80, sortBy: 'FINISHED' }
+  { content: '종료일', width: 80, sortBy: 'FINISHED_AT' }
 ]
 
 export const INITIAL_REQUEST_APPROVE_FORM: RequestApproveFormData = {
diff --git a/src/constants/user.ts b/src/constants/user.ts
index 2d4333ca..317d1db4 100644
--- a/src/constants/user.ts
+++ b/src/constants/user.ts
@@ -4,17 +4,17 @@ import type { ListBarTabProps } from '@/types/common'
 
 export const MY_REQUEST_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '고유코드', width: 120 },
-  { content: '요청일', width: 80, sortBy: 'REQUESTED' },
+  { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' },
   { content: '1차 카테고리', width: 80 },
   { content: '2차 카테고리', width: 80 },
   { content: '제목' },
   { content: '처리자', width: 120 },
   { content: '상태', width: 64 },
-  { content: '종료일', width: 80, sortBy: 'FINISHED' }
+  { content: '종료일', width: 80, sortBy: 'FINISHED_AT' }
 ]
 
 export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [
-  { content: '요청일', width: 80, sortBy: 'REQUESTED' },
+  { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' },
   { content: '1차 카테고리', width: 80 },
   { content: '2차 카테고리', width: 80 },
   { content: '제목' },
diff --git a/src/datas/dummy.ts b/src/datas/dummy.ts
index cb9d2dda..c970246c 100644
--- a/src/datas/dummy.ts
+++ b/src/datas/dummy.ts
@@ -1,294 +1,10 @@
 import type { LogsListData, MemberManagementListData } from '@/types/admin'
-import type { Category } from '@/types/common'
 import type {
   MyTaskListData,
   RequestedListData,
   RequestHistoryListData,
   TaskCardList
 } from '@/types/manager'
-import type { MyRequestListData } from '@/types/user'
-
-export const DUMMY_CATEGORY_LIST: Category[] = [
-  {
-    id: 1,
-    content: '인프라 검토',
-    subCategoryList: [
-      { id: 11, content: '생성' },
-      { id: 12, content: '삭제' },
-      { id: 13, content: '변경' },
-      { id: 14, content: '기타' }
-    ]
-  },
-  {
-    id: 2,
-    content: 'VM',
-    subCategoryList: [
-      { id: 21, content: '생성' },
-      { id: 22, content: '삭제' },
-      { id: 23, content: '변경' },
-      { id: 24, content: '기타' }
-    ]
-  },
-  {
-    id: 3,
-    content: 'LB',
-    subCategoryList: [
-      { id: 31, content: '생성' },
-      { id: 32, content: '삭제' },
-      { id: 33, content: '변경' },
-      { id: 34, content: '기타' }
-    ]
-  },
-  {
-    id: 4,
-    content: 'K8S',
-    subCategoryList: [
-      { id: 41, content: '생성' },
-      { id: 42, content: '삭제' },
-      { id: 43, content: '변경' },
-      { id: 44, content: '기타' }
-    ]
-  }
-]
-
-export const DUMMY_MY_REQUEST_LIST_DATA: MyRequestListData[] = [
-  {
-    taskId: 1,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorName: '',
-    taskStatus: '요청',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 2,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '진행 중',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 3,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '검토 중',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 4,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '완료',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 5,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '종료',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 6,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorName: '',
-    taskStatus: '요청',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 7,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '진행 중',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 8,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '검토 중',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 9,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '완료',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 10,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '종료',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 11,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorName: '',
-    taskStatus: '요청',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 12,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '진행 중',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 13,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '검토 중',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 14,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '완료',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 15,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '종료',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 16,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorName: '',
-    taskStatus: '요청',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 17,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '진행 중',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 18,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '검토 중',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 19,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '완료',
-    finishedAt: '2025.01.11'
-  },
-  {
-    taskId: 20,
-    taskCode: 'asfawnwakngla',
-    requestedAt: '2025.01.01',
-    mainCategoryName: 'VM',
-    categoryName: '생성',
-    title: 'VM 생성 부탁드립니다',
-    processorImg: 'https://picsum.photos/24/24',
-    processorName: 'Tony.tsx',
-    taskStatus: '종료',
-    finishedAt: '2025.01.11'
-  }
-]
 
 export const DUMMY_REQUESTED_LIST_DATA: RequestedListData[] = [
   {
diff --git a/src/main.ts b/src/main.ts
index 02f2e116..167014d1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,10 +5,12 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import router from './router'
+import { VueQueryPlugin } from '@tanstack/vue-query'
 
 const app = createApp(App)
 
 app.use(createPinia())
+app.use(VueQueryPlugin)
 app.use(router)
 
 app.mount('#app')
diff --git a/src/stores/params.ts b/src/stores/params.ts
index 2162210d..17eeb14b 100644
--- a/src/stores/params.ts
+++ b/src/stores/params.ts
@@ -10,27 +10,29 @@ import { ref } from 'vue'
 
 export const useRequestParamsStore = defineStore('requestParams', () => {
   const params = ref<RequestParams>({
+    page: 0,
+    pageSize: 20,
     term: '',
-    mainCategoryId: [],
-    categoryId: [],
+    mainCategoryIds: [],
+    categoryIds: [],
     title: '',
     nickName: '',
     taskStatus: [],
-    pageSize: 20,
-    page: 1,
-    orderRequest: { sortBy: 'REQUESTED', sortDirection: 'DESC' }
+    sortBy: 'REQUESTED_AT',
+    sortDirection: 'DESC'
   })
 
   const $reset = () => {
+    params.value.page = 0
+    params.value.pageSize = 20
     params.value.term = ''
-    params.value.mainCategoryId = []
-    params.value.categoryId = []
+    params.value.mainCategoryIds = []
+    params.value.categoryIds = []
     params.value.title = ''
     params.value.nickName = ''
     params.value.taskStatus = []
-    params.value.pageSize = 20
-    params.value.page = 1
-    params.value.orderRequest = { sortBy: 'REQUESTED', sortDirection: 'DESC' }
+    params.value.sortBy = 'REQUESTED_AT'
+    params.value.sortDirection = 'DESC'
   }
 
   return { params, $reset }
@@ -45,7 +47,8 @@ export const useMemberManagementParamsStore = defineStore('userManagementParams'
     role: '',
     pageSize: 20,
     page: 1,
-    orderRequest: { sortBy: 'REGISTERED', sortDirection: 'DESC' }
+    sortBy: 'REGISTERED_AT',
+    sortDirection: 'DESC'
   })
 
   return { params }
@@ -59,7 +62,8 @@ export const useLogsParamsStore = defineStore('logsParams', () => {
     ipAddress: '',
     pageSize: 20,
     page: 1,
-    orderRequest: { sortBy: 'CREATED', sortDirection: 'DESC' }
+    sortBy: 'CREATED_AT',
+    sortDirection: 'DESC'
   })
 
   const $reset = () => {
@@ -69,7 +73,8 @@ export const useLogsParamsStore = defineStore('logsParams', () => {
     params.value.ipAddress = ''
     params.value.pageSize = 20
     params.value.page = 1
-    params.value.orderRequest = { sortBy: 'CREATED', sortDirection: 'DESC' }
+    params.value.sortBy = 'CREATED_AT'
+    params.value.sortDirection = 'DESC'
   }
 
   return { params, $reset }
@@ -79,8 +84,8 @@ export const useTeamBoardParamsStore = defineStore('teamBoardParams', () => {
   const params = ref<TeamBoardParams>({
     order: 'CONTRIBUTION',
     title: '',
-    mainCategoryId: [],
-    categoryId: []
+    mainCategoryIds: [],
+    categoryIds: []
   })
 
   return { params }
@@ -89,8 +94,8 @@ export const useTeamBoardParamsStore = defineStore('teamBoardParams', () => {
 export const useTaskBoardParamsStore = defineStore('taskBoardParams', () => {
   const params = ref<TaskBoardParams>({
     division: '',
-    mainCategoryId: [],
-    categoryId: [],
+    mainCategoryIds: [],
+    categoryIds: [],
     title: '',
     nickName: '',
     pageSize: 20,
diff --git a/src/types/common.ts b/src/types/common.ts
index c4185059..92ae0f91 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -14,8 +14,9 @@ export interface Option {
 
 export interface Category {
   id: number
-  content: string
-  subCategoryList?: { id: number; content: string }[]
+  name: string
+  code: string
+  subCategory?: { id: number; mainCategoryId: number; name: string; code: string }[]
 }
 
 export interface FilterCategoryProps {
@@ -42,7 +43,7 @@ export interface ListBarTabProps {
   justifyCenter?: boolean
 }
 
-export type Status = '요청' | '진행 중' | '검토 중' | '완료' | '종료'
+export type Status = 'REQUESTED' | 'IN_PROGRESS' | 'PENDING_COMPLETED' | 'COMPLETED' | 'TERMINATED'
 
 export type SortDirection = 'DESC' | 'ASC'
 
@@ -70,4 +71,4 @@ export interface ColorSelectProps {
   devisionId: number
   selectedDivisionId: number | null
   isOpen: boolean
-}
\ No newline at end of file
+}
diff --git a/src/types/stores.ts b/src/types/stores.ts
index d5f241ba..9c3d2f3d 100644
--- a/src/types/stores.ts
+++ b/src/types/stores.ts
@@ -1,15 +1,16 @@
 import type { Role, SortDirection } from './common'
 
 export interface RequestParams {
+  page: number
+  pageSize: number
   term: number | ''
-  mainCategoryId: number[]
-  categoryId: number[]
+  mainCategoryIds: number[]
+  categoryIds: number[]
   title: string
   nickName: string
   taskStatus?: string[]
-  pageSize: number
-  page: number
-  orderRequest: { sortBy: 'REQUESTED' | 'FINISHED'; sortDirection: SortDirection }
+  sortBy: 'REQUESTED_AT' | 'FINISHED_AT'
+  sortDirection: SortDirection
 }
 
 export interface MemberManagementParams {
@@ -20,7 +21,8 @@ export interface MemberManagementParams {
   role: Role | ''
   pageSize: number
   page: number
-  orderRequest: { sortBy: 'REGISTERED'; sortDirection: SortDirection }
+  sortBy: 'REGISTERED_AT'
+  sortDirection: SortDirection
 }
 
 export interface LogsParams {
@@ -30,20 +32,21 @@ export interface LogsParams {
   ipAddress: string
   pageSize: number
   page: number
-  orderRequest: { sortBy: 'CREATED'; sortDirection: SortDirection }
+  sortBy: 'CREATED_AT'
+  sortDirection: SortDirection
 }
 
 export interface TeamBoardParams {
   order: string
   title: string
-  mainCategoryId: number[]
-  categoryId: number[]
+  mainCategoryIds: number[]
+  categoryIds: number[]
 }
 
 export interface TaskBoardParams {
   division: string | ''
-  mainCategoryId: number[]
-  categoryId: number[]
+  mainCategoryIds: number[]
+  categoryIds: number[]
   title: string
   nickName: string
   pageSize: number
diff --git a/src/types/user.ts b/src/types/user.ts
index 9d2eee3f..ffb30fb1 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -140,3 +140,13 @@ export interface TaskHistoryDatas {
   dueDate?: string
   labelName?: string
 }
+
+export interface MyRequestResponse {
+  content: MyRequestListData[]
+  totalElements: number
+  totalPages: number
+  pageNumber: number
+  pageSize: number
+  isFirst: boolean
+  isLast: boolean
+}
diff --git a/src/utils/statusAsColor.ts b/src/utils/statusAsColor.ts
index be2686f0..78a65d8b 100644
--- a/src/utils/statusAsColor.ts
+++ b/src/utils/statusAsColor.ts
@@ -1,11 +1,11 @@
 import type { Status } from '@/types/common'
 
 const defaultColor = {
-  요청: 'gray',
-  '진행 중': 'blue',
-  '검토 중': 'orange',
-  완료: 'green',
-  종료: 'red'
+  REQUESTED: 'gray',
+  IN_PROGRESS: 'blue',
+  PENDING_COMPLETED: 'orange',
+  COMPLETED: 'green',
+  TERMINATED: 'red'
 }
 
 export const statusAsColor = (status: Status) => {
diff --git a/src/utils/statusAsText.ts b/src/utils/statusAsText.ts
new file mode 100644
index 00000000..e2b4fa8f
--- /dev/null
+++ b/src/utils/statusAsText.ts
@@ -0,0 +1,13 @@
+import type { Status } from '@/types/common'
+
+const text = {
+  REQUESTED: '요청',
+  IN_PROGRESS: '진행 중',
+  PENDING_COMPLETED: '검토 중',
+  COMPLETED: '완료',
+  TERMINATED: '종료'
+}
+
+export const statusAsText = (status: Status) => {
+  return text[status]
+}