diff --git a/apps/web/src/common/composables/current-menu-id/index.ts b/apps/web/src/common/composables/current-menu-id/index.ts
index b34a729948..e26eacdb13 100644
--- a/apps/web/src/common/composables/current-menu-id/index.ts
+++ b/apps/web/src/common/composables/current-menu-id/index.ts
@@ -1,3 +1,5 @@
+import type { Ref } from 'vue';
+import { computed, reactive, toRef } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
 import { clone } from 'lodash';
@@ -5,15 +7,22 @@ import { clone } from 'lodash';
 import { MENU_ID } from '@/lib/menu/config';
 
 
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
+interface UseCurrentMenuIdReturnType {
+    currentMenuId: Ref<string>;
+}
 
-export const useCurrentMenuId = (): string => {
+export const useCurrentMenuId = (): UseCurrentMenuIdReturnType => {
     const route = useRoute();
-    const reversedMatched = clone(route.matched).reverse();
-    const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
-    const targetMenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
-    if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
-        return '';
-    }
-    return targetMenuId;
+
+    const state = reactive({
+        currentMenuId: computed<string>(() => {
+            const reversedMatched = clone(route.matched).reverse();
+            const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
+            return closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
+        }),
+    });
+
+    return {
+        currentMenuId: toRef(state, 'currentMenuId'),
+    };
 };
diff --git a/apps/web/src/common/composables/page-editable-status/index.ts b/apps/web/src/common/composables/page-editable-status/index.ts
index ccf767d09a..a77d60f18c 100644
--- a/apps/web/src/common/composables/page-editable-status/index.ts
+++ b/apps/web/src/common/composables/page-editable-status/index.ts
@@ -1,4 +1,5 @@
-import { computed, reactive } from 'vue';
+import type { Ref } from 'vue';
+import { computed, reactive, toRef } from 'vue';
 
 import { useUserStore } from '@/store/user/user-store';
 
@@ -6,13 +7,25 @@ import type { PageAccessMap } from '@/lib/access-control/config';
 
 import { useCurrentMenuId } from '@/common/composables/current-menu-id';
 
-export const usePageEditableStatus = (): boolean|undefined => {
+interface UsePageEditableStatusReturnType {
+    hasReadWriteAccess: Ref<boolean|undefined>;
+}
+
+export const usePageEditableStatus = (): UsePageEditableStatusReturnType => {
     const userStore = useUserStore();
     const userGetters = userStore.getters;
 
+    const { currentMenuId } = useCurrentMenuId();
+
     const storeState = reactive({
         pageAccessPermissionMap: computed<PageAccessMap>(() => userGetters.pageAccessPermissionMap),
     });
 
-    return storeState.pageAccessPermissionMap[useCurrentMenuId()]?.write;
+    const state = reactive({
+        hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[currentMenuId.value]?.write),
+    });
+
+    return {
+        hasReadWriteAccess: toRef(state, 'hasReadWriteAccess'),
+    };
 };
diff --git a/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue b/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue
index 3a370213dd..39f5b9bb7c 100644
--- a/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue
+++ b/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue
@@ -49,6 +49,8 @@ const route = useRoute();
 const router = useRouter();
 const { width } = useWindowSize();
 
+const { currentMenuId } = useCurrentMenuId();
+
 const storeState = reactive({
     isHideNavRail: computed(() => gnbGetters.isHideNavRail),
     isMinimizeNavRail: computed(() => gnbGetters.isMinimizeNavRail),
@@ -89,6 +91,12 @@ const state = reactive({
         });
         return result;
     }),
+    selectedMenuId: computed<string>(() => {
+        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
+            return '';
+        }
+        return currentMenuId.value;
+    }),
 });
 
 const handleMouseEvent = (value: boolean) => {
@@ -157,7 +165,7 @@ onMounted(async () => {
                              :to="(item.type === 'header' && item.subMenuList?.length > 0) ? '' : item.to"
                              class="service-menu"
                              :class="{
-                                 'is-selected': useCurrentMenuId().split('.').includes(item.id) && item.type !== 'header',
+                                 'is-selected': state.selectedMenuId.split('.').includes(item.id) && item.type !== 'header',
                                  'is-only-label': item.type === 'header' && item.subMenuList?.length > 0
                              }"
                 >
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue
index 0ac1cff949..1e3ded313f 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue
@@ -53,6 +53,8 @@ const favoriteStore = useFavoriteStore();
 const favoriteGetters = favoriteStore.getters;
 const recentStore = useRecentStore();
 
+const { currentMenuId } = useCurrentMenuId();
+
 const router = useRouter();
 
 const selectDropdownRef = ref<PSelectDropdown|null>(null);
@@ -79,9 +81,8 @@ const selectWorkspace = (name: string): void => {
     if (!workspaceId || workspaceId === storeState.currentWorkspaceId) return;
 
     appContextStore.setGlobalGrantLoading(true);
-    const targetMenuId: string = useCurrentMenuId();
     userWorkspaceStore.setCurrentWorkspace(workspaceId);
-    router.push({ name: MENU_INFO_MAP[targetMenuId].routeName, params: { workspaceId } }).catch(() => {});
+    router.push({ name: MENU_INFO_MAP[currentMenuId.value].routeName, params: { workspaceId } }).catch(() => {});
 };
 const formatMenuItems = (menuItems: WorkspaceModel[] = []): MenuItem[] => {
     const result = menuItems.length > 0 ? [
diff --git a/apps/web/src/services/advanced/AdvancedLSB.vue b/apps/web/src/services/advanced/AdvancedLSB.vue
index 1225523c98..59c388ee0e 100644
--- a/apps/web/src/services/advanced/AdvancedLSB.vue
+++ b/apps/web/src/services/advanced/AdvancedLSB.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
-
 import { MENU_ID } from '@/lib/menu/config.js';
 
 import { useCurrentMenuId } from '@/common/composables/current-menu-id';
@@ -8,14 +6,12 @@ import { useCurrentMenuId } from '@/common/composables/current-menu-id';
 import BookmarkLSB from '@/services/advanced/components/BookmarkLSB.vue';
 import DomainSettingsLSB from '@/services/advanced/components/PreferencesLSB.vue';
 
-const state = reactive({
-    menuId: computed<string>(() => useCurrentMenuId()),
-});
+const { currentMenuId } = useCurrentMenuId();
 </script>
 
 <template>
     <fragment>
-        <bookmark-l-s-b v-if="state.menuId === MENU_ID.BOOKMARK" />
-        <domain-settings-l-s-b v-if="state.menuId === MENU_ID.PREFERENCES" />
+        <bookmark-l-s-b v-if="currentMenuId === MENU_ID.BOOKMARK" />
+        <domain-settings-l-s-b v-if="currentMenuId === MENU_ID.PREFERENCES" />
     </fragment>
 </template>
diff --git a/apps/web/src/services/advanced/components/BookmarkDetailContainer.vue b/apps/web/src/services/advanced/components/BookmarkDetailContainer.vue
index 811035b1ab..7894e19788 100644
--- a/apps/web/src/services/advanced/components/BookmarkDetailContainer.vue
+++ b/apps/web/src/services/advanced/components/BookmarkDetailContainer.vue
@@ -38,6 +38,8 @@ const bookmarkPageStore = useBookmarkPageStore();
 const bookmarkPageState = bookmarkPageStore.state;
 const bookmarkPageGetters = bookmarkPageStore.getters;
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const route = useRoute();
 const router = useRouter();
 
@@ -74,7 +76,6 @@ const state = reactive({
         return state.workspaceInfo?.name || '';
     }),
     workspaceInfo: computed<WorkspaceModel|undefined>(() => getWorkspaceInfo(state.group, storeState.workspaceList)),
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const hideMenu = () => {
@@ -186,7 +187,7 @@ onUnmounted(() => {
                                   v-bind="workspaceStateFormatter( WORKSPACE_STATE.DORMANT)"
                                   class="capitalize state"
                         />
-                        <template v-if="state.folder && state.group === 'global'">
+                        <template v-if="hasReadWriteAccess && state.folder && state.group === 'global'">
                             <div class="title-right-extra-wrapper">
                                 <p-icon-button name="ic_edit-text"
                                                style-type="transparent"
@@ -201,7 +202,7 @@ onUnmounted(() => {
                     </template>
                 </p-heading>
             </template>
-            <template v-if="state.hasReadWriteAccess"
+            <template v-if="hasReadWriteAccess"
                       #extra
             >
                 <template v-if="state.group === 'global'">
diff --git a/apps/web/src/services/advanced/components/BookmarkManagementDetailTable.vue b/apps/web/src/services/advanced/components/BookmarkManagementDetailTable.vue
index c8043a2e15..5f2e0d1732 100644
--- a/apps/web/src/services/advanced/components/BookmarkManagementDetailTable.vue
+++ b/apps/web/src/services/advanced/components/BookmarkManagementDetailTable.vue
@@ -35,6 +35,8 @@ const bookmarkPageStore = useBookmarkPageStore();
 const bookmarkPageState = bookmarkPageStore.state;
 const bookmarkPageGetters = bookmarkPageStore.getters;
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const route = useRoute();
 const router = useRouter();
 
@@ -52,7 +54,6 @@ const storeState = reactive({
 const state = reactive({
     group: computed<string>(() => route.params.group),
     folder: computed<string>(() => route.params.folder),
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 const tableState = reactive({
     fields: computed(() => [
@@ -260,7 +261,7 @@ watch([() => route.params, () => storeState.bookmarkFolderList], async ([params,
                     <span class="col-link">{{ value ?? '--' }}</span>
                 </template>
                 <template #col-action_button-format="{item}">
-                    <p-select-dropdown v-if="state.hasReadWriteAccess && item.isGlobal"
+                    <p-select-dropdown v-if="hasReadWriteAccess && item.isGlobal"
                                        :menu="getDropdownMenu(item)"
                                        style-type="icon-button"
                                        button-icon="ic_ellipsis-horizontal"
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue b/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
index 888bcd4917..5c35714b23 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
@@ -33,11 +33,10 @@ const workspaceGroupPageState = workspaceGroupPageStore.state;
 const userTabState = workspaceGroupPageStore.userTabState;
 const workspaceGroupPageGetters = workspaceGroupPageStore.getters;
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const emit = defineEmits<{(e: 'refresh', payload: { isGroupUser?: boolean, isWorkspace?: boolean }): void; }>();
 
-const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
-});
 const tableState = reactive({
     fields: computed<DataTableFieldType[]>(() => {
         const defaultFields: DataTableFieldType[] = [
@@ -46,7 +45,7 @@ const tableState = reactive({
             { name: 'state', label: 'State' },
             { name: 'role', label: 'Role' },
         ];
-        if (state.hasReadWriteAccess) {
+        if (hasReadWriteAccess.value) {
             defaultFields.push({ name: 'remove_button', label: ' ', sortable: false });
         }
         return defaultFields;
@@ -195,7 +194,7 @@ onUnmounted(() => {
                            heading-type="sub"
                 />
             </template>
-            <template v-if="state.hasReadWriteAccess"
+            <template v-if="hasReadWriteAccess"
                       #extra
             >
                 <p-button style-type="negative-primary"
@@ -223,7 +222,7 @@ onUnmounted(() => {
                          :sort-desc="userTabState.sortDesc"
                          :this-page.sync="userTabState.thisPage"
                          :search-text.sync="userTabState.searchText"
-                         :selectable="state.hasReadWriteAccess"
+                         :selectable="hasReadWriteAccess"
                          sortable
                          searchable
                          @select="handleSelect"
@@ -243,7 +242,7 @@ onUnmounted(() => {
                         use-fixed-menu-style
                         style-type="transparent"
                         class="role-select-dropdown"
-                        :disabled="!state.hasReadWriteAccess"
+                        :disabled="!hasReadWriteAccess"
                         :menu="menuList"
                         :selected.sync="selectedItems"
                         :search-text.sync="searchText"
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue b/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
index f6e7b72ad2..5a3c52f28d 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
@@ -39,12 +39,13 @@ const workspaceGroupPageGetters = workspaceGroupPageStore.getters;
 const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 interface WorkspaceTableItem extends WorkspaceModel {
     remove_button: WorkspaceModel;
 }
 
 const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     currency: computed<Currency|undefined>(() => workspaceGroupPageGetters.currency),
 });
 const tableState = reactive({
@@ -63,7 +64,7 @@ const tableState = reactive({
             { name: 'cost_info', label: 'Cost' },
             { name: 'created_at', label: 'Created' },
         ];
-        if (state.hasReadWriteAccess) {
+        if (hasReadWriteAccess.value) {
             defaultFields.push({ name: 'remove_button', label: ' ', sortable: false });
         }
         return defaultFields;
@@ -190,7 +191,7 @@ const costInfoReduce = (arr: (number | {month: any})[] | any) => {
                            heading-type="sub"
                 />
             </template>
-            <template v-if="state.hasReadWriteAccess"
+            <template v-if="hasReadWriteAccess"
                       #extra
             >
                 <p-button style-type="negative-primary"
@@ -219,7 +220,7 @@ const costInfoReduce = (arr: (number | {month: any})[] | any) => {
                          :sort-desc="workspaceTabState.sortDesc"
                          :this-page.sync="workspaceTabState.thisPage"
                          :search-text.sync="workspaceTabState.searchText"
-                         :selectable="state.hasReadWriteAccess"
+                         :selectable="hasReadWriteAccess"
                          sortable
                          searchable
                          @select="handleSelect"
diff --git a/apps/web/src/services/advanced/pages/admin/AdminBookmarkPage.vue b/apps/web/src/services/advanced/pages/admin/AdminBookmarkPage.vue
index 2445f6e040..adb5575ec0 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminBookmarkPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminBookmarkPage.vue
@@ -27,6 +27,8 @@ const bookmarkPageStore = useBookmarkPageStore();
 const bookmarkPageState = bookmarkPageStore.state;
 const bookmarkPageGetters = bookmarkPageStore.getters;
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const storeState = reactive({
     modalType: computed<BookmarkModalType|undefined>(() => bookmarkState.modal.type),
 
@@ -46,7 +48,6 @@ const state = reactive({
             name: BOOKMARK_MODAL_TYPE.FOLDER,
         },
     ])),
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const hideMenu = () => {
@@ -76,7 +77,7 @@ const handleClickDeleteButton = () => {
             <template #heading>
                 <p-heading :title="$t('IAM.BOOKMARK.ALL_BOOKMARK')" />
             </template>
-            <template v-if="state.hasReadWriteAccess"
+            <template v-if="hasReadWriteAccess"
                       #extra
             >
                 <p-button style-type="tertiary"
@@ -105,7 +106,7 @@ const handleClickDeleteButton = () => {
                 </div>
             </template>
         </p-heading-layout>
-        <bookmark-management-table :has-read-write-access="state.hasReadWriteAccess" />
+        <bookmark-management-table :has-read-write-access="hasReadWriteAccess" />
     </div>
 </template>
 
diff --git a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAppearancePage.vue b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAppearancePage.vue
index d16345bdfc..77017fb5c2 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAppearancePage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAppearancePage.vue
@@ -17,6 +17,8 @@ const router = useRouter();
 const domainConfigStore = usePreferencesStore();
 const domainConfigGetters = domainConfigStore.getters;
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const state = reactive({
     isChanged: computed<boolean>(() => {
         if ([state.wordtypeLogoUrl, state.symbolFaviconUrl, state.loginPageImageUrl, state.displayName,
@@ -31,7 +33,6 @@ const state = reactive({
     wordtypeLogoUrl: undefined as string | undefined,
     symbolFaviconUrl: undefined as string | undefined,
     loginPageImageUrl: undefined as string | undefined,
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* Event */
@@ -72,7 +73,7 @@ watch(() => domainConfigGetters.loginPageImageUrl, (val) => {
                     <p-field-title label="Display Name" />
                     <p-text-input :value.sync="state.displayName"
                                   :placeholder="domainConfigGetters.displayName"
-                                  :disabled="!state.hasReadWriteAccess"
+                                  :disabled="!hasReadWriteAccess"
                     />
                     <div class="description">
                         {{ $t('IAM.DOMAIN_SETTINGS.DOMAIN_NAME_IMAGE_DESCRIPTION') }}
@@ -88,7 +89,7 @@ watch(() => domainConfigGetters.loginPageImageUrl, (val) => {
                 <div class="left-part">
                     <p-field-title label="Wordtype Logo URL" />
                     <p-text-input :value.sync="state.wordtypeLogoUrl"
-                                  :disabled="!state.hasReadWriteAccess"
+                                  :disabled="!hasReadWriteAccess"
                     />
                     <div class="description">
                         {{ $t('IAM.DOMAIN_SETTINGS.WORDTYPE_LOGO_DESCRIPTION') }}
@@ -104,7 +105,7 @@ watch(() => domainConfigGetters.loginPageImageUrl, (val) => {
                 <div class="left-part">
                     <p-field-title label="Symbol & Favicon URL" />
                     <p-text-input :value.sync="state.symbolFaviconUrl"
-                                  :disabled="!state.hasReadWriteAccess"
+                                  :disabled="!hasReadWriteAccess"
                     />
                     <div class="description">
                         {{ $t('IAM.DOMAIN_SETTINGS.SYMBOL_FAVICON_DESCRIPTION') }}
@@ -120,7 +121,7 @@ watch(() => domainConfigGetters.loginPageImageUrl, (val) => {
                 <div class="left-part">
                     <p-field-title label="Sign In Page Main Image URL" />
                     <p-text-input :value.sync="state.loginPageImageUrl"
-                                  :disabled="!state.hasReadWriteAccess"
+                                  :disabled="!hasReadWriteAccess"
                     />
                     <div class="description">
                         {{ $t('IAM.DOMAIN_SETTINGS.SIGN_IN_PAGE_MAIN_IMAGE_DESCRIPTION') }}
@@ -133,7 +134,7 @@ watch(() => domainConfigGetters.loginPageImageUrl, (val) => {
                 </div>
             </div>
         </div>
-        <p-button :disabled="!state.hasReadWriteAccess || !state.isChanged"
+        <p-button :disabled="!hasReadWriteAccess || !state.isChanged"
                   class="save-button"
                   @click="handleSaveChanges"
         >
diff --git a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue
index 0ae5440c66..becd250f14 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue
@@ -35,6 +35,8 @@ import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-const
 
 const router = useRouter();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const state = reactive({
     currency: undefined as Currency|undefined,
     toggleText: computed<string>(() => (state.statusToggle
@@ -51,7 +53,6 @@ const state = reactive({
     }),
     statusToggle: false,
     checkbox: false,
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const {
@@ -168,7 +169,7 @@ onMounted(async () => {
             <div class="toggle-wrapper">
                 <p-toggle-button :value.sync="state.statusToggle"
                                  class="toggle-button"
-                                 :disabled="!state.hasReadWriteAccess"
+                                 :disabled="!hasReadWriteAccess"
                                  @change-toggle="handleChangeToggleButton"
                 />
                 <p class="toggle-text">
@@ -222,7 +223,7 @@ onMounted(async () => {
                             <div class="cost-input">
                                 <p-text-input :value="state.statusToggle ? cost : undefined"
                                               :invalid="invalid"
-                                              :disabled="!state.hasReadWriteAccess || !state.statusToggle"
+                                              :disabled="!hasReadWriteAccess || !state.statusToggle"
                                               masking-mode
                                               class="cost-input"
                                               @update:value="handleUpdateCost"
@@ -233,7 +234,7 @@ onMounted(async () => {
                     </p-field-group>
                     <p-divider class="divider" />
                     <p-checkbox v-model="state.checkbox"
-                                :disabled="!state.hasReadWriteAccess || !state.statusToggle"
+                                :disabled="!hasReadWriteAccess || !state.statusToggle"
                     >
                         <span>{{ $t('IAM.DOMAIN_SETTINGS.AUTO_DORMANCY_CONFIGURATION_CHECKBOX') }}</span>
                     </p-checkbox>
@@ -247,7 +248,7 @@ onMounted(async () => {
                 </div>
             </div>
             <p-button v-if="state.statusToggle"
-                      :disabled="!state.hasReadWriteAccess || !isAllValid || !state.isChanged"
+                      :disabled="!hasReadWriteAccess || !isAllValid || !state.isChanged"
                       class="save-button"
                       @click="handleSaveConfig"
             >
diff --git a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsDomainInformationPage.vue b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsDomainInformationPage.vue
index 8998b6631b..dbb8cb2c10 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsDomainInformationPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsDomainInformationPage.vue
@@ -24,6 +24,8 @@ const domainConfigStore = usePreferencesStore();
 const domainConfigGetters = domainConfigStore.getters;
 const domainStore = useDomainStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const storeState = reactive({
     domainId: computed<string>(() => domainStore.state.domainId),
     domainName: computed<string>(() => domainStore.state.name),
@@ -45,7 +47,6 @@ const state = reactive({
     timezoneMenuList: computed<SelectDropdownMenuItem[]>(() => map(timezoneList, (d) => ({
         type: 'item', label: d === 'UTC' ? `${d} (default)` : d, name: d,
     }))),
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* Event */
@@ -92,7 +93,7 @@ watch(() => domainConfigGetters.language, (val) => {
                 <p-select-dropdown :menu="state.timezoneMenuList"
                                    :selected.sync="state.selectedTimezone"
                                    :page-size="10"
-                                   :disabled="!state.hasReadWriteAccess"
+                                   :disabled="!hasReadWriteAccess"
                                    is-fixed-width
                                    is-filterable
                 />
@@ -102,12 +103,12 @@ watch(() => domainConfigGetters.language, (val) => {
                 <p-select-dropdown :menu="state.languageMenuList"
                                    :selected.sync="state.selectedLanguage"
                                    :page-size="10"
-                                   :disabled="!state.hasReadWriteAccess"
+                                   :disabled="!hasReadWriteAccess"
                                    is-filterable
                 />
             </div>
         </div>
-        <p-button :disabled="!state.hasReadWriteAccess || !state.isChanged"
+        <p-button :disabled="!hasReadWriteAccess || !state.isChanged"
                   class="save-button"
                   @click="handleSaveChanges"
         >
diff --git a/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue b/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
index dc3f273d15..64270da367 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onUnmounted, reactive } from 'vue';
+import { onUnmounted } from 'vue';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
@@ -29,15 +29,13 @@ import type { WorkspaceGroupFetchParameters } from '@/services/advanced/types/ad
 const workspaceGroupPageStore = useWorkspaceGroupPageStore();
 const workspaceGroupPageState = workspaceGroupPageStore.state;
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const workspaceGroupListApiQueryHelper = new ApiQueryHelper()
     .setPageStart(workspaceGroupPageState.pageStart).setPageLimit(workspaceGroupPageState.pageLimit)
     .setSort('name', true);
 const workspaceGroupListApiQuery = workspaceGroupListApiQueryHelper.data;
 
-const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
-});
-
 const fetchWorkspaceGroups = async (tabRefresh:WorkspaceGroupFetchParameters = { isGroupUser: false, isWorkspace: false }) => {
     workspaceGroupPageState.loading = true;
 
@@ -89,11 +87,11 @@ onUnmounted(() => {
 
 <template>
     <section class="workspace-group-page">
-        <workspace-group-header :has-read-write-access="state.hasReadWriteAccess" />
+        <workspace-group-header :has-read-write-access="hasReadWriteAccess" />
         <p-horizontal-layout class="user-group-toolbox-layout">
             <template #container="{ height }">
                 <workspace-group-table :table-height="height"
-                                       :has-read-write-access="state.hasReadWriteAccess"
+                                       :has-read-write-access="hasReadWriteAccess"
                                        @confirm="fetchWorkspaceGroups"
                 />
             </template>
diff --git a/apps/web/src/services/advanced/pages/admin/AdminWorkspacesPage.vue b/apps/web/src/services/advanced/pages/admin/AdminWorkspacesPage.vue
index 1bc7bed7c0..0c58460bfa 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminWorkspacesPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminWorkspacesPage.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Vue, {
-    computed,
     onMounted, onUnmounted, reactive,
 } from 'vue';
 import { useRoute } from 'vue-router/composables';
@@ -32,11 +31,10 @@ const workspacePageStore = useWorkspacePageStore();
 const workspacePageState = workspacePageStore.$state;
 const userPageStore = useUserPageStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const route = useRoute();
 
-const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
-});
 const modalState = reactive({
     createType: '' as 'CREATE'|'EDIT',
     createModalVisible: false,
@@ -146,7 +144,7 @@ onUnmounted(() => {
                            use-total-count
                 />
             </template>
-            <template v-if="state.hasReadWriteAccess"
+            <template v-if="hasReadWriteAccess"
                       #extra
             >
                 <p-button style-type="primary"
@@ -160,29 +158,29 @@ onUnmounted(() => {
         <p-horizontal-layout class="workspace-toolbox-layout">
             <template #container="{ height }">
                 <workspace-management-table :table-height="height"
-                                            :has-read-write-access="state.hasReadWriteAccess"
+                                            :has-read-write-access="hasReadWriteAccess"
                                             @select-action="handleSelectAction"
                 />
             </template>
         </p-horizontal-layout>
-        <workspaces-user-management-tab :has-read-write-access="state.hasReadWriteAccess" />
+        <workspaces-user-management-tab :has-read-write-access="hasReadWriteAccess" />
         <workspaces-create-modal
-            v-if="state.hasReadWriteAccess"
+            v-if="hasReadWriteAccess"
             :visible.sync="modalState.createModalVisible"
             :create-type="modalState.createType"
             @confirm="handleConfirm"
             @refresh="refreshWorkspaceList"
         />
-        <workspaces-delete-modal v-if="state.hasReadWriteAccess"
+        <workspaces-delete-modal v-if="hasReadWriteAccess"
                                  :visible.sync="modalState.deleteModalVisible"
                                  @refresh="refreshWorkspaceList"
         />
-        <workspaces-set-enable-modal v-if="state.hasReadWriteAccess"
+        <workspaces-set-enable-modal v-if="hasReadWriteAccess"
                                      :visible.sync="modalState.setEnableModalVisible"
                                      :enable-modal-type="modalState.enableState"
                                      @refresh="refreshWorkspaceList"
         />
-        <user-management-add-modal v-if="state.hasReadWriteAccess"
+        <user-management-add-modal v-if="hasReadWriteAccess"
                                    @confirm="refreshWorkspaceList"
         />
     </section>
diff --git a/apps/web/src/services/alert-manager/pages/AlertDetailPage.vue b/apps/web/src/services/alert-manager/pages/AlertDetailPage.vue
index f587005354..aa9f9b98b1 100644
--- a/apps/web/src/services/alert-manager/pages/AlertDetailPage.vue
+++ b/apps/web/src/services/alert-manager/pages/AlertDetailPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { reactive } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
@@ -34,12 +34,13 @@ const props = defineProps({
 const alertPageStore = useAlertPageStore();
 const alertPageState = alertPageStore.state;
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const router = useRouter();
 
 const state = reactive({
     loading: true,
     alertTitleEditFormVisible: false,
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const checkDeleteState = reactive({
@@ -97,7 +98,7 @@ const alertTitleEditConfirm = async () => {
         >
             <template #title-right-extra>
                 <span class="alert-number">#{{ alertPageState.alertData?.alert_number }}</span>
-                <span v-if="state.hasReadWriteAccess"
+                <span v-if="hasReadWriteAccess"
                       class="title-btn"
                 >
                     <p-icon-button name="ic_edit-text"
@@ -116,13 +117,13 @@ const alertTitleEditConfirm = async () => {
                 <div class="main-contents">
                     <alert-detail-summary
                         :id="props.id"
-                        :has-read-write-access="state.hasReadWriteAccess"
+                        :has-read-write-access="hasReadWriteAccess"
                         class="header"
                     />
 
                     <alert-detail-info-table
                         :id="props.id"
-                        :has-read-write-access="state.hasReadWriteAccess"
+                        :has-read-write-access="hasReadWriteAccess"
                         class="info"
                     />
                     <alert-detail-tabs
@@ -138,7 +139,7 @@ const alertTitleEditConfirm = async () => {
                                      :alert-data="alertPageState.alertData"
                     />
                     <alert-detail-note
-                        v-if="state.hasReadWriteAccess"
+                        v-if="hasReadWriteAccess"
                         :id="props.id"
                         class="note"
                     />
diff --git a/apps/web/src/services/alert-manager/pages/EscalationPolicyPage.vue b/apps/web/src/services/alert-manager/pages/EscalationPolicyPage.vue
index 311737e128..69de8d8980 100644
--- a/apps/web/src/services/alert-manager/pages/EscalationPolicyPage.vue
+++ b/apps/web/src/services/alert-manager/pages/EscalationPolicyPage.vue
@@ -61,6 +61,8 @@ const { query } = router.currentRoute;
 const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 /* Search Tag */
 const queryTagsHelper = useQueryTags({
     keyItemSets: computed<KeyItemSet[]>(() => [{
@@ -128,7 +130,6 @@ const state = reactive({
     deleteModalVisible: false,
     formModalVisible: false,
     formMode: undefined as ActionMode|undefined,
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* api */
@@ -234,7 +235,7 @@ const onChange = async (options: ToolboxOptions = {}) => {
                 @change="onChange"
                 @refresh="onChange()"
             >
-                <template v-if="state.hasReadWriteAccess"
+                <template v-if="hasReadWriteAccess"
                           #left-area
                 >
                     <p-button class="create-button"
@@ -258,7 +259,7 @@ const onChange = async (options: ToolboxOptions = {}) => {
             <escalation-policy-data-table
                 :items="state.items"
                 :loading="tableState.loading"
-                :has-read-write-access="state.hasReadWriteAccess"
+                :has-read-write-access="hasReadWriteAccess"
                 :select-index.sync="state.selectIndex"
                 @change="onChange"
             />
diff --git a/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue b/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue
index b4415e126a..524dbc96e2 100644
--- a/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue
+++ b/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
-
 import { MENU_ID } from '@/lib/menu/config.js';
 
 import { useCurrentMenuId } from '@/common/composables/current-menu-id';
@@ -9,15 +7,13 @@ import CloudServiceLSB from '@/services/asset-inventory/components/CloudServiceL
 import MetricExplorerLSB from '@/services/asset-inventory/components/MetricExplorerLSB.vue';
 import SecurityLSB from '@/services/asset-inventory/components/SecurityLSB.vue';
 
-const state = reactive({
-    menuId: computed<string>(() => useCurrentMenuId()),
-});
+const { currentMenuId } = useCurrentMenuId();
 </script>
 
 <template>
     <fragment>
-        <cloud-service-l-s-b v-if="state.menuId === MENU_ID.CLOUD_SERVICE" />
-        <metric-explorer-l-s-b v-else-if="state.menuId === MENU_ID.METRIC_EXPLORER" />
-        <security-l-s-b v-else-if="state.menuId === MENU_ID.SECURITY" />
+        <cloud-service-l-s-b v-if="currentMenuId === MENU_ID.CLOUD_SERVICE" />
+        <metric-explorer-l-s-b v-else-if="currentMenuId === MENU_ID.METRIC_EXPLORER" />
+        <security-l-s-b v-else-if="currentMenuId === MENU_ID.SECURITY" />
     </fragment>
 </template>
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue b/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue
index ecf7468926..64a87659e7 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue
@@ -37,6 +37,8 @@ const emit = defineEmits<{(e: 'refresh-note-count'): void}>();
 
 const userStore = useUserStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const state = reactive({
     id: '',
     noteInput: '',
@@ -50,7 +52,6 @@ const state = reactive({
     ]),
     selectedNoteIdForDelete: '',
     totalCount: 0,
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const handleChangeNoteInput = (e) => {
@@ -159,7 +160,7 @@ watch(() => state.id, () => {
                             <span class="author">{{ title }}</span>
                             <span class="date">{{ iso8601Formatter(state.noteList[index].created_at, state.timezone) }}</span>
                         </p>
-                        <p-select-dropdown v-if="state.hasReadWriteAccess"
+                        <p-select-dropdown v-if="hasReadWriteAccess"
                                            style-type="icon-button"
                                            button-icon="ic_ellipsis-horizontal"
                                            :menu="state.menuItems"
@@ -176,7 +177,7 @@ watch(() => state.id, () => {
                 </template>
             </p-collapsible-list>
         </article>
-        <article v-if="state.hasReadWriteAccess"
+        <article v-if="hasReadWriteAccess"
                  class="add-note-wrapper"
         >
             <p-textarea :value="state.noteInput"
diff --git a/apps/web/src/services/asset-inventory/components/CollectorMainContents.vue b/apps/web/src/services/asset-inventory/components/CollectorMainContents.vue
index f76c24373a..404e4ccefb 100644
--- a/apps/web/src/services/asset-inventory/components/CollectorMainContents.vue
+++ b/apps/web/src/services/asset-inventory/components/CollectorMainContents.vue
@@ -75,7 +75,9 @@ const collectorPageStore = useCollectorPageStore();
 const collectorPageState = collectorPageStore.state;
 const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
+
 const { getProperRouteLocation, isAdminMode } = useProperRouteLocation();
+const { hasReadWriteAccess } = usePageEditableStatus();
 
 const storeState = reactive({
     plugins: computed<PluginReferenceMap>(() => allReferenceStore.getters.plugin),
@@ -117,7 +119,6 @@ const historyLinkQueryHelper = new QueryHelper();
 
 const state = reactive({
     loading: computed(() => collectorPageState.loading.collectorList),
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     searchTags: computed(() => {
         const tags = searchQueryHelper.setFilters(collectorPageState.searchFilters).queryTags;
         return tags.reduce((r: QueryItem[], d: any): QueryItem[] => {
@@ -265,7 +266,7 @@ onMounted(async () => {
             @refresh="fetchCollectorList"
             @export="handleExportExcel"
         >
-            <template v-if="state.hasReadWriteAccess"
+            <template v-if="hasReadWriteAccess"
                       #left-area
             >
                 <p-button
@@ -287,7 +288,7 @@ onMounted(async () => {
                      @click="handleClickListItem(item.detailLink)"
                 >
                     <collector-content-item :item="item"
-                                            :has-read-write-access="state.hasReadWriteAccess"
+                                            :has-read-write-access="hasReadWriteAccess"
                     />
                 </div>
             </div>
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue
index 3498e14b87..13e40c7725 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue
@@ -48,6 +48,8 @@ const metricExplorerPageGetters = metricExplorerPageStore.getters;
 const allReferenceStore = useAllReferenceStore();
 const appContextStore = useAppContextStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const router = useRouter();
 const route = useRoute();
 
@@ -57,7 +59,6 @@ const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 const state = reactive({
-    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),
@@ -67,7 +68,7 @@ const state = reactive({
     metricDeleteModalVisible: false,
     loadingDuplicate: false,
     selectedNameFormModalType: undefined as string|undefined,
-    saveDropdownMenuItems: computed<MenuItem[]>(() => (state.hasReadWriteAccess ? [
+    saveDropdownMenuItems: computed<MenuItem[]>(() => (hasReadWriteAccess.value ? [
         {
             type: 'item',
             name: 'saveAs',
@@ -89,13 +90,13 @@ const state = reactive({
         return i18n.t('INVENTORY.METRIC_EXPLORER.DELETE_CUSTOM_METRIC');
     }),
     editQueryTitle: computed<TranslateResult>(() => {
-        if (!state.hasReadWriteAccess || state.isManagedMetric || state.currentMetricExampleId) {
+        if (!hasReadWriteAccess.value || state.isManagedMetric || state.currentMetricExampleId) {
             return i18n.t('INVENTORY.METRIC_EXPLORER.VIEW_QUERY');
         }
         return i18n.t('INVENTORY.METRIC_EXPLORER.EDIT_QUERY');
     }),
     editQueryButtonIcon: computed<string>(() => {
-        if (!state.hasReadWriteAccess || state.isManagedMetric || state.currentMetricExampleId) {
+        if (!hasReadWriteAccess.value || state.isManagedMetric || state.currentMetricExampleId) {
             return 'ic_editor-code';
         }
         return 'ic_edit';
@@ -252,7 +253,7 @@ const handleClickMoreMenuButton = () => {
     else showContextMenu();
 };
 const handleOpenEditQuery = () => {
-    if (!state.hasReadWriteAccess || state.isManagedMetric || state.currentMetricExampleId) {
+    if (!hasReadWriteAccess.value || state.isManagedMetric || state.currentMetricExampleId) {
         metricExplorerPageStore.openMetricQueryFormSidebar('VIEW');
     } else {
         metricExplorerPageStore.openMetricQueryFormSidebar('UPDATE');
@@ -287,12 +288,12 @@ const handleOpenEditQuery = () => {
                         <div v-if="!state.isManagedMetric"
                              class="title-right-extra icon-wrapper"
                         >
-                            <p-icon-button v-if="state.hasReadWriteAccess"
+                            <p-icon-button v-if="hasReadWriteAccess"
                                            name="ic_edit-text"
                                            size="md"
                                            @click.stop="handleClickEditName"
                             />
-                            <p-icon-button v-if="state.hasReadWriteAccess"
+                            <p-icon-button v-if="hasReadWriteAccess"
                                            name="ic_delete"
                                            size="md"
                                            style-type="negative-transparent"
@@ -312,7 +313,7 @@ const handleOpenEditQuery = () => {
                 >
                     {{ state.editQueryTitle }}
                 </p-button>
-                <template v-if="state.hasReadWriteAccess">
+                <template v-if="hasReadWriteAccess">
                     <template v-if="!state.currentMetricExampleId">
                         <p-button v-if="state.isDuplicateEnabled"
                                   style-type="tertiary"
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetric.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetric.vue
index 266db7eb57..5a6d4d609f 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetric.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetric.vue
@@ -38,7 +38,10 @@ const props = defineProps<Props>();
 const allReferenceStore = useAllReferenceStore();
 const metricExplorerPageStore = useMetricExplorerPageStore();
 const metricExplorerPageState = metricExplorerPageStore.state;
+
 const { getProperRouteLocation } = useProperRouteLocation();
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const route = useRoute();
 
 const storeState = reactive({
@@ -53,7 +56,6 @@ const storeState = reactive({
     selectedNamespace: computed<NamespaceSubItemType|undefined>(() => metricExplorerPageState.selectedNamespace),
 });
 const state = reactive({
-    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;
@@ -187,7 +189,7 @@ watch(() => storeState.selectedNamespace, async (selectedNamespace) => {
                         <span class="type">{{ storeState.selectedNamespace?.label.split('/')[1] }}</span>
                     </p-tooltip>
                 </div>
-                <p-icon-button v-if="state.hasReadWriteAccess && storeState.selectedNamespace?.group !== 'common'"
+                <p-icon-button v-if="hasReadWriteAccess && storeState.selectedNamespace?.group !== 'common'"
                                style-type="tertiary"
                                name="ic_plus"
                                shape="square"
diff --git a/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue b/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue
index 163188087e..aae589f669 100644
--- a/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/CollectorDetailPage.vue
@@ -81,6 +81,8 @@ const collectorJobState = collectorJobStore.$state;
 const collectorDataModalStore = useCollectorDataModalStore();
 const collectorDetailPageStore = useCollectorDetailPageStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const userStore = useUserStore();
 
 watch(() => collectorFormState.originCollector, async (collector) => {
@@ -94,7 +96,6 @@ watch(() => collectorFormState.originCollector, async (collector) => {
 const queryHelper = new QueryHelper();
 
 const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     isNotiVisible: computed(() => !collectorDetailPageStore.getters.isEditableCollector),
     isDomainAdmin: computed(() => userStore.getters.isDomainAdmin),
     loading: true,
@@ -299,21 +300,21 @@ onUnmounted(() => {
 
         <collector-base-info-section class="section"
                                      :history-link="state.collectorHistoryLink"
-                                     :has-read-write-access="state.hasReadWriteAccess"
+                                     :has-read-write-access="hasReadWriteAccess"
         />
         <collector-schedule-section class="section"
-                                    :has-read-write-access="state.hasReadWriteAccess"
+                                    :has-read-write-access="hasReadWriteAccess"
         />
         <collector-options-section class="section"
                                    data-test-id="collector-options-section"
-                                   :has-read-write-access="state.hasReadWriteAccess"
+                                   :has-read-write-access="hasReadWriteAccess"
         />
         <collector-additional-rule class="section"
                                    :collector-id="props.collectorId"
-                                   :has-read-write-access="state.hasReadWriteAccess"
+                                   :has-read-write-access="hasReadWriteAccess"
         />
         <collector-service-accounts-section class="section"
-                                            :has-read-write-access="state.hasReadWriteAccess"
+                                            :has-read-write-access="hasReadWriteAccess"
         />
 
         <p-double-check-modal :visible.sync="state.deleteModalVisible"
diff --git a/apps/web/src/services/asset-inventory/pages/ServiceAccountDetailPage.vue b/apps/web/src/services/asset-inventory/pages/ServiceAccountDetailPage.vue
index 32b2278c8d..4268c0f2a7 100644
--- a/apps/web/src/services/asset-inventory/pages/ServiceAccountDetailPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/ServiceAccountDetailPage.vue
@@ -55,7 +55,9 @@ const serviceAccountPageStore = useServiceAccountPageStore();
 const allReferenceStore = useAllReferenceStore();
 const appContextStore = useAppContextStore();
 const userStore = useUserStore();
+
 const { getProperRouteLocation } = useProperRouteLocation();
+const { hasReadWriteAccess } = usePageEditableStatus();
 
 const storeState = reactive({
     providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
@@ -68,7 +70,6 @@ const storeState = reactive({
 });
 const state = reactive({
     loading: true,
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     originServiceAccountItem: computed(() => serviceAccountPageStore.state.originServiceAccountItem),
     serviceAccountType: computed(() => serviceAccountPageStore.state.serviceAccountType),
     isTrustedAccount: computed(() => state.serviceAccountType === ACCOUNT_TYPE.TRUSTED),
@@ -95,7 +96,7 @@ const state = reactive({
     deleteModalVisible: false,
     editModalVisible: false,
     isManagedTrustedAccount: computed(() => state.originServiceAccountItem.workspace_id === '*'),
-    isEditable: computed<boolean>(() => state.hasReadWriteAccess && (!state.isManagedTrustedAccount || storeState.isAdminMode)),
+    isEditable: computed<boolean>(() => (hasReadWriteAccess.value || false) && (!state.isManagedTrustedAccount || storeState.isAdminMode)),
 });
 
 /* Api */
@@ -218,7 +219,7 @@ watch(() => props.serviceAccountId, async (serviceAccountId) => {
             <service-account-attached-general-accounts v-if="state.isTrustedAccount && props.serviceAccountId"
                                                        :service-account-id="props.serviceAccountId"
                                                        :attached-general-accounts.sync="state.attachedGeneralAccounts"
-                                                       :has-read-write-access="state.hasReadWriteAccess"
+                                                       :has-read-write-access="hasReadWriteAccess"
             />
             <service-account-cluster v-if="state.isKubernetesAgentMode"
                                      :service-account-id="props.serviceAccountId"
diff --git a/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue b/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue
index 2cad20536b..c63895f00b 100644
--- a/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue
@@ -82,13 +82,14 @@ const userWorkspaceStore = useUserWorkspaceStore();
 const appContextStore = useAppContextStore();
 const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
+
 const { getProperRouteLocation } = useProperRouteLocation();
+const { hasReadWriteAccess } = usePageEditableStatus();
 
 const storeState = reactive({
     currency: computed<Currency|undefined>(() => serviceAccountPageGetters.currency),
 });
 const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     trustedAccounts: computed(() => allReferenceStore.getters.trustedAccount),
     providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
@@ -386,7 +387,7 @@ onMounted(async () => {
                     </p-heading>
                 </template>
                 <template #extra>
-                    <p-button v-if="state.hasReadWriteAccess"
+                    <p-button v-if="hasReadWriteAccess"
                               style-type="primary"
                               icon-left="ic_plus_bold"
                               :disabled="tableState.isTrustedAccount && tableState.isWorkspaceMember"
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 65adf4fe60..1739a5e6eb 100644
--- a/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorDetailPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorDetailPage.vue
@@ -11,7 +11,7 @@
                                 width="20rem"
                                 height="1.5rem"
                     />
-                    <template v-if="state.hasReadWriteAccess && state.collectorName && collectorDetailPageStore.getters.isEditableCollector"
+                    <template v-if="hasReadWriteAccess && state.collectorName && collectorDetailPageStore.getters.isEditableCollector"
                               #title-right-extra
                     >
                         <span class="title-right-button-wrapper">
@@ -34,7 +34,7 @@
                 <div v-if="collectorJobStore.AllJobsInfoLoaded"
                      class="collector-button-box"
                 >
-                    <collect-data-button-group v-if="state.hasReadWriteAccess"
+                    <collect-data-button-group v-if="hasReadWriteAccess"
                                                @collect="handleCollectData"
                     />
                     <router-link v-if="collectorJobStore.hasJobs"
@@ -52,14 +52,14 @@
 
         <collector-base-info-section class="section"
                                      :history-link="state.collectorHistoryLink"
-                                     :has-read-write-access="state.hasReadWriteAccess"
+                                     :has-read-write-access="hasReadWriteAccess"
         />
         <collector-schedule-section class="section"
-                                    :has-read-write-access="state.hasReadWriteAccess"
+                                    :has-read-write-access="hasReadWriteAccess"
         />
         <collector-options-section class="section"
                                    data-test-id="collector-options-section"
-                                   :has-read-write-access="state.hasReadWriteAccess"
+                                   :has-read-write-access="hasReadWriteAccess"
         />
         <collector-additional-rule class="section"
                                    :collector-id="props.collectorId"
@@ -168,11 +168,11 @@ watch(() => collectorFormState.originCollector, async (collector) => {
 });
 
 const { getProperRouteLocation } = useProperRouteLocation();
+const { hasReadWriteAccess } = usePageEditableStatus();
 
 const queryHelper = new QueryHelper();
 
 const state = reactive({
-    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/CostExplorerLSB.vue b/apps/web/src/services/cost-explorer/CostExplorerLSB.vue
index 5082482e96..4c71146bff 100644
--- a/apps/web/src/services/cost-explorer/CostExplorerLSB.vue
+++ b/apps/web/src/services/cost-explorer/CostExplorerLSB.vue
@@ -8,18 +8,25 @@ import { useCurrentMenuId } from '@/common/composables/current-menu-id';
 
 import CostAdvancedSettingsLSB from '@/services/cost-explorer/components/CostAdvancedSettingsLSB.vue';
 import CostAnalysisLSB from '@/services/cost-explorer/components/CostAnalysisLSB.vue';
+import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 const route = useRoute();
 
-const state = reactive({
-    selectedMenuId: computed<string>(() => useCurrentMenuId()),
+const { currentMenuId } = useCurrentMenuId();
 
+const state = reactive({
+    menuId: computed<string>(() => {
+        if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
+            return '';
+        }
+        return currentMenuId.value;
+    }),
 });
 </script>
 
 <template>
     <aside class="sidebar-menu">
-        <cost-analysis-l-s-b v-if="state.selectedMenuId === MENU_ID.COST_ANALYSIS" />
+        <cost-analysis-l-s-b v-if="state.menuId === MENU_ID.COST_ANALYSIS" />
         <cost-advanced-settings-l-s-b v-if="route.name.includes(MENU_ID.COST_ADVANCED_SETTINGS)" />
     </aside>
 </template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
index e1740dc8c7..d5a6cf5f4d 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
@@ -36,6 +36,8 @@ const budgetPageState = budgetPageStore.$state;
 const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const router = useRouter();
 
 const storeState = reactive({
@@ -44,7 +46,6 @@ const storeState = reactive({
     dataSourceMap: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
 });
 const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     budgetData: computed<BudgetModel|null>(() => budgetPageState.budgetData),
     isProjectTarget: computed(() => state.budgetData?.resource_group === 'PROJECT'),
     dataSourceName: computed(() => {
@@ -80,7 +81,7 @@ const handleClickBackButton = () => {
                     <template v-if="!props.loading"
                               #title-right-extra
                     >
-                        <p-icon-button v-if="state.hasReadWriteAccess && (storeState.isAdminMode || (state.isProjectTarget && storeState.isWorkspaceOwner))"
+                        <p-icon-button v-if="hasReadWriteAccess && (storeState.isAdminMode || (state.isProjectTarget && storeState.isWorkspaceOwner))"
                                        name="ic_delete"
                                        @click="handleClickDelete"
                         />
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
index f5e99573ec..69a181ac4e 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
@@ -50,6 +50,8 @@ const favoriteGetters = favoriteStore.getters;
 const userWorkspaceStore = useUserWorkspaceStore();
 const appContextStore = useAppContextStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const router = useRouter();
 
 const storeState = reactive({
@@ -57,7 +59,6 @@ const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 const state = reactive({
-    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),
@@ -69,7 +70,7 @@ const state = reactive({
     selectedQuerySetId: undefined as string|undefined,
     queryFormModalVisible: false,
     queryDeleteModalVisible: false,
-    isEditableQuerySet: computed<boolean>(() => state.hasReadWriteAccess && costAnalysisPageGetters.selectedQueryId !== DYNAMIC_COST_QUERY_SET_PARAMS),
+    isEditableQuerySet: computed<boolean>(() => (hasReadWriteAccess.value || false) && costAnalysisPageGetters.selectedQueryId !== DYNAMIC_COST_QUERY_SET_PARAMS),
     favoriteOptions: computed<FavoriteOptions>(() => ({
         type: FAVORITE_TYPE.COST_ANALYSIS,
         id: state.isManagedCostQuerySet
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
index f65dbb95b9..57a1f74e7a 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
@@ -52,6 +52,7 @@ const contextMenuRef = ref<any|null>(null);
 const targetRef = ref<HTMLElement | null>(null);
 
 const { getProperRouteLocation } = useProperRouteLocation();
+const { hasReadWriteAccess } = usePageEditableStatus();
 const { height: filtersPopperHeight } = useElementSize(filtersPopperRef);
 
 const storeState = reactive({
@@ -59,7 +60,6 @@ const storeState = reactive({
 });
 const state = reactive({
     queryFormModalVisible: false,
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     saveDropdownMenuItems: computed<MenuItem[]>(() => ([
         {
             type: 'item',
@@ -268,7 +268,7 @@ onMounted(async () => {
                     </template>
                 </p-popover>
             </div>
-            <div v-if="state.hasReadWriteAccess"
+            <div v-if="hasReadWriteAccess"
                  ref="rightPartRef"
                  class="right-part"
             >
diff --git a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue
index 25efb22977..096a74d47d 100644
--- a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue
+++ b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue
@@ -19,12 +19,11 @@ import { useDataSourcesPageStore } from '@/services/cost-explorer/stores/data-so
 const dataSourcesPageStore = useDataSourcesPageStore();
 const dataSourcesPageState = dataSourcesPageStore.state;
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const storeState = reactive({
     activeTab: computed<string>(() => dataSourcesPageState.activeTab),
 });
-const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
-});
 const tabState = reactive({
     tabs: computed(() => [
         { name: 'detail', label: i18n.t('BILLING.COST_MANAGEMENT.DATA_SOURCES.TAB_DETAILS_TITLE') },
@@ -54,7 +53,7 @@ const handleChangeTab = (tab: string) => {
         <template v-else-if="storeState.activeTab === 'linked_account'"
                   #linked_account
         >
-            <data-source-management-tab-linked-account :has-read-write-access="state.hasReadWriteAccess" />
+            <data-source-management-tab-linked-account :has-read-write-access="hasReadWriteAccess" />
         </template>
         <template v-else-if="storeState.activeTab === 'data_collection_history'"
                   #data_collection_history
@@ -64,7 +63,7 @@ const handleChangeTab = (tab: string) => {
         <template v-else-if="storeState.activeTab === 'access_restriction'"
                   #access_restriction
         >
-            <data-source-management-tab-access-restriction :has-read-write-access="state.hasReadWriteAccess" />
+            <data-source-management-tab-access-restriction :has-read-write-access="hasReadWriteAccess" />
         </template>
     </p-tab>
 </template>
diff --git a/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue b/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue
index a7ebff2170..5a652fb741 100644
--- a/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/BudgetMainPage.vue
@@ -16,12 +16,12 @@ import BudgetMainList from '@/services/cost-explorer/components/BudgetMainList.v
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 const userStore = useUserStore();
+
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const storeState = reactive({
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
 });
-const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
-});
 
 const handleCreateBudgetSelect = () => {
     SpaceRouter.router.push({ name: COST_EXPLORER_ROUTE.BUDGET.CREATE._NAME });
@@ -34,7 +34,7 @@ const handleCreateBudgetSelect = () => {
             <template #heading>
                 <p-heading :title="$t('BILLING.COST_MANAGEMENT.MAIN.BUDGET')" />
             </template>
-            <template v-if="state.hasReadWriteAccess && storeState.isWorkspaceOwner"
+            <template v-if="hasReadWriteAccess && storeState.isWorkspaceOwner"
                       #extra
             >
                 <p-button style-type="primary"
diff --git a/apps/web/src/services/cost-explorer/pages/CostReportPage.vue b/apps/web/src/services/cost-explorer/pages/CostReportPage.vue
index 9e28819ebf..1c78abfeb4 100644
--- a/apps/web/src/services/cost-explorer/pages/CostReportPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/CostReportPage.vue
@@ -25,6 +25,8 @@ import { useCostReportPageStore } from '@/services/cost-explorer/stores/cost-rep
 const costReportPageStore = useCostReportPageStore();
 const costReportPageState = costReportPageStore.state;
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const state = reactive({
     loading: true,
     tabs: computed<TabItem[]>(() => [
@@ -41,7 +43,6 @@ const state = reactive({
     ]),
     activeTab: 'overview',
     currency: 'KRW' as Currency,
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* Watcher */
@@ -84,10 +85,10 @@ onMounted(async () => {
                         />
                         <div class="xl:col-span-4 lg:col-span-6 col-span-12 grid gap-4">
                             <cost-report-upcoming-report-card class="col-span-12"
-                                                              :has-read-write-access="state.hasReadWriteAccess"
+                                                              :has-read-write-access="hasReadWriteAccess"
                             />
                             <cost-report-recipients-card class="col-span-12"
-                                                         :has-read-write-access="state.hasReadWriteAccess"
+                                                         :has-read-write-access="hasReadWriteAccess"
                             />
                         </div>
                     </div>
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 8f694fdaff..502205f756 100644
--- a/apps/web/src/services/cost-explorer/pages/admin/AdminAdvancedSettingsAnomalyDetectionConfigurationPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/admin/AdminAdvancedSettingsAnomalyDetectionConfigurationPage.vue
@@ -42,6 +42,8 @@ interface State {
 
 const ALL_VALUE: NotificationVariation[] = ['gte', 'lte'];
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const state = reactive<State>({
     statusToggle: false,
     notificationRules: [{ variation: ALL_VALUE }],
@@ -61,7 +63,6 @@ const state = reactive<State>({
         iconColor: level.color,
     }))),
     recipients: false,
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 
@@ -166,7 +167,7 @@ onMounted(async () => {
         <div class="content-wrapper">
             <div class="toggle-wrapper">
                 <p-toggle-button :value.sync="state.statusToggle"
-                                 :disabled="!state.hasReadWriteAccess"
+                                 :disabled="!hasReadWriteAccess"
                                  class="toggle-button"
                 />
                 <div class="toggle-text">
@@ -200,20 +201,20 @@ onMounted(async () => {
                         >
                             <p-text-input :value="rule.threshold"
                                           :placeholder="$t('COST_EXPLORER.ANOMALY_DETECTION.NOTIFICATION_RULES.AMOUNT')"
-                                          :disabled="!state.hasReadWriteAccess"
+                                          :disabled="!hasReadWriteAccess"
                                           block
                                           @update:value="handleUpdateNotificationRules('threshold', $event, index)"
                             />
                             <p-select-dropdown :selected="rule.unit"
                                                :menu="state.unitMenu"
                                                :placeholder="$t('COST_EXPLORER.ANOMALY_DETECTION.NOTIFICATION_RULES.SELECT_UNIT')"
-                                               :disabled="!state.hasReadWriteAccess"
+                                               :disabled="!hasReadWriteAccess"
                                                block
                                                use-fixed-menu-style
                                                @select="handleUpdateNotificationRules('unit', $event, index)"
                             />
                             <p-select-dropdown :selected="rule.variation.length === 2 ? 'all': JSON.stringify(rule.variation)"
-                                               :disabled="!state.hasReadWriteAccess"
+                                               :disabled="!hasReadWriteAccess"
                                                :menu="state.variationMenu"
                                                block
                                                use-fixed-menu-style
@@ -222,7 +223,7 @@ onMounted(async () => {
                             <p-select-dropdown :selected="rule.notifyLevel"
                                                :menu="state.notifyLevelMenu"
                                                use-fixed-menu-style
-                                               :disabled="!state.hasReadWriteAccess"
+                                               :disabled="!hasReadWriteAccess"
                                                block
                                                @select="handleUpdateNotificationRules('notifyLevel', $event, index)"
                             >
@@ -248,14 +249,14 @@ onMounted(async () => {
                             <p-icon-button name="ic_delete"
                                            size="sm"
                                            class="self-center"
-                                           :disabled="!state.hasReadWriteAccess"
+                                           :disabled="!hasReadWriteAccess"
                                            @click="handleDeleteRule(index)"
                             />
                         </div>
                         <p-button icon-left="ic_plus"
                                   class="add-btn"
                                   style-type="secondary"
-                                  :disabled="!state.hasReadWriteAccess"
+                                  :disabled="!hasReadWriteAccess"
                                   @click="handleAddNotificationRule"
                         >
                             {{ $t('COMMON.BUTTONS.ADD') }}
@@ -280,7 +281,7 @@ onMounted(async () => {
                 </div>
                 <div class="check-role">
                     <p-checkbox v-model="state.recipients"
-                                :disabled="!state.hasReadWriteAccess"
+                                :disabled="!hasReadWriteAccess"
                     /><span class="owner-img"><p-lazy-img :src="WorkspaceOwnerImage"
                                                           width="1.25rem"
                                                           height="1.25rem"
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 bb279532aa..289fe03b2d 100644
--- a/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetMainPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetMainPage.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
 import {
@@ -15,10 +14,7 @@ import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-const
 const router = useRouter();
 
 const { getProperRouteLocation } = useProperRouteLocation();
-
-const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
-});
+const { hasReadWriteAccess } = usePageEditableStatus();
 
 const handleCreateBudgetSelect = () => {
     router.push(getProperRouteLocation({ name: COST_EXPLORER_ROUTE.BUDGET.CREATE._NAME }));
@@ -31,7 +27,7 @@ const handleCreateBudgetSelect = () => {
             <template #heading>
                 <p-heading :title="$t('BILLING.COST_MANAGEMENT.MAIN.BUDGET')" />
             </template>
-            <template v-if="state.hasReadWriteAccess"
+            <template v-if="hasReadWriteAccess"
                       #extra
             >
                 <p-button style-type="primary"
diff --git a/apps/web/src/services/dashboards/DashboardsLSB.vue b/apps/web/src/services/dashboards/DashboardsLSB.vue
index 5d0e843786..7d325d2895 100644
--- a/apps/web/src/services/dashboards/DashboardsLSB.vue
+++ b/apps/web/src/services/dashboards/DashboardsLSB.vue
@@ -46,6 +46,7 @@ const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const userStore = useUserStore();
 
 const { getProperRouteLocation } = useProperRouteLocation();
+const { hasReadWriteAccess } = usePageEditableStatus();
 
 const router = useRouter();
 const route = useRoute();
@@ -60,7 +61,6 @@ const state = reactive({
     currentPath: computed(() => route.fullPath),
     publicV2DashboardMenuSet: computed(() => getDashboardMenuSet(dashboardPageControlGetters.publicDashboardItems)),
     privateV2DashboardMenuSet: computed(() => getDashboardMenuSet(dashboardPageControlGetters.privateDashboardItems)),
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     favoriteItemMap: computed(() => {
         const result: Record<string, FavoriteConfig> = {};
         storeState.favoriteItems?.forEach((d) => {
@@ -206,7 +206,7 @@ callApiWithGrantGuard();
             <l-s-b-router-menu-item :current-path="state.currentPath"
                                     :item="item"
             >
-                <template v-if="state.hasReadWriteAccess"
+                <template v-if="hasReadWriteAccess"
                           #right-extra
                 >
                     <p-icon-button name="ic_plus"
diff --git a/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue b/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
index 0f4601278f..b79c9da072 100644
--- a/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
@@ -43,13 +43,15 @@ 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();
 const dashboardPageControlState = dashboardPageControlStore.state;
 const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const userStore = useUserStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+const { getProperRouteLocation } = useProperRouteLocation();
+
 const router = useRouter();
 const queryTagsHelper = useQueryTags({
     keyItemSets: [{
@@ -96,7 +98,6 @@ const state = reactive({
         if (storeState.isAdminMode) return dashboardPageControlGetters.adminTreeControlButtonDisableMap;
         return dashboardPageControlGetters.publicTreeControlButtonDisableMap;
     }),
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
     // search
     isSearching: {
         PUBLIC: false,
@@ -269,7 +270,7 @@ onUnmounted(() => {
             <template #heading>
                 <p-heading :title="$t('DASHBOARDS.ALL_DASHBOARDS.DASHBOARDS_TITLE')" />
             </template>
-            <template v-if="state.hasReadWriteAccess"
+            <template v-if="hasReadWriteAccess"
                       #extra
             >
                 <p-button icon-left="ic_plus_bold"
@@ -304,14 +305,14 @@ onUnmounted(() => {
             <template #no-data>
                 <p-empty
                     show-image
-                    :show-button="state.hasReadWriteAccess"
+                    :show-button="hasReadWriteAccess"
                 >
                     <template #image>
                         <img alt="empty-default-image"
                              src="@/assets/images/illust_jellyocto-with-a-telescope.svg"
                         >
                     </template>
-                    <template v-if="state.hasReadWriteAccess"
+                    <template v-if="hasReadWriteAccess"
                               #button
                     >
                         <p-button icon-left="ic_plus_bold"
diff --git a/apps/web/src/services/iam/pages/AppMainPage.vue b/apps/web/src/services/iam/pages/AppMainPage.vue
index 263d93e422..22a7d14aaf 100644
--- a/apps/web/src/services/iam/pages/AppMainPage.vue
+++ b/apps/web/src/services/iam/pages/AppMainPage.vue
@@ -28,6 +28,8 @@ const appPageState = appPageStore.$state;
 
 const userStore = useUserStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const storeState = reactive({
     roleType: computed<RoleType|undefined>(() => userStore.state.roleType),
 });
@@ -42,7 +44,6 @@ const tabs = [{
 const state = reactive({
     activeTab: 'rest',
     userId: computed<string|undefined>(() => userStore.state.userId),
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 /* Component */
@@ -76,7 +77,7 @@ onUnmounted(() => {
                 />
             </template>
             <template #extra>
-                <p-button v-if="state.hasReadWriteAccess && storeState.roleType !== ROLE_TYPE.WORKSPACE_MEMBER"
+                <p-button v-if="hasReadWriteAccess && storeState.roleType !== ROLE_TYPE.WORKSPACE_MEMBER"
                           style-type="primary"
                           icon-left="ic_plus_bold"
                           @click="handleCreateApp"
@@ -88,7 +89,7 @@ onUnmounted(() => {
         <p-horizontal-layout class="role-toolbox-layout">
             <template #container="{ height }">
                 <app-management-table :table-height="height"
-                                      :has-read-write-access="state.hasReadWriteAccess"
+                                      :has-read-write-access="hasReadWriteAccess"
                 />
             </template>
         </p-horizontal-layout>
diff --git a/apps/web/src/services/iam/pages/UserMainPage.vue b/apps/web/src/services/iam/pages/UserMainPage.vue
index c8f47f0a30..d477e195c3 100644
--- a/apps/web/src/services/iam/pages/UserMainPage.vue
+++ b/apps/web/src/services/iam/pages/UserMainPage.vue
@@ -29,14 +29,13 @@ const userPageStore = useUserPageStore();
 const userPageState = userPageStore.state;
 const userStore = useUserStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     globalGrantLoading: computed(() => appContextStore.getters.globalGrantLoading),
     grantInfo: computed(() => userStore.state.currentGrantInfo),
 });
-const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
-});
 
 const userListApiQueryHelper = new ApiQueryHelper()
     .setSort('name', true);
@@ -79,25 +78,25 @@ onUnmounted(() => {
 
 <template>
     <section class="user-page">
-        <user-management-header :has-read-write-access="state.hasReadWriteAccess" />
+        <user-management-header :has-read-write-access="hasReadWriteAccess" />
         <p-horizontal-layout class="user-toolbox-layout">
             <template #container="{ height }">
                 <user-management-table :table-height="height"
-                                       :has-read-write-access="state.hasReadWriteAccess"
+                                       :has-read-write-access="hasReadWriteAccess"
                                        @confirm="refreshUserList"
                 />
             </template>
         </p-horizontal-layout>
-        <user-management-tab :has-read-write-access="state.hasReadWriteAccess" />
-        <user-management-add-modal v-if="state.hasReadWriteAccess"
+        <user-management-tab :has-read-write-access="hasReadWriteAccess" />
+        <user-management-add-modal v-if="hasReadWriteAccess"
                                    @confirm="refreshUserList"
         />
-        <user-management-only-remove-workspace-group-type-modal v-if="state.hasReadWriteAccess" />
-        <user-management-remove-mixed-type-modal v-if="state.hasReadWriteAccess" />
-        <user-management-status-modal v-if="state.hasReadWriteAccess"
+        <user-management-only-remove-workspace-group-type-modal v-if="hasReadWriteAccess" />
+        <user-management-remove-mixed-type-modal v-if="hasReadWriteAccess" />
+        <user-management-status-modal v-if="hasReadWriteAccess"
                                       @confirm="refreshUserList"
         />
-        <user-management-form-modal v-if="state.hasReadWriteAccess"
+        <user-management-form-modal v-if="hasReadWriteAccess"
                                     @confirm="refreshUserList"
         />
     </section>
diff --git a/apps/web/src/services/iam/pages/admin/AdminRolePage.vue b/apps/web/src/services/iam/pages/admin/AdminRolePage.vue
index baa427193d..c67bb3117c 100644
--- a/apps/web/src/services/iam/pages/admin/AdminRolePage.vue
+++ b/apps/web/src/services/iam/pages/admin/AdminRolePage.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onUnmounted, reactive } from 'vue';
+import { onUnmounted } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
 import {
@@ -16,14 +16,12 @@ import { useRolePageStore } from '@/services/iam/store/role-page-store';
 
 const rolePageStore = useRolePageStore();
 const rolePageState = rolePageStore.$state;
+
 const { getProperRouteLocation } = useProperRouteLocation();
+const { hasReadWriteAccess } = usePageEditableStatus();
 
 const router = useRouter();
 
-const state = reactive({
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
-});
-
 /* Component */
 const handleCreateRole = () => {
     router.push(getProperRouteLocation({ name: IAM_ROUTE.ROLE.CREATE._NAME }));
@@ -46,7 +44,7 @@ onUnmounted(() => {
                            :selected-count="rolePageState.selectedIndices.length"
                 />
             </template>
-            <template v-if="state.hasReadWriteAccess"
+            <template v-if="hasReadWriteAccess"
                       #extra
             >
                 <p-button style-type="primary"
@@ -60,7 +58,7 @@ onUnmounted(() => {
         <p-horizontal-layout class="role-toolbox-layout">
             <template #container="{ height }">
                 <role-management-table :table-height="height"
-                                       :has-read-write-access="state.hasReadWriteAccess"
+                                       :has-read-write-access="hasReadWriteAccess"
                 />
             </template>
         </p-horizontal-layout>
diff --git a/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue b/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue
index 15191d4353..eccb561b63 100644
--- a/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue
+++ b/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue
@@ -42,13 +42,15 @@ const props = defineProps<{
     postId: string;
 }>();
 
-const { getProperRouteLocation } = useProperRouteLocation();
 const noticeDetailStore = useNoticeDetailStore();
 const noticeDetailState = noticeDetailStore.state;
 const userWorkspaceStore = useUserWorkspaceStore();
 const userWorkspaceGetters = userWorkspaceStore.getters;
 const userStore = useUserStore();
 
+const { hasReadWriteAccess } = usePageEditableStatus();
+const { getProperRouteLocation } = useProperRouteLocation();
+
 const router = useRouter();
 
 const storeState = reactive({
@@ -61,7 +63,6 @@ const state = reactive({
     allSendingEmailModalVisible: false,
     specificSendingEmailModalVisible: false,
     sendLoading: false,
-    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;
@@ -153,7 +154,7 @@ onBeforeMount(async () => {
                            @click-back-button="$router.go(-1)"
                 />
             </template>
-            <template v-if="state.hasReadWriteAccess"
+            <template v-if="hasReadWriteAccess"
                       #extra
             >
                 <div v-if="storeState.hasPermissionToEditOrDelete"
diff --git a/apps/web/src/services/info/pages/admin/AdminNoticeMainPage.vue b/apps/web/src/services/info/pages/admin/AdminNoticeMainPage.vue
index 65f7c2e1c1..ec25a732a6 100644
--- a/apps/web/src/services/info/pages/admin/AdminNoticeMainPage.vue
+++ b/apps/web/src/services/info/pages/admin/AdminNoticeMainPage.vue
@@ -1,26 +1,4 @@
-<template>
-    <div class="notice-page">
-        <p-heading-layout class="mb-6">
-            <template #heading>
-                <p-heading :title="$t('INFO.NOTICE.MAIN.NOTICE_TITLE')" />
-            </template>
-            <template v-if="state.hasReadWriteAccess"
-                      #extra
-            >
-                <p-button v-if="storeState.hasDomainRoleUser"
-                          style-type="primary"
-                          icon-left="ic_plus_bold"
-                          @click="handleCreateNotice"
-                >
-                    {{ $t('INFO.NOTICE.FORM.CREATE_NOTICE') }}
-                </p-button>
-            </template>
-        </p-heading-layout>
-        <notice-list />
-    </div>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
@@ -37,36 +15,41 @@ import { usePageEditableStatus } from '@/common/composables/page-editable-status
 import NoticeList from '@/services/info/components/NoticeList.vue';
 import { INFO_ROUTE } from '@/services/info/routes/route-constant';
 
-export default {
-    name: 'AdminNoticeMainPage',
-    components: {
-        PHeading,
-        PButton,
-        NoticeList,
-        PHeadingLayout,
-    },
-    setup() {
-        const router = useRouter();
+const router = useRouter();
+
+const userStore = useUserStore();
 
-        const userStore = useUserStore();
+const { hasReadWriteAccess } = usePageEditableStatus();
 
-        const storeState = reactive({
-            hasDomainRoleUser: computed(() => userStore.getters.isDomainAdmin),
-        });
-        const state = reactive({
-            hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
-        });
-        const handleCreateNotice = () => {
-            router.push({ name: makeAdminRouteName(INFO_ROUTE.NOTICE.CREATE._NAME) });
-        };
+const storeState = reactive({
+    hasDomainRoleUser: computed(() => userStore.getters.isDomainAdmin),
+});
 
-        return {
-            storeState,
-            state,
-            handleCreateNotice,
-        };
-    },
+const handleCreateNotice = () => {
+    router.push({ name: makeAdminRouteName(INFO_ROUTE.NOTICE.CREATE._NAME) });
 };
 </script>
 
+<template>
+    <div class="notice-page">
+        <p-heading-layout class="mb-6">
+            <template #heading>
+                <p-heading :title="$t('INFO.NOTICE.MAIN.NOTICE_TITLE')" />
+            </template>
+            <template v-if="hasReadWriteAccess"
+                      #extra
+            >
+                <p-button v-if="storeState.hasDomainRoleUser"
+                          style-type="primary"
+                          icon-left="ic_plus_bold"
+                          @click="handleCreateNotice"
+                >
+                    {{ $t('INFO.NOTICE.FORM.CREATE_NOTICE') }}
+                </p-button>
+            </template>
+        </p-heading-layout>
+        <notice-list />
+    </div>
+</template>
+
 
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 a904319ca0..6bce542348 100644
--- a/apps/web/src/services/landing/components/workspace-landing/LandingContents.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/LandingContents.vue
@@ -48,6 +48,9 @@ const router = useRouter();
 const { width } = useWindowSize();
 
 const userStore = useUserStore();
+
+const { hasReadWriteAccess } = usePageEditableStatus();
+
 const storeState = reactive({
     userId: computed<string|undefined>(() => userStore.state.userId),
     loading: computed<boolean>(() => landingPageStoreGetters.loading),
@@ -68,7 +71,6 @@ 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)),
-    hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
 });
 
 const handleSearch = (value: string) => {
@@ -137,7 +139,7 @@ onUnmounted(() => {
                 <landing-group-workspaces v-if="!state.isSearchMode"
                                           :favorite-list="storeState.favoriteList"
                                           :is-domain-admin="storeState.isDomainAdmin"
-                                          :has-read-write-access="state.hasReadWriteAccess"
+                                          :has-read-write-access="hasReadWriteAccess"
                                           @create="handleClickButton"
                 />
             </div>
@@ -145,7 +147,7 @@ onUnmounted(() => {
                 <landing-empty-contents :is-domain-admin="storeState.isDomainAdmin" />
             </template>
         </p-data-loader>
-        <div v-if="state.hasReadWriteAccess && storeState.isDomainAdmin && storeState.workspaceList.length > 0"
+        <div v-if="hasReadWriteAccess && storeState.isDomainAdmin && storeState.workspaceList.length > 0"
              class="banner-wrapper"
         >
             <p-divider />