diff --git a/apps/web/src/api-clients/add-ons/favorite/schema/list.ts b/apps/web/src/api-clients/add-ons/favorite/schema/list.ts
index 58ace2baa1..602911ee80 100644
--- a/apps/web/src/api-clients/add-ons/favorite/schema/list.ts
+++ b/apps/web/src/api-clients/add-ons/favorite/schema/list.ts
@@ -1,7 +1,7 @@
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { FavoriteModel } from '@/api-clients/add-ons/favorite/schema/model';
 
-import type { FavoriteType } from '@/common/modules/favorites/favorite-button/type';
+import type { FavoriteType } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 export interface FavoriteListParameters {
     type: FavoriteType;
diff --git a/apps/web/src/api-clients/add-ons/favorite/schema/model.ts b/apps/web/src/api-clients/add-ons/favorite/schema/model.ts
index 1959b6e297..8cb7c843bc 100644
--- a/apps/web/src/api-clients/add-ons/favorite/schema/model.ts
+++ b/apps/web/src/api-clients/add-ons/favorite/schema/model.ts
@@ -1,6 +1,6 @@
 import type { UserConfigModel } from '@/api-clients/config/user-config/schema/model';
 
-import type { FavoriteType } from '@/common/modules/favorites/favorite-button/type';
+import type { FavoriteType } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 export type FavoriteModel = UserConfigModel<{
     workspace_id: string;
diff --git a/apps/web/src/api-clients/config/user-config/composables/use-user-config-api.ts b/apps/web/src/api-clients/config/user-config/composables/use-user-config-api.ts
index 2f25742c73..4e266668a9 100644
--- a/apps/web/src/api-clients/config/user-config/composables/use-user-config-api.ts
+++ b/apps/web/src/api-clients/config/user-config/composables/use-user-config-api.ts
@@ -16,7 +16,7 @@ export const useUserConfigApi = () => {
         delete: SpaceConnector.clientV2.config.userConfig.delete<UserConfigDeleteParameters>,
         get: <T = Record<string, any>>(params: UserConfigGetParameters) => SpaceConnector.clientV2.config.userConfig.get<UserConfigGetParameters, UserConfigModel<T>>(params),
         list: <T = Record<string, any>>(params: UserConfigListParameters) => SpaceConnector.clientV2.config.userConfig.list<UserConfigListParameters, ListResponse<UserConfigModel<T>>>(params),
-        set: SpaceConnector.clientV2.config.userConfig.set<UserConfigSetParameters, UserConfigModel>,
+        set: <T = Record<string, any>>(params: UserConfigSetParameters) => SpaceConnector.clientV2.config.userConfig.set<UserConfigSetParameters, UserConfigModel<T>>(params),
     };
 
     return {
diff --git a/apps/web/src/api-clients/identity/user-profile/composables/use-user-profile-api.ts b/apps/web/src/api-clients/identity/user-profile/composables/use-user-profile-api.ts
index ca74db5831..4122ee08d0 100644
--- a/apps/web/src/api-clients/identity/user-profile/composables/use-user-profile-api.ts
+++ b/apps/web/src/api-clients/identity/user-profile/composables/use-user-profile-api.ts
@@ -1,5 +1,6 @@
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserProfileConfirmEmailParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/confirm-email';
 import type { UserProfileConfirmMfaParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/confirm-mfa';
 import type { UserProfileDisableMfaParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/disable-mfa';
@@ -10,7 +11,7 @@ import type { UserProfileUpdateParameters } from '@/api-clients/identity/user-pr
 import type { UserProfileUpdatePasswordParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/update-password';
 import type { UserProfileVerifyEmailParameters } from '@/api-clients/identity/user-profile/schema/api-verbs/verify-email';
 import type { UserModel } from '@/api-clients/identity/user/schema/model';
-
+import type { WorkspaceModel } from '@/api-clients/identity/workspace/schema/model';
 
 
 export const useUserProfileApi = () => {
@@ -23,7 +24,7 @@ export const useUserProfileApi = () => {
         disableMfa: SpaceConnector.clientV2.identity.userProfile.disableMfa<UserProfileDisableMfaParameters, UserModel>,
         enableMfa: SpaceConnector.clientV2.identity.userProfile.enableMfa<UserProfileEnableMfaParameters, UserModel>,
         confirmMfa: SpaceConnector.clientV2.identity.userProfile.confirmMfa<UserProfileConfirmMfaParameters, UserModel>,
-        getWorkspaces: SpaceConnector.clientV2.identity.userProfile.getWorkspaces<UserProfileGetWorkspacesParameters, any>,
+        getWorkspaces: SpaceConnector.clientV2.identity.userProfile.getWorkspaces<UserProfileGetWorkspacesParameters, ListResponse<WorkspaceModel>>,
         getWorkspaceGroups: SpaceConnector.clientV2.identity.userProfile.getWorkspaceGroups<UserProfileGetWorkspacesParameters, any>,
     };
 
diff --git a/apps/web/src/common/modules/favorites/favorite-button/FavoriteButton.vue b/apps/web/src/common/modules/favorites/favorite-button/FavoriteButton.vue
deleted file mode 100644
index 24f50751af..0000000000
--- a/apps/web/src/common/modules/favorites/favorite-button/FavoriteButton.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<script setup lang="ts">
-import {
-    computed, reactive,
-} from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { PI } from '@cloudforet/mirinae';
-
-import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
-import type { WorkspaceModel } from '@/api-clients/identity/workspace/schema/model';
-import type { MetricExampleModel } from '@/api-clients/inventory/metric-example/schema/model';
-
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CloudServiceTypeReferenceMap } from '@/store/reference/cloud-service-type-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import type { MetricReferenceMap } from '@/store/reference/metric-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-import type { ServiceReferenceMap } from '@/store/reference/service-reference-store';
-
-import type { ReferenceData } from '@/lib/helper/config-data-helper';
-import {
-    convertCloudServiceConfigToReferenceData,
-    convertCostAnalysisConfigToReferenceData,
-    convertDashboardConfigToReferenceData,
-    convertMenuConfigToReferenceData,
-    convertMetricConfigToReferenceData,
-    convertMetricExampleConfigToReferenceData,
-    convertProjectConfigToReferenceData,
-    convertProjectGroupConfigToReferenceData,
-    convertWorkspaceConfigToReferenceData,
-    convertServiceConfigToReferenceData,
-} from '@/lib/helper/config-data-helper';
-import { useAllMenuList } from '@/lib/menu/use-all-menu-list';
-
-import { useGlobalDashboardQuery } from '@/common/composables/global-dashboard/use-global-dashboard-query';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import type { FavoriteType, FavoriteConfig } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-
-
-interface Props {
-    itemId: string;
-    favoriteType: FavoriteType;
-    scale?: string;
-    readOnly?: boolean;
-    visibleActiveCaseOnly?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    scale: '1',
-    readOnly: false,
-    visibleActiveCaseOnly: false,
-});
-
-const route = useRoute();
-const router = useRouter();
-
-const allReferenceStore = useAllReferenceStore();
-const userWorkspaceStore = useUserWorkspaceStore();
-const workspaceStoreGetters = userWorkspaceStore.getters;
-const appContextStore = useAppContextStore();
-const favoriteStore = useFavoriteStore();
-const favoriteStoreGetters = favoriteStore.getters;
-const gnbStore = useGnbStore();
-const gnbStoreGetters = gnbStore.getters;
-const { getAllMenuList } = useAllMenuList();
-
-
-/* Query */
-const {
-    publicDashboardListQuery,
-    privateDashboardListQuery,
-} = useGlobalDashboardQuery();
-
-const emit = defineEmits<{(e: 'click-favorite'): void;
-}>();
-
-const dashboardList = computed(() => [...(publicDashboardListQuery?.data?.value ?? []), ...(privateDashboardListQuery?.data?.value ?? [])]);
-const storeState = reactive({
-    favoriteMenuList: computed(() => favoriteStoreGetters.favoriteMenuList),
-    favoriteWorkspaceMenuList: computed(() => favoriteStoreGetters.workspaceItems),
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-    workspaceList: computed<WorkspaceModel[]>(() => workspaceStoreGetters.workspaceList),
-    currentWorkspaceId: computed(() => workspaceStoreGetters.currentWorkspaceId as string),
-    projects: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    cloudServiceTypes: computed<CloudServiceTypeReferenceMap>(() => allReferenceStore.getters.cloudServiceType),
-    metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
-    service: computed<ServiceReferenceMap>(() => allReferenceStore.getters.service),
-    metricExamples: computed<MetricExampleModel[]>(() => gnbStoreGetters.metricExamples),
-    costQuerySets: computed<CostQuerySetModel[]>(() => gnbStoreGetters.costQuerySets),
-});
-const state = reactive({
-    active: computed(() => {
-        const targetList = props.favoriteType === FAVORITE_TYPE.WORKSPACE ? storeState.favoriteWorkspaceMenuList : storeState.favoriteMenuList;
-        const favoriteItem = targetList.findIndex((d) => (d.itemId === props?.itemId
-            && (d.itemType === props.favoriteType)));
-        return favoriteItem > -1;
-    }),
-});
-
-const handleClickFavoriteButton = async (event: MouseEvent) => {
-    if (storeState.isAdminMode) return;
-    event.stopPropagation();
-    if (props.readOnly) return;
-    if (state.active) {
-        await favoriteStore.deleteFavorite({
-            itemType: props.favoriteType,
-            workspaceId: storeState.currentWorkspaceId,
-            itemId: props?.itemId,
-        });
-    } else {
-        const params: FavoriteConfig = {
-            itemType: props.favoriteType,
-            workspaceId: storeState.currentWorkspaceId,
-            itemId: props?.itemId,
-        };
-        const referenceData = convertFavoriteToReferenceData(params);
-        await favoriteStore.createFavorite(referenceData || params);
-    }
-    emit('click-favorite');
-};
-const convertFavoriteToReferenceData = (favoriteConfig: FavoriteConfig): ReferenceData|undefined => {
-    const { itemType } = favoriteConfig;
-    if (itemType === FAVORITE_TYPE.DASHBOARD) {
-        return convertDashboardConfigToReferenceData([favoriteConfig], dashboardList.value)[0];
-    }
-    if (itemType === FAVORITE_TYPE.PROJECT) {
-        return convertProjectConfigToReferenceData([favoriteConfig], storeState.projects)[0];
-    }
-    if (itemType === FAVORITE_TYPE.PROJECT_GROUP) {
-        return convertProjectGroupConfigToReferenceData([favoriteConfig], storeState.projectGroups)[0];
-    }
-    if (itemType === FAVORITE_TYPE.CLOUD_SERVICE || itemType === FAVORITE_TYPE.SECURITY) {
-        return convertCloudServiceConfigToReferenceData([favoriteConfig], storeState.cloudServiceTypes)[0];
-    }
-    if (itemType === FAVORITE_TYPE.METRIC) {
-        return convertMetricConfigToReferenceData([favoriteConfig], storeState.metrics)[0];
-    }
-    if (itemType === FAVORITE_TYPE.METRIC_EXAMPLE) {
-        return convertMetricExampleConfigToReferenceData([favoriteConfig], storeState.metricExamples)[0];
-    }
-    if (itemType === FAVORITE_TYPE.COST_ANALYSIS) {
-        return convertCostAnalysisConfigToReferenceData([favoriteConfig], storeState.costQuerySets, storeState.costDataSource)[0];
-    }
-    if (itemType === FAVORITE_TYPE.WORKSPACE) {
-        return convertWorkspaceConfigToReferenceData([favoriteConfig], storeState.workspaceList)[0];
-    }
-    if (itemType === FAVORITE_TYPE.SERVICE) {
-        return convertServiceConfigToReferenceData([favoriteConfig], storeState.service)[0];
-    }
-    const allMenuList = getAllMenuList(route, router);
-    return convertMenuConfigToReferenceData([favoriteConfig], allMenuList)[0];
-};
-</script>
-
-<template>
-    <p-i
-        v-if="!storeState.isAdminMode"
-        v-show="(props.visibleActiveCaseOnly || props.readOnly) ? state.active : true"
-        :name="state.active ? 'ic_favorite-filled': 'ic_favorite'"
-        width="1rem"
-        height="1rem"
-        :scale="props.scale"
-        color="inherit"
-        class="favorite-btn"
-        :class="{active: state.active, 'read-only': props.readOnly}"
-        @click.prevent="handleClickFavoriteButton"
-    />
-</template>
-
-<style lang="postcss" scoped>
-.favorite-btn {
-    @apply text-gray-300;
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    &:not(.read-only) {
-        cursor: pointer;
-        &:hover {
-            transform: scale(1.1);
-            &:not(.active) {
-                @apply text-gray-300;
-            }
-        }
-    }
-    &.active {
-        @apply text-yellow-500;
-    }
-}
-</style>
diff --git a/apps/web/src/common/modules/navigations/gnb/GNBToolbox.vue b/apps/web/src/common/modules/navigations/gnb/GNBToolbox.vue
index 48e6b0a6ec..3928815f55 100644
--- a/apps/web/src/common/modules/navigations/gnb/GNBToolbox.vue
+++ b/apps/web/src/common/modules/navigations/gnb/GNBToolbox.vue
@@ -24,12 +24,11 @@ import type { MenuId } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
 
 import { useBreadcrumbs } from '@/common/composables/breadcrumbs';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import type { Breadcrumb } from '@/common/modules/page-layouts/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { LANDING_ROUTE } from '@/services/landing/routes/route-constant';
 import { MY_PAGE_ROUTE } from '@/services/my-page/routes/route-constant';
@@ -38,7 +37,6 @@ const userWorkspaceStore = useUserWorkspaceStore();
 const userWorkspaceGetters = userWorkspaceStore.getters;
 const gnbStore = useGnbStore();
 const gnbGetters = gnbStore.getters;
-const favoriteStore = useFavoriteStore();
 const appContextStore = useAppContextStore();
 const appContextGetters = appContextStore.getters;
 
@@ -112,7 +110,6 @@ const handleClickBreadcrumbsDropdownItem = (item: MenuItem) => {
 
 watch(() => state.selectedMenuId, async (selectedMenuId) => {
     await gnbStore.initState();
-    await favoriteStore.fetchFavorite();
 
     if (selectedMenuId === MENU_ID.COST_ANALYSIS) {
         await gnbStore.fetchCostQuerySet();
diff --git a/apps/web/src/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue b/apps/web/src/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue
index 3c91aafac5..51c7dc123a 100644
--- a/apps/web/src/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue
+++ b/apps/web/src/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue
@@ -18,9 +18,9 @@ import type { MenuId } from '@/lib/menu/config';
 import BetaMark from '@/common/components/marks/BetaMark.vue';
 import NewMark from '@/common/components/marks/NewMark.vue';
 import UpdateMark from '@/common/components/marks/UpdateMark.vue';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import type { LSBIcon, LSBItem } from '@/common/modules/navigations/lsb/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 interface Props {
     item: LSBItem;
diff --git a/apps/web/src/common/modules/navigations/lsb/type.ts b/apps/web/src/common/modules/navigations/lsb/type.ts
index 78065489e8..65fd6bb64f 100644
--- a/apps/web/src/common/modules/navigations/lsb/type.ts
+++ b/apps/web/src/common/modules/navigations/lsb/type.ts
@@ -6,7 +6,7 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 
 import type { MenuId } from '@/lib/menu/config';
 
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 
 export const MENU_ITEM_TYPE = {
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue
index acb1bd8408..d316364667 100644
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue
@@ -4,9 +4,9 @@ import { PTreeNode } from '@cloudforet/mirinae';
 import BetaMark from '@/common/components/marks/BetaMark.vue';
 import NewMark from '@/common/components/marks/NewMark.vue';
 import UpdateMark from '@/common/components/marks/UpdateMark.vue';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 const props = withDefaults(defineProps<LSBItemProps>(), {
     icon: undefined,
diff --git a/apps/web/src/common/modules/navigations/new-lsb/type.ts b/apps/web/src/common/modules/navigations/new-lsb/type.ts
index e05ca944e4..ad09a4faab 100644
--- a/apps/web/src/common/modules/navigations/new-lsb/type.ts
+++ b/apps/web/src/common/modules/navigations/new-lsb/type.ts
@@ -3,7 +3,7 @@ import type { Location, Route } from 'vue-router';
 
 import type { TreeNodeDisplayType, TreeNodeIcon, TreeNodeLink } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
 
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 export type HighlightTagType = 'new' | 'beta' | 'update';
 export type LSBRouterPredicate = (to: Location, currentRoute: Route) => boolean;
diff --git a/apps/web/src/common/modules/navigations/stores/gnb-store.ts b/apps/web/src/common/modules/navigations/stores/gnb-store.ts
index 1f634ec6aa..907d91401d 100644
--- a/apps/web/src/common/modules/navigations/stores/gnb-store.ts
+++ b/apps/web/src/common/modules/navigations/stores/gnb-store.ts
@@ -18,8 +18,8 @@ import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-sou
 import { useUserStore } from '@/store/user/user-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 import type { Breadcrumb } from '@/common/modules/page-layouts/type';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 interface GnbStoreState {
     breadcrumbs: Breadcrumb[];
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue b/apps/web/src/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue
index 217117ecc1..c7bf1203de 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue
@@ -9,14 +9,14 @@ import {
 
 import { i18n } from '@/translations';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import type { FavoriteType } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import type { SuggestionItem } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config';
 import type { FocusingDirection } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type';
 import type {
     FavoriteMenuItem,
 } from '@/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import type { FavoriteType } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { gray, indigo, peacock } from '@/styles/colors';
 
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue
index 848fc2959c..ab6079b868 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-    computed, onMounted, reactive, ref, watch,
+    computed, reactive, ref, watch,
 } from 'vue';
 import type { Location } from 'vue-router';
 import { useRouter } from 'vue-router/composables';
@@ -19,17 +19,18 @@ import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 
 import type { ReferenceData } from '@/lib/helper/config-data-helper';
-import { convertWorkspaceConfigToReferenceData } from '@/lib/helper/config-data-helper';
 import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
 
+
 import { useCurrentMenuId } from '@/common/composables/current-menu-id';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
+import { useWorkspaceFavoriteList } from '@/common/modules/user-config/favorite/core/use-workspace-favorite-list';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import type { FavoriteItem } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { useRecentCreate } from '@/common/modules/user-config/recent/use-recent-create';
+import { useConvertReferencedConfigData } from '@/common/modules/user-config/shared/use-convert-referenced-config-data';
 
 import { gray, violet } from '@/styles/colors';
 
@@ -48,39 +49,47 @@ const props = withDefaults(defineProps<Props>(), {
 const appContextStore = useAppContextStore();
 const userWorkspaceStore = useUserWorkspaceStore();
 const workspaceStoreGetters = userWorkspaceStore.getters;
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const recentStore = useRecentStore();
 
 const { currentMenuId } = useCurrentMenuId();
 
 const router = useRouter();
 
-const selectDropdownRef = ref<PSelectDropdown|null>(null);
+const selectDropdownRef = ref<InstanceType<typeof PSelectDropdown>|null>(null);
+
+
+/* Favorite */
+const { loading: isLoadingWorkspaceFavoriteItems, workspaceItems } = useWorkspaceFavoriteList();
+const { loading: isLoadingConvertedWorkspaceFavoriteItems, convertedWorkspace } = useConvertReferencedConfigData({
+    allConfigList: workspaceItems,
+    workspaceConfigList: workspaceItems,
+});
+const preLoading = computed(() => isLoadingWorkspaceFavoriteItems.value || isLoadingConvertedWorkspaceFavoriteItems.value);
+
+/* Recent */
+const { mutateAsync: createRecent } = useRecentCreate();
 
 const storeState = reactive({
     workspaceList: computed<WorkspaceModel[]>(() => workspaceStoreGetters.workspaceList),
     selectedWorkspace: computed<WorkspaceModel|undefined>(() => workspaceStoreGetters.currentWorkspace),
     currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-    favoriteItems: computed<ReferenceData[]>(() => {
-        const sortedList = sortBy(favoriteGetters.workspaceItems, 'label');
-        return convertWorkspaceConfigToReferenceData(
-            sortedList ?? [],
-            storeState.workspaceList,
-        );
-    }),
+    favoriteItems: computed<ReferenceData[]>(() => sortBy(convertedWorkspace.value ?? [], 'label')),
 });
 const state = reactive({
     visibleSelectDropdown: false,
     searchText: '',
 });
 
-const selectWorkspace = (name: string): void => {
+const selectWorkspace = async (name: string) => {
     const workspaceId = name;
     if (!workspaceId || workspaceId === storeState.currentWorkspaceId) return;
 
     appContextStore.setGlobalGrantLoading(true);
     userWorkspaceStore.setCurrentWorkspace(workspaceId);
+    await createRecent({
+        type: RECENT_TYPE.WORKSPACE,
+        workspaceId,
+        id: workspaceId,
+    });
     router.push({ name: MENU_INFO_MAP[currentMenuId.value].routeName, params: { workspaceId } }).catch(() => {});
 };
 const formatMenuItems = (menuItems: WorkspaceModel[] = []): MenuItem[] => {
@@ -138,18 +147,7 @@ watch(() => storeState.favoriteItems, async () => {
     if (!selectDropdownRef.value) return;
     await selectDropdownRef.value?.reloadMenu();
 });
-watch(() => storeState.selectedWorkspace, (selectedWorkspace) => {
-    if (!selectedWorkspace) return;
-    recentStore.createRecent({
-        type: RECENT_TYPE.WORKSPACE,
-        workspaceId: selectedWorkspace?.workspace_id || '',
-        id: selectedWorkspace?.workspace_id || '',
-    });
-}, { immediate: true });
 
-onMounted(() => {
-    favoriteStore.fetchWorkspaceFavorite();
-});
 </script>
 
 <template>
@@ -174,6 +172,7 @@ onMounted(() => {
                            :class="{'workspace-dropdown': true}"
                            style-type="transparent"
                            menu-width="20rem"
+                           :loading="preLoading"
                            :visible-menu.sync="state.visibleSelectDropdown"
                            :handler="menuHandler"
                            :search-text.sync="state.searchText"
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/TopBarSearch.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/TopBarSearch.vue
index 159ddb9a1b..978fe45531 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/TopBarSearch.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/TopBarSearch.vue
@@ -8,7 +8,7 @@ import { PI, screens, PTooltip } from '@cloudforet/mirinae';
 
 import { i18n } from '@/translations';
 
-import TopBarSearchDropdown from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/TopBarSearchDropdown.vue';
+import TopBarSearchContents from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/TopBarSearchContents.vue';
 import TopBarSearchInput from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/TopBarSearchInput.vue';
 import TopBarSearchMobileInput from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/TopBarSearchMobileInput.vue';
 import { useTopBarSearchStore } from '@/common/modules/navigations/top-bar/modules/top-bar-search/store';
@@ -123,7 +123,7 @@ onUnmounted(() => {
             </span>
         </p-tooltip>
 
-        <top-bar-search-dropdown v-show="state.visible"
+        <top-bar-search-contents v-show="state.visible"
                                  :focusing-direction.sync="state.focusingDirection"
                                  :is-focused="state.isFocusOnSuggestion"
                                  @move-focus-end="handleMoveFocusEnd"
@@ -136,7 +136,7 @@ onUnmounted(() => {
                                              @arrow-down="moveFocusToSuggestion('DOWNWARD')"
                 />
             </template>
-        </top-bar-search-dropdown>
+        </top-bar-search-contents>
         <div v-if="state.visible & state.isOverMobileSize"
              class="background-block"
              @click="handleHideSearchMenu"
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/TopBarSearchDropdown.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/TopBarSearchContents.vue
similarity index 96%
rename from apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/TopBarSearchDropdown.vue
rename to apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/TopBarSearchContents.vue
index 210eff1fbc..91d2505cf2 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/TopBarSearchDropdown.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/TopBarSearchContents.vue
@@ -17,20 +17,20 @@ import { useAuthorizationStore } from '@/store/authorization/authorization-store
 
 import { MENU_ID } from '@/lib/menu/config';
 
-import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { SEARCH_TAB } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config';
 import {
     topBarSearchReferenceRouter,
 } from '@/common/modules/navigations/top-bar/modules/top-bar-search/helper';
 import SearchTabContent
-    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/SearchTabContent.vue';
+    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/SearchTabContent.vue';
 import TopBarSearchListItem
-    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchListItem.vue';
+    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchListItem.vue';
 import TopBarSearchServiceTab
-    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchServiceTab.vue';
+    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchServiceTab.vue';
 import { useTopBarSearchStore } from '@/common/modules/navigations/top-bar/modules/top-bar-search/store';
 import type { SearchTab } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
+import { useRecentCreate } from '@/common/modules/user-config/recent/use-recent-create';
 
 interface Props {
     isFocused: boolean;
@@ -49,7 +49,6 @@ const SEARCH_LIMIT = 15;
 const BOTTOM_MARGIN = 5.5 * 16;
 
 const topBarSearchStore = useTopBarSearchStore();
-const recentStore = useRecentStore();
 const windowSize = useWindowSize();
 const authorizationStore = useAuthorizationStore();
 
@@ -59,6 +58,9 @@ const dropdownRef = ref<null | HTMLElement>(null);
 const dropdownSize = useElementSize(dropdownRef);
 const tabRef = ref<null | Vue>(null);
 
+/* Recent */
+const { mutateAsync: createRecent } = useRecentCreate();
+
 
 const getTabHeaderHeight = () => {
     const tabHeaderHeight = tabRef.value?.$el.firstElementChild?.clientHeight;
@@ -117,10 +119,10 @@ const handleUpdateContentsSize = debounce((height: number) => {
     if (state.contentsHeight !== height) state.contentsHeight = height;
 }, 100);
 
-const handleSelect = (item) => {
+const handleSelect = async (item) => {
     if (topBarSearchStore.state.activeTab === SEARCH_TAB.CLOUD_SERVICE) {
         router.push(topBarSearchReferenceRouter(topBarSearchStore.state.activeTab, item.resource_id, item.workspace_id, item?.tags));
-        recentStore.createRecent({
+        await createRecent({
             workspaceId: item?.workspace_id,
             type: RECENT_TYPE.CLOUD_SERVICE,
             id: item?.resource_id,
@@ -145,7 +147,7 @@ const handleSelect = (item) => {
 
 <template>
     <div ref="dropdownRef"
-         class="top-bar-search-dropdown"
+         class="top-bar-search-contents"
     >
         <div ref="searchInputRef">
             <slot name="search-input" />
@@ -269,7 +271,7 @@ const handleSelect = (item) => {
 </template>
 
 <style lang="postcss" scoped>
-.top-bar-search-dropdown {
+.top-bar-search-contents {
     @apply fixed rounded-xs;
     display: flex;
     flex-direction: column;
@@ -295,7 +297,7 @@ const handleSelect = (item) => {
 }
 
 @screen tablet {
-    .top-bar-search-dropdown {
+    .top-bar-search-contents {
         max-height: unset;
         max-width: unset;
         width: 100vw;
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/SearchTabContent.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/SearchTabContent.vue
similarity index 89%
rename from apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/SearchTabContent.vue
rename to apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/SearchTabContent.vue
index a5b75e3475..33c8464491 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/SearchTabContent.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/SearchTabContent.vue
@@ -14,15 +14,14 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 import type { SuggestionType, SuggestionItem } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config';
 import { SUGGESTION_TYPE } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config';
 import TopBarSearchEmpty
-    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchEmpty.vue';
+    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchEmpty.vue';
 import TopBarSearchRecentListItem
-    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchRecentListItem.vue';
+    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue';
 import TopBarSearchWorkspaceFilter
-    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchWorkspaceFilter.vue';
+    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchWorkspaceFilter.vue';
 import { useTopBarSearchStore } from '@/common/modules/navigations/top-bar/modules/top-bar-search/store';
 import type { FocusingDirection } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type';
-
-
+import { useGetSearchTabRecentList } from '@/common/modules/navigations/top-bar/modules/top-bar-search/use-get-search-tab-recent-list';
 
 
 interface Props {
@@ -31,33 +30,44 @@ interface Props {
     focusingDirection: string;
 }
 
+interface Emits {
+    (event: 'select', item: SuggestionItem): void;
+    (event: 'close'): void;
+    (event: 'move-focus-end'): void;
+    (event: 'update:isFocused', value: boolean): void;
+    (event: 'update:contents-size', value: number): void;
+}
+
 const props = withDefaults(defineProps<Props>(), {
     searchLimit: 15,
     isFocused: false,
     focusingDirection: 'DOWNWARD',
 });
+const emit = defineEmits<Emits>();
+
 
 const userWorkspaceStore = useUserWorkspaceStore();
 const workspaceStoreGetter = userWorkspaceStore.getters;
 const topBarSearchStore = useTopBarSearchStore();
 
-const emit = defineEmits<{(event: 'select', item: SuggestionItem): void;
-    (event: 'close'): void;
-    (event: 'move-focus-end'): void;
-    (event: 'update:isFocused', value: boolean): void;
-    (event: 'update:contents-size', value: number): void;
-}>();
 
 const contentsRef = ref<null | HTMLElement>(null);
 const contentsSize = useElementSize(contentsRef);
 
+/* Recent */
+const { getRecentListBySearchTab } = useGetSearchTabRecentList();
+
 const state = reactive({
     inputText: computed(() => topBarSearchStore.getters.inputText),
     trimmedInputText: computed(() => topBarSearchStore.getters.trimmedInputText),
     searchMenuList: computed(() => topBarSearchStore.state.searchMenuList),
-    recentMenuList: computed(() => [
-        { name: 'title', label: i18n.t('COMMON.NAVIGATIONS.TOP_BAR.RECENTLY_VIEWED'), type: 'header' },
-        ...topBarSearchStore.state.recentMenuList]),
+    recentMenuList: computed(() => {
+        const activeTab = topBarSearchStore.state.activeTab;
+        return [
+            { name: 'title', label: i18n.t('COMMON.NAVIGATIONS.TOP_BAR.RECENTLY_VIEWED'), type: 'header' },
+            ...getRecentListBySearchTab(activeTab),
+        ];
+    }),
     serviceMenuCount: computed(() => state.searchMenuList?.length ?? 0),
     currentWorkspaceId: computed(() => workspaceStoreGetter.currentWorkspaceId),
     stagedWorkspaces: computed(() => topBarSearchStore.state.stagedWorkspaces),
@@ -83,18 +93,6 @@ watch(() => contentsSize.height.value, (height) => {
     emit('update:contents-size', height);
 });
 
-// /* Watcher */
-// HACK: for focusing
-// watch(() => props.isFocused, (isFocused) => {
-//     if (isFocused) {
-//         if (props.focusingDirection === 'DOWNWARD') {
-//             if (state.inputText.length === 0) {
-//                 state.focusingType = SUGGESTION_TYPE.MENU;
-//         } else {
-//             state.focusingType = props.items[props.items.length - 1].itemType;
-//         }
-//     }
-// });
 </script>
 <template>
     <div class="search-tab-content">
@@ -105,7 +103,7 @@ watch(() => contentsSize.height.value, (height) => {
                 <p-data-loader key="recent-menu-list"
                                class="data-loader-wrapper"
                                :loading="topBarSearchStore.state.loading"
-                               :data="topBarSearchStore.state.recentMenuList"
+                               :data="state.recentMenuList"
                 >
                     <p-context-menu class="search-list-context"
                                     :menu="state.recentMenuList"
@@ -132,7 +130,7 @@ watch(() => contentsSize.height.value, (height) => {
             <div ref="contentsRef">
                 <p-data-loader :loading="topBarSearchStore.state.loading"
                                class="data-loader-wrapper"
-                               :data="state.searchMenuList"
+                               :data="getRecentListBySearchTab(topBarSearchStore.state.activeTab)"
                 >
                     <p-context-menu class="search-list-context"
                                     :menu="state.searchMenuList"
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchEmpty.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchEmpty.vue
similarity index 100%
rename from apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchEmpty.vue
rename to apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchEmpty.vue
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchListItem.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchListItem.vue
similarity index 100%
rename from apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchListItem.vue
rename to apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchListItem.vue
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchRecentListItem.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue
similarity index 97%
rename from apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchRecentListItem.vue
rename to apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue
index 6884e9edf0..c469921b87 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchRecentListItem.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue
@@ -11,12 +11,12 @@ import { useReferenceRouter } from '@/router/composables/use-reference-router';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 
-import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { SEARCH_TAB } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config';
 import { topBarSearchReferenceRouter } from '@/common/modules/navigations/top-bar/modules/top-bar-search/helper';
 import { useTopBarSearchStore } from '@/common/modules/navigations/top-bar/modules/top-bar-search/store';
 import type { SearchTab } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type';
 import type { RecentItem } from '@/common/modules/navigations/type';
+import { useRecentDelete } from '@/common/modules/user-config/recent/use-recent-delete';
 
 interface Props {
     recentItem?: RecentItem;
@@ -27,11 +27,13 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const topBarSearchStore = useTopBarSearchStore();
 const allReferenceStore = useAllReferenceStore();
-const recentStore = useRecentStore();
 const router = useRouter();
 
 const { getReferenceLocation } = useReferenceRouter();
 
+/* Recent */
+const { mutateAsync: deleteRecent } = useRecentDelete();
+
 const storeState = reactive({
     workspaceMap: computed(() => topBarSearchStore.storeState.workspaceMap),
     currentWorkspaceId: computed(() => topBarSearchStore.storeState.currentWorkspaceId),
@@ -148,8 +150,8 @@ const handleClick = () => {
     topBarSearchStore.setIsActivated(false);
 };
 
-const handleDeleteRecent = () => {
-    recentStore.deleteRecent({ name: state.recentId });
+const handleDeleteRecent = async () => {
+    await deleteRecent({ name: state.recentId });
 };
 </script>
 
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchServiceTab.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchServiceTab.vue
similarity index 90%
rename from apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchServiceTab.vue
rename to apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchServiceTab.vue
index 8ae2bc60ae..bdebb74345 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchServiceTab.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchServiceTab.vue
@@ -23,16 +23,17 @@ import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
 import { useAllMenuList } from '@/lib/menu/use-all-menu-list';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
-import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import type { SuggestionItem, SuggestionType } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config';
 import { SUGGESTION_TYPE } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config';
 import TopBarSearchEmpty
-    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchEmpty.vue';
+    from '@/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchEmpty.vue';
 import { useTopBarSearchStore } from '@/common/modules/navigations/top-bar/modules/top-bar-search/store';
 import type { FocusingDirection } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type';
+import { useGetSearchTabRecentList } from '@/common/modules/navigations/top-bar/modules/top-bar-search/use-get-search-tab-recent-list';
 import TopBarSuggestionList from '@/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue';
 import type { RecentItem } from '@/common/modules/navigations/type';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
+import { useRecentCreate } from '@/common/modules/user-config/recent/use-recent-create';
 
 interface Props {
     searchLimit: number;
@@ -40,6 +41,11 @@ interface Props {
     focusingDirection: string;
 }
 
+interface Emits {
+    (event: 'move-focus-end'): void;
+    (event: 'update:contents-size', value: number): void;
+}
+
 const props = withDefaults(defineProps<Props>(), {
     searchLimit: 15,
     isFocused: false,
@@ -48,15 +54,16 @@ const props = withDefaults(defineProps<Props>(), {
 
 const userWorkspaceStore = useUserWorkspaceStore();
 const topBarSearchStore = useTopBarSearchStore();
-const recentStore = useRecentStore();
 const authorizationStore = useAuthorizationStore();
 const { getAllMenuList } = useAllMenuList();
 
 const route = useRoute();
 const router = useRouter();
-const emit = defineEmits<{(event: 'move-focus-end'): void;
-    (event: 'update:contents-size', value: number): void;
-}>();
+const emit = defineEmits<Emits>();
+
+/* Recent */
+const { getRecentListBySearchTab } = useGetSearchTabRecentList();
+const { mutateAsync: createRecent } = useRecentCreate();
 
 const contentRef = ref<null | HTMLElement>(null);
 const contentSize = useElementSize(contentRef);
@@ -96,13 +103,9 @@ const state = reactive({
         return results;
     }),
     recentMenuList: computed(() => {
-        const _recentMenuList: RecentItem[] = [];
-        recentStore.state.recentMenuList.forEach((i) => {
-            if (authorizationStore.getters.pageAccessPermissionMap[i.data.id]) {
-                _recentMenuList.push(i);
-            }
-        });
-        return _recentMenuList.map((r: RecentItem) => {
+        const allRecentList = getRecentListBySearchTab(topBarSearchStore.state.activeTab);
+        const recentMenuListFilteredByAccess = allRecentList.filter((i) => authorizationStore.getters.pageAccessPermissionMap[i.data.id]);
+        return recentMenuListFilteredByAccess.map((r: RecentItem) => {
             // NOTE: Code corresponding to data stored as 'home-dashboard'
             const id = r.data.id === 'home-dashboard' ? MENU_ID.WORKSPACE_HOME : r.data.id;
             return {
@@ -158,13 +161,16 @@ const handleFocusEnd = (type: SuggestionType, direction: FocusingDirection) => {
     }
 };
 
-const handleSelect = (item) => {
+const handleSelect = async (item) => {
     const menuId = item.id;
     const menuInfo: MenuInfo = MENU_INFO_MAP[menuId];
     if (menuInfo && router.currentRoute.name !== menuId) {
         router.push({ name: menuInfo.routeName }).catch(() => {});
-        recentStore.createRecent({
-            type: RECENT_TYPE.SERVICE, workspaceId: storeState.currentWorkspaceId ?? '', id: menuId, label: item.label,
+        await createRecent({
+            type: RECENT_TYPE.SERVICE,
+            workspaceId: storeState.currentWorkspaceId ?? '',
+            id: menuId,
+            options: { label: item.label },
         });
     }
     topBarSearchStore.setIsActivated(false, {
@@ -190,10 +196,6 @@ watch(() => storeState.trimmedInputText, debounce(async (trimmedText) => {
     leading: true,
 }));
 
-watch(() => topBarSearchStore.getters.isActivated, async (isActivated) => {
-    if (storeState.currentWorkspaceId && !isActivated) await recentStore.fetchRecent({ type: RECENT_TYPE.SERVICE, workspaceIds: [storeState.currentWorkspaceId] });
-}, { immediate: true });
-
 // /* Watcher */
 watch(() => props.isFocused, (isFocused) => {
     if (isFocused) {
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchWorkspaceFilter.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchWorkspaceFilter.vue
similarity index 100%
rename from apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/modules/TopBarSearchWorkspaceFilter.vue
rename to apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchWorkspaceFilter.vue
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts
index b3054966f6..34b3ea6203 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts
@@ -10,7 +10,6 @@ import type { ResourceSearchParameters, ResourceSearchResponse } from '@/api-cli
 import type { ResourceModel } from '@/api-clients/search/resource/schema/model';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
@@ -37,8 +36,6 @@ export const useTopBarSearchStore = defineStore('top-bar-search', () => {
     const userWorkspaceStore = useUserWorkspaceStore();
     const workspaceStoreState = userWorkspaceStore.$state;
     const recentStore = useRecentStore();
-    const allReferenceStore = useAllReferenceStore();
-    const allReferenceGetters = allReferenceStore.getters;
 
     const orderWorkspaceList = (workspaceList: any[]) => {
         if (!storeState.currentWorkspaceId) return workspaceList;
@@ -52,7 +49,6 @@ export const useTopBarSearchStore = defineStore('top-bar-search', () => {
     const storeState = reactive({
         currentWorkspaceId: computed(() => workspaceStoreState.getters.currentWorkspaceId),
         workspaceList: computed<WorkspaceModel[]>(() => [...workspaceStoreState.getters.workspaceList]),
-        workspaceMap: computed(() => allReferenceGetters.workspace),
     });
     const state = reactive<TopBarSearchStoreState>({
         loading: false,
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/use-get-search-tab-recent-list.ts b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/use-get-search-tab-recent-list.ts
new file mode 100644
index 0000000000..861b99c377
--- /dev/null
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/use-get-search-tab-recent-list.ts
@@ -0,0 +1,25 @@
+import type { SearchTab } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type';
+import { useRecentList } from '@/common/modules/user-config/recent/use-recent-list';
+
+export const useGetSearchTabRecentList = () => {
+    const recentData = useRecentList();
+
+    const getRecentListBySearchTab = (activeTab: SearchTab) => {
+        if (activeTab === 'project') {
+            return recentData.projectRecentList.value ?? [];
+        } if (activeTab === 'service') {
+            return recentData.serviceRecentList.value ?? [];
+        } if (activeTab === 'serviceAccount') {
+            return recentData.serviceAccountRecentList.value ?? [];
+        } if (activeTab === 'dashboard') {
+            return recentData.dashboardRecentList.value ?? [];
+        } if (activeTab === 'cloudService') {
+            return recentData.cloudServiceRecentList.value ?? [];
+        }
+        return [];
+    };
+
+    return {
+        getRecentListBySearchTab,
+    };
+};
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue
index 90fd26a1c7..8d8bdf79ec 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue
@@ -3,7 +3,7 @@ import {
     computed, reactive,
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router/composables';
 
 import { isEmpty } from 'lodash';
 
@@ -12,7 +12,6 @@ import {
 } from '@cloudforet/mirinae';
 import type { ContextMenuType, MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 import type { MetricExampleModel } from '@/api-clients/inventory/metric-example/schema/model';
 import { i18n } from '@/translations';
 
@@ -20,34 +19,22 @@ import { useReferenceRouter } from '@/router/composables/use-reference-router';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 import { useAuthorizationStore } from '@/store/authorization/authorization-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import type { MetricReferenceMap } from '@/store/reference/metric-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-import type { ServiceReferenceMap } from '@/store/reference/service-reference-store';
 
-import type { ReferenceData } from '@/lib/helper/config-data-helper';
 import {
-    convertCostAnalysisConfigToReferenceData,
-    convertDashboardConfigToReferenceData,
-    convertMenuConfigToReferenceData, convertMetricConfigToReferenceData, convertMetricExampleConfigToReferenceData,
-    convertProjectConfigToReferenceData,
-    convertProjectGroupConfigToReferenceData, convertServiceConfigToReferenceData,
     getParsedKeysWithManagedCostQueryFavoriteKey,
 } from '@/lib/helper/config-data-helper';
 import type { MenuId, MenuInfo } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
 import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
-import { useAllMenuList } from '@/lib/menu/use-all-menu-list';
 
-import { useGlobalDashboardQuery } from '@/common/composables/global-dashboard/use-global-dashboard-query';
-import { useGrantScopeGuard } from '@/common/composables/grant-scope-guard';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteItem, FavoriteType } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import TopBarSuggestionList from '@/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue';
+import { useFavoriteDeleteMutation } from '@/common/modules/user-config/favorite/core/use-favorite-delete-mutation';
+import { useFavoriteList } from '@/common/modules/user-config/favorite/core/use-favorite-list';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { FavoriteItem, FavoriteType } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { ReferenceData } from '@/common/modules/user-config/shared/use-convert-referenced-config-data';
+import { useConvertReferencedConfigData } from '@/common/modules/user-config/shared/use-convert-referenced-config-data';
 
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
@@ -70,39 +57,37 @@ export interface FavoriteMenuItem extends MenuItem {
 const emit = defineEmits<{(e: 'close'): void;
 }>();
 
-const allReferenceStore = useAllReferenceStore();
 const userWorkspaceStore = useUserWorkspaceStore();
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
 const gnbStore = useGnbStore();
 const gnbStoreGetters = gnbStore.getters;
 const authorizationStore = useAuthorizationStore();
-const { getAllMenuList } = useAllMenuList();
 const { getReferenceLocation } = useReferenceRouter();
 
-/* Query */
-const {
-    publicDashboardListQuery,
-    privateDashboardListQuery,
-} = useGlobalDashboardQuery();
+
+/* Favorite */
+const { loading: isLoadingFavoriteList, ...favoriteConfigData } = useFavoriteList();
+const { loading: isLoadingConvertedConfigData, ...convertedConfigMap } = useConvertReferencedConfigData({
+    allConfigList: favoriteConfigData.favoriteMenuList,
+    projectConfigList: favoriteConfigData.projectItems,
+    projectGroupConfigList: favoriteConfigData.projectGroupItems,
+    metricConfigList: favoriteConfigData.metricItems,
+    metricExampleConfigList: favoriteConfigData.metricExampleItems,
+    serviceConfigList: favoriteConfigData.serviceItems,
+    dashboardConfigList: favoriteConfigData.dashboardItems,
+    costQuerySetConfigList: favoriteConfigData.costAnalysisItems,
+    cloudServiceConfigList: favoriteConfigData.cloudServiceTypeItems,
+});
+const { mutateAsync: deleteFavorite, isPending: isDeletingFavorite } = useFavoriteDeleteMutation();
 
 const router = useRouter();
-const route = useRoute();
 
-const dashboardList = computed(() => [...(publicDashboardListQuery?.data?.value ?? []), ...(privateDashboardListQuery?.data?.value ?? [])]);
 const storeState = reactive({
     currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-    metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
     metricExamples: computed<MetricExampleModel[]>(() => gnbStoreGetters.metricExamples),
-    projects: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    service: computed<ServiceReferenceMap>(() => allReferenceStore.getters.service),
-    costQuerySets: computed<CostQuerySetModel[]>(() => gnbStoreGetters.costQuerySets),
     pageAccessPermissionList: computed<MenuId[]>(() => authorizationStore.getters.pageAccessPermissionList),
 });
 const state = reactive({
-    loading: true,
+    loading: computed(() => isLoadingFavoriteList.value || isLoadingConvertedConfigData.value),
     showAll: false,
     showAllType: undefined as undefined|FavoriteType,
     accessProject: computed<boolean>(() => !isEmpty(authorizationStore.getters.pageAccessPermissionMap[MENU_ID.PROJECT])),
@@ -166,6 +151,10 @@ const state = reactive({
             items = state.favoriteProjects;
             label = i18n.t('COMMON.GNB.FAVORITES.ALL_PROJECTS');
         }
+        if (state.showAllType === FAVORITE_TYPE.METRIC) {
+            items = state.favoriteMetricItems;
+            label = i18n.t('COMMON.GNB.FAVORITES.ALL_METRIC');
+        }
         if (state.showAllType === FAVORITE_TYPE.COST_ANALYSIS) {
             items = state.favoriteCostAnalysisItems;
             label = i18n.t('COMMON.GNB.FAVORITES.ALL_COST_ANALYSIS');
@@ -182,51 +171,37 @@ const state = reactive({
         ];
     }),
     //
-    favoriteMenuItems: computed<ReferenceData[]>(() => {
-        const allMenuList = getAllMenuList(route, router);
-        return convertMenuConfigToReferenceData(
-            favoriteGetters.menuItems ?? [],
-            allMenuList,
-        );
-    }),
+    favoriteMenuItems: computed<ReferenceData[]>(() => convertedConfigMap.convertedMenu.value),
     favoriteCostAnalysisItems: computed<ReferenceData[]>(() => {
         const isUserAccessible = isUserAccessibleToMenu(MENU_ID.COST_ANALYSIS, storeState.pageAccessPermissionList);
-        return isUserAccessible
-            ? convertCostAnalysisConfigToReferenceData(
-                favoriteGetters.costAnalysisItems ?? [],
-                storeState.costQuerySets,
-                storeState.costDataSource,
-            )
-            : [];
+        if (!isUserAccessible) return [];
+        return convertedConfigMap.convertedCostQuerySet.value;
     }),
     favoriteDashboardItems: computed<ReferenceData[]>(() => {
         const isUserAccessibleToDashboards = isUserAccessibleToMenu(MENU_ID.DASHBOARDS, storeState.pageAccessPermissionList);
         if (!isUserAccessibleToDashboards) return [];
-        return convertDashboardConfigToReferenceData(
-            favoriteGetters.dashboardItems ?? [],
-            dashboardList.value,
-        );
+        return convertedConfigMap.convertedDashboard.value;
     }),
     favoriteMetricItems: computed<ReferenceData[]>(() => {
         const isUserAccessible = isUserAccessibleToMenu(MENU_ID.METRIC_EXPLORER, storeState.pageAccessPermissionList);
         if (!isUserAccessible) return [];
-        const favoriteMetricItems = convertMetricConfigToReferenceData(favoriteGetters.metricItems ?? [], storeState.metrics);
-        const favoriteMetricExampleItems = convertMetricExampleConfigToReferenceData(favoriteGetters.metricExampleItems ?? [], storeState.metricExamples);
         return [
-            ...favoriteMetricItems,
-            ...favoriteMetricExampleItems,
+            ...convertedConfigMap.convertedMetric.value,
+            ...convertedConfigMap.convertedMetricExample.value,
         ];
     }),
     favoriteProjects: computed<ReferenceData[]>(() => {
         const isUserAccessible = isUserAccessibleToMenu(MENU_ID.PROJECT, storeState.pageAccessPermissionList);
         if (!isUserAccessible) return [];
-        const favoriteProjectItems = convertProjectConfigToReferenceData(favoriteGetters.projectItems ?? [], storeState.projects);
-        const favoriteProjectGroupItems = convertProjectGroupConfigToReferenceData(favoriteGetters.projectGroupItems ?? [], storeState.projectGroups);
-        return [...favoriteProjectGroupItems, ...favoriteProjectItems];
+        return [
+            ...convertedConfigMap.convertedProjectGroup.value,
+            ...convertedConfigMap.convertedProject.value,
+        ];
     }),
     favoriteServiceItems: computed<ReferenceData[]>(() => {
         const isUserAccessible = isUserAccessibleToMenu(MENU_ID.SERVICE, storeState.pageAccessPermissionList);
-        return isUserAccessible ? convertServiceConfigToReferenceData(favoriteGetters.serviceItems ?? [], storeState.service) : [];
+        if (!isUserAccessible) return [];
+        return convertedConfigMap.convertedService.value;
     }),
 });
 
@@ -309,27 +284,14 @@ const handleSelect = (item: FavoriteMenuItem) => {
     emit('close');
 };
 const handleDeleteItem = (item: FavoriteItem) => {
-    favoriteStore.deleteFavorite({
+    if (isDeletingFavorite.value) return;
+    deleteFavorite({
         itemType: item.itemType,
         workspaceId: storeState.currentWorkspaceId || '',
         itemId: item.itemId,
     });
 };
 
-/* Init */
-const init = async () => {
-    state.loading = true;
-    await Promise.allSettled([
-        favoriteStore.fetchFavorite(),
-        gnbStore.fetchMetricExample(),
-        gnbStore.fetchCostQuerySet(),
-        // HACK: If GNBDashboardMenu is deprecated, you need to add a request to receive a dashboard list here.
-    ]);
-    state.loading = false;
-};
-const { callApiWithGrantGuard } = useGrantScopeGuard(['WORKSPACE'], init);
-callApiWithGrantGuard();
-
 </script>
 
 <template>
diff --git a/apps/web/src/common/modules/user-config/favorite/core/use-favorite-config-data-query.ts b/apps/web/src/common/modules/user-config/favorite/core/use-favorite-config-data-query.ts
new file mode 100644
index 0000000000..15c7382370
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/favorite/core/use-favorite-config-data-query.ts
@@ -0,0 +1,38 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import { useUserConfigApi } from '@/api-clients/config/user-config/composables/use-user-config-api';
+import type { UserConfigListParameters } from '@/api-clients/config/user-config/schema/api-verbs/list';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+import type { ConfigData } from '@/common/modules/user-config/shared/use-convert-referenced-config-data';
+
+
+interface UseFavoriteConfigDataQueryOptions {
+    configDataType: 'console:favorite' | 'console:favorite:WORKSPACE';
+    params: ComputedRef<UserConfigListParameters>;
+    enabled?: ComputedRef<boolean>;
+}
+
+
+
+export const useFavoriteConfigDataQuery = ({ configDataType = 'console:favorite', params, enabled }: UseFavoriteConfigDataQueryOptions) => {
+    const { userConfigAPI } = useUserConfigApi();
+
+    const { key, params: queryParams } = useServiceQueryKey('config', 'user-config', 'list', {
+        contextKey: configDataType,
+        params,
+    });
+
+    return useScopedQuery({
+        queryKey: key,
+        queryFn: () => userConfigAPI.list<ConfigData>(queryParams.value),
+        enabled: computed(() => {
+            if (enabled === undefined) {
+                return true;
+            }
+            return enabled.value;
+        }),
+    }, ['WORKSPACE', 'USER']);
+};
diff --git a/apps/web/src/common/modules/user-config/favorite/core/use-favorite-create-mutation.ts b/apps/web/src/common/modules/user-config/favorite/core/use-favorite-create-mutation.ts
new file mode 100644
index 0000000000..b4a361a709
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/favorite/core/use-favorite-create-mutation.ts
@@ -0,0 +1,38 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import { useUserConfigApi } from '@/api-clients/config/user-config/composables/use-user-config-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { ConfigData, ReferenceData } from '@/common/modules/user-config/shared/use-convert-referenced-config-data';
+
+export const useFavoriteCreateMutation = () => {
+    const queryClient = useQueryClient();
+    const { userConfigAPI } = useUserConfigApi();
+    const { withSuffix } = useServiceQueryKey('config', 'user-config', 'list');
+
+    return useMutation({
+        mutationFn: (params: ConfigData|ReferenceData) => {
+            const { itemType, workspaceId, itemId } = params;
+
+            return userConfigAPI.set({
+                name: itemType === FAVORITE_TYPE.WORKSPACE
+                    ? `console:favorite:${itemType}:${itemId}`
+                    : `console:favorite:${itemType}:${workspaceId}:${itemId}`,
+                data: {
+                    ...params,
+                    type: 'item',
+                },
+            });
+        },
+        onSuccess: (_, variables) => {
+            const configDataType = variables.itemType === FAVORITE_TYPE.WORKSPACE ? 'console:favorite:WORKSPACE' : 'console:favorite';
+            queryClient.invalidateQueries({ queryKey: withSuffix(configDataType) });
+        },
+        onError: (error) => {
+            ErrorHandler.handleError(error);
+        },
+    });
+};
diff --git a/apps/web/src/common/modules/user-config/favorite/core/use-favorite-delete-mutation.ts b/apps/web/src/common/modules/user-config/favorite/core/use-favorite-delete-mutation.ts
new file mode 100644
index 0000000000..c392918617
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/favorite/core/use-favorite-delete-mutation.ts
@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import { useUserConfigApi } from '@/api-clients/config/user-config/composables/use-user-config-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { ConfigData, ReferenceData } from '@/common/modules/user-config/shared/use-convert-referenced-config-data';
+
+export const useFavoriteDeleteMutation = () => {
+    const queryClient = useQueryClient();
+    const { userConfigAPI } = useUserConfigApi();
+    const { withSuffix } = useServiceQueryKey('config', 'user-config', 'list');
+
+    return useMutation({
+        mutationFn: (params: ConfigData|ReferenceData) => {
+            const { itemType, workspaceId, itemId } = params;
+
+            return userConfigAPI.delete({
+                name: itemType === FAVORITE_TYPE.WORKSPACE
+                    ? `console:favorite:${itemType}:${itemId}`
+                    : `console:favorite:${itemType}:${workspaceId}:${itemId}`,
+            });
+        },
+        onSuccess: (_, variables) => {
+            const configDataType = variables.itemType === FAVORITE_TYPE.WORKSPACE ? 'console:favorite:WORKSPACE' : 'console:favorite';
+            queryClient.invalidateQueries({ queryKey: withSuffix(configDataType) });
+        },
+        onError: (error) => {
+            ErrorHandler.handleError(error);
+        },
+    });
+};
diff --git a/apps/web/src/common/modules/user-config/favorite/core/use-favorite-list.ts b/apps/web/src/common/modules/user-config/favorite/core/use-favorite-list.ts
new file mode 100644
index 0000000000..0bf7d7a1c2
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/favorite/core/use-favorite-list.ts
@@ -0,0 +1,53 @@
+import { computed } from 'vue';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+import { useUserStore } from '@/store/user/user-store';
+
+
+import { useFavoriteConfigDataQuery } from '@/common/modules/user-config/favorite/core/use-favorite-config-data-query';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { ConfigData } from '@/common/modules/user-config/shared/use-convert-referenced-config-data';
+
+
+const favoriteListApiQuery = new ApiQueryHelper().setSort('updated_at', true);
+
+export const useFavoriteList = () => {
+    const userStore = useUserStore();
+    const userWorkspaceStore = useUserWorkspaceStore();
+
+    const userId = computed<string|undefined>(() => userStore.state.userId);
+    const currentWorkspaceId = computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId);
+
+    const { data: favoriteList, isFetching: isFetchingFavoriteList } = useFavoriteConfigDataQuery({
+        configDataType: 'console:favorite',
+        params: computed(() => {
+            favoriteListApiQuery.setFilters([
+                { k: 'user_id', v: userId.value || '', o: '=' },
+                { k: 'name', v: 'console:favorite:', o: '' },
+                { k: 'data.workspaceId', v: currentWorkspaceId.value || '', o: '=' },
+            ]);
+            return {
+                query: favoriteListApiQuery.data,
+            };
+        }),
+        enabled: computed(() => !!userId.value && !!currentWorkspaceId.value),
+    });
+
+    const favoriteMenuList = computed<ConfigData[]>(() => (favoriteList.value?.results ?? []).map((item) => item.data));
+    return {
+        loading: isFetchingFavoriteList,
+        favoriteMenuList,
+        menuItems: computed(() => favoriteMenuList.value?.filter((item) => item.itemType === FAVORITE_TYPE.MENU)),
+        projectItems: computed(() => favoriteMenuList.value?.filter((item) => item.itemType === FAVORITE_TYPE.PROJECT)),
+        projectGroupItems: computed(() => favoriteMenuList.value?.filter((item) => item.itemType === FAVORITE_TYPE.PROJECT_GROUP)),
+        metricItems: computed(() => favoriteMenuList.value?.filter((item) => item.itemType === FAVORITE_TYPE.METRIC)),
+        metricExampleItems: computed(() => favoriteMenuList.value?.filter((item) => item.itemType === FAVORITE_TYPE.METRIC_EXAMPLE)),
+        dashboardItems: computed(() => favoriteMenuList.value?.filter((item) => item.itemType === FAVORITE_TYPE.DASHBOARD)),
+        costAnalysisItems: computed(() => favoriteMenuList.value?.filter((item) => item.itemType === FAVORITE_TYPE.COST_ANALYSIS)),
+        securityItems: computed(() => favoriteMenuList.value?.filter((item) => item.itemType === FAVORITE_TYPE.SECURITY)),
+        serviceItems: computed(() => favoriteMenuList.value?.filter((item) => item.itemType === FAVORITE_TYPE.SERVICE)),
+        cloudServiceTypeItems: computed(() => favoriteMenuList.value?.filter((item) => item.itemType === FAVORITE_TYPE.CLOUD_SERVICE_TYPE)),
+    };
+};
diff --git a/apps/web/src/common/modules/user-config/favorite/core/use-workspace-favorite-list.ts b/apps/web/src/common/modules/user-config/favorite/core/use-workspace-favorite-list.ts
new file mode 100644
index 0000000000..7925bb9447
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/favorite/core/use-workspace-favorite-list.ts
@@ -0,0 +1,37 @@
+import { computed } from 'vue';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { useFavoriteConfigDataQuery } from '@/common/modules/user-config/favorite/core/use-favorite-config-data-query';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+
+
+const workspaceFavoriteListApiQuery = new ApiQueryHelper().setSort('updated_at', true);
+
+export const useWorkspaceFavoriteList = () => {
+    const userStore = useUserStore();
+
+    const userId = computed<string|undefined>(() => userStore.state.userId);
+
+    const { data: workspaceFavoriteList, isFetching: isFetchingWorkspaceFavoriteList } = useFavoriteConfigDataQuery({
+        configDataType: 'console:favorite:WORKSPACE',
+        params: computed(() => {
+            workspaceFavoriteListApiQuery.setFilters([
+                { k: 'user_id', v: userId.value || '', o: '=' },
+                { k: 'name', v: `console:favorite:${FAVORITE_TYPE.WORKSPACE}`, o: '' },
+            ]);
+            return {
+                query: workspaceFavoriteListApiQuery.data,
+            };
+        }),
+        enabled: computed(() => !!userId.value),
+    });
+
+    const workspaceFavoriteMenuList = computed(() => (workspaceFavoriteList.value?.results ?? []).map((item) => item.data));
+    return {
+        loading: isFetchingWorkspaceFavoriteList,
+        workspaceItems: workspaceFavoriteMenuList,
+    };
+};
diff --git a/apps/web/src/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue b/apps/web/src/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue
new file mode 100644
index 0000000000..47aa219c2e
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import {
+    computed, reactive,
+} from 'vue';
+
+import { PI } from '@cloudforet/mirinae';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+
+import type { ReferenceData } from '@/lib/helper/config-data-helper';
+
+
+import { useFavoriteCreateMutation } from '@/common/modules/user-config/favorite/core/use-favorite-create-mutation';
+import { useFavoriteDeleteMutation } from '@/common/modules/user-config/favorite/core/use-favorite-delete-mutation';
+import { useFavoriteList } from '@/common/modules/user-config/favorite/core/use-favorite-list';
+import { useWorkspaceFavoriteList } from '@/common/modules/user-config/favorite/core/use-workspace-favorite-list';
+import type { FavoriteType, FavoriteConfig } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { useConvertReferencedConfigData } from '@/common/modules/user-config/shared/use-convert-referenced-config-data';
+
+
+
+interface Props {
+    itemId: string;
+    favoriteType: FavoriteType;
+    scale?: string;
+    readOnly?: boolean;
+    visibleActiveCaseOnly?: boolean;
+}
+interface Emits {
+    (e: 'click-favorite'): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    scale: '1',
+    readOnly: false,
+    visibleActiveCaseOnly: false,
+});
+const emit = defineEmits<Emits>();
+
+const userWorkspaceStore = useUserWorkspaceStore();
+const workspaceStoreGetters = userWorkspaceStore.getters;
+const appContextStore = useAppContextStore();
+
+/* Favorite */
+const favoriteData = useFavoriteList();
+const { loading: isLoadingWorkspaceFavoriteData, ...workspaceFavoriteData } = useWorkspaceFavoriteList();
+const { loading: isLoadingConvertedFavoriteData, ...convertedFavoriteData } = useConvertReferencedConfigData({
+    allConfigList: favoriteData.favoriteMenuList,
+    projectConfigList: favoriteData.projectItems,
+    projectGroupConfigList: favoriteData.projectGroupItems,
+    metricConfigList: favoriteData.metricItems,
+    metricExampleConfigList: favoriteData.metricExampleItems,
+    serviceConfigList: favoriteData.serviceItems,
+    dashboardConfigList: favoriteData.dashboardItems,
+    costQuerySetConfigList: favoriteData.costAnalysisItems,
+    cloudServiceConfigList: favoriteData.cloudServiceTypeItems,
+    workspaceConfigList: workspaceFavoriteData.workspaceItems,
+});
+
+const { mutateAsync: createFavorite, isPending: isCreatingFavorite } = useFavoriteCreateMutation();
+const { mutateAsync: deleteFavorite, isPending: isDeletingFavorite } = useFavoriteDeleteMutation();
+
+
+
+
+const storeState = reactive({
+    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
+    currentWorkspaceId: computed(() => workspaceStoreGetters.currentWorkspaceId as string),
+});
+const state = reactive({
+    active: computed(() => {
+        const targetList = props.favoriteType === FAVORITE_TYPE.WORKSPACE ? workspaceFavoriteData.workspaceItems.value : favoriteData.favoriteMenuList.value;
+        const favoriteItem = targetList.findIndex((d) => (d.itemId === props?.itemId
+            && (d.itemType === props.favoriteType)));
+        return favoriteItem > -1;
+    }),
+});
+
+const preLoading = computed(() => isLoadingWorkspaceFavoriteData.value || isLoadingConvertedFavoriteData.value);
+const triggerLoading = computed(() => isCreatingFavorite.value || isDeletingFavorite.value);
+
+const handleClickFavoriteButton = async (event: MouseEvent) => {
+    if (storeState.isAdminMode) return;
+    event.stopPropagation();
+
+    if (preLoading.value || triggerLoading.value) return;
+    if (props.readOnly) return;
+    if (state.active) {
+        await deleteFavorite({
+            itemType: props.favoriteType,
+            workspaceId: storeState.currentWorkspaceId,
+            itemId: props?.itemId,
+        });
+    } else {
+        const params: FavoriteConfig = {
+            itemType: props.favoriteType,
+            workspaceId: storeState.currentWorkspaceId,
+            itemId: props?.itemId,
+        };
+        const referenceData = convertFavoriteToReferenceData(params);
+        await createFavorite(referenceData || params);
+    }
+    emit('click-favorite');
+};
+const convertFavoriteToReferenceData = (favoriteConfig: FavoriteConfig): ReferenceData|undefined => {
+    const { itemType } = favoriteConfig;
+    if (itemType === FAVORITE_TYPE.DASHBOARD) {
+        return convertedFavoriteData.convertedDashboard.value.find((d) => d.itemId === props?.itemId);
+    }
+    if (itemType === FAVORITE_TYPE.PROJECT) {
+        return convertedFavoriteData.convertedProject.value.find((d) => d.itemId === props?.itemId);
+    }
+    if (itemType === FAVORITE_TYPE.PROJECT_GROUP) {
+        return convertedFavoriteData.convertedProjectGroup.value.find((d) => d.itemId === props?.itemId);
+    }
+    if (itemType === FAVORITE_TYPE.CLOUD_SERVICE || itemType === FAVORITE_TYPE.SECURITY) {
+        return convertedFavoriteData.convertedCloudServiceType.value.find((d) => d.itemId === props?.itemId);
+    }
+    if (itemType === FAVORITE_TYPE.METRIC) {
+        return convertedFavoriteData.convertedMetric.value.find((d) => d.itemId === props?.itemId);
+    }
+    if (itemType === FAVORITE_TYPE.METRIC_EXAMPLE) {
+        return convertedFavoriteData.convertedMetricExample.value.find((d) => d.itemId === props?.itemId);
+    }
+    if (itemType === FAVORITE_TYPE.COST_ANALYSIS) {
+        return convertedFavoriteData.convertedCostQuerySet.value.find((d) => d.itemId === props?.itemId);
+    }
+    if (itemType === FAVORITE_TYPE.WORKSPACE) {
+        return convertedFavoriteData.convertedWorkspace.value.find((d) => d.itemId === props?.itemId);
+    }
+    if (itemType === FAVORITE_TYPE.SERVICE) {
+        return convertedFavoriteData.convertedService.value.find((d) => d.itemId === props?.itemId);
+    }
+    return convertedFavoriteData.convertedMenu.value.find((d) => d.itemId === props?.itemId);
+};
+</script>
+
+<template>
+    <p-i
+        v-if="!storeState.isAdminMode"
+        v-show="(props.visibleActiveCaseOnly || props.readOnly) ? state.active : true"
+        :name="state.active ? 'ic_favorite-filled': 'ic_favorite'"
+        width="1rem"
+        height="1rem"
+        :scale="props.scale"
+        color="inherit"
+        class="favorite-btn"
+        :class="{active: state.active, 'read-only': props.readOnly}"
+        @click.prevent="handleClickFavoriteButton"
+    />
+</template>
+
+<style lang="postcss" scoped>
+.favorite-btn {
+    @apply text-gray-300;
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    &:not(.read-only) {
+        cursor: pointer;
+        &:hover {
+            transform: scale(1.1);
+            &:not(.active) {
+                @apply text-gray-300;
+            }
+        }
+    }
+    &.active {
+        @apply text-yellow-500;
+    }
+}
+</style>
diff --git a/apps/web/src/common/modules/favorites/favorite-button/store/favorite-store.ts b/apps/web/src/common/modules/user-config/favorite/favorite-button/store/favorite-store.ts
similarity index 98%
rename from apps/web/src/common/modules/favorites/favorite-button/store/favorite-store.ts
rename to apps/web/src/common/modules/user-config/favorite/favorite-button/store/favorite-store.ts
index daa94a742d..db9bf182da 100644
--- a/apps/web/src/common/modules/favorites/favorite-button/store/favorite-store.ts
+++ b/apps/web/src/common/modules/user-config/favorite/favorite-button/store/favorite-store.ts
@@ -17,7 +17,7 @@ import { useUserStore } from '@/store/user/user-store';
 import type { ReferenceData, ConfigData } from '@/lib/helper/config-data-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 
 
diff --git a/apps/web/src/common/modules/favorites/favorite-button/type.ts b/apps/web/src/common/modules/user-config/favorite/favorite-button/type.ts
similarity index 100%
rename from apps/web/src/common/modules/favorites/favorite-button/type.ts
rename to apps/web/src/common/modules/user-config/favorite/favorite-button/type.ts
diff --git a/apps/web/src/common/modules/user-config/recent/use-recent-create.ts b/apps/web/src/common/modules/user-config/recent/use-recent-create.ts
new file mode 100644
index 0000000000..a18c598027
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/recent/use-recent-create.ts
@@ -0,0 +1,56 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { useUserConfigApi } from '@/api-clients/config/user-config/composables/use-user-config-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { RecentType } from '@/common/modules/navigations/type';
+import type { RecentItem } from '@/common/modules/user-config/recent/use-recent-list';
+
+
+interface RecentConfigCreateParams {
+    type: RecentType;
+    workspaceId: string;
+    id: string;
+    options?: {[key:string]: any};
+}
+
+export const useRecentCreate = () => {
+    const queryClient = useQueryClient();
+    const { userConfigAPI } = useUserConfigApi();
+    const { withSuffix } = useServiceQueryKey('config', 'user-config', 'list');
+
+    return useMutation({
+        mutationFn: (params: RecentConfigCreateParams) => {
+            const {
+                workspaceId, id, type, ...options
+            } = params;
+
+            return userConfigAPI.set({
+                name: `console:recent:${type}:${workspaceId}:${id}`,
+                data: {
+                    id,
+                    workspace_id: workspaceId,
+                    type,
+                    ...options,
+                },
+            });
+        },
+        onSuccess: (_, variables) => {
+            queryClient.setQueryData(
+                withSuffix(`console:recent:${variables.type}`),
+                (oldData: ListResponse<RecentItem>) => {
+                    const newData = [...(oldData?.results ?? []), variables];
+                    return {
+                        ...oldData,
+                        results: newData,
+                    };
+                },
+            );
+        },
+        onError: (error) => {
+            ErrorHandler.handleError(error);
+        },
+    });
+};
diff --git a/apps/web/src/common/modules/user-config/recent/use-recent-delete.ts b/apps/web/src/common/modules/user-config/recent/use-recent-delete.ts
new file mode 100644
index 0000000000..00be05848a
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/recent/use-recent-delete.ts
@@ -0,0 +1,71 @@
+import { computed } from 'vue';
+
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { useUserConfigApi } from '@/api-clients/config/user-config/composables/use-user-config-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+
+import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { RecentType } from '@/common/modules/navigations/type';
+import type { RecentItem } from '@/common/modules/user-config/recent/use-recent-list';
+
+
+
+// NOTE: only name or type/itemId is required
+interface RecentConfigDeleteParams {
+    name?: string;
+    type?: RecentType;
+    itemId?: string;
+}
+
+export const useRecentDelete = () => {
+    const userWorkspaceStore = useUserWorkspaceStore();
+    const currentWorkspaceId = computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId);
+
+    const queryClient = useQueryClient();
+    const { userConfigAPI } = useUserConfigApi();
+    const { withSuffix } = useServiceQueryKey('config', 'user-config', 'list');
+
+    return useMutation({
+        mutationFn: (params: RecentConfigDeleteParams) => {
+            const { name, type, itemId } = params;
+            const _name = name ?? `console:recent:${type}:${currentWorkspaceId.value}:${itemId}`;
+
+            return userConfigAPI.delete({
+                name: _name,
+            });
+        },
+        onSuccess: (_, variables) => {
+            if (variables.name) {
+                const _type = variables.name.split(':')[2] as RecentType;
+                queryClient.setQueryData(
+                    withSuffix(`console:recent:${_type}`),
+                    (oldData: ListResponse<RecentItem>) => {
+                        const newData = (oldData?.results ?? []).filter((item) => item.name !== variables.name);
+                        return {
+                            ...oldData,
+                            results: newData,
+                        };
+                    },
+                );
+            } else {
+                queryClient.setQueryData(
+                    withSuffix(`console:recent:${variables.type}`),
+                    (oldData: ListResponse<RecentItem>) => {
+                        const newData = (oldData?.results ?? []).filter((item) => item.data.id !== variables.itemId);
+                        return {
+                            ...oldData,
+                            results: newData,
+                        };
+                    },
+                );
+            }
+        },
+        onError: (error) => {
+            ErrorHandler.handleError(error);
+        },
+    });
+};
diff --git a/apps/web/src/common/modules/user-config/recent/use-recent-list.ts b/apps/web/src/common/modules/user-config/recent/use-recent-list.ts
new file mode 100644
index 0000000000..b24ae4bc14
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/recent/use-recent-list.ts
@@ -0,0 +1,258 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import { useUserConfigApi } from '@/api-clients/config/user-config/composables/use-user-config-api';
+import type { UserConfigListParameters } from '@/api-clients/config/user-config/schema/api-verbs/list';
+import type { UserConfigModel } from '@/api-clients/config/user-config/schema/model';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+import { useUserStore } from '@/store/user/user-store';
+
+
+import { MENU_ID } from '@/lib/menu/config';
+
+import type { RecentType } from '@/common/modules/navigations/type';
+import { RECENT_TYPE } from '@/common/modules/navigations/type';
+
+
+export interface RecentOriginConfig {
+    id: string;
+    label: string;
+    type: RecentType;
+    workspace_id: string;
+    [key: string]: any;
+}
+
+export type RecentItem = UserConfigModel<RecentOriginConfig>;
+
+
+interface UseRecentListOptions {
+    limit?: number;
+}
+
+const recentListBaseApiQuery = new ApiQueryHelper().setSort('updated_at', true);
+
+export const useRecentList = ({ limit = 15 }: UseRecentListOptions = {}) => {
+    const userStore = useUserStore();
+    const userWorkspaceStore = useUserWorkspaceStore();
+    const userId = computed<string|undefined>(() => userStore.state.userId);
+    const currentWorkspaceId = computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId);
+
+    const getRecentListParams = computed(() => {
+        recentListBaseApiQuery.setFilters([
+            { k: 'user_id', v: userId.value || '', o: '=' },
+        ]);
+        return (type: RecentType) => {
+            const recentListApiQuery = new ApiQueryHelper().setFilters([
+                ...recentListBaseApiQuery.filters,
+                { k: 'name', v: `console:recent:${type}:`, o: '' },
+            ]).setPageLimit(limit);
+
+            if (type !== RECENT_TYPE.WORKSPACE && currentWorkspaceId.value) {
+                recentListApiQuery.addFilter({ k: 'data.workspace_id', v: currentWorkspaceId.value, o: '=' });
+            }
+            return {
+                query: recentListApiQuery.data,
+            };
+        };
+    });
+
+    const { data: menuRecentList, isFetching: isFetchingMenuRecentList } = useRecentQueryByType({
+        params: computed(() => {
+            const recentListApiQuery = new ApiQueryHelper().setFilters([
+                ...recentListBaseApiQuery.filters,
+                { k: 'name', v: 'console:recent:', o: '' },
+                { k: 'data.type', v: RECENT_TYPE.WORKSPACE, o: '!=' },
+                { k: 'data.id', v: MENU_ID.WORKSPACE_HOME, o: '!=' },
+                // NOTE: Code corresponding to data stored as 'home-dashboard'
+                { k: 'data.id', v: 'home-dashboard', o: '!=' },
+            ]).setPageLimit(limit);
+
+            if (currentWorkspaceId.value) {
+                recentListApiQuery.addFilter({ k: 'data.workspace_id', v: currentWorkspaceId.value, o: '=' });
+            }
+            return {
+                query: recentListApiQuery.data,
+            };
+        }),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            return true;
+        }),
+    });
+
+
+    const { data: workspaceRecentList, isFetching: isFetchingWorkspaceRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.WORKSPACE,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.WORKSPACE)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: serviceRecentList, isFetching: isFetchingServiceRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.SERVICE,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.SERVICE)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            if (!currentWorkspaceId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: serviceAccountRecentList, isFetching: isFetchingServiceAccountRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.SERVICE_ACCOUNT,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.SERVICE_ACCOUNT)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            if (!currentWorkspaceId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: trustedAccountRecentList, isFetching: isFetchingTrustedAccountRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.TRUSTED_ACCOUNT,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.TRUSTED_ACCOUNT)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: projectRecentList, isFetching: isFetchingProjectRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.PROJECT,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.PROJECT)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            if (!currentWorkspaceId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: projectGroupRecentList, isFetching: isFetchingProjectGroupRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.PROJECT_GROUP,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.PROJECT_GROUP)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            if (!currentWorkspaceId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: dashboardRecentList, isFetching: isFetchingDashboardRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.DASHBOARD,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.DASHBOARD)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            if (!currentWorkspaceId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: cloudServiceRecentList, isFetching: isFetchingCloudServiceRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.CLOUD_SERVICE,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.CLOUD_SERVICE)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            if (!currentWorkspaceId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: cloudServiceTypeRecentList, isFetching: isFetchingCloudServiceTypeRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.CLOUD_SERVICE_TYPE,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.CLOUD_SERVICE_TYPE)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            if (!currentWorkspaceId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: costAnalysisRecentList, isFetching: isFetchingCostAnalysisRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.COST_ANALYSIS,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.COST_ANALYSIS)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            if (!currentWorkspaceId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: metricExplorerRecentList, isFetching: isFetchingMetricExplorerRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.METRIC_EXPLORER,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.METRIC_EXPLORER)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            if (!currentWorkspaceId.value) return false;
+            return true;
+        }),
+    });
+
+    const { data: securityRecentList, isFetching: isFetchingSecurityRecentList } = useRecentQueryByType({
+        type: RECENT_TYPE.SECURITY,
+        params: computed(() => getRecentListParams.value(RECENT_TYPE.SECURITY)),
+        enabled: computed(() => {
+            if (!userId.value) return false;
+            if (!currentWorkspaceId.value) return false;
+            return true;
+        }),
+    });
+
+    return {
+        menuRecentList,
+        workspaceRecentList,
+        serviceRecentList,
+        serviceAccountRecentList,
+        trustedAccountRecentList,
+        projectRecentList,
+        projectGroupRecentList,
+        dashboardRecentList,
+        cloudServiceRecentList,
+        cloudServiceTypeRecentList,
+        costAnalysisRecentList,
+        metricExplorerRecentList,
+        securityRecentList,
+        workspaceRecentLoading: isFetchingWorkspaceRecentList,
+        recentLoading: computed(() => isFetchingMenuRecentList.value
+                || isFetchingWorkspaceRecentList.value
+                || isFetchingServiceRecentList.value
+                || isFetchingServiceAccountRecentList.value
+                || isFetchingTrustedAccountRecentList.value
+                || isFetchingProjectRecentList.value
+                || isFetchingProjectGroupRecentList.value
+                || isFetchingDashboardRecentList.value
+                || isFetchingCloudServiceRecentList.value
+                || isFetchingCloudServiceTypeRecentList.value
+                || isFetchingCostAnalysisRecentList.value
+                || isFetchingMetricExplorerRecentList.value
+                || isFetchingSecurityRecentList.value),
+    };
+};
+
+interface UseRecentListByTypeOptions {
+    type?: RecentType;
+    params: ComputedRef<UserConfigListParameters>;
+    enabled: ComputedRef<boolean>;
+}
+
+const useRecentQueryByType = ({ type, params, enabled }: UseRecentListByTypeOptions) => {
+    const { userConfigAPI } = useUserConfigApi();
+
+    const { key, params: queryParams } = useServiceQueryKey('config', 'user-config', 'list', {
+        contextKey: type ? `console:recent:${type}:` : 'console:recent:',
+        params,
+    });
+
+    return useScopedQuery({
+        queryKey: key,
+        queryFn: () => userConfigAPI.list<RecentOriginConfig>(queryParams.value),
+        select: (data) => data?.results ?? [],
+        enabled,
+    }, ['WORKSPACE', 'USER']);
+};
diff --git a/apps/web/src/common/modules/user-config/shared/_internal/use-cloud-service-type-map.ts b/apps/web/src/common/modules/user-config/shared/_internal/use-cloud-service-type-map.ts
new file mode 100644
index 0000000000..9ce661b0ac
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/shared/_internal/use-cloud-service-type-map.ts
@@ -0,0 +1,38 @@
+import { computed } from 'vue';
+
+import { useCloudServiceTypeApi } from '@/api-clients/inventory/cloud-service-type/composables/use-cloud-service-type-api';
+import type { CloudServiceTypeModel } from '@/api-clients/inventory/cloud-service-type/schema/model';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+export const useCloudServiceTypeMap = () => {
+    const { cloudServiceTypeAPI } = useCloudServiceTypeApi();
+
+    const { key, params } = useServiceQueryKey('inventory', 'cloud-service-type', 'list', {
+        params: {
+            query: {
+                only: ['name', 'group', 'provider', 'cloud_service_type_key', 'tags'],
+            },
+        },
+    });
+    const { data: cloudServiceTypeList, isFetching: isFetchingCloudServiceTypeList } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => cloudServiceTypeAPI.list(params.value),
+        select: (data) => data.results || [],
+        staleTime: 1000 * 60 * 5,
+        gcTime: 1000 * 60 * 10,
+    }, ['WORKSPACE']);
+
+
+    return {
+        map: computed(() => {
+            const cloudServiceTypeMap = new Map<string, CloudServiceTypeModel>();
+            cloudServiceTypeList.value?.forEach((d) => {
+                cloudServiceTypeMap.set(d.cloud_service_type_key, d);
+            });
+
+            return cloudServiceTypeMap;
+        }),
+        loading: isFetchingCloudServiceTypeList,
+    };
+};
diff --git a/apps/web/src/common/modules/user-config/shared/_internal/use-cost-query-set-map.ts b/apps/web/src/common/modules/user-config/shared/_internal/use-cost-query-set-map.ts
new file mode 100644
index 0000000000..bdc7e2f4b8
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/shared/_internal/use-cost-query-set-map.ts
@@ -0,0 +1,84 @@
+import {
+    reactive, watch, readonly, ref,
+    computed,
+} from 'vue';
+
+import { useQueryClient } from '@tanstack/vue-query';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { useCostQuerySetApi } from '@/api-clients/cost-analysis/cost-query-set/composables/use-cost-query-set-api';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
+import { useDataSourceApi } from '@/api-clients/cost-analysis/data-source/composables/use-data-source-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+export const useCostQuerySetMap = () => {
+    const queryClient = useQueryClient();
+    const { dataSourceAPI } = useDataSourceApi();
+    const { costQuerySetAPI } = useCostQuerySetApi();
+    const loading = ref(false);
+
+    const { key: dataSourceKey, params: dataSourceParams } = useServiceQueryKey('cost-analysis', 'data-source', 'list', {
+        params: {
+            query: {
+                only: ['data_source_id'],
+            },
+        },
+    });
+    const { withSuffix } = useServiceQueryKey('cost-analysis', 'cost-query-set', 'list', {
+        params: {
+            query: {
+                only: ['cost_query_set_id', 'name', 'data_source_id'],
+            },
+        },
+    });
+
+    const { data: dataSourceIds, isFetching: isFetchingDataSourceIds } = useScopedQuery({
+        queryKey: dataSourceKey,
+        queryFn: () => dataSourceAPI.list(dataSourceParams.value),
+        select: (data) => (data.results || []).map((d) => d.data_source_id),
+        staleTime: 1000 * 60 * 5,
+        gcTime: 1000 * 60 * 10,
+    }, ['WORKSPACE']);
+
+    const staticQueryParams = {
+        query: {
+            only: ['cost_query_set_id', 'name', 'data_source_id'],
+        },
+    };
+    const costQuerySetFetcher = async (dataSourceId: string) => {
+        const costQuerySetParams = {
+            data_source_id: dataSourceId,
+            ...staticQueryParams,
+        };
+        const response = await queryClient.ensureQueryData<ListResponse<CostQuerySetModel>>({
+            queryKey: withSuffix([dataSourceId, costQuerySetParams]),
+            queryFn: () => costQuerySetAPI.list(costQuerySetParams),
+            staleTime: 1000 * 60 * 5,
+            gcTime: 1000 * 60 * 10,
+        });
+
+        return response.results || [];
+    };
+
+    const costQuerySetMap = reactive<Record<string, CostQuerySetModel>>({});
+
+
+    watch(dataSourceIds, async () => {
+        if (!dataSourceIds.value?.length) return;
+        loading.value = true;
+        const promises = dataSourceIds.value.map((dataSourceId) => costQuerySetFetcher(dataSourceId));
+        const results = await Promise.all(promises);
+        results.forEach((data) => {
+            data.forEach((d) => {
+                costQuerySetMap[d.cost_query_set_id] = d;
+            });
+        });
+        loading.value = false;
+    });
+
+    return {
+        map: readonly(costQuerySetMap),
+        loading: computed(() => loading.value || isFetchingDataSourceIds.value),
+    };
+};
diff --git a/apps/web/src/common/modules/user-config/shared/_internal/use-dashboard-map.ts b/apps/web/src/common/modules/user-config/shared/_internal/use-dashboard-map.ts
new file mode 100644
index 0000000000..2c41b68d7a
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/shared/_internal/use-dashboard-map.ts
@@ -0,0 +1,64 @@
+import { computed } from 'vue';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+const privateDashboardListApiQueryHelper = new ApiQueryHelper().setOnly('dashboard_id', 'name');
+const publicDashboardListApiQueryHelper = new ApiQueryHelper().setFilters([
+    { k: 'resource_group', v: 'WORKSPACE', o: '=' },
+]).setOnly('dashboard_id', 'name');
+
+
+export const useDashboardMap = () => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+
+    const { key: publicDashboardKey, params: publicDashboardParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
+        params: {
+            query: publicDashboardListApiQueryHelper.data,
+        },
+    });
+
+    const { key: privateDashboardKey, params: privateDashboardParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'list', {
+        params: {
+            query: privateDashboardListApiQueryHelper.data,
+        },
+    });
+    const { data: publicDashboardList, isFetching: isFetchingPublicDashboardList } = useScopedQuery({
+        queryKey: publicDashboardKey,
+        queryFn: () => publicDashboardAPI.list(publicDashboardParams.value),
+        select: (data) => data.results || [],
+        staleTime: 1000 * 60 * 5,
+        gcTime: 1000 * 60 * 10,
+    }, ['WORKSPACE']);
+
+    const { data: privateDashboardList, isFetching: isFetchingPrivateDashboardList } = useScopedQuery({
+        queryKey: privateDashboardKey,
+        queryFn: () => privateDashboardAPI.list(privateDashboardParams.value),
+        select: (data) => data.results || [],
+        staleTime: 1000 * 60 * 5,
+        gcTime: 1000 * 60 * 10,
+    }, ['WORKSPACE']);
+
+
+    return {
+        map: computed(() => {
+            const dashboardMap = new Map<string, DashboardModel>();
+            publicDashboardList.value?.forEach((d) => {
+                dashboardMap.set(d.dashboard_id, d);
+            });
+
+            privateDashboardList.value?.forEach((d) => {
+                dashboardMap.set(d.dashboard_id, d);
+            });
+
+            return dashboardMap;
+        }),
+        loading: computed(() => isFetchingPublicDashboardList.value || isFetchingPrivateDashboardList.value),
+    };
+};
diff --git a/apps/web/src/common/modules/user-config/shared/_internal/use-metric-example-map.ts b/apps/web/src/common/modules/user-config/shared/_internal/use-metric-example-map.ts
new file mode 100644
index 0000000000..120511a9aa
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/shared/_internal/use-metric-example-map.ts
@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+
+import { useMetricExampleApi } from '@/api-clients/inventory/metric-example/composables/use-metric-example-api';
+import type { MetricExampleModel } from '@/api-clients/inventory/metric-example/schema/model';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+export const useMetricExampleMap = () => {
+    const { metricExampleAPI } = useMetricExampleApi();
+
+    const { key, params: queryParams } = useServiceQueryKey('inventory', 'metric-example', 'list', {
+        params: {
+            query: {
+                only: ['example_id', 'name'],
+            },
+        },
+    });
+    const { data: metricExampleList, isFetching: isFetchingMetricExampleList } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => metricExampleAPI.list(queryParams.value),
+        select: (data) => data.results ?? [],
+        staleTime: 1000 * 60 * 5,
+        gcTime: 1000 * 60 * 10,
+    }, ['WORKSPACE']);
+
+    return {
+        map: computed<Map<string, MetricExampleModel>>(() => {
+            const metricExampleMap = new Map<string, MetricExampleModel>();
+            metricExampleList.value?.forEach((item) => {
+                metricExampleMap.set(item.example_id, item);
+            });
+            return metricExampleMap;
+        }),
+        loading: isFetchingMetricExampleList,
+    };
+};
diff --git a/apps/web/src/common/modules/user-config/shared/_internal/use-workspace-map.ts b/apps/web/src/common/modules/user-config/shared/_internal/use-workspace-map.ts
new file mode 100644
index 0000000000..de3d670fc5
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/shared/_internal/use-workspace-map.ts
@@ -0,0 +1,31 @@
+import { computed } from 'vue';
+
+import { useUserProfileApi } from '@/api-clients/identity/user-profile/composables/use-user-profile-api';
+import type { WorkspaceModel } from '@/api-clients/identity/workspace/schema/model';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+export const useWorkspaceMap = () => {
+    const { userProfileAPI } = useUserProfileApi();
+
+    const { key, params } = useServiceQueryKey('identity', 'user-profile', 'get-workspaces');
+    const { data: workspaceList, isFetching: isFetchingWorkspaceList } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => userProfileAPI.getWorkspaces(params.value),
+        select: (data) => data.results || [],
+        staleTime: 1000 * 60 * 5,
+        gcTime: 1000 * 60 * 10,
+    }, ['WORKSPACE', 'USER']);
+
+
+    return {
+        map: computed(() => {
+            const workspaceMap = new Map<string, WorkspaceModel>();
+            workspaceList.value?.forEach((workspace) => {
+                workspaceMap.set(workspace.workspace_id, workspace);
+            });
+            return workspaceMap;
+        }),
+        loading: isFetchingWorkspaceList,
+    };
+};
diff --git a/apps/web/src/common/modules/user-config/shared/use-convert-referenced-config-data.ts b/apps/web/src/common/modules/user-config/shared/use-convert-referenced-config-data.ts
new file mode 100644
index 0000000000..bc38ee3ed8
--- /dev/null
+++ b/apps/web/src/common/modules/user-config/shared/use-convert-referenced-config-data.ts
@@ -0,0 +1,275 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
+
+import { cloneDeep, find } from 'lodash';
+
+import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
+
+import type { DisplayMenu } from '@/store/menu/type';
+
+import { assetUrlConverter } from '@/lib/helper/asset-helper';
+import { getParsedKeysWithManagedCostQueryFavoriteKey } from '@/lib/helper/config-data-helper';
+import { getAllSuggestionMenuList } from '@/lib/helper/menu-suggestion-helper';
+import { useAllMenuList } from '@/lib/menu/use-all-menu-list';
+
+import type { RecentConfig, RecentType } from '@/common/modules/navigations/type';
+import {
+    FAVORITE_TYPE, type FavoriteConfig, type FavoriteType, type FavoriteItem,
+} from '@/common/modules/user-config/favorite/favorite-button/type';
+import { useCloudServiceTypeMap } from '@/common/modules/user-config/shared/_internal/use-cloud-service-type-map';
+import { useCostQuerySetMap } from '@/common/modules/user-config/shared/_internal/use-cost-query-set-map';
+import { useDashboardMap } from '@/common/modules/user-config/shared/_internal/use-dashboard-map';
+import { useMetricExampleMap } from '@/common/modules/user-config/shared/_internal/use-metric-example-map';
+import { useWorkspaceMap } from '@/common/modules/user-config/shared/_internal/use-workspace-map';
+
+
+export interface ConfigData extends Omit<RecentConfig, 'itemType'>, Omit<FavoriteConfig, 'itemType'> {
+    itemType: RecentType|FavoriteType;
+}
+
+export interface ReferenceData extends Omit<FavoriteItem, 'itemType'> {
+    itemType: RecentType|FavoriteType;
+}
+
+interface UseConvertReferencedConfigDataOptions {
+    allConfigList?: ComputedRef<ConfigData[]>;
+    projectConfigList?: ComputedRef<ConfigData[]>;
+    projectGroupConfigList?: ComputedRef<ConfigData[]>;
+    metricConfigList?: ComputedRef<ConfigData[]>;
+    metricExampleConfigList?: ComputedRef<ConfigData[]>;
+    serviceConfigList?: ComputedRef<ConfigData[]>;
+    dashboardConfigList?: ComputedRef<ConfigData[]>;
+    costQuerySetConfigList?: ComputedRef<ConfigData[]>;
+    cloudServiceConfigList?: ComputedRef<ConfigData[]>;
+    workspaceConfigList?: ComputedRef<ConfigData[]>;
+}
+
+export const useConvertReferencedConfigData = ({
+    allConfigList,
+    projectConfigList,
+    projectGroupConfigList,
+    metricConfigList,
+    metricExampleConfigList,
+    serviceConfigList,
+    dashboardConfigList,
+    costQuerySetConfigList,
+    cloudServiceConfigList,
+    workspaceConfigList,
+}: UseConvertReferencedConfigDataOptions) => {
+    /* Reference */
+    const referenceMap = useAllReferenceDataModel();
+    const projectMap = referenceMap.project;
+    const projectGroupMap = referenceMap.projectGroup;
+    const metricMap = referenceMap.metric;
+    const serviceMap = referenceMap.service;
+    const costDataSourceMap = referenceMap.costDataSource;
+    const { map: cloudServiceTypeMap, loading: isLoadingCloudServiceTypeMap } = useCloudServiceTypeMap();
+    const { map: dashboardMap, loading: isLoadingDashboardMap } = useDashboardMap();
+    const { map: costQuerySetMap, loading: isLoadingCostQuerySetMap } = useCostQuerySetMap();
+    const { map: metricExampleMap, loading: isLoadingMetricExampleMap } = useMetricExampleMap();
+    const { map: workspaceMap, loading: isLoadingWorkspaceMap } = useWorkspaceMap();
+
+    /* Menu */
+    const { getAllMenuList } = useAllMenuList();
+    const router = useRouter();
+    const route = useRoute();
+    const allMenuList = computed<DisplayMenu[]>(() => getAllMenuList(route, router));
+
+    /* Converted */
+    const convertedMenuList = computed<ReferenceData[]>(() => {
+        const convertMenuList = cloneDeep(allMenuList.value);
+
+        const suggestionMenuList = getAllSuggestionMenuList(convertMenuList);
+        const results: ReferenceData[] = [];
+        if (!allConfigList?.value) return results;
+
+        const reorderedConfig: ConfigData[] = [];
+        suggestionMenuList.forEach((menu) => {
+            const configItem = allConfigList?.value.find((item) => item.itemId === menu.id);
+            if (configItem) {
+                reorderedConfig.push(configItem);
+            }
+        });
+
+        return reorderedConfig.map((d) => {
+            const menu = find(suggestionMenuList, { id: d.itemId });
+            return {
+                ...d,
+                itemType: FAVORITE_TYPE.MENU,
+                itemId: menu?.id || d.itemId,
+                name: menu?.id || d.itemId,
+                label: menu?.label || d.itemId,
+                icon: menu?.parents?.[0]?.icon || menu?.icon || undefined,
+                parents: menu?.parents || [],
+                updatedAt: d?.updatedAt,
+                isDeleted: !menu,
+            };
+        });
+    });
+
+    const convertedProjectList = computed<ReferenceData[]>(() => (projectConfigList?.value ?? []).map((d) => {
+        const project = projectMap[d.itemId];
+        const parents = project?.data?.groupInfo?.id ? [{
+            name: project.data?.groupInfo?.id,
+            label: project.data?.groupInfo?.name,
+        }] : undefined;
+        return {
+            ...d,
+            name: d.itemId,
+            label: project?.name || d.itemId,
+            icon: 'ic_document-filled',
+            updatedAt: d?.updatedAt,
+            parents,
+            isDeleted: !project,
+        };
+    }));
+
+    const convertedProjectGroupList = computed<ReferenceData[]>(() => (projectGroupConfigList?.value ?? []).map((d) => {
+        const projectGroup = projectGroupMap[d.itemId];
+        const parents = projectGroup?.data?.parentGroupInfo?.id ? [{
+            name: projectGroup.data?.parentGroupInfo?.id,
+            label: projectGroup.data?.parentGroupInfo?.name,
+        }] : undefined;
+        return {
+            ...d,
+            name: d.itemId,
+            label: projectGroup?.name || d.itemId,
+            icon: 'ic_folder-filled',
+            parents,
+            isDeleted: !projectGroup,
+        };
+    }));
+
+    const convertedCloudServiceTypeList = computed<ReferenceData[]>(() => (cloudServiceConfigList?.value ?? []).map((d) => {
+        const cloudServiceType = cloudServiceTypeMap.value.get(d.itemId);
+        return {
+            ...d,
+            name: d.itemId,
+            label: cloudServiceType?.name || d.itemId,
+            icon: assetUrlConverter(cloudServiceType?.tags['spaceone:icon']),
+            provider: cloudServiceType?.provider,
+            parents: [{
+                name: cloudServiceType?.group,
+                label: cloudServiceType?.group,
+            }],
+            updatedAt: d.updatedAt,
+            isDeleted: !cloudServiceType,
+        };
+    }));
+
+    const convertedMetricList = computed<ReferenceData[]>(() => (metricConfigList?.value ?? []).map((d) => {
+        const metric = metricMap[d.itemId];
+        return {
+            ...d,
+            name: d.itemId,
+            label: metric?.name || d.itemId,
+            icon: d.itemId.startsWith('metric-managed-') ? 'ic_main-filled' : 'ic_sub',
+            updatedAt: d?.updatedAt,
+            isDeleted: !metric,
+        };
+    }));
+
+    const convertedMetricExampleList = computed<ReferenceData[]>(() => (metricExampleConfigList?.value ?? []).map((d) => {
+        const metricExample = metricExampleMap.value.get(d.itemId);
+        return {
+            ...d,
+            name: d.itemId,
+            label: metricExample?.name || d.itemId,
+            icon: 'ic_example-filled',
+            updatedAt: d?.updatedAt,
+            isDeleted: !metricExample,
+        };
+    }));
+
+    const convertedServiceList = computed<ReferenceData[]>(() => (serviceConfigList?.value ?? []).map((d) => {
+        const service = serviceMap[d.itemId];
+        return {
+            ...d,
+            itemType: FAVORITE_TYPE.SERVICE,
+            itemId: service?.name || d.itemId,
+            name: service?.name || d.itemId,
+            label: service?.label || d.itemId,
+            icon: 'ic_service_alert',
+            updatedAt: d?.updatedAt,
+            isDeleted: !service,
+        };
+    }));
+
+    const convertedDashboardList = computed<ReferenceData[]>(() => (dashboardConfigList?.value ?? []).map((d) => {
+        const dashboard = dashboardMap.value.get(d.itemId);
+        return {
+            ...d,
+            name: dashboard?.dashboard_id || d.itemId,
+            label: dashboard?.name || d.itemId,
+            icon: 'ic_service_dashboard',
+            updatedAt: d.updatedAt,
+            isDeleted: !dashboard,
+        };
+    }));
+
+    const convertedCostQuerySetList = computed<ReferenceData[]>(() => (costQuerySetConfigList?.value ?? []).map((d) => {
+        const parsedKeys = getParsedKeysWithManagedCostQueryFavoriteKey(d.itemId);
+        if (parsedKeys) {
+            const [dataSourceId, costQuerySetId] = parsedKeys;
+            const dataSource = costDataSourceMap[dataSourceId];
+            return {
+                ...d,
+                name: d.itemId,
+                label: costQuerySetId || d.itemId,
+                updatedAt: d.updatedAt,
+                icon: 'ic_service_cost-explorer',
+                dataSourceId,
+                parents: [{
+                    name: dataSourceId,
+                    label: dataSource?.label,
+                }],
+                isDeleted: false,
+            };
+        }
+        const costQuerySet = costQuerySetMap[d.itemId];
+        return {
+            ...d,
+            name: costQuerySet?.cost_query_set_id || d.itemId,
+            label: costQuerySet?.name || d.itemId,
+            updatedAt: d.updatedAt,
+            icon: 'ic_service_cost-explorer',
+            dataSourceId: costQuerySet?.data_source_id,
+            parents: [{
+                name: costQuerySet?.data_source_id,
+                label: costDataSourceMap[costQuerySet?.data_source_id]?.label,
+            }],
+            isDeleted: !costQuerySet,
+        };
+    }));
+
+    const convertedWorkspaceList = computed<ReferenceData[]>(() => (workspaceConfigList?.value ?? []).map((d) => {
+        const workspace = workspaceMap.value.get(d.itemId);
+        return {
+            ...d,
+            itemType: FAVORITE_TYPE.WORKSPACE,
+            itemId: workspace?.workspace_id || d.itemId,
+            name: workspace?.workspace_id || d.itemId,
+            label: workspace?.name || d.itemId,
+            tags: workspace?.tags,
+            isDeleted: !workspace,
+        };
+    }));
+
+
+    return {
+        convertedMenu: convertedMenuList,
+        convertedProject: convertedProjectList,
+        convertedProjectGroup: convertedProjectGroupList,
+        convertedMetric: convertedMetricList,
+        convertedMetricExample: convertedMetricExampleList,
+        convertedService: convertedServiceList,
+        convertedCloudServiceType: convertedCloudServiceTypeList,
+        convertedDashboard: convertedDashboardList,
+        convertedCostQuerySet: convertedCostQuerySetList,
+        convertedWorkspace: convertedWorkspaceList,
+        loading: computed(() => isLoadingCloudServiceTypeMap.value || isLoadingDashboardMap.value || isLoadingCostQuerySetMap.value || isLoadingMetricExampleMap.value || isLoadingWorkspaceMap.value),
+    };
+};
+
+
diff --git a/apps/web/src/lib/helper/config-data-helper.ts b/apps/web/src/lib/helper/config-data-helper.ts
index 219a290f86..5fc945227a 100644
--- a/apps/web/src/lib/helper/config-data-helper.ts
+++ b/apps/web/src/lib/helper/config-data-helper.ts
@@ -17,9 +17,9 @@ import type { ServiceReferenceMap } from '@/store/reference/service-reference-st
 
 import { getAllSuggestionMenuList } from '@/lib/helper/menu-suggestion-helper';
 
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteItem, FavoriteType, FavoriteConfig } from '@/common/modules/favorites/favorite-button/type';
 import type { RecentType, RecentConfig } from '@/common/modules/navigations/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { FavoriteItem, FavoriteType, FavoriteConfig } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 export interface ConfigData extends Omit<RecentConfig, 'itemType'>, Omit<FavoriteConfig, 'itemType'> {
     itemType: RecentType|FavoriteType;
@@ -183,6 +183,9 @@ export const convertMetricConfigToReferenceData = (config: ConfigData[]|null, me
         } else {
             results.push({
                 ...d,
+                name: d.itemId,
+                label: d.itemId,
+                icon: d.itemId.startsWith('metric-managed-') ? 'ic_main-filled' : 'ic_sub',
                 isDeleted: !resource,
             });
         }
diff --git a/apps/web/src/query/clients.ts b/apps/web/src/query/clients.ts
index 3efb0ec11d..60ecb37987 100644
--- a/apps/web/src/query/clients.ts
+++ b/apps/web/src/query/clients.ts
@@ -12,4 +12,11 @@ export const serviceQueryClient = new QueryClient();
  * This client is used internally by the reference data system for managing its own cache.
  * It's not meant to be used directly in service context.
  */
-export const referenceQueryClient = new QueryClient();
+export const resourceQueryClient = new QueryClient();
+
+/**
+ * Dedicated query client for the config feature.
+ * This client is used internally by the config feature for managing its own cache.
+ * It's not meant to be used directly in service context.
+ */
+export const configFeatureQueryClient = new QueryClient();
diff --git a/apps/web/src/query/resource-query/reference-data-model/adaptors/implementations/use-service-reference-data-model.ts b/apps/web/src/query/resource-query/reference-data-model/adaptors/implementations/use-service-reference-data-model.ts
index b64daf19d1..cb02faa8fd 100644
--- a/apps/web/src/query/resource-query/reference-data-model/adaptors/implementations/use-service-reference-data-model.ts
+++ b/apps/web/src/query/resource-query/reference-data-model/adaptors/implementations/use-service-reference-data-model.ts
@@ -25,7 +25,7 @@ export const useServiceReferenceDataModel: ReferenceDataModelImplementationAdapt
     } = useReferenceDataModel<ServiceModel, ServiceReferenceItem>(
         RESOURCE_CONFIG_MAP.service.resourceKey,
         (serviceInfo: ServiceModel) => ({
-            key: serviceInfo.service_key,
+            key: serviceInfo.service_id,
             label: serviceInfo.name,
             name: serviceInfo.service_id,
             data: serviceInfo,
diff --git a/apps/web/src/query/resource-query/reference-data-model/composables/use-reference-data-model.ts b/apps/web/src/query/resource-query/reference-data-model/composables/use-reference-data-model.ts
index fedee5b5eb..51bec6c38f 100644
--- a/apps/web/src/query/resource-query/reference-data-model/composables/use-reference-data-model.ts
+++ b/apps/web/src/query/resource-query/reference-data-model/composables/use-reference-data-model.ts
@@ -3,7 +3,7 @@ import {
     ref,
 } from 'vue';
 
-import { referenceQueryClient as queryClient } from '@/query/clients';
+import { resourceQueryClient as queryClient } from '@/query/clients';
 import { useResourceQueryKey } from '@/query/core/query-key/use-resource-query-key';
 import { useReferenceReactiveCache } from '@/query/resource-query/reference-data-model/composables/_internal/use-reference-reactive-cache';
 import { getRepository } from '@/query/resource-query/reference-data-model/core/repository-registry';
diff --git a/apps/web/src/query/resource-query/resource-menu-handler/core/use-base-resource-menu-handler.ts b/apps/web/src/query/resource-query/resource-menu-handler/core/use-base-resource-menu-handler.ts
index db1867802f..2b796411fc 100644
--- a/apps/web/src/query/resource-query/resource-menu-handler/core/use-base-resource-menu-handler.ts
+++ b/apps/web/src/query/resource-query/resource-menu-handler/core/use-base-resource-menu-handler.ts
@@ -1,6 +1,6 @@
 import type { MenuAttachHandler } from '@cloudforet/mirinae';
 
-import { referenceQueryClient as queryClient } from '@/query/clients';
+import { resourceQueryClient as queryClient } from '@/query/clients';
 import { useResourceQueryKey } from '@/query/core/query-key/use-resource-query-key';
 import { RESOURCE_MENU_FETCH_CONFIG } from '@/query/resource-query/resource-menu-handler/config/resource-menu-fetch-config';
 import { generateMenuQueryHandler } from '@/query/resource-query/resource-menu-handler/core/menu-query-handler.generator';
diff --git a/apps/web/src/query/resource-query/shared/composable/__tests__/use-resource-cache-sync.test.ts b/apps/web/src/query/resource-query/shared/composable/__tests__/use-resource-cache-sync.test.ts
index 524954e63f..b56e2e24f0 100644
--- a/apps/web/src/query/resource-query/shared/composable/__tests__/use-resource-cache-sync.test.ts
+++ b/apps/web/src/query/resource-query/shared/composable/__tests__/use-resource-cache-sync.test.ts
@@ -4,6 +4,7 @@ import {
     describe, it, expect, vi, beforeEach,
 } from 'vitest';
 
+import { resourceQueryClient } from '@/query/clients';
 import { useResourceCacheSync } from '@/query/resource-query/shared/composable/use-resource-cache-sync';
 
 vi.mock('@tanstack/vue-query', async (importOriginal) => {
@@ -61,7 +62,7 @@ describe('useResourceCacheSync', () => {
             const { wrapResourceCacheRefresh } = useResourceCacheSync('project');
             const mockApiFn = vi.fn().mockResolvedValue({ status: 'success' });
             const wrappedFn = wrapResourceCacheRefresh(mockApiFn);
-            const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries');
+            const invalidateSpy = vi.spyOn(resourceQueryClient, 'invalidateQueries');
 
             // Act
             await wrappedFn({ name: 'new-project' });
@@ -81,7 +82,7 @@ describe('useResourceCacheSync', () => {
             const { wrapResourceCacheRefresh } = useResourceCacheSync('project');
             const mockApiFn = vi.fn().mockRejectedValue(new Error('API Error'));
             const wrappedFn = wrapResourceCacheRefresh(mockApiFn);
-            const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries');
+            const invalidateSpy = vi.spyOn(resourceQueryClient, 'invalidateQueries');
 
             // Act & Assert
             await expect(wrappedFn()).rejects.toThrow('API Error');
@@ -93,48 +94,48 @@ describe('useResourceCacheSync', () => {
         });
     });
 
-    describe('2. wrapResourceCacheUpdate', () => {
-        const resourceType = 'project';
-        const resourceQueryKey = ['workspace', 'workspace-123', resourceType];
-
-        it('should create a new cache with the new data and invalidate the list/stat queries', async () => {
-            // Arrange
-            const { wrapResourceCacheUpdate } = useResourceCacheSync(resourceType);
-            const newProjectData = { project_id: 'project-new', name: 'New Project' };
-            const mockApiFn = vi.fn().mockResolvedValue(newProjectData);
-            const wrappedFn = wrapResourceCacheUpdate(mockApiFn);
-            const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries');
-
-            // Act
-            await wrappedFn(newProjectData);
-
-            // Assert
-            const cachedData = queryClient.getQueryData<Record<string, any>>(resourceQueryKey);
-            expect(cachedData).toEqual({ 'project-new': newProjectData });
-
-            expect(invalidateSpy).toHaveBeenCalledTimes(2);
-            expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: [...resourceQueryKey, 'stat'] });
-            expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: [...resourceQueryKey, 'list'] });
-        });
-
-        it('should update the existing cache with the new data', async () => {
-            // Arrange
-            const { wrapResourceCacheUpdate } = useResourceCacheSync(resourceType);
-            const initialData = { project_id: 'project-123', name: 'Old Name' };
-            const updatedData = { project_id: 'project-123', name: 'Updated Name' };
-
-            queryClient.setQueryData(resourceQueryKey, { 'project-123': initialData });
-
-            const mockApiFn = vi.fn().mockResolvedValue(updatedData);
-            const wrappedFn = wrapResourceCacheUpdate(mockApiFn);
-
-            // Act
-            await wrappedFn(updatedData);
-
-            // Assert
-            const cachedData = queryClient.getQueryData<Record<string, any>>(resourceQueryKey);
-            expect(cachedData?.[updatedData.project_id]).toEqual(updatedData);
-            expect(Object.keys(cachedData ?? {}).length).toBe(1);
-        });
-    });
+    // describe('2. wrapResourceCacheUpdate', () => {
+    //     const resourceType = 'project';
+    //     const resourceQueryKey = ['workspace', 'workspace-123', resourceType];
+
+    //     it('should create a new cache with the new data and invalidate the list/stat queries', async () => {
+    //         // Arrange
+    //         const { wrapResourceCacheUpdate } = useResourceCacheSync(resourceType);
+    //         const newProjectData = { project_id: 'project-new', name: 'New Project' };
+    //         const mockApiFn = vi.fn().mockResolvedValue(newProjectData);
+    //         const wrappedFn = wrapResourceCacheUpdate(mockApiFn);
+    //         const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries');
+
+    //         // Act
+    //         await wrappedFn(newProjectData);
+
+    //         // Assert
+    //         const cachedData = queryClient.getQueryData<Record<string, any>>(resourceQueryKey);
+    //         expect(cachedData).toEqual({ 'project-new': newProjectData });
+
+    //         expect(invalidateSpy).toHaveBeenCalledTimes(2);
+    //         expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: [...resourceQueryKey, 'stat'] });
+    //         expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: [...resourceQueryKey, 'list'] });
+    //     });
+
+    //     it('should update the existing cache with the new data', async () => {
+    //         // Arrange
+    //         const { wrapResourceCacheUpdate } = useResourceCacheSync(resourceType);
+    //         const initialData = { project_id: 'project-123', name: 'Old Name' };
+    //         const updatedData = { project_id: 'project-123', name: 'Updated Name' };
+
+    //         queryClient.setQueryData(resourceQueryKey, { 'project-123': initialData });
+
+    //         const mockApiFn = vi.fn().mockResolvedValue(updatedData);
+    //         const wrappedFn = wrapResourceCacheUpdate(mockApiFn);
+
+    //         // Act
+    //         await wrappedFn(updatedData);
+
+    //         // Assert
+    //         const cachedData = queryClient.getQueryData<Record<string, any>>(resourceQueryKey);
+    //         expect(cachedData?.[updatedData.project_id]).toEqual(updatedData);
+    //         expect(Object.keys(cachedData ?? {}).length).toBe(1);
+    //     });
+    // });
 });
diff --git a/apps/web/src/query/resource-query/shared/composable/use-resource-cache-sync.ts b/apps/web/src/query/resource-query/shared/composable/use-resource-cache-sync.ts
index 769efcdab4..5cb8894f3c 100644
--- a/apps/web/src/query/resource-query/shared/composable/use-resource-cache-sync.ts
+++ b/apps/web/src/query/resource-query/shared/composable/use-resource-cache-sync.ts
@@ -1,20 +1,14 @@
-import type { QueryClient } from '@tanstack/vue-query';
-import { useQueryClient } from '@tanstack/vue-query';
-
+import { resourceQueryClient as queryClient } from '@/query/clients';
 import { useResourceQueryKey } from '@/query/core/query-key/use-resource-query-key';
-import { RESOURCE_CONFIG_MAP } from '@/query/resource-query/shared/contants/resource-config-map';
-import type { ResourceCacheType, ResourceKeyType } from '@/query/resource-query/shared/types/resource-type';
+import type { ResourceKeyType } from '@/query/resource-query/shared/types/resource-type';
 
 
 
-type Obj = Record<string, any>;
 type AnyFn = (...args: any[]) => any;
 type AwaitedRet<F extends AnyFn> = Awaited<ReturnType<F>>;
 
 
 export const useResourceCacheSync = (resourceType: ResourceKeyType) => {
-    const queryClient = useQueryClient();
-
     const wrapResourceCacheRefresh = <F extends AnyFn>(fn: F) => async (...args: Parameters<F>): Promise<AwaitedRet<F>> => {
         const { key: referenceQueryKey } = useResourceQueryKey(resourceType);
         try {
@@ -25,40 +19,44 @@ export const useResourceCacheSync = (resourceType: ResourceKeyType) => {
         }
     };
 
-    const wrapResourceCacheUpdate = <F extends AnyFn>(fn: F) => async (...args: Parameters<F>): Promise<AwaitedRet<F>> => {
-        const res = await Promise.resolve(fn(...args));
-        await _updateResourceCache(resourceType, res as Obj, queryClient);
-        return res;
-    };
+    // TODO: annotaion
+    // const wrapResourceCacheUpdate = <F extends AnyFn>(fn: F) => async (...args: Parameters<F>): Promise<AwaitedRet<F>> => {
+    //     const res = await Promise.resolve(fn(...args));
+    //     await _updateResourceCache(resourceType, res as Obj, queryClient);
+    //     return res;
+    // };
 
-    return { wrapResourceCacheRefresh, wrapResourceCacheUpdate };
+    return {
+        wrapResourceCacheRefresh,
+        // wrapResourceCacheUpdate,
+    };
 };
 
 
-const _updateResourceCache = async <T extends Obj>(
-    resourceType: ResourceKeyType,
-    newData: T,
-    queryClient: QueryClient,
-) => {
-    const { key: referenceQueryKey, withSuffix } = useResourceQueryKey(resourceType);
-    const idKey = RESOURCE_CONFIG_MAP[resourceType].idKey as keyof T;
-
-    if (!idKey || typeof newData !== 'object' || newData === null || !(idKey in newData)) {
-        throw new Error(`Invalid resource key or data for type: ${resourceType}`);
-    }
-
-    queryClient.setQueryData<ResourceCacheType<T>>(referenceQueryKey.value, (oldData) => {
-        const currentResults = (oldData ?? {}) as ResourceCacheType<T>;
-        const newDataId = newData[idKey] as PropertyKey;
-
-        if (newDataId in currentResults) {
-            return { ...currentResults, [newDataId]: newData };
-        }
-        return { ...currentResults, [newDataId]: newData };
-    });
-
-    await Promise.all([
-        queryClient.invalidateQueries({ queryKey: withSuffix('stat') }),
-        queryClient.invalidateQueries({ queryKey: withSuffix('list') }),
-    ]);
-};
+// const _updateResourceCache = async <T extends Obj>(
+//     resourceType: ResourceKeyType,
+//     newData: T,
+//     queryClient: QueryClient,
+// ) => {
+//     const { key: referenceQueryKey, withSuffix } = useResourceQueryKey(resourceType);
+//     const idKey = RESOURCE_CONFIG_MAP[resourceType].idKey as keyof T;
+
+//     if (!idKey || typeof newData !== 'object' || newData === null || !(idKey in newData)) {
+//         throw new Error(`Invalid resource key or data for type: ${resourceType}`);
+//     }
+
+//     queryClient.setQueryData<ResourceCacheType<T>>(referenceQueryKey.value, (oldData) => {
+//         const currentResults = (oldData ?? {}) as ResourceCacheType<T>;
+//         const newDataId = newData[idKey] as PropertyKey;
+
+//         if (newDataId in currentResults) {
+//             return { ...currentResults, [newDataId]: newData };
+//         }
+//         return { ...currentResults, [newDataId]: newData };
+//     });
+
+//     await Promise.all([
+//         queryClient.invalidateQueries({ queryKey: withSuffix('stat') }),
+//         queryClient.invalidateQueries({ queryKey: withSuffix('list') }),
+//     ]);
+// };
diff --git a/apps/web/src/query/shared/composables/use-watched-query-cache.ts b/apps/web/src/query/shared/composables/use-watched-query-cache.ts
index 51beefadcd..e40f63f0f2 100644
--- a/apps/web/src/query/shared/composables/use-watched-query-cache.ts
+++ b/apps/web/src/query/shared/composables/use-watched-query-cache.ts
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 
 import { hashKey } from '@tanstack/vue-query';
 
-import { referenceQueryClient as queryClient } from '@/query/clients';
+import { resourceQueryClient as queryClient } from '@/query/clients';
 import type { QueryKeyArray } from '@/query/core/query-key/types/query-key-type';
 
 export const useWatchedQueryCache = <T>(queryKey: QueryKeyArray) => {
diff --git a/apps/web/src/services/alert-manager/v2/pages/ServiceDetailPage.vue b/apps/web/src/services/alert-manager/v2/pages/ServiceDetailPage.vue
index 48176f3afc..1d952ed57f 100644
--- a/apps/web/src/services/alert-manager/v2/pages/ServiceDetailPage.vue
+++ b/apps/web/src/services/alert-manager/v2/pages/ServiceDetailPage.vue
@@ -10,9 +10,9 @@ import type { Route } from '@cloudforet/mirinae/types/navigation/breadcrumbs/typ
 import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
 import { i18n } from '@/translations';
 
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import ServiceDetailHeader from '@/services/alert-manager/v2/components/ServiceDetailHeader.vue';
 import ServiceDetailTabs from '@/services/alert-manager/v2/components/ServiceDetailTabs.vue';
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue
index 5407db4861..c0e9c20c96 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue
@@ -19,14 +19,14 @@ import { i18n } from '@/translations';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import LSB from '@/common/modules/navigations/lsb/LSB.vue';
 import LSBCollapsibleMenuItem from '@/common/modules/navigations/lsb/modules/LSBCollapsibleMenuItem.vue';
 import LSBMenuItem from '@/common/modules/navigations/lsb/modules/LSBMenuItem.vue';
 import LSBRouterMenuItem from '@/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue';
 import type { LSBCollapsibleItem, LSBItem } from '@/common/modules/navigations/lsb/type';
 import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { gray, yellow } from '@/styles/colors';
 
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetricTree.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetricTree.vue
index e1b3588fe7..3fe0760996 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetricTree.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetricTree.vue
@@ -8,8 +8,8 @@ import type { TreeDisplayMap, TreeNode } from '@cloudforet/mirinae/types/data-di
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
diff --git a/apps/web/src/services/asset-inventory/pages/MetricExplorerDetailPage.vue b/apps/web/src/services/asset-inventory/pages/MetricExplorerDetailPage.vue
index 35085e454c..b52146ec7d 100644
--- a/apps/web/src/services/asset-inventory/pages/MetricExplorerDetailPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/MetricExplorerDetailPage.vue
@@ -15,9 +15,9 @@ import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-
 import { queryStringToArray, queryStringToObject, queryStringToString } from '@/lib/router-query-string';
 
 import { useBreadcrumbs } from '@/common/composables/breadcrumbs';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import MetricExplorerChart from '@/services/asset-inventory/components/MetricExplorerChart.vue';
 import MetricExplorerDataTable from '@/services/asset-inventory/components/MetricExplorerDataTable.vue';
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
index 32003db877..767fddc534 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
@@ -23,10 +23,10 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisLSB.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisLSB.vue
index 7c176c7e1e..438e083ad5 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisLSB.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisLSB.vue
@@ -18,13 +18,13 @@ import { useUserStore } from '@/store/user/user-store';
 
 import { getCompoundKeyWithManagedCostQuerySetFavoriteKey } from '@/lib/helper/config-data-helper';
 
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteConfig } from '@/common/modules/favorites/favorite-button/type';
 import LSB from '@/common/modules/navigations/lsb/LSB.vue';
 import LSBRouterMenuItem from '@/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue';
 import type { LSBItem, LSBMenu } from '@/common/modules/navigations/lsb/type';
 import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import type { FavoriteConfig } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import {
     yellow, gray,
diff --git a/apps/web/src/services/dashboards/DashboardsLSB.vue b/apps/web/src/services/dashboards/DashboardsLSB.vue
index 7f2ac62643..31b2a1eea4 100644
--- a/apps/web/src/services/dashboards/DashboardsLSB.vue
+++ b/apps/web/src/services/dashboards/DashboardsLSB.vue
@@ -19,15 +19,15 @@ import { useAuthorizationStore } from '@/store/authorization/authorization-store
 import { MENU_ID } from '@/lib/menu/config';
 
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteConfig } from '@/common/modules/favorites/favorite-button/type';
 import LSB from '@/common/modules/navigations/lsb/LSB.vue';
 import LSBCollapsibleMenuItem from '@/common/modules/navigations/lsb/modules/LSBCollapsibleMenuItem.vue';
 import LSBMenuItem from '@/common/modules/navigations/lsb/modules/LSBMenuItem.vue';
 import LSBRouterMenuItem from '@/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue';
 import type { LSBItem, LSBMenu } from '@/common/modules/navigations/lsb/type';
 import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import type { FavoriteConfig } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
diff --git a/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue b/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
index 6a1fe619ab..e9a94f085d 100644
--- a/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
+++ b/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
@@ -12,10 +12,10 @@ import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-worksp
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { useDashboardDeleteMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-delete-mutation';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
diff --git a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue
index 48de417d25..a67359730d 100644
--- a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue
@@ -19,8 +19,8 @@ import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useAuthorizationStore } from '@/store/authorization/authorization-store';
 
 import NewMark from '@/common/components/marks/NewMark.vue';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { gray, indigo, violet } from '@/styles/colors';
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue
index 72a751db81..c4a0931f35 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue
@@ -17,8 +17,8 @@ import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useAuthorizationStore } from '@/store/authorization/authorization-store';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardMainBoardList.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardMainBoardList.vue
index 9f665c8da7..e8f6048068 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardMainBoardList.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardMainBoardList.vue
@@ -16,8 +16,8 @@ import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import DashboardDeleteModal from '@/services/dashboards/components/DashboardDeleteModal.vue';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-bundle-delete-workflow.ts b/apps/web/src/services/dashboards/composables/use-dashboard-bundle-delete-workflow.ts
index 6b5653e68f..8f16a97b7e 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-bundle-delete-workflow.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-bundle-delete-workflow.ts
@@ -6,8 +6,8 @@ import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { useDashboardDeleteMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-delete-mutation';
 import { useDashboardFolderDeleteMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-folder-delete-mutation';
diff --git a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
index 46a69d52f5..3a84d58a21 100644
--- a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
@@ -9,9 +9,9 @@ import {
 } from '@cloudforet/mirinae';
 
 import { useBreadcrumbs } from '@/common/composables/breadcrumbs';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { DASHBOARD_SHARED_ENTRY_POINT } from '@/services/_shared/dashboard/core/constants/dashboard-shared-constant';
 import DashboardDetailLayout from '@/services/_shared/dashboard/dashboard-detail/DashboardDetailLayout.vue';
diff --git a/apps/web/src/services/landing/components/workspace-landing/LandingContents.vue b/apps/web/src/services/landing/components/workspace-landing/LandingContents.vue
index 1073f33bb4..607ca5be57 100644
--- a/apps/web/src/services/landing/components/workspace-landing/LandingContents.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/LandingContents.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core';
 import {
-    computed, onMounted, reactive,
+    computed, reactive,
 } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
@@ -15,9 +15,7 @@ import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-worksp
 import { useUserStore } from '@/store/user/user-store';
 
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
-import { RECENT_TYPE } from '@/common/modules/navigations/type';
+import { useRecentList } from '@/common/modules/user-config/recent/use-recent-list';
 
 import { ADMIN_ADVANCED_ROUTE } from '@/services/advanced/routes/admin/route-constant';
 import LandingGroupWorkspaces from '@/services/landing/components/workspace-landing/landing-group-workspaces/LandingGroupWorkspaces.vue';
@@ -26,9 +24,6 @@ import LandingSearchedWorkspaces from '@/services/landing/components/workspace-l
 
 const userWorkspaceStore = useUserWorkspaceStore();
 const workspaceStoreGetters = userWorkspaceStore.getters;
-const favoriteStore = useFavoriteStore();
-const recentStore = useRecentStore();
-const recentState = recentStore.state;
 
 const router = useRouter();
 const { width } = useWindowSize();
@@ -37,6 +32,9 @@ const userStore = useUserStore();
 
 const { hasReadWriteAccess } = usePageEditableStatus();
 
+/* Recent */
+const { workspaceRecentList } = useRecentList({ limit: 6 });
+
 const storeState = reactive({
     userId: computed<string|undefined>(() => userStore.state.userId),
     isDomainAdmin: computed<boolean>(() => userStore.getters.isDomainAdmin),
@@ -60,13 +58,6 @@ const handleClickButton = () => {
     }).href, '_blank');
 };
 
-onMounted(async () => {
-    await recentStore.fetchRecent({
-        type: RECENT_TYPE.WORKSPACE,
-        limit: 6,
-    });
-    await favoriteStore.fetchWorkspaceFavorite();
-});
 </script>
 
 <template>
@@ -90,7 +81,9 @@ onMounted(async () => {
                       class="workspace-search-bar"
                       @update:value="handleSearch"
             />
-            <landing-recent-visits v-if="recentState.recentMenuList.length > 0 && !state.isSearchMode" />
+            <landing-recent-visits v-if="workspaceRecentList && !state.isSearchMode"
+                                   :recent-list="workspaceRecentList"
+            />
             <p-divider v-if="!state.isSearchMode" />
             <landing-searched-workspaces v-show="state.isSearchMode"
                                          :search-text="state.searchText"
diff --git a/apps/web/src/services/landing/components/workspace-landing/LandingRecentVisits.vue b/apps/web/src/services/landing/components/workspace-landing/LandingRecentVisits.vue
index 0df6497974..878b28be40 100644
--- a/apps/web/src/services/landing/components/workspace-landing/LandingRecentVisits.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/LandingRecentVisits.vue
@@ -15,11 +15,11 @@ import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 import type { RecentConfig } from '@/common/modules/navigations/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { RecentItem } from '@/common/modules/user-config/recent/use-recent-list';
 
 import { workspaceStateFormatter } from '@/services/advanced/composables/refined-table-data';
 import { WORKSPACE_STATE } from '@/services/advanced/constants/workspace-constant';
@@ -28,10 +28,13 @@ import { useUserProfileGetWorkspacesQuery } from '@/services/landing/composables
 import type { WorkspaceBoardSet } from '@/services/landing/type/type';
 import { WORKSPACE_HOME_ROUTE } from '@/services/workspace-home/routes/route-constant';
 
+interface Props {
+    recentList: RecentItem[];
+}
+
+const props = defineProps<Props>();
 
 const userWorkspaceStore = useUserWorkspaceStore();
-const recentStore = useRecentStore();
-const recentState = recentStore.state;
 
 const router = useRouter();
 
@@ -39,7 +42,7 @@ const state = reactive({
     popoverVisible: false,
     selectedPopoverItem: '',
 });
-const recentWorkspace = computed<RecentConfig[]>(() => recentState.recentMenuList.map((i) => ({
+const recentWorkspace = computed<RecentConfig[]>(() => (props.recentList ?? []).map((i) => ({
     itemType: i.data.type,
     workspaceId: i.data.workspace_id,
     itemId: i.data.id,
diff --git a/apps/web/src/services/landing/components/workspace-landing/LandingSearchedWorkspaces.vue b/apps/web/src/services/landing/components/workspace-landing/LandingSearchedWorkspaces.vue
index 72b80d6604..9ec73ed687 100644
--- a/apps/web/src/services/landing/components/workspace-landing/LandingSearchedWorkspaces.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/LandingSearchedWorkspaces.vue
@@ -7,7 +7,7 @@ import type { WorkspaceModel } from '@/api-clients/identity/workspace/schema/mod
 
 import { useUserStore } from '@/store/user/user-store';
 
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
+import { useWorkspaceFavoriteList } from '@/common/modules/user-config/favorite/core/use-workspace-favorite-list';
 
 import LandingWorkspaceBoard from '@/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceBoard.vue';
 import { useUserProfileGetWorkspacesQuery } from '@/services/landing/composables/use-user-profile-get-workspaces-query';
@@ -22,16 +22,17 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
+/* Favorite */
+const { workspaceItems: workspaceFavoriteItems } = useWorkspaceFavoriteList();
+
 const userStore = useUserStore();
 
 const state = reactive({
     isShowAll: false,
     workspaceBoardSets: computed<WorkspaceBoardSet[]>(() => {
         const favoriteOrderList = sortBy(searchedWorkspaceList.value, (workspaceItem) => {
-            const correspondingAItem = favoriteGetters.workspaceItems?.find((item) => item?.itemId === workspaceItem.workspace_id);
-            return correspondingAItem ? favoriteGetters.workspaceItems?.indexOf(correspondingAItem) : Infinity;
+            const correspondingAItem = workspaceFavoriteItems.value?.find((item) => item?.itemId === workspaceItem.workspace_id);
+            return correspondingAItem ? workspaceFavoriteItems.value?.indexOf(correspondingAItem) : Infinity;
         });
         const [active, dormant] = partition(favoriteOrderList, (item) => !item.is_dormant);
 
diff --git a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingGroupWorkspaces.vue b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingGroupWorkspaces.vue
index c713b8cde1..3677eb0a8c 100644
--- a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingGroupWorkspaces.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingGroupWorkspaces.vue
@@ -13,8 +13,7 @@ import { i18n } from '@/translations';
 
 import { useUserStore } from '@/store/user/user-store';
 
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
+import { useWorkspaceFavoriteList } from '@/common/modules/user-config/favorite/core/use-workspace-favorite-list';
 
 import { gray } from '@/styles/colors';
 
@@ -41,12 +40,12 @@ const router = useRouter();
 const landingPageStore = useLandingPageStore();
 const landingPageState = landingPageStore.state;
 const userStore = useUserStore();
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
+
+/* Favorite */
+const { loading: isLoadingWorkspaceFavoriteList, workspaceItems: workspaceFavoriteItems } = useWorkspaceFavoriteList();
 
 const storeState = reactive({
     isDomainAdmin: computed<boolean>(() => userStore.getters.isDomainAdmin),
-    favoriteList: computed<FavoriteItem[]>(() => sortBy(favoriteGetters.workspaceItems as FavoriteItem[], 'label')),
 });
 const state = reactive({
     isShowAll: false,
@@ -58,8 +57,8 @@ const state = reactive({
     }),
     workspaceBoardSets: computed<WorkspaceBoardSet[]>(() => {
         const favoriteOrderList = sortBy(state.selectedGroupWorkspaceList, (workspaceItem) => {
-            const correspondingAItem = storeState.favoriteList?.find((favoriteItem) => favoriteItem?.itemId === workspaceItem.workspace_id);
-            return correspondingAItem ? storeState.favoriteList?.indexOf(correspondingAItem) : Infinity;
+            const correspondingAItem = workspaceFavoriteItems.value?.find((favoriteItem) => favoriteItem?.itemId === workspaceItem.workspace_id);
+            return correspondingAItem ? workspaceFavoriteItems.value?.indexOf(correspondingAItem) : Infinity;
         });
         const [active, dormant] = partition(favoriteOrderList, (item) => !item.is_dormant);
 
@@ -84,7 +83,7 @@ const state = reactive({
         return state.selectedGroupWorkspaceList.length > PAGE_SIZE && state.workspaceBoardSets.length < state.selectedGroupWorkspaceList.length;
     }),
 });
-const isLoading = computed<boolean>(() => isWorkspaceListLoading.value || isWorkspaceListByGroupLoading.value);
+const isLoading = computed<boolean>(() => isWorkspaceListLoading.value || isWorkspaceListByGroupLoading.value || isLoadingWorkspaceFavoriteList.value);
 const showEmptyContents = computed<boolean>(() => {
     if (isLoading.value) return false;
     if (landingPageState.selectedWorkspaceGroupId !== 'all') return false;
diff --git a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceBoard.vue b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceBoard.vue
index 556b99d23c..98fa9ac99a 100644
--- a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceBoard.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceBoard.vue
@@ -16,9 +16,9 @@ import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
diff --git a/apps/web/src/services/project/v1/ProjectLSB.vue b/apps/web/src/services/project/v1/ProjectLSB.vue
index 69d3224730..ce3e9dc77d 100644
--- a/apps/web/src/services/project/v1/ProjectLSB.vue
+++ b/apps/web/src/services/project/v1/ProjectLSB.vue
@@ -20,12 +20,12 @@ import type { ProjectReferenceItem } from '@/store/reference/project-reference-s
 
 import { MENU_ID } from '@/lib/menu/config';
 
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import LSB from '@/common/modules/navigations/lsb/LSB.vue';
 import LSBRouterMenuItem from '@/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue';
 import type { LSBItem, LSBMenu } from '@/common/modules/navigations/lsb/type';
 import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { indigo, peacock } from '@/styles/colors';
 
diff --git a/apps/web/src/services/project/v1/components/ProjectMainDeleteModal.vue b/apps/web/src/services/project/v1/components/ProjectMainDeleteModal.vue
index 4638fa1786..c2a1a1fc86 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainDeleteModal.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainDeleteModal.vue
@@ -17,10 +17,10 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 
diff --git a/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue
index cf3261b267..7534a4e1d2 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue
@@ -13,9 +13,9 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
 import type { ProviderItem, ProviderReferenceMap } from '@/store/reference/provider-reference-store';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { peacock } from '@/styles/colors';
 
diff --git a/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue
index 09e45126a9..d727ae07d0 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue
@@ -8,9 +8,9 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 
 import { i18n } from '@/translations';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { indigo } from '@/styles/colors';
 
diff --git a/apps/web/src/services/project/v1/components/ProjectMainTree.vue b/apps/web/src/services/project/v1/components/ProjectMainTree.vue
index c78b4b006a..827418c619 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainTree.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainTree.vue
@@ -16,10 +16,10 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
 import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import type { Breadcrumb } from '@/common/modules/page-layouts/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { indigo, peacock } from '@/styles/colors';
 
diff --git a/apps/web/src/services/project/v1/composables/use-project-favorite.ts b/apps/web/src/services/project/v1/composables/use-project-favorite.ts
index e30a82cb6b..06d6591660 100644
--- a/apps/web/src/services/project/v1/composables/use-project-favorite.ts
+++ b/apps/web/src/services/project/v1/composables/use-project-favorite.ts
@@ -12,9 +12,9 @@ import {
     convertProjectGroupConfigToReferenceData,
 } from '@/lib/helper/config-data-helper';
 
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { FavoriteItem } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
diff --git a/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue b/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue
index 412de7a156..2a556e36f0 100644
--- a/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue
@@ -30,13 +30,13 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { peacock } from '@/styles/colors';
 
diff --git a/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue b/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue
index ae1b950711..5c5a3af32e 100644
--- a/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue
@@ -27,9 +27,9 @@ import { useGlobalConfigUiAffectsSchema } from '@/lib/config/global-config/compo
 import { MENU_ID } from '@/lib/menu/config';
 
 import { useContentsAccessibility } from '@/common/composables/contents-accessibility';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { BACKGROUND_COLOR } from '@/styles/colorsets';
 
diff --git a/apps/web/src/services/project/v1/pages/ProjectMainPage.vue b/apps/web/src/services/project/v1/pages/ProjectMainPage.vue
index e5fd8050f1..e9d7c0d286 100644
--- a/apps/web/src/services/project/v1/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectMainPage.vue
@@ -19,9 +19,9 @@ import { useUserStore } from '@/store/user/user-store';
 
 import { MENU_ID } from '@/lib/menu/config';
 
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { indigo, peacock } from '@/styles/colors';
 
diff --git a/apps/web/src/services/project/v2/ProjectContainer.vue b/apps/web/src/services/project/v2/ProjectContainer.vue
index 82770e2e54..4c9fb99ae0 100644
--- a/apps/web/src/services/project/v2/ProjectContainer.vue
+++ b/apps/web/src/services/project/v2/ProjectContainer.vue
@@ -7,13 +7,13 @@ import { i18n } from '@/translations';
 
 import { MENU_ID } from '@/lib/menu/config';
 
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import CenteredPageLayout from '@/common/modules/page-layouts/CenteredPageLayout.vue';
 import GeneralPageLayout from '@/common/modules/page-layouts/GeneralPageLayout.vue';
 import type { Breadcrumb } from '@/common/modules/page-layouts/type';
 import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
+import type { FavoriteOptions } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
 import ProjectLSB from '@/services/project/v2/ProjectLSB.vue';
diff --git a/apps/web/src/services/project/v2/ProjectLSB.vue b/apps/web/src/services/project/v2/ProjectLSB.vue
index b5a02d0f2d..2fe3b0e10d 100644
--- a/apps/web/src/services/project/v2/ProjectLSB.vue
+++ b/apps/web/src/services/project/v2/ProjectLSB.vue
@@ -13,12 +13,12 @@ import type { TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-disp
 
 import { i18n } from '@/translations';
 
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { type FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
 import LSBContainer from '@/common/modules/navigations/new-lsb/LSBContainer.vue';
 import LSBDivider from '@/common/modules/navigations/new-lsb/LSBDivider.vue';
 import LSBStarredTree from '@/common/modules/navigations/new-lsb/LSBStarredTree.vue';
 import LSBTitle from '@/common/modules/navigations/new-lsb/LSBTitle.vue';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { type FavoriteItem } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { indigo, peacock } from '@/styles/colors';
 
diff --git a/apps/web/src/services/project/v2/components/ProjectCard.vue b/apps/web/src/services/project/v2/components/ProjectCard.vue
index 95b96fd1f8..3d03549137 100644
--- a/apps/web/src/services/project/v2/components/ProjectCard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectCard.vue
@@ -10,9 +10,9 @@ import type { ProjectType } from '@/api-clients/identity/project/schema/type';
 
 import { useProviderReferenceStore, type ProviderItem } from '@/store/reference/provider-reference-store';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import ProjectActionDropdownButton from '@/services/project/v2/components/ProjectActionDropdownButton.vue';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
diff --git a/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
index d07669d1b4..34126f9a46 100644
--- a/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
@@ -16,10 +16,10 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupCard.vue b/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
index 72c52a21b1..0545bf040c 100644
--- a/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
@@ -8,9 +8,9 @@ import {
 } from '@cloudforet/mirinae';
 
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { useFavoriteStore } from '@/common/modules/user-config/favorite/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { indigo } from '@/styles/colors';
 
diff --git a/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue b/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
index 31ed111559..77dea23322 100644
--- a/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
+++ b/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
@@ -6,8 +6,8 @@ import {
 } from '@cloudforet/mirinae';
 import type { TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
 
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import LSBItem from '@/common/modules/navigations/new-lsb/LSBItem.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
diff --git a/apps/web/src/services/project/v2/components/ProjectLSBTree.vue b/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
index ab1ef8a606..a1374a761b 100644
--- a/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
+++ b/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
@@ -18,8 +18,8 @@ import {
 import { PTreeNode } from '@cloudforet/mirinae';
 import type { TreeNodeIcon, TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { indigo } from '@/styles/colors';
 
diff --git a/apps/web/src/services/project/v2/composables/use-project-starred-tree.ts b/apps/web/src/services/project/v2/composables/use-project-starred-tree.ts
index b2a3725c0c..68b2fda092 100644
--- a/apps/web/src/services/project/v2/composables/use-project-starred-tree.ts
+++ b/apps/web/src/services/project/v2/composables/use-project-starred-tree.ts
@@ -5,9 +5,9 @@ import type { TreeNodeIcon, TreeNodeRoutePredicate } from '@cloudforet/mirinae/t
 
 import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
 
-import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
+import type { FavoriteItem } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { indigo } from '@/styles/colors';
 
diff --git a/apps/web/src/services/workspace-home/components/UserConfigRecent.vue b/apps/web/src/services/workspace-home/components/UserConfigRecent.vue
index d8c18ec744..60cfbaecfb 100644
--- a/apps/web/src/services/workspace-home/components/UserConfigRecent.vue
+++ b/apps/web/src/services/workspace-home/components/UserConfigRecent.vue
@@ -1,94 +1,90 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
 
 import { PFieldTitle } from '@cloudforet/mirinae';
 
-import type { UserConfigModel } from '@/api-clients/config/user-config/schema/model';
-import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
-
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
 import type {
     ReferenceData,
     ConfigData,
 } from '@/lib/helper/config-data-helper';
-import {
-    convertCostAnalysisConfigToReferenceData,
-    convertDashboardConfigToReferenceData,
-    convertMenuConfigToReferenceData,
-    convertProjectConfigToReferenceData,
-    convertProjectGroupConfigToReferenceData,
-} from '@/lib/helper/config-data-helper';
-import { useAllMenuList } from '@/lib/menu/use-all-menu-list';
 
-import { useGlobalDashboardQuery } from '@/common/composables/global-dashboard/use-global-dashboard-query';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
+
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
+import { useRecentList } from '@/common/modules/user-config/recent/use-recent-list';
+import { useConvertReferencedConfigData } from '@/common/modules/user-config/shared/use-convert-referenced-config-data';
 
 import UserConfigsItem from '@/services/workspace-home/components/UserConfigsItem.vue';
-import { useWorkspaceHomePageStore } from '@/services/workspace-home/store/workspace-home-page-store';
 
-const route = useRoute();
-const router = useRouter();
 
 const userWorkspaceStore = useUserWorkspaceStore();
 const userWorkspaceStoreGetters = userWorkspaceStore.getters;
-const gnbStore = useGnbStore();
-const gnbStoreGetters = gnbStore.getters;
-const allReferenceStore = useAllReferenceStore();
-const allReferenceGetters = allReferenceStore.getters;
-const workspaceHomePageStore = useWorkspaceHomePageStore();
-const workspaceHomePageState = workspaceHomePageStore.state;
-const { getAllMenuList } = useAllMenuList();
+const currentWorkspaceId = computed<string|undefined>(() => userWorkspaceStoreGetters.currentWorkspaceId);
 
-/* Query */
-const {
-    publicDashboardListQuery,
-    privateDashboardListQuery,
-} = useGlobalDashboardQuery();
-
-const dashboardList = computed(() => [...(publicDashboardListQuery?.data?.value ?? []), ...(privateDashboardListQuery?.data?.value ?? [])]);
-const storeState = reactive({
-    currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStoreGetters.currentWorkspaceId),
-    costQuerySets: computed<CostQuerySetModel[]>(() => gnbStoreGetters.costQuerySets),
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceGetters.costDataSource),
-    projects: computed<ProjectReferenceMap>(() => allReferenceGetters.project),
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceGetters.projectGroup),
-    recentList: computed<UserConfigModel[]>(() => workspaceHomePageState.recentList),
+/* Recent */
+const recentConfigData = useRecentList();
+const convertedRecentConfigData = useConvertReferencedConfigData({
+    dashboardConfigList: computed(() => (recentConfigData.dashboardRecentList.value ?? []).map((i) => ({
+        ...i.data,
+        itemType: i.data.type,
+        itemId: i.data.id,
+        workspaceId: currentWorkspaceId.value || '',
+    }))),
+    projectConfigList: computed(() => (recentConfigData.projectRecentList.value ?? []).map((i) => ({
+        ...i.data,
+        itemType: i.data.type,
+        itemId: i.data.id,
+        workspaceId: currentWorkspaceId.value || '',
+    }))),
+    projectGroupConfigList: computed(() => (recentConfigData.projectGroupRecentList.value ?? []).map((i) => ({
+        ...i.data,
+        itemType: i.data.type,
+        itemId: i.data.id,
+        workspaceId: currentWorkspaceId.value || '',
+    }))),
+    costQuerySetConfigList: computed(() => (recentConfigData.costAnalysisRecentList.value ?? []).map((i) => ({
+        ...i.data,
+        itemType: i.data.type,
+        itemId: i.data.id,
+        workspaceId: currentWorkspaceId.value || '',
+    }))),
+    allConfigList: computed(() => (recentConfigData.menuRecentList.value ?? []).map((i) => ({
+        ...i.data,
+        itemType: i.data.type,
+        itemId: i.data.id,
+        workspaceId: currentWorkspaceId.value || '',
+    }))),
 });
+
+
 const state = reactive({
-    recentList: computed<ReferenceData[]>(() => {
-        const _recentList = storeState.recentList.map((i) => convertRecentToReferenceData({
+    recentList: computed<(ReferenceData | undefined)[]>(() => {
+        const _recentList = (recentConfigData.menuRecentList.value ?? []).map((i) => convertRecentToReferenceData({
             ...i.data,
             itemType: i.data.type,
             itemId: i.data.id,
-            workspaceId: storeState.currentWorkspaceId || '',
+            workspaceId: currentWorkspaceId.value || '',
         }));
-        return _recentList.filter((i) => i && !i?.isDeleted).splice(0, 10);
+        return _recentList.filter((i) => !!i && !i?.isDeleted).splice(0, 10);
     }),
 });
 
-const convertRecentToReferenceData = (recentConfig: ConfigData): ReferenceData => {
+const convertRecentToReferenceData = (recentConfig: ConfigData): ReferenceData|undefined => {
     const { itemType } = recentConfig;
     if (itemType === RECENT_TYPE.DASHBOARD) {
-        return convertDashboardConfigToReferenceData([recentConfig], dashboardList.value)[0];
+        return convertedRecentConfigData.convertedDashboard.value.find((d) => d.itemId === recentConfig.id);
     }
     if (itemType === RECENT_TYPE.PROJECT) {
-        return convertProjectConfigToReferenceData([recentConfig], storeState.projects)[0];
+        return convertedRecentConfigData.convertedProject.value.find((d) => d.itemId === recentConfig.id);
     }
     if (itemType === RECENT_TYPE.PROJECT_GROUP) {
-        return convertProjectGroupConfigToReferenceData([recentConfig], storeState.projectGroups)[0];
+        return convertedRecentConfigData.convertedProjectGroup.value.find((d) => d.itemId === recentConfig.id);
     }
     if (itemType === RECENT_TYPE.COST_ANALYSIS) {
-        return convertCostAnalysisConfigToReferenceData([recentConfig], storeState.costQuerySets, storeState.costDataSource)[0];
+        return convertedRecentConfigData.convertedCostQuerySet.value.find((d) => d.itemId === recentConfig.id);
     }
-    const allMenuList = getAllMenuList(route, router);
-    return convertMenuConfigToReferenceData([recentConfig], allMenuList)[0];
+    return convertedRecentConfigData.convertedMenu.value.find((d) => d.itemId === recentConfig.id);
 };
 </script>
 
diff --git a/apps/web/src/services/workspace-home/components/UserConfigStarred.vue b/apps/web/src/services/workspace-home/components/UserConfigStarred.vue
index 2f0477fe9a..911e6d501b 100644
--- a/apps/web/src/services/workspace-home/components/UserConfigStarred.vue
+++ b/apps/web/src/services/workspace-home/components/UserConfigStarred.vue
@@ -9,22 +9,23 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 
 import { i18n } from '@/translations';
 
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import { useFavoriteList } from '@/common/modules/user-config/favorite/core/use-favorite-list';
+import type { FavoriteItem } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import UserConfigsItem from '@/services/workspace-home/components/UserConfigsItem.vue';
 import { STARRED_SERVICE_ITEMS } from '@/services/workspace-home/constants/workspace-home-constant';
 import { useWorkspaceHomePageStore } from '@/services/workspace-home/store/workspace-home-page-store';
 import type { StarredServiceItem } from '@/services/workspace-home/types/workspace-home-type';
 
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
 const workspaceHomePageStore = useWorkspaceHomePageStore();
 const workspaceHomePageState = workspaceHomePageStore.state;
 
 const { width } = useWindowSize();
 
+/* Favorite */
+const favoriteData = useFavoriteList();
+
 const storeState = reactive({
     favoriteMenuList: computed<FavoriteItem[]>(() => workspaceHomePageState.favoriteMenuList),
 });
@@ -43,27 +44,27 @@ const dropdownState = reactive({
         const results: SelectDropdownMenuItem[] = [{
             name: 'All', label: i18n.t('HOME.CONFIG_STARRED_ALL'), type: 'item',
         }];
-        if (favoriteGetters.menuItems.length) {
+        if (favoriteData.menuItems.value?.length) {
             results.push({
                 name: FAVORITE_TYPE.MENU, label: i18n.t('COMMON.GNB.FAVORITES.MENU'), type: 'item',
             });
         }
-        if (favoriteGetters.dashboardItems.length) {
+        if (favoriteData.dashboardItems.value?.length) {
             results.push({
                 name: FAVORITE_TYPE.DASHBOARD, label: i18n.t('MENU.DASHBOARDS'), type: 'item',
             });
         }
-        if (favoriteGetters.projectItems.length) {
+        if (favoriteData.projectItems.value?.length) {
             results.push({
                 name: FAVORITE_TYPE.PROJECT, label: i18n.t('MENU.PROJECT'), type: 'item',
             });
         }
-        if (favoriteGetters.costAnalysisItems.length) {
+        if (favoriteData.costAnalysisItems.value?.length) {
             results.push({
                 name: FAVORITE_TYPE.COST_ANALYSIS, label: i18n.t('MENU.COST_EXPLORER_COST_ANALYSIS'), type: 'item',
             });
         }
-        if (favoriteGetters.serviceItems.length) {
+        if (favoriteData.serviceItems.value?.length) {
             results.push({
                 name: FAVORITE_TYPE.SERVICE, label: i18n.t('MENU.ALERT_MANAGER_SERVICE'), type: 'item',
             });
diff --git a/apps/web/src/services/workspace-home/components/UserConfigsItem.vue b/apps/web/src/services/workspace-home/components/UserConfigsItem.vue
index ee4648652d..9fa6bc2362 100644
--- a/apps/web/src/services/workspace-home/components/UserConfigsItem.vue
+++ b/apps/web/src/services/workspace-home/components/UserConfigsItem.vue
@@ -11,8 +11,8 @@ import { getParsedKeysWithManagedCostQueryFavoriteKey } from '@/lib/helper/confi
 import type { MenuInfo } from '@/lib/menu/config';
 import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { gray, indigo, peacock } from '@/styles/colors';
 
diff --git a/apps/web/src/services/workspace-home/components/WorkspaceInfo.vue b/apps/web/src/services/workspace-home/components/WorkspaceInfo.vue
index 27c4a98501..1457179096 100644
--- a/apps/web/src/services/workspace-home/components/WorkspaceInfo.vue
+++ b/apps/web/src/services/workspace-home/components/WorkspaceInfo.vue
@@ -27,9 +27,9 @@ import { useAuthorizationStore } from '@/store/authorization/authorization-store
 
 import { MENU_ID } from '@/lib/menu/config';
 
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
+import FavoriteButton from '@/common/modules/user-config/favorite/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
diff --git a/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts b/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts
index 7c4e2a0bbf..c1f282cb5b 100644
--- a/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts
+++ b/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts
@@ -18,9 +18,9 @@ import { MENU_ID } from '@/lib/menu/config';
 import { useBookmarkStore } from '@/common/components/bookmark/store/bookmark-store';
 import type { BookmarkItem } from '@/common/components/bookmark/type/type';
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
+import type { FavoriteItem } from '@/common/modules/user-config/favorite/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/user-config/favorite/favorite-button/type';
 
 import type {
     BookmarkType,
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index 8851929344..f1fa49fdc7 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -25992,6 +25992,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>ALL_METRIC</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description/>
+                                        <comment/>
+                                        <default_text/>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ja-JP</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ko-KR</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>ALL_PROJECTS</name>
                                         <definition_loaded>false</definition_loaded>
@@ -34548,7 +34569,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>UPDATE_DATA_TALBE_INVALID_SUCCESS</name>
+                                                <name>UPDATE_DATA_TABLE_INVALID_WARNING</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -34569,7 +34590,7 @@
                                                 </translations>
                                             </concept_node>
                                             <concept_node>
-                                                <name>UPDATE_DATA_TABLE_INVALID_WARNING</name>
+                                                <name>UPDATE_DATA_TALBE_INVALID_SUCCESS</name>
                                                 <definition_loaded>false</definition_loaded>
                                                 <description/>
                                                 <comment/>
@@ -59499,6 +59520,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>PASSWORD_VALIDATION_INVALID</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description/>
+                                        <comment/>
+                                        <default_text/>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ja-JP</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ko-KR</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>REQUIRED_FIELD</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index a9c7b893bc..901f292cc3 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -1383,6 +1383,7 @@
 				"ALL_COST_ANALYSIS": "All Cost Analysis",
 				"ALL_DASHBOARD": "All Dashboards",
 				"ALL_MENU": "All Menu",
+				"ALL_METRIC": "All Metric Explorer",
 				"ALL_PROJECTS": "Project",
 				"ALL_SECURITY": "All Security",
 				"ALL_SERVICE": "All Service",
@@ -1867,8 +1868,8 @@
 					"TRANSFORMATIONS": "Transformations",
 					"TYPE_DATA_FIELD": "Data Field",
 					"TYPE_LABEL_FIELD": "Label Field",
-					"UPDATE_DATA_TALBE_INVALID_SUCCESS": "Changes have been successfully applied.",
 					"UPDATE_DATA_TABLE_INVALID_WARNING": "Unable to apply changes. Please check the form.",
+					"UPDATE_DATA_TALBE_INVALID_SUCCESS": "Changes have been successfully applied.",
 					"UPDATE_DATA_TALBE_JOIN_FAIL_WARNING": "'{first_data}' cannot be joined with '{second_data}' because the two data tables have one or more identical data fields.",
 					"VALUE": "Value",
 					"VALUE_MAPPING_DESC": "Transform field values based on conditions."
@@ -3226,8 +3227,8 @@
 				"NO_WORKSPACE": "No Workspace",
 				"OWNER": "Owner",
 				"PASSWORD": "Password",
-				"PASSWORD_VALIDATION_INVALID": "Password must be at least 8 characters with lowercase, uppercase, and number.",
 				"PASSWORD_SEND_LINK": "Send new local users a password reset link",
+				"PASSWORD_VALIDATION_INVALID": "Password must be at least 8 characters with lowercase, uppercase, and number.",
 				"REQUIRED_FIELD": "Required field",
 				"ROLE_PLACEHOLDER": "Select a workspace role",
 				"ROLE_TITLE": "Invite with a role:",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 931d92c7ed..12d68a08a5 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -1383,6 +1383,7 @@
 				"ALL_COST_ANALYSIS": "すべてのコスト分析",
 				"ALL_DASHBOARD": "すべてのダッシュボード",
 				"ALL_MENU": "すべてのメニュー",
+				"ALL_METRIC": "すべてのメトリック探索",
 				"ALL_PROJECTS": "プロジェクト",
 				"ALL_SECURITY": "オールセキュリティ",
 				"ALL_SERVICE": "すべてのサービス",
@@ -1867,8 +1868,8 @@
 					"TRANSFORMATIONS": "変換",
 					"TYPE_DATA_FIELD": "データフィールド",
 					"TYPE_LABEL_FIELD": "ラベルフィールド",
-					"UPDATE_DATA_TALBE_INVALID_SUCCESS": "変更が正常に適用されました。",
 					"UPDATE_DATA_TABLE_INVALID_WARNING": "変更を適用できません。フォームを確認してください。",
+					"UPDATE_DATA_TALBE_INVALID_SUCCESS": "変更が正常に適用されました。",
 					"UPDATE_DATA_TALBE_JOIN_FAIL_WARNING": "'{first_data}' と '{second_data}' を結合できません。両方のデータテーブルに同一のデータフィールドが1つ以上あります。",
 					"VALUE": "値",
 					"VALUE_MAPPING_DESC": "条件に基づいてフィールド値を変換します。"
@@ -3226,8 +3227,8 @@
 				"NO_WORKSPACE": "ワークスペースなし",
 				"OWNER": "オーナー",
 				"PASSWORD": "パスワード",
-				"PASSWORD_VALIDATION_INVALID": "パスワードは8文字以上で、小文字、大文字、数字を含む必要があります。",
 				"PASSWORD_SEND_LINK": "ローカルユーザーにパスワードリセットメールを送信",
+				"PASSWORD_VALIDATION_INVALID": "パスワードは8文字以上で、小文字、大文字、数字を含む必要があります。",
 				"REQUIRED_FIELD": "該当する情報を入力してください。",
 				"ROLE_PLACEHOLDER": "ワークスペースアクセスロールを選択",
 				"ROLE_TITLE": "この役割で招待",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index e83c2aba0c..b400351aa9 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -1383,6 +1383,7 @@
 				"ALL_COST_ANALYSIS": "모든 비용 분석",
 				"ALL_DASHBOARD": "모든 대시보드",
 				"ALL_MENU": "모든 메뉴",
+				"ALL_METRIC": "모든 메트릭 분석",
 				"ALL_PROJECTS": "프로젝트",
 				"ALL_SECURITY": "보안 전체",
 				"ALL_SERVICE": "전체 서비스",
@@ -1867,8 +1868,8 @@
 					"TRANSFORMATIONS": "변환",
 					"TYPE_DATA_FIELD": "데이터 필드",
 					"TYPE_LABEL_FIELD": "레이블 필드",
-					"UPDATE_DATA_TALBE_INVALID_SUCCESS": "변경 사항 반영 완료",
 					"UPDATE_DATA_TABLE_INVALID_WARNING": "변경 사항 반영 실패. 입력 폼을 다시 한번 확인해 주세요. ",
+					"UPDATE_DATA_TALBE_INVALID_SUCCESS": "변경 사항 반영 완료",
 					"UPDATE_DATA_TALBE_JOIN_FAIL_WARNING": "선택한 '{first_data}', '{second_data}' 두 데이터는 한 개 이상의 동일한 데이터 필드가 있어 Join을 수행할 수 없습니다. ",
 					"VALUE": "값 ",
 					"VALUE_MAPPING_DESC": "조건에 따라 필드 값을 변환합니다."
@@ -3226,8 +3227,8 @@
 				"NO_WORKSPACE": "워크스페이스 없음",
 				"OWNER": "소유자",
 				"PASSWORD": "비밀번호",
-				"PASSWORD_VALIDATION_INVALID": "비밀번호는 8자 이상, 소문자, 대문자, 숫자를 포함해야 합니다.",
 				"PASSWORD_SEND_LINK": "로컬 사용자에게 비밀번호 재설정 이메일 발송",
+				"PASSWORD_VALIDATION_INVALID": "비밀번호는 8자 이상, 소문자, 대문자, 숫자를 포함해야 합니다.",
 				"REQUIRED_FIELD": "해당 정보를 입력해주세요.",
 				"ROLE_PLACEHOLDER": "워크스페이스 접근 역할(Role) 선택",
 				"ROLE_TITLE": "이 역할(Role)로 초대: ",