From ee75237c2a9f03dc756bb7aed05db05947764c52 Mon Sep 17 00:00:00 2001
From: nayeongkim <nayeongkim@megazone.com>
Date: Tue, 10 Dec 2024 11:30:40 +0900
Subject: [PATCH] feat: create page editable status custom hook

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../composables/page-editable-status/index.ts | 18 +++++
 .../components/BookmarkDetailContainer.vue    | 24 +-----
 .../BookmarkManagementDetailTable.vue         | 23 +-----
 .../components/WorkspaceGroupTabGroupUser.vue | 20 +----
 .../components/WorkspaceGroupTabWorkspace.vue | 19 +----
 .../pages/admin/AdminBookmarkPage.vue         | 26 +------
 .../AdminDomainSettingsAppearancePage.vue     | 30 +------
 ...nSettingsAutoDormancyConfigurationPage.vue | 26 +------
 ...minDomainSettingsDomainInformationPage.vue | 26 +------
 .../pages/admin/AdminWorkspaceGroupPage.vue   | 21 +----
 .../pages/admin/AdminWorkspacesPage.vue       | 26 +------
 .../alert-manager/pages/AlertDetailPage.vue   | 27 +------
 .../pages/EscalationPolicyPage.vue            | 25 +-----
 .../CloudServiceHistoryDetailNoteTab.vue      | 28 +------
 .../components/CollectorMainContents.vue      | 23 +-----
 .../components/MetricExplorerHeader.vue       | 22 +-----
 .../components/MetricExplorerLSBMetric.vue    | 23 +-----
 .../pages/CollectorDetailPage.vue             | 27 +------
 .../pages/ServiceAccountDetailPage.vue        | 24 +-----
 .../pages/ServiceAccountPage.vue              | 19 +----
 .../pages/admin/AdminCollectorDetailPage.vue  | 32 +-------
 .../components/BudgetDetailHeading.vue        | 23 +-----
 .../components/CostAnalysisHeader.vue         | 24 +-----
 .../components/CostAnalysisQuerySection.vue   | 25 +-----
 .../components/DataSourceManagementTabs.vue   | 25 +-----
 .../cost-explorer/pages/BudgetMainPage.vue    | 22 +-----
 .../cost-explorer/pages/CostReportPage.vue    | 28 +------
 ...tingsAnomalyDetectionConfigurationPage.vue | 78 +++++++------------
 .../pages/admin/AdminBudgetMainPage.vue       | 27 +------
 .../src/services/dashboards/DashboardsLSB.vue | 16 +---
 .../dashboards/pages/DashboardsMainPage.vue   | 20 +----
 .../src/services/iam/pages/AppMainPage.vue    | 24 +-----
 .../src/services/iam/pages/UserMainPage.vue   | 23 +-----
 .../iam/pages/admin/AdminRolePage.vue         | 29 +------
 .../pages/admin/AdminNoticeDetailPage.vue     | 23 +-----
 .../info/pages/admin/AdminNoticeMainPage.vue  | 22 +-----
 .../components/DomainLandingStartBanner.vue   | 17 +---
 .../workspace-landing/LandingContents.vue     | 24 +-----
 38 files changed, 141 insertions(+), 818 deletions(-)
 create mode 100644 apps/web/src/common/composables/page-editable-status/index.ts

diff --git a/apps/web/src/common/composables/page-editable-status/index.ts b/apps/web/src/common/composables/page-editable-status/index.ts
new file mode 100644
index 0000000000..ccf767d09a
--- /dev/null
+++ b/apps/web/src/common/composables/page-editable-status/index.ts
@@ -0,0 +1,18 @@
+import { computed, reactive } from 'vue';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import type { PageAccessMap } from '@/lib/access-control/config';
+
+import { useCurrentMenuId } from '@/common/composables/current-menu-id';
+
+export const usePageEditableStatus = (): boolean|undefined => {
+    const userStore = useUserStore();
+    const userGetters = userStore.getters;
+
+    const storeState = reactive({
+        pageAccessPermissionMap: computed<PageAccessMap>(() => userGetters.pageAccessPermissionMap),
+    });
+
+    return storeState.pageAccessPermissionMap[useCurrentMenuId()]?.write;
+};
diff --git a/apps/web/src/services/advanced/components/BookmarkDetailContainer.vue b/apps/web/src/services/advanced/components/BookmarkDetailContainer.vue
index dbec189d9e..811035b1ab 100644
--- a/apps/web/src/services/advanced/components/BookmarkDetailContainer.vue
+++ b/apps/web/src/services/advanced/components/BookmarkDetailContainer.vue
@@ -6,7 +6,7 @@ import {
 import type { TranslateResult } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router/composables';
 
-import { at, clone } from 'lodash';
+import { at } from 'lodash';
 
 import {
     PHeading, PButton, PContextMenu, PI, PIconButton, PStatus, PHeadingLayout,
@@ -18,15 +18,10 @@ import { i18n } from '@/translations';
 
 import { makeAdminRouteName } from '@/router/helpers/route-helper';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
-
 import { BOOKMARK_MODAL_TYPE } from '@/common/components/bookmark/constant/constant';
 import { useBookmarkStore } from '@/common/components/bookmark/store/bookmark-store';
 import type { BookmarkModalType, BookmarkItem } from '@/common/components/bookmark/type/type';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
 import { gray } from '@/styles/colors';
@@ -35,11 +30,8 @@ import { getWorkspaceInfo, workspaceStateFormatter } from '@/services/advanced/c
 import { WORKSPACE_STATE } from '@/services/advanced/constants/workspace-constant';
 import { ADVANCED_ROUTE } from '@/services/advanced/routes/route-constant';
 import { useBookmarkPageStore } from '@/services/advanced/store/bookmark-page-store';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { WORKSPACE_HOME_ROUTE } from '@/services/workspace-home/routes/route-constant';
 
-
-const userStore = useUserStore();
 const bookmarkStore = useBookmarkStore();
 const bookmarkState = bookmarkStore.state;
 const bookmarkPageStore = useBookmarkPageStore();
@@ -56,7 +48,6 @@ const storeState = reactive({
     selectedIndices: computed<number[]>(() => bookmarkPageState.selectedIndices),
     bookmarkFolderList: computed<BookmarkItem[]>(() => bookmarkPageState.bookmarkFolderList),
     bookmarkList: computed<BookmarkItem[]>(() => bookmarkPageGetters.bookmarkList),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
     visibleMenu: false,
@@ -83,16 +74,7 @@ const state = reactive({
         return state.workspaceInfo?.name || '';
     }),
     workspaceInfo: computed<WorkspaceModel|undefined>(() => getWorkspaceInfo(state.group, storeState.workspaceList)),
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const hideMenu = () => {
diff --git a/apps/web/src/services/advanced/components/BookmarkManagementDetailTable.vue b/apps/web/src/services/advanced/components/BookmarkManagementDetailTable.vue
index c9ab3362b1..c8043a2e15 100644
--- a/apps/web/src/services/advanced/components/BookmarkManagementDetailTable.vue
+++ b/apps/web/src/services/advanced/components/BookmarkManagementDetailTable.vue
@@ -2,8 +2,6 @@
 import { computed, reactive, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
 
-import { clone } from 'lodash';
-
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import {
     PToolboxTable, PLazyImg, PI, PDataLoader, PSelectStatus, PSelectDropdown,
@@ -20,15 +18,10 @@ import { i18n } from '@/translations';
 
 import { makeAdminRouteName } from '@/router/helpers/route-helper';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
-
 import { BOOKMARK_MODAL_TYPE } from '@/common/components/bookmark/constant/constant';
 import { useBookmarkStore } from '@/common/components/bookmark/store/bookmark-store';
 import type { BookmarkItem } from '@/common/components/bookmark/type/type';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import { gray } from '@/styles/colors';
 
@@ -36,13 +29,11 @@ import { makeSearchQueryTagsHandler, makeValueHandler } from '@/services/advance
 import { BOOKMARK_TYPE, PageSizeOptions } from '@/services/advanced/constants/bookmark-constant';
 import { ADVANCED_ROUTE } from '@/services/advanced/routes/route-constant';
 import { useBookmarkPageStore } from '@/services/advanced/store/bookmark-page-store';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 const bookmarkStore = useBookmarkStore();
 const bookmarkPageStore = useBookmarkPageStore();
 const bookmarkPageState = bookmarkPageStore.state;
 const bookmarkPageGetters = bookmarkPageStore.getters;
-const userStore = useUserStore();
 
 const route = useRoute();
 const router = useRouter();
@@ -57,21 +48,11 @@ const storeState = reactive({
     loading: computed<boolean>(() => bookmarkPageState.loading),
     selectedType: computed<string>(() => bookmarkPageState.selectedType),
     searchFilter: computed<ConsoleFilter[]>(() => bookmarkPageState.searchFilter),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
     group: computed<string>(() => route.params.group),
     folder: computed<string>(() => route.params.folder),
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 const tableState = reactive({
     fields: computed(() => [
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue b/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
index b78a120a35..888bcd4917 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
@@ -2,9 +2,6 @@
 import {
     reactive, watch, onUnmounted, computed,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
@@ -21,12 +18,10 @@ import type { WorkspaceGroupUpdateRoleParameters } from '@/schema/identity/works
 import type { WorkspaceUser } from '@/schema/identity/workspace-group/model';
 import { i18n } from '@/translations';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import { useRoleFormatter, groupUserStateFormatter } from '@/services/advanced/composables/refined-table-data';
 import { useSelectDropDownList } from '@/services/advanced/composables/use-select-drop-down-list';
@@ -37,22 +32,11 @@ const workspaceGroupPageStore = useWorkspaceGroupPageStore();
 const workspaceGroupPageState = workspaceGroupPageStore.state;
 const userTabState = workspaceGroupPageStore.userTabState;
 const workspaceGroupPageGetters = workspaceGroupPageStore.getters;
-const userStore = useUserStore();
-
-const route = useRoute();
 
 const emit = defineEmits<{(e: 'refresh', payload: { isGroupUser?: boolean, isWorkspace?: boolean }): void; }>();
 
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        return closestRoute?.meta?.menuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 const tableState = reactive({
     fields: computed<DataTableFieldType[]>(() => {
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue b/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
index 703f4741f1..f6e7b72ad2 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
@@ -2,10 +2,8 @@
 import {
     computed, onMounted, reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import dayjs from 'dayjs';
-import { clone } from 'lodash';
 
 import {
     PButton, PHeading, PI, PLink, PStatus, PToolboxTable, PTooltip, PHeadingLayout,
@@ -22,8 +20,7 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { WorkspaceReferenceMap } from '@/store/reference/workspace-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
 import { gray } from '@/styles/colors';
@@ -35,7 +32,6 @@ import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-c
 import { IAM_ROUTE } from '@/services/iam/routes/route-constant';
 import { WORKSPACE_HOME_ROUTE } from '@/services/workspace-home/routes/route-constant';
 
-
 const workspaceGroupPageStore = useWorkspaceGroupPageStore();
 const workspaceGroupPageState = workspaceGroupPageStore.state;
 const workspaceTabState = workspaceGroupPageStore.workspaceTabState;
@@ -43,23 +39,12 @@ const workspaceGroupPageGetters = workspaceGroupPageStore.getters;
 const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
 
-const route = useRoute();
-
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
-
 interface WorkspaceTableItem extends WorkspaceModel {
     remove_button: WorkspaceModel;
 }
 
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        return closestRoute?.meta?.menuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     currency: computed<Currency|undefined>(() => workspaceGroupPageGetters.currency),
 });
 const tableState = reactive({
diff --git a/apps/web/src/services/advanced/pages/admin/AdminBookmarkPage.vue b/apps/web/src/services/advanced/pages/admin/AdminBookmarkPage.vue
index 62599bc5a7..2445f6e040 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminBookmarkPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminBookmarkPage.vue
@@ -3,9 +3,8 @@ import { vOnClickOutside } from '@vueuse/components';
 import {
     computed, reactive,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
-import { at, clone } from 'lodash';
+import { at } from 'lodash';
 
 import {
     PHeading, PButton, PContextMenu, PHeadingLayout,
@@ -14,28 +13,19 @@ import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/typ
 
 import { i18n } from '@/translations';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
-
 import { BOOKMARK_MODAL_TYPE } from '@/common/components/bookmark/constant/constant';
 import { useBookmarkStore } from '@/common/components/bookmark/store/bookmark-store';
 import type { BookmarkModalType, BookmarkItem } from '@/common/components/bookmark/type/type';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import BookmarkManagementTable from '@/services/advanced/components/BookmarkManagementTable.vue';
 import { useBookmarkPageStore } from '@/services/advanced/store/bookmark-page-store';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 const bookmarkStore = useBookmarkStore();
 const bookmarkState = bookmarkStore.state;
 const bookmarkPageStore = useBookmarkPageStore();
 const bookmarkPageState = bookmarkPageStore.state;
 const bookmarkPageGetters = bookmarkPageStore.getters;
-const userStore = useUserStore();
-
-const route = useRoute();
 
 const storeState = reactive({
     modalType: computed<BookmarkModalType|undefined>(() => bookmarkState.modal.type),
@@ -43,7 +33,6 @@ const storeState = reactive({
     bookmarkFolderList: computed<BookmarkItem[]>(() => bookmarkPageState.bookmarkFolderList),
     bookmarkList: computed<BookmarkItem[]>(() => bookmarkPageGetters.bookmarkList),
     selectedIndices: computed<number[]>(() => bookmarkPageGetters.selectedIndices),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
     visibleMenu: false,
@@ -57,16 +46,7 @@ const state = reactive({
             name: BOOKMARK_MODAL_TYPE.FOLDER,
         },
     ])),
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const hideMenu = () => {
diff --git a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAppearancePage.vue b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAppearancePage.vue
index 03742c58fa..d16345bdfc 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAppearancePage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAppearancePage.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import {
     PPaneLayout, PFieldTitle, PTextInput, PButton,
@@ -11,27 +9,14 @@ import {
 import { i18n } from '@/translations';
 
 import { usePreferencesStore } from '@/store/preferences/preferences-store';
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 const router = useRouter();
 const domainConfigStore = usePreferencesStore();
 const domainConfigGetters = domainConfigStore.getters;
-const userStore = useUserStore();
 
-const route = useRoute();
-
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
     isChanged: computed<boolean>(() => {
         if ([state.wordtypeLogoUrl, state.symbolFaviconUrl, state.loginPageImageUrl, state.displayName,
@@ -46,16 +31,7 @@ const state = reactive({
     wordtypeLogoUrl: undefined as string | undefined,
     symbolFaviconUrl: undefined as string | undefined,
     loginPageImageUrl: undefined as string | undefined,
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* Event */
diff --git a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue
index 54b85189cd..0ae5440c66 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue
@@ -2,9 +2,7 @@
 import {
     computed, onMounted, reactive, watch,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
@@ -25,27 +23,18 @@ import { makeAdminRouteName } from '@/router/helpers/route-helper';
 import { CURRENCY_SYMBOL } from '@/store/display/constant';
 import type { Currency } from '@/store/display/type';
 import { DOMAIN_CONFIG_NAMES } from '@/store/domain/constant';
-import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import type { DormancyConfig } from '@/services/advanced/types/preferences-type';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
-
 const router = useRouter();
-const route = useRoute();
 
-const userStore = useUserStore();
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
     currency: undefined as Currency|undefined,
     toggleText: computed<string>(() => (state.statusToggle
@@ -62,16 +51,7 @@ const state = reactive({
     }),
     statusToggle: false,
     checkbox: false,
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const {
diff --git a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsDomainInformationPage.vue b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsDomainInformationPage.vue
index ea9dacbd6d..8998b6631b 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsDomainInformationPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsDomainInformationPage.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
-import { clone, map } from 'lodash';
+import { map } from 'lodash';
 
 import {
     PPaneLayout, PFieldTitle, PButton, PSelectDropdown, PCopyButton,
@@ -15,30 +14,20 @@ import { useDomainStore } from '@/store/domain/domain-store';
 import { usePreferencesStore } from '@/store/preferences/preferences-store';
 import { languages, timezoneList } from '@/store/user/constant';
 import type { LanguageCode } from '@/store/user/type';
-import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 const domainConfigStore = usePreferencesStore();
 const domainConfigGetters = domainConfigStore.getters;
 const domainStore = useDomainStore();
-const userStore = useUserStore();
-
-const route = useRoute();
 
 const storeState = reactive({
     domainId: computed<string>(() => domainStore.state.domainId),
     domainName: computed<string>(() => domainStore.state.name),
     domainConfig: computed(() => domainStore.state.config),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
     isChanged: computed(() => {
@@ -56,16 +45,7 @@ const state = reactive({
     timezoneMenuList: computed<SelectDropdownMenuItem[]>(() => map(timezoneList, (d) => ({
         type: 'item', label: d === 'UTC' ? `${d} (default)` : d, name: d,
     }))),
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* Event */
diff --git a/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue b/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
index 90f54b79e1..dc3f273d15 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import { computed, onUnmounted, reactive } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
@@ -12,11 +9,8 @@ import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { WorkspaceGroupListParameters } from '@/schema/identity/workspace-group/api-verbs/list';
 import type { WorkspaceGroupModel } from '@/schema/identity/workspace-group/model';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import WorkspaceGroupAddUsersModal from '@/services/advanced/components/WorkspaceGroupAddUsersModal.vue';
 import WorkspaceGroupAddWorkspacesModal from '@/services/advanced/components/WorkspaceGroupAddWorkspacesModal.vue';
@@ -34,25 +28,14 @@ import type { WorkspaceGroupFetchParameters } from '@/services/advanced/types/ad
 
 const workspaceGroupPageStore = useWorkspaceGroupPageStore();
 const workspaceGroupPageState = workspaceGroupPageStore.state;
-const userStore = useUserStore();
-
-const route = useRoute();
 
 const workspaceGroupListApiQueryHelper = new ApiQueryHelper()
     .setPageStart(workspaceGroupPageState.pageStart).setPageLimit(workspaceGroupPageState.pageLimit)
     .setSort('name', true);
 const workspaceGroupListApiQuery = workspaceGroupListApiQueryHelper.data;
 
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        return closestRoute?.meta?.menuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const fetchWorkspaceGroups = async (tabRefresh:WorkspaceGroupFetchParameters = { isGroupUser: false, isWorkspace: false }) => {
diff --git a/apps/web/src/services/advanced/pages/admin/AdminWorkspacesPage.vue b/apps/web/src/services/advanced/pages/admin/AdminWorkspacesPage.vue
index ee17cc9835..1bc7bed7c0 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminWorkspacesPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminWorkspacesPage.vue
@@ -5,7 +5,7 @@ import Vue, {
 } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
-import { clone, cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash';
 
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
@@ -14,13 +14,8 @@ import {
 
 import { i18n } from '@/translations';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
-
 import { useGrantScopeGuard } from '@/common/composables/grant-scope-guard';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import WorkspaceManagementTable from '@/services/advanced/components/WorkspaceManagementTable.vue';
 import WorkspacesCreateModal from '@/services/advanced/components/WorkspacesCreateModal.vue';
@@ -29,33 +24,18 @@ import WorkspacesSetEnableModal from '@/services/advanced/components/WorkspacesS
 import WorkspacesUserManagementTab from '@/services/advanced/components/WorkspacesUserManagementTab.vue';
 import { WORKSPACE_STATE } from '@/services/advanced/constants/workspace-constant';
 import { useWorkspacePageStore } from '@/services/advanced/store/workspace-page-store';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import UserManagementAddModal from '@/services/iam/components/UserManagementAddModal.vue';
 import { USER_MODAL_TYPE } from '@/services/iam/constants/user-constant';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
 
-
 const workspacePageStore = useWorkspacePageStore();
 const workspacePageState = workspacePageStore.$state;
 const userPageStore = useUserPageStore();
-const userStore = useUserStore();
 
 const route = useRoute();
 
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 const modalState = reactive({
     createType: '' as 'CREATE'|'EDIT',
diff --git a/apps/web/src/services/alert-manager/pages/AlertDetailPage.vue b/apps/web/src/services/alert-manager/pages/AlertDetailPage.vue
index 67500fbead..f587005354 100644
--- a/apps/web/src/services/alert-manager/pages/AlertDetailPage.vue
+++ b/apps/web/src/services/alert-manager/pages/AlertDetailPage.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PIconButton, PHeading } from '@cloudforet/mirinae';
@@ -11,16 +9,12 @@ import { PIconButton, PHeading } from '@cloudforet/mirinae';
 import type { AlertDeleteParameters } from '@/schema/monitoring/alert/api-verbs/delete';
 import { i18n } from '@/translations';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import { NoResourceError } from '@/common/composables/error/error';
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import AlertDetailInfoTable from '@/services/alert-manager/components/AlertDetailInfoTable.vue';
 import AlertDetailNote from '@/services/alert-manager/components/AlertDetailNote.vue';
@@ -30,7 +24,6 @@ import AlertDetailTabs from '@/services/alert-manager/components/AlertDetailTabs
 import AlertDetailTitleEditModal from '@/services/alert-manager/components/AlertDetailTitleEditModal.vue';
 import { ALERT_MANAGER_ROUTE } from '@/services/alert-manager/routes/route-constant';
 import { useAlertPageStore } from '@/services/alert-manager/stores/alert-page-store';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 const props = defineProps({
     id: {
@@ -40,27 +33,13 @@ const props = defineProps({
 });
 const alertPageStore = useAlertPageStore();
 const alertPageState = alertPageStore.state;
-const userStore = useUserStore();
 
 const router = useRouter();
-const route = useRoute();
 
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
     loading: true,
     alertTitleEditFormVisible: false,
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const checkDeleteState = reactive({
diff --git a/apps/web/src/services/alert-manager/pages/EscalationPolicyPage.vue b/apps/web/src/services/alert-manager/pages/EscalationPolicyPage.vue
index 25cc75998a..311737e128 100644
--- a/apps/web/src/services/alert-manager/pages/EscalationPolicyPage.vue
+++ b/apps/web/src/services/alert-manager/pages/EscalationPolicyPage.vue
@@ -2,9 +2,7 @@
 import {
     reactive, computed,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import {
     makeDistinctValueHandler, makeEnumValueHandler, makeReferenceValueHandler,
@@ -35,21 +33,18 @@ import { i18n } from '@/translations';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 import { replaceUrlQuery } from '@/lib/router-query-string';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useQueryTags } from '@/common/composables/query-tags';
 
 import EscalationPolicyDataTable from '@/services/alert-manager/components/EscalationPolicyDataTable.vue';
 import EscalationPolicyFormModal from '@/services/alert-manager/components/EscalationPolicyFormModal.vue';
 import { ACTION } from '@/services/alert-manager/constants/alert-constant';
 import type { ActionMode } from '@/services/alert-manager/types/alert-type';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 interface Item extends Omit<EscalationPolicyModel, 'name'> {
     name: {
@@ -60,17 +55,12 @@ interface Item extends Omit<EscalationPolicyModel, 'name'> {
 }
 
 const router = useRouter();
-const route = useRoute();
 
 const { query } = router.currentRoute;
 
 const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
 
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
-
 /* Search Tag */
 const queryTagsHelper = useQueryTags({
     keyItemSets: computed<KeyItemSet[]>(() => [{
@@ -138,16 +128,7 @@ const state = reactive({
     deleteModalVisible: false,
     formModalVisible: false,
     formMode: undefined as ActionMode|undefined,
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* api */
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue b/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue
index b21e903b42..ecf7468926 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue
@@ -2,9 +2,6 @@
 import {
     computed, reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
@@ -22,15 +19,9 @@ import { i18n } from '@/translations';
 
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
-
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 interface Props {
     recordId: string;
@@ -44,12 +35,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{(e: 'refresh-note-count'): void}>();
 
-const route = useRoute();
-
 const userStore = useUserStore();
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
+
 const state = reactive({
     id: '',
     noteInput: '',
@@ -63,16 +50,7 @@ const state = reactive({
     ]),
     selectedNoteIdForDelete: '',
     totalCount: 0,
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const handleChangeNoteInput = (e) => {
diff --git a/apps/web/src/services/asset-inventory/components/CollectorMainContents.vue b/apps/web/src/services/asset-inventory/components/CollectorMainContents.vue
index ea36f2ed50..f76c24373a 100644
--- a/apps/web/src/services/asset-inventory/components/CollectorMainContents.vue
+++ b/apps/web/src/services/asset-inventory/components/CollectorMainContents.vue
@@ -2,9 +2,6 @@
 import {
     onMounted, computed, reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import { makeDistinctValueHandler } from '@cloudforet/core-lib/component-util/query-search';
 import { QueryHelper } from '@cloudforet/core-lib/query';
@@ -25,14 +22,12 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { PluginReferenceMap } from '@/store/reference/plugin-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { FILE_NAME_PREFIX } from '@/lib/excel-export/constant';
 import { downloadExcel } from '@/lib/helper/file-download-helper';
 import type { ExcelDataField } from '@/lib/helper/file-download-helper/type';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
 import CollectorDataModal
@@ -44,8 +39,6 @@ import CollectorScheduleModal
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { useCollectorPageStore } from '@/services/asset-inventory/stores/collector-page-store';
 import type { CollectorItemInfo } from '@/services/asset-inventory/types/collector-main-page-type';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-
 
 /** * @function
  *   @name makePluginReferenceValueHandler
@@ -84,12 +77,9 @@ const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
 const { getProperRouteLocation, isAdminMode } = useProperRouteLocation();
 
-const route = useRoute();
-
 const storeState = reactive({
     plugins: computed<PluginReferenceMap>(() => allReferenceStore.getters.plugin),
     timezone: computed<string>(() => userStore.state.timezone ?? 'UTC'),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 
 const keyItemSets: KeyItemSet[] = [{
@@ -127,16 +117,7 @@ const historyLinkQueryHelper = new QueryHelper();
 
 const state = reactive({
     loading: computed(() => collectorPageState.loading.collectorList),
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     searchTags: computed(() => {
         const tags = searchQueryHelper.setFilters(collectorPageState.searchFilters).queryTags;
         return tags.reduce((r: QueryItem[], d: any): QueryItem[] => {
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue
index 5b026c02ba..3498e14b87 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue
@@ -4,15 +4,12 @@ import { computed, reactive, ref } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router/composables';
 
-import { clone } from 'lodash';
-
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     useContextMenuController, PHeading, PIconButton, PButton, PContextMenu, PI, PHeadingLayout,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-
 import { RESOURCE_GROUP } from '@/schema/_common/constant';
 import type { MetricExampleDeleteParameters } from '@/schema/inventory/metric-example/api-verbs/delete';
 import type { MetricExampleUpdateParameters } from '@/schema/inventory/metric-example/api-verbs/update';
@@ -24,15 +21,12 @@ import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
 import { gray } from '@/styles/colors';
@@ -42,7 +36,6 @@ import MetricExplorerQueryFormSidebar from '@/services/asset-inventory/component
 import { NAME_FORM_MODAL_TYPE } from '@/services/asset-inventory/constants/asset-analysis-constant';
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { useMetricExplorerPageStore } from '@/services/asset-inventory/stores/metric-explorer-page-store';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 const contextMenuRef = ref<any|null>(null);
 const targetRef = ref<HTMLElement | null>(null);
@@ -54,7 +47,6 @@ const metricExplorerPageState = metricExplorerPageStore.state;
 const metricExplorerPageGetters = metricExplorerPageStore.getters;
 const allReferenceStore = useAllReferenceStore();
 const appContextStore = useAppContextStore();
-const userStore = useUserStore();
 
 const router = useRouter();
 const route = useRoute();
@@ -63,19 +55,9 @@ const storeState = reactive({
     namespaces: computed(() => allReferenceStore.getters.namespace),
     currentMetric: computed(() => metricExplorerPageState.metric),
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     currentMetricId: computed<string>(() => route.params.metricId),
     isDuplicateEnabled: computed<boolean>(() => Object.values(storeState.namespaces).find((d) => d.key === storeState.currentMetric?.namespace_id)?.data.group !== 'common'),
     currentMetricExampleId: computed<string|undefined>(() => route.params.metricExampleId),
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetric.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetric.vue
index 34723d49c0..266db7eb57 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetric.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetric.vue
@@ -4,7 +4,7 @@ import {
 } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
-import { clone, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 import {
     PDataLoader, PIconButton, PLazyImg, PSearch, PEmpty, PTooltip,
@@ -17,12 +17,8 @@ import type {
     CloudServiceTypeReferenceMap,
 } from '@/store/reference/cloud-service-type-reference-store';
 import type { MetricReferenceItem } from '@/store/reference/metric-reference-store';
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
 import { gray } from '@/styles/colors';
@@ -31,8 +27,6 @@ import MetricExplorerLSBMetricTree from '@/services/asset-inventory/components/M
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { useMetricExplorerPageStore } from '@/services/asset-inventory/stores/metric-explorer-page-store';
 import type { NamespaceSubItemType } from '@/services/asset-inventory/types/asset-analysis-type';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-
 
 interface Props {
     isDetailPage?: boolean;
@@ -44,7 +38,6 @@ const props = defineProps<Props>();
 const allReferenceStore = useAllReferenceStore();
 const metricExplorerPageStore = useMetricExplorerPageStore();
 const metricExplorerPageState = metricExplorerPageStore.state;
-const userStore = useUserStore();
 const { getProperRouteLocation } = useProperRouteLocation();
 const route = useRoute();
 
@@ -58,19 +51,9 @@ const storeState = reactive({
         return res;
     }),
     selectedNamespace: computed<NamespaceSubItemType|undefined>(() => metricExplorerPageState.selectedNamespace),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     selectedId: computed<string|undefined>(() => {
         const routeName = getProperRouteLocation({ name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME }).name;
         if (!props.isDetailPage) return undefined;
diff --git a/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue b/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue
index 9188b6247d..163188087e 100644
--- a/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue
@@ -25,9 +25,6 @@ import {
 // eslint-disable-next-line import/no-duplicates
 } from 'vue';
 import type { Location } from 'vue-router';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import { QueryHelper } from '@cloudforet/core-lib/query';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
@@ -45,13 +42,11 @@ import { makeAdminRouteName } from '@/router/helpers/route-helper';
 
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useGoBack } from '@/common/composables/go-back';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import CollectorAdditionalRule from '@/services/asset-inventory/components/CollectorAdditionalRule.vue';
 import CollectorBaseInfoSection from '@/services/asset-inventory/components/CollectorBaseInfoSection.vue';
@@ -74,8 +69,6 @@ import {
 import { useCollectorDetailPageStore } from '@/services/asset-inventory/stores/collector-detail-page-store';
 import { useCollectorFormStore } from '@/services/asset-inventory/stores/collector-form-store';
 import { useCollectorJobStore } from '@/services/asset-inventory/stores/collector-job-store';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-
 
 const props = defineProps<{
     collectorId: string;
@@ -83,14 +76,12 @@ const props = defineProps<{
 
 const collectorFormStore = useCollectorFormStore();
 const collectorFormState = collectorFormStore.state;
-
 const collectorJobStore = useCollectorJobStore();
 const collectorJobState = collectorJobStore.$state;
 const collectorDataModalStore = useCollectorDataModalStore();
 const collectorDetailPageStore = useCollectorDetailPageStore();
-const userStore = useUserStore();
 
-const route = useRoute();
+const userStore = useUserStore();
 
 watch(() => collectorFormState.originCollector, async (collector) => {
     if (collector) {
@@ -102,20 +93,8 @@ watch(() => collectorFormState.originCollector, async (collector) => {
 
 const queryHelper = new QueryHelper();
 
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     isNotiVisible: computed(() => !collectorDetailPageStore.getters.isEditableCollector),
     isDomainAdmin: computed(() => userStore.getters.isDomainAdmin),
     loading: true,
diff --git a/apps/web/src/services/asset-inventory/pages/ServiceAccountDetailPage.vue b/apps/web/src/services/asset-inventory/pages/ServiceAccountDetailPage.vue
index 5ace23ca28..32b2278c8d 100644
--- a/apps/web/src/services/asset-inventory/pages/ServiceAccountDetailPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/ServiceAccountDetailPage.vue
@@ -2,10 +2,9 @@
 import {
     computed, onMounted, reactive, watch,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router/composables';
 
 import { render } from 'ejs';
-import { clone } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
@@ -13,7 +12,6 @@ import {
 } from '@cloudforet/mirinae';
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 
-
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { ServiceAccountGetParameters } from '@/schema/identity/service-account/api-verbs/get';
 import { ACCOUNT_TYPE } from '@/schema/identity/service-account/constant';
@@ -27,11 +25,8 @@ import type { ProjectReferenceMap } from '@/store/reference/project-reference-st
 import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
-
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
 import ServiceAccountAttachedGeneralAccounts
@@ -48,7 +43,6 @@ import ServiceAccountEditModal from '@/services/asset-inventory/components/Servi
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { useServiceAccountPageStore } from '@/services/asset-inventory/stores/service-account-page-store';
 import { useServiceAccountSchemaStore } from '@/services/asset-inventory/stores/service-account-schema-store';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 const router = useRouter();
 
@@ -63,8 +57,6 @@ const appContextStore = useAppContextStore();
 const userStore = useUserStore();
 const { getProperRouteLocation } = useProperRouteLocation();
 
-const route = useRoute();
-
 const storeState = reactive({
     providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
     project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
@@ -73,20 +65,10 @@ const storeState = reactive({
         : serviceAccountSchemaStore.getters.generalAccountSchema?.options?.external_link)),
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceMember: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
     loading: true,
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     originServiceAccountItem: computed(() => serviceAccountPageStore.state.originServiceAccountItem),
     serviceAccountType: computed(() => serviceAccountPageStore.state.serviceAccountType),
     isTrustedAccount: computed(() => state.serviceAccountType === ACCOUNT_TYPE.TRUSTED),
diff --git a/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue b/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue
index a31906c43d..2cad20536b 100644
--- a/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue
@@ -5,8 +5,6 @@ import {
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
 
-import { clone } from 'lodash';
-
 import { QueryHelper } from '@cloudforet/core-lib/query';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
@@ -41,12 +39,9 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProviderReferenceMap, ProviderItem } from '@/store/reference/provider-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { dynamicFieldsToExcelDataFields } from '@/lib/excel-export';
 import { FILE_NAME_PREFIX } from '@/lib/excel-export/constant';
 import { downloadExcel } from '@/lib/helper/file-download-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 import { referenceFieldFormatter } from '@/lib/reference/referenceFieldFormatter';
 import type { Reference } from '@/lib/reference/type';
 import { replaceUrlQuery } from '@/lib/router-query-string';
@@ -54,6 +49,7 @@ import { replaceUrlQuery } from '@/lib/router-query-string';
 import AutoSyncState from '@/common/components/badge/AutoSyncState.vue';
 import { useQuerySearchPropsWithSearchSchema } from '@/common/composables/dynamic-layout';
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import CustomFieldModalForDynamicLayout from '@/common/modules/custom-table/custom-field-modal/CustomFieldModalForDynamicLayout.vue';
 
@@ -70,7 +66,6 @@ import type { QuerySearchTableLayout } from '@/services/asset-inventory/helpers/
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { useServiceAccountPageStore } from '@/services/asset-inventory/stores/service-account-page-store';
 import { useServiceAccountSchemaStore } from '@/services/asset-inventory/stores/service-account-schema-store';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 const { width } = useWindowSize();
 
@@ -90,20 +85,10 @@ const userStore = useUserStore();
 const { getProperRouteLocation } = useProperRouteLocation();
 
 const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
     currency: computed<Currency|undefined>(() => serviceAccountPageGetters.currency),
 });
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     trustedAccounts: computed(() => allReferenceStore.getters.trustedAccount),
     providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
diff --git a/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorDetailPage.vue b/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorDetailPage.vue
index acd3d589d3..65adf4fe60 100644
--- a/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorDetailPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorDetailPage.vue
@@ -105,9 +105,6 @@ import {
 // eslint-disable-next-line import/no-duplicates
 } from 'vue';
 import type { Location } from 'vue-router';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import { QueryHelper } from '@cloudforet/core-lib/query';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
@@ -123,15 +120,11 @@ import { i18n } from '@/translations';
 
 import { makeAdminRouteName } from '@/router/helpers/route-helper';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useGoBack } from '@/common/composables/go-back';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
 import CollectorAdditionalRule from '@/services/asset-inventory/components/CollectorAdditionalRule.vue';
@@ -153,11 +146,6 @@ import {
 import { useCollectorDetailPageStore } from '@/services/asset-inventory/stores/collector-detail-page-store';
 import { useCollectorFormStore } from '@/services/asset-inventory/stores/collector-form-store';
 import { useCollectorJobStore } from '@/services/asset-inventory/stores/collector-job-store';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-
-
-
-
 
 const props = defineProps<{
     collectorId: string;
@@ -171,10 +159,6 @@ const collectorJobState = collectorJobStore.$state;
 const collectorDataModalStore = useCollectorDataModalStore();
 const collectorDetailPageStore = useCollectorDetailPageStore();
 
-const userStore = useUserStore();
-
-const route = useRoute();
-
 watch(() => collectorFormState.originCollector, async (collector) => {
     if (collector) {
         collectorJobStore.$patch({
@@ -187,20 +171,8 @@ const { getProperRouteLocation } = useProperRouteLocation();
 
 const queryHelper = new QueryHelper();
 
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     isNotiVisible: computed(() => !collectorDetailPageStore.getters.isEditableCollector),
     loading: true,
     collector: computed<CollectorModel|null>(() => collectorFormState.originCollector),
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
index d6c05cfd68..e1740dc8c7 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { computed, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import {
     PDivider, PHeading, PIconButton, PHeadingLayout,
@@ -17,17 +15,13 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
-
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
 import BudgetDetailDeleteModal from '@/services/cost-explorer/components/BudgetDetailDeleteModal.vue';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
 
-
 interface Props {
     loading?: boolean;
 }
@@ -43,25 +37,14 @@ const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
 
 const router = useRouter();
-const route = useRoute();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
     dataSourceMap: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     budgetData: computed<BudgetModel|null>(() => budgetPageState.budgetData),
     isProjectTarget: computed(() => state.budgetData?.resource_group === 'PROJECT'),
     dataSourceName: computed(() => {
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
index e36cffeab6..f5e99573ec 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
@@ -19,15 +17,12 @@ import { makeAdminRouteName } from '@/router/helpers/route-helper';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 import { CURRENCY_SYMBOL } from '@/store/display/constant';
-import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { getCompoundKeyWithManagedCostQuerySetFavoriteKey } from '@/lib/helper/config-data-helper';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
@@ -42,7 +37,6 @@ import {
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useCostAnalysisPageStore } from '@/services/cost-explorer/stores/cost-analysis-page-store';
 
-
 const CostAnalysisQueryFormModal = () => import('@/services/cost-explorer/components/CostAnalysisQueryFormModal.vue');
 const DeleteModal = () => import('@/common/components/modals/DeleteModal.vue');
 
@@ -55,27 +49,15 @@ const favoriteStore = useFavoriteStore();
 const favoriteGetters = favoriteStore.getters;
 const userWorkspaceStore = useUserWorkspaceStore();
 const appContextStore = useAppContextStore();
-const userStore = useUserStore();
 
 const router = useRouter();
-const route = useRoute();
 
 const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
     isUnifiedCost: computed(() => costAnalysisPageGetters.isUnifiedCost),
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     defaultTitle: computed<TranslateResult>(() => i18n.t('BILLING.COST_MANAGEMENT.COST_ANALYSIS.COST_ANALYSIS')),
     title: computed<string>(() => costAnalysisPageGetters.selectedQuerySet?.name ?? state.defaultTitle),
     dataSourceImage: computed(() => costAnalysisPageGetters.dataSourceImageUrl),
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
index 260d815b02..f65dbb95b9 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
@@ -5,9 +5,6 @@ import {
 import {
     computed, onMounted, reactive, ref, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
@@ -21,14 +18,11 @@ import type { CostQuerySetUpdateParameters } from '@/schema/cost-analysis/cost-q
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
@@ -45,17 +39,12 @@ import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-const
 import { useCostAnalysisPageStore } from '@/services/cost-explorer/stores/cost-analysis-page-store';
 import type { Granularity } from '@/services/cost-explorer/types/cost-explorer-query-type';
 
-
-
 const CostAnalysisQueryFormModal = () => import('@/services/cost-explorer/components/CostAnalysisQueryFormModal.vue');
 
 const costAnalysisPageStore = useCostAnalysisPageStore();
 const costAnalysisPageGetters = costAnalysisPageStore.getters;
 const costAnalysisPageState = costAnalysisPageStore.state;
 const appContextStore = useAppContextStore();
-const userStore = useUserStore();
-
-const route = useRoute();
 
 const filtersPopperRef = ref<any|null>(null);
 const rightPartRef = ref<HTMLElement|null>(null);
@@ -66,21 +55,11 @@ const { getProperRouteLocation } = useProperRouteLocation();
 const { height: filtersPopperHeight } = useElementSize(filtersPopperRef);
 
 const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 const state = reactive({
     queryFormModalVisible: false,
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     saveDropdownMenuItems: computed<MenuItem[]>(() => ([
         {
             type: 'item',
diff --git a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue
index 32c4a9cdad..25efb22977 100644
--- a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue
+++ b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue
@@ -1,18 +1,11 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import { PTab } from '@cloudforet/mirinae';
 
 import { i18n } from '@/translations';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import DataSourceManagementTabAccessRestriction
     from '@/services/cost-explorer/components/DataSourceManagementTabAccessRestriction.vue';
@@ -21,30 +14,16 @@ import DataSourceManagementTabDetailBaseInformation
     from '@/services/cost-explorer/components/DataSourceManagementTabDetailBaseInformation.vue';
 import DataSourceManagementTabLinkedAccount
     from '@/services/cost-explorer/components/DataSourceManagementTabLinkedAccount.vue';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useDataSourcesPageStore } from '@/services/cost-explorer/stores/data-sources-page-store';
 
 const dataSourcesPageStore = useDataSourcesPageStore();
 const dataSourcesPageState = dataSourcesPageStore.state;
-const userStore = useUserStore();
-
-const route = useRoute();
 
 const storeState = reactive({
     activeTab: computed<string>(() => dataSourcesPageState.activeTab),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 const tabState = reactive({
     tabs: computed(() => [
diff --git a/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue b/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue
index b427968615..a7ebff2170 100644
--- a/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import {
     PHeading, PDivider, PButton, PHeadingLayout,
@@ -13,32 +10,17 @@ import { ROLE_TYPE } from '@/schema/identity/role/constant';
 
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import BudgetMainList from '@/services/cost-explorer/components/BudgetMainList.vue';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
-
-const route = useRoute();
-
 const userStore = useUserStore();
 const storeState = reactive({
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const handleCreateBudgetSelect = () => {
diff --git a/apps/web/src/services/cost-explorer/pages/CostReportPage.vue b/apps/web/src/services/cost-explorer/pages/CostReportPage.vue
index eb1796a20a..9e28819ebf 100644
--- a/apps/web/src/services/cost-explorer/pages/CostReportPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/CostReportPage.vue
@@ -2,9 +2,6 @@
 import {
     computed, onMounted, reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import {
     PHeading, PTab, PEmpty, PDataLoader,
@@ -14,11 +11,8 @@ import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type
 import { i18n } from '@/translations';
 
 import type { Currency } from '@/store/display/type';
-import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import CostReportMonthlyTotalAmountSummaryCard
     from '@/services/cost-explorer/components/CostReportMonthlyTotalAmountSummaryCard.vue';
@@ -26,20 +20,11 @@ import CostReportOverviewCostTrendCard from '@/services/cost-explorer/components
 import CostReportRecipientsCard from '@/services/cost-explorer/components/CostReportRecipientsCard.vue';
 import CostReportReportsTab from '@/services/cost-explorer/components/CostReportReportsTab.vue';
 import CostReportUpcomingReportCard from '@/services/cost-explorer/components/CostReportUpcomingReportCard.vue';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useCostReportPageStore } from '@/services/cost-explorer/stores/cost-report-page-store';
 
-
-
 const costReportPageStore = useCostReportPageStore();
 const costReportPageState = costReportPageStore.state;
-const userStore = useUserStore();
 
-const route = useRoute();
-
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
     loading: true,
     tabs: computed<TabItem[]>(() => [
@@ -56,16 +41,7 @@ const state = reactive({
     ]),
     activeTab: 'overview',
     currency: 'KRW' as Currency,
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* Watcher */
diff --git a/apps/web/src/services/cost-explorer/pages/admin/AdminAdvancedSettingsAnomalyDetectionConfigurationPage.vue b/apps/web/src/services/cost-explorer/pages/admin/AdminAdvancedSettingsAnomalyDetectionConfigurationPage.vue
index 3e6e0cae36..8f694fdaff 100644
--- a/apps/web/src/services/cost-explorer/pages/admin/AdminAdvancedSettingsAnomalyDetectionConfigurationPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/admin/AdminAdvancedSettingsAnomalyDetectionConfigurationPage.vue
@@ -3,9 +3,8 @@ import type { ComputedRef } from 'vue';
 import {
     computed, onMounted, reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
-import { clone, cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
@@ -19,16 +18,11 @@ import type { DomainConfigSetParameters } from '@/schema/config/domain-config/ap
 import type { DomainConfigModel } from '@/schema/config/domain-config/model';
 
 import { DOMAIN_CONFIG_NAMES } from '@/store/domain/constant';
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
 import { NOTIFY_LEVEL_MAP } from '@/services/cost-explorer/constants/anomaly-detection-constant';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import type {
     NotificationRule,
     NotificationUnit,
@@ -36,55 +30,39 @@ import type {
     NotifyLevel,
 } from '@/services/cost-explorer/types/anomaly-detection-type';
 
-
-
-const ALL_VALUE: NotificationVariation[] = ['gte', 'lte'];
-
-const route = useRoute();
-
-const userStore = useUserStore();
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
-const state = reactive<{
+interface State {
     statusToggle: boolean;
     notificationRules:Partial<NotificationRule>[];
     unitMenu: ComputedRef<MenuItem[]>;
     variationMenu: ComputedRef<MenuItem[]>;
     notifyLevelMenu: ComputedRef<MenuItem[]>;
     recipients: boolean;
-    selectedMenuId: ComputedRef<string>;
     hasReadWriteAccess?: ComputedRef<boolean|undefined>;
-        }>({
-            statusToggle: false,
-            notificationRules: [{ variation: ALL_VALUE }],
-            unitMenu: computed(() => [
-                { label: 'Percentage (%)', name: 'PERCENTAGE' },
-                { label: 'Fixed Amount', name: 'FIXED_AMOUNT' },
-            ]),
-            variationMenu: computed(() => [
-                { label: 'All', name: 'all' },
-                { label: 'Increase (>=)', name: JSON.stringify(['gte']) },
-                { label: 'Decrease (<=)', name: JSON.stringify(['lte']) },
-            ]),
-            notifyLevelMenu: computed(() => Object.values(NOTIFY_LEVEL_MAP).map((level) => ({
-                label: level.label,
-                name: level.name,
-                icon: level.icon,
-                iconColor: level.color,
-            }))),
-            recipients: false,
-            selectedMenuId: computed(() => {
-                const reversedMatched = clone(route.matched).reverse();
-                const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-                const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-                if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-                    return '';
-                }
-                return targetMenuId;
-            }),
-            hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
-        });
+}
+
+const ALL_VALUE: NotificationVariation[] = ['gte', 'lte'];
+
+const state = reactive<State>({
+    statusToggle: false,
+    notificationRules: [{ variation: ALL_VALUE }],
+    unitMenu: computed(() => [
+        { label: 'Percentage (%)', name: 'PERCENTAGE' },
+        { label: 'Fixed Amount', name: 'FIXED_AMOUNT' },
+    ]),
+    variationMenu: computed(() => [
+        { label: 'All', name: 'all' },
+        { label: 'Increase (>=)', name: JSON.stringify(['gte']) },
+        { label: 'Decrease (<=)', name: JSON.stringify(['lte']) },
+    ]),
+    notifyLevelMenu: computed(() => Object.values(NOTIFY_LEVEL_MAP).map((level) => ({
+        label: level.label,
+        name: level.name,
+        icon: level.icon,
+        iconColor: level.color,
+    }))),
+    recipients: false,
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
+});
 
 
 const handleUpdateNotificationRules = (key: keyof NotificationRule, value: NotificationRule[keyof NotificationRule]|'all', index: number) => {
diff --git a/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetMainPage.vue b/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetMainPage.vue
index 27df67de47..bb279532aa 100644
--- a/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetMainPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetMainPage.vue
@@ -1,44 +1,23 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import {
     PHeading, PDivider, PButton, PHeadingLayout,
 } from '@cloudforet/mirinae';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
-
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
 import BudgetMainList from '@/services/cost-explorer/components/BudgetMainList.vue';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 const router = useRouter();
-const route = useRoute();
 
-const userStore = useUserStore();
 const { getProperRouteLocation } = useProperRouteLocation();
 
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const handleCreateBudgetSelect = () => {
diff --git a/apps/web/src/services/dashboards/DashboardsLSB.vue b/apps/web/src/services/dashboards/DashboardsLSB.vue
index 65ed743fd7..5d0e843786 100644
--- a/apps/web/src/services/dashboards/DashboardsLSB.vue
+++ b/apps/web/src/services/dashboards/DashboardsLSB.vue
@@ -4,8 +4,6 @@ import {
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
 
-import { clone } from 'lodash';
-
 import {
     PIconButton,
 } from '@cloudforet/mirinae';
@@ -18,11 +16,10 @@ import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
 
 import { useGrantScopeGuard } from '@/common/composables/grant-scope-guard';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
@@ -40,8 +37,6 @@ import DashboardLSBTree from '@/services/dashboards/components/dashboard-main/Da
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
-
-
 const appContextStore = useAppContextStore();
 const favoriteStore = useFavoriteStore();
 const favoriteGetters = favoriteStore.getters;
@@ -59,20 +54,13 @@ const storeState = reactive({
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
     favoriteItems: computed(() => favoriteGetters.dashboardItems),
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
     loading: true,
     currentPath: computed(() => route.fullPath),
     publicV2DashboardMenuSet: computed(() => getDashboardMenuSet(dashboardPageControlGetters.publicDashboardItems)),
     privateV2DashboardMenuSet: computed(() => getDashboardMenuSet(dashboardPageControlGetters.privateDashboardItems)),
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     favoriteItemMap: computed(() => {
         const result: Record<string, FavoriteConfig> = {};
         storeState.favoriteItems?.forEach((d) => {
diff --git a/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue b/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
index 0a3ad3e7e3..0f4601278f 100644
--- a/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
@@ -2,9 +2,9 @@
 import {
     computed, onUnmounted, reactive, watch,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router/composables';
 
-import { clone, cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash';
 
 import { makeDistinctValueHandler } from '@cloudforet/core-lib/component-util/query-search';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
@@ -29,12 +29,10 @@ import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 import { replaceUrlQuery } from '@/lib/router-query-string';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import { useQueryTags } from '@/common/composables/query-tags';
 
@@ -45,8 +43,6 @@ import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardTreeDataType } from '@/services/dashboards/types/dashboard-folder-type';
 
-
-
 const { getProperRouteLocation } = useProperRouteLocation();
 const appContextStore = useAppContextStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
@@ -63,12 +59,10 @@ const queryTagsHelper = useQueryTags({
         ],
     }],
 });
-const route = useRoute();
 
 const storeState = reactive({
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
@@ -102,13 +96,7 @@ const state = reactive({
         if (storeState.isAdminMode) return dashboardPageControlGetters.adminTreeControlButtonDisableMap;
         return dashboardPageControlGetters.publicTreeControlButtonDisableMap;
     }),
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     // search
     isSearching: {
         PUBLIC: false,
diff --git a/apps/web/src/services/iam/pages/AppMainPage.vue b/apps/web/src/services/iam/pages/AppMainPage.vue
index 55375fa94d..263d93e422 100644
--- a/apps/web/src/services/iam/pages/AppMainPage.vue
+++ b/apps/web/src/services/iam/pages/AppMainPage.vue
@@ -2,9 +2,8 @@
 import {
     computed, onMounted, onUnmounted, reactive,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
-import { clone, cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash';
 
 import {
     PHorizontalLayout, PHeading, PButton, PTab, PHeadingLayout,
@@ -16,27 +15,21 @@ import { i18n } from '@/translations';
 
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import AppAPIKeyGRPCEndpointsTab from '@/services/iam/components/AppAPIKeyGRPCEndpointsTab.vue';
 import AppAPIKeyRestEndpointsTab from '@/services/iam/components/AppAPIKeyRestEndpointsTab.vue';
 import AppManagementTable from '@/services/iam/components/AppManagementTable.vue';
 import { APP_DROPDOWN_MODAL_TYPE } from '@/services/iam/constants/app-constant';
 import { useAppPageStore } from '@/services/iam/store/app-page-store';
 
-
 const appPageStore = useAppPageStore();
 const appPageState = appPageStore.$state;
-const userStore = useUserStore();
 
-const route = useRoute();
+const userStore = useUserStore();
 
 const storeState = reactive({
     roleType: computed<RoleType|undefined>(() => userStore.state.roleType),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 
 const tabs = [{
@@ -49,16 +42,7 @@ const tabs = [{
 const state = reactive({
     activeTab: 'rest',
     userId: computed<string|undefined>(() => userStore.state.userId),
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* Component */
diff --git a/apps/web/src/services/iam/pages/UserMainPage.vue b/apps/web/src/services/iam/pages/UserMainPage.vue
index 6b00265a92..c8f47f0a30 100644
--- a/apps/web/src/services/iam/pages/UserMainPage.vue
+++ b/apps/web/src/services/iam/pages/UserMainPage.vue
@@ -2,9 +2,6 @@
 import {
     computed, onUnmounted, reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { clone } from 'lodash';
 
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PHorizontalLayout } from '@cloudforet/mirinae';
@@ -12,13 +9,9 @@ import { PHorizontalLayout } from '@cloudforet/mirinae';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
-
 import { useGrantScopeGuard } from '@/common/composables/grant-scope-guard';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import UserManagementAddModal from '@/services/iam/components/UserManagementAddModal.vue';
 import UserManagementFormModal from '@/services/iam/components/UserManagementFormModal.vue';
 import UserManagementHeader from '@/services/iam/components/UserManagementHeader.vue';
@@ -36,25 +29,13 @@ const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
 const userStore = useUserStore();
 
-const route = useRoute();
-
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     globalGrantLoading: computed(() => appContextStore.getters.globalGrantLoading),
     grantInfo: computed(() => userStore.state.currentGrantInfo),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const userListApiQueryHelper = new ApiQueryHelper()
diff --git a/apps/web/src/services/iam/pages/admin/AdminRolePage.vue b/apps/web/src/services/iam/pages/admin/AdminRolePage.vue
index a5fe033c8d..baa427193d 100644
--- a/apps/web/src/services/iam/pages/admin/AdminRolePage.vue
+++ b/apps/web/src/services/iam/pages/admin/AdminRolePage.vue
@@ -1,50 +1,27 @@
 <script lang="ts" setup>
 import { computed, onUnmounted, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import {
     PHorizontalLayout, PHeading, PButton, PHeadingLayout,
 } from '@cloudforet/mirinae';
 
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
-
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import RoleManagementTab from '@/services/iam/components/RoleManagementTab.vue';
 import RoleManagementTable from '@/services/iam/components/RoleManagementTable.vue';
 import { IAM_ROUTE } from '@/services/iam/routes/route-constant';
 import { useRolePageStore } from '@/services/iam/store/role-page-store';
 
-
 const rolePageStore = useRolePageStore();
 const rolePageState = rolePageStore.$state;
-const userStore = useUserStore();
 const { getProperRouteLocation } = useProperRouteLocation();
 
 const router = useRouter();
-const route = useRoute();
 
-const storeState = reactive({
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
 const state = reactive({
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* Component */
diff --git a/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue b/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue
index 3d97da73d2..15191d4353 100644
--- a/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue
+++ b/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue
@@ -2,9 +2,7 @@
 import {
     computed, onBeforeMount, reactive,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
@@ -21,29 +19,25 @@ import { i18n } from '@/translations';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
 import {
     hideLoadingMessage,
     showErrorMessage,
     showLoadingMessage,
     showSuccessMessage,
 } from '@/lib/helper/notice-alert-helper';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
 import { workspaceStateFormatter } from '@/services/advanced/composables/refined-table-data';
 import { WORKSPACE_STATE } from '@/services/advanced/constants/workspace-constant';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import NoticeDetail from '@/services/info/components/NoticeDetail.vue';
 import { INFO_ROUTE } from '@/services/info/routes/route-constant';
 import { useNoticeDetailStore } from '@/services/info/stores/notice-detail-store';
 
-
 const props = defineProps<{
     postId: string;
 }>();
@@ -56,11 +50,9 @@ const userWorkspaceGetters = userWorkspaceStore.getters;
 const userStore = useUserStore();
 
 const router = useRouter();
-const route = useRoute();
 
 const storeState = reactive({
     post: computed<undefined|PostModel>(() => noticeDetailState.post),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
     workspaceList: computed<WorkspaceModel[]>(() => userWorkspaceGetters.workspaceList),
     hasPermissionToEditOrDelete: computed<boolean>(() => userStore.getters.isDomainAdmin),
 });
@@ -69,16 +61,7 @@ const state = reactive({
     allSendingEmailModalVisible: false,
     specificSendingEmailModalVisible: false,
     sendLoading: false,
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     isAllWorkspace: computed<boolean>(() => (!storeState.post?.workspaces || storeState.post?.workspaces?.includes('*')) ?? true),
     scopedWorkspaceList: computed<WorkspaceModel[]|undefined>(() => {
         if (state.isAllWorkspace) return undefined;
diff --git a/apps/web/src/services/info/pages/admin/AdminNoticeMainPage.vue b/apps/web/src/services/info/pages/admin/AdminNoticeMainPage.vue
index e5a74ede1d..65f7c2e1c1 100644
--- a/apps/web/src/services/info/pages/admin/AdminNoticeMainPage.vue
+++ b/apps/web/src/services/info/pages/admin/AdminNoticeMainPage.vue
@@ -22,9 +22,7 @@
 
 <script lang="ts">
 import { computed, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import {
     PButton, PHeading, PHeadingLayout,
@@ -34,11 +32,8 @@ import { makeAdminRouteName } from '@/router/helpers/route-helper';
 
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
+import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import NoticeList from '@/services/info/components/NoticeList.vue';
 import { INFO_ROUTE } from '@/services/info/routes/route-constant';
 
@@ -52,25 +47,14 @@ export default {
     },
     setup() {
         const router = useRouter();
-        const route = useRoute();
 
         const userStore = useUserStore();
 
         const storeState = reactive({
             hasDomainRoleUser: computed(() => userStore.getters.isDomainAdmin),
-            pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
         });
         const state = reactive({
-            selectedMenuId: computed(() => {
-                const reversedMatched = clone(route.matched).reverse();
-                const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-                const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-                if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-                    return '';
-                }
-                return targetMenuId;
-            }),
-            hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+            hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
         });
         const handleCreateNotice = () => {
             router.push({ name: makeAdminRouteName(INFO_ROUTE.NOTICE.CREATE._NAME) });
diff --git a/apps/web/src/services/landing/components/DomainLandingStartBanner.vue b/apps/web/src/services/landing/components/DomainLandingStartBanner.vue
index 39ae527ce9..4b47b3a4fb 100644
--- a/apps/web/src/services/landing/components/DomainLandingStartBanner.vue
+++ b/apps/web/src/services/landing/components/DomainLandingStartBanner.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core';
 import { computed, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { clone } from 'lodash';
+import { useRouter } from 'vue-router/composables';
 
 import { screens, PTextButton } from '@cloudforet/mirinae';
 
@@ -13,10 +11,7 @@ import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-worksp
 import { useUserStore } from '@/store/user/user-store';
 
 import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-import { MENU_ID } from '@/lib/menu/config';
 
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { LANDING_ROUTE } from '@/services/landing/routes/route-constant';
 
 const userWorkspaceStore = useUserWorkspaceStore();
@@ -24,7 +19,6 @@ const userWorkspaceGetters = userWorkspaceStore.getters;
 const userStore = useUserStore();
 
 const router = useRouter();
-const route = useRoute();
 
 const { width } = useWindowSize();
 
@@ -35,15 +29,6 @@ const storeState = reactive({
 const state = reactive({
     isTabletSize: computed(() => width.value < screens.tablet.max),
     isMobileSize: computed(() => width.value < screens.mobile.max),
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
 });
 </script>
 
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 7e177184b8..a904319ca0 100644
--- a/apps/web/src/services/landing/components/workspace-landing/LandingContents.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/LandingContents.vue
@@ -3,9 +3,9 @@ import { useWindowSize } from '@vueuse/core';
 import {
     computed, onMounted, onUnmounted, reactive,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router/composables';
 
-import { clone, sortBy } from 'lodash';
+import { sortBy } from 'lodash';
 
 import {
     PButton, PDataLoader, PDivider, screens,
@@ -18,10 +18,7 @@ import { makeAdminRouteName } from '@/router/helpers/route-helper';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import type { PageAccessMap } from '@/lib/access-control/config';
-import type { MenuId } from '@/lib/menu/config';
-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 type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
@@ -31,7 +28,6 @@ import { RECENT_TYPE } from '@/common/modules/navigations/type';
 import { gray } from '@/styles/colors';
 
 import { ADVANCED_ROUTE } from '@/services/advanced/routes/route-constant';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import LandingGroupWorkspaces from '@/services/landing/components/workspace-landing/landing-group-workspaces/LandingGroupWorkspaces.vue';
 import LandingAllWorkspaces from '@/services/landing/components/workspace-landing/LandingAllWorkspaces.vue';
 import LandingEmptyContents from '@/services/landing/components/workspace-landing/LandingEmptyContents.vue';
@@ -39,7 +35,6 @@ import LandingRecentVisits from '@/services/landing/components/workspace-landing
 import LandingSearch from '@/services/landing/components/workspace-landing/LandingSearch.vue';
 import { useLandingPageStore } from '@/services/landing/store/landing-page-store';
 
-
 const userWorkspaceStore = useUserWorkspaceStore();
 const workspaceStoreGetters = userWorkspaceStore.getters;
 const favoriteStore = useFavoriteStore();
@@ -50,7 +45,6 @@ const landingPageStore = useLandingPageStore();
 const landingPageStoreGetters = landingPageStore.getters;
 
 const router = useRouter();
-const route = useRoute();
 const { width } = useWindowSize();
 
 const userStore = useUserStore();
@@ -65,7 +59,6 @@ const storeState = reactive({
         workspaceId: i.data.workspace_id,
         itemId: i.data.id,
     }))),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
     searchText: '',
@@ -75,16 +68,7 @@ const state = reactive({
         ? storeState.workspaceList.filter((item) => item.name.toLowerCase()?.includes(state.searchText.toLowerCase()))
         : storeState.workspaceList)),
     refinedWorkspaceList: computed<WorkspaceModel[]>(() => (state.searchText ? state.searchedWorkspaceList : storeState.workspaceList)),
-    selectedMenuId: computed(() => {
-        const reversedMatched = clone(route.matched).reverse();
-        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-        const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-            return '';
-        }
-        return targetMenuId;
-    }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
+    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const handleSearch = (value: string) => {