diff --git a/apps/web/src/api-clients/_common/composables/use-query-key.ts b/apps/web/src/api-clients/_common/composables/use-query-key.ts
new file mode 100644
index 0000000000..f5ab16645c
--- /dev/null
+++ b/apps/web/src/api-clients/_common/composables/use-query-key.ts
@@ -0,0 +1,41 @@
+import type { ComputedRef } from 'vue';
+import { computed, reactive } from 'vue';
+
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+
+/**
+ * Generates a computed query key for API requests, incorporating global parameters.
+ *
+ * @param primaryQueryKey - The primary key for the api query (e.g., 'private-dashboard/get'). It follows the `{api-resource-name}/{api-verb}` convention.
+ * @param additionalGlobalParams - Optional additional global parameters to include in the api query key.
+ * @returns A computed reference to the query key array.
+ */
+
+interface GlobalQueryParams {
+    workspaceId?: string;
+    isAdminMode?: boolean;
+}
+export const useAPIQueryKey = (
+    primaryQueryKey: string,
+    additionalGlobalParams?: Partial<GlobalQueryParams>,
+): ComputedRef<QueryKey> => {
+    const appContextStore = useAppContextStore();
+    const userWorkspaceStore = useUserWorkspaceStore();
+
+    const _state = reactive({
+        currentWorkdpaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
+        isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
+    });
+
+    const globalQueryParams = reactive<GlobalQueryParams>({
+        workspaceId: _state.currentWorkdpaceId,
+        isAdminMode: _state.isAdminMode,
+        ...additionalGlobalParams,
+    });
+
+    return computed<QueryKey>(() => [primaryQueryKey, { ...globalQueryParams }]);
+};
diff --git a/apps/web/src/schema/_common/api-verbs/analyze.ts b/apps/web/src/api-clients/_common/schema/api-verbs/analyze.ts
similarity index 100%
rename from apps/web/src/schema/_common/api-verbs/analyze.ts
rename to apps/web/src/api-clients/_common/schema/api-verbs/analyze.ts
diff --git a/apps/web/src/schema/_common/api-verbs/export.ts b/apps/web/src/api-clients/_common/schema/api-verbs/export.ts
similarity index 100%
rename from apps/web/src/schema/_common/api-verbs/export.ts
rename to apps/web/src/api-clients/_common/schema/api-verbs/export.ts
diff --git a/apps/web/src/schema/_common/api-verbs/list.ts b/apps/web/src/api-clients/_common/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/_common/api-verbs/list.ts
rename to apps/web/src/api-clients/_common/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/_common/constant.ts b/apps/web/src/api-clients/_common/schema/constant.ts
similarity index 100%
rename from apps/web/src/schema/_common/constant.ts
rename to apps/web/src/api-clients/_common/schema/constant.ts
diff --git a/apps/web/src/schema/_common/model.ts b/apps/web/src/api-clients/_common/schema/model.ts
similarity index 100%
rename from apps/web/src/schema/_common/model.ts
rename to apps/web/src/api-clients/_common/schema/model.ts
diff --git a/apps/web/src/schema/_common/type.ts b/apps/web/src/api-clients/_common/schema/type.ts
similarity index 73%
rename from apps/web/src/schema/_common/type.ts
rename to apps/web/src/api-clients/_common/schema/type.ts
index 7857281650..54ccf642bd 100644
--- a/apps/web/src/schema/_common/type.ts
+++ b/apps/web/src/api-clients/_common/schema/type.ts
@@ -1,4 +1,4 @@
-import type { RESOURCE_GROUP } from '@/schema/_common/constant';
+import type { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 
 export type ResourceGroupType = typeof RESOURCE_GROUP[keyof typeof RESOURCE_GROUP];
 
diff --git a/apps/web/src/schema/add-ons/favorite/list.ts b/apps/web/src/api-clients/add-ons/favorite/schema/list.ts
similarity index 57%
rename from apps/web/src/schema/add-ons/favorite/list.ts
rename to apps/web/src/api-clients/add-ons/favorite/schema/list.ts
index 37fb8370a9..58ace2baa1 100644
--- a/apps/web/src/schema/add-ons/favorite/list.ts
+++ b/apps/web/src/api-clients/add-ons/favorite/schema/list.ts
@@ -1,5 +1,5 @@
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { FavoriteModel } from '@/schema/add-ons/favorite/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { FavoriteModel } from '@/api-clients/add-ons/favorite/schema/model';
 
 import type { FavoriteType } from '@/common/modules/favorites/favorite-button/type';
 
diff --git a/apps/web/src/schema/add-ons/favorite/model.ts b/apps/web/src/api-clients/add-ons/favorite/schema/model.ts
similarity index 100%
rename from apps/web/src/schema/add-ons/favorite/model.ts
rename to apps/web/src/api-clients/add-ons/favorite/schema/model.ts
diff --git a/apps/web/src/api-clients/cost-analysis/budget-usage/composables/use-budget-usage-api.ts b/apps/web/src/api-clients/cost-analysis/budget-usage/composables/use-budget-usage-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/cost-analysis/budget-usage/api-verbs/analyze.ts b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze.ts
similarity index 88%
rename from apps/web/src/schema/cost-analysis/budget-usage/api-verbs/analyze.ts
rename to apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze.ts
index 427508fab4..4c68386e74 100644
--- a/apps/web/src/schema/cost-analysis/budget-usage/api-verbs/analyze.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 
 export interface BudgetUsageAnalyzeParameters {
diff --git a/apps/web/src/schema/cost-analysis/budget-usage/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/budget-usage/api-verbs/list.ts
rename to apps/web/src/api-clients/cost-analysis/budget-usage/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/cost-analysis/budget-usage/model.ts b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/model.ts
similarity index 87%
rename from apps/web/src/schema/cost-analysis/budget-usage/model.ts
rename to apps/web/src/api-clients/cost-analysis/budget-usage/schema/model.ts
index aba4f3be26..099704073c 100644
--- a/apps/web/src/schema/cost-analysis/budget-usage/model.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget-usage/schema/model.ts
@@ -1,4 +1,4 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 import type { Currency } from '@/store/display/type';
 
diff --git a/apps/web/src/api-clients/cost-analysis/budget/composables/use-budget-api.ts b/apps/web/src/api-clients/cost-analysis/budget/composables/use-budget-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/cost-analysis/budget/api-verbs/create.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/create.ts
similarity index 72%
rename from apps/web/src/schema/cost-analysis/budget/api-verbs/create.ts
rename to apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/create.ts
index c197f3abe1..23f7c15dfd 100644
--- a/apps/web/src/schema/cost-analysis/budget/api-verbs/create.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/create.ts
@@ -1,8 +1,8 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
     BudgetNotification, BudgetPlannedLimit, BudgetTimeUnit, ProviderFilter,
-} from '@/schema/cost-analysis/budget/type';
+} from '@/api-clients/cost-analysis/budget/schema/type';
 
 export interface BudgetCreateParameters {
     data_source_id: string;
diff --git a/apps/web/src/schema/cost-analysis/budget/api-verbs/delete.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/budget/api-verbs/delete.ts
rename to apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/cost-analysis/budget/api-verbs/get.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/budget/api-verbs/get.ts
rename to apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/cost-analysis/budget/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/list.ts
similarity index 77%
rename from apps/web/src/schema/cost-analysis/budget/api-verbs/list.ts
rename to apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/list.ts
index 19555094ea..5168491fe1 100644
--- a/apps/web/src/schema/cost-analysis/budget/api-verbs/list.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/list.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { BudgetTimeUnit } from '@/schema/cost-analysis/budget/type';
+import type { BudgetTimeUnit } from '@/api-clients/cost-analysis/budget/schema/type';
 
 export interface BudgetListParameters {
     query?: Query
diff --git a/apps/web/src/schema/cost-analysis/budget/api-verbs/set-notification.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/set-notification.ts
similarity index 56%
rename from apps/web/src/schema/cost-analysis/budget/api-verbs/set-notification.ts
rename to apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/set-notification.ts
index 27b5098439..050fac8446 100644
--- a/apps/web/src/schema/cost-analysis/budget/api-verbs/set-notification.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/set-notification.ts
@@ -1,4 +1,4 @@
-import type { BudgetNotification } from '@/schema/cost-analysis/budget/type';
+import type { BudgetNotification } from '@/api-clients/cost-analysis/budget/schema/type';
 
 export interface BudgetSetNotificationParameters {
     budget_id: string;
diff --git a/apps/web/src/schema/cost-analysis/budget/api-verbs/update.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/update.ts
similarity index 52%
rename from apps/web/src/schema/cost-analysis/budget/api-verbs/update.ts
rename to apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/update.ts
index 8af40b8570..eebbefe2f3 100644
--- a/apps/web/src/schema/cost-analysis/budget/api-verbs/update.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget/schema/api-verbs/update.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { BudgetPlannedLimit } from '@/schema/cost-analysis/budget/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { BudgetPlannedLimit } from '@/api-clients/cost-analysis/budget/schema/type';
 
 export interface BudgetUpdateParameters {
     budget_id: string;
diff --git a/apps/web/src/schema/cost-analysis/budget/model.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/model.ts
similarity index 77%
rename from apps/web/src/schema/cost-analysis/budget/model.ts
rename to apps/web/src/api-clients/cost-analysis/budget/schema/model.ts
index 174294ebde..0ad8166b9d 100644
--- a/apps/web/src/schema/cost-analysis/budget/model.ts
+++ b/apps/web/src/api-clients/cost-analysis/budget/schema/model.ts
@@ -1,8 +1,8 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
     BudgetNotification, BudgetPlannedLimit, BudgetTimeUnit, ProviderFilter,
-} from '@/schema/cost-analysis/budget/type';
+} from '@/api-clients/cost-analysis/budget/schema/type';
 
 import type { Currency } from '@/store/display/type';
 
diff --git a/apps/web/src/schema/cost-analysis/budget/type.ts b/apps/web/src/api-clients/cost-analysis/budget/schema/type.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/budget/type.ts
rename to apps/web/src/api-clients/cost-analysis/budget/schema/type.ts
diff --git a/apps/web/src/api-clients/cost-analysis/cost-query-set/composables/use-cost-query-set-api.ts b/apps/web/src/api-clients/cost-analysis/cost-query-set/composables/use-cost-query-set-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/api-verbs/create.ts b/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/api-verbs/create.ts
new file mode 100644
index 0000000000..8020415030
--- /dev/null
+++ b/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/api-verbs/create.ts
@@ -0,0 +1,10 @@
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { CostQuerySetOption } from '@/api-clients/cost-analysis/cost-query-set/schema/type';
+
+
+export interface CostQuerySetCreateParameters {
+    data_source_id: string;
+    name: string;
+    options: CostQuerySetOption;
+    tags?: Tags;
+}
diff --git a/apps/web/src/schema/cost-analysis/cost-query-set/api-verbs/delete.ts b/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-query-set/api-verbs/delete.ts
rename to apps/web/src/api-clients/cost-analysis/cost-query-set/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/cost-analysis/cost-query-set/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-query-set/api-verbs/list.ts
rename to apps/web/src/api-clients/cost-analysis/cost-query-set/schema/api-verbs/list.ts
diff --git a/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/api-verbs/update.ts b/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/api-verbs/update.ts
new file mode 100644
index 0000000000..da5249ee25
--- /dev/null
+++ b/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/api-verbs/update.ts
@@ -0,0 +1,10 @@
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { CostQuerySetOption } from '@/api-clients/cost-analysis/cost-query-set/schema/type';
+
+
+export interface CostQuerySetUpdateParameters {
+    cost_query_set_id: string;
+    name?: string;
+    options?: CostQuerySetOption;
+    tags?: Tags;
+}
diff --git a/apps/web/src/schema/cost-analysis/cost-query-set/model.ts b/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/model.ts
similarity index 63%
rename from apps/web/src/schema/cost-analysis/cost-query-set/model.ts
rename to apps/web/src/api-clients/cost-analysis/cost-query-set/schema/model.ts
index 13e32a4a22..2649bf5443 100644
--- a/apps/web/src/schema/cost-analysis/cost-query-set/model.ts
+++ b/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { CostQuerySetOption } from '@/schema/cost-analysis/cost-query-set/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { CostQuerySetOption } from '@/api-clients/cost-analysis/cost-query-set/schema/type';
 
 
 export interface CostQuerySetModel {
diff --git a/apps/web/src/schema/cost-analysis/cost-query-set/type.ts b/apps/web/src/api-clients/cost-analysis/cost-query-set/schema/type.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-query-set/type.ts
rename to apps/web/src/api-clients/cost-analysis/cost-query-set/schema/type.ts
diff --git a/apps/web/src/api-clients/cost-analysis/cost-report-config/composables/use-cost-report-config-api.ts b/apps/web/src/api-clients/cost-analysis/cost-report-config/composables/use-cost-report-config-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/cost-analysis/cost-report-config/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report-config/api-verbs/list.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/cost-analysis/cost-report-config/api-verbs/update-recipients.ts b/apps/web/src/api-clients/cost-analysis/cost-report-config/schema/api-verbs/update-recipients.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report-config/api-verbs/update-recipients.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report-config/schema/api-verbs/update-recipients.ts
diff --git a/apps/web/src/schema/cost-analysis/cost-report-config/api-verbs/update.ts b/apps/web/src/api-clients/cost-analysis/cost-report-config/schema/api-verbs/update.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report-config/api-verbs/update.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report-config/schema/api-verbs/update.ts
diff --git a/apps/web/src/schema/cost-analysis/cost-report-config/model.ts b/apps/web/src/api-clients/cost-analysis/cost-report-config/schema/model.ts
similarity index 86%
rename from apps/web/src/schema/cost-analysis/cost-report-config/model.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report-config/schema/model.ts
index 754574d1b7..e755b76087 100644
--- a/apps/web/src/schema/cost-analysis/cost-report-config/model.ts
+++ b/apps/web/src/api-clients/cost-analysis/cost-report-config/schema/model.ts
@@ -1,4 +1,4 @@
-import type { CostReportConfigStatus } from '@/schema/cost-analysis/cost-report-config/type';
+import type { CostReportConfigStatus } from '@/api-clients/cost-analysis/cost-report-config/schema/type';
 import type { RoleType } from '@/schema/identity/role/type';
 
 import type { Currency } from '@/store/display/type';
diff --git a/apps/web/src/schema/cost-analysis/cost-report-config/type.ts b/apps/web/src/api-clients/cost-analysis/cost-report-config/schema/type.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report-config/type.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report-config/schema/type.ts
diff --git a/apps/web/src/api-clients/cost-analysis/cost-report-data/composables/use-cost-report-data-api.ts b/apps/web/src/api-clients/cost-analysis/cost-report-data/composables/use-cost-report-data-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/cost-analysis/cost-report-data/api-verbs/analyze.ts b/apps/web/src/api-clients/cost-analysis/cost-report-data/schema/api-verbs/analyze.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report-data/api-verbs/analyze.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report-data/schema/api-verbs/analyze.ts
diff --git a/apps/web/src/schema/cost-analysis/cost-report-data/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/cost-report-data/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report-data/api-verbs/list.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report-data/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/cost-analysis/cost-report-data/model.ts b/apps/web/src/api-clients/cost-analysis/cost-report-data/schema/model.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report-data/model.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report-data/schema/model.ts
diff --git a/apps/web/src/schema/cost-analysis/cost-report-data/type.ts b/apps/web/src/api-clients/cost-analysis/cost-report-data/schema/type.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report-data/type.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report-data/schema/type.ts
diff --git a/apps/web/src/api-clients/cost-analysis/cost-report/composables/use-cost-report-api.ts b/apps/web/src/api-clients/cost-analysis/cost-report/composables/use-cost-report-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/cost-analysis/cost-report/api-verbs/get-url.ts b/apps/web/src/api-clients/cost-analysis/cost-report/schema/api-verbs/get-url.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report/api-verbs/get-url.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report/schema/api-verbs/get-url.ts
diff --git a/apps/web/src/schema/cost-analysis/cost-report/api-verbs/get.ts b/apps/web/src/api-clients/cost-analysis/cost-report/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report/api-verbs/get.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/cost-analysis/cost-report/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/cost-report/schema/api-verbs/list.ts
similarity index 73%
rename from apps/web/src/schema/cost-analysis/cost-report/api-verbs/list.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report/schema/api-verbs/list.ts
index d99b3f7476..f8f3c6c36e 100644
--- a/apps/web/src/schema/cost-analysis/cost-report/api-verbs/list.ts
+++ b/apps/web/src/api-clients/cost-analysis/cost-report/schema/api-verbs/list.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { CostReportStatus } from '@/schema/cost-analysis/cost-report/type';
+import type { CostReportStatus } from '@/api-clients/cost-analysis/cost-report/schema/type';
 
 
 export interface CostReportListParameters {
diff --git a/apps/web/src/schema/cost-analysis/cost-report/api-verbs/send.ts b/apps/web/src/api-clients/cost-analysis/cost-report/schema/api-verbs/send.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report/api-verbs/send.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report/schema/api-verbs/send.ts
diff --git a/apps/web/src/schema/cost-analysis/cost-report/model.ts b/apps/web/src/api-clients/cost-analysis/cost-report/schema/model.ts
similarity index 85%
rename from apps/web/src/schema/cost-analysis/cost-report/model.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report/schema/model.ts
index ae95d5078a..42725077a8 100644
--- a/apps/web/src/schema/cost-analysis/cost-report/model.ts
+++ b/apps/web/src/api-clients/cost-analysis/cost-report/schema/model.ts
@@ -1,4 +1,4 @@
-import type { CostReportStatus } from '@/schema/cost-analysis/cost-report/type';
+import type { CostReportStatus } from '@/api-clients/cost-analysis/cost-report/schema/type';
 
 import type { Currency } from '@/store/display/type';
 
diff --git a/apps/web/src/schema/cost-analysis/cost-report/type.ts b/apps/web/src/api-clients/cost-analysis/cost-report/schema/type.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost-report/type.ts
rename to apps/web/src/api-clients/cost-analysis/cost-report/schema/type.ts
diff --git a/apps/web/src/api-clients/cost-analysis/cost/composables/use-cost-api.ts b/apps/web/src/api-clients/cost-analysis/cost/composables/use-cost-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/cost-analysis/cost/api-verbs/analyze.ts b/apps/web/src/api-clients/cost-analysis/cost/schema/api-verbs/analyze.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost/api-verbs/analyze.ts
rename to apps/web/src/api-clients/cost-analysis/cost/schema/api-verbs/analyze.ts
diff --git a/apps/web/src/schema/cost-analysis/cost/api-verbs/stat.ts b/apps/web/src/api-clients/cost-analysis/cost/schema/api-verbs/stat.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/cost/api-verbs/stat.ts
rename to apps/web/src/api-clients/cost-analysis/cost/schema/api-verbs/stat.ts
diff --git a/apps/web/src/schema/cost-analysis/cost/model.ts b/apps/web/src/api-clients/cost-analysis/cost/schema/model.ts
similarity index 88%
rename from apps/web/src/schema/cost-analysis/cost/model.ts
rename to apps/web/src/api-clients/cost-analysis/cost/schema/model.ts
index 2deec308cb..9e21ca1b57 100644
--- a/apps/web/src/schema/cost-analysis/cost/model.ts
+++ b/apps/web/src/api-clients/cost-analysis/cost/schema/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface CostModel {
     cost_id: string;
diff --git a/apps/web/src/api-clients/cost-analysis/data-source-account/composables/use-data-source-account-api.ts b/apps/web/src/api-clients/cost-analysis/data-source-account/composables/use-data-source-account-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/cost-analysis/data-source-account/api-verbs/analyze.ts b/apps/web/src/api-clients/cost-analysis/data-source-account/schema/api-verbs/analyze.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/data-source-account/api-verbs/analyze.ts
rename to apps/web/src/api-clients/cost-analysis/data-source-account/schema/api-verbs/analyze.ts
diff --git a/apps/web/src/schema/cost-analysis/data-source-account/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/data-source-account/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/data-source-account/api-verbs/list.ts
rename to apps/web/src/api-clients/cost-analysis/data-source-account/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/cost-analysis/data-source-account/api-verbs/reset.ts b/apps/web/src/api-clients/cost-analysis/data-source-account/schema/api-verbs/reset.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/data-source-account/api-verbs/reset.ts
rename to apps/web/src/api-clients/cost-analysis/data-source-account/schema/api-verbs/reset.ts
diff --git a/apps/web/src/schema/cost-analysis/data-source-account/api-verbs/update.ts b/apps/web/src/api-clients/cost-analysis/data-source-account/schema/api-verbs/update.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/data-source-account/api-verbs/update.ts
rename to apps/web/src/api-clients/cost-analysis/data-source-account/schema/api-verbs/update.ts
diff --git a/apps/web/src/schema/cost-analysis/data-source-account/model.ts b/apps/web/src/api-clients/cost-analysis/data-source-account/schema/model.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/data-source-account/model.ts
rename to apps/web/src/api-clients/cost-analysis/data-source-account/schema/model.ts
diff --git a/apps/web/src/api-clients/cost-analysis/data-source/composables/use-data-source-api.ts b/apps/web/src/api-clients/cost-analysis/data-source/composables/use-data-source-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/cost-analysis/data-source/api-verbs/get.ts b/apps/web/src/api-clients/cost-analysis/data-source/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/data-source/api-verbs/get.ts
rename to apps/web/src/api-clients/cost-analysis/data-source/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/cost-analysis/data-source/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/data-source/schema/api-verbs/list.ts
similarity index 88%
rename from apps/web/src/schema/cost-analysis/data-source/api-verbs/list.ts
rename to apps/web/src/api-clients/cost-analysis/data-source/schema/api-verbs/list.ts
index dc3ee4414e..fcfc8f2d13 100644
--- a/apps/web/src/schema/cost-analysis/data-source/api-verbs/list.ts
+++ b/apps/web/src/api-clients/cost-analysis/data-source/schema/api-verbs/list.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { CostDataSourceState, CostDataSourceType } from '@/schema/cost-analysis/data-source/type';
+import type { CostDataSourceState, CostDataSourceType } from '@/api-clients/cost-analysis/data-source/schema/type';
 
 
 export interface CostDataSourceListParameters {
diff --git a/apps/web/src/schema/cost-analysis/data-source/api-verbs/sync.ts b/apps/web/src/api-clients/cost-analysis/data-source/schema/api-verbs/sync.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/data-source/api-verbs/sync.ts
rename to apps/web/src/api-clients/cost-analysis/data-source/schema/api-verbs/sync.ts
diff --git a/apps/web/src/schema/cost-analysis/data-source/api-verbs/update-permissions.ts b/apps/web/src/api-clients/cost-analysis/data-source/schema/api-verbs/update-permissions.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/data-source/api-verbs/update-permissions.ts
rename to apps/web/src/api-clients/cost-analysis/data-source/schema/api-verbs/update-permissions.ts
diff --git a/apps/web/src/schema/cost-analysis/data-source/constant.ts b/apps/web/src/api-clients/cost-analysis/data-source/schema/constant.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/data-source/constant.ts
rename to apps/web/src/api-clients/cost-analysis/data-source/schema/constant.ts
diff --git a/apps/web/src/schema/cost-analysis/data-source/model.ts b/apps/web/src/api-clients/cost-analysis/data-source/schema/model.ts
similarity index 84%
rename from apps/web/src/schema/cost-analysis/data-source/model.ts
rename to apps/web/src/api-clients/cost-analysis/data-source/schema/model.ts
index 37162804be..f698bf64fe 100644
--- a/apps/web/src/schema/cost-analysis/data-source/model.ts
+++ b/apps/web/src/api-clients/cost-analysis/data-source/schema/model.ts
@@ -1,9 +1,7 @@
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
-import type { ResourceGroupType } from '@/schema/_common/type';
-import type {
-    CostDataSourceSecretType, CostDataSourceType, CostDataSourceSchedule,
-} from '@/schema/cost-analysis/data-source/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
+import type { CostDataSourceSecretType, CostDataSourceState, CostDataSourceType } from '@/api-clients/cost-analysis/data-source/schema/type';
 
 
 interface PluginInfoModel {
diff --git a/apps/web/src/schema/cost-analysis/data-source/type.ts b/apps/web/src/api-clients/cost-analysis/data-source/schema/type.ts
similarity index 85%
rename from apps/web/src/schema/cost-analysis/data-source/type.ts
rename to apps/web/src/api-clients/cost-analysis/data-source/schema/type.ts
index 944b7811ca..e07e0adb26 100644
--- a/apps/web/src/schema/cost-analysis/data-source/type.ts
+++ b/apps/web/src/api-clients/cost-analysis/data-source/schema/type.ts
@@ -1,4 +1,4 @@
-import type { COST_DATA_SOURCE_STATE, COST_DATA_SOURCE_TYPE, COST_DATA_SOURCE_SECRET_TYPE } from '@/schema/cost-analysis/data-source/constant';
+import type { COST_DATA_SOURCE_STATE, COST_DATA_SOURCE_TYPE, COST_DATA_SOURCE_SECRET_TYPE } from './constant';
 
 export type CostDataSourceState = typeof COST_DATA_SOURCE_STATE[keyof typeof COST_DATA_SOURCE_STATE];
 
diff --git a/apps/web/src/api-clients/cost-analysis/job/composables/use-job-api.ts b/apps/web/src/api-clients/cost-analysis/job/composables/use-job-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/cost-analysis/job/api-verbs/cancel.ts b/apps/web/src/api-clients/cost-analysis/job/schema/api-verbs/cancel.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/job/api-verbs/cancel.ts
rename to apps/web/src/api-clients/cost-analysis/job/schema/api-verbs/cancel.ts
diff --git a/apps/web/src/schema/cost-analysis/job/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/job/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/job/api-verbs/list.ts
rename to apps/web/src/api-clients/cost-analysis/job/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/cost-analysis/job/model.ts b/apps/web/src/api-clients/cost-analysis/job/schema/model.ts
similarity index 76%
rename from apps/web/src/schema/cost-analysis/job/model.ts
rename to apps/web/src/api-clients/cost-analysis/job/schema/model.ts
index 95d2a6cb90..288d43385b 100644
--- a/apps/web/src/schema/cost-analysis/job/model.ts
+++ b/apps/web/src/api-clients/cost-analysis/job/schema/model.ts
@@ -1,5 +1,6 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
-import type { CostJobStatus } from '@/schema/cost-analysis/job/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
+import type { CostJobStatus } from '@/api-clients/cost-analysis/job/schema/type';
+
 
 interface SyncedAccount {
     account_id: string;
diff --git a/apps/web/src/schema/cost-analysis/job/type.ts b/apps/web/src/api-clients/cost-analysis/job/schema/type.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/job/type.ts
rename to apps/web/src/api-clients/cost-analysis/job/schema/type.ts
diff --git a/apps/web/src/api-clients/cost-analysis/unified-cost/composables/use-unified-cost-api.ts b/apps/web/src/api-clients/cost-analysis/unified-cost/composables/use-unified-cost-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/cost-analysis/unified-cost/api-verbs/analyze.ts b/apps/web/src/api-clients/cost-analysis/unified-cost/schema/api-verbs/analyze.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/unified-cost/api-verbs/analyze.ts
rename to apps/web/src/api-clients/cost-analysis/unified-cost/schema/api-verbs/analyze.ts
diff --git a/apps/web/src/schema/cost-analysis/unified-cost/api-verbs/get.ts b/apps/web/src/api-clients/cost-analysis/unified-cost/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/unified-cost/api-verbs/get.ts
rename to apps/web/src/api-clients/cost-analysis/unified-cost/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/cost-analysis/unified-cost/api-verbs/list.ts b/apps/web/src/api-clients/cost-analysis/unified-cost/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/unified-cost/api-verbs/list.ts
rename to apps/web/src/api-clients/cost-analysis/unified-cost/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/cost-analysis/unified-cost/api-verbs/stat.ts b/apps/web/src/api-clients/cost-analysis/unified-cost/schema/api-verbs/stat.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/unified-cost/api-verbs/stat.ts
rename to apps/web/src/api-clients/cost-analysis/unified-cost/schema/api-verbs/stat.ts
diff --git a/apps/web/src/schema/cost-analysis/unified-cost/model.ts b/apps/web/src/api-clients/cost-analysis/unified-cost/schema/model.ts
similarity index 100%
rename from apps/web/src/schema/cost-analysis/unified-cost/model.ts
rename to apps/web/src/api-clients/cost-analysis/unified-cost/schema/model.ts
diff --git a/apps/web/src/schema/dashboard/_constants/dashboard-constant.ts b/apps/web/src/api-clients/dashboard/_constants/dashboard-constant.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/_constants/dashboard-constant.ts
rename to apps/web/src/api-clients/dashboard/_constants/dashboard-constant.ts
diff --git a/apps/web/src/schema/dashboard/_constants/widget-constant.ts b/apps/web/src/api-clients/dashboard/_constants/widget-constant.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/_constants/widget-constant.ts
rename to apps/web/src/api-clients/dashboard/_constants/widget-constant.ts
diff --git a/apps/web/src/schema/dashboard/_types/dashboard-global-variable-type.ts b/apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/_types/dashboard-global-variable-type.ts
rename to apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts
diff --git a/apps/web/src/schema/dashboard/_types/dashboard-type.ts b/apps/web/src/api-clients/dashboard/_types/dashboard-type.ts
similarity index 61%
rename from apps/web/src/schema/dashboard/_types/dashboard-type.ts
rename to apps/web/src/api-clients/dashboard/_types/dashboard-type.ts
index 74e6601cce..c3f990a0f2 100644
--- a/apps/web/src/schema/dashboard/_types/dashboard-type.ts
+++ b/apps/web/src/api-clients/dashboard/_types/dashboard-type.ts
@@ -1,23 +1,25 @@
 import type {
     REFRESH_INTERVAL_OPTIONS_MAP,
     DASHBOARD_TYPE,
-} from '@/schema/dashboard/_constants/dashboard-constant';
-import type { DashboardGlobalVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
+} from '@/api-clients/dashboard/_constants/dashboard-constant';
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 import type {
     InheritOptions, WidgetOptions, WidgetSize,
-} from '@/schema/dashboard/_types/widget-type';
-import type { PrivateDashboardChangeFolderParameters } from '@/schema/dashboard/private-dashboard/api-verbs/change-folder';
-import type { PrivateDashboardCreateParameters } from '@/schema/dashboard/private-dashboard/api-verbs/create';
-import type { PrivateDashboardDeleteParameters } from '@/schema/dashboard/private-dashboard/api-verbs/delete';
-import type { PrivateDashboardListParameters } from '@/schema/dashboard/private-dashboard/api-verbs/list';
-import type { PrivateDashboardUpdateParameters } from '@/schema/dashboard/private-dashboard/api-verbs/update';
-import type { PrivateDashboardModel } from '@/schema/dashboard/private-dashboard/model';
-import type { PublicDashboardChangeFolderParameters } from '@/schema/dashboard/public-dashboard/api-verbs/change-folder';
-import type { PublicDashboardCreateParameters } from '@/schema/dashboard/public-dashboard/api-verbs/create';
-import type { PublicDashboardDeleteParameters } from '@/schema/dashboard/public-dashboard/api-verbs/delete';
-import type { PublicDashboardListParameters } from '@/schema/dashboard/public-dashboard/api-verbs/list';
-import type { PublicDashboardUpdateParameters } from '@/schema/dashboard/public-dashboard/api-verbs/update';
-import type { PublicDashboardModel } from '@/schema/dashboard/public-dashboard/model';
+} from '@/api-clients/dashboard/_types/widget-type';
+import type { PrivateDashboardChangeFolderParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/change-folder';
+import type { PrivateDashboardCreateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/create';
+import type { PrivateDashboardDeleteParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/delete';
+import type { PrivateDashboardGetParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/get';
+import type { PrivateDashboardListParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/list';
+import type { PrivateDashboardUpdateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/update';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardChangeFolderParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/change-folder';
+import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
+import type { PublicDashboardDeleteParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/delete';
+import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/get';
+import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
+import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 
 import type { VariableModelType } from '@/lib/variable-models';
 import type { Value } from '@/lib/variable-models/_base/types';
@@ -27,12 +29,13 @@ export type DashboardFolderType = 'PUBLIC'|'PRIVATE';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-export type DashboardModel = PublicDashboardModel & PrivateDashboardModel;
+export type DashboardModel = PublicDashboardModel | PrivateDashboardModel;
 export type DashboardCreateParams = PublicDashboardCreateParameters | PrivateDashboardCreateParameters;
 export type DashboardChangeFolderParams = PublicDashboardChangeFolderParameters | PrivateDashboardChangeFolderParameters;
 export type DashboardListParams = PublicDashboardListParameters | PrivateDashboardListParameters;
 export type DashboardUpdateParams = PublicDashboardUpdateParameters | PrivateDashboardUpdateParameters;
 export type DashboardDeleteParams = PublicDashboardDeleteParameters | PrivateDashboardDeleteParameters;
+export type DashboardGetParams = PublicDashboardGetParameters | PrivateDashboardGetParameters;
 
 // dashboard variable schema types
 type VariableSelectionType = 'SINGLE' | 'MULTI';
@@ -67,8 +70,9 @@ export interface DashboardVariablesSchema {
 }
 
 export interface DashboardGlobalVariablesSchema {
-    properties: Record<string, DashboardGlobalVariable>;
+    properties: DashboardGlobalVariableSchemaProperties;
 }
+export type DashboardGlobalVariableSchemaProperties = Record<string, DashboardGlobalVariable>;
 
 // dashboard variables types
 export type DashboardVariables = SingleSelectDashboardVariables | MultiSelectDashboardVariables;
diff --git a/apps/web/src/api-clients/dashboard/_types/folder-type.ts b/apps/web/src/api-clients/dashboard/_types/folder-type.ts
new file mode 100644
index 0000000000..420a0390c7
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/_types/folder-type.ts
@@ -0,0 +1,14 @@
+import type { PrivateFolderCreateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/create';
+import type { PrivateFolderDeleteParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/delete';
+import type { PrivateFolderUpdateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/update';
+import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
+import type { PublicFolderCreateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/create';
+import type { PublicFolderDeleteParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/delete';
+import type { PublicFolderUpdateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/update';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+
+
+export type FolderModel = PublicFolderModel | PrivateFolderModel;
+export type FolderCreateParams = PublicFolderCreateParameters | PrivateFolderCreateParameters;
+export type FolderUpdateParams = PublicFolderUpdateParameters | PrivateFolderUpdateParameters;
+export type FolderDeleteParams = PublicFolderDeleteParameters | PrivateFolderDeleteParameters;
diff --git a/apps/web/src/schema/dashboard/_types/widget-type.ts b/apps/web/src/api-clients/dashboard/_types/widget-type.ts
similarity index 61%
rename from apps/web/src/schema/dashboard/_types/widget-type.ts
rename to apps/web/src/api-clients/dashboard/_types/widget-type.ts
index ba40bf6b15..87214e7f82 100644
--- a/apps/web/src/schema/dashboard/_types/widget-type.ts
+++ b/apps/web/src/api-clients/dashboard/_types/widget-type.ts
@@ -1,24 +1,42 @@
 import type { ConsoleFilterOperator } from '@cloudforet/core-lib/query/type';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type {
     WIDGET_OPTION_FILTER_KEY_MAP, WIDGET_OPTION_KEYS,
     ASSET_DATA_FIELD_MAP, CHART_TYPE,
     COST_DATA_FIELD_MAP,
     GRANULARITY,
     WIDGET_SIZE,
-} from '@/schema/dashboard/_constants/widget-constant';
-import type { PrivateWidgetListParameters } from '@/schema/dashboard/private-widget/api-verbs/list';
-import type { PrivateWidgetModel } from '@/schema/dashboard/private-widget/model';
-import type { PublicWidgetListParameters } from '@/schema/dashboard/public-widget/api-verbs/list';
-import type { PublicWidgetModel } from '@/schema/dashboard/public-widget/model';
+} from '@/api-clients/dashboard/_constants/widget-constant';
+import type { PrivateWidgetCreateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/create';
+import type { PrivateWidgetDeleteParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/delete';
+import type { PrivateWidgetListParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/list';
+import type { PrivateWidgetLoadParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/load';
+import type { PrivateWidgetLoadSumParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/load-sum';
+import type { PrivateWidgetUpdateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/update';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+import type { PublicWidgetCreateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/create';
+import type { PublicWidgetDeleteParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/delete';
+import type { PublicWidgetListParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/list';
+import type { PublicWidgetLoadParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/load';
+import type { PublicWidgetLoadSumParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/load-sum';
+import type { PublicWidgetUpdateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/update';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
 
 import type { VariableModelType } from '@/lib/variable-models';
 import type { ManagedVariableModelKey } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
+import type { DataInfo, LabelsInfo } from '@/common/modules/widgets/types/widget-model';
+
 
 
 export type WidgetModel = PublicWidgetModel | PrivateWidgetModel;
 export type WidgetListParams = PublicWidgetListParameters|PrivateWidgetListParameters;
+export type WidgetCreateParams = PublicWidgetCreateParameters| PrivateWidgetCreateParameters;
+export type WidgetUpdateParams = PublicWidgetUpdateParameters| PrivateWidgetUpdateParameters;
+export type WidgetDeleteParams = PublicWidgetDeleteParameters| PrivateWidgetDeleteParameters;
+export type WidgetLoadParams = PublicWidgetLoadParameters| PrivateWidgetLoadParameters;
+export type WidgetLoadSumParams = PublicWidgetLoadSumParameters| PrivateWidgetLoadSumParameters;
 
 interface WidgetItemOptions {
     type: VariableModelType;
@@ -134,4 +152,16 @@ export type InheritOptions = Partial<Record<WidgetOptionKey, {
     variable_key?: string;
 }>>;
 
+export type WidgetLoadResponse = ListResponse<Record<string, string|number>> & {
+    labels_info: LabelsInfo;
+    data_info: DataInfo;
+    order?: string[];
+};
+
+export type DataTableLoadResponse = ListResponse<Record<string, string|number>> & {
+    labels_info: LabelsInfo;
+    data_info: DataInfo;
+    order?: string[];
+};
+
 
diff --git a/apps/web/src/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api.ts b/apps/web/src/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api.ts
new file mode 100644
index 0000000000..e6be21d1f7
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api.ts
@@ -0,0 +1,61 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { PrivateDashboardChangeFolderParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/change-folder';
+import type { PrivateDashboardCreateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/create';
+import type { PrivateDashboardDeleteParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/delete';
+import type { PrivateDashboardGetParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/get';
+import type { PrivateDashboardListParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/list';
+import type { PrivateDashboardUpdateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/update';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+
+interface UsePrivateDashboardApiReturn {
+    privateDashboardQueryKey: ComputedRef<QueryKey>;
+    privateDashboardListQueryKey: ComputedRef<QueryKey>;
+    privateDashboardAPI: {
+        create: (params: PrivateDashboardCreateParameters) => Promise<PrivateDashboardModel>;
+        update: (params: PrivateDashboardUpdateParameters) => Promise<PrivateDashboardModel>;
+        changeFolder: (params: PrivateDashboardChangeFolderParameters) => Promise<PrivateDashboardModel>;
+        delete: (params: PrivateDashboardDeleteParameters) => Promise<void>;
+        get: (params: PrivateDashboardGetParameters) => Promise<PrivateDashboardModel>;
+        list: (params: PrivateDashboardListParameters) => Promise<ListResponse<PrivateDashboardModel>>;
+    }
+}
+
+
+export const usePrivateDashboardApi = (): UsePrivateDashboardApiReturn => {
+    const privateDashboardQueryKey = useAPIQueryKey('private-dashboard/get');
+    const privateDashboardListQueryKey = useAPIQueryKey('private-dashboard/list');
+
+    const actions = {
+        async create(params: PrivateDashboardCreateParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDashboard.create<PrivateDashboardCreateParameters, PrivateDashboardModel>(params);
+        },
+        async update(params: PrivateDashboardUpdateParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDashboard.update<PrivateDashboardUpdateParameters, PrivateDashboardModel>(params);
+        },
+        async changeFolder(params: PrivateDashboardChangeFolderParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDashboard.changeFolder<PrivateDashboardChangeFolderParameters, PrivateDashboardModel>(params);
+        },
+        async delete(params: PrivateDashboardDeleteParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDashboard.delete<PrivateDashboardDeleteParameters>(params);
+        },
+        async get(params: PrivateDashboardGetParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDashboard.get<PrivateDashboardGetParameters, PrivateDashboardModel>(params);
+        },
+        async list(params: PrivateDashboardListParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDashboard.list<PrivateDashboardListParameters, ListResponse<PrivateDashboardModel>>(params);
+        },
+    };
+
+    return {
+        privateDashboardQueryKey,
+        privateDashboardListQueryKey,
+        privateDashboardAPI: actions,
+    };
+};
diff --git a/apps/web/src/schema/dashboard/private-dashboard/api-verbs/change-folder.ts b/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/change-folder.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/private-dashboard/api-verbs/change-folder.ts
rename to apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/change-folder.ts
diff --git a/apps/web/src/schema/dashboard/private-dashboard/api-verbs/create.ts b/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/create.ts
similarity index 84%
rename from apps/web/src/schema/dashboard/private-dashboard/api-verbs/create.ts
rename to apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/create.ts
index ba652f4755..dbb65ed664 100644
--- a/apps/web/src/schema/dashboard/private-dashboard/api-verbs/create.ts
+++ b/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/create.ts
@@ -1,9 +1,9 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     DashboardGlobalVariablesSchema,
     DashboardOptions, DashboardVariables, DashboardVariablesSchema,
     DashboardVars,
-} from '@/schema/dashboard/_types/dashboard-type';
+} from '@/api-clients/dashboard/_types/dashboard-type';
 
 import type { SharedDashboardLayout } from '@/services/dashboards/types/shared-dashboard-type';
 
diff --git a/apps/web/src/schema/dashboard/private-dashboard/api-verbs/delete.ts b/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/private-dashboard/api-verbs/delete.ts
rename to apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/dashboard/private-dashboard/api-verbs/get.ts b/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/private-dashboard/api-verbs/get.ts
rename to apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/dashboard/private-dashboard/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/private-dashboard/api-verbs/list.ts
rename to apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/dashboard/private-dashboard/api-verbs/update.ts b/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/update.ts
similarity index 81%
rename from apps/web/src/schema/dashboard/private-dashboard/api-verbs/update.ts
rename to apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/update.ts
index 5bd06889f7..5267e699c5 100644
--- a/apps/web/src/schema/dashboard/private-dashboard/api-verbs/update.ts
+++ b/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/update.ts
@@ -1,9 +1,9 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     DashboardOptions, DashboardVariables, DashboardVariablesSchema, DashboardLayout,
     DashboardVars,
     DashboardGlobalVariablesSchema,
-} from '@/schema/dashboard/_types/dashboard-type';
+} from '@/api-clients/dashboard/_types/dashboard-type';
 
 
 export interface PrivateDashboardUpdateParameters {
diff --git a/apps/web/src/schema/dashboard/private-dashboard/model.ts b/apps/web/src/api-clients/dashboard/private-dashboard/schema/model.ts
similarity index 86%
rename from apps/web/src/schema/dashboard/private-dashboard/model.ts
rename to apps/web/src/api-clients/dashboard/private-dashboard/schema/model.ts
index 287dd77063..22f43ca43b 100644
--- a/apps/web/src/schema/dashboard/private-dashboard/model.ts
+++ b/apps/web/src/api-clients/dashboard/private-dashboard/schema/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     DashboardLayout,
     DashboardOptions,
@@ -6,7 +6,7 @@ import type {
     DashboardVariablesSchema,
     DashboardVars,
     DashboardGlobalVariablesSchema,
-} from '@/schema/dashboard/_types/dashboard-type';
+} from '@/api-clients/dashboard/_types/dashboard-type';
 
 
 export interface PrivateDashboardModel {
diff --git a/apps/web/src/api-clients/dashboard/private-data-table/composables/use-private-data-table-api.ts b/apps/web/src/api-clients/dashboard/private-data-table/composables/use-private-data-table-api.ts
new file mode 100644
index 0000000000..69dc86ea2b
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/private-data-table/composables/use-private-data-table-api.ts
@@ -0,0 +1,69 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { DataTableLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { DataTableAddParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/add';
+import type { DataTableDeleteParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/delete';
+import type { DataTableGetParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/get';
+import type { DataTableListParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/list';
+import type { DataTableLoadParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/load';
+import type { DataTableTransformParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/transform';
+import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update';
+
+interface UsePrivateDataTableApiReturn {
+    privateDataTableQueryKey: ComputedRef<QueryKey>;
+    privateDataTableListQueryKey: ComputedRef<QueryKey>;
+    privateDataTableLoadQueryKey: ComputedRef<QueryKey>;
+    privateDataTableAPI: {
+        add: (params: DataTableAddParameters) => Promise<PrivateDataTableModel>;
+        transform: (params: DataTableTransformParameters) => Promise<PrivateDataTableModel>;
+        update: (params: DataTableUpdateParameters) => Promise<PrivateDataTableModel>;
+        delete: (params: DataTableDeleteParameters) => Promise<void>;
+        load: (params: DataTableLoadParameters) => Promise<DataTableLoadResponse>;
+        get: (params: DataTableGetParameters) => Promise<PrivateDataTableModel>;
+        list: (params: DataTableListParameters) => Promise<ListResponse<PrivateDataTableModel>>;
+    }
+}
+
+export const usePrivateDataTableApi = (): UsePrivateDataTableApiReturn => {
+    const privateDataTableQueryKey = useAPIQueryKey('private-data-table/get');
+    const privateDataTableListQueryKey = useAPIQueryKey('private-data-table/list');
+    const privateDataTableLoadQueryKey = useAPIQueryKey('private-data-table/load');
+
+    const action = {
+        async add(params: DataTableAddParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDataTable.add<DataTableAddParameters, PrivateDataTableModel>(params);
+        },
+        async transform(params: DataTableTransformParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDataTable.transform<DataTableTransformParameters, PrivateDataTableModel>(params);
+        },
+        async update(params: DataTableUpdateParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDataTable.update<DataTableUpdateParameters, PrivateDataTableModel>(params);
+        },
+        async delete(params: DataTableDeleteParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDataTable.delete<DataTableDeleteParameters>(params);
+        },
+        async load(params: DataTableLoadParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDataTable.load<DataTableLoadParameters, DataTableLoadResponse>(params);
+        },
+        async get(params: DataTableGetParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDataTable.get<DataTableGetParameters, PrivateDataTableModel>(params);
+        },
+        async list(params: DataTableListParameters) {
+            return SpaceConnector.clientV2.dashboard.privateDataTable.list<DataTableListParameters, ListResponse<PrivateDataTableModel>>(params);
+        },
+    };
+
+    return {
+        privateDataTableQueryKey,
+        privateDataTableListQueryKey,
+        privateDataTableLoadQueryKey,
+        privateDataTableAPI: action,
+    };
+};
diff --git a/apps/web/src/schema/dashboard/private-data-table/model.ts b/apps/web/src/api-clients/dashboard/private-data-table/schema/model.ts
similarity index 91%
rename from apps/web/src/schema/dashboard/private-data-table/model.ts
rename to apps/web/src/api-clients/dashboard/private-data-table/schema/model.ts
index 99ede6f499..fcc82fd1c9 100644
--- a/apps/web/src/schema/dashboard/private-data-table/model.ts
+++ b/apps/web/src/api-clients/dashboard/private-data-table/schema/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 import type {
     DataInfo,
diff --git a/apps/web/src/api-clients/dashboard/private-folder/composables/use-private-folder-api.ts b/apps/web/src/api-clients/dashboard/private-folder/composables/use-private-folder-api.ts
new file mode 100644
index 0000000000..bd61398f37
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/private-folder/composables/use-private-folder-api.ts
@@ -0,0 +1,55 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { PrivateFolderCreateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/create';
+import type { PrivateFolderDeleteParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/delete';
+import type { PrivateFolderGetParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/get';
+import type { PrivateFolderListParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/list';
+import type { PrivateFolderUpdateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/update';
+import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
+
+interface UsePrivateFolderApiReturn {
+    privateFolderQueryKey: ComputedRef<QueryKey>;
+    privateFolderListQueryKey: ComputedRef<QueryKey>;
+    privateFolderAPI: {
+        create: (params: PrivateFolderCreateParameters) => Promise<PrivateFolderModel>;
+        update: (params: PrivateFolderUpdateParameters) => Promise<PrivateFolderModel>;
+        delete: (params: PrivateFolderDeleteParameters) => Promise<void>;
+        get: (params: PrivateFolderGetParameters) => Promise<PrivateFolderModel>;
+        list: (params: PrivateFolderListParameters) => Promise<ListResponse<PrivateFolderModel>>;
+    };
+}
+
+export const usePrivateFolderApi = (): UsePrivateFolderApiReturn => {
+    const privateFolderQueryKey = useAPIQueryKey('private-folder/get');
+    const privateFolderListQueryKey = useAPIQueryKey('private-folder/list');
+
+    const action = {
+        async create(params: PrivateFolderCreateParameters) {
+            return SpaceConnector.clientV2.dashboard.privateFolder.create<PrivateFolderCreateParameters, PrivateFolderModel>(params);
+        },
+        async update(params: PrivateFolderUpdateParameters) {
+            return SpaceConnector.clientV2.dashboard.privateFolder.update<PrivateFolderUpdateParameters, PrivateFolderModel>(params);
+        },
+        async delete(params: PrivateFolderDeleteParameters) {
+            return SpaceConnector.clientV2.dashboard.privateFolder.delete<PrivateFolderDeleteParameters>(params);
+        },
+        async get(params: PrivateFolderGetParameters) {
+            return SpaceConnector.clientV2.dashboard.privateFolder.get<PrivateFolderGetParameters, PrivateFolderModel>(params);
+        },
+        async list(params: PrivateFolderListParameters) {
+            return SpaceConnector.clientV2.dashboard.privateFolder.list<PrivateFolderListParameters, ListResponse<PrivateFolderModel>>(params);
+        },
+    };
+
+    return {
+        privateFolderQueryKey,
+        privateFolderListQueryKey,
+        privateFolderAPI: action,
+    };
+};
diff --git a/apps/web/src/schema/dashboard/private-folder/api-verbs/create.ts b/apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/create.ts
similarity index 68%
rename from apps/web/src/schema/dashboard/private-folder/api-verbs/create.ts
rename to apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/create.ts
index 5ddd40cd00..c0be3d3083 100644
--- a/apps/web/src/schema/dashboard/private-folder/api-verbs/create.ts
+++ b/apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 
 export interface PrivateFolderCreateParameters {
diff --git a/apps/web/src/schema/dashboard/private-folder/api-verbs/delete.ts b/apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/private-folder/api-verbs/delete.ts
rename to apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/delete.ts
diff --git a/apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/get.ts b/apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/get.ts
new file mode 100644
index 0000000000..b0e1d6551b
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/get.ts
@@ -0,0 +1,3 @@
+export interface PrivateFolderGetParameters {
+    folder_id: string;
+}
diff --git a/apps/web/src/schema/dashboard/private-folder/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/private-folder/api-verbs/list.ts
rename to apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/dashboard/private-folder/api-verbs/update.ts b/apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/update.ts
similarity index 63%
rename from apps/web/src/schema/dashboard/private-folder/api-verbs/update.ts
rename to apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/update.ts
index 430769eec3..095b6498ba 100644
--- a/apps/web/src/schema/dashboard/private-folder/api-verbs/update.ts
+++ b/apps/web/src/api-clients/dashboard/private-folder/schema/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 
 export interface PrivateFolderUpdateParameters {
diff --git a/apps/web/src/schema/dashboard/private-folder/model.ts b/apps/web/src/api-clients/dashboard/private-folder/schema/model.ts
similarity index 77%
rename from apps/web/src/schema/dashboard/private-folder/model.ts
rename to apps/web/src/api-clients/dashboard/private-folder/schema/model.ts
index 7cc3cc74ac..9b8e68000c 100644
--- a/apps/web/src/schema/dashboard/private-folder/model.ts
+++ b/apps/web/src/api-clients/dashboard/private-folder/schema/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface PrivateFolderModel {
     folder_id: string;
diff --git a/apps/web/src/api-clients/dashboard/private-widget/composables/use-private-widget-api.ts b/apps/web/src/api-clients/dashboard/private-widget/composables/use-private-widget-api.ts
new file mode 100644
index 0000000000..354c0c7d76
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/private-widget/composables/use-private-widget-api.ts
@@ -0,0 +1,72 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { PrivateWidgetCreateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/create';
+import type { PrivateWidgetDeleteParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/delete';
+import type { PrivateWidgetGetParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/get';
+import type { PrivateWidgetListParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/list';
+import type { PrivateWidgetLoadParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/load';
+import type { PrivateWidgetLoadSumParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/load-sum';
+import type { PrivateWidgetUpdateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/update';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+
+interface UsePrivateWidgetApiReturn {
+    privateWidgetQueryKey: ComputedRef<QueryKey>;
+    privateWidgetListQueryKey: ComputedRef<QueryKey>;
+    privateWidgetLoadQueryKey: ComputedRef<QueryKey>;
+    privateWidgetLoadSumQueryKey: ComputedRef<QueryKey>;
+    privateWidgetAPI: {
+        create: (params: PrivateWidgetCreateParameters) => Promise<PrivateWidgetModel>;
+        update: (params: PrivateWidgetUpdateParameters) => Promise<PrivateWidgetModel>;
+        delete: (params: PrivateWidgetDeleteParameters) => Promise<void>;
+        load: (params: PrivateWidgetLoadParameters) => Promise<WidgetLoadResponse>;
+        loadSum: (params: PrivateWidgetLoadSumParameters) => Promise<WidgetLoadResponse>;
+        get: (params: PrivateWidgetGetParameters) => Promise<PrivateWidgetModel>;
+        list: (params: PrivateWidgetListParameters) => Promise<ListResponse<PrivateWidgetModel>>;
+    }
+}
+
+export const usePrivateWidgetApi = (): UsePrivateWidgetApiReturn => {
+    const privateWidgetQueryKey = useAPIQueryKey('private-widget/get');
+    const privateWidgetListQueryKey = useAPIQueryKey('private-widget/list');
+    const privateWidgetLoadQueryKey = useAPIQueryKey('private-widget/load');
+    const privateWidgetLoadSumQueryKey = useAPIQueryKey('private-widget/load-sum');
+
+    const action = {
+        async create(params: PrivateWidgetCreateParameters) {
+            return SpaceConnector.clientV2.dashboard.privateWidget.create<PrivateWidgetCreateParameters, PrivateWidgetModel>(params);
+        },
+        async update(params: PrivateWidgetUpdateParameters) {
+            return SpaceConnector.clientV2.dashboard.privateWidget.update<PrivateWidgetUpdateParameters, PrivateWidgetModel>(params);
+        },
+        async delete(params: PrivateWidgetDeleteParameters) {
+            return SpaceConnector.clientV2.dashboard.privateWidget.delete<PrivateWidgetDeleteParameters>(params);
+        },
+        async load(params: PrivateWidgetLoadParameters) {
+            return SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>(params);
+        },
+        async loadSum(params: PrivateWidgetLoadSumParameters) {
+            return SpaceConnector.clientV2.dashboard.privateWidget.loadSum<PrivateWidgetLoadSumParameters, WidgetLoadResponse>(params);
+        },
+        async get(params: PrivateWidgetGetParameters) {
+            return SpaceConnector.clientV2.dashboard.privateWidget.get<PrivateWidgetGetParameters, PrivateWidgetModel>(params);
+        },
+        async list(params: PrivateWidgetListParameters) {
+            return SpaceConnector.clientV2.dashboard.privateWidget.list<PrivateWidgetListParameters, ListResponse<PrivateWidgetModel>>(params);
+        },
+    };
+
+    return {
+        privateWidgetQueryKey,
+        privateWidgetListQueryKey,
+        privateWidgetLoadQueryKey,
+        privateWidgetLoadSumQueryKey,
+        privateWidgetAPI: action,
+    };
+};
diff --git a/apps/web/src/schema/dashboard/private-widget/api-verbs/create.ts b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/create.ts
similarity index 89%
rename from apps/web/src/schema/dashboard/private-widget/api-verbs/create.ts
rename to apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/create.ts
index 147e81c547..1d95c873f3 100644
--- a/apps/web/src/schema/dashboard/private-widget/api-verbs/create.ts
+++ b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 import type { WidgetSize } from '@/common/modules/widgets/types/widget-display-type';
 import type { WidgetType, WidgetState } from '@/common/modules/widgets/types/widget-model';
diff --git a/apps/web/src/schema/dashboard/private-widget/api-verbs/delete.ts b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/private-widget/api-verbs/delete.ts
rename to apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/dashboard/private-widget/api-verbs/get.ts b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/private-widget/api-verbs/get.ts
rename to apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/dashboard/private-widget/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/private-widget/api-verbs/list.ts
rename to apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/dashboard/private-widget/api-verbs/load-sum.ts b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/load-sum.ts
similarity index 65%
rename from apps/web/src/schema/dashboard/private-widget/api-verbs/load-sum.ts
rename to apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/load-sum.ts
index 6dfacf812e..a530d3edb1 100644
--- a/apps/web/src/schema/dashboard/private-widget/api-verbs/load-sum.ts
+++ b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/load-sum.ts
@@ -1,4 +1,4 @@
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
 export interface PrivateWidgetLoadSumParameters {
     widget_id: string;
diff --git a/apps/web/src/schema/dashboard/private-widget/api-verbs/load.ts b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/load.ts
similarity index 66%
rename from apps/web/src/schema/dashboard/private-widget/api-verbs/load.ts
rename to apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/load.ts
index c3a5b883a9..11412aafbd 100644
--- a/apps/web/src/schema/dashboard/private-widget/api-verbs/load.ts
+++ b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/load.ts
@@ -1,7 +1,7 @@
 import type { Sort } from '@cloudforet/core-lib/space-connector/type';
 
-import type { Page } from '@/schema/_common/type';
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
+import type { Page } from '@/api-clients/_common/schema/type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
 export interface PrivateWidgetLoadParameters {
     widget_id: string;
diff --git a/apps/web/src/schema/dashboard/private-widget/api-verbs/update.ts b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/update.ts
similarity index 86%
rename from apps/web/src/schema/dashboard/private-widget/api-verbs/update.ts
rename to apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/update.ts
index 31a908eb44..34f946baba 100644
--- a/apps/web/src/schema/dashboard/private-widget/api-verbs/update.ts
+++ b/apps/web/src/api-clients/dashboard/private-widget/schema/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 import type { WidgetSize } from '@/common/modules/widgets/types/widget-display-type';
 import type { WidgetType, WidgetState } from '@/common/modules/widgets/types/widget-model';
diff --git a/apps/web/src/schema/dashboard/private-widget/model.ts b/apps/web/src/api-clients/dashboard/private-widget/schema/model.ts
similarity index 93%
rename from apps/web/src/schema/dashboard/private-widget/model.ts
rename to apps/web/src/api-clients/dashboard/private-widget/schema/model.ts
index 5ccf39e18a..33696fe49a 100644
--- a/apps/web/src/schema/dashboard/private-widget/model.ts
+++ b/apps/web/src/api-clients/dashboard/private-widget/schema/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 import type { WidgetFieldValue } from '@/common/modules/widgets/_widget-field-value-manager/type';
 import type { WidgetSize } from '@/common/modules/widgets/types/widget-display-type';
diff --git a/apps/web/src/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api.ts b/apps/web/src/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api.ts
new file mode 100644
index 0000000000..9a04d3f2e5
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api.ts
@@ -0,0 +1,70 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { PublicDashboardChangeFolderParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/change-folder';
+import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
+import type { PublicDashboardDeleteParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/delete';
+import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/get';
+import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
+import type { PublicDashboardShareParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/share';
+import type { PublicDashboardUnshareParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/unshare';
+import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+
+interface UsePublicDashboardApiReturn {
+    publicDashboardQueryKey: ComputedRef<QueryKey>;
+    publicDashboardListQueryKey: ComputedRef<QueryKey>;
+    publicDashboardAPI: {
+        create: (params: PublicDashboardCreateParameters) => Promise<PublicDashboardModel>;
+        update: (params: PublicDashboardUpdateParameters) => Promise<PublicDashboardModel>;
+        changeFolder: (params: PublicDashboardChangeFolderParameters) => Promise<PublicDashboardModel>;
+        share: (params: PublicDashboardShareParameters) => Promise<PublicDashboardModel>;
+        unshare: (params: PublicDashboardUnshareParameters) => Promise<PublicDashboardModel>;
+        delete: (params: PublicDashboardDeleteParameters) => Promise<void>;
+        get: (params: PublicDashboardGetParameters) => Promise<PublicDashboardModel>;
+        list: (params: PublicDashboardListParameters) => Promise<ListResponse<PublicDashboardModel>>;
+    }
+}
+
+export const usePublicDashboardApi = (): UsePublicDashboardApiReturn => {
+    const publicDashboardQueryKey = useAPIQueryKey('public-dashboard/get');
+    const publicDashboardListQueryKey = useAPIQueryKey('public-dashboard/list');
+
+    const actions = {
+        async create(params: PublicDashboardCreateParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDashboard.create<PublicDashboardCreateParameters, PublicDashboardModel>(params);
+        },
+        async update(params: PublicDashboardUpdateParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDashboard.update<PublicDashboardUpdateParameters, PublicDashboardModel>(params);
+        },
+        async changeFolder(params: PublicDashboardChangeFolderParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDashboard.changeFolder<PublicDashboardChangeFolderParameters, PublicDashboardModel>(params);
+        },
+        async share(params: PublicDashboardShareParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDashboard.share<PublicDashboardShareParameters, PublicDashboardModel>(params);
+        },
+        async unshare(params: PublicDashboardUnshareParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDashboard.unshare<PublicDashboardUnshareParameters, PublicDashboardModel>(params);
+        },
+        async delete(params: PublicDashboardDeleteParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDashboard.delete<PublicDashboardUnshareParameters>(params);
+        },
+        async get(params: PublicDashboardGetParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDashboard.get<PublicDashboardGetParameters, PublicDashboardModel>(params);
+        },
+        async list(params: PublicDashboardListParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDashboard.list<PublicDashboardListParameters, ListResponse<PublicDashboardModel>>(params);
+        },
+    };
+
+    return {
+        publicDashboardQueryKey,
+        publicDashboardListQueryKey,
+        publicDashboardAPI: actions,
+    };
+};
diff --git a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/change-folder.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/change-folder.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-dashboard/api-verbs/change-folder.ts
rename to apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/change-folder.ts
diff --git a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/create.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts
similarity index 79%
rename from apps/web/src/schema/dashboard/public-dashboard/api-verbs/create.ts
rename to apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts
index 4898b7909f..fe5c4718e0 100644
--- a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/create.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts
@@ -1,10 +1,10 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
     DashboardOptions, DashboardVariables, DashboardVariablesSchema,
     DashboardVars,
     DashboardGlobalVariablesSchema,
-} from '@/schema/dashboard/_types/dashboard-type';
+} from '@/api-clients/dashboard/_types/dashboard-type';
 
 import type { SharedDashboardLayout } from '@/services/dashboards/types/shared-dashboard-type';
 
diff --git a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/delete.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-dashboard/api-verbs/delete.ts
rename to apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/get.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-dashboard/api-verbs/get.ts
rename to apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-dashboard/api-verbs/list.ts
rename to apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/share.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/share.ts
similarity index 55%
rename from apps/web/src/schema/dashboard/public-dashboard/api-verbs/share.ts
rename to apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/share.ts
index 886f84fecd..8e560be5e0 100644
--- a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/share.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/share.ts
@@ -1,4 +1,4 @@
-import type { DashboardScope } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardScope } from '@/api-clients/dashboard/_types/dashboard-type';
 
 export interface PublicDashboardShareParameters {
     dashboard_id: string;
diff --git a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/unshare.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/unshare.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-dashboard/api-verbs/unshare.ts
rename to apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/unshare.ts
diff --git a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/update.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/update.ts
similarity index 81%
rename from apps/web/src/schema/dashboard/public-dashboard/api-verbs/update.ts
rename to apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/update.ts
index bcf8a6ea39..4f2a503a2f 100644
--- a/apps/web/src/schema/dashboard/public-dashboard/api-verbs/update.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/update.ts
@@ -1,9 +1,9 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     DashboardOptions, DashboardVariables, DashboardVariablesSchema, DashboardLayout,
     DashboardVars,
     DashboardGlobalVariablesSchema,
-} from '@/schema/dashboard/_types/dashboard-type';
+} from '@/api-clients/dashboard/_types/dashboard-type';
 
 
 export interface PublicDashboardUpdateParameters {
diff --git a/apps/web/src/schema/dashboard/public-dashboard/model.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts
similarity index 82%
rename from apps/web/src/schema/dashboard/public-dashboard/model.ts
rename to apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts
index dc416a6077..5ae600ff6d 100644
--- a/apps/web/src/schema/dashboard/public-dashboard/model.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
     DashboardLayout,
     DashboardOptions,
@@ -8,7 +8,7 @@ import type {
     DashboardVars,
     DashboardScope,
     DashboardGlobalVariablesSchema,
-} from '@/schema/dashboard/_types/dashboard-type';
+} from '@/api-clients/dashboard/_types/dashboard-type';
 
 
 export interface PublicDashboardModel {
diff --git a/apps/web/src/api-clients/dashboard/public-data-table/composables/use-public-data-table-api.ts b/apps/web/src/api-clients/dashboard/public-data-table/composables/use-public-data-table-api.ts
new file mode 100644
index 0000000000..b40aa342a5
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/public-data-table/composables/use-public-data-table-api.ts
@@ -0,0 +1,70 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { DataTableLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { DataTableAddParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/add';
+import type { DataTableDeleteParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/delete';
+import type { DataTableGetParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/get';
+import type { DataTableListParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/list';
+import type { DataTableLoadParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/load';
+import type { DataTableTransformParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/transform';
+import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+
+
+interface UsePublicDataTableApiReturn {
+    publicDataTableQueryKey: ComputedRef<QueryKey>;
+    publicDataTableListQueryKey: ComputedRef<QueryKey>;
+    publicDataTableLoadQueryKey: ComputedRef<QueryKey>;
+    publicDataTableAPI: {
+        add: (params: DataTableAddParameters) => Promise<PublicDataTableModel>;
+        transform: (params: DataTableTransformParameters) => Promise<PublicDataTableModel>;
+        update: (params: DataTableUpdateParameters) => Promise<PublicDataTableModel>;
+        delete: (params: DataTableDeleteParameters) => Promise<void>;
+        load: (params: DataTableLoadParameters) => Promise<DataTableLoadResponse>;
+        get: (params: DataTableGetParameters) => Promise<PublicDataTableModel>;
+        list: (params: DataTableListParameters) => Promise<ListResponse<PublicDataTableModel>>;
+    }
+}
+
+export const usePublicDataTableApi = (): UsePublicDataTableApiReturn => {
+    const publicDataTableQueryKey = useAPIQueryKey('public-data-table/get');
+    const publicDataTableListQueryKey = useAPIQueryKey('public-data-table/list');
+    const publicDataTableLoadQueryKey = useAPIQueryKey('public-data-table/load');
+
+    const action = {
+        async add(params: DataTableAddParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDataTable.add<DataTableAddParameters, PublicDataTableModel>(params);
+        },
+        async transform(params: DataTableTransformParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDataTable.transform<DataTableTransformParameters, PublicDataTableModel>(params);
+        },
+        async update(params: DataTableUpdateParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDataTable.update<DataTableUpdateParameters, PublicDataTableModel>(params);
+        },
+        async delete(params: DataTableDeleteParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDataTable.delete<DataTableDeleteParameters>(params);
+        },
+        async load(params: DataTableLoadParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDataTable.load<DataTableLoadParameters, DataTableLoadResponse>(params);
+        },
+        async get(params: DataTableGetParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDataTable.get<DataTableGetParameters, PublicDataTableModel>(params);
+        },
+        async list(params: DataTableListParameters) {
+            return SpaceConnector.clientV2.dashboard.publicDataTable.list<DataTableListParameters, ListResponse<PublicDataTableModel>>(params);
+        },
+    };
+
+    return {
+        publicDataTableQueryKey,
+        publicDataTableListQueryKey,
+        publicDataTableLoadQueryKey,
+        publicDataTableAPI: action,
+    };
+};
diff --git a/apps/web/src/schema/dashboard/public-data-table/api-verbs/add.ts b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/add.ts
similarity index 67%
rename from apps/web/src/schema/dashboard/public-data-table/api-verbs/add.ts
rename to apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/add.ts
index 04d55a0fc8..b58c7c4d6b 100644
--- a/apps/web/src/schema/dashboard/public-data-table/api-verbs/add.ts
+++ b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/add.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import type {
     DataTableOptions, DataTableSourceType,
diff --git a/apps/web/src/schema/dashboard/public-data-table/api-verbs/delete.ts b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-data-table/api-verbs/delete.ts
rename to apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/dashboard/public-data-table/api-verbs/get.ts b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-data-table/api-verbs/get.ts
rename to apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/dashboard/public-data-table/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-data-table/api-verbs/list.ts
rename to apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/list.ts
diff --git a/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/load.ts b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/load.ts
new file mode 100644
index 0000000000..defac8b27b
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/load.ts
@@ -0,0 +1,15 @@
+import type { Page } from '@/api-clients/_common/schema/type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { Granularity } from '@/api-clients/dashboard/_types/widget-type';
+
+
+
+export interface DataTableLoadParameters {
+    data_table_id: string;
+    granularity: Granularity;
+    start?: string;
+    end?: string;
+    sort?: any[];
+    page?: Page;
+    vars?: DashboardVars;
+}
diff --git a/apps/web/src/schema/dashboard/public-data-table/api-verbs/transform.ts b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/transform.ts
similarity index 68%
rename from apps/web/src/schema/dashboard/public-data-table/api-verbs/transform.ts
rename to apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/transform.ts
index 3e41dbc784..4e18967e73 100644
--- a/apps/web/src/schema/dashboard/public-data-table/api-verbs/transform.ts
+++ b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/transform.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import type {
     DataTableOperator,
diff --git a/apps/web/src/schema/dashboard/public-data-table/api-verbs/update.ts b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/update.ts
similarity index 63%
rename from apps/web/src/schema/dashboard/public-data-table/api-verbs/update.ts
rename to apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/update.ts
index 8211c0f670..9641db8bbc 100644
--- a/apps/web/src/schema/dashboard/public-data-table/api-verbs/update.ts
+++ b/apps/web/src/api-clients/dashboard/public-data-table/schema/api-verbs/update.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import type { DataTableOptions } from '@/common/modules/widgets/types/widget-model';
 
diff --git a/apps/web/src/schema/dashboard/public-data-table/model.ts b/apps/web/src/api-clients/dashboard/public-data-table/schema/model.ts
similarity index 85%
rename from apps/web/src/schema/dashboard/public-data-table/model.ts
rename to apps/web/src/api-clients/dashboard/public-data-table/schema/model.ts
index 0c2c63e4b8..81b3815482 100644
--- a/apps/web/src/schema/dashboard/public-data-table/model.ts
+++ b/apps/web/src/api-clients/dashboard/public-data-table/schema/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 import type {
     DataInfo,
diff --git a/apps/web/src/api-clients/dashboard/public-folder/composables/use-public-folder-api.ts b/apps/web/src/api-clients/dashboard/public-folder/composables/use-public-folder-api.ts
new file mode 100644
index 0000000000..73b3878793
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/public-folder/composables/use-public-folder-api.ts
@@ -0,0 +1,65 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { PublicFolderCreateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/create';
+import type { PublicFolderDeleteParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/delete';
+import type { PublicFolderGetParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/get';
+import type { PublicFolderListParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/list';
+import type { PublicFolderShareParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/share';
+import type { PublicFolderUnshareParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/unshare';
+import type { PublicFolderUpdateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/update';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+
+interface UsePublicFolderApiReturn {
+    publicFolderQueryKey: ComputedRef<QueryKey>;
+    publicFolderListQueryKey: ComputedRef<QueryKey>;
+    publicFolderAPI: {
+        create: (params: PublicFolderCreateParameters) => Promise<PublicFolderModel>;
+        update: (params: PublicFolderUpdateParameters) => Promise<PublicFolderModel>;
+        share: (params: PublicFolderShareParameters) => Promise<PublicFolderModel>;
+        unshare: (params: PublicFolderUnshareParameters) => Promise<PublicFolderModel>;
+        delete: (params: PublicFolderDeleteParameters) => Promise<void>;
+        get: (params: PublicFolderGetParameters) => Promise<PublicFolderModel>;
+        list: (params: PublicFolderListParameters) => Promise<ListResponse<PublicFolderModel>>;
+    }
+}
+
+export const usePublicFolderApi = (): UsePublicFolderApiReturn => {
+    const publicFolderQueryKey = useAPIQueryKey('public-folder/get');
+    const publicFolderListQueryKey = useAPIQueryKey('public-folder/list');
+
+    const action = {
+        async create(params: PublicFolderCreateParameters) {
+            return SpaceConnector.clientV2.dashboard.publicFolder.create<PublicFolderCreateParameters, PublicFolderModel>(params);
+        },
+        async update(params: PublicFolderUpdateParameters) {
+            return SpaceConnector.clientV2.dashboard.publicFolder.update<PublicFolderUpdateParameters, PublicFolderModel>(params);
+        },
+        async share(params: PublicFolderShareParameters) {
+            return SpaceConnector.clientV2.dashboard.publicFolder.share<PublicFolderShareParameters, PublicFolderModel>(params);
+        },
+        async unshare(params: PublicFolderUnshareParameters) {
+            return SpaceConnector.clientV2.dashboard.publicFolder.unshare<PublicFolderUnshareParameters, PublicFolderModel>(params);
+        },
+        async delete(params: PublicFolderDeleteParameters) {
+            return SpaceConnector.clientV2.dashboard.publicFolder.delete<PublicFolderDeleteParameters>(params);
+        },
+        async get(params: PublicFolderGetParameters) {
+            return SpaceConnector.clientV2.dashboard.publicFolder.get<PublicFolderGetParameters, PublicFolderModel>(params);
+        },
+        async list(params: PublicFolderListParameters) {
+            return SpaceConnector.clientV2.dashboard.publicFolder.list<PublicFolderListParameters, ListResponse<PublicFolderModel>>(params);
+        },
+    };
+
+    return {
+        publicFolderQueryKey,
+        publicFolderListQueryKey,
+        publicFolderAPI: action,
+    };
+};
diff --git a/apps/web/src/schema/dashboard/public-folder/api-verbs/create.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts
similarity index 63%
rename from apps/web/src/schema/dashboard/public-folder/api-verbs/create.ts
rename to apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts
index 0a36ddc1d1..76d46dcf06 100644
--- a/apps/web/src/schema/dashboard/public-folder/api-verbs/create.ts
+++ b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 
 export interface PublicFolderCreateParameters {
diff --git a/apps/web/src/schema/dashboard/public-folder/api-verbs/delete.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-folder/api-verbs/delete.ts
rename to apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/delete.ts
diff --git a/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/get.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/get.ts
new file mode 100644
index 0000000000..574a6b007f
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/get.ts
@@ -0,0 +1,3 @@
+export interface PublicFolderGetParameters {
+    folder_id: string;
+}
diff --git a/apps/web/src/schema/dashboard/public-folder/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-folder/api-verbs/list.ts
rename to apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/dashboard/public-folder/api-verbs/share.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/share.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-folder/api-verbs/share.ts
rename to apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/share.ts
diff --git a/apps/web/src/schema/dashboard/public-folder/api-verbs/unshare.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/unshare.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-folder/api-verbs/unshare.ts
rename to apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/unshare.ts
diff --git a/apps/web/src/schema/dashboard/public-folder/api-verbs/update.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/update.ts
similarity index 63%
rename from apps/web/src/schema/dashboard/public-folder/api-verbs/update.ts
rename to apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/update.ts
index 866a2826f1..89398261c5 100644
--- a/apps/web/src/schema/dashboard/public-folder/api-verbs/update.ts
+++ b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 
 export interface PublicFolderUpdateParameters {
diff --git a/apps/web/src/schema/dashboard/public-folder/model.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/model.ts
similarity index 72%
rename from apps/web/src/schema/dashboard/public-folder/model.ts
rename to apps/web/src/api-clients/dashboard/public-folder/schema/model.ts
index 275b136a0a..424b1471ea 100644
--- a/apps/web/src/schema/dashboard/public-folder/model.ts
+++ b/apps/web/src/api-clients/dashboard/public-folder/schema/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface PublicFolderModel {
     folder_id: string;
diff --git a/apps/web/src/api-clients/dashboard/public-widget/composables/use-public-widget-api.ts b/apps/web/src/api-clients/dashboard/public-widget/composables/use-public-widget-api.ts
new file mode 100644
index 0000000000..c30613da9f
--- /dev/null
+++ b/apps/web/src/api-clients/dashboard/public-widget/composables/use-public-widget-api.ts
@@ -0,0 +1,72 @@
+import type { ComputedRef } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { PublicWidgetCreateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/create';
+import type { PublicWidgetDeleteParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/delete';
+import type { PublicWidgetGetParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/get';
+import type { PublicWidgetListParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/list';
+import type { PublicWidgetLoadParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/load';
+import type { PublicWidgetLoadSumParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/load-sum';
+import type { PublicWidgetUpdateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/update';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
+
+interface UsePublicWidgetApiReturn {
+    publicWidgetQueryKey: ComputedRef<QueryKey>;
+    publicWidgetListQueryKey: ComputedRef<QueryKey>;
+    publicWidgetLoadQueryKey: ComputedRef<QueryKey>;
+    publicWidgetLoadSumQueryKey: ComputedRef<QueryKey>;
+    publicWidgetAPI: {
+        create: (params: PublicWidgetCreateParameters) => Promise<PublicWidgetModel>;
+        update: (params: PublicWidgetUpdateParameters) => Promise<PublicWidgetModel>;
+        delete: (params: PublicWidgetDeleteParameters) => Promise<void>;
+        load: (params: PublicWidgetLoadParameters) => Promise<WidgetLoadResponse>;
+        loadSum: (params: PublicWidgetLoadSumParameters) => Promise<WidgetLoadResponse>;
+        get: (params: PublicWidgetGetParameters) => Promise<PublicWidgetModel>;
+        list: (params: PublicWidgetListParameters) => Promise<ListResponse<PublicWidgetModel>>;
+    }
+}
+
+export const usePublicWidgetApi = (): UsePublicWidgetApiReturn => {
+    const publicWidgetQueryKey = useAPIQueryKey('public-widget/get');
+    const publicWidgetListQueryKey = useAPIQueryKey('public-widget/list');
+    const publicWidgetLoadQueryKey = useAPIQueryKey('public-widget/load');
+    const publicWidgetLoadSumQueryKey = useAPIQueryKey('public-widget/load-sum');
+
+    const action = {
+        async create(params: PublicWidgetCreateParameters) {
+            return SpaceConnector.clientV2.dashboard.publicWidget.create<PublicWidgetCreateParameters, PublicWidgetModel>(params);
+        },
+        async update(params: PublicWidgetUpdateParameters) {
+            return SpaceConnector.clientV2.dashboard.publicWidget.update<PublicWidgetUpdateParameters, PublicWidgetModel>(params);
+        },
+        async delete(params: PublicWidgetDeleteParameters) {
+            return SpaceConnector.clientV2.dashboard.publicWidget.delete<PublicWidgetDeleteParameters>(params);
+        },
+        async load(params: PublicWidgetLoadParameters) {
+            return SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>(params);
+        },
+        async loadSum(params: PublicWidgetLoadSumParameters) {
+            return SpaceConnector.clientV2.dashboard.publicWidget.loadSum<PublicWidgetLoadSumParameters, WidgetLoadResponse>(params);
+        },
+        async get(params: PublicWidgetGetParameters) {
+            return SpaceConnector.clientV2.dashboard.publicWidget.get<PublicWidgetGetParameters, PublicWidgetModel>(params);
+        },
+        async list(params: PublicWidgetListParameters) {
+            return SpaceConnector.clientV2.dashboard.publicWidget.list<PublicWidgetListParameters, ListResponse<PublicWidgetModel>>(params);
+        },
+    };
+
+    return {
+        publicWidgetQueryKey,
+        publicWidgetListQueryKey,
+        publicWidgetLoadQueryKey,
+        publicWidgetLoadSumQueryKey,
+        publicWidgetAPI: action,
+    };
+};
diff --git a/apps/web/src/schema/dashboard/public-widget/api-verbs/create.ts b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/create.ts
similarity index 89%
rename from apps/web/src/schema/dashboard/public-widget/api-verbs/create.ts
rename to apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/create.ts
index 845aa99ac7..3b5d7f9502 100644
--- a/apps/web/src/schema/dashboard/public-widget/api-verbs/create.ts
+++ b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 import type { WidgetSize } from '@/common/modules/widgets/types/widget-display-type';
 import type { WidgetState, WidgetType } from '@/common/modules/widgets/types/widget-model';
diff --git a/apps/web/src/schema/dashboard/public-widget/api-verbs/delete.ts b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-widget/api-verbs/delete.ts
rename to apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/dashboard/public-widget/api-verbs/get.ts b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-widget/api-verbs/get.ts
rename to apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/dashboard/public-widget/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/dashboard/public-widget/api-verbs/list.ts
rename to apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/dashboard/public-widget/api-verbs/load-sum.ts b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/load-sum.ts
similarity index 65%
rename from apps/web/src/schema/dashboard/public-widget/api-verbs/load-sum.ts
rename to apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/load-sum.ts
index 229cc160b4..d3f18c4ed2 100644
--- a/apps/web/src/schema/dashboard/public-widget/api-verbs/load-sum.ts
+++ b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/load-sum.ts
@@ -1,4 +1,4 @@
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
 export interface PublicWidgetLoadSumParameters {
     widget_id: string;
diff --git a/apps/web/src/schema/dashboard/public-widget/api-verbs/load.ts b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/load.ts
similarity index 66%
rename from apps/web/src/schema/dashboard/public-widget/api-verbs/load.ts
rename to apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/load.ts
index a68d2d6048..92f91961bd 100644
--- a/apps/web/src/schema/dashboard/public-widget/api-verbs/load.ts
+++ b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/load.ts
@@ -1,7 +1,7 @@
 import type { Sort } from '@cloudforet/core-lib/space-connector/type';
 
-import type { Page } from '@/schema/_common/type';
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
+import type { Page } from '@/api-clients/_common/schema/type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
 export interface PublicWidgetLoadParameters {
     widget_id: string;
diff --git a/apps/web/src/schema/dashboard/public-widget/api-verbs/update.ts b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/update.ts
similarity index 86%
rename from apps/web/src/schema/dashboard/public-widget/api-verbs/update.ts
rename to apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/update.ts
index 012e6d8e1c..2e9800a142 100644
--- a/apps/web/src/schema/dashboard/public-widget/api-verbs/update.ts
+++ b/apps/web/src/api-clients/dashboard/public-widget/schema/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 import type { WidgetSize } from '@/common/modules/widgets/types/widget-display-type';
 import type { WidgetType, WidgetState } from '@/common/modules/widgets/types/widget-model';
diff --git a/apps/web/src/schema/dashboard/public-widget/model.ts b/apps/web/src/api-clients/dashboard/public-widget/schema/model.ts
similarity index 87%
rename from apps/web/src/schema/dashboard/public-widget/model.ts
rename to apps/web/src/api-clients/dashboard/public-widget/schema/model.ts
index 28481d29d8..a844fc6f8a 100644
--- a/apps/web/src/schema/dashboard/public-widget/model.ts
+++ b/apps/web/src/api-clients/dashboard/public-widget/schema/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 import type { WidgetFieldValue } from '@/common/modules/widgets/_widget-field-value-manager/type';
 import type { WidgetSize } from '@/common/modules/widgets/types/widget-display-type';
diff --git a/apps/web/src/schema/opsflow/_types/task-field-type.ts b/apps/web/src/api-clients/opsflow/_types/task-field-type.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/_types/task-field-type.ts
rename to apps/web/src/api-clients/opsflow/_types/task-field-type.ts
diff --git a/apps/web/src/api-clients/opsflow/comment/composables/use-comment-api.ts b/apps/web/src/api-clients/opsflow/comment/composables/use-comment-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/opsflow/comment/api-verbs/create.ts b/apps/web/src/api-clients/opsflow/comment/schema/api-verbs/create.ts
similarity index 63%
rename from apps/web/src/schema/opsflow/comment/api-verbs/create.ts
rename to apps/web/src/api-clients/opsflow/comment/schema/api-verbs/create.ts
index 3dfad8bce1..f4892d66f8 100644
--- a/apps/web/src/schema/opsflow/comment/api-verbs/create.ts
+++ b/apps/web/src/api-clients/opsflow/comment/schema/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { MentionTargets } from '@/schema/opsflow/comment/type';
+import type { MentionTargets } from '../type';
 
 export interface CommentCreateParameters {
     task_id: string;
diff --git a/apps/web/src/schema/opsflow/comment/api-verbs/delete.ts b/apps/web/src/api-clients/opsflow/comment/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/comment/api-verbs/delete.ts
rename to apps/web/src/api-clients/opsflow/comment/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/opsflow/comment/api-verbs/get.ts b/apps/web/src/api-clients/opsflow/comment/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/comment/api-verbs/get.ts
rename to apps/web/src/api-clients/opsflow/comment/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/opsflow/comment/api-verbs/list.ts b/apps/web/src/api-clients/opsflow/comment/schema/api-verbs/list.ts
similarity index 82%
rename from apps/web/src/schema/opsflow/comment/api-verbs/list.ts
rename to apps/web/src/api-clients/opsflow/comment/schema/api-verbs/list.ts
index 4d58e07bd0..88db0c4a8c 100644
--- a/apps/web/src/schema/opsflow/comment/api-verbs/list.ts
+++ b/apps/web/src/api-clients/opsflow/comment/schema/api-verbs/list.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { CommentType } from '@/schema/opsflow/comment/type';
+import type { CommentType } from '../type';
 
 export interface CommentListParameters {
     query?: Query;
diff --git a/apps/web/src/schema/opsflow/comment/api-verbs/update.ts b/apps/web/src/api-clients/opsflow/comment/schema/api-verbs/update.ts
similarity index 63%
rename from apps/web/src/schema/opsflow/comment/api-verbs/update.ts
rename to apps/web/src/api-clients/opsflow/comment/schema/api-verbs/update.ts
index bdb9a66df7..ed5aad93bf 100644
--- a/apps/web/src/schema/opsflow/comment/api-verbs/update.ts
+++ b/apps/web/src/api-clients/opsflow/comment/schema/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { MentionTargets } from '@/schema/opsflow/comment/type';
+import type { MentionTargets } from '../type';
 
 export interface CommentUpdateParameters {
     comment_id: string;
diff --git a/apps/web/src/schema/opsflow/comment/model.ts b/apps/web/src/api-clients/opsflow/comment/schema/model.ts
similarity index 84%
rename from apps/web/src/schema/opsflow/comment/model.ts
rename to apps/web/src/api-clients/opsflow/comment/schema/model.ts
index 0784502dba..a2ded68fa4 100644
--- a/apps/web/src/schema/opsflow/comment/model.ts
+++ b/apps/web/src/api-clients/opsflow/comment/schema/model.ts
@@ -1,5 +1,5 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
-import type { CommentType, MentionTargets, MentionSource } from '@/schema/opsflow/comment/type';
+import type { ResourceGroupType } from '../../../_common/schema/type';
+import type { CommentType, MentionTargets, MentionSource } from './type';
 
 export interface CommentModel {
     comment_id: string;
diff --git a/apps/web/src/schema/opsflow/comment/type.ts b/apps/web/src/api-clients/opsflow/comment/schema/type.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/comment/type.ts
rename to apps/web/src/api-clients/opsflow/comment/schema/type.ts
diff --git a/apps/web/src/api-clients/opsflow/event/composables/use-event-api.ts b/apps/web/src/api-clients/opsflow/event/composables/use-event-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/opsflow/event/api-verbs/list.ts b/apps/web/src/api-clients/opsflow/event/schema/api-verbs/list.ts
similarity index 83%
rename from apps/web/src/schema/opsflow/event/api-verbs/list.ts
rename to apps/web/src/api-clients/opsflow/event/schema/api-verbs/list.ts
index bceb8facb8..7b160e4d70 100644
--- a/apps/web/src/schema/opsflow/event/api-verbs/list.ts
+++ b/apps/web/src/api-clients/opsflow/event/schema/api-verbs/list.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { EventType } from '@/schema/opsflow/event/type';
+import type { EventType } from '../type';
 
 export interface EventListParameters {
     query?: Query;
diff --git a/apps/web/src/schema/opsflow/event/model.ts b/apps/web/src/api-clients/opsflow/event/schema/model.ts
similarity index 80%
rename from apps/web/src/schema/opsflow/event/model.ts
rename to apps/web/src/api-clients/opsflow/event/schema/model.ts
index 5cfd995baa..0a4d576695 100644
--- a/apps/web/src/schema/opsflow/event/model.ts
+++ b/apps/web/src/api-clients/opsflow/event/schema/model.ts
@@ -1,4 +1,4 @@
-import type { EventType, EventAdditionalInfo } from '@/schema/opsflow/event/type';
+import type { EventType, EventAdditionalInfo } from './type';
 
 export interface EventModel {
     event_id: string;
diff --git a/apps/web/src/schema/opsflow/event/type.ts b/apps/web/src/api-clients/opsflow/event/schema/type.ts
similarity index 89%
rename from apps/web/src/schema/opsflow/event/type.ts
rename to apps/web/src/api-clients/opsflow/event/schema/type.ts
index b3eca6260f..544e2b3e46 100644
--- a/apps/web/src/schema/opsflow/event/type.ts
+++ b/apps/web/src/api-clients/opsflow/event/schema/type.ts
@@ -1,4 +1,4 @@
-import type { TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusType } from '../../task/schema/type';
 
 export type EventType = 'CREATED'|'UPDATED'|'CHANGE_STATUS'|'COMMENTED';
 export interface UpdatedDatum {
diff --git a/apps/web/src/api-clients/opsflow/task-category/composables/use-task-category-api.ts b/apps/web/src/api-clients/opsflow/task-category/composables/use-task-category-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/create.ts b/apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/create.ts
similarity index 65%
rename from apps/web/src/schema/opsflow/task-category/api-verbs/create.ts
rename to apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/create.ts
index 9c0ae46e28..362a0821d1 100644
--- a/apps/web/src/schema/opsflow/task-category/api-verbs/create.ts
+++ b/apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/create.ts
@@ -1,6 +1,6 @@
-import type { Tags } from '@/schema/_common/model';
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
-import type { TaskStatusType, TaskStatusOptionWithOptionalId } from '@/schema/opsflow/task/type';
+import type { Tags } from '../../../../_common/schema/model';
+import type { TaskField } from '../../../_types/task-field-type';
+import type { TaskStatusType, TaskStatusOptionWithOptionalId } from '../../../task/schema/type';
 
 
 export interface TaskCategoryCreateParameters {
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/delete.ts b/apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task-category/api-verbs/delete.ts
rename to apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/get.ts b/apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task-category/api-verbs/get.ts
rename to apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/list.ts b/apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task-category/api-verbs/list.ts
rename to apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/opsflow/task-category/api-verbs/update.ts b/apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/update.ts
similarity index 63%
rename from apps/web/src/schema/opsflow/task-category/api-verbs/update.ts
rename to apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/update.ts
index d5c28948af..aa17aec879 100644
--- a/apps/web/src/schema/opsflow/task-category/api-verbs/update.ts
+++ b/apps/web/src/api-clients/opsflow/task-category/schema/api-verbs/update.ts
@@ -1,6 +1,7 @@
-import type { Tags } from '@/schema/_common/model';
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
-import type { TaskStatusOptions, TaskStatusOptionWithOptionalId, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
+import type { TaskStatusOptions, TaskStatusOptionWithOptionalId, TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
+
 
 export interface TaskCategoryUpdateParameters {
     category_id: string;
diff --git a/apps/web/src/schema/opsflow/task-category/model.ts b/apps/web/src/api-clients/opsflow/task-category/schema/model.ts
similarity index 63%
rename from apps/web/src/schema/opsflow/task-category/model.ts
rename to apps/web/src/api-clients/opsflow/task-category/schema/model.ts
index 08fb0ed7ce..b8265c88c9 100644
--- a/apps/web/src/schema/opsflow/task-category/model.ts
+++ b/apps/web/src/api-clients/opsflow/task-category/schema/model.ts
@@ -1,6 +1,6 @@
-import type { Tags } from '@/schema/_common/model';
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
-import type { TaskStatusOptions } from '@/schema/opsflow/task/type';
+import type { Tags } from '../../../_common/schema/model';
+import type { TaskField } from '../../_types/task-field-type';
+import type { TaskStatusOptions } from '../../task/schema/type';
 
 export interface TaskCategoryModel {
     category_id: string;
diff --git a/apps/web/src/api-clients/opsflow/task-type/composables/use-task-type-api.ts b/apps/web/src/api-clients/opsflow/task-type/composables/use-task-type-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts b/apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/create.ts
similarity index 60%
rename from apps/web/src/schema/opsflow/task-type/api-verbs/create.ts
rename to apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/create.ts
index f8f400e4a2..2d67d3d7c6 100644
--- a/apps/web/src/schema/opsflow/task-type/api-verbs/create.ts
+++ b/apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/create.ts
@@ -1,5 +1,6 @@
-import type { Tags } from '@/schema/_common/model';
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
+
 
 export interface TaskTypeCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/delete.ts b/apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task-type/api-verbs/delete.ts
rename to apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/get.ts b/apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task-type/api-verbs/get.ts
rename to apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/list.ts b/apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/list.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task-type/api-verbs/list.ts
rename to apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/list.ts
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/update-fields.ts b/apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/update-fields.ts
similarity index 61%
rename from apps/web/src/schema/opsflow/task-type/api-verbs/update-fields.ts
rename to apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/update-fields.ts
index 4cb2c5db87..b1a17a0418 100644
--- a/apps/web/src/schema/opsflow/task-type/api-verbs/update-fields.ts
+++ b/apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/update-fields.ts
@@ -1,4 +1,4 @@
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 export interface TaskTypeUpdateFieldsParameters {
     task_type_id: string;
diff --git a/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts b/apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/update.ts
similarity index 74%
rename from apps/web/src/schema/opsflow/task-type/api-verbs/update.ts
rename to apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/update.ts
index d66eb5f469..332833977b 100644
--- a/apps/web/src/schema/opsflow/task-type/api-verbs/update.ts
+++ b/apps/web/src/api-clients/opsflow/task-type/schema/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface TaskTypeUpdateParameters {
     task_type_id: string;
diff --git a/apps/web/src/schema/opsflow/task-type/model.ts b/apps/web/src/api-clients/opsflow/task-type/schema/model.ts
similarity index 67%
rename from apps/web/src/schema/opsflow/task-type/model.ts
rename to apps/web/src/api-clients/opsflow/task-type/schema/model.ts
index 23113a3c40..f8608280b9 100644
--- a/apps/web/src/schema/opsflow/task-type/model.ts
+++ b/apps/web/src/api-clients/opsflow/task-type/schema/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
 
 export interface TaskTypeModel {
     task_type_id: string;
diff --git a/apps/web/src/api-clients/opsflow/task/composables/use-task-api.ts b/apps/web/src/api-clients/opsflow/task/composables/use-task-api.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/change-assignee.ts b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/change-assignee.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task/api-verbs/change-assignee.ts
rename to apps/web/src/api-clients/opsflow/task/schema/api-verbs/change-assignee.ts
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/change-status.ts b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/change-status.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task/api-verbs/change-status.ts
rename to apps/web/src/api-clients/opsflow/task/schema/api-verbs/change-status.ts
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/create.ts b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/create.ts
similarity index 69%
rename from apps/web/src/schema/opsflow/task/api-verbs/create.ts
rename to apps/web/src/api-clients/opsflow/task/schema/api-verbs/create.ts
index 95babaecfe..59c63d775f 100644
--- a/apps/web/src/schema/opsflow/task/api-verbs/create.ts
+++ b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/create.ts
@@ -1,5 +1,5 @@
-import type { MentionTargets } from '@/schema/opsflow/comment/type';
-import type { TaskPriority } from '@/schema/opsflow/task/type';
+import type { MentionTargets } from '../../../comment/schema/type';
+import type { TaskPriority } from '../type';
 
 export interface TaskCreateParameters {
     task_type_id: string;
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/delete.ts b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/delete.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task/api-verbs/delete.ts
rename to apps/web/src/api-clients/opsflow/task/schema/api-verbs/delete.ts
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/get.ts b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/get.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task/api-verbs/get.ts
rename to apps/web/src/api-clients/opsflow/task/schema/api-verbs/get.ts
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/list.ts b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/list.ts
similarity index 82%
rename from apps/web/src/schema/opsflow/task/api-verbs/list.ts
rename to apps/web/src/api-clients/opsflow/task/schema/api-verbs/list.ts
index 54fb135cdb..fe2428ccac 100644
--- a/apps/web/src/schema/opsflow/task/api-verbs/list.ts
+++ b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/list.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { TaskPriority, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskPriority, TaskStatusType } from '../type';
 
 export interface TaskListParameters {
     query?: Query;
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/update-description.ts b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/update-description.ts
similarity index 52%
rename from apps/web/src/schema/opsflow/task/api-verbs/update-description.ts
rename to apps/web/src/api-clients/opsflow/task/schema/api-verbs/update-description.ts
index efa47e204c..3522bf9df9 100644
--- a/apps/web/src/schema/opsflow/task/api-verbs/update-description.ts
+++ b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/update-description.ts
@@ -1,5 +1,5 @@
-import type { FileModel } from '@/schema/file-manager/model';
-import type { MentionTargets } from '@/schema/opsflow/comment/type';
+import type { FileModel } from '../../../../../schema/file-manager/model';
+import type { MentionTargets } from '../../../comment/schema/type';
 
 export interface TaskUpdateDescriptionParameters {
     task_id: string;
diff --git a/apps/web/src/schema/opsflow/task/api-verbs/update.ts b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/update.ts
similarity index 72%
rename from apps/web/src/schema/opsflow/task/api-verbs/update.ts
rename to apps/web/src/api-clients/opsflow/task/schema/api-verbs/update.ts
index 87a62572e0..5aa2fbe6d5 100644
--- a/apps/web/src/schema/opsflow/task/api-verbs/update.ts
+++ b/apps/web/src/api-clients/opsflow/task/schema/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { TaskPriority } from '@/schema/opsflow/task/type';
+import type { TaskPriority } from '../type';
 
 export interface TaskUpdateParameters {
     task_id: string;
diff --git a/apps/web/src/schema/opsflow/task/constant.ts b/apps/web/src/api-clients/opsflow/task/schema/constant.ts
similarity index 100%
rename from apps/web/src/schema/opsflow/task/constant.ts
rename to apps/web/src/api-clients/opsflow/task/schema/constant.ts
diff --git a/apps/web/src/schema/opsflow/task/model.ts b/apps/web/src/api-clients/opsflow/task/schema/model.ts
similarity index 79%
rename from apps/web/src/schema/opsflow/task/model.ts
rename to apps/web/src/api-clients/opsflow/task/schema/model.ts
index 9d7ed0c9b8..0d0e71b3d5 100644
--- a/apps/web/src/schema/opsflow/task/model.ts
+++ b/apps/web/src/api-clients/opsflow/task/schema/model.ts
@@ -1,5 +1,5 @@
-import type { FileModel } from '@/schema/file-manager/model';
-import type { TaskPriority, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { FileModel } from '../../../../schema/file-manager/model';
+import type { TaskPriority, TaskStatusType } from './type';
 
 export interface TaskModel {
     task_id: string;
diff --git a/apps/web/src/schema/opsflow/task/type.ts b/apps/web/src/api-clients/opsflow/task/schema/type.ts
similarity index 86%
rename from apps/web/src/schema/opsflow/task/type.ts
rename to apps/web/src/api-clients/opsflow/task/schema/type.ts
index 9fdbe2cb88..5df357f08a 100644
--- a/apps/web/src/schema/opsflow/task/type.ts
+++ b/apps/web/src/api-clients/opsflow/task/schema/type.ts
@@ -1,4 +1,4 @@
-import type { TASK_STATUS_COLOR_NAMES } from '@/schema/opsflow/task/constant';
+import type { TASK_STATUS_COLOR_NAMES } from './constant';
 
 export type TaskStatusType = 'TODO'|'IN_PROGRESS'|'COMPLETED';
 export type TaskStatusColorName = typeof TASK_STATUS_COLOR_NAMES[number];
diff --git a/apps/web/src/common/components/inputs/TagsInput.vue b/apps/web/src/common/components/inputs/TagsInput.vue
index 0cab82940e..976fe9552d 100644
--- a/apps/web/src/common/components/inputs/TagsInput.vue
+++ b/apps/web/src/common/components/inputs/TagsInput.vue
@@ -6,7 +6,7 @@ import type { TranslateResult } from 'vue-i18n';
 import { PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 import type { InputItem } from '@cloudforet/mirinae/types/controls/input/text-input/type';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import { i18n } from '@/translations';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
diff --git a/apps/web/src/common/composables/date-range-formatter/__tests__/index.test.ts b/apps/web/src/common/composables/date-range-formatter/__tests__/index.test.ts
index 175db30ab3..49964337b3 100644
--- a/apps/web/src/common/composables/date-range-formatter/__tests__/index.test.ts
+++ b/apps/web/src/common/composables/date-range-formatter/__tests__/index.test.ts
@@ -10,7 +10,7 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { describe, expect, it } from 'vitest';
 
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { useDateRangeFormatter } from '@/common/composables/date-range-formatter';
 
diff --git a/apps/web/src/common/composables/editor-content-transformer/index.ts b/apps/web/src/common/composables/editor-content-transformer/index.ts
index b6c0d7b69d..6c8a24e8e9 100644
--- a/apps/web/src/common/composables/editor-content-transformer/index.ts
+++ b/apps/web/src/common/composables/editor-content-transformer/index.ts
@@ -8,7 +8,7 @@ import { isEqual } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ContentsType } from '@/schema/_common/type';
+import type { ContentsType } from '@/api-clients/_common/schema/type';
 
 import { getFileDownloadUrl } from '@/lib/file-manager';
 import type { FileManagerResourceGroupType } from '@/lib/file-manager/type';
diff --git a/apps/web/src/common/modules/custom-table/custom-field-modal/CustomFieldModal.vue b/apps/web/src/common/modules/custom-table/custom-field-modal/CustomFieldModal.vue
index c24880a5fa..d67cd690b2 100644
--- a/apps/web/src/common/modules/custom-table/custom-field-modal/CustomFieldModal.vue
+++ b/apps/web/src/common/modules/custom-table/custom-field-modal/CustomFieldModal.vue
@@ -10,7 +10,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserConfigGetParameters } from '@/schema/config/user-config/api-verbs/get';
 import type { UserConfigUpdateParameters } from '@/schema/config/user-config/api-verbs/update';
 import type { UserConfigModel } from '@/schema/config/user-config/model';
diff --git a/apps/web/src/common/modules/favorites/favorite-button/FavoriteButton.vue b/apps/web/src/common/modules/favorites/favorite-button/FavoriteButton.vue
index 5f6c559ca8..2e2af5f2c0 100644
--- a/apps/web/src/common/modules/favorites/favorite-button/FavoriteButton.vue
+++ b/apps/web/src/common/modules/favorites/favorite-button/FavoriteButton.vue
@@ -6,13 +6,12 @@ import { useRoute } from 'vue-router/composables';
 
 import { PI } from '@cloudforet/mirinae';
 
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 import type { MetricExampleModel } from '@/schema/inventory/metric-example/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useDisplayStore } from '@/store/display/display-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CloudServiceTypeReferenceMap } from '@/store/reference/cloud-service-type-reference-store';
@@ -41,6 +40,8 @@ import type { FavoriteType, FavoriteConfig } from '@/common/modules/favorites/fa
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+
 interface Props {
     itemId: string;
     favoriteType: FavoriteType;
@@ -63,12 +64,16 @@ const workspaceStoreGetters = userWorkspaceStore.getters;
 const appContextStore = useAppContextStore();
 const favoriteStore = useFavoriteStore();
 const favoriteStoreGetters = favoriteStore.getters;
-const dashboardStore = useDashboardStore();
-const dashboardState = dashboardStore.state;
 const gnbStore = useGnbStore();
 const gnbStoreGetters = gnbStore.getters;
 const displayStore = useDisplayStore();
 
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+} = useDashboardQuery();
+
 const emit = defineEmits<{(e: 'click-favorite'): void;
 }>();
 
@@ -120,7 +125,7 @@ const handleClickFavoriteButton = async (event: MouseEvent) => {
 const convertFavoriteToReferenceData = (favoriteConfig: FavoriteConfig): ReferenceData|undefined => {
     const { itemType } = favoriteConfig;
     if (itemType === FAVORITE_TYPE.DASHBOARD) {
-        return convertDashboardConfigToReferenceData([favoriteConfig], [...dashboardState.publicDashboardItems, ...dashboardState.privateDashboardItems])[0];
+        return convertDashboardConfigToReferenceData([favoriteConfig], [...publicDashboardList.value, ...privateDashboardList.value])[0];
     }
     if (itemType === FAVORITE_TYPE.PROJECT) {
         return convertProjectConfigToReferenceData([favoriteConfig], storeState.projects)[0];
diff --git a/apps/web/src/common/modules/favorites/favorite-button/store/favorite-store.ts b/apps/web/src/common/modules/favorites/favorite-button/store/favorite-store.ts
index 66211bcb7f..55696266a4 100644
--- a/apps/web/src/common/modules/favorites/favorite-button/store/favorite-store.ts
+++ b/apps/web/src/common/modules/favorites/favorite-button/store/favorite-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserConfigDeleteParameters } from '@/schema/config/user-config/api-verbs/delete';
 import type { UserConfigListParameters } from '@/schema/config/user-config/api-verbs/list';
 import type { UserConfigSetParameters } from '@/schema/config/user-config/api-verbs/set';
diff --git a/apps/web/src/common/modules/navigations/stores/gnb-store.ts b/apps/web/src/common/modules/navigations/stores/gnb-store.ts
index eaa10bf9c2..02151ac7f9 100644
--- a/apps/web/src/common/modules/navigations/stores/gnb-store.ts
+++ b/apps/web/src/common/modules/navigations/stores/gnb-store.ts
@@ -4,11 +4,11 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostQuerySetListParameters } from '@/api-clients/cost-analysis/cost-query-set/schema/api-verbs/list';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 import type { UserConfigListParameters } from '@/schema/config/user-config/api-verbs/list';
 import type { UserConfigModel } from '@/schema/config/user-config/model';
-import type { CostQuerySetListParameters } from '@/schema/cost-analysis/cost-query-set/api-verbs/list';
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
 import type { MetricExampleListParameters } from '@/schema/inventory/metric-example/api-verbs/list';
 import type { MetricExampleModel } from '@/schema/inventory/metric-example/model';
 
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/helper.ts b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/helper.ts
index bf041e7871..6458d04819 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/helper.ts
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/helper.ts
@@ -7,7 +7,7 @@ import type { SearchTab } from '@/common/modules/navigations/top-bar/modules/top
 
 import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 const queryHelper = new QueryHelper();
 
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue
index fbbf3a8303..352c743b0f 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue
@@ -12,12 +12,11 @@ import {
 } from '@cloudforet/mirinae';
 import type { ContextMenuType, MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 import type { MetricExampleModel } from '@/schema/inventory/metric-example/model';
 import { i18n } from '@/translations';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useDisplayStore } from '@/store/display/display-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
@@ -52,8 +51,9 @@ import TopBarSuggestionList from '@/common/modules/navigations/top-bar/modules/T
 
 import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 const FAVORITE_LIMIT = 5;
 
@@ -72,8 +72,6 @@ const emit = defineEmits<{(e: 'close'): void;
 }>();
 
 const allReferenceStore = useAllReferenceStore();
-const dashboardStore = useDashboardStore();
-const dashboardState = dashboardStore.state;
 const userWorkspaceStore = useUserWorkspaceStore();
 const favoriteStore = useFavoriteStore();
 const favoriteGetters = favoriteStore.getters;
@@ -82,6 +80,12 @@ const gnbStoreGetters = gnbStore.getters;
 const userStore = useUserStore();
 const displayStore = useDisplayStore();
 
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+} = useDashboardQuery();
+
 const router = useRouter();
 const route = useRoute();
 
@@ -199,7 +203,7 @@ const state = reactive({
         if (!isUserAccessibleToDashboards) return [];
         return convertDashboardConfigToReferenceData(
             favoriteGetters.dashboardItems ?? [],
-            [...dashboardState.publicDashboardItems, ...dashboardState.privateDashboardItems],
+            [...publicDashboardList.value, ...privateDashboardList.value],
         );
     }),
     favoriteMetricItems: computed<ReferenceData[]>(() => {
@@ -316,7 +320,6 @@ const init = async () => {
         favoriteStore.fetchFavorite(),
         gnbStore.fetchMetricExample(),
         gnbStore.fetchCostQuerySet(),
-        dashboardStore.load(),
         // HACK: If GNBDashboardMenu is deprecated, you need to add a request to receive a dashboard list here.
     ]);
     state.loading = false;
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notice/modules/TopBarNoticeContextMenu.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notice/modules/TopBarNoticeContextMenu.vue
index 31260e5482..49fe0e1185 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notice/modules/TopBarNoticeContextMenu.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notice/modules/TopBarNoticeContextMenu.vue
@@ -10,8 +10,8 @@ import {
     PDataLoader, PI, PDivider, PEmpty,
 } from '@cloudforet/mirinae';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { PostListParameters } from '@/schema/board/post/api-verbs/list';
 import { POST_BOARD_TYPE } from '@/schema/board/post/constant';
 import type { PostModel } from '@/schema/board/post/model';
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notifications/modules/TopBarNotificationsContextMenu.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notifications/modules/TopBarNotificationsContextMenu.vue
index 64f861d0dd..5866be524e 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notifications/modules/TopBarNotificationsContextMenu.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notifications/modules/TopBarNotificationsContextMenu.vue
@@ -18,7 +18,7 @@ import {
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { NotificationDeleteParameters } from '@/schema/notification/notification/api-verbs/delete';
 import type { NotificationListParameters } from '@/schema/notification/notification/api-verbs/list';
 import type { NotificationSetReadParameters } from '@/schema/notification/notification/api-verbs/set-read';
diff --git a/apps/web/src/common/modules/page-layouts/type.ts b/apps/web/src/common/modules/page-layouts/type.ts
index 6cbd53defd..5268190d82 100644
--- a/apps/web/src/common/modules/page-layouts/type.ts
+++ b/apps/web/src/common/modules/page-layouts/type.ts
@@ -1,7 +1,7 @@
 import type { TranslateResult } from 'vue-i18n';
 import type { Location } from 'vue-router';
 
-import type { ProjectGroupTreeNodeData } from '@/services/project/types/project-tree-type';
+import type { ProjectGroupTreeNodeData } from '@/services/project-v1/types/project-tree-type';
 
 export interface Breadcrumb {
     name: TranslateResult|string;
diff --git a/apps/web/src/common/modules/popup/notice/NoticePopup.vue b/apps/web/src/common/modules/popup/notice/NoticePopup.vue
index b1d7a25b0f..8398f79472 100644
--- a/apps/web/src/common/modules/popup/notice/NoticePopup.vue
+++ b/apps/web/src/common/modules/popup/notice/NoticePopup.vue
@@ -6,7 +6,7 @@ import {
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { PostListParameters } from '@/schema/board/post/api-verbs/list';
 import { POST_BOARD_TYPE } from '@/schema/board/post/constant';
 import type { PostModel } from '@/schema/board/post/model';
diff --git a/apps/web/src/common/modules/project/ProjectLinkButton.vue b/apps/web/src/common/modules/project/ProjectLinkButton.vue
index e98d1d0944..f2562690b9 100644
--- a/apps/web/src/common/modules/project/ProjectLinkButton.vue
+++ b/apps/web/src/common/modules/project/ProjectLinkButton.vue
@@ -10,7 +10,7 @@ import { useProjectReferenceStore } from '@/store/reference/project-reference-st
 
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 const props = defineProps<{
     projectId: string;
diff --git a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
index 13e614fd30..098d1ff9c1 100644
--- a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
+++ b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
@@ -20,13 +20,13 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { indigo, peacock } from '@/styles/colors';
 
-import type { ProjectTreeOptions } from '@/services/project/composables/use-project-tree';
-import { useProjectTree } from '@/services/project/composables/use-project-tree';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import type { ProjectTreeOptions } from '@/services/project-v1/composables/use-project-tree';
+import { useProjectTree } from '@/services/project-v1/composables/use-project-tree';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import type {
     ProjectTreeItem, ProjectTreeNodeData, ProjectTreeRoot, ProjectTreeItemType,
     ProjectTreeNode,
-} from '@/services/project/types/project-tree-type';
+} from '@/services/project-v1/types/project-tree-type';
 
 interface ProjectGroupSelectOptions {
     id: string;
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
index 45089fe064..3285e8db45 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
@@ -4,18 +4,16 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { useMutation } from '@tanstack/vue-query';
+
 import {
     PButton, PPopover, PSelectCard, PI, PDivider,
 } from '@cloudforet/mirinae';
 import { POPOVER_TRIGGER } from '@cloudforet/mirinae/src/data-display/popover/type';
 
 
-import type { PrivateWidgetCreateParameters } from '@/schema/dashboard/private-widget/api-verbs/create';
-import type { PrivateWidgetModel } from '@/schema/dashboard/private-widget/model';
-import type { DataTableAddParameters } from '@/schema/dashboard/public-data-table/api-verbs/add';
-import type { PublicWidgetCreateParameters } from '@/schema/dashboard/public-widget/api-verbs/create';
-import type { PublicWidgetModel } from '@/schema/dashboard/public-widget/model';
+import type { WidgetCreateParams, WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
+import type { DataTableAddParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/add';
 import { i18n } from '@/translations';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
@@ -24,21 +22,28 @@ import type { MetricReferenceMap } from '@/store/reference/metric-reference-stor
 import type { NamespaceReferenceMap } from '@/store/reference/namespace-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
+import getRandomId from '@/lib/random-id-generator';
+import type { ListResponse } from '@/lib/variable-models/_base/types';
+
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFormAssetSecurityDataSourcePopper
     from '@/common/modules/widgets/_components/WidgetFormAssetSecurityDataSourcePopper.vue';
 import WidgetFormCostDataSourcePopper from '@/common/modules/widgets/_components/WidgetFormCostDataSourcePopper.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import {
     DATA_SOURCE_DOMAIN,
     DATA_TABLE_OPERATOR,
-    DATA_TABLE_TYPE,
+    DATA_TABLE_TYPE, TRANSFORM_DATA_TABLE_DEFAULT_OPTIONS,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import { getDuplicatedDataTableName } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
-    DataTableDataType, DataTableSourceType, DataTableOperator, DataTableAddOptions,
+    DataTableDataType, DataTableSourceType, DataTableOperator, DataTableAddOptions, DataTableTransformOptions,
 } from '@/common/modules/widgets/types/widget-model';
 
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
@@ -49,15 +54,30 @@ const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
 const userStore = useUserStore();
 
+/* Query */
+const {
+    dataTableList,
+    api,
+    keys: widgetQueryKeys,
+    queryClient,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+const {
+    dashboard,
+    keys,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
+
+
 const storeState = reactive({
     metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
     costDataSources: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
     namespaces: computed<NamespaceReferenceMap>(() => allReferenceStore.getters.namespace),
-    dataTables: computed(() => widgetGenerateStore.state.dataTables),
 });
 
 const state = reactive({
-    loading: false,
     showPopover: false,
     selectedPopperCondition: undefined as undefined|DataTableDataType,
     dataSourceDomainItems: computed(() => ([
@@ -108,7 +128,7 @@ const state = reactive({
         if (state.selectedCostDataType === 'usage_quantity') {
             return 'Usage';
         }
-        return targetCostDataSource.data?.cost_data_keys?.find((key) => key === state.selectedCostDataType.replace('data.', '')) || '';
+        return targetCostDataSource?.data?.cost_data_keys?.find((key) => key === state.selectedCostDataType.replace('data.', '')) || '';
     }),
     operatorInfoList: computed<{ key: DataTableOperator, name: string; description: string|TranslateResult; icon: string;}[]>(() => [
         {
@@ -163,22 +183,52 @@ const state = reactive({
 });
 
 /* Api */
-const createWidget = async (): Promise<PublicWidgetModel|PrivateWidgetModel|null> => {
-    const isPrivate = dashboardDetailState.dashboardId?.startsWith('private');
-    const fetcher = isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateWidget.create<PrivateWidgetCreateParameters, PrivateWidgetModel>
-        : SpaceConnector.clientV2.dashboard.publicWidget.create<PublicWidgetCreateParameters, PublicWidgetModel>;
-    try {
-        return await fetcher({
-            dashboard_id: dashboardDetailState.dashboardId as string,
-            tags: { created_by: userStore.state.userId },
-            widget_type: 'table',
-        });
-    } catch (e) {
+const widgetCreateFn = (params: WidgetCreateParams): Promise<WidgetModel> => {
+    if (dashboardDetailState.dashboardId?.startsWith('private')) {
+        return api.privateWidgetAPI.create(params);
+    }
+    return api.publicWidgetAPI.create(params);
+};
+const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutation({
+    mutationFn: widgetCreateFn,
+    onSuccess: (data) => {
+        const _isPrivate = dashboardDetailState.dashboardId?.startsWith('private');
+        const widgetListQueryKey = _isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+        queryClient.setQueryData(widgetListQueryKey.value, (oldData: ListResponse<WidgetModel>) => (oldData.results?.length ? {
+            ...oldData, results: [...oldData.results, data],
+        } : {
+            ...oldData, results: [data],
+        }));
+        widgetGenerateStore.setWidgetFormInfo(data);
+    },
+    onError: (e) => {
         ErrorHandler.handleError(e);
-        return null;
+    },
+});
+const dataTableAddFn = (params: DataTableAddParameters): Promise<DataTableModel> => {
+    if (dashboardDetailState.dashboardId?.startsWith('private')) {
+        return api.privateDataTableAPI.add(params);
     }
+    return api.publicDataTableAPI.add(params);
 };
+const { mutateAsync: addDataTable, isPending: dataTableAddLoading } = useMutation({
+    mutationFn: dataTableAddFn,
+    onSuccess: (data) => {
+        const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
+        const dataTableListQueryKey = _isPrivate ? widgetQueryKeys.privateDataTableListQueryKey : widgetQueryKeys.publicDataTableListQueryKey;
+        queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<DataTableModel>) => (oldData.results?.length ? {
+            ...oldData, results: [...oldData.results, data],
+        } : {
+            ...oldData, results: [data],
+        }));
+
+        widgetGenerateStore.setSelectedDataTableId(data?.data_table_id);
+    },
+    onError: (e) => {
+        showErrorMessage(e.message, e);
+        ErrorHandler.handleError(e);
+    },
+});
 
 /* Util */
 const resetSelectedDataSource = () => {
@@ -196,22 +246,41 @@ const handleClickDataSourceDomain = (domainName: DataTableSourceType) => {
     state.selectedDataSourceDomain = domainName;
     resetSelectedDataSource();
 };
-const handleClickOperator = (operator: DataTableOperator) => {
-    widgetGenerateStore.createUnsavedTransformDataTable(operator);
+const handleCreateUnsavedTransform = (operator: DataTableOperator) => {
+    const unsavedTransformData = {
+        data_table_id: `UNSAVED-${getRandomId()}`,
+        name: getDuplicatedDataTableName(`${operator} Data`, dataTableList.value),
+        data_type: DATA_TABLE_TYPE.TRANSFORMED,
+        operator,
+        options: {
+            [operator]: TRANSFORM_DATA_TABLE_DEFAULT_OPTIONS[operator],
+        } as DataTableTransformOptions,
+        state: 'AVAILABLE',
+    } as Partial<DataTableModel>;
+
+    const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
+    const dataTableListQueryKey = _isPrivate ? widgetQueryKeys.privateDataTableListQueryKey : widgetQueryKeys.publicDataTableListQueryKey;
+    queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<DataTableModel>) => (oldData.results?.length ? {
+        ...oldData, results: [...oldData.results, unsavedTransformData],
+    } : {
+        ...oldData, results: [unsavedTransformData],
+    }));
+
     state.showPopover = false;
 };
+
 const handleSelectPopperCondition = (condition: DataTableDataType) => {
+    if (condition === DATA_TABLE_TYPE.TRANSFORMED && !dataTableList.value?.length) return;
     state.selectedPopperCondition = condition;
 };
 const handleConfirmDataSource = async () => {
-    state.loading = true;
     // create widget
     if (widgetGenerateState.overlayType === 'ADD' && !widgetGenerateState.widgetId) {
-        const createdWidget = await createWidget();
-        if (createdWidget) {
-            widgetGenerateStore.setWidgetForm(createdWidget);
-        }
-        state.showPopover = false;
+        await createWidget({
+            dashboard_id: dashboardDetailState.dashboardId as string,
+            tags: { created_by: userStore.state.userId },
+            widget_type: 'table',
+        });
     }
 
     if (state.selectedPopperCondition === DATA_TABLE_TYPE.ADDED) {
@@ -219,8 +288,9 @@ const handleConfirmDataSource = async () => {
             ? `${storeState.costDataSources[state.selectedCostDataSourceId].name} - ${state.selectedCostDataTypeLabel}`
             : `${state.selectedNamespace.name} - ${storeState.metrics[state.selectedMetricId]?.label}`;
         const addParameters = {
+            widget_id: widgetGenerateState.widgetId as string,
             source_type: state.selectedDataSourceDomain,
-            name: getDuplicatedDataTableName(dataTableBaseName, widgetGenerateState.dataTables),
+            name: getDuplicatedDataTableName(dataTableBaseName, dataTableList.value),
         } as DataTableAddParameters;
         const dataKey = state.selectedCostDataType?.replace('data.', '');
         const costUnit: string|undefined = storeState.costDataSources[state.selectedCostDataSourceId]?.data?.plugin_info?.metadata?.cost_info?.unit;
@@ -249,23 +319,22 @@ const handleConfirmDataSource = async () => {
         };
 
         // NOTE: For DataTable-Create loading
-        state.showPopover = false;
         widgetGenerateStore.setDataTableCreateLoading(true);
+        state.showPopover = false;
 
-        const result = await widgetGenerateStore.createAddDataTable({
+        await addDataTable({
             ...addParameters,
+            vars: dashboard.value?.vars || {},
             options: {
                 ...state.selectedDataSourceDomain === DATA_SOURCE_DOMAIN.COST ? costOptions : assetOptions,
             },
         });
-        if (!widgetGenerateState.selectedDataTableId && result) {
-            widgetGenerateStore.setSelectedDataTableId(result?.data_table_id);
-        }
     }
-    state.loading = false;
     widgetGenerateStore.setDataTableCreateLoading(false);
 };
 
+
+
 watch(() => state.showPopover, (val) => {
     if (!val) {
         state.selectedDataSourceDomain = undefined;
@@ -299,10 +368,13 @@ watch(() => state.showPopover, (val) => {
                 <p-select-card :label="i18n.t('COMMON.WIDGETS.DATA_TABLE.ADD')"
                                icon="ic_service_data-sources"
                                block
+                               :show-select-marker="false"
                                @click="handleSelectPopperCondition(DATA_TABLE_TYPE.ADDED)"
                 />
                 <p-select-card :label="i18n.t('COMMON.WIDGETS.DATA_TABLE.TRANSFORM')"
                                icon="ic_transform-data"
+                               :disabled="!dataTableList?.length"
+                               :show-select-marker="false"
                                block
                                @click="handleSelectPopperCondition(DATA_TABLE_TYPE.TRANSFORMED)"
                 />
@@ -384,7 +456,7 @@ watch(() => state.showPopover, (val) => {
                 <div class="popover-footer">
                     <p-button style-type="substitutive"
                               :disabled="state.disableConfirmButton"
-                              :loading="state.loading"
+                              :loading="widgetCreateLoading || dataTableAddLoading"
                               @click="handleConfirmDataSource"
                     >
                         {{ i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_1.DONE') }}
@@ -410,7 +482,7 @@ watch(() => state.showPopover, (val) => {
                                            value="operatorKey"
                                            label="a"
                                            block
-                                           @click="handleClickOperator(operatorInfo.key)"
+                                           @click="handleCreateUnsavedTransform(operatorInfo.key)"
                             >
                                 <div class="operator-card-contents">
                                     <p-i :name="operatorInfo.icon"
@@ -438,7 +510,7 @@ watch(() => state.showPopover, (val) => {
                                            value="operatorKey"
                                            label="a"
                                            block
-                                           @click="handleClickOperator(operatorInfo.key)"
+                                           @click="handleCreateUnsavedTransform(operatorInfo.key)"
                             >
                                 <div class="operator-card-contents">
                                     <p-i :name="operatorInfo.icon"
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCard.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCard.vue
index c30cae31ea..d520d73ace 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCard.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCard.vue
@@ -3,8 +3,8 @@ import {
     computed, reactive, ref,
 } from 'vue';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 
 import WidgetFormDataTableCardAddContents
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue';
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
index ac93d403a0..cca5982b1d 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
@@ -3,14 +3,18 @@ import {
     computed, defineExpose, onMounted, reactive, watch,
 } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
 import { isArray, isEqual, uniq } from 'lodash';
 
 import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/type';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { DataTableUpdateParameters } from '@/schema/dashboard/public-data-table/api-verbs/update';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { DataTableDeleteParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/delete';
+import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 import { i18n } from '@/translations';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
@@ -20,6 +24,7 @@ import type { MetricReferenceMap } from '@/store/reference/metric-reference-stor
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import getRandomId from '@/lib/random-id-generator';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFormDataTableCardAddForm from '@/common/modules/widgets/_components/WidgetFormDataTableCardAddForm.vue';
 import WidgetFormDataTableCardAlertModal
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardAlertModal.vue';
@@ -28,11 +33,16 @@ import WidgetFormDataTableCardHeaderTitle
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue';
 import WidgetFormDataTableCardSourceForm
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardSourceForm.vue';
+import {
+    useDataTableCascadeUpdate,
+} from '@/common/modules/widgets/_composables/use-data-table-cascade-update';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import {
     DATA_SOURCE_DOMAIN,
     DATA_TABLE_OPERATOR,
     DATA_TABLE_TYPE, GROUP_BY_INFO_ITEMS_FOR_TAGS,
 } from '@/common/modules/widgets/_constants/data-table-constant';
+import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { DataTableAlertModalMode } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
@@ -42,6 +52,13 @@ import type {
 
 import { GROUP_BY } from '@/services/cost-explorer/constants/cost-explorer-constant';
 
+import {
+    useDashboardDataTableCascadeUpdate,
+} from '@/services/dashboards/composables/use-dashboard-data-table-cascade-update';
+import { useDashboardWidgetFormQuery } from '@/services/dashboards/composables/use-dashboard-widget-form-query';
+
+import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+
 interface Props {
     selected: boolean;
     item: PublicDataTableModel|PrivateDataTableModel;
@@ -54,17 +71,33 @@ const props = defineProps<Props>();
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 const allReferenceStore = useAllReferenceStore();
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
+
+/* Query */
+const {
+    widget,
+    dataTableList,
+    keys,
+    api,
+    fetcher,
+    queryClient,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+const { cascadeUpdateDataTable } = useDataTableCascadeUpdate({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
 
 const storeState = reactive({
     costDataSources: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
     metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
     selectedDataTableId: computed(() => widgetGenerateState.selectedDataTableId),
-    selectedDataTable: computed(() => widgetGenerateStore.getters.selectedDataTable),
-    dataTables: computed(() => widgetGenerateState.dataTables),
     allDataTableInvalidMap: computed(() => widgetGenerateState.allDataTableInvalidMap),
 });
 
 const state = reactive({
+    isPrivate: computed(() => widgetGenerateState.widgetId?.startsWith('private')),
     loading: false,
     dataTableId: computed(() => props.item.data_table_id),
     sourceType: computed(() => props.item.source_type),
@@ -100,7 +133,7 @@ const state = reactive({
     costDataTypeItems: computed(() => {
         const targetCostDataSource = storeState.costDataSources[state.dataSourceId];
         const costAlias: string|undefined = targetCostDataSource?.data?.plugin_info?.metadata?.alias?.cost || targetCostDataSource?.data?.plugin_info?.metadata?.cost_info?.name;
-        const additionalMenuItems: MenuItem[] = targetCostDataSource.data?.cost_data_keys?.map((key) => ({
+        const additionalMenuItems: MenuItem[] = targetCostDataSource?.data?.cost_data_keys?.map((key) => ({
             name: `data.${key}`, label: key,
         }));
         return [
@@ -194,22 +227,73 @@ const modalState = reactive({
     referenceDataTableName: '',
 });
 
-const setFailStatus = (status: boolean) => {
-    state.failStatus = status;
-};
-const getTimeDiffValue = (): TimeDiff|undefined => {
-    if (advancedOptionsState.selectedTimeDiff === 'none' || !Number(advancedOptionsState.selectedTimeDiffDate)) return undefined;
-    const defaultFieldName = state.selectableSourceItems.find((source) => source.name === state.selectedSourceEndItem)?.label || '';
-    const timeDiffOptions = {
-        none: '',
-        months: 'month',
-        years: 'year',
-    };
-    return {
-        [advancedOptionsState.selectedTimeDiff]: -Number(advancedOptionsState.selectedTimeDiffDate),
-        data_name: advancedOptionsState.timeDiffDataName || `${defaultFieldName} (- ${advancedOptionsState.selectedTimeDiffDate} ${timeDiffOptions[advancedOptionsState.selectedTimeDiff]})`,
-    };
+/* APIs */
+const invalidateLoadQueries = async (data: DataTableModel) => {
+    await queryClient.invalidateQueries({
+        queryKey: [
+            ...(state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value),
+            data.data_table_id,
+        ],
+    });
+    await queryClient.invalidateQueries({
+        queryKey: [
+            ...(state.isPrivate ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+            dashboardDetailState.dashboardId,
+            widgetGenerateState.widgetId,
+        ],
+    });
+    await queryClient.invalidateQueries({
+        queryKey: [
+            ...(state.isPrivate ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
+            dashboardDetailState.dashboardId,
+            widgetGenerateState.widgetId,
+        ],
+    });
 };
+const { mutateAsync: updateDataTableAndCascadeUpdate } = useMutation({
+    mutationFn: fetcher.updateDataTableFn,
+    onSuccess: async (data) => {
+        const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+        await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
+            if (oldData.results) {
+                return {
+                    ...oldData,
+                    results: oldData.results.map((dataTable) => {
+                        if (dataTable.data_table_id === data.data_table_id) {
+                            return data;
+                        }
+                        return dataTable;
+                    }),
+                };
+            }
+            return oldData;
+        });
+        await invalidateLoadQueries(data);
+        await cascadeUpdateDataTable(data.data_table_id);
+
+        setInitialDataTableForm();
+        state.filterFormKey = getRandomId();
+        setFailStatus(false);
+    },
+    onError: (error) => {
+        setFailStatus(true);
+        showErrorMessage(error.message, error);
+        ErrorHandler.handleError(error);
+    },
+});
+const { mutateAsync: updateWidget } = useMutation({
+    mutationFn: fetcher.updateWidgetFn,
+    onSuccess: (data) => {
+        const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private')
+            ? keys.privateWidgetQueryKey
+            : keys.publicWidgetQueryKey;
+        queryClient.setQueryData(widgetQueryKey.value, () => data);
+    },
+    onError: (e) => {
+        showErrorMessage(e.message, e);
+        ErrorHandler.handleError(e);
+    },
+});
 const updateDataTable = async (): Promise<DataTableModel|undefined> => {
     if (!state.dataFieldName.length) {
         showErrorMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_WARNING'), '');
@@ -272,16 +356,56 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
         },
     };
 
-    const result = await widgetGenerateStore.updateDataTable(updateParams);
-
-    if (result) {
-        setInitialDataTableForm();
-        state.filterFormKey = getRandomId();
-        setFailStatus(false);
-    } else setFailStatus(true);
-
+    const result = await updateDataTableAndCascadeUpdate(updateParams);
+    if (widget.value?.state === 'ACTIVE') {
+        const sanitizedOptions = sanitizeWidgetOptions({
+            widgetHeader: {
+                ...widget.value?.options?.widgetHeader,
+            },
+        });
+        await updateWidget({
+            widget_id: widgetGenerateState.widgetId,
+            state: 'INACTIVE',
+            options: sanitizedOptions,
+        });
+    }
     return result;
 };
+const deleteDataTableFn = (params: DataTableDeleteParameters): Promise<void> => {
+    if (params.data_table_id.startsWith('private')) {
+        return api.privateDataTableAPI.delete(params);
+    } return api.publicDataTableAPI.delete(params);
+};
+const { mutateAsync: deleteDataTable } = useMutation({
+    mutationFn: deleteDataTableFn,
+    onSuccess: async (_, variables) => {
+        const _allDataTableInvalidMap = {
+            ...storeState.allDataTableInvalidMap,
+        };
+        delete _allDataTableInvalidMap[variables.data_table_id];
+        widgetGenerateStore.setAllDataTableInvalidMap(_allDataTableInvalidMap);
+
+        const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
+        const dataTableListQueryKey = _isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+        await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
+            if (oldData.results) {
+                return {
+                    ...oldData,
+                    results: oldData.results.filter((dataTable) => dataTable.data_table_id !== variables.data_table_id),
+                };
+            }
+            return oldData;
+        });
+
+        if (storeState.selectedDataTableId === variables.data_table_id) {
+            const dataTableId = dataTableList.value.length ? dataTableList.value[0]?.data_table_id : undefined;
+            widgetGenerateStore.setSelectedDataTableId(dataTableId?.startsWith('UNSAVED-') ? undefined : dataTableId);
+        }
+    },
+    onError: (error) => {
+        ErrorHandler.handleError(error);
+    },
+});
 
 /* Events */
 const handleSelectSourceItem = (selectedItem: string) => {
@@ -290,7 +414,7 @@ const handleSelectSourceItem = (selectedItem: string) => {
 };
 
 const handleClickDeleteDataTable = async () => {
-    const isExistingDataTableInTransformed = storeState.dataTables.find((dataTable) => {
+    const isExistingDataTableInTransformed = dataTableList.value.find((dataTable) => {
         const isTransformedData = dataTable.data_type === DATA_TABLE_TYPE.TRANSFORMED;
         if (!isTransformedData) return undefined;
         const isDualDataTableOperator = dataTable.operator === DATA_TABLE_OPERATOR.CONCAT || dataTable.operator === DATA_TABLE_OPERATOR.JOIN;
@@ -312,15 +436,10 @@ const handleClickResetDataTable = () => {
 };
 const handleConfirmModal = async () => {
     if (modalState.mode === 'DELETE') {
-        const beforeSelectedDataTableId = storeState.selectedDataTableId;
         const deleteParams = {
             data_table_id: state.dataTableId,
         };
-        await widgetGenerateStore.deleteDataTable(deleteParams);
-        if (beforeSelectedDataTableId === state.dataTableId) {
-            const dataTableId = storeState.dataTables.length ? storeState.dataTables[0]?.data_table_id : undefined;
-            widgetGenerateStore.setSelectedDataTableId(dataTableId?.startsWith('UNSAVED-') ? undefined : dataTableId);
-        }
+        await deleteDataTable(deleteParams);
     }
     if (modalState.mode === 'RESET') {
         setInitialDataTableForm();
@@ -358,6 +477,23 @@ const setInitialDataTableForm = () => {
     advancedOptionsState.selectedTimeDiffDate = originDataState.timeDiffDate;
     advancedOptionsState.timeDiffDataName = originDataState.timeDiffDataName;
 };
+const setFailStatus = (status: boolean) => {
+    state.failStatus = status;
+};
+const getTimeDiffValue = (): TimeDiff|undefined => {
+    if (advancedOptionsState.selectedTimeDiff === 'none' || !Number(advancedOptionsState.selectedTimeDiffDate)) return undefined;
+    const defaultFieldName = state.selectableSourceItems.find((source) => source.name === state.selectedSourceEndItem)?.label || '';
+    const timeDiffOptions = {
+        none: '',
+        months: 'month',
+        years: 'year',
+    };
+    return {
+        [advancedOptionsState.selectedTimeDiff]: -Number(advancedOptionsState.selectedTimeDiffDate),
+        data_name: advancedOptionsState.timeDiffDataName || `${defaultFieldName} (- ${advancedOptionsState.selectedTimeDiffDate} ${timeDiffOptions[advancedOptionsState.selectedTimeDiff]})`,
+    };
+};
+
 
 onMounted(() => {
     // Initial Form Setting
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
index e203e76762..f05275400b 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
@@ -40,6 +40,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardFiltersItem
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import {
     DATA_SOURCE_DOMAIN,
     DATA_TABLE_QUERY_OPERATOR,
@@ -82,13 +83,21 @@ const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:filter', value: Record<string, string[]>): void;}>();
 const allReferenceStore = useAllReferenceStore();
 const widgetGenerateStore = useWidgetGenerateStore();
+const widgetGenerateState = widgetGenerateStore.state;
 const appContextStore = useAppContextStore();
 
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const storeState = reactive({
     isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
     metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
     costDataSources: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-    dataTable: computed(() => widgetGenerateStore.state.dataTables.find((d) => d.data_table_id === props.dataTableId)),
+    dataTable: computed(() => dataTableList.value.find((d) => d.data_table_id === props.dataTableId)),
 });
 
 const state = reactive({
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
index 5dc9341f01..a1548c2c11 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
@@ -13,7 +13,7 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { DashboardGlobalVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import {
@@ -25,6 +25,7 @@ import type { DataTableQueryFilterForDropdown } from '@/common/modules/widgets/t
 
 import { blue, gray } from '@/styles/colors';
 
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
@@ -45,8 +46,10 @@ const emit = defineEmits<{(e: 'delete'): void;
 const operatorButtonRef = ref<HTMLElement | null>(null);
 
 const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailGetters = dashboardDetailStore.getters;
-
+const dashboardDetailState = dashboardDetailStore.state;
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 const state = reactive({
     visibleMenu: false,
     operatorMenu: computed<MenuItem[]>(() => {
@@ -100,7 +103,7 @@ const state = reactive({
     selectedOperator: [] as MenuItem[],
     proxySelectedFilter: useProxyValue<DataTableQueryFilterForDropdown>('selectedFilter', props, emit),
     globalVariableItems: computed<MenuItem[]>(() => {
-        const _refinedProperties: DashboardGlobalVariable[] = Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties);
+        const _refinedProperties: DashboardGlobalVariable[] = Object.values(dashboard.value?.vars_schema?.properties ?? {});
         const _orderedVariables = getOrderedGlobalVariables(_refinedProperties);
         return _orderedVariables.map((variable) => ({
             name: `{{ global.${variable.key} }}`,
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue
index e9da39a2fe..96a7a1e567 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue
@@ -2,24 +2,33 @@
 
 import { computed, reactive } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
+
 import {
     PIconButton, PI, PTextInput, PTooltip,
 } from '@cloudforet/mirinae';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import {
     DATA_TABLE_TYPE,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { DataTableDataType } from '@/common/modules/widgets/types/widget-model';
 
 import { gray, violet } from '@/styles/colors';
 
 
+
+
 interface Props {
     dataTableId: string;
     dataType: DataTableDataType;
@@ -33,9 +42,18 @@ const emit = defineEmits<{(e: 'update:dataTableName', value: string): void;}>();
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 
+/* Query */
+const {
+    dataTableList,
+    fetcher,
+    keys,
+    queryClient,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const storeState = reactive({
-    dataTables: computed(() => widgetGenerateState.dataTables),
-    currentDataTable: computed(() => storeState.dataTables.find((dataTable) => dataTable.data_table_id === props.dataTableId)),
+    currentDataTable: computed(() => dataTableList.value.find((dataTable) => dataTable.data_table_id === props.dataTableId)),
 });
 
 const state = reactive({
@@ -65,22 +83,62 @@ const handleClickNameEdit = () => {
 };
 const handleClickNameConfirm = async () => {
     const editedDataTableName = dataTableNameState.proxyDataTableName.trim();
-    if (storeState.currentDataTable.name === editedDataTableName) {
+    if (storeState.currentDataTable?.name === editedDataTableName) {
         dataTableNameState.editMode = false;
         return;
     }
-    const dataTableNames = storeState.dataTables.map((dataTable) => dataTable.name);
+    const dataTableNames = dataTableList.value.map((dataTable) => dataTable.name);
     if (dataTableNames.includes(editedDataTableName)) {
         showErrorMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.DATA_TABLE_NAME_WARNING'), '');
         return;
     }
-    await widgetGenerateStore.updateDataTable({
-        data_table_id: props.dataTableId,
-        name: editedDataTableName,
-    }, { unsaved: state.isUnsavedTransformed, preventReferenceUpdating: true });
-    showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.DATA_TABLE_NAME_SUCCESS'), '');
-    dataTableNameState.editMode = false;
+
+    if (state.isUnsavedTransformed) {
+        const unsavedDataTable = {
+            ...storeState.currentDataTable,
+            name: editedDataTableName,
+        } as DataTableModel;
+        await syncDataTableList(unsavedDataTable);
+    } else {
+        updateDataTable({
+            data_table_id: props.dataTableId,
+            name: editedDataTableName,
+        });
+    }
 };
+
+/* Api */
+const { mutate: updateDataTable } = useMutation({
+    mutationFn: fetcher.updateDataTableFn,
+    onSuccess: async (data) => {
+        await syncDataTableList(data);
+        showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.DATA_TABLE_NAME_SUCCESS'), '');
+        dataTableNameState.editMode = false;
+    },
+    onError: (e) => {
+        showErrorMessage(e.message, e);
+        ErrorHandler.handleError(e);
+    },
+});
+const syncDataTableList = async (data: DataTableModel) => {
+    const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
+    const dataTableListQueryKey = _isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+    await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
+        if (oldData.results) {
+            return {
+                ...oldData,
+                results: oldData.results.map((dataTable) => {
+                    if (dataTable.data_table_id === data.data_table_id) {
+                        return data;
+                    }
+                    return dataTable;
+                }),
+            };
+        }
+        return oldData;
+    });
+};
+
 </script>
 
 <template>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue
index 35b2361424..103f17b60a 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue
@@ -11,13 +11,14 @@ import {
     PIconButton, PFieldGroup, PTextInput, PButton, PFieldTitle,
 } from '@cloudforet/mirinae';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 import { i18n } from '@/translations';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { isFieldNameValid } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
@@ -26,6 +27,7 @@ import type { AddLabelsOptions } from '@/common/modules/widgets/types/widget-mod
 
 
 
+
 type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 interface AdditionalLabel {
     name: string;
@@ -41,9 +43,15 @@ const emit = defineEmits<{(e: 'update:operator-options', value: AddLabelsOptions
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const storeState = reactive({
-    dataTables: computed<Partial<DataTableModel>[]>(() => widgetGenerateState.dataTables),
-    currentDataTable: computed<Partial<DataTableModel>|undefined>(() => storeState.dataTables.find((d) => d.data_table_id === dataTableInfo.value.dataTableId)),
+    currentDataTable: computed<Partial<DataTableModel>|undefined>(() => dataTableList.value.find((d) => d.data_table_id === dataTableInfo.value.dataTableId)),
 });
 
 const dataTableInfo = ref<TransformDataTableInfo>({
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue
index 5a5e703c88..7a861c4242 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue
@@ -18,6 +18,7 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import {
     DATA_TABLE_OPERATOR,
 } from '@/common/modules/widgets/_constants/data-table-constant';
@@ -27,6 +28,7 @@ import type { AggregateOptions } from '@/common/modules/widgets/types/widget-mod
 
 
 
+
 const props = defineProps<TransformDataTableProps<AggregateOptions>>();
 const emit = defineEmits<{(e: 'update:operator-options', value: AggregateOptions): void;
     (e: 'update:invalid', value: boolean): void;
@@ -34,17 +36,23 @@ const emit = defineEmits<{(e: 'update:operator-options', value: AggregateOptions
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 
+
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const dataTableInfo = ref<TransformDataTableInfo>({
     dataTableId: props.originData?.data_table_id,
 });
 const groupByInfo = ref<AggregateOptions['group_by']>(cloneDeep(props.originData.group_by));
 const functionInfo = ref<AggregateOptions['function']>(cloneDeep(props.originData.function));
-const storeState = reactive({
-    dataTables: computed(() => widgetGenerateState.dataTables),
-});
+
 const state = reactive({
     proxyOperatorOptions: useProxyValue<AggregateOptions>('operator-options', props, emit),
-    selectedDataTable: computed(() => storeState.dataTables.find((dataTable) => dataTable.data_table_id === dataTableInfo.value.dataTableId)),
+    selectedDataTable: computed(() => dataTableList.value.find((dataTable) => dataTable.data_table_id === dataTableInfo.value.dataTableId)),
     invalid: computed<boolean>(() => {
         if (!state.proxyOperatorOptions?.data_table_id) return true;
         if (!state.proxyOperatorOptions.group_by?.length) return true;
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
index ec2ba58574..df9fc3fe3c 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -3,16 +3,22 @@ import {
     computed, defineExpose, onMounted, reactive, watch,
 } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
 import {
     cloneDeep, intersection, isEmpty, isEqual,
 } from 'lodash';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { DataTableDeleteParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/delete';
+import type { DataTableTransformParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/transform';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 import { i18n } from '@/translations';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFormDataTableCardAlertModal
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardAlertModal.vue';
 import WidgetFormDataTableCardFooter from '@/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue';
@@ -34,9 +40,14 @@ import WidgetFormDataTableCardTransformQuery
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformQuery.vue';
 import WidgetFormDataTableCardTransformValueMapping
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue';
+import {
+    useDataTableCascadeUpdate,
+} from '@/common/modules/widgets/_composables/use-data-table-cascade-update';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import {
     DATA_TABLE_TYPE, type DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
 } from '@/common/modules/widgets/_constants/data-table-constant';
+import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type {
     DataTableAlertModalMode, TransformDataTableInfo,
@@ -48,6 +59,12 @@ import type {
     JoinOptions, ValueMappingOptions, ConcatOptions, AggregateOptions, AggregateFunction,
 } from '@/common/modules/widgets/types/widget-model';
 
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+
+
+
+
 
 
 interface Props {
@@ -60,9 +77,29 @@ const props = defineProps<Props>();
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
+/* Querys */
+const {
+    dashboard,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
+const {
+    widget,
+    dataTableList,
+    api,
+    keys,
+    fetcher,
+    queryClient,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+const { cascadeUpdateDataTable } = useDataTableCascadeUpdate({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
 
 const storeState = reactive({
-    dataTables: computed(() => widgetGenerateState.dataTables),
     selectedDataTableId: computed(() => widgetGenerateState.selectedDataTableId),
     allDataTableInvalidMap: computed(() => widgetGenerateState.allDataTableInvalidMap),
 });
@@ -81,6 +118,7 @@ const state = reactive({
     operator: computed(() => props.item.operator as DataTableOperator),
     failStatus: false,
     isUnavailable: computed<boolean>(() => props.item.state === 'UNAVAILABLE'),
+    isPrivate: computed(() => widgetGenerateState.widgetId?.startsWith('private')),
 });
 
 const modalState = reactive({
@@ -136,11 +174,12 @@ const originState = reactive({
     }),
 });
 
+/* Utils */
 const setFailStatus = (status: boolean) => {
     state.failStatus = status;
 };
 const getAggregateFunctionMap = () => {
-    const referenceDataTable = storeState.dataTables.find((dataTable) => dataTable.data_table_id === valueState.AGGREGATE.data_table_id);
+    const referenceDataTable = dataTableList.value.find((dataTable) => dataTable.data_table_id === valueState.AGGREGATE.data_table_id);
     if (!referenceDataTable) return {};
     const dataFields = Object.keys(referenceDataTable.data_info ?? {});
     return dataFields.reduce((acc, dataField) => {
@@ -148,13 +187,89 @@ const getAggregateFunctionMap = () => {
         return acc;
     }, {} as AggregateFunction);
 };
+
+/* APIs */
+const syncDataTableList = async (data: DataTableModel, unsavedId?: string) => {
+    const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+    await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
+        if (oldData.results) {
+            return {
+                ...oldData,
+                results: oldData.results.map((dataTable) => {
+                    if (dataTable.data_table_id === data.data_table_id || dataTable.data_table_id === unsavedId) {
+                        return data;
+                    }
+                    return dataTable;
+                }),
+            };
+        }
+        return oldData;
+    });
+};
+const invalidateLoadQueries = async (data: DataTableModel) => {
+    await queryClient.invalidateQueries({
+        queryKey: [
+            ...(state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value),
+            data.data_table_id,
+        ],
+    });
+    await queryClient.invalidateQueries({
+        queryKey: [
+            ...(state.isPrivate ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+            dashboardDetailState.dashboardId,
+            widgetGenerateState.widgetId,
+        ],
+    });
+    await queryClient.invalidateQueries({
+        queryKey: [
+            ...(state.isPrivate ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
+            dashboardDetailState.dashboardId,
+            widgetGenerateState.widgetId,
+        ],
+    });
+};
+const { mutateAsync: updateDataTableAndCascadeUpdate } = useMutation({
+    mutationFn: fetcher.updateDataTableFn,
+    onSuccess: async (data) => {
+        await syncDataTableList(data);
+        await cascadeUpdateDataTable(data.data_table_id);
+        await invalidateLoadQueries(data);
+
+        setFailStatus(false);
+    },
+    onError: (error) => {
+        setFailStatus(true);
+        showErrorMessage(error.message, error);
+        ErrorHandler.handleError(error);
+    },
+});
+const { mutateAsync: updateWidget } = useMutation({
+    mutationFn: fetcher.updateWidgetFn,
+    onSuccess: (data) => {
+        const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private')
+            ? keys.privateWidgetQueryKey
+            : keys.publicWidgetQueryKey;
+        queryClient.setQueryData(widgetQueryKey.value, () => data);
+    },
+    onError: (e) => {
+        showErrorMessage(e.message, e);
+        ErrorHandler.handleError(e);
+    },
+});
+const transformDataTableFn = (params: DataTableTransformParameters): Promise<DataTableModel> => {
+    if (state.isPrivate) {
+        return api.privateDataTableAPI.transform(params);
+    }
+    return api.publicDataTableAPI.transform(params);
+};
+
 const updateDataTable = async (): Promise<DataTableModel|undefined> => {
     const _targetDataTableId: string|undefined = valueState[state.operator].data_table_id;
     const _targetDataTables: string[]|undefined = valueState[state.operator].data_tables;
-    const isValidDataTableId = _targetDataTableId && storeState.dataTables.some((dataTable) => dataTable.data_table_id === _targetDataTableId);
+    const isValidDataTableId = _targetDataTableId && dataTableList.value.some((dataTable) => dataTable.data_table_id === _targetDataTableId);
     const isValidDataTables = _targetDataTables?.length === 2
-        && storeState.dataTables.some((dataTable) => dataTable.data_table_id === _targetDataTables[0])
-        && storeState.dataTables.some((dataTable) => dataTable.data_table_id === _targetDataTables[1]);
+        && dataTableList.value.some((dataTable) => dataTable.data_table_id === _targetDataTables[0])
+        && dataTableList.value.some((dataTable) => dataTable.data_table_id === _targetDataTables[1]);
     if (!isValidDataTableId && !isValidDataTables) {
         showErrorMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_WARNING'), '');
         setFailStatus(true);
@@ -163,8 +278,8 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
 
     // Duplicated Data Field Handling in 'JOIN'
     if (state.operator === 'JOIN') {
-        const firstDataTable = storeState.dataTables.find((dataTable) => dataTable.data_table_id === valueState.JOIN.data_tables[0]);
-        const secondDataTable = storeState.dataTables.find((dataTable) => dataTable.data_table_id === valueState.JOIN.data_tables[1]);
+        const firstDataTable = dataTableList.value.find((dataTable) => dataTable.data_table_id === valueState.JOIN.data_tables[0]);
+        const secondDataTable = dataTableList.value.find((dataTable) => dataTable.data_table_id === valueState.JOIN.data_tables[1]);
         const firstDataFields = Object.keys(firstDataTable?.data_info ?? {});
         const secondDataFields = Object.keys(secondDataTable?.data_info ?? {});
         const duplicatedDataFields = intersection(firstDataFields, secondDataFields);
@@ -228,11 +343,15 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
     if (firstUpdating) {
         const createParams = {
             name: state.dataTableName,
+            widget_id: widgetGenerateState.widgetId,
             operator: state.operator,
+            vars: dashboard.value?.vars || {},
             options: { [state.operator]: options() },
         };
-        const dataTable = await widgetGenerateStore.createTransformDataTable(createParams, state.dataTableId);
+        const dataTable = await transformDataTableFn(createParams);
         if (dataTable) {
+            await syncDataTableList(dataTable, state.dataTableId);
+
             const _allDataTableInvalidMap = {
                 ...storeState.allDataTableInvalidMap,
             };
@@ -249,11 +368,40 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
         name: state.dataTableName,
         options: { [state.operator]: options() },
     };
-    const result = await widgetGenerateStore.updateDataTable(updateParams);
-    if (!result) setFailStatus(true);
-    else setFailStatus(false);
+    const result = await updateDataTableAndCascadeUpdate(updateParams);
+    if (widget.value?.state === 'ACTIVE') {
+        const sanitizedOptions = sanitizeWidgetOptions({
+            widgetHeader: {
+                ...widget.value?.options?.widgetHeader,
+            },
+        });
+        await updateWidget({
+            widget_id: widgetGenerateState.widgetId,
+            state: 'INACTIVE',
+            options: sanitizedOptions,
+        });
+    }
     return result;
 };
+const deleteDataTableFn = (params: DataTableDeleteParameters): Promise<void> => {
+    if (params.data_table_id.startsWith('private')) {
+        return api.privateDataTableAPI.delete(params);
+    } return api.publicDataTableAPI.delete(params);
+};
+const { mutateAsync: deleteDataTable } = useMutation({
+    mutationFn: deleteDataTableFn,
+    onSuccess: (_, variables) => {
+        clearDataTableInvalidStatus(variables.data_table_id);
+        if (storeState.selectedDataTableId === variables.data_table_id) {
+            const dataTableId = dataTableList.value.length ? dataTableList.value[0]?.data_table_id : undefined;
+            widgetGenerateStore.setSelectedDataTableId(dataTableId?.startsWith('UNSAVED-') ? undefined : dataTableId);
+        }
+    },
+    onError: (error) => {
+        ErrorHandler.handleError(error);
+    },
+});
+
 /* Events */
 const handleClickDeleteDataTable = async () => {
     modalState.mode = 'DELETE';
@@ -265,14 +413,13 @@ const handleClickResetDataTable = () => {
 };
 const handleConfirmModal = async () => {
     if (modalState.mode === 'DELETE') {
-        const beforeSelectedDataTableId = storeState.selectedDataTableId;
         const deleteParams = {
             data_table_id: state.dataTableId,
         };
-        await widgetGenerateStore.deleteDataTable(deleteParams, state.isUnsaved);
-        if (beforeSelectedDataTableId === state.dataTableId) {
-            const dataTableId = storeState.dataTables.length ? storeState.dataTables[0]?.data_table_id : undefined;
-            widgetGenerateStore.setSelectedDataTableId(dataTableId?.startsWith('UNSAVED-') ? undefined : dataTableId);
+        if (state.isUnsaved) {
+            await clearDataTableInvalidStatus(state.dataTableId);
+        } else {
+            await deleteDataTable(deleteParams);
         }
     }
     if (modalState.mode === 'RESET') {
@@ -296,6 +443,24 @@ const handleUpdateDataTable = async () => {
 };
 
 /* Utils */
+const clearDataTableInvalidStatus = async (dataTableId: string) => {
+    const _allDataTableInvalidMap = {
+        ...storeState.allDataTableInvalidMap,
+    };
+    delete _allDataTableInvalidMap[dataTableId];
+    widgetGenerateStore.setAllDataTableInvalidMap(_allDataTableInvalidMap);
+
+    const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+    await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
+        if (oldData.results) {
+            return {
+                ...oldData,
+                results: oldData.results.filter((dataTable) => dataTable.data_table_id !== dataTableId),
+            };
+        }
+        return oldData;
+    });
+};
 const setInitialDataTableForm = () => {
     valueState.CONCAT = !isEmpty(originState.CONCAT) ? cloneDeep(originState.CONCAT) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.CONCAT);
     valueState.JOIN = !isEmpty(originState.JOIN) ? cloneDeep(originState.JOIN) : cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.JOIN);
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue
index 119501fce1..31a8f7fb87 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue
@@ -9,6 +9,7 @@ import { PI, PContextMenu, PFieldTitle } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/type';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { TransformDataTableInfo } from '@/common/modules/widgets/types/widget-data-table-type';
@@ -16,6 +17,7 @@ import type { DataTableOperator } from '@/common/modules/widgets/types/widget-mo
 
 import { gray } from '@/styles/colors';
 
+
 interface Props {
     dataTableId: string;
     operator: DataTableOperator;
@@ -29,8 +31,14 @@ const emit = defineEmits<{(e: 'update:data-table-info', value: TransformDataTabl
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const storeState = reactive({
-    dataTables: computed(() => widgetGenerateState.dataTables),
     isJoinRestricted: computed<boolean|undefined>(() => widgetGenerateState.joinRestrictedMap[props.dataTableId]),
 });
 
@@ -40,7 +48,7 @@ const state = reactive({
     proxyDataTableInfo: useProxyValue('dataTableInfo', props, emit),
     visibleMenu: false,
     secondaryVisibleMenu: false,
-    baseMenuItems: computed(() => storeState.dataTables
+    baseMenuItems: computed(() => dataTableList.value
         .filter((dataTable) => !dataTable.data_table_id.startsWith('UNSAVED-') && dataTable.data_table_id !== props.dataTableId)
         .map((dataTable) => ({
             label: dataTable.name,
@@ -168,7 +176,7 @@ watch(() => props.dataTableInfo, (newVal) => {
                      :class="{'select-button': true,
                               selected: !!state.selected,
                               disabled: props.isLegacyDataTable,
-                              error: state.selected && !storeState.dataTables.some((dataTable) => dataTable.data_table_id === state.selected?.[0]?.name)
+                              error: state.selected && !dataTableList.some((dataTable) => dataTable.data_table_id === state.selected?.[0]?.name)
                      }"
                      @click="handleClickSelectButton(false)"
                 >
@@ -210,7 +218,7 @@ watch(() => props.dataTableInfo, (newVal) => {
                 <div ref="targetRef"
                      :class="{'select-button': true,
                               selected: !!state.secondarySelected,
-                              error: (state.secondarySelected && !storeState.dataTables.some((dataTable) => dataTable.data_table_id === state.secondarySelected?.[0]?.name))
+                              error: (state.secondarySelected && !dataTableList.some((dataTable) => dataTable.data_table_id === state.secondarySelected?.[0]?.name))
                                   || storeState.isJoinRestricted,
                               [props.operator]: true
                      }"
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
index 8720d9bfc9..84ac48a150 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
@@ -12,8 +12,8 @@ import {
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -23,6 +23,7 @@ import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
 import WidgetFormDataTableGlobalVariableViewButton
     from '@/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_FIELD_TYPE, DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
@@ -30,6 +31,7 @@ import type { EvalOptions } from '@/common/modules/widgets/types/widget-model';
 
 
 
+
 type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 
 const props = defineProps<TransformDataTableProps<EvalOptions>>();
@@ -47,9 +49,17 @@ const FORMULA_PLACEHOLDER = '{{ Product }}';
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
+
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
+
 const storeState = reactive({
-    dataTables: computed<Partial<DataTableModel>[]>(() => widgetGenerateState.dataTables),
-    currentDataTable: computed<Partial<DataTableModel>|undefined>(() => storeState.dataTables.find((d) => d.data_table_id === dataTableInfo.value.dataTableId)),
+    currentDataTable: computed<Partial<DataTableModel>|undefined>(() => dataTableList.value.find((d) => d.data_table_id === dataTableInfo.value.dataTableId)),
 });
 const state = reactive({
     proxyOperatorOptions: useProxyValue<EvalOptions>('operator-options', props, emit),
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue
index a73283aa7b..7f4ba08bff 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue
@@ -10,12 +10,10 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import {
     DATA_TABLE_OPERATOR, JOIN_TYPE,
 } from '@/common/modules/widgets/_constants/data-table-constant';
@@ -25,6 +23,7 @@ import type { JoinOptions, JoinType } from '@/common/modules/widgets/types/widge
 
 
 
+
 interface OnKeyItem {
     leftKey?: string;
     rightKey?: string;
@@ -44,9 +43,14 @@ const rightKeyInfo = ref<JoinOptions['right_keys']>(props.originData.right_keys)
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
-const storeState = reactive({
-    dataTables: computed<Partial<PublicDataTableModel|PrivateDataTableModel>[]>(() => widgetGenerateState.dataTables),
+
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
 });
+
 const state = reactive({
     proxyOperatorOptions: useProxyValue<JoinOptions>('operator-options', props, emit),
     joinTypeItems: computed<SelectDropdownMenuItem[]>(() => [
@@ -65,7 +69,7 @@ const state = reactive({
     leftKeyMenuItems: computed<SelectDropdownMenuItem[]>(() => {
         if (state.proxyOperatorOptions.data_tables.length < 1) return [];
         const _targetDataTableId = state.proxyOperatorOptions.data_tables[0];
-        const _targetDataTable = storeState.dataTables.find((d) => d.data_table_id === _targetDataTableId);
+        const _targetDataTable = dataTableList.value.find((d) => d.data_table_id === _targetDataTableId);
         return Object.keys(_targetDataTable?.labels_info ?? {})?.map((d) => ({
             name: d,
             label: d,
@@ -74,7 +78,7 @@ const state = reactive({
     rightKeyMenuItems: computed(() => {
         if (state.proxyOperatorOptions.data_tables.length < 2) return [];
         const _targetDataTableId = state.proxyOperatorOptions.data_tables[1];
-        const _targetDataTable = storeState.dataTables.find((d) => d.data_table_id === _targetDataTableId);
+        const _targetDataTable = dataTableList.value.find((d) => d.data_table_id === _targetDataTableId);
         return Object.keys(_targetDataTable?.labels_info ?? {})?.map((d) => ({
             name: d,
             label: d,
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
index e57097616c..7d4f8ee90e 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
@@ -5,15 +5,12 @@ import {
 
 import { cloneDeep } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PDivider, PFieldGroup, PSelectButton, PTextInput, PSelectDropdown, PRadioGroup, PRadio, PI,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import { GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { DataTableLoadParameters } from '@/schema/dashboard/public-data-table/api-verbs/load';
+import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import { i18n } from '@/translations';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
@@ -21,6 +18,7 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import {
     DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
 } from '@/common/modules/widgets/_constants/data-table-constant';
@@ -28,6 +26,7 @@ import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-g
 import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { PivotOptions } from '@/common/modules/widgets/types/widget-model';
 
+
 const props = defineProps<TransformDataTableProps<PivotOptions>>();
 
 const emit = defineEmits<{(e: 'update:operator-options', value: PivotOptions): void;
@@ -36,6 +35,14 @@ const emit = defineEmits<{(e: 'update:operator-options', value: PivotOptions): v
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 
+/* Query */
+const {
+    dataTableList,
+    api,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const dataTableInfo = ref<TransformDataTableInfo>({
     dataTableId: props.originData?.data_table_id,
 });
@@ -45,13 +52,10 @@ const limitInfo = ref<PivotOptions['limit']>(props.originData.limit);
 const functionInfo = ref<PivotOptions['function']>(props.originData.function);
 const orderByInfo = ref<PivotOptions['order_by']>(props.originData.order_by);
 
-const storeState = reactive({
-    dataTables: computed(() => widgetGenerateState.dataTables),
-});
 const state = reactive({
     isInitiated: true,
     proxyOperatorOptions: useProxyValue<PivotOptions>('operatorOptions', props, emit),
-    selectedDataTable: computed(() => storeState.dataTables.find((dataTable) => dataTable.data_table_id === dataTableInfo.value.dataTableId)),
+    selectedDataTable: computed(() => dataTableList.value.find((dataTable) => dataTable.data_table_id === dataTableInfo.value.dataTableId)),
     labelFieldItems: computed<MenuItem[]>(() => {
         if (!state.selectedDataTable) return [];
         const labelsInfo = state.selectedDataTable.labels_info;
@@ -177,8 +181,8 @@ const fetchAndExtractDynamicField = async () => {
     if (!dataTableInfo.value?.dataTableId || !fieldsInfo.value?.column) return;
     const _isPrivate = dataTableInfo.value?.dataTableId.startsWith('private');
     const _fetcher = _isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateDataTable.load<DataTableLoadParameters, ListResponse<Record<string, string>>>
-        : SpaceConnector.clientV2.dashboard.publicDataTable.load<DataTableLoadParameters, ListResponse<Record<string, string>>>;
+        ? api.privateDataTableAPI.load
+        : api.publicDataTableAPI.load;
     try {
         state.dynamicFieldLoading = true;
         const res = await _fetcher({
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
index 2ec4643ffc..9ddd1aca9b 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
@@ -12,13 +12,14 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 import { i18n } from '@/translations';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import {
     DATA_TABLE_FIELD_TYPE,
     DATA_TABLE_OPERATOR,
@@ -29,6 +30,7 @@ import type { ValueMappingOptions } from '@/common/modules/widgets/types/widget-
 
 
 
+
 type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 
 const COMPONENT_RANDOM_KEY = `value-mapping-${random()}`;
@@ -40,9 +42,16 @@ const emit = defineEmits<{(e: 'update:operator-options', value: ValueMappingOpti
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
+
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const storeState = reactive({
-    dataTables: computed<Partial<DataTableModel>[]>(() => widgetGenerateState.dataTables),
-    currentDataTable: computed<Partial<DataTableModel>|undefined>(() => storeState.dataTables.find((d) => d.data_table_id === dataTableInfo.value.dataTableId)),
+    currentDataTable: computed<Partial<DataTableModel>|undefined>(() => dataTableList.value.find((d) => d.data_table_id === dataTableInfo.value.dataTableId)),
 });
 
 const dataTableInfo = ref<TransformDataTableInfo>({
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
index 64c2a41a91..92686f51fe 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
@@ -5,18 +5,27 @@ import { computed, reactive } from 'vue';
 
 import { PButton, PPopover, PCopyButton } from '@cloudforet/mirinae';
 
-import type { DashboardGlobalVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailGetters = dashboardDetailStore.getters;
+const dashboardDetailState = dashboardDetailStore.state;
+
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 
 const state = reactive({
     popperVisible: false,
     variableItems: computed<DashboardGlobalVariable[]>(() => {
-        const _refinedProperties: DashboardGlobalVariable[] = Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties);
+        const _refinedProperties: DashboardGlobalVariable[] = Object.values(dashboard.value?.vars_schema?.properties || {})
+            .map((property) => ({
+                key: property.key,
+                name: property.name,
+            }));
         return getOrderedGlobalVariables(_refinedProperties);
     }),
 });
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
index 2d9452ddcf..9af34020ed 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
@@ -4,21 +4,24 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { useMutation } from '@tanstack/vue-query';
+
 import {
     PButton, PButtonModal, POverlayLayout, PTextButton,
 } from '@cloudforet/mirinae';
 
 
-import type { PrivateWidgetDeleteParameters } from '@/schema/dashboard/private-widget/api-verbs/delete';
-import type { PrivateWidgetUpdateParameters } from '@/schema/dashboard/private-widget/api-verbs/update';
-import type { PublicWidgetDeleteParameters } from '@/schema/dashboard/public-widget/api-verbs/delete';
-import type { PublicWidgetUpdateParameters } from '@/schema/dashboard/public-widget/api-verbs/update';
+import type { PrivateWidgetUpdateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/update';
+import type { PublicWidgetUpdateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/update';
 import { i18n } from '@/translations';
 
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
+
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFormOverlayStep1 from '@/common/modules/widgets/_components/WidgetFormOverlayStep1.vue';
 import WidgetFormOverlayStep2 from '@/common/modules/widgets/_components/WidgetFormOverlayStep2.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
@@ -29,6 +32,18 @@ const dashboardDetailState = dashboardDetailStore.state;
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateGetters = widgetGenerateStore.getters;
 const widgetGenerateState = widgetGenerateStore.state;
+
+/* Query */
+const {
+    widget,
+    api,
+    keys,
+    fetcher,
+    queryClient,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const state = reactive({
     sidebarTitle: computed(() => {
         if (widgetGenerateState.overlayType === 'EXPAND') return undefined;
@@ -55,13 +70,13 @@ const state = reactive({
     }),
     warningModalVisible: false,
     warningModalTitle: computed(() => {
-        if (widgetGenerateState.widget?.state === 'CREATING') return i18n.t('COMMON.WIDGETS.FORM.CREATING_WIDGET_WARNING_MODAL_TITLE');
-        if (widgetGenerateState.widget?.state === 'INACTIVE' || state.isWidgetOptionsChanged) return i18n.t('COMMON.WIDGETS.FORM.INACTIVE_WIDGET_WARNING_MODAL_TITLE');
+        if (widget.value?.state === 'CREATING') return i18n.t('COMMON.WIDGETS.FORM.CREATING_WIDGET_WARNING_MODAL_TITLE');
+        if (widget.value?.state === 'INACTIVE' || state.isWidgetOptionsChanged) return i18n.t('COMMON.WIDGETS.FORM.INACTIVE_WIDGET_WARNING_MODAL_TITLE');
         return '';
     }),
     warningModalDescription: computed(() => {
-        if (widgetGenerateState.widget?.state === 'CREATING') return i18n.t('COMMON.WIDGETS.FORM.CREATING_WIDGET_WARNING_MODAL_DESC');
-        if (widgetGenerateState.widget?.state === 'INACTIVE' || state.isWidgetOptionsChanged) return i18n.t('COMMON.WIDGETS.FORM.INACTIVE_WIDGET_WARNING_MODAL_DESC');
+        if (widget.value?.state === 'CREATING') return i18n.t('COMMON.WIDGETS.FORM.CREATING_WIDGET_WARNING_MODAL_DESC');
+        if (widget.value?.state === 'INACTIVE' || state.isWidgetOptionsChanged) return i18n.t('COMMON.WIDGETS.FORM.INACTIVE_WIDGET_WARNING_MODAL_DESC');
         return '';
     }),
     isWidgetOptionsChanged: false,
@@ -76,47 +91,64 @@ const state = reactive({
 const deleteWidget = async (widgetId: string) => {
     if (!widgetId) return;
     const isPrivate = dashboardDetailState.dashboardId?.startsWith('private');
-    const fetcher = isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateWidget.delete<PrivateWidgetDeleteParameters>
-        : SpaceConnector.clientV2.dashboard.publicWidget.delete<PublicWidgetDeleteParameters>;
+    const _fetcher = isPrivate
+        ? api.privateWidgetAPI.delete
+        : api.publicWidgetAPI.delete;
     try {
-        await fetcher({
+        await _fetcher({
             widget_id: widgetId,
         });
     } catch (e) {
         ErrorHandler.handleError(e);
     }
 };
+const { mutateAsync: updateWidget } = useMutation({
+    mutationFn: fetcher.updateWidgetFn,
+    onSuccess: (data) => {
+        const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private')
+            ? keys.privateWidgetQueryKey
+            : keys.publicWidgetQueryKey;
+        queryClient.setQueryData(widgetQueryKey.value, () => data);
+    },
+    onError: (e) => {
+        showErrorMessage(e.message, e);
+        ErrorHandler.handleError(e);
+    },
+});
 
 /* Event */
 const handleClickContinue = async () => {
     if (widgetGenerateState.overlayStep === 1) {
-        if (widgetGenerateState.widget?.data_table_id !== widgetGenerateState.selectedDataTableId) {
+        if (widget.value?.data_table_id !== widgetGenerateState.selectedDataTableId) {
             const _updateParams: PublicWidgetUpdateParameters|PrivateWidgetUpdateParameters = {
                 widget_id: widgetGenerateState.widgetId,
                 data_table_id: widgetGenerateState.selectedDataTableId,
             };
-            if (widgetGenerateState.widget?.state === 'ACTIVE') {
+            if (widget.value?.state === 'ACTIVE') {
                 _updateParams.state = 'INACTIVE';
             }
-            if (widgetGenerateState.widget?.options?.widgetHeader) {
+            if (widget.value?.options?.widgetHeader) {
                 _updateParams.options = {
-                    widgetHeader: widgetGenerateState.widget?.options?.widgetHeader,
+                    widgetHeader: widget.value?.options?.widgetHeader,
                 };
             }
-            await widgetGenerateStore.updateWidget(_updateParams);
+            const sanitizedOptions = sanitizeWidgetOptions(_updateParams.options ?? {}, _updateParams.widget_type ?? 'table');
+            await updateWidget({
+                ..._updateParams,
+                options: sanitizedOptions,
+            });
         }
         widgetGenerateStore.setOverlayStep(2);
         return;
     }
-    if (widgetGenerateState.widget?.state === 'CREATING' || widgetGenerateState.widget?.state === 'INACTIVE' || state.isWidgetOptionsChanged) {
+    if (widget.value?.state === 'CREATING' || widget.value?.state === 'INACTIVE' || state.isWidgetOptionsChanged) {
         state.warningModalVisible = true;
         return;
     }
     widgetGenerateStore.setShowOverlay(false);
 };
 const handleCloseOverlay = (value: boolean) => {
-    if (!value && (widgetGenerateState.widget?.state === 'CREATING' || widgetGenerateState.widget?.state === 'INACTIVE' || state.isWidgetOptionsChanged)) {
+    if (!value && (widget.value?.state === 'CREATING' || widget.value?.state === 'INACTIVE' || state.isWidgetOptionsChanged)) {
         state.warningModalVisible = true;
         return;
     }
@@ -127,7 +159,7 @@ const handleCloseWarningModal = () => {
 };
 const handleConfirmWarningModal = async () => {
     state.warningModalVisible = false;
-    if (widgetGenerateState.widget?.state === 'CREATING') await deleteWidget(widgetGenerateState.widgetId);
+    if (widget.value?.state === 'CREATING') await deleteWidget(widgetGenerateState.widgetId);
     widgetGenerateStore.reset();
     widgetGenerateStore.setShowOverlay(false);
 };
@@ -144,11 +176,9 @@ const handleClickGuideLink = () => { window.open(state.guideLink, '_blank'); };
 
 /* Watcher */
 watch(() => widgetGenerateState.showOverlay, async (val) => {
-    if (!val && widgetGenerateState.widget?.state !== 'CREATING') {
+    if (!val && widget.value?.state !== 'CREATING') {
         widgetGenerateStore.setLatestWidgetId(widgetGenerateState.widgetId);
         widgetGenerateStore.reset();
-    } else if (val && widgetGenerateState.overlayType !== 'ADD') {
-        await widgetGenerateStore.listDataTable();
     }
 });
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
index a672480280..a4f8a4b889 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
@@ -8,33 +8,30 @@ import { useQuery } from '@tanstack/vue-query';
 import bytes from 'bytes';
 import { sortBy } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PToolbox, PI, PSelectDropdown, PEmpty, PSpinner,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/type';
 import { byteFormatter, numberFormatter } from '@cloudforet/utils';
 
-import type { Page } from '@/schema/_common/type';
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { DataTableLoadParameters } from '@/schema/dashboard/public-data-table/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { Page } from '@/api-clients/_common/schema/type';
+import type { DataTableLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { DataTableLoadParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/load';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 import { i18n } from '@/translations';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { REFERENCE_FIELD_MAP, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
-import type { WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
 import type { DataInfo } from '@/common/modules/widgets/types/widget-model';
 
 import { gray, white } from '@/styles/colors';
@@ -42,6 +39,7 @@ import { gray, white } from '@/styles/colors';
 import { SIZE_UNITS } from '@/services/asset-inventory-v1/constants/asset-analysis-constant';
 import { GRANULARITY } from '@/services/cost-explorer/constants/cost-explorer-constant';
 import type { Granularity } from '@/services/cost-explorer/types/cost-explorer-query-type';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
@@ -58,14 +56,24 @@ type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
-const widgetGenerateGetters = widgetGenerateStore.getters;
 const allReferenceStore = useAllReferenceStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailGetters = dashboardDetailStore.getters;
+const dashboardDetailState = dashboardDetailStore.state;
+
+/* Query */
+const {
+    dataTableList,
+    api,
+    keys,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 
 const storeState = reactive({
     selectedDataTableId: computed<string|undefined>(() => widgetGenerateState.selectedDataTableId),
-    selectedDataTable: computed<DataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
     dataTableLoadFailed: computed(() => widgetGenerateState.dataTableLoadFailed),
     // reference
     project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
@@ -75,13 +83,15 @@ const storeState = reactive({
 });
 
 const state = reactive({
-    data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
-    labelFields: computed<string[]>(() => (dataTableLoading.value === true ? [] : sortWidgetTableFields(Object.keys(storeState.selectedDataTable?.labels_info ?? {})))),
-    dataFields: computed<string[]>(() => (dataTableLoading.value === true ? [] : sortWidgetTableFields(Object.keys(storeState.selectedDataTable?.data_info ?? {})))),
-    dataInfo: computed<DataInfo|undefined>(() => storeState.selectedDataTable?.data_info),
-    isPivot: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
-    pivotColumn: computed<string|undefined>(() => storeState.selectedDataTable?.options?.[DATA_TABLE_OPERATOR.PIVOT]?.fields?.column),
-    isAutoTypeColumnPivot: computed<boolean>(() => state.isPivot && !!storeState.selectedDataTable?.options?.[DATA_TABLE_OPERATOR.PIVOT]?.limit),
+    isPrivate: computed(() => storeState.selectedDataTableId?.startsWith('private')),
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === storeState.selectedDataTableId)),
+    data: computed<DataTableLoadResponse | null>(() => queryResult?.data?.value || null),
+    labelFields: computed<string[]>(() => (dataTableLoading.value === true ? [] : sortWidgetTableFields(Object.keys(state.selectedDataTable?.labels_info ?? {})))),
+    dataFields: computed<string[]>(() => (dataTableLoading.value === true ? [] : sortWidgetTableFields(Object.keys(state.selectedDataTable?.data_info ?? {})))),
+    dataInfo: computed<DataInfo|undefined>(() => state.selectedDataTable?.data_info),
+    isPivot: computed<boolean>(() => state.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
+    pivotColumn: computed<string|undefined>(() => state.selectedDataTable?.options?.[DATA_TABLE_OPERATOR.PIVOT]?.fields?.column),
+    isAutoTypeColumnPivot: computed<boolean>(() => state.isPivot && !!state.selectedDataTable?.options?.[DATA_TABLE_OPERATOR.PIVOT]?.limit),
     // pivotSortKeys: computed<string[]>(() => (state.isPivot ? storeState.selectedDataTable?.sort_keys ?? [] : [])),
     fields: computed<PreviewTableField[]>(() => {
         if (!storeState.selectedDataTableId || !state.data?.results?.length) {
@@ -133,7 +143,7 @@ const state = reactive({
             ...dataFields,
         ];
     }),
-    isSeparatedDataTable: computed(() => !Object.keys(storeState.selectedDataTable?.labels_info ?? {}).includes('Date')),
+    isSeparatedDataTable: computed(() => !Object.keys(state.selectedDataTable?.labels_info ?? {}).includes('Date')),
     sortBy: [] as { key: string; desc: boolean }[],
     granularityItems: computed<MenuItem[]>(() => ([
         {
@@ -168,7 +178,7 @@ const state = reactive({
 });
 
 const emptyState = reactive({
-    isUnavailableDataTable: computed(() => storeState.selectedDataTable?.state === 'UNAVAILABLE'),
+    isUnavailableDataTable: computed(() => state.selectedDataTable?.state === 'UNAVAILABLE'),
     title: computed(() => {
         if (!storeState.selectedDataTableId) return i18n.t('COMMON.WIDGETS.PREVIEW_TABLE_EMPTY_TITLE');
         // if (storeState.dataTableLoadFailed && emptyState.isUnavailableDataTable) return i18n.t('DASHBOARDS.WIDGET.DATA_TABLE_LOAD_INVALID_GLOBAL_VARIALBE_TITLE');
@@ -250,25 +260,25 @@ const getSortIcon = (field: PreviewTableField) => {
 //     return `( ${value} ${key} )`;
 // };
 
-const fetchWidgetData = async (params: DataTableLoadParameters): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = storeState.selectedDataTableId?.startsWith('private')
-        ? SpaceConnector.clientV2.dashboard.privateDataTable.load<DataTableLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicDataTable.load<DataTableLoadParameters, WidgetLoadResponse>;
+const fetchWidgetData = async (params: DataTableLoadParameters): Promise<DataTableLoadResponse> => {
+    const defaultFetcher = state.isPrivate
+        ? api.privateDataTableAPI.load
+        : api.publicDataTableAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const queryKey = computed(() => [
-    'data-table-load',
+    ...(state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value),
     storeState.selectedDataTableId,
     {
         granularity: state.selectedGranularity,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(storeState.selectedDataTable?.options),
-        dataTables: normalizeAndSerializeDataTableOptions((widgetGenerateState.dataTables || []).map((d) => d?.options || {})),
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.selectedDataTable?.options),
+        // dataTables: normalizeAndSerializeDataTableOptions((dataTableList.value || []).map((d) => d?.options || {})),
         sortBy: state.sortBy,
         thisPage: state.thisPage,
         pageSize: state.pageSize,
-        vars: normalizeAndSerializeVars(dashboardDetailGetters.dashboardInfo?.vars ?? {}),
+        vars: normalizeAndSerializeVars(dashboard.value?.vars ?? {}),
     },
 ]);
 
@@ -279,9 +289,9 @@ const queryResult = useQuery({
         granularity: state.selectedGranularity,
         sort: state.sortBy,
         page: state.page,
-        vars: dashboardDetailGetters.dashboardInfo?.vars,
+        vars: dashboard.value?.vars,
     }),
-    enabled: computed(() => storeState.selectedDataTableId !== undefined && storeState.selectedDataTable !== undefined),
+    enabled: computed(() => storeState.selectedDataTableId !== undefined && state.selectedDataTable !== undefined),
     staleTime: WIDGET_LOAD_STALE_TIME,
     retry: 2,
 });
@@ -291,7 +301,7 @@ const isError = computed<boolean>(() => queryResult.isError.value);
 const errorMessage = computed<string>(() => queryResult.error?.value?.message);
 
 
-watch([() => storeState.selectedDataTableId, () => storeState.selectedDataTable], async ([dataTableId]) => {
+watch([() => storeState.selectedDataTableId, () => state.selectedDataTable], async ([dataTableId]) => {
     if (!dataTableId) return;
     state.thisPage = 1;
     state.sortBy = [];
@@ -327,7 +337,7 @@ onUnmounted(() => {
                                  width="1rem"
                                  height="1rem"
                             />
-                            <span>{{ storeState.selectedDataTable?.name }}</span>
+                            <span>{{ state.selectedDataTable?.name }}</span>
                         </div>
                         <p-select-dropdown class="granularity-dropdown"
                                            :menu="state.granularityItems"
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue
index 31f82532e5..ad4a5faa58 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue
@@ -9,8 +9,8 @@ import {
     PI, PTooltip, PButton,
 } from '@cloudforet/mirinae';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -19,25 +19,32 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFormDataSourcePopover from '@/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue';
 import WidgetFormDataTableCard from '@/common/modules/widgets/_components/WidgetFormDataTableCard.vue';
 import WidgetFormOverlayPreviewTable from '@/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 
 import { violet } from '@/styles/colors';
 
+
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 const widgetGenerateGetters = widgetGenerateStore.getters;
 
 const dataTableContentsRef = ref<HTMLElement|null>(null);
-const dataTableCardRef = ref<WidgetFormDataTableCard[]>([]);
+const dataTableCardRef = ref<typeof WidgetFormDataTableCard[]>([]);
+
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
 
 const storeState = reactive({
-    dataTables: computed<Partial<PublicDataTableModel|PrivateDataTableModel>[]>(() => widgetGenerateState.dataTables),
-    selectedDataTable: computed(() => widgetGenerateGetters.selectedDataTable),
     allDataTableInvalid: computed(() => widgetGenerateGetters.allDataTableInvalid),
 });
 
 const displayState = reactive({
-    dataTablesSortedByCreatedAt: computed<Partial<PublicDataTableModel|PrivateDataTableModel>[]>(() => orderBy(storeState.dataTables ?? [], ['created_at'], ['asc'])),
+    dataTablesSortedByCreatedAt: computed<Partial<PublicDataTableModel|PrivateDataTableModel>[]>(() => orderBy(dataTableList.value, ['created_at'], ['asc'])),
     dataTableAreaOpen: true,
     tableAreaHeight: (dataTableContentsRef.value?.clientHeight || 1000) / 4.5,
     minHeight: 32,
@@ -149,7 +156,7 @@ onMounted(async () => {
                                                      loading-card
                         />
                         <widget-form-data-source-popover />
-                        <div v-if="!storeState.dataTables.length"
+                        <div v-if="!dataTableList.length"
                              class="empty-data-table-guide"
                         >
                             <p class="title">
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
index 0ff096e3ec..f4d4bf4a5f 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
@@ -3,6 +3,7 @@ import {
     computed, onBeforeMount, onUnmounted, reactive, ref, watch,
 } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
 import { cloneDeep, isEqual } from 'lodash';
 
 import {
@@ -11,24 +12,30 @@ import {
 
 import type {
     DashboardOptions, DashboardVars,
-} from '@/schema/dashboard/_types/dashboard-type';
+} from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFormOverlayStep2WidgetForm
     from '@/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetOptionsComplexValidation } from '@/common/modules/widgets/_composables/use-widget-options-complex-validation';
 import { WIDGET_WIDTH_RANGE_LIST } from '@/common/modules/widgets/_constants/widget-display-constant';
 import { getWidgetComponent } from '@/common/modules/widgets/_helpers/widget-component-helper';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
+import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import WidgetFieldValueManager from '@/common/modules/widgets/_widget-field-value-manager';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { WidgetType } from '@/common/modules/widgets/types/widget-model';
 
 import DashboardToolsetDateDropdown from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue';
 import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import {
     useAllReferenceTypeInfoStore,
@@ -36,13 +43,12 @@ import {
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
+
 const overlayWidgetRef = ref<HTMLElement|null>(null);
-const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
 const dashboardDetailGetters = dashboardDetailStore.getters;
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
 const widgetGenerateState = widgetGenerateStore.state;
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
 const appContextStore = useAppContextStore();
@@ -53,23 +59,44 @@ const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 
+/* Query */
+const {
+    dashboard,
+    keys,
+    fetcher,
+    queryClient,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
+const {
+    widget,
+    dataTableList,
+    keys: widgetKeys,
+    fetcher: wigetFetcher,
+    widgetLoading,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 let fieldManager: WidgetFieldValueManager;
 
 const state = reactive({
+    isPrivate: computed<boolean>(() => !!widgetGenerateState.widgetId?.startsWith('private')),
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
     mounted: false,
     fieldManager: computed<WidgetFieldValueManager>(() => {
         if (!fieldManager) {
             fieldManager = new WidgetFieldValueManager(
                 getWidgetConfig(widgetGenerateState.selectedWidgetName),
-                widgetGenerateGetters.selectedDataTable,
-                cloneDeep(widgetGenerateState.widget?.options) || {},
+                state.selectedDataTable,
+                cloneDeep(widget.value?.options) || {},
             );
         }
         return fieldManager;
     }),
     value: computed(() => state.fieldManager?.data?.granularity),
     widgetConfig: computed(() => getWidgetConfig(widgetGenerateState.selectedWidgetName)),
-    selectedWidgetType: widgetGenerateState.widget?.widget_type as WidgetType,
+    selectedWidgetType: computed<WidgetType|undefined>(() => widget.value?.widget_type),
     allReferenceTypeInfo: computed<AllReferenceTypeInfo>(() => allReferenceTypeInfoStore.getters.allReferenceTypeInfo),
     widgetSizeOptions: [
         { label: i18n.t('COMMON.WIDGETS.FULL'), name: 'FULL' },
@@ -79,7 +106,7 @@ const state = reactive({
     widgetSize: computed(() => {
         if (widgetGenerateState.overlayType === 'EXPAND') return 'full';
         if (state.selectedWidgetSize === 'FULL') return 'full';
-        return widgetGenerateState.widget?.size;
+        return widget.value?.size;
     }),
     widgetWidth: computed(() => {
         if (state.widgetSize === 'full' || state.selectedWidgetSize === 'FULL' || widgetGenerateState.overlayType === 'EXPAND') {
@@ -88,62 +115,116 @@ const state = reactive({
         return WIDGET_WIDTH_RANGE_LIST[state.widgetSize]?.[0] || 0;
     }),
     isWidgetFieldChanged: computed<boolean>(() => {
-        const _isOptionsChanged = !isEqual(cloneDeep(state.fieldManager.data), widgetGenerateState.widget?.options);
-        const _isTypeChanged = widgetGenerateState.selectedWidgetName !== widgetGenerateState.widget?.widget_type;
+        const _isOptionsChanged = !isEqual(cloneDeep(state.fieldManager.data), widget.value?.options);
+        const _isTypeChanged = widgetGenerateState.selectedWidgetName !== widget.value?.widget_type;
         emit('watch-options-changed', _isOptionsChanged || _isTypeChanged);
         return _isOptionsChanged || _isTypeChanged;
     }),
     disableApplyButton: computed<boolean>(() => {
         if (!state.fieldManager?.validateAll()) return true;
-        const _isWidgetInactive = widgetGenerateState.widget?.state === 'INACTIVE';
+        const _isWidgetInactive = widget.value?.state === 'INACTIVE';
         return (!_isWidgetInactive && !state.isWidgetFieldChanged) || widgetOptionsInvalid.value;
     }),
     //
     varsSnapshot: {} as DashboardVars,
     dashboardOptionsSnapshot: {} as DashboardOptions,
-    isSharedDashboard: computed<boolean>(() => !!dashboardDetailGetters.dashboardInfo?.shared && !storeState.isAdminMode),
+    isSharedDashboard: computed<boolean>(() => !!dashboard.value?.shared && !storeState.isAdminMode),
 });
 
 const {
     invalid: widgetOptionsInvalid,
     invalidText: widgetOptionsInvalidText,
 } = useWidgetOptionsComplexValidation({
-    optionValueMap: computed(() => widgetGenerateState.widgetFormValueMap),
+    optionValueMap: computed(() => widget.value?.options ?? {}),
     widgetConfig: computed(() => state.widgetConfig),
 });
 
 /* Api */
+const { mutateAsync: updateWidgetMutate } = useMutation({
+    mutationFn: wigetFetcher.updateWidgetFn,
+    onSuccess: (data) => {
+        const widgetQueryKey = state.isPrivate
+            ? widgetKeys.privateWidgetQueryKey
+            : widgetKeys.publicWidgetQueryKey;
+        queryClient.setQueryData(widgetQueryKey.value, () => data);
+    },
+    onError: (e) => {
+        showErrorMessage(e.message, e);
+        ErrorHandler.handleError(e);
+    },
+});
 const updateWidget = async () => {
-    const _isCreating = widgetGenerateState.widget?.state === 'CREATING';
-    const widget = await widgetGenerateStore.updateWidget({
+    if (!widgetGenerateState.widgetId) return;
+    const _isCreating = widget.value?.state === 'CREATING';
+    const sanitizedOptions = sanitizeWidgetOptions(state.fieldManager.data, widgetGenerateState.selectedWidgetName);
+    const result = await updateWidgetMutate({
         widget_id: widgetGenerateState.widgetId,
         size: widgetGenerateState.size,
         widget_type: widgetGenerateState.selectedWidgetName,
         data_table_id: widgetGenerateState.selectedDataTableId,
-        options: state.fieldManager.data,
+        options: sanitizedOptions,
         state: 'ACTIVE',
     });
-    if (widget) {
-        state.fieldManager.updateOriginData(cloneDeep(widget.options));
+    if (result) {
+        state.fieldManager.updateOriginData(cloneDeep(result.options));
     }
     if (_isCreating) {
-        await dashboardStore.addWidgetToDashboard(dashboardDetailState.dashboardId || '', widgetGenerateState.widgetId);
+        const _layouts = cloneDeep(dashboard.value?.layouts || []);
+        if (_layouts.length) {
+            const _targetLayout = _layouts[0];
+            if (_targetLayout.widgets) {
+                _targetLayout.widgets.push(widgetGenerateState.widgetId);
+            } else {
+                _targetLayout.widgets = [widgetGenerateState.widgetId];
+            }
+            _layouts[0] = _targetLayout;
+        } else {
+            _layouts.push({
+                widgets: [widgetGenerateState.widgetId],
+            });
+        }
+        updateDashboard({
+            dashboard_id: dashboardDetailState.dashboardId,
+            layouts: _layouts,
+        });
     }
 };
 
+const { mutate: updateDashboard } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: () => {
+            const dashboardQueryKey = state.isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+        },
+    },
+);
 
 /* Util */
 const initSnapshot = () => {
-    state.varsSnapshot = cloneDeep(dashboardDetailState.vars);
+    state.varsSnapshot = cloneDeep(dashboard.value?.vars || {});
     state.dashboardOptionsSnapshot = cloneDeep(dashboardDetailState.options);
 };
 const reset = () => {
     dashboardDetailStore.setVars(state.varsSnapshot);
     dashboardDetailStore.setOptions(state.dashboardOptionsSnapshot);
 };
-const loadOverlayWidget = () => {
-    overlayWidgetRef?.value?.loadWidget();
-};
+// const loadOverlayWidget = async () => {
+//     await queryClient.invalidateQueries({
+//         queryKey: [
+//             ...(state.isPrivate ? widgetKeys.privateWidgetLoadQueryKey.value : widgetKeys.publicWidgetLoadQueryKey.value),
+//             dashboardDetailState.dashboardId,
+//             widgetGenerateState.widgetId,
+//         ],
+//     });
+//     await queryClient.invalidateQueries({
+//         queryKey: [
+//             ...(state.isPrivate ? widgetKeys.privateWidgetLoadSumQueryKey.value : widgetKeys.publicWidgetLoadSumQueryKey.value),
+//             dashboardDetailState.dashboardId,
+//             widgetGenerateState.widgetId,
+//         ],
+//     });
+// };
 
 /* Event */
 const handleChangeWidgetSize = (widgetSize: string) => {
@@ -152,7 +233,7 @@ const handleChangeWidgetSize = (widgetSize: string) => {
 const handleUpdateWidgetOptions = async () => {
     if (state.selectedWidgetType === widgetGenerateState.selectedWidgetName) {
         await updateWidget();
-        loadOverlayWidget();
+        // await loadOverlayWidget();
     } else {
         state.selectedWidgetType = widgetGenerateState.selectedWidgetName;
         await updateWidget();
@@ -167,7 +248,7 @@ const handleEditWidget = () => {
 };
 
 /* Watcher */
-watch(() => widgetGenerateState.widget?.size, (widgetSize) => {
+watch(() => widget.value?.size, (widgetSize) => {
     if (widgetSize === 'sm') {
         state.selectedWidgetSize = 'ACTUAL';
     } else {
@@ -176,17 +257,13 @@ watch(() => widgetGenerateState.widget?.size, (widgetSize) => {
 }, { immediate: true });
 watch(() => state.mounted, async (mounted) => {
     if (mounted) {
-        if (widgetGenerateState.widget?.state === 'CREATING') {
+        if (widget.value?.state === 'CREATING') {
             await updateWidget();
         }
-        loadOverlayWidget();
+        // await loadOverlayWidget();
         state.mounted = false;
     }
 });
-// watch(() => dashboardDetailState.vars, async () => {
-//     await nextTick();
-//     loadOverlayWidget();
-// });
 
 onBeforeMount(() => {
     initSnapshot();
@@ -213,10 +290,10 @@ onUnmounted(() => {
                         />
                         <dashboard-variables-v2 disable-save-button
                                                 widget-mode
-                                                :is-project-dashboard="!!dashboardDetailState.projectId"
+                                                :is-project-dashboard="!!dashboard?.project_id"
                         />
                     </div>
-                    <p-button v-if="!state.isSharedDashboard && !dashboardDetailState.projectId && widgetGenerateState.overlayType === 'EXPAND'"
+                    <p-button v-if="!state.isSharedDashboard && !dashboard?.project_id && widgetGenerateState.overlayType === 'EXPAND'"
                               style-type="tertiary"
                               icon-left="ic_edit"
                               class="edit-button"
@@ -239,22 +316,24 @@ onUnmounted(() => {
                     </p-select-button>
                 </div>
             </div>
-            <div class="widget-wrapper"
+            <div v-if="!widgetLoading"
+                 class="widget-wrapper"
                  :class="{ 'full-size': state.selectedWidgetSize === 'FULL' || widgetGenerateState.overlayType === 'EXPAND' }"
             >
                 <component :is="getWidgetComponent(state.selectedWidgetType)"
                            :key="widgetGenerateState.selectedDataTableId"
                            ref="overlayWidgetRef"
-                           :widget-name="widgetGenerateState.widget.widget_type"
-                           :widget-id="widgetGenerateState.widget.widget_id"
-                           :widget-state="widgetGenerateState.widget.state"
+                           :widget-name="widget?.widget_type"
+                           :widget-id="widget?.widget_id"
+                           :widget-state="widget?.state"
                            :data-table-id="widgetGenerateState.selectedDataTableId"
                            :size="state.widgetSize"
                            :width="state.widgetWidth"
-                           :widget-options="widgetGenerateState.widget.options"
-                           :data-tables="widgetGenerateState.dataTables"
+                           :widget-options="widget?.options"
+                           :data-tables="dataTableList"
                            :dashboard-options="dashboardDetailState.options"
                            :dashboard-vars="dashboardDetailGetters.refinedVars"
+                           :dashboard-id="dashboardDetailState.dashboardId"
                            :all-reference-type-info="state.allReferenceTypeInfo"
                            disable-refresh-on-loading
                            mode="overlay"
@@ -262,7 +341,7 @@ onUnmounted(() => {
                 />
             </div>
         </div>
-        <widget-form-overlay-step2-widget-form v-if="widgetGenerateState.overlayType !== 'EXPAND' && !!state.fieldManager"
+        <widget-form-overlay-step2-widget-form v-if="widgetGenerateState.overlayType !== 'EXPAND' && !!state.fieldManager && !widgetLoading"
                                                :widget-validation-invalid="widgetOptionsInvalid"
                                                :widget-validation-invalid-text="widgetOptionsInvalidText"
                                                :field-manager="state.fieldManager"
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
index 6ccb7d9f58..cb8cbb803c 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
@@ -4,6 +4,7 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
+import { useMutation } from '@tanstack/vue-query';
 import { cloneDeep, sortBy } from 'lodash';
 
 import {
@@ -11,10 +12,14 @@ import {
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 
 import NewMark from '@/common/components/marks/NewMark.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_OPERATOR, DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import { WIDGET_COMPONENT_ICON_MAP } from '@/common/modules/widgets/_constants/widget-components-constant';
 import { CONSOLE_WIDGET_CONFIG } from '@/common/modules/widgets/_constants/widget-config-list-constant';
@@ -23,6 +28,7 @@ import {
     getWidgetFieldComponent,
 } from '@/common/modules/widgets/_helpers/widget-component-helper';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
+import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type WidgetFieldValueManager from '@/common/modules/widgets/_widget-field-value-manager';
 import WidgetHeaderField from '@/common/modules/widgets/_widget-fields/header/WidgetHeaderField.vue';
@@ -30,6 +36,8 @@ import WidgetHeaderField from '@/common/modules/widgets/_widget-fields/header/Wi
 import { gray, red } from '@/styles/colors';
 
 
+
+
 const FORM_TITLE_MAP = {
     DATE_CONFIG: 'DATE_CONFIG',
     WIDGET_HEADER: 'WIDGET_HEADER',
@@ -49,14 +57,25 @@ const props = defineProps<Props>();
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
-const widgetGenerateGetters = widgetGenerateStore.getters;
+
+/* Query */
+const {
+    dataTableList,
+    fetcher,
+    keys,
+    queryClient,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const state = reactive({
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
     chartTypeMenuItems: computed<MenuItem[]>(() => Object.values(CONSOLE_WIDGET_CONFIG).map((d) => ({
         name: d.widgetName,
         label: d.meta?.title || d.widgetName,
         icon: WIDGET_COMPONENT_ICON_MAP[d.widgetName ?? ''],
-        iconColor: UNSUPPORTED_CHARTS_IN_PIVOT.includes(d.widgetName) && widgetGenerateGetters.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT ? gray[300] : undefined,
-        disabled: UNSUPPORTED_CHARTS_IN_PIVOT.includes(d.widgetName) && widgetGenerateGetters.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT,
+        iconColor: UNSUPPORTED_CHARTS_IN_PIVOT.includes(d.widgetName) && state.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT ? gray[300] : undefined,
+        disabled: UNSUPPORTED_CHARTS_IN_PIVOT.includes(d.widgetName) && state.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT,
     }))),
     widgetConfig: computed(() => getWidgetConfig(widgetGenerateState.selectedWidgetName)),
     widgetConfigDependencies: computed<{[key:string]: string[]}>(() => state.widgetConfig.dependencies || {}),
@@ -80,25 +99,40 @@ const state = reactive({
         [FORM_TITLE_MAP.REQUIRED_FIELDS]: false,
         [FORM_TITLE_MAP.OPTIONAL_FIELDS]: false,
     },
-    selectableDataTableItems: computed(() => widgetGenerateState.dataTables.map((d) => ({
+    selectableDataTableItems: computed(() => dataTableList.value.map((d) => ({
         name: d.data_table_id,
         label: d.name,
         icon: d.data_type === DATA_TABLE_TYPE.TRANSFORMED ? 'ic_transform-data' : 'ic_service_data-sources',
     }))),
     selectedDataTableId: computed<string>(() => widgetGenerateState.selectedDataTableId),
-    selectedDataTable: computed<DataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
     errorModalCurrentType: undefined as 'default'|'geoMap'|undefined,
 });
 
-
+/* Api */
+const { mutateAsync: updateWidget } = useMutation({
+    mutationFn: fetcher.updateWidgetFn,
+    onSuccess: (data) => {
+        const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private')
+            ? keys.privateWidgetQueryKey
+            : keys.publicWidgetQueryKey;
+        queryClient.setQueryData(widgetQueryKey.value, () => data);
+    },
+    onError: (e) => {
+        showErrorMessage(e.message, e);
+        ErrorHandler.handleError(e);
+    },
+});
 /* Event */
 const handleSelectDataTable = async (dataTableId: string) => {
-    const selectedDataTable = widgetGenerateState.dataTables.find((d) => d.data_table_id === dataTableId);
+    const selectedDataTable = dataTableList.value.find((d) => d.data_table_id === dataTableId);
     if (!selectedDataTable) return;
     widgetGenerateStore.setSelectedDataTableId(dataTableId);
-    await widgetGenerateStore.updateWidget({
+    const sanitizedOptions = sanitizeWidgetOptions();
+    await updateWidget({
+        widget_id: widgetGenerateState.widgetId,
         data_table_id: dataTableId,
         state: 'INACTIVE',
+        options: sanitizedOptions,
     });
 
     props.fieldManager.updateDataTableAndOriginData(selectedDataTable, {});
@@ -123,7 +157,7 @@ const handleClickCollapsibleTitle = (collapsedTitle: string) => {
 /* Utils */
 const checkDefaultValidation = () => {
     const selectedChartType = widgetGenerateState.selectedWidgetName;
-    const selectedDataTable = widgetGenerateGetters.selectedDataTable ?? {};
+    const selectedDataTable = state.selectedDataTable ?? {};
     if (!selectedDataTable?.options) return;
     switch (selectedChartType) {
     case 'geoMap': {
@@ -156,7 +190,7 @@ const changeWidgetType = (widgetName: string) => {
 };
 
 onMounted(() => {
-    if (widgetGenerateGetters.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT && UNSUPPORTED_CHARTS_IN_PIVOT.includes(widgetGenerateState.selectedWidgetName)) {
+    if (state.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT && UNSUPPORTED_CHARTS_IN_PIVOT.includes(widgetGenerateState.selectedWidgetName)) {
         changeWidgetType('table');
     } else checkDefaultValidation();
 });
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFrame.vue b/apps/web/src/common/modules/widgets/_components/WidgetFrame.vue
index a8c10d12b5..0214240344 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFrame.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFrame.vue
@@ -10,8 +10,8 @@ import {
 import { POPOVER_TRIGGER } from '@cloudforet/mirinae/src/data-display/popover/type';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import { WIDGET_SIZE } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetSize } from '@/schema/dashboard/_types/widget-type';
+import { WIDGET_SIZE } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
 import { WIDGET_WIDTH_STR_MAP } from '@/common/modules/widgets/_constants/widget-display-constant';
diff --git a/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts b/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts
new file mode 100644
index 0000000000..7a83b1fc2f
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts
@@ -0,0 +1,160 @@
+import type { ComputedRef } from 'vue';
+import { computed, reactive } from 'vue';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { DATA_TABLE_OPERATOR, DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
+import type { DataTableModel, DataTableReference } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { ConcatOptions, DataTableOperator, JoinOptions } from '@/common/modules/widgets/types/widget-model';
+
+
+interface UseDataTableCascadeUpdateOptions {
+    widgetId: ComputedRef<string|undefined>;
+}
+
+interface UseDataTableCascadeUpdateReturn {
+    cascadeUpdateDataTable: (dataTableId: string) => Promise<void>;
+}
+
+export const useDataTableCascadeUpdate = ({ widgetId }: UseDataTableCascadeUpdateOptions): UseDataTableCascadeUpdateReturn => {
+    /* Query */
+    const {
+        dataTableList,
+        fetcher,
+        keys,
+        queryClient,
+    } = useWidgetFormQuery({
+        widgetId: computed(() => widgetId.value),
+    });
+
+    const _state = reactive({
+        isPrivate: computed(() => !!widgetId.value?.startsWith('private')),
+        dataTableReferenceMap: computed<Record<string, DataTableReference>>(() => {
+            const referenceMap = {} as Record<string, DataTableReference>;
+            const savedDataTables = dataTableList.value.filter((dataTable) => dataTable.data_table_id && !dataTable.data_table_id.startsWith('UNSAVED-')) as DataTableModel[];
+            const MULTIPE_DATA_TABLE_OPERATORS = [DATA_TABLE_OPERATOR.CONCAT, DATA_TABLE_OPERATOR.JOIN] as DataTableOperator[];
+            savedDataTables.forEach((dataTable) => {
+                if (!referenceMap[dataTable.data_table_id]) {
+                    referenceMap[dataTable.data_table_id] = _setIniitialDataTableReferenceProperty(dataTable.data_table_id);
+                }
+
+                if (dataTable.data_type === DATA_TABLE_TYPE.TRANSFORMED) {
+                    if (dataTable?.operator && MULTIPE_DATA_TABLE_OPERATORS.includes(dataTable?.operator)) {
+                        const [firstReferenceDataTableId, secondReferenceDataTableId] = (dataTable.options[dataTable?.operator] as ConcatOptions|JoinOptions)?.data_tables ?? [];
+                        if (!referenceMap[firstReferenceDataTableId]) {
+                            referenceMap[firstReferenceDataTableId] = _setIniitialDataTableReferenceProperty(firstReferenceDataTableId);
+                        }
+                        if (!referenceMap[secondReferenceDataTableId]) {
+                            referenceMap[secondReferenceDataTableId] = _setIniitialDataTableReferenceProperty(secondReferenceDataTableId);
+                        }
+                        referenceMap[firstReferenceDataTableId] = {
+                            ...referenceMap[firstReferenceDataTableId],
+                            children: [
+                                ...referenceMap[firstReferenceDataTableId].children,
+                                dataTable.data_table_id,
+                            ],
+                        };
+                        referenceMap[secondReferenceDataTableId] = {
+                            ...referenceMap[secondReferenceDataTableId],
+                            children: [
+                                ...referenceMap[secondReferenceDataTableId].children,
+                                dataTable.data_table_id,
+                            ],
+                        };
+                        referenceMap[dataTable.data_table_id] = {
+                            ...referenceMap[dataTable.data_table_id],
+                            parents: [
+                                firstReferenceDataTableId,
+                                secondReferenceDataTableId,
+                            ],
+                        };
+                    } else {
+                        const referenceDataTableId = dataTable.options[dataTable?.operator]?.data_table_id;
+                        if (!referenceMap[referenceDataTableId]) {
+                            referenceMap[referenceDataTableId] = _setIniitialDataTableReferenceProperty(referenceDataTableId);
+                        }
+                        referenceMap[referenceDataTableId] = {
+                            ...referenceMap[referenceDataTableId],
+                            children: [
+                                ...referenceMap[referenceDataTableId].children,
+                                dataTable.data_table_id,
+                            ],
+                        };
+                        referenceMap[dataTable.data_table_id] = {
+                            ...referenceMap[dataTable.data_table_id],
+                            parents: [referenceDataTableId],
+                        };
+                    }
+                }
+            });
+            return referenceMap;
+        }),
+    });
+
+    const _setIniitialDataTableReferenceProperty = (dataTableId: string): DataTableReference => ({
+        data_table_id: dataTableId,
+        parents: [],
+        children: [],
+    });
+    const _invalidateLoadQueries = async (data: DataTableModel) => {
+        await queryClient.invalidateQueries({
+            queryKey: [
+                ...(_state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value),
+                data.data_table_id,
+            ],
+        });
+        /*
+        * Reference cascade updating do not affect the widget load query
+        * Because DataTable is Change, not Widget's selected DataTable
+        *  */
+        // await queryClient.invalidateQueries({
+        //     queryKey: [
+        //         ...(_state.isPrivate ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+        //         dashboardId.value,
+        //         widgetId.value,
+        //     ],
+        // });
+        // await queryClient.invalidateQueries({
+        //     queryKey: [
+        //         ...(_state.isPrivate ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
+        //         dashboardId.value,
+        //         widgetId.value,
+        //     ],
+        // });
+    };
+
+    const cascadeUpdateDataTable = async (dataTableId: string) => {
+        const children = _state.dataTableReferenceMap[dataTableId].children;
+        return children.reduce((chain, childId) => chain.then(async () => {
+            const currentDataTable = dataTableList.value.find(
+                (_dataTable) => _dataTable.data_table_id === childId,
+            ) as DataTableModel;
+
+            const result = await fetcher.updateDataTableFn({
+                data_table_id: childId,
+                name: currentDataTable?.name,
+                options: {
+                    ...(currentDataTable?.options ?? {}),
+                },
+            });
+            const dataTableListQueryKey = _state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+            await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<DataTableModel>) => {
+                if (oldData.results) {
+                    return {
+                        ...oldData,
+                        results: oldData.results.map((item) => (item.data_table_id === result.data_table_id ? result : item)),
+                    };
+                }
+                return oldData;
+            });
+            await _invalidateLoadQueries(result);
+
+            return cascadeUpdateDataTable(childId);
+        }), Promise.resolve());
+    };
+
+    return {
+        cascadeUpdateDataTable,
+    };
+};
diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts
new file mode 100644
index 0000000000..e5abff7f54
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts
@@ -0,0 +1,194 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import type { QueryClient, QueryKey } from '@tanstack/vue-query';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+
+import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type';
+import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api';
+import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
+import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api';
+import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update';
+import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
+
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
+
+const DEFAULT_LIST_DATA = { results: [] };
+// const DEFAULT_LOAD_DATA = { results: {}, labels_info: {}, data_info: {} };
+const STALE_TIME = 1000 * 60 * 5;
+
+interface UseWidgetFormQueryOptions {
+    widgetId?: ComputedRef<string|undefined>;
+    preventLoad?: boolean;
+}
+
+interface UseWidgetFormQueryReturn {
+    widget: ComputedRef<WidgetModel|undefined>;
+    dataTableList: ComputedRef<DataTableModel[]>;
+    dataTableListLoading: ComputedRef<boolean>;
+    widgetLoading: ComputedRef<boolean>;
+    keys: {
+        publicWidgetQueryKey: ComputedRef<QueryKey>;
+        privateWidgetQueryKey: ComputedRef<QueryKey>;
+        publicWidgetLoadQueryKey: ComputedRef<QueryKey>;
+        privateWidgetLoadQueryKey: ComputedRef<QueryKey>;
+        publicWidgetLoadSumQueryKey: ComputedRef<QueryKey>;
+        privateWidgetLoadSumQueryKey: ComputedRef<QueryKey>;
+        publicDataTableListQueryKey: ComputedRef<QueryKey>;
+        privateDataTableListQueryKey: ComputedRef<QueryKey>;
+        publicDataTableLoadQueryKey: ComputedRef<QueryKey>;
+        privateDataTableLoadQueryKey: ComputedRef<QueryKey>;
+    };
+    api: {
+        publicWidgetAPI: ReturnType<typeof usePublicWidgetApi>['publicWidgetAPI'];
+        privateWidgetAPI: ReturnType<typeof usePrivateWidgetApi>['privateWidgetAPI'];
+        publicDataTableAPI: ReturnType<typeof usePublicDataTableApi>['publicDataTableAPI'];
+        privateDataTableAPI: ReturnType<typeof usePrivateDataTableApi>['privateDataTableAPI'];
+    };
+    fetcher: {
+        updateDataTableFn: (params: DataTableUpdateParameters) => Promise<DataTableModel>;
+        updateWidgetFn: (params: WidgetUpdateParams) => Promise<WidgetModel>;
+    };
+    queryClient: QueryClient;
+}
+
+export const useWidgetFormQuery = ({
+    widgetId,
+    preventLoad = false,
+}: UseWidgetFormQueryOptions): UseWidgetFormQueryReturn => {
+    const {
+        publicWidgetAPI,
+        publicWidgetQueryKey,
+        publicWidgetLoadQueryKey,
+        publicWidgetLoadSumQueryKey,
+    } = usePublicWidgetApi();
+    const {
+        privateWidgetAPI,
+        privateWidgetQueryKey,
+        privateWidgetLoadQueryKey,
+        privateWidgetLoadSumQueryKey,
+    } = usePrivateWidgetApi();
+    const {
+        publicDataTableAPI,
+        publicDataTableListQueryKey,
+        publicDataTableLoadQueryKey,
+    } = usePublicDataTableApi();
+    const {
+        privateDataTableAPI,
+        privateDataTableListQueryKey,
+        privateDataTableLoadQueryKey,
+    } = usePrivateDataTableApi();
+    const queryClient = useQueryClient();
+
+    const isPrivate = computed(() => !!widgetId?.value?.startsWith('private'));
+
+    /* Query Keys */
+    const _publicWidgetQueryKey = computed(() => [
+        ...publicWidgetQueryKey.value,
+        widgetId?.value,
+    ]);
+    const _privateWidgetQueryKey = computed(() => [
+        ...privateWidgetQueryKey.value,
+        widgetId?.value,
+    ]);
+    const _publicDataTableListQueryKey = computed(() => [
+        ...publicDataTableListQueryKey.value,
+        widgetId?.value,
+    ]);
+    const _privateDataTableListQueryKey = computed(() => [
+        ...privateDataTableListQueryKey.value,
+        widgetId?.value,
+    ]);
+
+    /* Querys */
+    const publicWidgetQuery = useQuery({
+        queryKey: _publicWidgetQueryKey,
+        queryFn: () => publicWidgetAPI.get({
+            widget_id: widgetId?.value as string,
+        }),
+        enabled: computed(() => !!widgetId?.value && !isPrivate.value && !preventLoad),
+        staleTime: STALE_TIME,
+    });
+    const privateWidgetQuery = useQuery({
+        queryKey: _privateWidgetQueryKey,
+        queryFn: () => privateWidgetAPI.get({
+            widget_id: widgetId?.value as string,
+        }),
+        enabled: computed(() => !!widgetId?.value && isPrivate.value && !preventLoad),
+        staleTime: STALE_TIME,
+    });
+    const publicDataTableListQuery = useQuery({
+        queryKey: _publicDataTableListQueryKey,
+        queryFn: () => publicDataTableAPI.list({
+            widget_id: widgetId?.value as string,
+        }),
+        select: (data) => data?.results || [],
+        enabled: computed(() => !!widgetId?.value && !isPrivate.value && !preventLoad),
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+    });
+    const privateDataTableListQuery = useQuery({
+        queryKey: _privateDataTableListQueryKey,
+        queryFn: () => privateDataTableAPI.list({
+            widget_id: widgetId?.value as string,
+        }),
+        select: (data) => data?.results || [],
+        enabled: computed(() => !!widgetId?.value && isPrivate.value && !preventLoad),
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+    });
+
+    /* Fetchers */
+    const updateDataTableFn = (params: DataTableUpdateParameters): Promise<DataTableModel> => {
+        if (isPrivate.value) {
+            return privateDataTableAPI.update(params);
+        }
+        return publicDataTableAPI.update(params);
+    };
+    const updateWidgetFn = (params: WidgetUpdateParams): Promise<WidgetModel> => {
+        if (isPrivate.value) {
+            return privateWidgetAPI.update(params);
+        }
+        return publicWidgetAPI.update(params);
+    };
+
+    /* State */
+    const dataTableListLoading = computed<boolean>(() => (isPrivate.value
+        ? privateDataTableListQuery.isFetching.value
+        : publicDataTableListQuery.isFetching.value));
+    const widgetLoading = computed<boolean>(() => (isPrivate.value
+        ? privateWidgetQuery.isFetching.value
+        : publicWidgetQuery.isFetching.value));
+
+    return {
+        widget: computed(() => (isPrivate.value ? privateWidgetQuery.data.value : publicWidgetQuery.data.value)),
+        dataTableList: computed(() => (isPrivate.value ? privateDataTableListQuery.data.value : publicDataTableListQuery.data.value)),
+        dataTableListLoading,
+        widgetLoading,
+        api: {
+            publicWidgetAPI,
+            privateWidgetAPI,
+            publicDataTableAPI,
+            privateDataTableAPI,
+        },
+        keys: {
+            publicWidgetQueryKey: _publicWidgetQueryKey,
+            privateWidgetQueryKey: _privateWidgetQueryKey,
+            publicDataTableListQueryKey: _publicDataTableListQueryKey,
+            privateDataTableListQueryKey: _privateDataTableListQueryKey,
+            publicWidgetLoadQueryKey: computed(() => publicWidgetLoadQueryKey.value),
+            privateWidgetLoadQueryKey: computed(() => privateWidgetLoadQueryKey.value),
+            publicWidgetLoadSumQueryKey: computed(() => publicWidgetLoadSumQueryKey.value),
+            privateWidgetLoadSumQueryKey: computed(() => privateWidgetLoadSumQueryKey.value),
+            publicDataTableLoadQueryKey: computed(() => publicDataTableLoadQueryKey.value),
+            privateDataTableLoadQueryKey: computed(() => privateDataTableLoadQueryKey.value),
+        },
+        fetcher: {
+            updateDataTableFn,
+            updateWidgetFn,
+        },
+        queryClient,
+    };
+};
diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts
index d24d672efd..304753b63f 100644
--- a/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts
+++ b/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts
@@ -1,22 +1,20 @@
 import type { ComputedRef, UnwrapRef } from 'vue';
-import { computed, onMounted, reactive } from 'vue';
+import { computed, reactive } from 'vue';
 import type { Location } from 'vue-router/types/router';
 
 import { cloneDeep } from 'lodash';
 
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { DataTableListParameters } from '@/schema/dashboard/public-data-table/api-verbs/list';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 
 import { arrayToQueryString, objectToQueryString, primitiveToQueryString } from '@/lib/router-query-string';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_SOURCE_DOMAIN, DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
 import type { DisplayAnnotationValue } from '@/common/modules/widgets/_widget-fields/display-annotation/type';
@@ -43,22 +41,6 @@ interface OverridableWidgetFrameState {
 type DataTableModel = PublicDataTableModel | PrivateDataTableModel;
 const { getProperRouteLocation } = useProperRouteLocation();
 
-const listDataTables = async (widgetId?: string): Promise<DataTableModel[]> => {
-    if (!widgetId) return [];
-    const _isPrivate = widgetId.startsWith('private');
-    const _fetcher = _isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateDataTable.list<DataTableListParameters, ListResponse<DataTableModel>>
-        : SpaceConnector.clientV2.dashboard.publicDataTable.list<DataTableListParameters, ListResponse<DataTableModel>>;
-    try {
-        const { results } = await _fetcher({
-            widget_id: widgetId,
-        });
-        return results ?? [];
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        return [];
-    }
-};
 const convertDashboardVarsToConsoleFilters = (dashboardVars?: DashboardVars): ConsoleFilter[] => {
     if (!dashboardVars) return [];
     return Object.entries(dashboardVars).map(([k, v]) => ({
@@ -142,8 +124,16 @@ export const useWidgetFrame = (
     emit: WidgetEmit,
     overrides: OverridableWidgetFrameState = {},
 ) => {
+    /* Query */
+    const {
+        dataTableList,
+    } = useWidgetFormQuery({
+        widgetId: computed(() => props.widgetId),
+    });
+
+
     const _state = reactive({
-        widgetConfig: computed(() => getWidgetConfig(props.widgetName)),
+        widgetConfig: computed<WidgetConfig|undefined>(() => getWidgetConfig(props.widgetName)),
         showWidgetHeader: computed<boolean>(() => props.widgetOptions?.widgetHeader?.value?.toggleValue || false),
         title: computed(() => {
             if (_state.showWidgetHeader) return props.widgetOptions?.widgetHeader?.value?.title;
@@ -154,8 +144,8 @@ export const useWidgetFrame = (
             return undefined;
         }),
         size: computed<WidgetSize>(() => {
-            if (props.size && _state.widgetConfig.meta.sizes.includes(props.size)) return props.size;
-            return _state.widgetConfig.meta.sizes[0];
+            if (props.size && _state.widgetConfig?.meta.sizes.includes(props.size)) return props.size;
+            return _state.widgetConfig?.meta.sizes[0];
         }),
         periodText: computed<string>(() => {
             if (!overrides.dateRange) return '';
@@ -163,11 +153,10 @@ export const useWidgetFrame = (
             if (_dateRange?.start && (_dateRange.start !== _dateRange.end)) return `${_dateRange.start} ~ ${_dateRange.end}`;
             return _dateRange.end;
         }),
-        dataTable: computed<DataTableModel|undefined>(() => _state.dataTables?.find((d) => d.data_table_id === props.dataTableId)),
-        dataTables: [] as DataTableModel[],
+        dataTable: computed<DataTableModel|undefined>(() => dataTableList.value?.find((d) => d.data_table_id === props.dataTableId)),
         unitMap: computed<Record<string, string>>(() => {
             const _result: Record<string, string> = {};
-            _state.dataTables.forEach((d) => {
+            dataTableList.value.forEach((d) => {
                 Object.entries(d.data_info).forEach(([k, v]) => {
                     if (v?.unit) _result[k] = v.unit;
                 });
@@ -176,9 +165,9 @@ export const useWidgetFrame = (
         }),
         fullDataLinkList: computed<FullDataLink[]>(() => {
             if (!_state.dataTable) return [];
-            let _dataTableIds = getRecursiveDataTableIds([], _state.dataTable, _state.dataTables);
+            let _dataTableIds = getRecursiveDataTableIds([], _state.dataTable, dataTableList.value);
             _dataTableIds = Array.from(new Set(_dataTableIds));
-            const _dataTables = _state.dataTables.filter((d) => _dataTableIds.includes(d.data_table_id));
+            const _dataTables = dataTableList.value.filter((d) => _dataTableIds.includes(d.data_table_id));
             const _result: FullDataLink[] = [];
             _dataTables.forEach((d) => {
                 const _location = getFullDataLocation(d, props.widgetOptions, overrides.dateRange?.value, props.dashboardVars);
@@ -204,7 +193,7 @@ export const useWidgetFrame = (
     const widgetFrameProps = computed<WidgetFrameProps>(() => ({
         widgetId: props.widgetId,
         widgetOptions: props.widgetOptions,
-        widgetSizes: _state.widgetConfig.meta.sizes,
+        widgetSizes: _state.widgetConfig?.meta.sizes,
         dataTableId: props.dataTableId,
         //
         mode: props.mode ?? 'view',
@@ -242,9 +231,5 @@ export const useWidgetFrame = (
         },
     };
 
-    onMounted(async () => {
-        _state.dataTables = await listDataTables(props.widgetId);
-    });
-
     return { widgetFrameProps, widgetFrameEventHandlers };
 };
diff --git a/apps/web/src/common/modules/widgets/_constants/data-table-constant.ts b/apps/web/src/common/modules/widgets/_constants/data-table-constant.ts
index 662af4c63a..de92e36c7d 100644
--- a/apps/web/src/common/modules/widgets/_constants/data-table-constant.ts
+++ b/apps/web/src/common/modules/widgets/_constants/data-table-constant.ts
@@ -1,3 +1,5 @@
+import { cloneDeep } from 'lodash';
+
 import type {
     AddLabelsOptions,
     ConcatOptions, EvalOptions, JoinOptions, PivotOptions, QueryOptions, ValueMappingOptions,
@@ -138,6 +140,17 @@ export const DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP = {
     } as ValueMappingOptions,
 };
 
+export const TRANSFORM_DATA_TABLE_DEFAULT_OPTIONS = {
+    JOIN: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.JOIN),
+    CONCAT: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.CONCAT),
+    QUERY: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.QUERY),
+    EVAL: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.EVAL),
+    AGGREGATE: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.AGGREGATE),
+    PIVOT: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT),
+    ADD_LABELS: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.ADD_LABELS),
+    VALUE_MAPPING: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.VALUE_MAPPING),
+};
+
 export const GROUP_BY_INFO_ITEMS_FOR_TAGS = [
     // {
     //     key: GROUP_BY.PROJECT,
diff --git a/apps/web/src/common/modules/widgets/_constants/widget-constant.ts b/apps/web/src/common/modules/widgets/_constants/widget-constant.ts
index b574d7e560..ec4aed8fd8 100644
--- a/apps/web/src/common/modules/widgets/_constants/widget-constant.ts
+++ b/apps/web/src/common/modules/widgets/_constants/widget-constant.ts
@@ -12,6 +12,6 @@ export const REFERENCE_FIELD_MAP = {
     'Service Account': 'serviceAccount',
 } as const;
 
-export const WIDGET_LOAD_STALE_TIME = 1000 * 60 * 10;
+export const WIDGET_LOAD_STALE_TIME = 1000 * 60 * 5;
 
 export const UNSUPPORTED_CHARTS_IN_PIVOT = ['gauge', 'geoMap', 'treemap', 'pieChart', 'colorCodedHeatmap', 'sankeyChart'];
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
index 0ad7de6492..b7f20f2a23 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
@@ -1,8 +1,8 @@
 import { cloneDeep } from 'lodash';
 import { describe, expect, it } from 'vitest';
 
-import type { DashboardVariablesSchema } from '@/schema/dashboard/_types/dashboard-type';
-import type { InheritOptions, WidgetConfig, WidgetOptionsSchema } from '@/schema/dashboard/_types/widget-type';
+import type { DashboardVariablesSchema } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { InheritOptions, WidgetConfig, WidgetOptionsSchema } from '@/api-clients/dashboard/_types/widget-type';
 
 import {
     getInheritingOptionKeys,
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
index 9eaa7af7e0..61d4f9a8a7 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
@@ -1,4 +1,4 @@
-import type { WidgetFilterKey, WidgetFiltersMap } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetFilterKey, WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-type';
 
 import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboards/widgets/_helpers/widget-options-filters-helper';
 
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts
index a1fff9193d..611ed71954 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
-import type { DashboardVariableSchemaProperty, DashboardVariablesSchema } from '@/schema/dashboard/_types/dashboard-type';
-import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/schema/dashboard/_types/widget-type';
+import type { DashboardVariableSchemaProperty, DashboardVariablesSchema } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/api-clients/dashboard/_types/widget-type';
 
 import {
     getInitialSchemaProperties, getNonInheritedWidgetOptionNamesAmongUsedVariables,
diff --git a/apps/web/src/common/modules/widgets/_helpers/global-variable-helper.ts b/apps/web/src/common/modules/widgets/_helpers/global-variable-helper.ts
index 7d69c51cf7..b68e089848 100644
--- a/apps/web/src/common/modules/widgets/_helpers/global-variable-helper.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/global-variable-helper.ts
@@ -1,6 +1,6 @@
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
 export const isGlobalVariableFormat = (value: string | MenuItem[]): boolean => {
     if (Array.isArray(value)) return false;
diff --git a/apps/web/src/common/modules/widgets/_helpers/widget-component-helper.ts b/apps/web/src/common/modules/widgets/_helpers/widget-component-helper.ts
index efa22469f6..ec6edef85a 100644
--- a/apps/web/src/common/modules/widgets/_helpers/widget-component-helper.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/widget-component-helper.ts
@@ -11,10 +11,12 @@ export const getWidgetComponent = (widgetConfigId: string): AsyncComponent|undef
     const config = getWidgetConfig(widgetConfigId);
     if (!config) {
         ErrorHandler.handleError(`No matching widget configuration found. ${widgetConfigId} does not exist.`);
+        return undefined;
     }
-    const widgetComponent = WIDGET_COMPONENTS[config.widgetName];
+    const widgetComponent = WIDGET_COMPONENTS[config?.widgetName];
     if (!widgetComponent) {
         ErrorHandler.handleError(`No matching widget component found. ${widgetComponent} does not exist.`);
+        return undefined;
     }
 
     return widgetComponent;
diff --git a/apps/web/src/common/modules/widgets/_helpers/widget-data-table-helper.ts b/apps/web/src/common/modules/widgets/_helpers/widget-data-table-helper.ts
index f9015ccdad..6a17913ceb 100644
--- a/apps/web/src/common/modules/widgets/_helpers/widget-data-table-helper.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/widget-data-table-helper.ts
@@ -1,5 +1,5 @@
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 
 import type { DataTableOptions } from '@/common/modules/widgets/types/widget-model';
 
diff --git a/apps/web/src/common/modules/widgets/_helpers/widget-helper.ts b/apps/web/src/common/modules/widgets/_helpers/widget-helper.ts
index 89845f0157..d52148ba4d 100644
--- a/apps/web/src/common/modules/widgets/_helpers/widget-helper.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/widget-helper.ts
@@ -1,13 +1,7 @@
 import bytes from 'bytes';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { byteFormatter, customNumberFormatter, numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { DataTableGetParameters } from '@/schema/dashboard/public-data-table/api-verbs/get';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import { DATE_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { NUMBER_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
@@ -17,20 +11,6 @@ import type { WidgetType } from '@/common/modules/widgets/types/widget-model';
 import { SIZE_UNITS } from '@/services/asset-inventory-v1/constants/asset-analysis-constant';
 
 
-export const getWidgetDataTable = async (dataTableId: string): Promise<PrivateDataTableModel|PublicDataTableModel|undefined> => {
-    const isPrivate = dataTableId.startsWith('private-');
-    const fetcher = isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateDataTable.get<DataTableGetParameters, PrivateDataTableModel>
-        : SpaceConnector.clientV2.dashboard.publicDataTable.get<DataTableGetParameters, PublicDataTableModel>;
-    try {
-        const result = await fetcher({ data_table_id: dataTableId });
-        return result;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        return undefined;
-    }
-};
-
 export const sortWidgetTableFields = (fields: string[]): string[] => {
     const priorityFields = Object.values(DATE_FIELD) as string[];
     const prioritySet = new Set(priorityFields);
@@ -67,7 +47,7 @@ export const getFormattedNumber = (val: number, numberFormatInfo?: NumberFormatI
     }
 };
 
-export const sanitizeWidgetOptions = (options: Record<string, any>, widgetType: WidgetType) => {
+export const sanitizeWidgetOptions = (options: Record<string, any> = {}, widgetType: WidgetType = 'table') => {
     const currentOptionKeys = Object.keys(options ?? {});
     const widgetConfig = getWidgetConfig(widgetType);
     const validOptionKeys = [
diff --git a/apps/web/src/common/modules/widgets/_helpers/widget-width-helper.ts b/apps/web/src/common/modules/widgets/_helpers/widget-width-helper.ts
index abffec0753..c6ade38c9a 100644
--- a/apps/web/src/common/modules/widgets/_helpers/widget-width-helper.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/widget-width-helper.ts
@@ -1,7 +1,7 @@
 import { sum, max } from 'lodash';
 
-import { WIDGET_SIZE } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetSize } from '@/schema/dashboard/_types/widget-type';
+import { WIDGET_SIZE } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 
 import {
     WIDGET_GAP,
diff --git a/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts b/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts
index 05fcf4da90..ce5b93b8ef 100644
--- a/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts
+++ b/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts
@@ -1,74 +1,30 @@
 import { computed, reactive } from 'vue';
 
-import { cloneDeep } from 'lodash';
 import { defineStore } from 'pinia';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetUpdateParameters } from '@/schema/dashboard/private-widget/api-verbs/update';
-import type { PrivateWidgetModel } from '@/schema/dashboard/private-widget/model';
-import type { DataTableAddParameters } from '@/schema/dashboard/public-data-table/api-verbs/add';
-import type { DataTableDeleteParameters } from '@/schema/dashboard/public-data-table/api-verbs/delete';
-import type { DataTableListParameters } from '@/schema/dashboard/public-data-table/api-verbs/list';
-import type { DataTableTransformParameters } from '@/schema/dashboard/public-data-table/api-verbs/transform';
-import type { DataTableUpdateParameters } from '@/schema/dashboard/public-data-table/api-verbs/update';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetUpdateParameters } from '@/schema/dashboard/public-widget/api-verbs/update';
-import type { PublicWidgetModel } from '@/schema/dashboard/public-widget/model';
-
-import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
-import getRandomId from '@/lib/random-id-generator';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import {
-    DATA_TABLE_OPERATOR,
-    DATA_TABLE_TYPE,
-    DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
-} from '@/common/modules/widgets/_constants/data-table-constant';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
-import { getDuplicatedDataTableName } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
-import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { JoinRestrictedMap } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { WidgetSize, WidgetOverlayType } from '@/common/modules/widgets/types/widget-display-type';
-import type { WidgetFieldValues } from '@/common/modules/widgets/types/widget-field-value-type';
-import type {
-    DataTableOperator,
-    WidgetState,
-    DataTableTransformOptions, ConcatOptions, JoinOptions,
-} from '@/common/modules/widgets/types/widget-model';
-
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
-
 
-type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 type WidgetModel = PublicWidgetModel|PrivateWidgetModel;
-type WidgetUpdateParameters = PublicWidgetUpdateParameters|PrivateWidgetUpdateParameters;
-interface DataTableReference {
-    data_table_id: string;
-    parents: string[];
-    children: string[];
-}
 export const useWidgetGenerateStore = defineStore('widget-generate', () => {
-    const dashboardDetailStore = useDashboardDetailInfoStore();
-    const dashboardDetailGetters = dashboardDetailStore.getters;
     const state = reactive({
         // display
         showOverlay: false,
         overlayStep: 1,
         overlayType: 'EDIT' as WidgetOverlayType,
         // Widget
-        widget: undefined as undefined | WidgetModel,
-        widgetId: '',
+        widgetId: '' as string|undefined,
         latestWidgetId: '',
         selectedWidgetName: 'table',
         size: 'full' as WidgetSize,
-        widgetFormValueMap: {} as Record<string, WidgetFieldValues|undefined>,
         widgetValidMap: {} as Record<string, boolean>,
         // Data Table
         selectedDataTableId: undefined as undefined | string,
-        dataTables: [] as Partial<DataTableModel>[],
         previewData: { results: [], total_count: 0 } as ListResponse<any>,
         dataTableCreateLoading: false,
         joinRestrictedMap: {} as JoinRestrictedMap, // Flag for handling Join type EXCEPTION RESTRICTION cases. (duplicated data field). Example - { '{dataTalbeId}': true, }
@@ -77,80 +33,11 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
     });
 
     const getters = reactive({
-        selectedDataTable: computed<Partial<DataTableModel>|undefined>(() => state.dataTables.find((dataTable) => dataTable.data_table_id === state.selectedDataTableId)),
         isAllWidgetFormValid: computed<boolean>(() => {
             const widgetValidMapValues = Object.values(state.widgetValidMap);
             return widgetValidMapValues.every((valid) => valid);
         }),
-        widgetState: computed<WidgetState|undefined>(() => state.widget?.state),
         allDataTableInvalid: computed<boolean>(() => Object.values(state.allDataTableInvalidMap).some((invalid) => invalid)),
-        dataTableReferenceMap: computed<Record<string, DataTableReference>>(() => {
-            const referenceMap = {} as Record<string, DataTableReference>;
-            const savedDataTables = state.dataTables.filter((dataTable) => dataTable.data_table_id && !dataTable.data_table_id.startsWith('UNSAVED-')) as DataTableModel[];
-            const MULTIPE_DATA_TABLE_OPERATORS = [DATA_TABLE_OPERATOR.CONCAT, DATA_TABLE_OPERATOR.JOIN];
-            savedDataTables.forEach((dataTable) => {
-                if (!referenceMap[dataTable.data_table_id]) {
-                    referenceMap[dataTable.data_table_id] = setIniitialDataTableReferenceProperty(dataTable.data_table_id);
-                }
-
-                if (dataTable.data_type === DATA_TABLE_TYPE.TRANSFORMED) {
-                    if (MULTIPE_DATA_TABLE_OPERATORS.includes(dataTable.operator)) {
-                        const [firstReferenceDataTableId, secondReferenceDataTableId] = (dataTable.options[dataTable.operator] as ConcatOptions|JoinOptions).data_tables;
-                        if (!referenceMap[firstReferenceDataTableId]) {
-                            referenceMap[firstReferenceDataTableId] = setIniitialDataTableReferenceProperty(firstReferenceDataTableId);
-                        }
-                        if (!referenceMap[secondReferenceDataTableId]) {
-                            referenceMap[secondReferenceDataTableId] = setIniitialDataTableReferenceProperty(secondReferenceDataTableId);
-                        }
-                        referenceMap[firstReferenceDataTableId] = {
-                            ...referenceMap[firstReferenceDataTableId],
-                            children: [
-                                ...referenceMap[firstReferenceDataTableId].children,
-                                dataTable.data_table_id,
-                            ],
-                        };
-                        referenceMap[secondReferenceDataTableId] = {
-                            ...referenceMap[secondReferenceDataTableId],
-                            children: [
-                                ...referenceMap[secondReferenceDataTableId].children,
-                                dataTable.data_table_id,
-                            ],
-                        };
-                        referenceMap[dataTable.data_table_id] = {
-                            ...referenceMap[dataTable.data_table_id],
-                            parents: [
-                                firstReferenceDataTableId,
-                                secondReferenceDataTableId,
-                            ],
-                        };
-                    } else {
-                        const referenceDataTableId = dataTable.options[dataTable.operator].data_table_id;
-                        if (!referenceMap[referenceDataTableId]) {
-                            referenceMap[referenceDataTableId] = setIniitialDataTableReferenceProperty(referenceDataTableId);
-                        }
-                        referenceMap[referenceDataTableId] = {
-                            ...referenceMap[referenceDataTableId],
-                            children: [
-                                ...referenceMap[referenceDataTableId].children,
-                                dataTable.data_table_id,
-                            ],
-                        };
-                        referenceMap[dataTable.data_table_id] = {
-                            ...referenceMap[dataTable.data_table_id],
-                            parents: [referenceDataTableId],
-                        };
-                    }
-                }
-            });
-            return referenceMap;
-        }),
-    });
-
-    /* Helper */
-    const setIniitialDataTableReferenceProperty = (dataTableId: string): DataTableReference => ({
-        data_table_id: dataTableId,
-        parents: [],
-        children: [],
     });
 
     /* Mutations */
@@ -178,9 +65,6 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
     const setSize = (size: WidgetSize) => {
         state.size = size;
     };
-    const setWidgetFormValueMap = (widgetValueMap: Record<string, WidgetFieldValues|undefined>) => {
-        state.widgetFormValueMap = widgetValueMap;
-    };
     const setWidgetValidMap = (widgetValidMap: Record<string, boolean>) => {
         state.widgetValidMap = widgetValidMap;
     };
@@ -206,7 +90,6 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
         setSelectedDataTableId,
         setSelectedWidgetName,
         setSize,
-        setWidgetFormValueMap,
         setWidgetValidMap,
         setJoinRestrictedMap,
         setAllDataTableInvalidMap,
@@ -214,220 +97,23 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => {
         setDataTableLoadFailed,
     };
     const actions = {
-        listDataTable: async () => {
-            const listParams: DataTableListParameters = {
-                widget_id: state.widgetId,
-            };
-            const isPrivate = state.widgetId.startsWith('private');
-            const fetcher = isPrivate
-                ? SpaceConnector.clientV2.dashboard.privateDataTable.list<DataTableListParameters, ListResponse<DataTableModel>>
-                : SpaceConnector.clientV2.dashboard.publicDataTable.list<DataTableListParameters, ListResponse<DataTableModel>>;
-            try {
-                const { results } = await fetcher(listParams);
-                state.dataTables = results ?? [];
-            } catch (e) {
-                ErrorHandler.handleError(e);
-            }
-        },
-        /* Step 1 */
-        createAddDataTable: async (addParams: Partial<DataTableAddParameters>):Promise<DataTableModel|undefined> => {
-            const parameters = {
-                widget_id: state.widgetId,
-                vars: dashboardDetailGetters.dashboardInfo?.vars || {},
-                ...addParams,
-            } as DataTableAddParameters;
-            const isPrivate = state.widgetId.startsWith('private');
-            const fetcher = isPrivate
-                ? SpaceConnector.clientV2.dashboard.privateDataTable.add<DataTableAddParameters, DataTableModel>
-                : SpaceConnector.clientV2.dashboard.publicDataTable.add<DataTableAddParameters, DataTableModel>;
-            try {
-                const result = await fetcher(parameters);
-                state.dataTables.push(result);
-                return result;
-            } catch (e: any) {
-                setDataTableCreateLoading(false); // DataTable Loading Failed Case
-                showErrorMessage(e.message, e);
-                ErrorHandler.handleError(e);
-                return undefined;
-            }
-        },
-        createTransformDataTable: async (transformParams: Partial<DataTableTransformParameters>, unsavedId: string): Promise<DataTableModel|undefined> => {
-            const parameters = {
-                widget_id: state.widgetId,
-                vars: dashboardDetailGetters.dashboardInfo?.vars || {},
-                ...transformParams,
-            } as DataTableTransformParameters;
-            const isPrivate = state.widgetId.startsWith('private');
-            const fetcher = isPrivate
-                ? SpaceConnector.clientV2.dashboard.privateDataTable.transform<DataTableTransformParameters, DataTableModel>
-                : SpaceConnector.clientV2.dashboard.publicDataTable.transform<DataTableTransformParameters, DataTableModel>;
-            try {
-                const result = await fetcher(parameters);
-                state.dataTables = state.dataTables.filter((dataTable) => dataTable.data_table_id !== unsavedId);
-                state.dataTables.push(result);
-                return result;
-            } catch (e: any) {
-                showErrorMessage(e.message, e);
-                ErrorHandler.handleError(e);
-                return undefined;
-            }
-        },
-        createUnsavedTransformDataTable: (operatorType: DataTableOperator) => {
-            const options = {
-                JOIN: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.JOIN),
-                CONCAT: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.CONCAT),
-                QUERY: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.QUERY),
-                EVAL: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.EVAL),
-                AGGREGATE: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.AGGREGATE),
-                PIVOT: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.PIVOT),
-                ADD_LABELS: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.ADD_LABELS),
-                VALUE_MAPPING: cloneDeep(DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP.VALUE_MAPPING),
-            };
-            const unsavedTransformData = {
-                data_table_id: `UNSAVED-${getRandomId()}`,
-                name: getDuplicatedDataTableName(`${operatorType} Data`, state.dataTables),
-                data_type: DATA_TABLE_TYPE.TRANSFORMED,
-                operator: operatorType,
-                options: {
-                    [operatorType]: options[operatorType],
-                } as DataTableTransformOptions,
-                state: 'AVAILABLE',
-            } as Partial<DataTableModel>;
-            state.dataTables.push(unsavedTransformData);
-        },
-        updateDataTable: async (updateParams: DataTableUpdateParameters, options?: { unsaved?: boolean; preventReferenceUpdating?: boolean; }): Promise<DataTableModel|undefined> => {
-            const { unsaved, preventReferenceUpdating } = options || {};
-            const isPrivate = state.widgetId.startsWith('private');
-            const fetcher = isPrivate
-                ? SpaceConnector.clientV2.dashboard.privateDataTable.update<DataTableUpdateParameters, DataTableModel>
-                : SpaceConnector.clientV2.dashboard.publicDataTable.update<DataTableUpdateParameters, DataTableModel>;
-            try {
-                let result: DataTableModel;
-                if (unsaved) {
-                    const unsavedDataTable = state.dataTables.find((dataTable) => dataTable.data_table_id === updateParams.data_table_id) as DataTableModel;
-                    result = {
-                        ...unsavedDataTable,
-                        ...updateParams,
-                    };
-                } else {
-                    result = await fetcher({
-                        ...updateParams,
-                        vars: dashboardDetailGetters.dashboardInfo?.vars || {},
-                    });
-                    if (state.widget?.state === 'ACTIVE') {
-                        await actions.updateWidget({
-                            state: 'INACTIVE',
-                            options: {
-                                widgetHeader: {
-                                    ...state.widget?.options?.widgetHeader,
-                                },
-                            },
-                        });
-                    }
-                }
-                state.dataTables = state.dataTables.map((dataTable) => (dataTable.data_table_id === result.data_table_id ? result : dataTable));
-
-                // Cascade Update Referenced Transformed DataTable
-                if (!preventReferenceUpdating) await actions.cascadeUpdateDataTable(result.data_table_id);
-
-                return result;
-            } catch (e: any) {
-                showErrorMessage(e.message, e);
-                ErrorHandler.handleError(e);
-                return undefined;
-            }
-        },
-        cascadeUpdateDataTable: async (dataTableId: string) => {
-            const isPrivate = state.widgetId.startsWith('private');
-            const fetcher = isPrivate
-                ? SpaceConnector.clientV2.dashboard.privateDataTable.update<DataTableUpdateParameters, DataTableModel>
-                : SpaceConnector.clientV2.dashboard.publicDataTable.update<DataTableUpdateParameters, DataTableModel>;
-
-            const children = getters.dataTableReferenceMap[dataTableId].children;
-            return children.reduce((chain, childId) => chain.then(async () => {
-                const currentDataTable = state.dataTables.find(
-                    (_dataTable) => _dataTable.data_table_id === childId,
-                ) as DataTableModel;
-
-                const result = await fetcher({
-                    data_table_id: childId,
-                    name: currentDataTable?.name,
-                    options: {
-                        ...(currentDataTable?.options ?? {}),
-                    },
-                });
-                state.dataTables = state.dataTables.map((dataTable) => (dataTable.data_table_id === result.data_table_id ? result : dataTable));
-
-                return actions.cascadeUpdateDataTable(childId);
-            }), Promise.resolve());
-        },
-        deleteDataTable: async (deleteParams: DataTableDeleteParameters, unsaved?: boolean) => {
-            if (unsaved) {
-                state.dataTables = state.dataTables.filter((dataTable) => dataTable.data_table_id !== deleteParams.data_table_id);
-                const _allDataTableInvalidMap = {
-                    ...state.allDataTableInvalidMap,
-                };
-                delete _allDataTableInvalidMap[deleteParams.data_table_id];
-                setAllDataTableInvalidMap(_allDataTableInvalidMap);
-                return;
-            }
-            const isPrivate = state.widgetId.startsWith('private');
-            const fetcher = isPrivate
-                ? SpaceConnector.clientV2.dashboard.privateDataTable.delete<DataTableDeleteParameters, DataTableModel>
-                : SpaceConnector.clientV2.dashboard.publicDataTable.delete<DataTableDeleteParameters, DataTableModel>;
-            try {
-                await fetcher(deleteParams);
-                state.dataTables = state.dataTables.filter((dataTable) => dataTable.data_table_id !== deleteParams.data_table_id);
-                const _allDataTableInvalidMap = {
-                    ...state.allDataTableInvalidMap,
-                };
-                delete _allDataTableInvalidMap[deleteParams.data_table_id];
-                setAllDataTableInvalidMap(_allDataTableInvalidMap);
-            } catch (e) {
-                ErrorHandler.handleError(e);
-            }
-        },
-        updateWidget: async (updateParams: Partial<WidgetUpdateParameters>): Promise<WidgetModel|undefined> => {
-            const isPrivate = state.widgetId.startsWith('private');
-            const fetcher = isPrivate
-                ? SpaceConnector.clientV2.dashboard.privateWidget.update<PrivateWidgetUpdateParameters, PrivateWidgetModel>
-                : SpaceConnector.clientV2.dashboard.publicWidget.update<PublicWidgetUpdateParameters, PublicWidgetModel>;
-            const sanitizedOptions = sanitizeWidgetOptions(updateParams.options ?? {}, updateParams.widget_type ?? 'table');
-            try {
-                const result = await fetcher({
-                    widget_id: state.widgetId,
-                    ...updateParams,
-                    options: sanitizedOptions, // Sanitize Wrong Options
-                });
-                state.widget = result;
-                return result;
-            } catch (e: any) {
-                showErrorMessage(e.message, e);
-                ErrorHandler.handleError(e);
-                return undefined;
-            }
-        },
         /* Step 2 */
         reset: () => {
-            state.widget = undefined;
-            state.widgetId = '';
-            state.dataTables = [];
+            state.widgetId = undefined;
             state.showOverlay = false;
             state.overlayStep = 1;
             state.selectedDataTableId = undefined;
             state.size = 'full';
             state.widgetValidMap = {};
-            state.widgetFormValueMap = {};
             state.allDataTableInvalidMap = {};
         },
-        setWidgetForm: (widgetInfo: WidgetModel) => {
-            state.selectedWidgetName = widgetInfo?.widget_type || 'table';
+        setWidgetFormInfo: (widgetInfo: WidgetModel) => {
             const _widgetConfig = getWidgetConfig(widgetInfo.widget_type || 'table');
-            state.widget = widgetInfo;
+
             state.widgetId = widgetInfo.widget_id;
+            state.selectedDataTableId = widgetInfo.data_table_id;
+            state.selectedWidgetName = widgetInfo?.widget_type || 'table';
             state.size = widgetInfo?.size || _widgetConfig?.meta?.sizes[0] || 'full';
-            state.selectedDataTableId = widgetInfo?.data_table_id;
-            state.widgetFormValueMap = widgetInfo?.options || {};
         },
     };
 
diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts
index 2beb9a421b..159af87fef 100644
--- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts
+++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts
@@ -152,10 +152,10 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
 
         const result = cloneDeep(widgetFieldDefaultValueMap.dataField);
 
-        const isPivotDataTable = dataTable.operator === DATA_TABLE_OPERATOR.PIVOT;
+        const isPivotDataTable = dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT;
         if (isPivotDataTable) { // if pivot dataTable, always multiSelectable
             return {
-                data: [dataTable.options.PIVOT?.fields?.column],
+                data: [dataTable?.options.PIVOT?.fields?.column],
             };
         }
 
@@ -288,8 +288,8 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
     dataFieldHeatmapColor: (widgetConfig, dataTable) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const dataFieldheatmapColorOptions = (_fieldsSchema.dataFieldHeatmapColor?.options ?? {}) as DataFieldHeatmapColorOptions;
-        const isPivotDataTable = dataTable.operator === DATA_TABLE_OPERATOR.PIVOT;
-        const columnFieldForPivot = dataTable.options.PIVOT?.fields?.column as string;
+        const isPivotDataTable = dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT;
+        const columnFieldForPivot = dataTable?.options.PIVOT?.fields?.column as string;
 
         const dataKeys = Object.keys(dataTable?.data_info ?? {}) as string[];
         const fieldKeys = isPivotDataTable ? [columnFieldForPivot] : dataKeys;
@@ -415,8 +415,8 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
     numberFormat: (widgetConfig, dataTable) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const numberFormatOptions = (_fieldsSchema.numberFormat?.options ?? {}) as NumberFormatOptions;
-        const isPivotDataTable = dataTable.operator === DATA_TABLE_OPERATOR.PIVOT;
-        const columnFieldForPivot = dataTable.options.PIVOT?.fields?.column as string;
+        const isPivotDataTable = dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT;
+        const columnFieldForPivot = dataTable?.options.PIVOT?.fields?.column as string;
 
         const dataKeys = Object.keys(dataTable?.data_info ?? {}) as string[];
         const fieldKeys = isPivotDataTable ? [columnFieldForPivot] : dataKeys;
diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
index 04c0eadf86..f29e3d342e 100644
--- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
+++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
@@ -2,8 +2,8 @@ import { ref } from 'vue';
 
 import { cloneDeep } from 'lodash';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 
 import { integrateFieldsSchema } from '@/common/modules/widgets/_helpers/widget-field-helper';
 import { widgetFieldDefaultValueSetterRegistry } from '@/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry';
diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/type.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/type.ts
index 7063255d9e..160658b274 100644
--- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/type.ts
+++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/type.ts
@@ -1,5 +1,5 @@
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 
 import type { CategoryByValue } from '@/common/modules/widgets/_widget-fields/category-by/type';
 import type { ColorSchemaValue } from '@/common/modules/widgets/_widget-fields/color-schema/type';
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue
index dac5490b46..c7e70d314b 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue
@@ -7,25 +7,36 @@ import { PFieldGroup } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type {
     CategoryByOptions,
 } from '@/common/modules/widgets/_widget-fields/category-by/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
+
 const FIELD_KEY = 'categoryBy';
 const props = defineProps<WidgetFieldComponentProps<CategoryByOptions>>();
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
+
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
 
 const state = reactive({
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
     menuItems: computed<MenuItem[]>(() => {
         const dataTarget = props.widgetFieldSchema?.options?.dataTarget;
-        if (!widgetGenerateGetters.selectedDataTable || !dataTarget) return [];
-        const dataInfoList = sortWidgetTableFields(Object.keys(widgetGenerateGetters.selectedDataTable?.[dataTarget] ?? {})) ?? [];
+        if (!state.selectedDataTable || !dataTarget) return [];
+        const dataInfoList = sortWidgetTableFields(Object.keys(state.selectedDataTable?.[dataTarget] ?? {})) ?? [];
         return dataInfoList.map((d) => ({
             name: d,
             label: d,
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue b/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue
index 826f8dd4f9..6fff3a6a09 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue
@@ -12,13 +12,11 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 
 
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-
 import getRandomId from '@/lib/random-id-generator';
 
 import type {
 } from '@/common/modules/widgets/types/widget-field-value-type';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
@@ -27,10 +25,12 @@ import type {
     CustomColumnWidthItem,
     CustomTableColumnWidthValue,
 } from '@/common/modules/widgets/_widget-fields/custom-table-column-width/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
+
 interface CustomWidthFieldItem extends CustomColumnWidthItem {
     key: string;
 }
@@ -38,25 +38,29 @@ const FIELD_KEY = 'customTableColumnWidth';
 
 const props = defineProps<WidgetFieldComponentProps<undefined>>();
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
 
-const storeState = reactive({
-    selectedDataTable: computed<PrivateDataTableModel|PublicDataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
 const state = reactive({
-    isPivotDataTable: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
+    isPivotDataTable: computed<boolean>(() => state.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
     fieldValue: computed<CustomTableColumnWidthValue>(() => props.fieldManager.data[FIELD_KEY].value),
     customWidthItems: [] as CustomWidthFieldItem[],
     allFieldList: computed<MenuItem[]>(() => {
-        if (!widgetGenerateGetters.selectedDataTable) return [];
+        if (!state.selectedDataTable) return [];
 
-        const columnFieldForPivot = storeState.selectedDataTable?.options.PIVOT?.fields?.column;
+        const columnFieldForPivot = state.selectedDataTable?.options.PIVOT?.fields?.column;
 
         const fieldList = sortWidgetTableFields(
             [
-                ...Object.keys(widgetGenerateGetters.selectedDataTable?.labels_info ?? {}),
-                ...((state.isPivotDataTable && columnFieldForPivot) ? [columnFieldForPivot, SUB_TOTAL_NAME] : Object.keys(widgetGenerateGetters.selectedDataTable?.data_info ?? {})),
+                ...Object.keys(state.selectedDataTable?.labels_info ?? {}),
+                ...((state.isPivotDataTable && columnFieldForPivot) ? [columnFieldForPivot, SUB_TOTAL_NAME] : Object.keys(state.selectedDataTable?.data_info ?? {})),
             ],
         ) ?? [];
         return fieldList.map((d) => ({
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue b/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue
index b4728975fa..aeefc4a5c0 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue
@@ -9,10 +9,9 @@ import {
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
 import { i18n } from '@/translations';
 
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATA_FIELD_HEATMAP_COLOR } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
@@ -21,31 +20,37 @@ import type {
     DataFieldHeatmapColorOptions,
     DataFieldHeatmapColorValue,
 } from '@/common/modules/widgets/_widget-fields/data-field-heatmap-color/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
 
+
 const FIELD_KEY = 'dataFieldHeatmapColor';
 
 const props = defineProps<WidgetFieldComponentProps<DataFieldHeatmapColorOptions>>();
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
 
-const storeState = reactive({
-    selectedDataTable: computed<PrivateDataTableModel|PublicDataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
 const state = reactive({
-    isPivotDataTable: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
+    isPivotDataTable: computed<boolean>(() => state.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
     isInitiated: false,
     fieldValue: computed<DataFieldHeatmapColorValue>(() => props.fieldManager.data[FIELD_KEY].value),
     dataFieldList: computed<string[]>(() => {
-        const columnFieldForPivot = storeState.selectedDataTable?.options.PIVOT?.fields?.column;
+        const columnFieldForPivot = state.selectedDataTable?.options.PIVOT?.fields?.column;
         if (state.isPivotDataTable && columnFieldForPivot) {
             return [columnFieldForPivot];
         }
-        return Object.keys(widgetGenerateGetters.selectedDataTable?.data_info ?? {}) ?? [];
+        return Object.keys(state.selectedDataTable?.data_info ?? {}) ?? [];
     }),
     menuItems: computed<SelectDropdownMenuItem[]>(() => Object.entries(DATA_FIELD_HEATMAP_COLOR).map(([key, value]) => {
         if (key === DATA_FIELD_HEATMAP_COLOR.NONE.key) {
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue b/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue
index 5ae8e1c745..77fd4129ed 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue
@@ -6,37 +6,41 @@ import {
 import { PSelectDropdown, PFieldGroup } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import { widgetValidatorRegistry } from '@/common/modules/widgets/_widget-field-value-manager/constant/validator-registry';
 import type { DataFieldOptions, DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
+
 const FIELD_KEY = 'dataField';
 const props = withDefaults(defineProps<WidgetFieldComponentProps<DataFieldOptions>>(), {
     widgetFieldSchema: () => ({}),
 });
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
 
 const validator = widgetValidatorRegistry[FIELD_KEY];
 
-const storeState = reactive({
-    selectedDataTable: computed<PrivateDataTableModel|PublicDataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
 const state = reactive({
-    isPivotDataTable: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
+    isPivotDataTable: computed<boolean>(() => state.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
     fieldValue: computed<DataFieldValue>(() => props.fieldManager.data[FIELD_KEY]?.value),
     multiselectable: computed(() => props.widgetFieldSchema?.options?.multiSelectable),
     menuItems: computed<MenuItem[]>(() => {
-        const dataInfoList = Object.keys(widgetGenerateGetters.selectedDataTable?.data_info ?? {}) ?? [];
+        const dataInfoList = Object.keys(state.selectedDataTable?.data_info ?? {}) ?? [];
         return dataInfoList.filter((field) => field !== SUB_TOTAL_NAME)
             .map((d) => ({
                 name: d,
@@ -46,7 +50,7 @@ const state = reactive({
     invalid: computed<boolean>(() => !validator(state.fieldValue, props.widgetConfig)),
     selectedItem: computed<MenuItem[]|string|undefined>(() => {
         if (state.isPivotDataTable) {
-            const dataName = storeState.selectedDataTable?.options.PIVOT?.fields?.column || '';
+            const dataName = state.selectedDataTable?.options.PIVOT?.fields?.column || '';
             return convertToMenuItem([dataName]);
         }
         if (!state.menuItems.length) return undefined;
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue b/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
index d7a39a5e56..2116a352f8 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
@@ -10,7 +10,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
 import {
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue
index 3e7b43476b..8a00f91e53 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue
@@ -11,6 +11,7 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import ColorInput from '@/common/components/inputs/ColorInput.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import {
     FORMAT_RULE_TYPE,
 } from '@/common/modules/widgets/_constants/widget-field-constant';
@@ -21,20 +22,30 @@ import type {
     FormatRulesValue, FormatRulesOptions, ThresholdValue, FormatRulesType,
 
 } from '@/common/modules/widgets/_widget-fields/format-rules/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
 
+
 const FIELD_KEY = 'formatRules';
 
 const props = defineProps<WidgetFieldComponentProps<FormatRulesOptions>>();
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
 
 const validator = widgetValidatorRegistry[FIELD_KEY];
 
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const state = reactive({
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
     fieldValue: computed<FormatRulesValue>(() => props.fieldManager.data[FIELD_KEY].value),
     type: computed<FormatRulesType>(() => props.widgetFieldSchema?.options?.formatRulesType as FormatRulesType),
     invalid: computed(() => !validator(state.fieldValue, props.widgetConfig)),
@@ -59,8 +70,8 @@ const state = reactive({
     }),
     menuItems: computed<MenuItem[]>(() => {
         const dataTarget = props.widgetFieldSchema?.options?.dataTarget;
-        if (!widgetGenerateGetters.selectedDataTable || !dataTarget) return [];
-        const dataInfoList = sortWidgetTableFields(Object.keys(widgetGenerateGetters.selectedDataTable?.[dataTarget] ?? {})) ?? [];
+        if (!state.selectedDataTable || !dataTarget) return [];
+        const dataInfoList = sortWidgetTableFields(Object.keys(state.selectedDataTable?.[dataTarget] ?? {})) ?? [];
         return dataInfoList.map((d) => ({
             name: d,
             label: d,
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue
index b9e488a7f3..4af591fde4 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue
@@ -10,6 +10,7 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 
 import { i18n } from '@/translations';
 
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import {
@@ -19,26 +20,36 @@ import type {
     GroupByOptions,
     GroupByValue,
 } from '@/common/modules/widgets/_widget-fields/group-by/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
+
 const DEFAULT_COUNT = 5;
 const FIELD_KEY = 'groupBy';
 
 const props = defineProps<WidgetFieldComponentProps<GroupByOptions>>();
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
 
 const validator = widgetValidatorRegistry[FIELD_KEY];
 
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+
 const state = reactive({
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
     isInitiated: false,
     fieldValue: computed<GroupByValue>(() => props.fieldManager.data[FIELD_KEY].value),
     menuItems: computed<MenuItem[]>(() => {
         const dataTarget = props.widgetFieldSchema?.options?.dataTarget;
-        if (!widgetGenerateGetters.selectedDataTable || !dataTarget) return [];
-        const dataInfoList = sortWidgetTableFields(Object.keys(widgetGenerateGetters.selectedDataTable?.[dataTarget] ?? {})) ?? [];
+        if (!state.selectedDataTable || !dataTarget) return [];
+        const dataInfoList = sortWidgetTableFields(Object.keys(state.selectedDataTable?.[dataTarget] ?? {})) ?? [];
         return dataInfoList.map((d) => ({
             name: d,
             label: d,
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue b/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue
index e9e469b382..281b8c1e97 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue
@@ -9,20 +9,21 @@ import {
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import { customNumberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
 import { i18n } from '@/translations';
 
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { NUMBER_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { NumberFormat, NumberFormatValue, NumberFormatOptions } from '@/common/modules/widgets/_widget-fields/number-format/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
 
 
+
 const SAMPLE_NUMBER = 7564613647;
 const SAMPLE_FORMAT_LIST = [
     { format: '#,##0', sample: 1234 },
@@ -36,22 +37,26 @@ const FIELD_KEY = 'numberFormat';
 
 const props = defineProps<WidgetFieldComponentProps<NumberFormatOptions>>();
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
 
-const storeState = reactive({
-    selectedDataTable: computed<PrivateDataTableModel|PublicDataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
 const state = reactive({
-    isPivotDataTable: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
+    isPivotDataTable: computed<boolean>(() => state.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
     isInitiated: false,
     fieldValue: computed<NumberFormatValue>(() => props.fieldManager.data[FIELD_KEY].value),
     dataFieldList: computed<string[]>(() => {
-        const columnFieldForPivot = storeState.selectedDataTable?.options.PIVOT?.fields?.column;
+        const columnFieldForPivot = state.selectedDataTable?.options.PIVOT?.fields?.column;
         if (state.isPivotDataTable && columnFieldForPivot) {
             return [columnFieldForPivot];
         }
-        return Object.keys(widgetGenerateGetters.selectedDataTable?.data_info ?? {}) ?? [];
+        return Object.keys(state.selectedDataTable?.data_info ?? {}) ?? [];
     }),
     menuItems: computed<SelectDropdownMenuItem[]>(() => [
         {
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue b/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue
index 5f8e0b449d..48a607b674 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue
@@ -14,18 +14,21 @@ import { i18n } from '@/translations';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import {
     widgetValidatorRegistry,
 } from '@/common/modules/widgets/_widget-field-value-manager/constant/validator-registry';
 import type { SankeyDimensionsOptions, SankeyDimensionsValue } from '@/common/modules/widgets/_widget-fields/sankey-dimensions/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
 
 
+
 const FIELD_COUNT = 2;
 const FIELD_KEY = 'sankeyDimensions';
 const props = defineProps<WidgetFieldComponentProps<SankeyDimensionsOptions>>();
@@ -33,14 +36,22 @@ const props = defineProps<WidgetFieldComponentProps<SankeyDimensionsOptions>>();
 const validator = widgetValidatorRegistry[FIELD_KEY];
 
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
+
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
 
 const state = reactive({
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
     fieldValue: computed<SankeyDimensionsValue>(() => props.fieldManager.data[FIELD_KEY].value),
     max: computed<number|undefined>(() => props.widgetFieldSchema?.options?.max),
     menuItems: computed<SelectDropdownMenuItem[]>(() => {
-        if (!widgetGenerateGetters.selectedDataTable) return [];
-        const dataInfoList = sortWidgetTableFields(Object.keys(widgetGenerateGetters.selectedDataTable?.labels_info ?? {})) ?? [];
+        if (!state.selectedDataTable) return [];
+        const dataInfoList = sortWidgetTableFields(Object.keys(state.selectedDataTable?.labels_info ?? {})) ?? [];
         return dataInfoList.map((d) => ({
             name: d,
             label: d,
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue
index 7eef272f84..4e971dcdd3 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue
@@ -7,23 +7,35 @@ import { PFieldGroup } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { StackByOptions } from '@/common/modules/widgets/_widget-fields/stack-by/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
+
 const FIELD_KEY = 'stackBy';
 const props = defineProps<WidgetFieldComponentProps<StackByOptions>>();
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+
+const widgetGenerateState = widgetGenerateStore.state;
+
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
 
 const state = reactive({
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
     menuItems: computed<MenuItem[]>(() => {
         const dataTarget = props.widgetFieldSchema?.options?.dataTarget;
-        if (!widgetGenerateGetters.selectedDataTable || !dataTarget) return [];
-        const dataInfoList = sortWidgetTableFields(Object.keys(widgetGenerateGetters.selectedDataTable?.[dataTarget] ?? {})) ?? [];
+        if (!state.selectedDataTable || !dataTarget) return [];
+        const dataInfoList = sortWidgetTableFields(Object.keys(state.selectedDataTable?.[dataTarget] ?? {})) ?? [];
         return dataInfoList.map((d) => ({
             name: d,
             label: d,
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue b/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue
index 82c731311c..634e36632e 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue
@@ -5,29 +5,33 @@ import {
     PFieldTitle, PToggleButton, PI, PTooltip, PCheckbox,
 } from '@cloudforet/mirinae';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { SubTotalOptions, SubTotalValue } from '@/common/modules/widgets/_widget-fields/sub-total/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
 
+
 const FIELD_KEY = 'subTotal';
 
 const props = defineProps<WidgetFieldComponentProps<SubTotalOptions>>();
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
 
-const storeState = reactive({
-    selectedDataTable: computed<PrivateDataTableModel|PublicDataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
 const state = reactive({
-    isPivotDataTable: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
+    isPivotDataTable: computed<boolean>(() => state.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
     fieldValue: computed<SubTotalValue>(() => props.fieldManager.data[FIELD_KEY].value),
     disabled: computed(() => false),
 });
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue b/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue
index 358d1d6277..3ce07dfeb8 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue
@@ -10,12 +10,11 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/inputs/dropdown/select-dropdown/type';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
 import { i18n } from '@/translations';
 
 
 import ColorInput from '@/common/components/inputs/ColorInput.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import {
@@ -26,22 +25,28 @@ import type {
     TableColumnComparisonOptions,
     TableColumnComparisonValue,
 } from '@/common/modules/widgets/_widget-fields/table-column-comparison/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
+
 const FIELD_KEY = 'tableColumnComparison';
 
 const props = defineProps<WidgetFieldComponentProps<TableColumnComparisonOptions>>();
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
 
-const storeState = reactive({
-    selectedDataTable: computed<PrivateDataTableModel|PublicDataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
 const state = reactive({
-    isPivotDataTable: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
+    isPivotDataTable: computed<boolean>(() => state.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
     fieldValue: computed<TableColumnComparisonValue>(() => props.fieldManager.data[FIELD_KEY].value),
     infoText: computed<TranslateResult>(() => {
         if (props.widgetConfig.widgetName !== 'table') return i18n.t('COMMON.WIDGETS.COMPARISON.INFO_TOOLTIP_TABLE');
@@ -54,7 +59,7 @@ const state = reactive({
         { label: `${i18n.t('COMMON.WIDGETS.COMPARISON.PERCENT')}(%)`, name: 'percent' },
     ]),
     fieldMenuItems: computed<SelectDropdownMenuItem[]>(() => {
-        const dataInfoList = Object.keys(widgetGenerateGetters.selectedDataTable?.data_info ?? {}) ?? [];
+        const dataInfoList = Object.keys(state.selectedDataTable?.data_info ?? {}) ?? [];
         return dataInfoList.map((d) => ({
             name: d,
             label: d,
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue b/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue
index 0bfea5ba01..cd52890579 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue
@@ -7,24 +7,35 @@ import { PFieldGroup } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { XAxisOptions } from '@/common/modules/widgets/_widget-fields/x-axis/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
+
 const FIELD_KEY = 'xAxis';
 const props = defineProps<WidgetFieldComponentProps<XAxisOptions>>();
 
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
+
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
 
 const state = reactive({
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
     menuItems: computed<MenuItem[]>(() => {
         const dataTarget = props.widgetFieldSchema?.options?.dataTarget;
-        if (!widgetGenerateGetters.selectedDataTable || !dataTarget) return [];
-        const dataInfoList = sortWidgetTableFields(Object.keys(widgetGenerateGetters.selectedDataTable?.[dataTarget] ?? {})) ?? [];
+        if (!state.selectedDataTable || !dataTarget) return [];
+        const dataInfoList = sortWidgetTableFields(Object.keys(state.selectedDataTable?.[dataTarget] ?? {})) ?? [];
         return dataInfoList.map((d) => ({
             name: d,
             label: d,
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue b/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue
index 6f8c8848ef..51a70bf4a4 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue
@@ -7,24 +7,35 @@ import { PFieldGroup } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { YAxisOptions } from '@/common/modules/widgets/_widget-fields/y-axis/type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
+
 const FIELD_KEY = 'yAxis';
 const props = defineProps<WidgetFieldComponentProps<YAxisOptions>>();
 
 const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateGetters = widgetGenerateStore.getters;
+const widgetGenerateState = widgetGenerateStore.state;
+
+/* Query */
+const {
+    dataTableList,
+} = useWidgetFormQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
 
 const state = reactive({
+    selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
     menuItems: computed<MenuItem[]>(() => {
         const dataTarget = props.widgetFieldSchema?.options?.dataTarget;
-        if (!widgetGenerateGetters.selectedDataTable || !dataTarget) return [];
-        const dataInfoList = sortWidgetTableFields(Object.keys(widgetGenerateGetters.selectedDataTable?.[dataTarget] ?? {})) ?? [];
+        if (!state.selectedDataTable || !dataTarget) return [];
+        const dataInfoList = sortWidgetTableFields(Object.keys(state.selectedDataTable?.[dataTarget] ?? {})) ?? [];
         return dataInfoList.map((d) => ({
             name: d,
             label: d,
diff --git a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
index d3434610ad..6c960dfba4 100644
--- a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core/index';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
@@ -15,35 +15,29 @@ import {
     isEmpty, sortBy, throttle,
 } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields,
     getWidgetDateRange,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
-import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
+import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
     getWidgetLoadApiQueryDateRange, getWidgetLoadApiQuerySort,
 } from '@/common/modules/widgets/_helpers/widget-load-helper';
@@ -56,7 +50,8 @@ import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DateRange, WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
 } from '@/common/modules/widgets/types/widget-display-type';
@@ -65,9 +60,15 @@ import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 
 
 
+
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
@@ -75,9 +76,8 @@ const { dateRange } = useWidgetDateRange({
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
     isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     unitMap: computed<Record<string, string>>(() => widgetFrameProps.value.unitMap || {}),
@@ -181,24 +181,26 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const queryKey = computed(() => [
-    'widget-load-clustered-column-chart',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.xAxisInfo?.data,
         count: widgetOptionsState.xAxisInfo?.count,
         vars: normalizeAndSerializeVars(props.dashboardVars),
@@ -216,7 +218,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -289,11 +291,6 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     state.chartData = _seriesData;
 };
 
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
-
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
@@ -311,19 +308,31 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
 
 watch([() => state.data, () => props.widgetOptions], ([newData]) => {
     drawChart(newData);
-});
+}, { immediate: true });
 
 
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
-useWidgetInitAndRefresh({ props, emit, loadWidget });
+
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
index 573ff65699..47a3ddf710 100644
--- a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
@@ -1,40 +1,32 @@
 <script setup lang="ts">
 import {
-    computed, defineExpose, reactive, watch,
+    computed, defineExpose, onMounted, reactive, watch,
 } from 'vue';
 
-
 import { useQuery } from '@tanstack/vue-query';
 import { orderBy } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PEmpty,
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetCustomLegend from '@/common/modules/widgets/_components/WidgetCustomLegend.vue';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
-import { getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
 import type {
@@ -42,10 +34,10 @@ import type {
 } from '@/common/modules/widgets/_widget-fields/format-rules/type';
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { GroupByValue } from '@/common/modules/widgets/_widget-fields/group-by/type';
-import type { WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 import type { WidgetLegend } from '@/common/modules/widgets/types/widget-legend-typs';
-import type { DataTableOptions } from '@/common/modules/widgets/types/widget-model';
+
 
 
 const BOX_MIN_WIDTH = 112;
@@ -53,15 +45,19 @@ const MAX_COUNT = 80;
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
     granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
     boxWidth: computed<number>(() => {
         if (!props.width) return BOX_MIN_WIDTH;
         const widgetContentWidth = props.width;
@@ -79,24 +75,26 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const queryKey = computed(() => [
-    'widget-load-color-coded-heatmap',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options as DataTableOptions),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options as DataTableOptions),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: [widgetOptionsState.groupByInfo?.data as string, widgetOptionsState.formatRulesInfo?.field as string],
         vars: normalizeAndSerializeVars(props.dashboardVars),
     },
@@ -116,7 +114,7 @@ const queryResult = useQuery({
             limit: MAX_COUNT,
         },
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -159,10 +157,6 @@ const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emi
 });
 
 /* Util */
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
 const getColor = (val: string, field: string): string => {
     const _label = getReferenceLabel(props.allReferenceTypeInfo, field, val);
     return (widgetOptionsState.formatRulesInfo?.rules ?? []).find((d) => d.text === _label || _label.includes(d.text) || val.includes(d.text))?.color
@@ -178,13 +172,25 @@ watch(() => widgetOptionsState.formatRulesInfo, async () => {
     }));
 }, { immediate: true });
 
-useWidgetInitAndRefresh({ props, emit, loadWidget });
+
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue b/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
index f675093c44..553ff4edaf 100644
--- a/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
@@ -1,42 +1,36 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core/index';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
 import { cloneDeep, throttle } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PTooltip } from '@cloudforet/mirinae';
 import { getContrastingColor, numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetCustomLegend from '@/common/modules/widgets/_components/WidgetCustomLegend.vue';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields, getWidgetDateRange,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
-import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
+import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
     getWidgetLoadApiQueryDateRange,
 } from '@/common/modules/widgets/_helpers/widget-load-helper';
@@ -48,13 +42,15 @@ import type {
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DateRange, WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 import type { WidgetLegend } from '@/common/modules/widgets/types/widget-legend-typs';
 
 import { gray } from '@/styles/colors';
 
 
+
 const colorCodedTableRef = ref<null | HTMLElement>(null);
 const scrollViewRef = ref<null | HTMLElement>(null);
 const Y_AXIS_FIELD_WIDTH = 120;
@@ -62,15 +58,19 @@ const BOX_MIN_WIDTH = 64;
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
     granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
     isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse|undefined>(() => queryResult.data?.value),
@@ -116,23 +116,25 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 const queryKey = computed(() => [
-    'widget-load-heatmap',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.xAxisInfo?.data,
         count: widgetOptionsState.xAxisInfo?.count,
         vars: normalizeAndSerializeVars(props.dashboardVars),
@@ -149,7 +151,7 @@ const queryResult = useQuery({
         ...(!isDateField(widgetOptionsState.xAxisInfo.data) && { page: { start: 1, limit: widgetOptionsState.xAxisInfo?.count } }),
         vars: props.dashboardVars,
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -160,10 +162,6 @@ const errorMessage = computed<string|undefined>(() => {
 });
 
 /* Util */
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
 const targetValue = (xField?: string, yField?: string, format?: 'table'|'tooltip'): number|string => {
     if (!state.data?.results?.length || !xField || !yField) return '--';
 
@@ -240,13 +238,25 @@ watch(() => widgetOptionsState, () => {
 }, { deep: true });
 
 /* Lifecycle */
-useWidgetInitAndRefresh({ props, emit, loadWidget });
+
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 useResizeObserver(colorCodedTableRef, throttle(() => {
     resizeWidget();
diff --git a/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue b/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
index b672382f81..198c76b990 100644
--- a/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core/index';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
@@ -12,26 +12,20 @@ import type {
 import { init } from 'echarts/core';
 import { isEmpty, orderBy, throttle } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
-import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
+import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
 import type { FormatRulesValue, ThresholdValue } from '@/common/modules/widgets/_widget-fields/format-rules/type';
@@ -39,7 +33,7 @@ import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/g
 import type { MaxValue } from '@/common/modules/widgets/_widget-fields/max/type';
 import type { MinValue } from '@/common/modules/widgets/_widget-fields/min/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
-import type { WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetProps, WidgetEmit,
     WidgetExpose,
@@ -47,19 +41,25 @@ import type {
 
 import { gray } from '@/styles/colors';
 
+
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
 const chartContext = ref<HTMLElement|null>(null);
+
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
     granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
 
     unit: computed<string|undefined>(() => {
         if (!widgetOptionsState.dataFieldInfo?.data) return undefined;
@@ -142,24 +142,26 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const queryKey = computed(() => [
-    'widget-load-gauge',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         vars: normalizeAndSerializeVars(props.dashboardVars),
     },
 ]);
@@ -173,7 +175,7 @@ const queryResult = useQuery({
         end: dateRange.value.end,
         vars: props.dashboardVars,
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -188,11 +190,6 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     if (isEmpty(rawData)) return;
     state.chartData = rawData?.results?.[0]?.[widgetOptionsState.dataFieldInfo?.data as string] || 0;
 };
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
-
 
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
@@ -209,15 +206,25 @@ watch([() => state.chartData, () => chartContext.value, () => props.widgetOption
 });
 watch([() => state.data, () => props.widgetOptions], ([newData]) => {
     drawChart(newData);
-});
-
-useWidgetInitAndRefresh({ props, emit, loadWidget });
+}, { immediate: true });
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
diff --git a/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue b/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
index 77bdabf3ba..0a6f36e2f3 100644
--- a/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core/index';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
@@ -13,35 +13,28 @@ import type {
 } from 'echarts/core';
 import { throttle } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { RegionReferenceMap } from '@/store/reference/region-reference-store';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
-import { getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { GroupByValue } from '@/common/modules/widgets/_widget-fields/group-by/type';
-import type { WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetProps, WidgetEmit,
     WidgetExpose,
@@ -51,10 +44,16 @@ import { coral, gray } from '@/styles/colors';
 
 
 
+
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 const REGION_FIELD = 'Region';
 
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
@@ -67,9 +66,8 @@ const storeState = reactive({
 });
 const state = reactive({
     mapLoaded: false,
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     chart: null as EChartsType | null,
@@ -119,24 +117,26 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const queryKey = computed(() => [
-    'widget-load-geo-map',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.groupByInfo?.data,
         vars: normalizeAndSerializeVars(props.dashboardVars),
     },
@@ -152,7 +152,7 @@ const queryResult = useQuery({
         start: dateRange.value.start,
         end: dateRange.value.end,
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -191,10 +191,6 @@ const drawChart = async (rawData: WidgetLoadResponse|null) => {
 
     state.chartData = _seriesData;
 };
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
 
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
@@ -212,18 +208,30 @@ watch([() => state.chartData, () => chartContext.value, () => state.mapLoaded],
 watch([() => state.data, () => props.widgetOptions], async ([newData]) => {
     await loadMap();
     await drawChart(newData);
-});
+}, { immediate: true });
 
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
-useWidgetInitAndRefresh({ props, emit, loadWidget });
+
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue b/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
index 24882737f1..5e574f1650 100644
--- a/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
@@ -11,35 +11,28 @@ import type { EChartsType } from 'echarts/core';
 import { init } from 'echarts/core';
 import { isEmpty, max, throttle } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields,
     getWidgetDateRange,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
-import { getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
     getWidgetLoadApiQueryDateRange,
 } from '@/common/modules/widgets/_helpers/widget-load-helper';
@@ -50,14 +43,21 @@ import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/dat
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DateRange, WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 
 
 
+
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
@@ -66,9 +66,8 @@ const { dateRange } = useWidgetDateRange({
 const chartContext = ref<HTMLElement|null>(null);
 
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
     isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value ?? null),
@@ -182,23 +181,25 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 const queryKey = computed(() => [
-    'widget-load-heatmap',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.xAxisInfo?.data,
         count: widgetOptionsState.xAxisInfo?.count,
         vars: normalizeAndSerializeVars(props.dashboardVars),
@@ -215,7 +216,7 @@ const queryResult = useQuery({
         ...(!isDateField(widgetOptionsState.xAxisInfo.data) && { page: { start: 0, limit: widgetOptionsState.xAxisInfo?.count } }),
         vars: props.dashboardVars,
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -242,11 +243,6 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     state.chartData = getFieldData(rawData);
 };
 
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
-
 /* Watcher */
 watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
     if (chartCtx) {
@@ -257,7 +253,7 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
 
 watch([() => state.data, () => props.widgetOptions], ([newData]) => {
     drawChart(newData);
-});
+}, { immediate: true });
 
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
@@ -269,13 +265,25 @@ const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emi
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
-useWidgetInitAndRefresh({ props, emit, loadWidget });
+
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue b/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
index e91741a7d2..f573169817 100644
--- a/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core/index';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
@@ -15,33 +15,27 @@ import {
     isEmpty, throttle,
 } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel, getWidgetDateFields, getWidgetDateRange,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
-import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
+import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
     getWidgetLoadApiQueryDateRange, getWidgetLoadApiQuerySort,
 } from '@/common/modules/widgets/_helpers/widget-load-helper';
@@ -55,7 +49,8 @@ import type { MissingValueValue } from '@/common/modules/widgets/_widget-fields/
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DateRange, WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
 } from '@/common/modules/widgets/types/widget-display-type';
@@ -64,9 +59,15 @@ import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 
 
 
+
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
@@ -74,9 +75,8 @@ const { dateRange } = useWidgetDateRange({
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
     isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
@@ -186,24 +186,26 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const queryKey = computed(() => [
-    state.isAreaChart ? 'widget-load-area-chart' : 'widget-load-line-chart',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.xAxisInfo?.data,
         count: widgetOptionsState.xAxisInfo?.count,
         vars: normalizeAndSerializeVars(props.dashboardVars),
@@ -221,7 +223,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -272,11 +274,6 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     state.chartData = _seriesData;
 };
 
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
-
 /* Watcher */
 watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
     if (chartCtx) {
@@ -286,7 +283,7 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
 });
 watch([() => state.data, () => props.widgetOptions], ([newData]) => {
     drawChart(newData);
-});
+}, { immediate: true });
 
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
@@ -298,13 +295,25 @@ const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emi
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
-useWidgetInitAndRefresh({ props, emit, loadWidget });
+
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue b/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
index 47a53a660f..d4d4545b3d 100644
--- a/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
@@ -1,41 +1,35 @@
 <script setup lang="ts">
 import { useElementSize, useResizeObserver } from '@vueuse/core';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQueries } from '@tanstack/vue-query';
 import { debounce, throttle } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PI,
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadSumParameters } from '@/schema/dashboard/private-widget/api-verbs/load-sum';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadSumParameters } from '@/schema/dashboard/public-widget/api-verbs/load-sum';
+import type { WidgetLoadResponse, WidgetLoadSumParams } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getPreviousDateRange,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
-import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
+import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { ComparisonValue } from '@/common/modules/widgets/_widget-fields/comparison/type';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
@@ -43,7 +37,8 @@ import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/g
 import type { IconValue } from '@/common/modules/widgets/_widget-fields/icon/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { WidgetHeightValue } from '@/common/modules/widgets/_widget-fields/widget-height/type';
-import type { DateRange, WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
 } from '@/common/modules/widgets/types/widget-display-type';
@@ -51,20 +46,25 @@ import type {
 import { gray } from '@/styles/colors';
 
 
+
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 const topPartRef = ref<null | HTMLElement>(null);
 const valueTextRef = ref<null | HTMLElement>(null);
 
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
     granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
     previousLoading: false,
     isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
@@ -156,38 +156,42 @@ const setValueTextFontSize = debounce(() => {
 }, 300);
 
 /* Api */
-const fetchWidgetData = async (params: PrivateWidgetLoadSumParameters|PublicWidgetLoadSumParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadSumParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.loadSum<PrivateWidgetLoadSumParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.loadSum<PublicWidgetLoadSumParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.loadSum
+        : api.publicWidgetAPI.loadSum;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const baseQueryKey = computed(() => [
-    'widget-load-number-card',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         vars: normalizeAndSerializeVars(props.dashboardVars),
     },
 ]);
 
 const comparisonQueryKey = computed(() => [
-    'widget-load-number-card-comparison',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: state.comparisonDateRange.start,
         end: state.comparisonDateRange.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         vars: normalizeAndSerializeVars(props.dashboardVars),
     },
 ]);
@@ -203,7 +207,7 @@ const queryResults = useQueries({
                 end: dateRange.value.end,
                 vars: props.dashboardVars,
             }),
-            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },
         {
@@ -215,7 +219,7 @@ const queryResults = useQueries({
                 end: state.comparisonDateRange.end,
                 vars: props.dashboardVars,
             }),
-            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries && widgetOptionsState.comparisonInfo?.toggleValue),
+            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && widgetOptionsState.comparisonInfo?.toggleValue),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },
     ],
@@ -228,14 +232,6 @@ const errorMessage = computed<string>(() => {
     return queryResults.value?.[0].error?.message;
 });
 
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) {
-        queryResults.value?.[0].refetch();
-        queryResults.value?.[1].refetch();
-    }
-};
-
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
@@ -246,13 +242,26 @@ const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emi
 useResizeObserver(valueTextRef, throttle(() => {
     setValueTextFontSize();
 }, 500));
-useWidgetInitAndRefresh({ props, emit, loadWidget });
+
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResults.value?.[0].refetch();
+        queryResults.value?.[1].refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue b/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
index 207206c683..03eadc27c4 100644
--- a/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core/index';
 import {
-    computed, defineExpose,
+    computed, defineExpose, onMounted,
     reactive, ref, watch,
 } from 'vue';
 
+import type { QueryKey } from '@tanstack/vue-query';
 import { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { PieSeriesOption } from 'echarts/charts';
@@ -17,32 +18,26 @@ import {
     isEmpty, orderBy, throttle,
 } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
-import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
+import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
     getWidgetLoadApiQueryDateRange,
 } from '@/common/modules/widgets/_helpers/widget-load-helper';
@@ -56,7 +51,7 @@ import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { PieChartTypeValue } from '@/common/modules/widgets/_widget-fields/pie-chart-type/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
-import type { WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
 } from '@/common/modules/widgets/types/widget-display-type';
@@ -65,12 +60,19 @@ import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 
 
 
+
 interface ChartData {
     name: string;
     value: number;
 }
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
+
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
@@ -78,11 +80,10 @@ const { dateRange } = useWidgetDateRange({
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
 
-    data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
+    data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value || null),
     chart: null as EChartsType | null,
     chartData: [] as ChartData[],
     unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[widgetOptionsState.dataFieldInfo?.data as string]),
@@ -196,25 +197,27 @@ const widgetOptionsState = reactive({
 
 
 
-/* Util */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+/* Api */
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
-const queryKey = computed(() => [
-    'widget-load-pie-chart',
+const queryKey = computed<QueryKey>(() => [
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.groupByInfo?.data,
         count: widgetOptionsState.groupByInfo?.count,
         vars: normalizeAndSerializeVars(props.dashboardVars),
@@ -232,7 +235,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -267,11 +270,6 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     state.chartData = _refinedData;
 };
 
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
-
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
@@ -289,17 +287,28 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
 });
 watch([() => state.data, () => props.widgetOptions], ([newData]) => {
     drawChart(newData);
-});
+}, { immediate: true });
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
-useWidgetInitAndRefresh({ props, emit, loadWidget });
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: async () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue b/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue
index 2dbdffbee8..098db40ad2 100644
--- a/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core/index';
 import {
-    computed, defineExpose,
+    computed, defineExpose, onMounted,
     reactive, ref, watch,
 } from 'vue';
 
@@ -17,29 +17,23 @@ import {
     isEmpty, throttle,
 } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { getReferenceLabel } from '@/common/modules/widgets/_helpers/widget-date-helper';
-import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
+import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
     getWidgetLoadApiQueryDateRange, getWidgetLoadApiQuerySort,
 } from '@/common/modules/widgets/_helpers/widget-load-helper';
@@ -51,7 +45,7 @@ import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/g
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { SankeyDimensionsValue } from '@/common/modules/widgets/_widget-fields/sankey-dimensions/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
-import type { WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
 } from '@/common/modules/widgets/types/widget-display-type';
@@ -59,8 +53,15 @@ import type {
 import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 
 
+
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
+
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
@@ -68,9 +69,8 @@ const { dateRange } = useWidgetDateRange({
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     chart: null as EChartsType | null,
@@ -138,25 +138,27 @@ const widgetOptionsState = reactive({
 
 
 
-/* Util */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+/* Api */
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const queryKey = computed(() => [
-    'widget-load-sankey-chart',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         sankeyDimensions: widgetOptionsState.sankeyDimensionsInfo?.data,
         count: widgetOptionsState.sankeyDimensionsInfo?.count,
         vars: normalizeAndSerializeVars(props.dashboardVars),
@@ -174,7 +176,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -214,11 +216,6 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     state.chartData = Array.from(_dataSet).map((d) => ({ name: d }));
 };
 
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
-
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
@@ -237,18 +234,29 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
 });
 watch([() => state.data, () => props.widgetOptions], ([newData]) => {
     drawChart(newData);
-});
+}, { immediate: true });
 
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
-useWidgetInitAndRefresh({ props, emit, loadWidget });
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue b/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
index 7cbceaf272..c94aa2953e 100644
--- a/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
@@ -15,35 +15,29 @@ import {
     isEmpty, throttle,
 } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields,
     getWidgetDateRange,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
-import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
+import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
     getWidgetLoadApiQueryDateRange,
     getWidgetLoadApiQuerySort,
@@ -57,16 +51,23 @@ import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DateRange, WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 
 import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 
 
 
+
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
@@ -74,9 +75,8 @@ const { dateRange } = useWidgetDateRange({
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
     isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
@@ -179,24 +179,26 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const queryKey = computed(() => [
-    'widget-load-stacked-column-chart',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.xAxisInfo?.data,
         count: widgetOptionsState.xAxisInfo?.count,
         vars: normalizeAndSerializeVars(props.dashboardVars),
@@ -214,7 +216,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -264,12 +266,6 @@ const drawChart = (rawData?: WidgetLoadResponse|null) => {
     state.chartData = _seriesData;
 };
 
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
-
-
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
@@ -286,18 +282,30 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
 });
 watch([() => state.data, () => props.widgetOptions], ([newData]) => {
     drawChart(newData);
-});
+}, { immediate: true });
 
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
-useWidgetInitAndRefresh({ props, emit, loadWidget });
+
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue
index a17c19490c..caef648526 100644
--- a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core/index';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
@@ -13,35 +13,29 @@ import {
     isEmpty, throttle,
 } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields,
     getWidgetDateRange,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
-import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
+import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
     getWidgetLoadApiQueryDateRange, getWidgetLoadApiQuerySort,
 } from '@/common/modules/widgets/_helpers/widget-load-helper';
@@ -54,16 +48,23 @@ import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
 import type { YAxisValue } from '@/common/modules/widgets/_widget-fields/y-axis/type';
-import type { DateRange, WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 
 import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 
 
 
+
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
@@ -71,9 +72,8 @@ const { dateRange } = useWidgetDateRange({
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
     isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
@@ -173,24 +173,26 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const queryKey = computed(() => [
-    'widget-load-stacked-horizontal-bar-chart',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.yAxisInfo?.data,
         count: widgetOptionsState.yAxisInfo?.count,
         vars: normalizeAndSerializeVars(props.dashboardVars),
@@ -208,7 +210,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -257,10 +259,6 @@ const drawChart = (rawData?: WidgetLoadResponse|null) => {
     });
     state.chartData = _seriesData;
 };
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
@@ -277,19 +275,30 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
 });
 watch([() => state.data, () => props.widgetOptions], ([newData]) => {
     drawChart(newData);
-});
-
+}, { immediate: true });
 
-useWidgetInitAndRefresh({ props, emit, loadWidget });
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
+
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/table/Table.vue b/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
index b4b51400d7..9d8a6a8915 100644
--- a/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
@@ -1,37 +1,28 @@
 <script setup lang="ts">
 import {
-    defineExpose, reactive, computed, watch,
+    defineExpose, reactive, computed, watch, onMounted,
 } from 'vue';
 
 import { useQueries } from '@tanstack/vue-query';
 import { sortBy } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { Sort } from '@cloudforet/core-lib/space-connector/type';
 import { PPagination } from '@cloudforet/mirinae';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PrivateWidgetLoadSumParameters } from '@/schema/dashboard/private-widget/api-verbs/load-sum';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
-import type { PublicWidgetLoadSumParameters } from '@/schema/dashboard/public-widget/api-verbs/load-sum';
+import type { WidgetLoadParams, WidgetLoadResponse, WidgetLoadSumParams } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
-import { getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { CustomTableColumnWidthValue } from '@/common/modules/widgets/_widget-fields/custom-table-column-width/type';
 import type { DataFieldHeatmapColorValue } from '@/common/modules/widgets/_widget-fields/data-field-heatmap-color/type';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
@@ -47,34 +38,38 @@ import type { TableColumnWidthValue } from '@/common/modules/widgets/_widget-fie
 import type { TextWrapValue } from '@/common/modules/widgets/_widget-fields/text-wrap/type';
 import type { TotalValue } from '@/common/modules/widgets/_widget-fields/total/type';
 import WidgetDataTable from '@/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue';
-import type { TableWidgetField } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { DataTableModel, TableWidgetField } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
-    TableDataItem, WidgetLoadResponse,
+    TableDataItem,
 } from '@/common/modules/widgets/types/widget-data-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
 } from '@/common/modules/widgets/types/widget-display-type';
 import type { DataInfo } from '@/common/modules/widgets/types/widget-model';
 
+
 const REFERENCE_FIELDS = ['Project', 'Workspace', 'Region', 'Service Account'];
 
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
     granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 
-
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
     pageSize: computed<number>(() => (props.size === 'full' ? 30 : 10)),
     thisPage: 1 as number,
     sortBy: [] as Sort[],
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
     dataInfo: computed<DataInfo|undefined>(() => state.dataTable?.data_info),
     tableFields: computed<TableWidgetField[]>(() => {
         const labelFields: TableWidgetField[] = (widgetOptionsState.groupByInfo?.data as string[] ?? []).map(
@@ -146,25 +141,27 @@ const getTableDefaultSortBy = (_sortBy: Sort[]) => {
     const defaultSortBy = [{ key: (widgetOptionsState.dataFieldInfo?.data as string[])?.[0], desc: true }];
     return defaultSortBy;
 };
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
-const fetchWidgetSumData = async (params: PrivateWidgetLoadSumParameters|PublicWidgetLoadSumParameters): Promise<WidgetLoadResponse> => {
+const fetchWidgetSumData = async (params: WidgetLoadSumParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.loadSum<PrivateWidgetLoadSumParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.loadSum<PublicWidgetLoadSumParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.loadSum
+        : api.publicWidgetAPI.loadSum;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const baseQueryKey = computed(() => [
-    'widget-load-table',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
@@ -173,23 +170,25 @@ const baseQueryKey = computed(() => [
         pageSize: state.pageSize,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         groupBy: widgetOptionsState.groupByInfo?.data,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         vars: normalizeAndSerializeVars(props.dashboardVars),
     },
 ]);
 
 const fullDataQueryKey = computed(() => [
-    'widget-load-table-sum',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         enabledTotal: !!widgetOptionsState.totalInfo?.toggleValue,
         vars: normalizeAndSerializeVars(props.dashboardVars),
     },
@@ -213,10 +212,9 @@ const queryResults = useQueries({
                 granularity: widgetOptionsState.granularityInfo?.granularity,
             }),
             enabled: computed<boolean>(() => {
-                const loadEnabled = state.runQueries;
                 const widgetActive = props.widgetState !== 'INACTIVE';
                 const dataTableReady = !!state.dataTable;
-                return loadEnabled && widgetActive && dataTableReady;
+                return widgetActive && dataTableReady;
             }),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },
@@ -230,11 +228,10 @@ const queryResults = useQueries({
                 granularity: widgetOptionsState.granularityInfo?.granularity,
             }),
             enabled: computed<boolean>(() => {
-                const loadEnabled = state.runQueries;
                 const widgetActive = props.widgetState !== 'INACTIVE';
                 const dataTableReady = !!state.dataTable;
                 const totalEnabled = !!widgetOptionsState.totalInfo?.toggleValue;
-                return loadEnabled && widgetActive && dataTableReady && totalEnabled;
+                return widgetActive && dataTableReady && totalEnabled;
             }),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },
@@ -287,24 +284,26 @@ const handleUpdateThisPage = async (newPage: number) => {
     state.thisPage = newPage;
 };
 
-const loadWidget = async (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) {
-        queryResults.value?.[0].refetch();
-        queryResults.value?.[1].refetch();
-    }
-};
-
-useWidgetInitAndRefresh({ props, emit, loadWidget });
-
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResults.value?.[0].refetch();
+        queryResults.value?.[1].refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
-
 </script>
 
 <template>
diff --git a/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue b/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue
index 23a73bf0f1..aa0ef4e1f0 100644
--- a/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue
@@ -7,8 +7,8 @@ import type { Query } from '@cloudforet/core-lib/space-connector/type';
 import { PI, PTooltip } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 
 import type { Currency } from '@/store/display/type';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
diff --git a/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue b/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
index 762e98d215..df39536023 100644
--- a/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core/index';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
 import { useQuery } from '@tanstack/vue-query';
@@ -15,32 +15,26 @@ import {
     isEmpty, orderBy, throttle,
 } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
+import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     normalizeAndSerializeVars,
 } from '@/common/modules/widgets/_helpers/global-variable-helper';
-import {
-    normalizeAndSerializeDataTableOptions,
-} from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
-import { getFormattedNumber, getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
+import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import { getWidgetLoadApiQueryDateRange } from '@/common/modules/widgets/_helpers/widget-load-helper';
 import type { CategoryByValue } from '@/common/modules/widgets/_widget-fields/category-by/type';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
@@ -50,7 +44,7 @@ import type { DisplaySeriesLabelValue } from '@/common/modules/widgets/_widget-f
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
-import type { WidgetLoadResponse } from '@/common/modules/widgets/types/widget-data-type';
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
 } from '@/common/modules/widgets/types/widget-display-type';
@@ -59,12 +53,19 @@ import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 
 
 
+
 interface ChartData {
     name: string;
     value: number;
 }
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
+
+const { keys, api } = useWidgetFormQuery({
+    widgetId: computed(() => props.widgetId),
+    preventLoad: true,
+});
+
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
@@ -72,9 +73,8 @@ const { dateRange } = useWidgetDateRange({
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
-    runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    dataTable: undefined as DataTableModel|undefined,
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     chart: null as EChartsType | null,
@@ -90,7 +90,7 @@ const state = reactive({
                 if (state.unit) _name = `${_name} (${state.unit})`;
                 let _value = numberFormatter(params.value) || '';
                 if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
-                    _value = getFormattedNumber(params.value, widgetOptionsState.dataFieldInfo?.data as string, widgetOptionsState.numberFormatInfo, state.unit);
+                    _value = getFormattedNumber(params.value, widgetOptionsState.numberFormatInfo?.[widgetOptionsState.dataFieldInfo?.data as string], state.unit);
                 }
                 return `${params.marker} ${_name}: <b>${_value}</b>`;
             },
@@ -138,25 +138,27 @@ const widgetOptionsState = reactive({
     displaySeriesLabelInfo: computed<DisplaySeriesLabelValue>(() => props.widgetOptions?.displaySeriesLabel?.value as DisplaySeriesLabelValue),
 });
 
-/* Util */
-const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<WidgetLoadResponse> => {
+/* Api */
+const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
     const defaultFetcher = state.isPrivateWidget
-        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>
-        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>;
+        ? api.privateWidgetAPI.load
+        : api.publicWidgetAPI.load;
     const res = await defaultFetcher(params);
     return res;
 };
 
 const queryKey = computed(() => [
-    'widget-load-treemap',
+    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
+    props.dashboardId,
     props.widgetId,
+    props.widgetName,
     {
         start: dateRange.value.start,
         end: dateRange.value.end,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: state.dataTable?.data_table_id,
-        dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
+        dataTableId: props.dataTableId,
+        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
+        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         groupBy: widgetOptionsState.categoryByInfo?.data,
         count: widgetOptionsState.categoryByInfo?.count,
         vars: normalizeAndSerializeVars(props.dashboardVars),
@@ -174,7 +176,7 @@ const queryResult = useQuery({
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
     }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
@@ -218,11 +220,6 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     }) || [];
 };
 
-const loadWidget = (forceLoad?: boolean) => {
-    state.runQueries = true;
-    if (forceLoad) queryResult.refetch();
-};
-
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
@@ -239,18 +236,30 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
 });
 watch([() => state.data, () => props.widgetOptions], ([newData]) => {
     drawChart(newData);
-});
+}, { immediate: true });
 
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
-useWidgetInitAndRefresh({ props, emit, loadWidget });
+
 watch(() => props.dataTableId, async (newDataTableId) => {
     if (!newDataTableId) return;
-    state.dataTable = await getWidgetDataTable(newDataTableId);
+    const fetcher = state.isPrivateWidget
+        ? api.privateDataTableAPI.get
+        : api.publicDataTableAPI.get;
+    try {
+        state.dataTable = await fetcher({ data_table_id: newDataTableId });
+    } catch (e) {
+        ErrorHandler.handleError(e);
+    }
 }, { immediate: true });
 defineExpose<WidgetExpose>({
-    loadWidget,
+    loadWidget: () => {
+        queryResult.refetch();
+    },
+});
+onMounted(() => {
+    emit('mounted', props.widgetName);
 });
 </script>
 
diff --git a/apps/web/src/common/modules/widgets/types/widget-data-table-type.ts b/apps/web/src/common/modules/widgets/types/widget-data-table-type.ts
index 04d6ad0178..652d0f4e5c 100644
--- a/apps/web/src/common/modules/widgets/types/widget-data-table-type.ts
+++ b/apps/web/src/common/modules/widgets/types/widget-data-table-type.ts
@@ -1,8 +1,11 @@
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { DataTableQueryFilter } from '@/common/modules/widgets/types/widget-model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 
+import type { DataTableQueryFilter } from '@/common/modules/widgets/types/widget-model';
 
+export type DataTableModel = PublicDataTableModel | PrivateDataTableModel;
 
 type Handler = (item:any) => string;
 
@@ -39,3 +42,9 @@ export interface TransformDataTableProps<OperatorOptions> {
     originData: OperatorOptions;
     invalid?: boolean;
 }
+
+export interface DataTableReference {
+    data_table_id: string;
+    parents: string[];
+    children: string[];
+}
diff --git a/apps/web/src/common/modules/widgets/types/widget-data-type.ts b/apps/web/src/common/modules/widgets/types/widget-data-type.ts
index 4b654a4078..b5fcb98eca 100644
--- a/apps/web/src/common/modules/widgets/types/widget-data-type.ts
+++ b/apps/web/src/common/modules/widgets/types/widget-data-type.ts
@@ -1,4 +1,4 @@
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 
 import type { DATE_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import type { DataInfo, LabelsInfo } from '@/common/modules/widgets/types/widget-model';
@@ -17,5 +17,5 @@ export type TableDataItem = Record<string, any>;
 export type WidgetLoadResponse = ListResponse<Record<string, string|number>> & {
     labels_info: LabelsInfo;
     data_info: DataInfo;
-    order: string[];
+    order?: string[];
 };
diff --git a/apps/web/src/common/modules/widgets/types/widget-display-type.ts b/apps/web/src/common/modules/widgets/types/widget-display-type.ts
index c72e260393..0a3b0ba26e 100644
--- a/apps/web/src/common/modules/widgets/types/widget-display-type.ts
+++ b/apps/web/src/common/modules/widgets/types/widget-display-type.ts
@@ -1,9 +1,9 @@
 import type {
     DashboardOptions,
     DashboardVars,
-} from '@/schema/dashboard/_types/dashboard-type';
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
+} from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 
 import type { WIDGET_SIZE } from '@/common/modules/widgets/_constants/widget-display-constant';
 import type { WidgetFieldValue } from '@/common/modules/widgets/_widget-field-value-manager/type';
@@ -34,6 +34,7 @@ export interface WidgetProps {
     loading?: boolean;
     dashboardOptions?: DashboardOptions;
     dashboardVars?: DashboardVars;
+    dashboardId?: string;
     disableRefreshOnVariableChange?: boolean;
     disableRefreshOnLoading?: boolean;
     allReferenceTypeInfo: AllReferenceTypeInfo;
diff --git a/apps/web/src/common/modules/widgets/types/widget-frame-type.ts b/apps/web/src/common/modules/widgets/types/widget-frame-type.ts
index 02975d6ac3..a5a67738ae 100644
--- a/apps/web/src/common/modules/widgets/types/widget-frame-type.ts
+++ b/apps/web/src/common/modules/widgets/types/widget-frame-type.ts
@@ -1,6 +1,6 @@
 import type { TranslateResult } from 'vue-i18n';
 
-import type { WIDGET_SIZE } from '@/schema/dashboard/_constants/widget-constant';
+import type { WIDGET_SIZE } from '@/api-clients/dashboard/_constants/widget-constant';
 
 import type { WidgetFieldValue } from '@/common/modules/widgets/_widget-field-value-manager/type';
 import type { WidgetFieldName } from '@/common/modules/widgets/types/widget-field-type';
diff --git a/apps/web/src/common/modules/workspace/WorkspaceSelectDropdown.vue b/apps/web/src/common/modules/workspace/WorkspaceSelectDropdown.vue
index cf81076439..233b4bd439 100644
--- a/apps/web/src/common/modules/workspace/WorkspaceSelectDropdown.vue
+++ b/apps/web/src/common/modules/workspace/WorkspaceSelectDropdown.vue
@@ -13,7 +13,7 @@ import type {
 } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
diff --git a/apps/web/src/common/pages/CostReportDetailPage.vue b/apps/web/src/common/pages/CostReportDetailPage.vue
index 6d4c4af45b..551e85765f 100644
--- a/apps/web/src/common/pages/CostReportDetailPage.vue
+++ b/apps/web/src/common/pages/CostReportDetailPage.vue
@@ -14,10 +14,10 @@ import { PLink, PDataTable, PIconButton } from '@cloudforet/mirinae';
 import type { DataTableFieldType } from '@cloudforet/mirinae/src/data-display/tables/data-table/type';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
-import type { CostReportDataAnalyzeParameters } from '@/schema/cost-analysis/cost-report-data/api-verbs/analyze';
-import type { CostReportGetParameters } from '@/schema/cost-analysis/cost-report/api-verbs/get';
-import type { CostReportModel } from '@/schema/cost-analysis/cost-report/model';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
+import type { CostReportDataAnalyzeParameters } from '@/api-clients/cost-analysis/cost-report-data/schema/api-verbs/analyze';
+import type { CostReportGetParameters } from '@/api-clients/cost-analysis/cost-report/schema/api-verbs/get';
+import type { CostReportModel } from '@/api-clients/cost-analysis/cost-report/schema/model';
 import { setI18nLocale } from '@/translations';
 
 import { ERROR_ROUTE } from '@/router/constant';
@@ -40,6 +40,7 @@ import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 import ConsoleLogo from '@/services/auth/components/ConsoleLogo.vue';
 
 
+
 const router = useRouter();
 
 type CostReportDataAnalyzeResult = {
diff --git a/apps/web/src/lib/config/composables/use-is-alert-manager-v2-enabled.ts b/apps/web/src/lib/config/composables/use-is-alert-manager-v2-enabled.ts
new file mode 100644
index 0000000000..201ad95d5f
--- /dev/null
+++ b/apps/web/src/lib/config/composables/use-is-alert-manager-v2-enabled.ts
@@ -0,0 +1,16 @@
+import { useDomainStore } from '@/store/domain/domain-store';
+
+import config from '@/lib/config';
+
+/* NOTE:
+*  This hook will be removed or refactored once the global config is improved.
+* */
+
+export const useIsAlertManagerV2Enabled = (): boolean => {
+    const domainStore = useDomainStore();
+    const domainStoreState = domainStore.state;
+
+    const enabledDomains = config.get('ADVANCED_SERVICE')?.alert_manager_v2 ?? [];
+
+    return enabledDomains.includes(domainStoreState.domainId);
+};
diff --git a/apps/web/src/lib/file-manager/type.ts b/apps/web/src/lib/file-manager/type.ts
index 12f05e0248..c31340b06c 100644
--- a/apps/web/src/lib/file-manager/type.ts
+++ b/apps/web/src/lib/file-manager/type.ts
@@ -1,3 +1,3 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export type FileManagerResourceGroupType = ResourceGroupType|'USER'|'PUBLIC';
diff --git a/apps/web/src/lib/helper/config-data-helper.ts b/apps/web/src/lib/helper/config-data-helper.ts
index cdc9c2aef6..525ebdc75f 100644
--- a/apps/web/src/lib/helper/config-data-helper.ts
+++ b/apps/web/src/lib/helper/config-data-helper.ts
@@ -1,7 +1,7 @@
 import { cloneDeep, find } from 'lodash';
 
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 import type { MetricExampleModel } from '@/schema/inventory/metric-example/model';
 
diff --git a/apps/web/src/lib/helper/file-download-helper/index.ts b/apps/web/src/lib/helper/file-download-helper/index.ts
index a8b99ea6d9..6c7e9b575f 100644
--- a/apps/web/src/lib/helper/file-download-helper/index.ts
+++ b/apps/web/src/lib/helper/file-download-helper/index.ts
@@ -3,7 +3,7 @@ import axios from 'axios';
 import { downloadByFileUrl } from '@cloudforet/core-lib/file-download';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ExportResponse } from '@/schema/_common/api-verbs/export';
+import type { ExportResponse } from '@/api-clients/_common/schema/api-verbs/export';
 import { i18n } from '@/translations';
 
 import config from '@/lib/config';
diff --git a/apps/web/src/lib/helper/router-recent-helper.ts b/apps/web/src/lib/helper/router-recent-helper.ts
index f12e6a0ffd..cc1787e7d5 100644
--- a/apps/web/src/lib/helper/router-recent-helper.ts
+++ b/apps/web/src/lib/helper/router-recent-helper.ts
@@ -11,7 +11,7 @@ import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/r
 import { MANAGED_COST_QUERY_SET_ID_LIST } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface RecentConfig {
     itemType: RecentType;
diff --git a/apps/web/src/lib/menu/menu-info.ts b/apps/web/src/lib/menu/menu-info.ts
index f0f7f7b329..aa8bde216f 100644
--- a/apps/web/src/lib/menu/menu-info.ts
+++ b/apps/web/src/lib/menu/menu-info.ts
@@ -11,7 +11,7 @@ import { IAM_ROUTE } from '@/services/iam/routes/route-constant';
 import { INFO_ROUTE } from '@/services/info/routes/route-constant';
 import { MY_PAGE_ROUTE } from '@/services/my-page/routes/route-constant';
 import { OPS_FLOW_ROUTE } from '@/services/ops-flow/routes/route-constant';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { WORKSPACE_HOME_ROUTE } from '@/services/workspace-home/routes/route-constant';
 
 export const MENU_INFO_MAP: Record<MenuId, MenuInfo> = Object.freeze({
diff --git a/apps/web/src/lib/reference/referenceRouter.ts b/apps/web/src/lib/reference/referenceRouter.ts
index 46da700733..76397ab3e2 100644
--- a/apps/web/src/lib/reference/referenceRouter.ts
+++ b/apps/web/src/lib/reference/referenceRouter.ts
@@ -8,7 +8,7 @@ import { QueryHelper } from '@cloudforet/core-lib/query';
 import type { Reference, ResourceType } from '@/lib/reference/type';
 
 import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface LinkFormatter {
     (baseUrl: string, data: string, reference: Reference, query: Location['query']): Location;
diff --git a/apps/web/src/lib/site-initializer/last-accessed-workspace.ts b/apps/web/src/lib/site-initializer/last-accessed-workspace.ts
index 6fb83666cd..0675f0039b 100644
--- a/apps/web/src/lib/site-initializer/last-accessed-workspace.ts
+++ b/apps/web/src/lib/site-initializer/last-accessed-workspace.ts
@@ -1,6 +1,6 @@
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserConfigListParameters } from '@/schema/config/user-config/api-verbs/list';
 import type { UserConfigSetParameters } from '@/schema/config/user-config/api-verbs/set';
 import type { UserConfigModel } from '@/schema/config/user-config/model';
diff --git a/apps/web/src/lib/variable-models/managed-model/resource-model/cost-data-source-variable-model.ts b/apps/web/src/lib/variable-models/managed-model/resource-model/cost-data-source-variable-model.ts
index 23f2001cbd..d8753617dd 100644
--- a/apps/web/src/lib/variable-models/managed-model/resource-model/cost-data-source-variable-model.ts
+++ b/apps/web/src/lib/variable-models/managed-model/resource-model/cost-data-source-variable-model.ts
@@ -1,4 +1,5 @@
-import type { CostDataSourceModel } from '@/schema/cost-analysis/data-source/model';
+
+import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
 
 import ResourceVariableModel from '@/lib/variable-models/_base/resource-variable-model';
 import type { VariableModelConstructorConfig } from '@/lib/variable-models/_base/types';
diff --git a/apps/web/src/lib/variable-models/managed-model/resource-model/cost-variable-model.ts b/apps/web/src/lib/variable-models/managed-model/resource-model/cost-variable-model.ts
index 58ba63cd68..54207dfd3e 100644
--- a/apps/web/src/lib/variable-models/managed-model/resource-model/cost-variable-model.ts
+++ b/apps/web/src/lib/variable-models/managed-model/resource-model/cost-variable-model.ts
@@ -1,4 +1,4 @@
-import type { CostModel } from '@/schema/cost-analysis/cost/model';
+import type { CostModel } from '@/api-clients/cost-analysis/cost/schema/model';
 
 import ResourceVariableModel from '@/lib/variable-models/_base/resource-variable-model';
 import type { VariableModelConstructorConfig } from '@/lib/variable-models/_base/types';
diff --git a/apps/web/src/lib/variable-models/managed-model/resource-model/project-variable-model.ts b/apps/web/src/lib/variable-models/managed-model/resource-model/project-variable-model.ts
index a0d7f05c34..b1613e91d9 100644
--- a/apps/web/src/lib/variable-models/managed-model/resource-model/project-variable-model.ts
+++ b/apps/web/src/lib/variable-models/managed-model/resource-model/project-variable-model.ts
@@ -1,7 +1,7 @@
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 
-import type { ListResponse as ApiListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse as ApiListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectGroupListParameters } from '@/schema/identity/project-group/api-verbs/list';
 import type { ProjectGroupModel } from '@/schema/identity/project-group/model';
 import type { ProjectModel } from '@/schema/identity/project/model';
diff --git a/apps/web/src/lib/variable-models/managed-model/resource-model/unified-cost-variable-model.ts b/apps/web/src/lib/variable-models/managed-model/resource-model/unified-cost-variable-model.ts
index c04b3ae85e..fab9820982 100644
--- a/apps/web/src/lib/variable-models/managed-model/resource-model/unified-cost-variable-model.ts
+++ b/apps/web/src/lib/variable-models/managed-model/resource-model/unified-cost-variable-model.ts
@@ -1,4 +1,5 @@
-import type { UnifiedCostModel } from '@/schema/cost-analysis/unified-cost/model';
+
+import type { UnifiedCostModel } from '@/api-clients/cost-analysis/unified-cost/schema/model';
 
 import ResourceVariableModel from '@/lib/variable-models/_base/resource-variable-model';
 import type { VariableModelConstructorConfig } from '@/lib/variable-models/_base/types';
diff --git a/apps/web/src/router/workspace-routes.ts b/apps/web/src/router/workspace-routes.ts
index b1c03a65e5..193fec0fbe 100644
--- a/apps/web/src/router/workspace-routes.ts
+++ b/apps/web/src/router/workspace-routes.ts
@@ -8,7 +8,7 @@ import dashboardsRoute from '@/services/dashboards/routes/routes';
 import iamRoutes from '@/services/iam/routes/routes';
 import infoRoute from '@/services/info/routes/routes';
 import opsFlowRoutes from '@/services/ops-flow/routes/routes';
-import projectRoute from '@/services/project/routes/routes';
+import projectRouteV1 from '@/services/project-v1/routes/routes';
 import workspaceHomeRoute from '@/services/workspace-home/routes/routes';
 
 
@@ -17,7 +17,7 @@ export const workspaceRoutes: RouteConfig[] = [
     dashboardsRoute,
     iamRoutes,
     assetInventoryRouteV1,
-    projectRoute,
+    projectRouteV1,
     alertManagerRoute,
     costExplorerRoute,
     infoRoute,
diff --git a/apps/web/src/schema/alert-manager/escalation-policy/api-verbs/create.ts b/apps/web/src/schema/alert-manager/escalation-policy/api-verbs/create.ts
index d725f2fefb..d4ae69a1b3 100644
--- a/apps/web/src/schema/alert-manager/escalation-policy/api-verbs/create.ts
+++ b/apps/web/src/schema/alert-manager/escalation-policy/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     EscalationPolicyFinishConditionType,
     EscalationPolicyRepeatType,
diff --git a/apps/web/src/schema/alert-manager/escalation-policy/api-verbs/update.ts b/apps/web/src/schema/alert-manager/escalation-policy/api-verbs/update.ts
index a38e7d3e1f..933f30a875 100644
--- a/apps/web/src/schema/alert-manager/escalation-policy/api-verbs/update.ts
+++ b/apps/web/src/schema/alert-manager/escalation-policy/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     EscalationPolicyFinishConditionType,
     EscalationPolicyRepeatType,
diff --git a/apps/web/src/schema/alert-manager/escalation-policy/model.ts b/apps/web/src/schema/alert-manager/escalation-policy/model.ts
index d7871941b6..0293026271 100644
--- a/apps/web/src/schema/alert-manager/escalation-policy/model.ts
+++ b/apps/web/src/schema/alert-manager/escalation-policy/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     EscalationPolicyFinishConditionType,
     EscalationPolicyRepeatType,
diff --git a/apps/web/src/schema/alert-manager/event-rule/api-verbs/create.ts b/apps/web/src/schema/alert-manager/event-rule/api-verbs/create.ts
index 7c22fbcbe5..ddda29c748 100644
--- a/apps/web/src/schema/alert-manager/event-rule/api-verbs/create.ts
+++ b/apps/web/src/schema/alert-manager/event-rule/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     EventRuleActionsType,
     EventRuleConditionsPolicyType,
diff --git a/apps/web/src/schema/alert-manager/event-rule/api-verbs/update.ts b/apps/web/src/schema/alert-manager/event-rule/api-verbs/update.ts
index 4e38c164e8..dbe47c84e1 100644
--- a/apps/web/src/schema/alert-manager/event-rule/api-verbs/update.ts
+++ b/apps/web/src/schema/alert-manager/event-rule/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     EventRuleActionsType,
     EventRuleConditionsPolicyType,
diff --git a/apps/web/src/schema/alert-manager/event-rule/model.ts b/apps/web/src/schema/alert-manager/event-rule/model.ts
index 6dac06e403..539eef9b03 100644
--- a/apps/web/src/schema/alert-manager/event-rule/model.ts
+++ b/apps/web/src/schema/alert-manager/event-rule/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     EventRuleActionsType,
     EventRuleConditionsPolicyType,
diff --git a/apps/web/src/schema/alert-manager/notification-protocol/api-verbs/create.ts b/apps/web/src/schema/alert-manager/notification-protocol/api-verbs/create.ts
index 87b4842558..260e2f04eb 100644
--- a/apps/web/src/schema/alert-manager/notification-protocol/api-verbs/create.ts
+++ b/apps/web/src/schema/alert-manager/notification-protocol/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { NotificationProtocolPluginInfoRequestType } from '@/schema/alert-manager/notification-protocol/type';
 
 
diff --git a/apps/web/src/schema/alert-manager/notification-protocol/api-verbs/update.ts b/apps/web/src/schema/alert-manager/notification-protocol/api-verbs/update.ts
index 70cdda10b0..1384d1b0b1 100644
--- a/apps/web/src/schema/alert-manager/notification-protocol/api-verbs/update.ts
+++ b/apps/web/src/schema/alert-manager/notification-protocol/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface NotificationProtocolUpdateParameters {
     protocol_id: string;
diff --git a/apps/web/src/schema/alert-manager/notification-protocol/model.ts b/apps/web/src/schema/alert-manager/notification-protocol/model.ts
index afe35ab61a..09858280e6 100644
--- a/apps/web/src/schema/alert-manager/notification-protocol/model.ts
+++ b/apps/web/src/schema/alert-manager/notification-protocol/model.ts
@@ -1,6 +1,6 @@
 import type { TranslateResult } from 'vue-i18n';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     NotificationProtocolPluginInfoType,
     NotificationProtocolStateType,
diff --git a/apps/web/src/schema/alert-manager/service-channel/api-verbs/create-forward-channel.ts b/apps/web/src/schema/alert-manager/service-channel/api-verbs/create-forward-channel.ts
index 8a60e983d4..9cc120c911 100644
--- a/apps/web/src/schema/alert-manager/service-channel/api-verbs/create-forward-channel.ts
+++ b/apps/web/src/schema/alert-manager/service-channel/api-verbs/create-forward-channel.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ServiceChannelDataType, ServiceChannelScheduleInfoType } from '@/schema/alert-manager/service-channel/type';
 
 export interface ServiceChannelCreateForwardChannelParameters {
diff --git a/apps/web/src/schema/alert-manager/service-channel/api-verbs/create.ts b/apps/web/src/schema/alert-manager/service-channel/api-verbs/create.ts
index c66e40c91e..7a9cb76cdc 100644
--- a/apps/web/src/schema/alert-manager/service-channel/api-verbs/create.ts
+++ b/apps/web/src/schema/alert-manager/service-channel/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ServiceChannelDataType, ServiceChannelScheduleInfoType } from '@/schema/alert-manager/service-channel/type';
 
 export interface ServiceChannelCreateParameters {
diff --git a/apps/web/src/schema/alert-manager/service-channel/api-verbs/update.ts b/apps/web/src/schema/alert-manager/service-channel/api-verbs/update.ts
index 3005abb264..51dc4c2801 100644
--- a/apps/web/src/schema/alert-manager/service-channel/api-verbs/update.ts
+++ b/apps/web/src/schema/alert-manager/service-channel/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ServiceChannelDataType, ServiceChannelScheduleInfoType } from '@/schema/alert-manager/service-channel/type';
 
 export interface ServiceChannelUpdateParameters {
diff --git a/apps/web/src/schema/alert-manager/service-channel/model.ts b/apps/web/src/schema/alert-manager/service-channel/model.ts
index 196dba04af..0d8bea6974 100644
--- a/apps/web/src/schema/alert-manager/service-channel/model.ts
+++ b/apps/web/src/schema/alert-manager/service-channel/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     ServiceChannelDataType,
     ServiceChannelStateType,
diff --git a/apps/web/src/schema/alert-manager/service/api-verbs/create.ts b/apps/web/src/schema/alert-manager/service/api-verbs/create.ts
index 578c281ce4..21a95bb002 100644
--- a/apps/web/src/schema/alert-manager/service/api-verbs/create.ts
+++ b/apps/web/src/schema/alert-manager/service/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { MembersType, ServiceOptionsType } from '@/schema/alert-manager/service/type';
 
 export interface ServiceCreateParameters {
diff --git a/apps/web/src/schema/alert-manager/service/api-verbs/update.ts b/apps/web/src/schema/alert-manager/service/api-verbs/update.ts
index e9feef9c4a..bcfb7b6917 100644
--- a/apps/web/src/schema/alert-manager/service/api-verbs/update.ts
+++ b/apps/web/src/schema/alert-manager/service/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ServiceOptionsType } from '@/schema/alert-manager/service/type';
 
 export interface ServiceUpdateParameters {
diff --git a/apps/web/src/schema/alert-manager/service/model.ts b/apps/web/src/schema/alert-manager/service/model.ts
index 32f14eebdf..9abedbd232 100644
--- a/apps/web/src/schema/alert-manager/service/model.ts
+++ b/apps/web/src/schema/alert-manager/service/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     AlertsInfoType, AlertsType, MembersType, ServiceOptionsType,
 } from '@/schema/alert-manager/service/type';
diff --git a/apps/web/src/schema/alert-manager/user-channel/api-verbs/create.ts b/apps/web/src/schema/alert-manager/user-channel/api-verbs/create.ts
index 5c66bd688d..1ba874cf52 100644
--- a/apps/web/src/schema/alert-manager/user-channel/api-verbs/create.ts
+++ b/apps/web/src/schema/alert-manager/user-channel/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { UserChannelScheduleInfoType } from '@/schema/alert-manager/user-channel/type';
 
 export interface UserChannelCreateParameters {
diff --git a/apps/web/src/schema/alert-manager/user-channel/api-verbs/update.ts b/apps/web/src/schema/alert-manager/user-channel/api-verbs/update.ts
index 4138955b74..b6a8cbe81c 100644
--- a/apps/web/src/schema/alert-manager/user-channel/api-verbs/update.ts
+++ b/apps/web/src/schema/alert-manager/user-channel/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { UserChannelScheduleInfoType } from '@/schema/alert-manager/user-channel/type';
 
 export interface UserChannelUpdateParameters {
diff --git a/apps/web/src/schema/alert-manager/user-channel/model.ts b/apps/web/src/schema/alert-manager/user-channel/model.ts
index d4d18dc6c5..bc046d561b 100644
--- a/apps/web/src/schema/alert-manager/user-channel/model.ts
+++ b/apps/web/src/schema/alert-manager/user-channel/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { UserChannelScheduleInfoType, UserChannelStateType } from '@/schema/alert-manager/user-channel/type';
 
 export interface UserChannelModel {
diff --git a/apps/web/src/schema/alert-manager/user-group-channel/api-verbs/create.ts b/apps/web/src/schema/alert-manager/user-group-channel/api-verbs/create.ts
index 6c239e1cfb..0b3172b938 100644
--- a/apps/web/src/schema/alert-manager/user-group-channel/api-verbs/create.ts
+++ b/apps/web/src/schema/alert-manager/user-group-channel/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     UserGroupChannelScheduleInfoType,
 } from '@/schema/alert-manager/user-group-channel/type';
diff --git a/apps/web/src/schema/alert-manager/user-group-channel/api-verbs/update.ts b/apps/web/src/schema/alert-manager/user-group-channel/api-verbs/update.ts
index eeb711ed19..63d204af10 100644
--- a/apps/web/src/schema/alert-manager/user-group-channel/api-verbs/update.ts
+++ b/apps/web/src/schema/alert-manager/user-group-channel/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { UserGroupChannelScheduleInfoType } from '@/schema/alert-manager/user-group-channel/type';
 
 export interface UserGroupChannelUpdateParameters {
diff --git a/apps/web/src/schema/alert-manager/user-group-channel/model.ts b/apps/web/src/schema/alert-manager/user-group-channel/model.ts
index d5d386cd88..2c86789ad5 100644
--- a/apps/web/src/schema/alert-manager/user-group-channel/model.ts
+++ b/apps/web/src/schema/alert-manager/user-group-channel/model.ts
@@ -1,5 +1,5 @@
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     UserGroupChannelStateType,
     UserGroupChannelScheduleInfoType,
diff --git a/apps/web/src/schema/alert-manager/webhook/api-verbs/create.ts b/apps/web/src/schema/alert-manager/webhook/api-verbs/create.ts
index 3561de794e..0242ea89c0 100644
--- a/apps/web/src/schema/alert-manager/webhook/api-verbs/create.ts
+++ b/apps/web/src/schema/alert-manager/webhook/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { WebhookPluginInfoType } from '@/schema/alert-manager/webhook/type';
 
 export interface WebhookCreateParameters {
diff --git a/apps/web/src/schema/alert-manager/webhook/api-verbs/update.ts b/apps/web/src/schema/alert-manager/webhook/api-verbs/update.ts
index 40573436c2..f6767a508c 100644
--- a/apps/web/src/schema/alert-manager/webhook/api-verbs/update.ts
+++ b/apps/web/src/schema/alert-manager/webhook/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface WebhookUpdateParameters {
     webhook_id: string;
diff --git a/apps/web/src/schema/alert-manager/webhook/model.ts b/apps/web/src/schema/alert-manager/webhook/model.ts
index 94fdd45a72..35017a43c0 100644
--- a/apps/web/src/schema/alert-manager/webhook/model.ts
+++ b/apps/web/src/schema/alert-manager/webhook/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     WebhookPluginInfoType, WebhookRequestType, WebhookStateType, WebhookMessageFormatType,
 } from '@/schema/alert-manager/webhook/type';
diff --git a/apps/web/src/schema/board/post/api-verbs/create.ts b/apps/web/src/schema/board/post/api-verbs/create.ts
index 456eb272df..b951186517 100644
--- a/apps/web/src/schema/board/post/api-verbs/create.ts
+++ b/apps/web/src/schema/board/post/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { PostBoardType } from '@/schema/board/post/type';
 
 export interface PostCreateParameters {
diff --git a/apps/web/src/schema/board/post/model.ts b/apps/web/src/schema/board/post/model.ts
index 2c8f92433a..c0469b880b 100644
--- a/apps/web/src/schema/board/post/model.ts
+++ b/apps/web/src/schema/board/post/model.ts
@@ -1,4 +1,4 @@
-import type { ResourceGroupType, ContentsType } from '@/schema/_common/type';
+import type { ResourceGroupType, ContentsType } from '@/api-clients/_common/schema/type';
 import type { PostBoardType } from '@/schema/board/post/type';
 import type { FileModel } from '@/schema/file-manager/model';
 
diff --git a/apps/web/src/schema/config/domain-config/model.ts b/apps/web/src/schema/config/domain-config/model.ts
index 94c453b948..29dfe2e040 100644
--- a/apps/web/src/schema/config/domain-config/model.ts
+++ b/apps/web/src/schema/config/domain-config/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface DomainConfigModel<T = Record<string, any>> {
     name: string;
diff --git a/apps/web/src/schema/config/public-config/model.ts b/apps/web/src/schema/config/public-config/model.ts
index 49f738172b..bc6fcd0e79 100644
--- a/apps/web/src/schema/config/public-config/model.ts
+++ b/apps/web/src/schema/config/public-config/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface PublicConfigModel<T = Record<string, any>> {
     name: string;
diff --git a/apps/web/src/schema/config/shared-config/api-verbs/create.ts b/apps/web/src/schema/config/shared-config/api-verbs/create.ts
index 0de72dd71c..a1756bab9c 100644
--- a/apps/web/src/schema/config/shared-config/api-verbs/create.ts
+++ b/apps/web/src/schema/config/shared-config/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface SharedConfigCreateParameters<T = Record<string, any>> {
     name: string;
diff --git a/apps/web/src/schema/config/shared-config/model.ts b/apps/web/src/schema/config/shared-config/model.ts
index 4549d58ee4..34559ff59e 100644
--- a/apps/web/src/schema/config/shared-config/model.ts
+++ b/apps/web/src/schema/config/shared-config/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface SharedConfigModel<T = Record<string, any>> {
     name: string;
diff --git a/apps/web/src/schema/config/user-config/api-verbs/create.ts b/apps/web/src/schema/config/user-config/api-verbs/create.ts
index 3fabe9706e..821177781c 100644
--- a/apps/web/src/schema/config/user-config/api-verbs/create.ts
+++ b/apps/web/src/schema/config/user-config/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface UserConfigCreateParameters<T = Record<string, any>> {
     name: string;
diff --git a/apps/web/src/schema/config/user-config/api-verbs/set.ts b/apps/web/src/schema/config/user-config/api-verbs/set.ts
index 0e9e11f75d..724e084075 100644
--- a/apps/web/src/schema/config/user-config/api-verbs/set.ts
+++ b/apps/web/src/schema/config/user-config/api-verbs/set.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface UserConfigSetParameters<T = Record<string, any>> {
     name: string;
diff --git a/apps/web/src/schema/config/user-config/api-verbs/update.ts b/apps/web/src/schema/config/user-config/api-verbs/update.ts
index 10f0947d57..f253bf4cc2 100644
--- a/apps/web/src/schema/config/user-config/api-verbs/update.ts
+++ b/apps/web/src/schema/config/user-config/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface UserConfigUpdateParameters<T = Record<string, any>> {
     name: string;
diff --git a/apps/web/src/schema/config/user-config/model.ts b/apps/web/src/schema/config/user-config/model.ts
index df7d85f6b5..a110b43082 100644
--- a/apps/web/src/schema/config/user-config/model.ts
+++ b/apps/web/src/schema/config/user-config/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface UserConfigModel<T = Record<string, any>> {
     name: string;
diff --git a/apps/web/src/schema/cost-analysis/cost-query-set/api-verbs/create.ts b/apps/web/src/schema/cost-analysis/cost-query-set/api-verbs/create.ts
deleted file mode 100644
index 6121c63d35..0000000000
--- a/apps/web/src/schema/cost-analysis/cost-query-set/api-verbs/create.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { Tags } from '@/schema/_common/model';
-import type { CostQuerySetOption } from '@/schema/cost-analysis/cost-query-set/type';
-
-
-export interface CostQuerySetCreateParameters {
-    data_source_id: string;
-    name: string;
-    options: CostQuerySetOption;
-    tags?: Tags;
-}
diff --git a/apps/web/src/schema/cost-analysis/cost-query-set/api-verbs/update.ts b/apps/web/src/schema/cost-analysis/cost-query-set/api-verbs/update.ts
deleted file mode 100644
index 1636db616b..0000000000
--- a/apps/web/src/schema/cost-analysis/cost-query-set/api-verbs/update.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { Tags } from '@/schema/_common/model';
-import type { CostQuerySetOption } from '@/schema/cost-analysis/cost-query-set/type';
-
-
-export interface CostQuerySetUpdateParameters {
-    cost_query_set_id: string;
-    name?: string;
-    options?: CostQuerySetOption;
-    tags?: Tags;
-}
diff --git a/apps/web/src/schema/dashboard/_types/folder-type.ts b/apps/web/src/schema/dashboard/_types/folder-type.ts
deleted file mode 100644
index 56eb9e9e8d..0000000000
--- a/apps/web/src/schema/dashboard/_types/folder-type.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { PrivateFolderCreateParameters } from '@/schema/dashboard/private-folder/api-verbs/create';
-import type { PrivateFolderDeleteParameters } from '@/schema/dashboard/private-folder/api-verbs/delete';
-import type { PrivateFolderModel } from '@/schema/dashboard/private-folder/model';
-import type { PublicFolderCreateParameters } from '@/schema/dashboard/public-folder/api-verbs/create';
-import type { PublicFolderDeleteParameters } from '@/schema/dashboard/public-folder/api-verbs/delete';
-import type { PublicFolderModel } from '@/schema/dashboard/public-folder/model';
-
-
-export type FolderModel = PublicFolderModel & PrivateFolderModel;
-export type FolderCreateParams = PublicFolderCreateParameters | PrivateFolderCreateParameters;
-export type FolderDeleteParams = PublicFolderDeleteParameters | PrivateFolderDeleteParameters;
diff --git a/apps/web/src/schema/dashboard/public-data-table/api-verbs/load.ts b/apps/web/src/schema/dashboard/public-data-table/api-verbs/load.ts
deleted file mode 100644
index f96701a1b9..0000000000
--- a/apps/web/src/schema/dashboard/public-data-table/api-verbs/load.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Page } from '@/schema/_common/type';
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
-import type { Granularity } from '@/schema/dashboard/_types/widget-type';
-
-
-
-export interface DataTableLoadParameters {
-    data_table_id: string;
-    granularity: Granularity;
-    start?: string;
-    end?: string;
-    sort?: any[];
-    page?: Page;
-    vars?: DashboardVars;
-}
diff --git a/apps/web/src/schema/file-manager/api-verbs/add.ts b/apps/web/src/schema/file-manager/api-verbs/add.ts
index 57d2c85ae5..b67fd3212e 100644
--- a/apps/web/src/schema/file-manager/api-verbs/add.ts
+++ b/apps/web/src/schema/file-manager/api-verbs/add.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { FileReference } from '@/schema/file-manager/type';
 
 export interface FileAddParameters {
diff --git a/apps/web/src/schema/file-manager/api-verbs/update.ts b/apps/web/src/schema/file-manager/api-verbs/update.ts
index f5eec54783..cdc8432a50 100644
--- a/apps/web/src/schema/file-manager/api-verbs/update.ts
+++ b/apps/web/src/schema/file-manager/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { FileReference } from '@/schema/file-manager/type';
 
 export interface FileUpdateParameters {
diff --git a/apps/web/src/schema/file-manager/model.ts b/apps/web/src/schema/file-manager/model.ts
index d761a880b6..aee6055f17 100644
--- a/apps/web/src/schema/file-manager/model.ts
+++ b/apps/web/src/schema/file-manager/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { FileState, FileReference } from '@/schema/file-manager/type';
 
 export interface FileModel {
diff --git a/apps/web/src/schema/identity/app/api-verbs/create.ts b/apps/web/src/schema/identity/app/api-verbs/create.ts
index 5becc36778..98f7c8f1c7 100644
--- a/apps/web/src/schema/identity/app/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/app/api-verbs/create.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface AppCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/identity/app/api-verbs/update.ts b/apps/web/src/schema/identity/app/api-verbs/update.ts
index 4b8e3194f7..66f8553346 100644
--- a/apps/web/src/schema/identity/app/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/app/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface AppUpdateParameters {
     app_id: string;
diff --git a/apps/web/src/schema/identity/app/model.ts b/apps/web/src/schema/identity/app/model.ts
index 3358b3bba1..29981c36f8 100644
--- a/apps/web/src/schema/identity/app/model.ts
+++ b/apps/web/src/schema/identity/app/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { AppStatusType } from '@/schema/identity/app/type';
 import type { RoleType } from '@/schema/identity/role/type';
 
diff --git a/apps/web/src/schema/identity/domain/model.ts b/apps/web/src/schema/identity/domain/model.ts
index 3df90e3c3a..ff9317ff8d 100644
--- a/apps/web/src/schema/identity/domain/model.ts
+++ b/apps/web/src/schema/identity/domain/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { DomainState } from '@/schema/identity/domain/constant';
 
 export interface DomainModel {
diff --git a/apps/web/src/schema/identity/package/api-verbs/create.ts b/apps/web/src/schema/identity/package/api-verbs/create.ts
index e0e27e9f6a..d1bf056643 100644
--- a/apps/web/src/schema/identity/package/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/package/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface PackageCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/identity/package/api-verbs/update.ts b/apps/web/src/schema/identity/package/api-verbs/update.ts
index 48d7f17267..f9f3d8bc32 100644
--- a/apps/web/src/schema/identity/package/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/package/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface PackageUpdateParameters {
     package_id: string;
diff --git a/apps/web/src/schema/identity/package/model.ts b/apps/web/src/schema/identity/package/model.ts
index 50cab3071d..4e498d16e1 100644
--- a/apps/web/src/schema/identity/package/model.ts
+++ b/apps/web/src/schema/identity/package/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface PackageModel {
     package_id: string;
diff --git a/apps/web/src/schema/identity/project-group/model.ts b/apps/web/src/schema/identity/project-group/model.ts
index 4f5c46047d..b15428ee13 100644
--- a/apps/web/src/schema/identity/project-group/model.ts
+++ b/apps/web/src/schema/identity/project-group/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 
 export interface ProjectGroupModel {
diff --git a/apps/web/src/schema/identity/project/model.ts b/apps/web/src/schema/identity/project/model.ts
index d706d2d559..ed34282216 100644
--- a/apps/web/src/schema/identity/project/model.ts
+++ b/apps/web/src/schema/identity/project/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ProjectType } from '@/schema/identity/project/type';
 
 
diff --git a/apps/web/src/schema/identity/provider/api-verbs/create.ts b/apps/web/src/schema/identity/provider/api-verbs/create.ts
index 02eb308824..6349212eea 100644
--- a/apps/web/src/schema/identity/provider/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/provider/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface ProviderCreateParameters {
     provider: string;
diff --git a/apps/web/src/schema/identity/provider/api-verbs/update.ts b/apps/web/src/schema/identity/provider/api-verbs/update.ts
index 122794efbe..bc02ba50be 100644
--- a/apps/web/src/schema/identity/provider/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/provider/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface ProviderUpdateParameters {
     provider: string;
diff --git a/apps/web/src/schema/identity/provider/model.ts b/apps/web/src/schema/identity/provider/model.ts
index 8fef259efa..26f82a3239 100644
--- a/apps/web/src/schema/identity/provider/model.ts
+++ b/apps/web/src/schema/identity/provider/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface ProviderModel {
     provider: string;
diff --git a/apps/web/src/schema/identity/role-binding/api-verbs/create.ts b/apps/web/src/schema/identity/role-binding/api-verbs/create.ts
index ff23ec329b..ee9757d0a4 100644
--- a/apps/web/src/schema/identity/role-binding/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/role-binding/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface RoleCreateParameters {
     user_id: string;
diff --git a/apps/web/src/schema/identity/role-binding/api-verbs/list.ts b/apps/web/src/schema/identity/role-binding/api-verbs/list.ts
index cb214f01f2..c4791ea82c 100644
--- a/apps/web/src/schema/identity/role-binding/api-verbs/list.ts
+++ b/apps/web/src/schema/identity/role-binding/api-verbs/list.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleBindingModel } from '@/schema/identity/role-binding/model';
 import type { RoleType } from '@/schema/identity/role/type';
 
diff --git a/apps/web/src/schema/identity/role-binding/model.ts b/apps/web/src/schema/identity/role-binding/model.ts
index c556bf7293..e9ad42dd89 100644
--- a/apps/web/src/schema/identity/role-binding/model.ts
+++ b/apps/web/src/schema/identity/role-binding/model.ts
@@ -1,4 +1,4 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { RoleType } from '@/schema/identity/role/type';
 
 
diff --git a/apps/web/src/schema/identity/role/api-verbs/create.ts b/apps/web/src/schema/identity/role/api-verbs/create.ts
index 6f39472e71..482ba7792a 100644
--- a/apps/web/src/schema/identity/role/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/role/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { RoleType } from '@/schema/identity/role/type';
 
 export interface RoleCreateParameters {
diff --git a/apps/web/src/schema/identity/role/api-verbs/update.ts b/apps/web/src/schema/identity/role/api-verbs/update.ts
index 88bc6a35f7..7fd5377abd 100644
--- a/apps/web/src/schema/identity/role/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/role/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface RoleUpdateParameters {
     role_id: string;
diff --git a/apps/web/src/schema/identity/role/model.ts b/apps/web/src/schema/identity/role/model.ts
index 16da7733c2..30ad12fe4b 100644
--- a/apps/web/src/schema/identity/role/model.ts
+++ b/apps/web/src/schema/identity/role/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { RoleType, RoleState } from '@/schema/identity/role/type';
 
 
diff --git a/apps/web/src/schema/identity/schema/api-verbs/create.ts b/apps/web/src/schema/identity/schema/api-verbs/create.ts
index 8bb2e056ea..2ce82a285c 100644
--- a/apps/web/src/schema/identity/schema/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/schema/api-verbs/create.ts
@@ -1,6 +1,6 @@
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { SchemaType } from '@/schema/identity/schema/type';
 
 export interface SchemaCreateParameters {
diff --git a/apps/web/src/schema/identity/schema/api-verbs/update.ts b/apps/web/src/schema/identity/schema/api-verbs/update.ts
index fb3743280a..c9fb25a8a0 100644
--- a/apps/web/src/schema/identity/schema/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/schema/api-verbs/update.ts
@@ -1,6 +1,6 @@
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface SchemaUpdateParameters {
     schema_id: string;
diff --git a/apps/web/src/schema/identity/schema/model.ts b/apps/web/src/schema/identity/schema/model.ts
index a4a290a5e4..fcf0e51e73 100644
--- a/apps/web/src/schema/identity/schema/model.ts
+++ b/apps/web/src/schema/identity/schema/model.ts
@@ -1,6 +1,6 @@
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { SchemaType } from '@/schema/identity/schema/type';
 
 export interface SchemaModel {
diff --git a/apps/web/src/schema/identity/service-account/api-verbs/create.ts b/apps/web/src/schema/identity/service-account/api-verbs/create.ts
index 0b5b85a9f9..cef311f12b 100644
--- a/apps/web/src/schema/identity/service-account/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/service-account/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface ServiceAccountCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/identity/service-account/api-verbs/update.ts b/apps/web/src/schema/identity/service-account/api-verbs/update.ts
index 6398f29de4..ce80ea285e 100644
--- a/apps/web/src/schema/identity/service-account/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/service-account/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface ServiceAccountUpdateParameters {
     service_account_id: string;
diff --git a/apps/web/src/schema/identity/service-account/model.ts b/apps/web/src/schema/identity/service-account/model.ts
index c379a79d53..085a11c5e0 100644
--- a/apps/web/src/schema/identity/service-account/model.ts
+++ b/apps/web/src/schema/identity/service-account/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ServiceAccountType } from '@/schema/identity/service-account/type';
 
 export interface ServiceAccountModel {
diff --git a/apps/web/src/schema/identity/trusted-account/api-verbs/create.ts b/apps/web/src/schema/identity/trusted-account/api-verbs/create.ts
index 174da66953..bedf702ac3 100644
--- a/apps/web/src/schema/identity/trusted-account/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/trusted-account/api-verbs/create.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface TrustedAccountCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/identity/trusted-account/api-verbs/update.ts b/apps/web/src/schema/identity/trusted-account/api-verbs/update.ts
index 81e8198d24..3f6e252d51 100644
--- a/apps/web/src/schema/identity/trusted-account/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/trusted-account/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface TrustedAccountUpdateParameters {
     trusted_account_id: string;
diff --git a/apps/web/src/schema/identity/trusted-account/model.ts b/apps/web/src/schema/identity/trusted-account/model.ts
index 4b4292de53..e01e0d73d5 100644
--- a/apps/web/src/schema/identity/trusted-account/model.ts
+++ b/apps/web/src/schema/identity/trusted-account/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface TrustedAccountModel {
     trusted_account_id: string;
diff --git a/apps/web/src/schema/identity/user-group/api-verbs/create.ts b/apps/web/src/schema/identity/user-group/api-verbs/create.ts
index 883e88d8fb..c03865595b 100644
--- a/apps/web/src/schema/identity/user-group/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/user-group/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface UserGroupCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/identity/user-group/api-verbs/update.ts b/apps/web/src/schema/identity/user-group/api-verbs/update.ts
index 2c0a0936ca..03fc2a91ff 100644
--- a/apps/web/src/schema/identity/user-group/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/user-group/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface UserGroupUpdateParameters {
     user_group_id?: string;
diff --git a/apps/web/src/schema/identity/user-group/model.ts b/apps/web/src/schema/identity/user-group/model.ts
index 7372d3c798..9c617c1d1d 100644
--- a/apps/web/src/schema/identity/user-group/model.ts
+++ b/apps/web/src/schema/identity/user-group/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { UserGroupChannelModel } from '@/schema/alert-manager/user-group-channel/model';
 
 export interface UserGroupModel {
diff --git a/apps/web/src/schema/identity/user-profile/api-verbs/update.ts b/apps/web/src/schema/identity/user-profile/api-verbs/update.ts
index d03580a884..44f5a541f3 100644
--- a/apps/web/src/schema/identity/user-profile/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/user-profile/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface UserProfileUpdateParameters {
     password?: string;
diff --git a/apps/web/src/schema/identity/user-profile/model.ts b/apps/web/src/schema/identity/user-profile/model.ts
index 02c86232ae..9c529a0d52 100644
--- a/apps/web/src/schema/identity/user-profile/model.ts
+++ b/apps/web/src/schema/identity/user-profile/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { UserState } from '@/schema/identity/user/type';
 
 export interface MyWorkspaceModel {
diff --git a/apps/web/src/schema/identity/user/api-verbs/create.ts b/apps/web/src/schema/identity/user/api-verbs/create.ts
index 617b93a76c..79e4c416b7 100644
--- a/apps/web/src/schema/identity/user/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/user/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { AuthType } from '@/schema/identity/user/type';
 
 
diff --git a/apps/web/src/schema/identity/user/api-verbs/update.ts b/apps/web/src/schema/identity/user/api-verbs/update.ts
index 6a0a2fa9ab..c7278cc482 100644
--- a/apps/web/src/schema/identity/user/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/user/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 
 export interface UserUpdateParameters {
diff --git a/apps/web/src/schema/identity/user/model.ts b/apps/web/src/schema/identity/user/model.ts
index 84a8cfb851..aa9058324f 100644
--- a/apps/web/src/schema/identity/user/model.ts
+++ b/apps/web/src/schema/identity/user/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { RoleType } from '@/schema/identity/role/type';
 import type { MultiFactorAuthType } from '@/schema/identity/user-profile/type';
 import type {
diff --git a/apps/web/src/schema/identity/workspace-group-user/model.ts b/apps/web/src/schema/identity/workspace-group-user/model.ts
index 2fb1858d42..bb7debac43 100644
--- a/apps/web/src/schema/identity/workspace-group-user/model.ts
+++ b/apps/web/src/schema/identity/workspace-group-user/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { RoleType } from '@/schema/identity/role/type';
 import type { UserState } from '@/schema/identity/user/type';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
diff --git a/apps/web/src/schema/identity/workspace-group/api-verbs/create.ts b/apps/web/src/schema/identity/workspace-group/api-verbs/create.ts
index bcdbc989d9..3020b5a1d6 100644
--- a/apps/web/src/schema/identity/workspace-group/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/workspace-group/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface WorkspaceGroupCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/identity/workspace-group/api-verbs/update.ts b/apps/web/src/schema/identity/workspace-group/api-verbs/update.ts
index 51877fead5..3c7d20b919 100644
--- a/apps/web/src/schema/identity/workspace-group/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/workspace-group/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface WorkspaceGroupUpdateParameters {
     workspace_group_id: string;
diff --git a/apps/web/src/schema/identity/workspace-group/model.ts b/apps/web/src/schema/identity/workspace-group/model.ts
index ec7067cee8..c55ae02cf7 100644
--- a/apps/web/src/schema/identity/workspace-group/model.ts
+++ b/apps/web/src/schema/identity/workspace-group/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { RoleType } from '@/schema/identity/role/type';
 import type { UserState } from '@/schema/identity/user/type';
 
diff --git a/apps/web/src/schema/identity/workspace-user/api-verbs/create.ts b/apps/web/src/schema/identity/workspace-user/api-verbs/create.ts
index c7212e7c7c..5a418395fd 100644
--- a/apps/web/src/schema/identity/workspace-user/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/workspace-user/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { AuthType } from '@/schema/identity/user/type';
 
 export interface WorkspaceUserCreateParameters {
diff --git a/apps/web/src/schema/identity/workspace-user/model.ts b/apps/web/src/schema/identity/workspace-user/model.ts
index 215fb8b3e9..72d89bea59 100644
--- a/apps/web/src/schema/identity/workspace-user/model.ts
+++ b/apps/web/src/schema/identity/workspace-user/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { RoleBindingModel } from '@/schema/identity/role-binding/model';
 import type { RoleType } from '@/schema/identity/role/type';
 import type { UserGroupPerUserModel } from '@/schema/identity/user/model';
diff --git a/apps/web/src/schema/identity/workspace/api-verbs/create.ts b/apps/web/src/schema/identity/workspace/api-verbs/create.ts
index 0a6c2c51f6..c2f186c45c 100644
--- a/apps/web/src/schema/identity/workspace/api-verbs/create.ts
+++ b/apps/web/src/schema/identity/workspace/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface WorkspaceCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/identity/workspace/api-verbs/update.ts b/apps/web/src/schema/identity/workspace/api-verbs/update.ts
index 811e660736..8bcb908315 100644
--- a/apps/web/src/schema/identity/workspace/api-verbs/update.ts
+++ b/apps/web/src/schema/identity/workspace/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface WorkspaceUpdateParameters {
     workspace_id: string;
diff --git a/apps/web/src/schema/identity/workspace/model.ts b/apps/web/src/schema/identity/workspace/model.ts
index 622b31e295..daee9779c5 100644
--- a/apps/web/src/schema/identity/workspace/model.ts
+++ b/apps/web/src/schema/identity/workspace/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export type WorkspaceState = 'ENABLED' | 'DISABLED' | 'DORMANT';
 
diff --git a/apps/web/src/schema/inventory-v2/namespace-group/api-verbs/create.ts b/apps/web/src/schema/inventory-v2/namespace-group/api-verbs/create.ts
index 0ed76201c8..d1bec1ec0f 100644
--- a/apps/web/src/schema/inventory-v2/namespace-group/api-verbs/create.ts
+++ b/apps/web/src/schema/inventory-v2/namespace-group/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface NamespaceGroupCreateParameters {
     namespace_group_id?: string;
diff --git a/apps/web/src/schema/inventory-v2/namespace-group/api-verbs/update.ts b/apps/web/src/schema/inventory-v2/namespace-group/api-verbs/update.ts
index bd00eb0aee..527f2d132f 100644
--- a/apps/web/src/schema/inventory-v2/namespace-group/api-verbs/update.ts
+++ b/apps/web/src/schema/inventory-v2/namespace-group/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface NamespaceGroupUpdateParameters {
     namespace_group_id: string;
diff --git a/apps/web/src/schema/inventory-v2/namespace-group/model.ts b/apps/web/src/schema/inventory-v2/namespace-group/model.ts
index bfca22606c..54596562c2 100644
--- a/apps/web/src/schema/inventory-v2/namespace-group/model.ts
+++ b/apps/web/src/schema/inventory-v2/namespace-group/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface NamespaceGroupModel {
     namespace_group_id: string;
diff --git a/apps/web/src/schema/inventory-v2/namespace/api-verbs/create.ts b/apps/web/src/schema/inventory-v2/namespace/api-verbs/create.ts
index 764a7fdc08..0e8b3fbeed 100644
--- a/apps/web/src/schema/inventory-v2/namespace/api-verbs/create.ts
+++ b/apps/web/src/schema/inventory-v2/namespace/api-verbs/create.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { NamespaceCategory } from '@/schema/inventory-v2/namespace/type';
 
 export interface NamespaceCreateParameters {
diff --git a/apps/web/src/schema/inventory-v2/namespace/api-verbs/list.ts b/apps/web/src/schema/inventory-v2/namespace/api-verbs/list.ts
index 025ff6b407..f6f0d70fb0 100644
--- a/apps/web/src/schema/inventory-v2/namespace/api-verbs/list.ts
+++ b/apps/web/src/schema/inventory-v2/namespace/api-verbs/list.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { NamespaceCategory } from '@/schema/inventory-v2/namespace/type';
 
 
diff --git a/apps/web/src/schema/inventory-v2/namespace/api-verbs/update.ts b/apps/web/src/schema/inventory-v2/namespace/api-verbs/update.ts
index 0ed1a03cc7..c26bfe2b1e 100644
--- a/apps/web/src/schema/inventory-v2/namespace/api-verbs/update.ts
+++ b/apps/web/src/schema/inventory-v2/namespace/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface NamespaceUpdateParameters {
     namespace_id: string;
diff --git a/apps/web/src/schema/inventory-v2/namespace/model.ts b/apps/web/src/schema/inventory-v2/namespace/model.ts
index 837196fdda..7c25db5851 100644
--- a/apps/web/src/schema/inventory-v2/namespace/model.ts
+++ b/apps/web/src/schema/inventory-v2/namespace/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { NamespaceCategory } from '@/schema/inventory-v2/namespace/type';
 
 
diff --git a/apps/web/src/schema/inventory/cloud-service-query-set/model.ts b/apps/web/src/schema/inventory/cloud-service-query-set/model.ts
index 77c8823883..6d1739e9f6 100644
--- a/apps/web/src/schema/inventory/cloud-service-query-set/model.ts
+++ b/apps/web/src/schema/inventory/cloud-service-query-set/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { CloudServiceQueryType, CloudServiceQuerySetState } from '@/schema/inventory/cloud-service-query-set/type';
 
 export interface CloudServiceQuerySetModel {
diff --git a/apps/web/src/schema/inventory/cloud-service-type/model.ts b/apps/web/src/schema/inventory/cloud-service-type/model.ts
index b9ba120d1b..d426e0cb62 100644
--- a/apps/web/src/schema/inventory/cloud-service-type/model.ts
+++ b/apps/web/src/schema/inventory/cloud-service-type/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface CloudServiceTypeModel {
     cloud_service_type_id: string;
diff --git a/apps/web/src/schema/inventory/cloud-service/model.ts b/apps/web/src/schema/inventory/cloud-service/model.ts
index bbc466f8b4..0419954449 100644
--- a/apps/web/src/schema/inventory/cloud-service/model.ts
+++ b/apps/web/src/schema/inventory/cloud-service/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { CloudServiceState } from '@/schema/inventory/cloud-service/type';
 
 export interface CloudServiceModel {
diff --git a/apps/web/src/schema/inventory/collector-rule/api-verbs/create.ts b/apps/web/src/schema/inventory/collector-rule/api-verbs/create.ts
index 19e5d8a581..4cf2fc2327 100644
--- a/apps/web/src/schema/inventory/collector-rule/api-verbs/create.ts
+++ b/apps/web/src/schema/inventory/collector-rule/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { AdditionalRuleAction, AdditionalRuleCondition } from '@/schema/inventory/collector-rule/model';
 import type { CollectorRuleConditionPolicy } from '@/schema/inventory/collector-rule/type';
 
diff --git a/apps/web/src/schema/inventory/collector-rule/api-verbs/update.ts b/apps/web/src/schema/inventory/collector-rule/api-verbs/update.ts
index 186975d88a..6e141430c5 100644
--- a/apps/web/src/schema/inventory/collector-rule/api-verbs/update.ts
+++ b/apps/web/src/schema/inventory/collector-rule/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { AdditionalRuleAction, AdditionalRuleCondition } from '@/schema/inventory/collector-rule/model';
 import type { CollectorRuleConditionPolicy } from '@/schema/inventory/collector-rule/type';
 
diff --git a/apps/web/src/schema/inventory/collector-rule/model.ts b/apps/web/src/schema/inventory/collector-rule/model.ts
index 61b698d43f..1829e9e427 100644
--- a/apps/web/src/schema/inventory/collector-rule/model.ts
+++ b/apps/web/src/schema/inventory/collector-rule/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     CollectorRuleConditionPolicy, CollectorRuleType, CollectorResourceGroup, CollectorRuleConditionOperator,
     CollectorRuleConditionKey,
diff --git a/apps/web/src/schema/inventory/collector/api-verbs/create.ts b/apps/web/src/schema/inventory/collector/api-verbs/create.ts
index 8155638ad7..9e2955ae7b 100644
--- a/apps/web/src/schema/inventory/collector/api-verbs/create.ts
+++ b/apps/web/src/schema/inventory/collector/api-verbs/create.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { CollectorPluginInfo } from '@/schema/inventory/collector/model';
 import type { Schedule, SecretFilter } from '@/schema/inventory/collector/type';
 
diff --git a/apps/web/src/schema/inventory/collector/api-verbs/update.ts b/apps/web/src/schema/inventory/collector/api-verbs/update.ts
index f4968459ff..d1c9321ef9 100644
--- a/apps/web/src/schema/inventory/collector/api-verbs/update.ts
+++ b/apps/web/src/schema/inventory/collector/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { Schedule, SecretFilter } from '@/schema/inventory/collector/type';
 
 // collector api parameters
diff --git a/apps/web/src/schema/inventory/collector/model.ts b/apps/web/src/schema/inventory/collector/model.ts
index 6b06175c3e..f33f743596 100644
--- a/apps/web/src/schema/inventory/collector/model.ts
+++ b/apps/web/src/schema/inventory/collector/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
     CollectorMetadata, CollectorOptions, Schedule, SecretFilter,
 } from '@/schema/inventory/collector/type';
diff --git a/apps/web/src/schema/inventory/job/model.ts b/apps/web/src/schema/inventory/job/model.ts
index 237a3d7598..3d1b429969 100644
--- a/apps/web/src/schema/inventory/job/model.ts
+++ b/apps/web/src/schema/inventory/job/model.ts
@@ -1,4 +1,4 @@
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { JobStatus } from '@/schema/inventory/job/type';
 
 
diff --git a/apps/web/src/schema/inventory/metric-example/api-verbs/create.ts b/apps/web/src/schema/inventory/metric-example/api-verbs/create.ts
index e18be57bcb..967d1cb4fe 100644
--- a/apps/web/src/schema/inventory/metric-example/api-verbs/create.ts
+++ b/apps/web/src/schema/inventory/metric-example/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 
 export interface MetricExampleCreateParameters {
diff --git a/apps/web/src/schema/inventory/metric-example/api-verbs/update.ts b/apps/web/src/schema/inventory/metric-example/api-verbs/update.ts
index 0a1503219f..be2ffca69c 100644
--- a/apps/web/src/schema/inventory/metric-example/api-verbs/update.ts
+++ b/apps/web/src/schema/inventory/metric-example/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 
 export interface MetricExampleUpdateParameters {
diff --git a/apps/web/src/schema/inventory/metric-example/model.ts b/apps/web/src/schema/inventory/metric-example/model.ts
index 63c0e94cd8..105d7e2995 100644
--- a/apps/web/src/schema/inventory/metric-example/model.ts
+++ b/apps/web/src/schema/inventory/metric-example/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 
 export interface MetricExampleModel {
diff --git a/apps/web/src/schema/inventory/metric/api-verbs/create.ts b/apps/web/src/schema/inventory/metric/api-verbs/create.ts
index bdea75159f..50b2ce7e5a 100644
--- a/apps/web/src/schema/inventory/metric/api-verbs/create.ts
+++ b/apps/web/src/schema/inventory/metric/api-verbs/create.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { MetricType } from '@/schema/inventory/metric/type';
 
 
diff --git a/apps/web/src/schema/inventory/metric/api-verbs/update.ts b/apps/web/src/schema/inventory/metric/api-verbs/update.ts
index f9039a3a2b..b2d105de0f 100644
--- a/apps/web/src/schema/inventory/metric/api-verbs/update.ts
+++ b/apps/web/src/schema/inventory/metric/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 
 export interface MetricUpdateParameters {
diff --git a/apps/web/src/schema/inventory/metric/model.ts b/apps/web/src/schema/inventory/metric/model.ts
index 857ac942bb..a2615a5812 100644
--- a/apps/web/src/schema/inventory/metric/model.ts
+++ b/apps/web/src/schema/inventory/metric/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { MetricType, MetricLabelKey } from '@/schema/inventory/metric/type';
 
 
diff --git a/apps/web/src/schema/inventory/namespace/model.ts b/apps/web/src/schema/inventory/namespace/model.ts
index 02615c24aa..90f2feae1f 100644
--- a/apps/web/src/schema/inventory/namespace/model.ts
+++ b/apps/web/src/schema/inventory/namespace/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { NamespaceCategory, NamespaceGroup } from '@/schema/inventory/namespace/type';
 
 
diff --git a/apps/web/src/schema/inventory/region/model.ts b/apps/web/src/schema/inventory/region/model.ts
index e7e10820cc..7c3c462221 100644
--- a/apps/web/src/schema/inventory/region/model.ts
+++ b/apps/web/src/schema/inventory/region/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 
 export interface RegionModel {
diff --git a/apps/web/src/schema/monitoring/alert/api-verbs/list.ts b/apps/web/src/schema/monitoring/alert/api-verbs/list.ts
index 913664b6e2..a408a40886 100644
--- a/apps/web/src/schema/monitoring/alert/api-verbs/list.ts
+++ b/apps/web/src/schema/monitoring/alert/api-verbs/list.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertModel } from '@/schema/monitoring/alert/model';
 import type {
     AlertSeverity, AlertState, AlertUrgency,
diff --git a/apps/web/src/schema/monitoring/data-source/model.ts b/apps/web/src/schema/monitoring/data-source/model.ts
index e8313a6446..0630522018 100644
--- a/apps/web/src/schema/monitoring/data-source/model.ts
+++ b/apps/web/src/schema/monitoring/data-source/model.ts
@@ -1,6 +1,6 @@
 import type { DynamicLayout } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { MonitoringType } from '@/schema/monitoring/data-source/type';
 
 
diff --git a/apps/web/src/schema/monitoring/escalation-policy/api-verbs/list.ts b/apps/web/src/schema/monitoring/escalation-policy/api-verbs/list.ts
index 0627a2f46f..bb90d61493 100644
--- a/apps/web/src/schema/monitoring/escalation-policy/api-verbs/list.ts
+++ b/apps/web/src/schema/monitoring/escalation-policy/api-verbs/list.ts
@@ -1,6 +1,6 @@
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { EscalationPolicyModel } from '@/schema/monitoring/escalation-policy/model';
 import type { EscalationPolicyFinishCondition } from '@/schema/monitoring/escalation-policy/type';
 
diff --git a/apps/web/src/schema/monitoring/escalation-policy/api-verbs/update.ts b/apps/web/src/schema/monitoring/escalation-policy/api-verbs/update.ts
index b51e2af48b..a8a7d0c8a4 100644
--- a/apps/web/src/schema/monitoring/escalation-policy/api-verbs/update.ts
+++ b/apps/web/src/schema/monitoring/escalation-policy/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { EscalationPolicyRule, EscalationPolicyFinishCondition } from '@/schema/monitoring/escalation-policy/type';
 
 export interface EscalationPolicyUpdateParameters {
diff --git a/apps/web/src/schema/monitoring/escalation-policy/model.ts b/apps/web/src/schema/monitoring/escalation-policy/model.ts
index d7fda0634b..7f19cc1290 100644
--- a/apps/web/src/schema/monitoring/escalation-policy/model.ts
+++ b/apps/web/src/schema/monitoring/escalation-policy/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { EscalationPolicyRule, EscalationPolicyFinishCondition } from '@/schema/monitoring/escalation-policy/type';
 
 export interface EscalationPolicyModel {
diff --git a/apps/web/src/schema/monitoring/event-rule/api-verbs/create.ts b/apps/web/src/schema/monitoring/event-rule/api-verbs/create.ts
index a0371f1e6b..e977caefd1 100644
--- a/apps/web/src/schema/monitoring/event-rule/api-verbs/create.ts
+++ b/apps/web/src/schema/monitoring/event-rule/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { EventRuleModel } from '@/schema/monitoring/event-rule/model';
 import type {
     EventRuleActions, EventRuleCondition,
diff --git a/apps/web/src/schema/monitoring/event-rule/api-verbs/update.ts b/apps/web/src/schema/monitoring/event-rule/api-verbs/update.ts
index 9487f5bbf0..5a09d6e157 100644
--- a/apps/web/src/schema/monitoring/event-rule/api-verbs/update.ts
+++ b/apps/web/src/schema/monitoring/event-rule/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type {
     EventRuleActions, EventRuleCondition,
     EventRuleConditionsPolicy, EventRuleOptions,
diff --git a/apps/web/src/schema/monitoring/event-rule/model.ts b/apps/web/src/schema/monitoring/event-rule/model.ts
index 7db01a0997..4df071cbc8 100644
--- a/apps/web/src/schema/monitoring/event-rule/model.ts
+++ b/apps/web/src/schema/monitoring/event-rule/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
     EventRuleCondition, EventRuleActions, EventRuleConditionsPolicy, EventRuleOptions,
 } from '@/schema/monitoring/event-rule/type';
diff --git a/apps/web/src/schema/monitoring/webhook/api-verbs/create.ts b/apps/web/src/schema/monitoring/webhook/api-verbs/create.ts
index a1870c3e04..13f3deaaff 100644
--- a/apps/web/src/schema/monitoring/webhook/api-verbs/create.ts
+++ b/apps/web/src/schema/monitoring/webhook/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { WebhookPluginInfo } from '@/schema/monitoring/webhook/type';
 
 export interface WebhookCreateParameters {
diff --git a/apps/web/src/schema/monitoring/webhook/api-verbs/update.ts b/apps/web/src/schema/monitoring/webhook/api-verbs/update.ts
index d213813cd0..6aae40e227 100644
--- a/apps/web/src/schema/monitoring/webhook/api-verbs/update.ts
+++ b/apps/web/src/schema/monitoring/webhook/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface WebhookUpdateParameters {
     webhook_id: string;
diff --git a/apps/web/src/schema/monitoring/webhook/model.ts b/apps/web/src/schema/monitoring/webhook/model.ts
index 791d8de553..e0b1484a94 100644
--- a/apps/web/src/schema/monitoring/webhook/model.ts
+++ b/apps/web/src/schema/monitoring/webhook/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { WebhookPluginInfo, WebhookState } from '@/schema/monitoring/webhook/type';
 
 type WebhookRequestsType = {
diff --git a/apps/web/src/schema/notification/project-channel/api-verbs/create.ts b/apps/web/src/schema/notification/project-channel/api-verbs/create.ts
index 9a9427c2f7..34a8f69406 100644
--- a/apps/web/src/schema/notification/project-channel/api-verbs/create.ts
+++ b/apps/web/src/schema/notification/project-channel/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { NotificationLevel } from '@/schema/notification/notification/type';
 import type { ChannelSchedule } from '@/schema/notification/type';
 
diff --git a/apps/web/src/schema/notification/project-channel/api-verbs/update.ts b/apps/web/src/schema/notification/project-channel/api-verbs/update.ts
index e0b747bfdb..72bd2aa596 100644
--- a/apps/web/src/schema/notification/project-channel/api-verbs/update.ts
+++ b/apps/web/src/schema/notification/project-channel/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { NotificationLevel } from '@/schema/notification/notification/type';
 
 export type ProjectChannelUpdateParameters = {
diff --git a/apps/web/src/schema/notification/project-channel/model.ts b/apps/web/src/schema/notification/project-channel/model.ts
index 4c9c5bcf2f..b96da9e8d7 100644
--- a/apps/web/src/schema/notification/project-channel/model.ts
+++ b/apps/web/src/schema/notification/project-channel/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { NotificationLevel } from '@/schema/notification/notification/type';
 import type { ChannelSchedule, ChannelState } from '@/schema/notification/type';
 
diff --git a/apps/web/src/schema/notification/protocol/api-verbs/create.ts b/apps/web/src/schema/notification/protocol/api-verbs/create.ts
index 49e749e25c..f3b8ecd5fb 100644
--- a/apps/web/src/schema/notification/protocol/api-verbs/create.ts
+++ b/apps/web/src/schema/notification/protocol/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ProtocolPluginInfo } from '@/schema/notification/protocol/type';
 
 export interface ProtocolCreateParameters {
diff --git a/apps/web/src/schema/notification/protocol/api-verbs/update.ts b/apps/web/src/schema/notification/protocol/api-verbs/update.ts
index cc9f578a3c..0bf2f45666 100644
--- a/apps/web/src/schema/notification/protocol/api-verbs/update.ts
+++ b/apps/web/src/schema/notification/protocol/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface ProtocolUpdateParameters {
     protocol_id: string;
diff --git a/apps/web/src/schema/notification/protocol/model.ts b/apps/web/src/schema/notification/protocol/model.ts
index 25cb0660b1..04ec782de6 100644
--- a/apps/web/src/schema/notification/protocol/model.ts
+++ b/apps/web/src/schema/notification/protocol/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ProtocolCapability, ProtocolPluginInfo, ProtocolState } from '@/schema/notification/protocol/type';
 
 export interface ProtocolModel {
diff --git a/apps/web/src/schema/notification/user-channel/api-verbs/create.ts b/apps/web/src/schema/notification/user-channel/api-verbs/create.ts
index 26aa3d01b8..ed27bab27c 100644
--- a/apps/web/src/schema/notification/user-channel/api-verbs/create.ts
+++ b/apps/web/src/schema/notification/user-channel/api-verbs/create.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ChannelSchedule } from '@/schema/notification/type';
 
 export type UserChannelCreateParameters = {
diff --git a/apps/web/src/schema/notification/user-channel/api-verbs/update.ts b/apps/web/src/schema/notification/user-channel/api-verbs/update.ts
index 323f564801..5867161b40 100644
--- a/apps/web/src/schema/notification/user-channel/api-verbs/update.ts
+++ b/apps/web/src/schema/notification/user-channel/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export type UserChannelUpdateParameters = {
     user_channel_id: string
diff --git a/apps/web/src/schema/notification/user-channel/model.ts b/apps/web/src/schema/notification/user-channel/model.ts
index a2b7ad469b..93f4338926 100644
--- a/apps/web/src/schema/notification/user-channel/model.ts
+++ b/apps/web/src/schema/notification/user-channel/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { ChannelSchedule, ChannelState } from '@/schema/notification/type';
 
 export interface UserChannelModel {
diff --git a/apps/web/src/schema/repository/dashboard-template/model.ts b/apps/web/src/schema/repository/dashboard-template/model.ts
index aab8f9de33..9dc4d5f3ff 100644
--- a/apps/web/src/schema/repository/dashboard-template/model.ts
+++ b/apps/web/src/schema/repository/dashboard-template/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { DashboardTemplateState, DashboardTemplateType } from '@/schema/repository/dashboard-template/type';
 
 import type { SharedDashboardInfo } from '@/services/dashboards/types/shared-dashboard-type';
diff --git a/apps/web/src/schema/repository/plugin/api-verbs/register.ts b/apps/web/src/schema/repository/plugin/api-verbs/register.ts
index cde3e59d43..d18559c9d8 100644
--- a/apps/web/src/schema/repository/plugin/api-verbs/register.ts
+++ b/apps/web/src/schema/repository/plugin/api-verbs/register.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { Capability, RegistryType } from '@/schema/repository/plugin/type';
 
 export interface PluginRegisterParameters {
diff --git a/apps/web/src/schema/repository/plugin/api-verbs/update.ts b/apps/web/src/schema/repository/plugin/api-verbs/update.ts
index 71e39c2366..ea3540c8b9 100644
--- a/apps/web/src/schema/repository/plugin/api-verbs/update.ts
+++ b/apps/web/src/schema/repository/plugin/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { Capability } from '@/schema/repository/plugin/type';
 
 export interface PluginUpdateParameters {
diff --git a/apps/web/src/schema/repository/plugin/model.ts b/apps/web/src/schema/repository/plugin/model.ts
index d86cd4e19a..ce0fd16f12 100644
--- a/apps/web/src/schema/repository/plugin/model.ts
+++ b/apps/web/src/schema/repository/plugin/model.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { Capability, PluginState, RegistryType } from '@/schema/repository/plugin/type';
 import type { RepositoryModel } from '@/schema/repository/repository/model';
 
diff --git a/apps/web/src/schema/secret/secret/api-verbs/create.ts b/apps/web/src/schema/secret/secret/api-verbs/create.ts
index 69a6a0f907..97639e1069 100644
--- a/apps/web/src/schema/secret/secret/api-verbs/create.ts
+++ b/apps/web/src/schema/secret/secret/api-verbs/create.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface SecretCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/secret/secret/model.ts b/apps/web/src/schema/secret/secret/model.ts
index 1841b3315f..a718a222c5 100644
--- a/apps/web/src/schema/secret/secret/model.ts
+++ b/apps/web/src/schema/secret/secret/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface SecretModel {
     secret_id: string;
diff --git a/apps/web/src/schema/secret/trusted-secret/api-verbs/create.ts b/apps/web/src/schema/secret/trusted-secret/api-verbs/create.ts
index c4d87bebd7..67a4e365f7 100644
--- a/apps/web/src/schema/secret/trusted-secret/api-verbs/create.ts
+++ b/apps/web/src/schema/secret/trusted-secret/api-verbs/create.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface TrustedSecretCreateParameters {
     name: string;
diff --git a/apps/web/src/schema/secret/trusted-secret/api-verbs/update.ts b/apps/web/src/schema/secret/trusted-secret/api-verbs/update.ts
index 91b7eb54b8..7a741b43ba 100644
--- a/apps/web/src/schema/secret/trusted-secret/api-verbs/update.ts
+++ b/apps/web/src/schema/secret/trusted-secret/api-verbs/update.ts
@@ -1,4 +1,4 @@
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export interface TrustedSecretUpdateParameters {
     trusted_secret_id: string;
diff --git a/apps/web/src/schema/secret/trusted-secret/model.ts b/apps/web/src/schema/secret/trusted-secret/model.ts
index 01d61ab52b..c85e7dd670 100644
--- a/apps/web/src/schema/secret/trusted-secret/model.ts
+++ b/apps/web/src/schema/secret/trusted-secret/model.ts
@@ -1,5 +1,5 @@
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 
 export interface TrustedSecretModel {
     trusted_secret_id: string;
diff --git a/apps/web/src/services/advanced/components/BookmarkTree.vue b/apps/web/src/services/advanced/components/BookmarkTree.vue
index 690f10a501..f0087b2b73 100644
--- a/apps/web/src/services/advanced/components/BookmarkTree.vue
+++ b/apps/web/src/services/advanced/components/BookmarkTree.vue
@@ -21,7 +21,7 @@ import { gray } from '@/styles/colors';
 import { getWorkspaceInfo } from '@/services/advanced/composables/refined-table-data';
 import { ADVANCED_ROUTE } from '@/services/advanced/routes/route-constant';
 import { useBookmarkPageStore } from '@/services/advanced/store/bookmark-page-store';
-import type { TreeNode } from '@/services/project/tree/type';
+import type { TreeNode } from '@/services/project-v1/tree/type';
 
 const gnbStore = useGnbStore();
 const bookmarkPageStore = useBookmarkPageStore();
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupAddUsersModal.vue b/apps/web/src/services/advanced/components/WorkspaceGroupAddUsersModal.vue
index 8851d9b8c5..e368a34deb 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupAddUsersModal.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupAddUsersModal.vue
@@ -8,7 +8,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_STATE, ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupAddWorkspacesModal.vue b/apps/web/src/services/advanced/components/WorkspaceGroupAddWorkspacesModal.vue
index 1ca11db4e0..8d056ce3ea 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupAddWorkspacesModal.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupAddWorkspacesModal.vue
@@ -10,7 +10,7 @@ import {
     PButtonModal, PFieldGroup, PSelectDropdown, PTooltip,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceChangeWorkspaceGroupParameters } from '@/schema/identity/workspace/api-verbs/change-workspace-group';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupCreateModal.vue b/apps/web/src/services/advanced/components/WorkspaceGroupCreateModal.vue
index a958190ba1..b1679f129e 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupCreateModal.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupCreateModal.vue
@@ -9,7 +9,7 @@ import {
     PButtonModal, PFieldGroup, PTextInput, PSelectDropdown, PTooltip,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceGroupCreateParameters } from '@/schema/identity/workspace-group/api-verbs/create';
 import type { WorkspaceGroupModel } from '@/schema/identity/workspace-group/model';
 import type { WorkspaceChangeWorkspaceGroupParameters } from '@/schema/identity/workspace/api-verbs/change-workspace-group';
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue b/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
index 5c35714b23..56b9cf95f5 100644
--- a/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
@@ -9,7 +9,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_STATE, ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/advanced/components/WorkspaceTagManagementTabContents.vue b/apps/web/src/services/advanced/components/WorkspaceTagManagementTabContents.vue
index 533323507d..6d6ca63eb9 100644
--- a/apps/web/src/services/advanced/components/WorkspaceTagManagementTabContents.vue
+++ b/apps/web/src/services/advanced/components/WorkspaceTagManagementTabContents.vue
@@ -7,7 +7,7 @@ import {
 } from '@cloudforet/mirinae';
 
 
-import type { Tags, TimeStamp } from '@/schema/_common/model';
+import type { Tags, TimeStamp } from '@/api-clients/_common/schema/model';
 import type { WorkspaceUpdateParameters } from '@/schema/identity/workspace/api-verbs/update';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/advanced/composables/use-select-drop-down-list.ts b/apps/web/src/services/advanced/composables/use-select-drop-down-list.ts
index fc8da1497b..71cd53ee98 100644
--- a/apps/web/src/services/advanced/composables/use-select-drop-down-list.ts
+++ b/apps/web/src/services/advanced/composables/use-select-drop-down-list.ts
@@ -10,7 +10,7 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
diff --git a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue
index 21d5788f19..b9afdf453d 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue
@@ -10,13 +10,13 @@ import {
 } from '@cloudforet/mirinae';
 import { getNumberFromString, numberFormatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostReportConfigListParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
 import type { DomainConfigListParameters } from '@/schema/config/domain-config/api-verbs/list';
 import type { DomainConfigUpdateParameters } from '@/schema/config/domain-config/api-verbs/update';
 import { DOMAIN_CONFIG_NAMES } from '@/schema/config/domain-config/constant';
 import type { DomainConfigModel } from '@/schema/config/domain-config/model';
-import type { CostReportConfigListParameters } from '@/schema/cost-analysis/cost-report-config/api-verbs/list';
-import type { CostReportConfigModel } from '@/schema/cost-analysis/cost-report-config/model';
 import { i18n as _i18n } from '@/translations';
 
 import { makeAdminRouteName } from '@/router/helpers/route-helper';
diff --git a/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue b/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
index 64270da367..e9d9474f9a 100644
--- a/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
+++ b/apps/web/src/services/advanced/pages/admin/AdminWorkspaceGroupPage.vue
@@ -5,7 +5,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PHorizontalLayout } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceGroupListParameters } from '@/schema/identity/workspace-group/api-verbs/list';
 import type { WorkspaceGroupModel } from '@/schema/identity/workspace-group/model';
 
diff --git a/apps/web/src/services/advanced/store/bookmark-page-store.ts b/apps/web/src/services/advanced/store/bookmark-page-store.ts
index 9315e35c1f..d756fbeb0d 100644
--- a/apps/web/src/services/advanced/store/bookmark-page-store.ts
+++ b/apps/web/src/services/advanced/store/bookmark-page-store.ts
@@ -9,7 +9,7 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { SharedConfigListParameters } from '@/schema/config/shared-config/api-verbs/list';
 import type { SharedConfigModel } from '@/schema/config/shared-config/model';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
diff --git a/apps/web/src/services/advanced/store/workspace-group-page-store.ts b/apps/web/src/services/advanced/store/workspace-group-page-store.ts
index d355c557ec..4bba03856e 100644
--- a/apps/web/src/services/advanced/store/workspace-group-page-store.ts
+++ b/apps/web/src/services/advanced/store/workspace-group-page-store.ts
@@ -7,9 +7,9 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CostReportConfigListParameters } from '@/schema/cost-analysis/cost-report-config/api-verbs/list';
-import type { CostReportConfigModel } from '@/schema/cost-analysis/cost-report-config/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostReportConfigListParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_STATE } from '@/schema/identity/role/constant';
 import type { RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/advanced/store/workspace-page-store.ts b/apps/web/src/services/advanced/store/workspace-page-store.ts
index 1a3ad61c7b..c12d90a7e2 100644
--- a/apps/web/src/services/advanced/store/workspace-page-store.ts
+++ b/apps/web/src/services/advanced/store/workspace-page-store.ts
@@ -3,9 +3,9 @@ import { defineStore } from 'pinia';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CostReportConfigListParameters } from '@/schema/cost-analysis/cost-report-config/api-verbs/list';
-import type { CostReportConfigModel } from '@/schema/cost-analysis/cost-report-config/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostReportConfigListParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
 import type { RoleBindingListParameters, RoleBindingListResponse } from '@/schema/identity/role-binding/api-verbs/list';
 import type { RoleBindingModel } from '@/schema/identity/role-binding/model';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
diff --git a/apps/web/src/services/alert-manager-v1/components/AlertDashboardAlertStateWidget.vue b/apps/web/src/services/alert-manager-v1/components/AlertDashboardAlertStateWidget.vue
index 4faf07c8ff..25a429bd32 100644
--- a/apps/web/src/services/alert-manager-v1/components/AlertDashboardAlertStateWidget.vue
+++ b/apps/web/src/services/alert-manager-v1/components/AlertDashboardAlertStateWidget.vue
@@ -14,7 +14,7 @@ import {
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertListParameters } from '@/schema/monitoring/alert/api-verbs/list';
 import { ALERT_STATE } from '@/schema/monitoring/alert/constants';
 import type { AlertModel } from '@/schema/monitoring/alert/model';
diff --git a/apps/web/src/services/alert-manager-v1/components/AlertDashboardProjectSearchWidget.vue b/apps/web/src/services/alert-manager-v1/components/AlertDashboardProjectSearchWidget.vue
index 0fd63af410..afa757f4e3 100644
--- a/apps/web/src/services/alert-manager-v1/components/AlertDashboardProjectSearchWidget.vue
+++ b/apps/web/src/services/alert-manager-v1/components/AlertDashboardProjectSearchWidget.vue
@@ -23,7 +23,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { BACKGROUND_COLOR } from '@/styles/colorsets';
 
 import AlertDashboardProjectSearchWidgetAlertList from '@/services/alert-manager-v1/components/AlertDashboardProjectSearchWidgetAlertList.vue';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 
 const props = defineProps<{
@@ -99,7 +99,7 @@ const onChange = async (options?: any) => {
     await listAlertByProject();
 };
 const onClickProjectBox = (item) => {
-    router.push({ name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME, params: { id: item.project_id } });
+    router.push({ name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME, params: { id: item.project_id } });
 };
 
 /* init */
diff --git a/apps/web/src/services/alert-manager-v1/components/AlertDashboardProjectSearchWidgetAlertList.vue b/apps/web/src/services/alert-manager-v1/components/AlertDashboardProjectSearchWidgetAlertList.vue
index 4dc98639ec..7f19907c21 100644
--- a/apps/web/src/services/alert-manager-v1/components/AlertDashboardProjectSearchWidgetAlertList.vue
+++ b/apps/web/src/services/alert-manager-v1/components/AlertDashboardProjectSearchWidgetAlertList.vue
@@ -10,7 +10,7 @@ import {
     PListCard, PLink,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertListParameters } from '@/schema/monitoring/alert/api-verbs/list';
 import { ALERT_STATE } from '@/schema/monitoring/alert/constants';
 import type { AlertModel } from '@/schema/monitoring/alert/model';
@@ -21,7 +21,7 @@ import type { UserReferenceMap } from '@/store/reference/user-reference-store';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import AlertListItem from '@/services/alert-manager-v1/components/AlertListItem.vue';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 const props = defineProps<{
     projectId: string;
@@ -85,7 +85,7 @@ watch(() => props.projectId, async (projectId) => {
             <div v-else
                  class="view-all-text"
             >
-                <p-link :to="{ name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME, params: { id: props.projectId } }"
+                <p-link :to="{ name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME, params: { id: props.projectId } }"
                         :text="$t('MONITORING.ALERT.DASHBOARD.VIEW_ALL_OPEN_ALERTS')"
                         highlight
                 />
diff --git a/apps/web/src/services/alert-manager-v1/components/AlertDashboardTop5ProjectActivityWidgetTooltip.vue b/apps/web/src/services/alert-manager-v1/components/AlertDashboardTop5ProjectActivityWidgetTooltip.vue
index e57511ff03..c3b6ce0f28 100644
--- a/apps/web/src/services/alert-manager-v1/components/AlertDashboardTop5ProjectActivityWidgetTooltip.vue
+++ b/apps/web/src/services/alert-manager-v1/components/AlertDashboardTop5ProjectActivityWidgetTooltip.vue
@@ -12,7 +12,7 @@ import {
     PI,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertListParameters } from '@/schema/monitoring/alert/api-verbs/list';
 import type { AlertModel } from '@/schema/monitoring/alert/model';
 
diff --git a/apps/web/src/services/alert-manager-v1/components/AlertDetailNote.vue b/apps/web/src/services/alert-manager-v1/components/AlertDetailNote.vue
index 1e8cb905eb..92806f337a 100644
--- a/apps/web/src/services/alert-manager-v1/components/AlertDetailNote.vue
+++ b/apps/web/src/services/alert-manager-v1/components/AlertDetailNote.vue
@@ -9,7 +9,7 @@ import {
 } from '@cloudforet/mirinae';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { NoteCreateParameters } from '@/schema/monitoring/note/api-verbs/create';
 import type { NoteDeleteParameters } from '@/schema/monitoring/note/api-verbs/delete';
 import type { NoteListParameters } from '@/schema/monitoring/note/api-verbs/list';
diff --git a/apps/web/src/services/alert-manager-v1/components/AlertDetailResponder.vue b/apps/web/src/services/alert-manager-v1/components/AlertDetailResponder.vue
index 271b134e6f..cd783a51d9 100644
--- a/apps/web/src/services/alert-manager-v1/components/AlertDetailResponder.vue
+++ b/apps/web/src/services/alert-manager-v1/components/AlertDetailResponder.vue
@@ -11,7 +11,7 @@ import {
     PBadge, PCollapsibleList, PPaneLayout, PHeading, PEmpty, PHeadingLayout,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertModel } from '@/schema/monitoring/alert/model';
 import type { EscalationPolicyGetParameters } from '@/schema/monitoring/escalation-policy/api-verbs/get';
 import type { EscalationPolicyModel } from '@/schema/monitoring/escalation-policy/model';
diff --git a/apps/web/src/services/alert-manager-v1/components/AlertDetailTabsPushedEvent.vue b/apps/web/src/services/alert-manager-v1/components/AlertDetailTabsPushedEvent.vue
index b771645be4..29dd67acbd 100644
--- a/apps/web/src/services/alert-manager-v1/components/AlertDetailTabsPushedEvent.vue
+++ b/apps/web/src/services/alert-manager-v1/components/AlertDetailTabsPushedEvent.vue
@@ -11,7 +11,7 @@ import {
     PButton, PButtonModal, PI, PCodeEditor, PToolbox, PEmpty,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { EventListParameters } from '@/schema/monitoring/event/api-verbs/list';
 import type { EventModel } from '@/schema/monitoring/event/model';
 
diff --git a/apps/web/src/services/alert-manager-v1/components/AlertMainDataTableTriggeredByField.vue b/apps/web/src/services/alert-manager-v1/components/AlertMainDataTableTriggeredByField.vue
index ac00c58603..1658bfecd4 100644
--- a/apps/web/src/services/alert-manager-v1/components/AlertMainDataTableTriggeredByField.vue
+++ b/apps/web/src/services/alert-manager-v1/components/AlertMainDataTableTriggeredByField.vue
@@ -14,7 +14,7 @@ import type { ReferenceItem } from '@/store/reference/type';
 
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 const props = defineProps<{
     value?: string;
@@ -35,7 +35,7 @@ const state = reactive({
         if (props.disableLink) return undefined;
         if (props.webhookReference) {
             return {
-                name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME,
+                name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME,
                 params: {
                     id: props.projectId ?? '',
                 },
@@ -46,7 +46,7 @@ const state = reactive({
             };
         } if (props.userReference) {
             return {
-                name: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+                name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
                 params: {
                     id: props.projectId ?? '',
                 },
diff --git a/apps/web/src/services/alert-manager-v1/components/EscalationPolicyForm.vue b/apps/web/src/services/alert-manager-v1/components/EscalationPolicyForm.vue
index 541e720630..122b5aa8f4 100644
--- a/apps/web/src/services/alert-manager-v1/components/EscalationPolicyForm.vue
+++ b/apps/web/src/services/alert-manager-v1/components/EscalationPolicyForm.vue
@@ -28,7 +28,7 @@ import EscalationPolicyFormRulesInput from '@/services/alert-manager-v1/componen
 import { ACTION } from '@/services/alert-manager-v1/constants/alert-constant';
 import { useEscalationPolicyFormStore } from '@/services/alert-manager-v1/stores/escalation-policy-form-store';
 import type { ActionMode } from '@/services/alert-manager-v1/types/alert-type';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import type { ProjectTreeNodeData } from '@/services/project-v1/types/project-tree-type';
 
 const props = withDefaults(defineProps<{
@@ -185,7 +185,7 @@ watch([() => escalationPolicyFormState.resourceGroup, () => invalidState.name, (
                         :action-icon="ACTION_ICON.INTERNAL_LINK"
                         new-tab
                         size="sm"
-                        :to="getProperRouteLocation({ name: PROJECT_ROUTE_V1._NAME })"
+                        :to="getProperRouteLocation({ name: PROJECT_ROUTE._NAME })"
                         :text="$t('MONITORING.ALERT.ESCALATION_POLICY.FORM.GO_CREATE_PROJECT')"
                         highlight
                 />
diff --git a/apps/web/src/services/alert-manager-v1/components/EscalationPolicyFormRulesInput.vue b/apps/web/src/services/alert-manager-v1/components/EscalationPolicyFormRulesInput.vue
index 2e19ec4ea4..ce0bbd5c5c 100644
--- a/apps/web/src/services/alert-manager-v1/components/EscalationPolicyFormRulesInput.vue
+++ b/apps/web/src/services/alert-manager-v1/components/EscalationPolicyFormRulesInput.vue
@@ -12,8 +12,8 @@ import {
 } from '@cloudforet/mirinae';
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { EscalationPolicyRule } from '@/schema/monitoring/escalation-policy/type';
 import type { ProjectChannelListParameters } from '@/schema/notification/project-channel/api-verbs/list';
 import type { ProjectChannelModel } from '@/schema/notification/project-channel/model';
@@ -24,7 +24,7 @@ import { useProperRouteLocation } from '@/common/composables/proper-route-locati
 
 import ProjectChannelList from '@/services/alert-manager-v1/components/ProjectChannelList.vue';
 import { useEscalationPolicyFormStore } from '@/services/alert-manager-v1/stores/escalation-policy-form-store';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 
 const NOTIFICATION_LEVELS: {name: EscalationPolicyRule['notification_level']; label: string}[] = [
@@ -170,7 +170,7 @@ watch(() => isAllValid.value, (_isAllValid) => {
                     :action-icon="ACTION_ICON.INTERNAL_LINK"
                     new-tab
                     :text="$t('MONITORING.ALERT.ESCALATION_POLICY.FORM.NOTIFICATIONS_SETTINGS')"
-                    :to="getProperRouteLocation({ name: PROJECT_ROUTE_V1.DETAIL.TAB.NOTIFICATIONS._NAME, params: { id: escalationPolicyFormState.projectId } })"
+                    :to="getProperRouteLocation({ name: PROJECT_ROUTE.DETAIL.TAB.NOTIFICATIONS._NAME, params: { id: escalationPolicyFormState.projectId } })"
                     highlight
             />
         </div>
diff --git a/apps/web/src/services/alert-manager-v1/helpers/alert-badge-helper.ts b/apps/web/src/services/alert-manager-v1/helpers/alert-badge-helper.ts
index 521cc45173..80f00f3cdb 100644
--- a/apps/web/src/services/alert-manager-v1/helpers/alert-badge-helper.ts
+++ b/apps/web/src/services/alert-manager-v1/helpers/alert-badge-helper.ts
@@ -1,4 +1,4 @@
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import { ALERT_STATE } from '@/schema/monitoring/alert/constants';
 import type { EscalationPolicyModel } from '@/schema/monitoring/escalation-policy/model';
 
diff --git a/apps/web/src/services/alert-manager-v1/pages/AlertDashboardPage.vue b/apps/web/src/services/alert-manager-v1/pages/AlertDashboardPage.vue
index 10a5ad17e1..99050398e1 100644
--- a/apps/web/src/services/alert-manager-v1/pages/AlertDashboardPage.vue
+++ b/apps/web/src/services/alert-manager-v1/pages/AlertDashboardPage.vue
@@ -5,7 +5,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PHeading } from '@cloudforet/mirinae';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectAlertConfigListParameters } from '@/schema/monitoring/project-alert-config/api-verbs/list';
 import type { ProjectAlertConfigModel } from '@/schema/monitoring/project-alert-config/model';
 
diff --git a/apps/web/src/services/alert-manager-v1/pages/EscalationPolicyPage.vue b/apps/web/src/services/alert-manager-v1/pages/EscalationPolicyPage.vue
index 7d16360459..018fb59ea4 100644
--- a/apps/web/src/services/alert-manager-v1/pages/EscalationPolicyPage.vue
+++ b/apps/web/src/services/alert-manager-v1/pages/EscalationPolicyPage.vue
@@ -16,7 +16,7 @@ import type { KeyItemSet, ValueHandlerMap } from '@cloudforet/mirinae/types/cont
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { EscalationPolicyDeleteParameters } from '@/schema/monitoring/escalation-policy/api-verbs/delete';
 import type {
     EscalationPolicyListParameters,
diff --git a/apps/web/src/services/alert-manager-v1/stores/alert-assign-user-store.ts b/apps/web/src/services/alert-manager-v1/stores/alert-assign-user-store.ts
index df10f849d4..7f93fd3639 100644
--- a/apps/web/src/services/alert-manager-v1/stores/alert-assign-user-store.ts
+++ b/apps/web/src/services/alert-manager-v1/stores/alert-assign-user-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceUserListParameters } from '@/schema/identity/workspace-user/api-verbs/list';
 import type { WorkspaceUserModel } from '@/schema/identity/workspace-user/model';
 import type { AlertAssignUserParameters } from '@/schema/monitoring/alert/api-verbs/assign-user';
diff --git a/apps/web/src/services/alert-manager/components/AlertDetailNote.vue b/apps/web/src/services/alert-manager/components/AlertDetailNote.vue
index 4d13b2b5b4..be4a83e99f 100644
--- a/apps/web/src/services/alert-manager/components/AlertDetailNote.vue
+++ b/apps/web/src/services/alert-manager/components/AlertDetailNote.vue
@@ -7,7 +7,7 @@ import {
 } from '@cloudforet/mirinae';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertModel } from '@/schema/alert-manager/alert/model';
 import type { NoteCreateParameters } from '@/schema/alert-manager/note/api-verbs/create';
 import type { NoteDeleteParameters } from '@/schema/alert-manager/note/api-verbs/delete';
diff --git a/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue b/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue
index 4fe2b04afe..ba6b27c527 100644
--- a/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue
+++ b/apps/web/src/services/alert-manager/components/AlertDetailTabsTimeline.vue
@@ -9,7 +9,7 @@ import {
     PButton, PToolbox, PHeading, PHeadingLayout, PDataLoader, PDivider, PSelectStatus, PTextButton,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertHistoryParameters } from '@/schema/alert-manager/alert/api-verbs/history';
 import { ALERT_HISTORY_ACTION } from '@/schema/alert-manager/alert/constants';
 import type { AlertModel, AlertHistoryModel } from '@/schema/alert-manager/alert/model';
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsNotifications.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsNotifications.vue
index 60756747c7..d4b0cfdd10 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsNotifications.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsNotifications.vue
@@ -20,7 +20,7 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { ValueHandlerMap } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceChannelListParameters } from '@/schema/alert-manager/service-channel/api-verbs/list';
 import {
     SERVICE_CHANNEL_FORWARD_TYPE,
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewNotification.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewNotification.vue
index 8b208fbd0c..7ccfcdd451 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewNotification.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewNotification.vue
@@ -9,7 +9,7 @@ import {
     PFieldTitle, PIconButton, PLazyImg, PDivider, PTextButton, PDataLoader, PI,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceChannelListParameters } from '@/schema/alert-manager/service-channel/api-verbs/list';
 import { SERVICE_CHANNEL_TYPE } from '@/schema/alert-manager/service-channel/constants';
 import type { ServiceChannelModel } from '@/schema/alert-manager/service-channel/model';
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewStatusTable.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewStatusTable.vue
index ee97ccfa30..bccb9f9b09 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewStatusTable.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewStatusTable.vue
@@ -11,7 +11,7 @@ import {
 import type { ValueItem } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertListParameters } from '@/schema/alert-manager/alert/api-verbs/list';
 import { ALERT_STATUS, ALERT_URGENCY } from '@/schema/alert-manager/alert/constants';
 import type { AlertModel } from '@/schema/alert-manager/alert/model';
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewWebhook.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewWebhook.vue
index 349c1314e6..cfdb109165 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewWebhook.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewWebhook.vue
@@ -9,7 +9,7 @@ import {
     PFieldTitle, PIconButton, PLazyImg, PDivider, PTextButton, PDataLoader,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WebhookListParameters } from '@/schema/alert-manager/webhook/api-verbs/list';
 import type { WebhookModel } from '@/schema/alert-manager/webhook/model';
 
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicy.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicy.vue
index 226fe57808..d2884da55f 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicy.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicy.vue
@@ -19,7 +19,7 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 import type { ValueHandlerMap } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { EscalationPolicyListParameters } from '@/schema/alert-manager/escalation-policy/api-verbs/list';
 import type { EscalationPolicyModel } from '@/schema/alert-manager/escalation-policy/model';
 import type { EscalationPolicyRulesType } from '@/schema/alert-manager/escalation-policy/type';
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicyFormChannelDropdown.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicyFormChannelDropdown.vue
index 84691ee7d2..9548988cb1 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicyFormChannelDropdown.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicyFormChannelDropdown.vue
@@ -14,7 +14,7 @@ import type {
     SelectDropdownMenuItem,
 } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceChannelListParameters } from '@/schema/alert-manager/service-channel/api-verbs/list';
 import { SERVICE_CHANNEL_TYPE } from '@/schema/alert-manager/service-channel/constants';
 import type { ServiceChannelModel } from '@/schema/alert-manager/service-channel/model';
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionAlert.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionAlert.vue
index 6f494af387..69de4e019d 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionAlert.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleActionAlert.vue
@@ -17,7 +17,7 @@ import {
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import type { InputItem } from '@cloudforet/mirinae/types/controls/input/text-input/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { ALERT_STATUS } from '@/schema/alert-manager/alert/constants';
 import type { AlertStatusType } from '@/schema/alert-manager/alert/type';
 import type { EscalationPolicyListParameters } from '@/schema/alert-manager/escalation-policy/api-verbs/list';
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleScopeModal.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleScopeModal.vue
index a6703b6bf5..25a96b0c06 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleScopeModal.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleScopeModal.vue
@@ -12,7 +12,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { EVENT_RULE_SCOPE } from '@/schema/alert-manager/event-rule/constant';
 import type { EventRuleScopeType } from '@/schema/alert-manager/event-rule/type';
 import type { WebhookListParameters } from '@/schema/alert-manager/webhook/api-verbs/list';
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue
index 8264de8d51..50859211d1 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEventRuleSidebar.vue
@@ -31,7 +31,7 @@ import { gray } from '@/styles/colors';
 import { SERVICE_DETAIL_TABS } from '@/services/alert-manager/constants/common-constant';
 import { ALERT_MANAGER_ROUTE } from '@/services/alert-manager/routes/route-constant';
 import { useServiceDetailPageStore } from '@/services/alert-manager/stores/service-detail-page-store';
-import type { TreeNode } from '@/services/project/tree/type';
+import type { TreeNode } from '@/services/project-v1/tree/type';
 
 interface Props {
   hideSidebar: boolean;
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhook.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhook.vue
index 503e28698c..e7fbce8ff1 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhook.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhook.vue
@@ -19,7 +19,7 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { ValueHandlerMap } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WebhookListParameters } from '@/schema/alert-manager/webhook/api-verbs/list';
 import { WEBHOOK_STATE } from '@/schema/alert-manager/webhook/constants';
 import type { WebhookModel } from '@/schema/alert-manager/webhook/model';
diff --git a/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhookDetail.vue b/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhookDetail.vue
index bb589c3bf3..f4fc4c5ed0 100644
--- a/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhookDetail.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceDetailTabsWebhookDetail.vue
@@ -15,7 +15,7 @@ import type { DataTableFieldType } from '@cloudforet/mirinae/src/data-display/ta
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WebhookGetParameters } from '@/schema/alert-manager/webhook/api-verbs/get';
 import type { WebhookListErrorSParameters } from '@/schema/alert-manager/webhook/api-verbs/list-errors';
 import type { WebhookUpdateMessageFormatParameters } from '@/schema/alert-manager/webhook/api-verbs/update-message-format';
diff --git a/apps/web/src/services/alert-manager/components/ServiceList.vue b/apps/web/src/services/alert-manager/components/ServiceList.vue
index c08e04c2cd..ea64b1a73c 100644
--- a/apps/web/src/services/alert-manager/components/ServiceList.vue
+++ b/apps/web/src/services/alert-manager/components/ServiceList.vue
@@ -12,7 +12,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { ToolboxOptions } from '@cloudforet/mirinae/src/controls/toolbox/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceListParameters } from '@/schema/alert-manager/service/api-verbs/list';
 import type { ServiceModel } from '@/schema/alert-manager/service/model';
 
diff --git a/apps/web/src/services/alert-manager/components/WebhookCreateForm.vue b/apps/web/src/services/alert-manager/components/WebhookCreateForm.vue
index 5325e269f6..bd6aa77ac3 100644
--- a/apps/web/src/services/alert-manager/components/WebhookCreateForm.vue
+++ b/apps/web/src/services/alert-manager/components/WebhookCreateForm.vue
@@ -6,7 +6,7 @@ import {
     PFieldGroup, PTextInput, PSelectDropdown, PDataLoader, PLazyImg,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { PluginGetVersionsParameters } from '@/schema/repository/plugin/api-verbs/get-versions';
 import type { PluginModel } from '@/schema/repository/plugin/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/alert-manager/components/WebhookCreateTypeSelector.vue b/apps/web/src/services/alert-manager/components/WebhookCreateTypeSelector.vue
index d469027657..d965763e17 100644
--- a/apps/web/src/services/alert-manager/components/WebhookCreateTypeSelector.vue
+++ b/apps/web/src/services/alert-manager/components/WebhookCreateTypeSelector.vue
@@ -6,7 +6,7 @@ import {
     PSelectCard, PLazyImg, PDataLoader,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { PluginListParameters } from '@/schema/repository/plugin/api-verbs/list';
 import type { PluginModel } from '@/schema/repository/plugin/model';
 import type { RepositoryListParameters } from '@/schema/repository/repository/api-verbs/list';
diff --git a/apps/web/src/services/alert-manager/stores/alert-page-store.ts b/apps/web/src/services/alert-manager/stores/alert-page-store.ts
index 1ec6a5a669..f6a838c951 100644
--- a/apps/web/src/services/alert-manager/stores/alert-page-store.ts
+++ b/apps/web/src/services/alert-manager/stores/alert-page-store.ts
@@ -6,7 +6,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertListParameters } from '@/schema/alert-manager/alert/api-verbs/list';
 import type { AlertModel } from '@/schema/alert-manager/alert/model';
 
diff --git a/apps/web/src/services/alert-manager/stores/service-create-form-store.ts b/apps/web/src/services/alert-manager/stores/service-create-form-store.ts
index 9fbd3c1c49..162f438380 100644
--- a/apps/web/src/services/alert-manager/stores/service-create-form-store.ts
+++ b/apps/web/src/services/alert-manager/stores/service-create-form-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { NotificationProtocolListParameters } from '@/schema/alert-manager/notification-protocol/api-verbs/list';
 import type { NotificationProtocolModel } from '@/schema/alert-manager/notification-protocol/model';
 import type { ServiceModel } from '@/schema/alert-manager/service/model';
diff --git a/apps/web/src/services/alert-manager/stores/service-detail-page-store.ts b/apps/web/src/services/alert-manager/stores/service-detail-page-store.ts
index 93cf5da52c..d2990c81eb 100644
--- a/apps/web/src/services/alert-manager/stores/service-detail-page-store.ts
+++ b/apps/web/src/services/alert-manager/stores/service-detail-page-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { EventRuleGetParameters } from '@/schema/alert-manager/event-rule/api-verbs/get';
 import type { EventRuleListParameters } from '@/schema/alert-manager/event-rule/api-verbs/list';
 import type { EventRuleModel } from '@/schema/alert-manager/event-rule/model';
diff --git a/apps/web/src/services/asset-inventory-v1/components/CloudServiceAlertsTab.vue b/apps/web/src/services/asset-inventory-v1/components/CloudServiceAlertsTab.vue
index 4ac42150d8..e087fac05d 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CloudServiceAlertsTab.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CloudServiceAlertsTab.vue
@@ -13,7 +13,7 @@ import type { DataTableFieldType } from '@cloudforet/mirinae/src/data-display/ta
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertListParameters } from '@/schema/alert-manager/alert/api-verbs/list';
 import { ALERT_STATUS, ALERT_URGENCY } from '@/schema/alert-manager/alert/constants';
 import type { AlertModel } from '@/schema/alert-manager/alert/model';
diff --git a/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetail.vue b/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetail.vue
index 2ed0a558d6..c93e47ce6a 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetail.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetail.vue
@@ -21,9 +21,9 @@ import type { DynamicLayout, DynamicLayoutType } from '@cloudforet/mirinae/types
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
 
-import { QueryType } from '@/schema/_common/api-verbs/export';
-import type { ExportParameter } from '@/schema/_common/api-verbs/export';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import { QueryType } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ExportParameter } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceGetParameters } from '@/schema/inventory/cloud-service/api-verbs/get';
 import type { CloudServiceListParameters } from '@/schema/inventory/cloud-service/api-verbs/list';
 import type { CloudServiceModel } from '@/schema/inventory/cloud-service/model';
@@ -46,7 +46,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
 import { useCloudServiceDetailPageStore } from '@/services/asset-inventory-v1/stores/cloud-service-detail-page-store';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface Props {
     cloudServiceId: string;
diff --git a/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailExcelExportOptionModal.vue b/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailExcelExportOptionModal.vue
index e57e821b86..e9ae1a7ad9 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailExcelExportOptionModal.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailExcelExportOptionModal.vue
@@ -16,8 +16,8 @@ import {
 import type { DynamicField } from '@cloudforet/mirinae/src/data-display/dynamic/dynamic-field/type/field-schema';
 import type { DynamicLayout } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 
-import { QueryType } from '@/schema/_common/api-verbs/export';
-import type { ExportOption, ExportParameter } from '@/schema/_common/api-verbs/export';
+import { QueryType } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ExportOption, ExportParameter } from '@/api-clients/_common/schema/api-verbs/export';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailMultipleSelectedData.vue b/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailMultipleSelectedData.vue
index 0a283ad0ff..27af6ba00e 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailMultipleSelectedData.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailMultipleSelectedData.vue
@@ -20,9 +20,9 @@ import type { DynamicLayout } from '@cloudforet/mirinae/types/data-display/dynam
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
 
-import { QueryType } from '@/schema/_common/api-verbs/export';
-import type { ExportParameter } from '@/schema/_common/api-verbs/export';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import { QueryType } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ExportParameter } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceGetParameters } from '@/schema/inventory/cloud-service/api-verbs/get';
 import type { CloudServiceListParameters } from '@/schema/inventory/cloud-service/api-verbs/list';
 import type { CloudServiceModel } from '@/schema/inventory/cloud-service/model';
@@ -44,7 +44,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { BASE_INFORMATION } from '@/services/asset-inventory-v1/constants/cloud-service-detail-constant';
 import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
 import { useCloudServiceDetailPageStore } from '@/services/asset-inventory-v1/stores/cloud-service-detail-page-store';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface Props {
     cloudServiceIdList: string[];
diff --git a/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailTabs.vue b/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailTabs.vue
index 777436dd77..2e73c9baad 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailTabs.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CloudServiceDetailTabs.vue
@@ -46,7 +46,7 @@ import BoardTaskTable from '@/services/ops-flow/components/BoardTaskTable.vue';
 import {
     useTaskManagementTemplateStore,
 } from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface Props {
     tableState: any;
diff --git a/apps/web/src/services/asset-inventory-v1/components/CloudServiceExcelExportOptionModal.vue b/apps/web/src/services/asset-inventory-v1/components/CloudServiceExcelExportOptionModal.vue
index dcbf44da7f..6c1c11acb9 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CloudServiceExcelExportOptionModal.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CloudServiceExcelExportOptionModal.vue
@@ -12,8 +12,8 @@ import {
 import type { DynamicLayout } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 
 
-import { QueryType } from '@/schema/_common/api-verbs/export';
-import type { ExportOption, ExportParameter } from '@/schema/_common/api-verbs/export';
+import { QueryType } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ExportOption, ExportParameter } from '@/api-clients/_common/schema/api-verbs/export';
 import type { CloudServiceAnalyzeParameters } from '@/schema/inventory/cloud-service/api-verbs/analyze';
 import { i18n } from '@/translations';
 
diff --git a/apps/web/src/services/asset-inventory-v1/components/CloudServiceHistory.vue b/apps/web/src/services/asset-inventory-v1/components/CloudServiceHistory.vue
index 2c49c8fae8..3774b8fbec 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CloudServiceHistory.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CloudServiceHistory.vue
@@ -113,8 +113,8 @@ import {
 } from '@cloudforet/mirinae';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { ChangeHistoryListParameters } from '@/schema/inventory/change-history/api-verbs/list';
 import type { ChangeHistoryModel } from '@/schema/inventory/change-history/model';
 import type { NoteListParameters } from '@/schema/inventory/note/api-verbs/list';
diff --git a/apps/web/src/services/asset-inventory-v1/components/CloudServiceHistoryDetailNoteTab.vue b/apps/web/src/services/asset-inventory-v1/components/CloudServiceHistoryDetailNoteTab.vue
index b21e903b42..2a8343b746 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CloudServiceHistoryDetailNoteTab.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CloudServiceHistoryDetailNoteTab.vue
@@ -13,7 +13,7 @@ import {
 } from '@cloudforet/mirinae';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { NoteCreateParameters } from '@/schema/inventory/note/api-verbs/create';
 import type { NoteDeleteParameters } from '@/schema/inventory/note/api-verbs/delete';
 import type { NoteListParameters } from '@/schema/inventory/note/api-verbs/list';
diff --git a/apps/web/src/services/asset-inventory-v1/components/CloudServiceLogTab.vue b/apps/web/src/services/asset-inventory-v1/components/CloudServiceLogTab.vue
index a082b145e7..67ae196d4c 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CloudServiceLogTab.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CloudServiceLogTab.vue
@@ -88,7 +88,7 @@ import type { DynamicLayoutEventListener } from '@cloudforet/mirinae/types/data-
 import type { DynamicLayout } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { DataSourceListParameters } from '@/schema/monitoring/data-source/api-verbs/list';
 import type { DataSourceModel } from '@/schema/monitoring/data-source/model';
 import type { MonitoringLogListParameters } from '@/schema/monitoring/log/api-verbs/list';
diff --git a/apps/web/src/services/asset-inventory-v1/components/CollectorAdditionalRuleForm.vue b/apps/web/src/services/asset-inventory-v1/components/CollectorAdditionalRuleForm.vue
index 01827a2102..059c52c66a 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CollectorAdditionalRuleForm.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CollectorAdditionalRuleForm.vue
@@ -12,7 +12,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceTypeStatParameters } from '@/schema/inventory/cloud-service-type/api-verbs/stat';
 import {
     COLLECTOR_RULE_CONDITION_KEY, COLLECTOR_RULE_CONDITION_KEY_LABEL,
diff --git a/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep1.vue b/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep1.vue
index 294fe961dd..cdb96df25d 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep1.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep1.vue
@@ -80,7 +80,7 @@ import {
 } from '@cloudforet/mirinae';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { PluginListParameters } from '@/schema/repository/plugin/api-verbs/list';
 import type { PluginModel } from '@/schema/repository/plugin/model';
 
diff --git a/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep1SearchFilter.vue b/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep1SearchFilter.vue
index 2f17205096..f6378b3833 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep1SearchFilter.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep1SearchFilter.vue
@@ -122,7 +122,7 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RepositoryListParameters } from '@/schema/repository/repository/api-verbs/list';
 import type { RepositoryModel } from '@/schema/repository/repository/model';
 
diff --git a/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep4.vue b/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep4.vue
index 60e7c74daa..d67ec9607a 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep4.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CollectorCreateStep4.vue
@@ -59,8 +59,8 @@ import {
 } from '@cloudforet/mirinae';
 
 
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import { SpaceRouter } from '@/router';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
 import type { CollectorCollectParameters } from '@/schema/inventory/collector/api-verbs/collect';
 import type { CollectorCreateParameters } from '@/schema/inventory/collector/api-verbs/create';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
diff --git a/apps/web/src/services/asset-inventory-v1/components/CollectorDataModal.vue b/apps/web/src/services/asset-inventory-v1/components/CollectorDataModal.vue
index a9ff8c28b6..8db14ee6a7 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CollectorDataModal.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CollectorDataModal.vue
@@ -40,7 +40,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PButtonModal } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CollectorCollectParameters } from '@/schema/inventory/collector/api-verbs/collect';
 import type { JobModel } from '@/schema/inventory/job/model';
 import type { SecretListParameters } from '@/schema/secret/secret/api-verbs/list';
diff --git a/apps/web/src/services/asset-inventory-v1/components/CollectorDetailAttachedServiceAccounts.vue b/apps/web/src/services/asset-inventory-v1/components/CollectorDetailAttachedServiceAccounts.vue
index 35e9dd0344..b6628d54eb 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CollectorDetailAttachedServiceAccounts.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CollectorDetailAttachedServiceAccounts.vue
@@ -14,7 +14,7 @@ import type { DefinitionField } from '@cloudforet/mirinae/types/data-display/tab
 import type { ToolboxTableOptions } from '@cloudforet/mirinae/types/data-display/tables/toolbox-table/type';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { SecretListParameters } from '@/schema/secret/secret/api-verbs/list';
 import type { SecretModel } from '@/schema/secret/secret/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/asset-inventory-v1/components/CollectorDetailTags.vue b/apps/web/src/services/asset-inventory-v1/components/CollectorDetailTags.vue
index 2325242570..8f7a80ebae 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CollectorDetailTags.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CollectorDetailTags.vue
@@ -4,7 +4,7 @@ import { computed } from 'vue';
 import { PTag, PFieldTitle, PEmpty } from '@cloudforet/mirinae';
 import { isNotEmpty } from '@cloudforet/utils';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 const props = withDefaults(defineProps<{
     tags: Tags;
diff --git a/apps/web/src/services/asset-inventory-v1/components/CollectorHistoryJobTaskTable.vue b/apps/web/src/services/asset-inventory-v1/components/CollectorHistoryJobTaskTable.vue
index 4fae3c5dbe..c35cd2617b 100644
--- a/apps/web/src/services/asset-inventory-v1/components/CollectorHistoryJobTaskTable.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/CollectorHistoryJobTaskTable.vue
@@ -14,7 +14,7 @@ import {
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 import { durationFormatter, iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { JobTaskListParameters } from '@/schema/inventory/job-task/api-verbs/list';
 import type { JobTaskModel } from '@/schema/inventory/job-task/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerChart.vue b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerChart.vue
index 3ba7aa06f6..8d9c607156 100644
--- a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerChart.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerChart.vue
@@ -13,7 +13,7 @@ import {
     PEmpty, PSelectButton, PSkeleton, PSelectDropdown, PButton,
 } from '@cloudforet/mirinae';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 import type { MetricDataAnalyzeParameters } from '@/schema/inventory/metric-data/api-verbs/analyze';
 
 import MetricExplorerDonutChart from '@/services/asset-inventory-v1/components/MetricExplorerDonutChart.vue';
diff --git a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerDataTable.vue b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerDataTable.vue
index f29de81bf4..a91fa59437 100644
--- a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerDataTable.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerDataTable.vue
@@ -18,7 +18,7 @@ import { PTextPagination, PToolboxTable } from '@cloudforet/mirinae';
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import { byteFormatter, numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 import type { MetricDataAnalyzeParameters } from '@/schema/inventory/metric-data/api-verbs/analyze';
 import type { MetricLabelKey } from '@/schema/inventory/metric/type';
 
diff --git a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerDonutChart.vue b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerDonutChart.vue
index b029b84e29..108e20c52f 100644
--- a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerDonutChart.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerDonutChart.vue
@@ -11,7 +11,7 @@ import { isEmpty, orderBy, throttle } from 'lodash';
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import { getReferenceLabel } from '@/common/modules/widgets/_helpers/widget-date-helper';
diff --git a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerHeader.vue b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerHeader.vue
index 42487829bc..ce292d688f 100644
--- a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerHeader.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerHeader.vue
@@ -13,7 +13,7 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { MetricExampleDeleteParameters } from '@/schema/inventory/metric-example/api-verbs/delete';
 import type { MetricExampleUpdateParameters } from '@/schema/inventory/metric-example/api-verbs/update';
 import type { MetricExampleModel } from '@/schema/inventory/metric-example/model';
diff --git a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerHorizontalColumnChart.vue b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerHorizontalColumnChart.vue
index 93c116c754..383c7ce44f 100644
--- a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerHorizontalColumnChart.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerHorizontalColumnChart.vue
@@ -13,7 +13,7 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import {
diff --git a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerLineChart.vue b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerLineChart.vue
index f8ae5d6965..15f34ab2c1 100644
--- a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerLineChart.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerLineChart.vue
@@ -14,7 +14,7 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import {
diff --git a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerMapChart.vue b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerMapChart.vue
index 9a051629c0..98ab76d85e 100644
--- a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerMapChart.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerMapChart.vue
@@ -13,7 +13,7 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { getReferenceLabel } from '@/common/modules/widgets/_helpers/widget-date-helper';
 
diff --git a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerQueryFormSidebar.vue b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerQueryFormSidebar.vue
index a2f1fee8ad..a87c0dd419 100644
--- a/apps/web/src/services/asset-inventory-v1/components/MetricExplorerQueryFormSidebar.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/MetricExplorerQueryFormSidebar.vue
@@ -9,7 +9,7 @@ import {
 } from '@cloudforet/mirinae';
 
 
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { MetricCreateParameters } from '@/schema/inventory/metric/api-verbs/create';
 import type { MetricUpdateParameters } from '@/schema/inventory/metric/api-verbs/update';
 import { METRIC_TYPE } from '@/schema/inventory/metric/constant';
diff --git a/apps/web/src/services/asset-inventory-v1/components/ServiceAccountAttachedGeneralAccounts.vue b/apps/web/src/services/asset-inventory-v1/components/ServiceAccountAttachedGeneralAccounts.vue
index bc939b2837..b6bb66090e 100644
--- a/apps/web/src/services/asset-inventory-v1/components/ServiceAccountAttachedGeneralAccounts.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/ServiceAccountAttachedGeneralAccounts.vue
@@ -29,7 +29,7 @@ import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import { SERVICE_ACCOUNT_STATE } from '@/schema/identity/service-account/constant';
 import type { ServiceAccountModel } from '@/schema/identity/service-account/model';
@@ -51,7 +51,7 @@ import { getAccountFields, stateFormatter } from '@/services/asset-inventory-v1/
 import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
 import { useServiceAccountPageStore } from '@/services/asset-inventory-v1/stores/service-account-page-store';
 import { useServiceAccountSchemaStore } from '@/services/asset-inventory-v1/stores/service-account-schema-store';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 const props = withDefaults(defineProps<{
     serviceAccountId: string;
diff --git a/apps/web/src/services/asset-inventory-v1/components/ServiceAccountBaseInformationForm.vue b/apps/web/src/services/asset-inventory-v1/components/ServiceAccountBaseInformationForm.vue
index fc344b5f10..699b80def7 100644
--- a/apps/web/src/services/asset-inventory-v1/components/ServiceAccountBaseInformationForm.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/ServiceAccountBaseInformationForm.vue
@@ -8,7 +8,7 @@ import {
     PFieldGroup, PJsonSchemaForm, PTextInput,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import type { ServiceAccountModel } from '@/schema/identity/service-account/model';
 import type { TrustedAccountModel } from '@/schema/identity/trusted-account/model';
diff --git a/apps/web/src/services/asset-inventory-v1/components/ServiceAccountCredentialsForm.vue b/apps/web/src/services/asset-inventory-v1/components/ServiceAccountCredentialsForm.vue
index 6e3d0b6c67..70369a4ffd 100644
--- a/apps/web/src/services/asset-inventory-v1/components/ServiceAccountCredentialsForm.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/ServiceAccountCredentialsForm.vue
@@ -17,7 +17,7 @@ import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-s
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { SchemaListParameters } from '@/schema/identity/schema/api-verbs/list';
 import type { SchemaModel } from '@/schema/identity/schema/model';
 import { ACCOUNT_TYPE } from '@/schema/identity/service-account/constant';
diff --git a/apps/web/src/services/asset-inventory-v1/components/ServiceAccountEditModal.vue b/apps/web/src/services/asset-inventory-v1/components/ServiceAccountEditModal.vue
index 5e9ab187f3..ee9c01fb5c 100644
--- a/apps/web/src/services/asset-inventory-v1/components/ServiceAccountEditModal.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/ServiceAccountEditModal.vue
@@ -7,7 +7,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import type { ServiceAccountUpdateParameters } from '@/schema/identity/service-account/api-verbs/update';
 import type { ServiceAccountModel } from '@/schema/identity/service-account/model';
diff --git a/apps/web/src/services/asset-inventory-v1/components/WorkspaceDropdown.vue b/apps/web/src/services/asset-inventory-v1/components/WorkspaceDropdown.vue
index 571e0c4bb1..49248584bc 100644
--- a/apps/web/src/services/asset-inventory-v1/components/WorkspaceDropdown.vue
+++ b/apps/web/src/services/asset-inventory-v1/components/WorkspaceDropdown.vue
@@ -9,7 +9,7 @@ import { PButton, PSelectDropdown, PStatus } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
diff --git a/apps/web/src/services/asset-inventory-v1/helpers/asset-analysis-chart-data-helper.ts b/apps/web/src/services/asset-inventory-v1/helpers/asset-analysis-chart-data-helper.ts
index cef3ab1ea5..97feea0c8a 100644
--- a/apps/web/src/services/asset-inventory-v1/helpers/asset-analysis-chart-data-helper.ts
+++ b/apps/web/src/services/asset-inventory-v1/helpers/asset-analysis-chart-data-helper.ts
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import type { ReferenceMap } from '@/store/reference/type';
 
diff --git a/apps/web/src/services/asset-inventory-v1/helpers/dynamic-ui-schema-generator/index.ts b/apps/web/src/services/asset-inventory-v1/helpers/dynamic-ui-schema-generator/index.ts
index fcfb7c271f..525dc56c7a 100644
--- a/apps/web/src/services/asset-inventory-v1/helpers/dynamic-ui-schema-generator/index.ts
+++ b/apps/web/src/services/asset-inventory-v1/helpers/dynamic-ui-schema-generator/index.ts
@@ -3,7 +3,7 @@ import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-s
 import type { DynamicField } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-field/type/field-schema';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserConfigCreateParameters } from '@/schema/config/user-config/api-verbs/create';
 import type { UserConfigGetParameters } from '@/schema/config/user-config/api-verbs/get';
 import type { UserConfigUpdateParameters } from '@/schema/config/user-config/api-verbs/update';
diff --git a/apps/web/src/services/asset-inventory-v1/pages/CloudServiceDetailPage.vue b/apps/web/src/services/asset-inventory-v1/pages/CloudServiceDetailPage.vue
index 91be521536..e9070838f9 100644
--- a/apps/web/src/services/asset-inventory-v1/pages/CloudServiceDetailPage.vue
+++ b/apps/web/src/services/asset-inventory-v1/pages/CloudServiceDetailPage.vue
@@ -24,9 +24,9 @@ import type {
     DynamicLayoutOptions,
 } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 
-import { QueryType } from '@/schema/_common/api-verbs/export';
-import type { ExportParameter } from '@/schema/_common/api-verbs/export';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import { QueryType } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ExportParameter } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceGetParameters } from '@/schema/inventory/cloud-service/api-verbs/get';
 import type { CloudServiceListParameters } from '@/schema/inventory/cloud-service/api-verbs/list';
 import type { CloudServiceModel } from '@/schema/inventory/cloud-service/model';
@@ -65,7 +65,7 @@ import {
 import { useCloudServiceDetailPageStore } from '@/services/asset-inventory-v1/stores/cloud-service-detail-page-store';
 import { useCloudServiceLSBStore } from '@/services/asset-inventory-v1/stores/cloud-service-l-s-b-store';
 import type { Period } from '@/services/asset-inventory-v1/types/type';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 
 interface Props {
diff --git a/apps/web/src/services/asset-inventory-v1/pages/CollectorHistoryPage.vue b/apps/web/src/services/asset-inventory-v1/pages/CollectorHistoryPage.vue
index dc970b0b7e..16d60eab43 100644
--- a/apps/web/src/services/asset-inventory-v1/pages/CollectorHistoryPage.vue
+++ b/apps/web/src/services/asset-inventory-v1/pages/CollectorHistoryPage.vue
@@ -20,8 +20,8 @@ import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/
 import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import { durationFormatter, iso8601Formatter } from '@cloudforet/utils';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { JobListParameters } from '@/schema/inventory/job/api-verbs/list';
 import type { JobModel } from '@/schema/inventory/job/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/asset-inventory-v1/pages/CollectorMainPage.vue b/apps/web/src/services/asset-inventory-v1/pages/CollectorMainPage.vue
index 2807cf8bda..79df11ed9e 100644
--- a/apps/web/src/services/asset-inventory-v1/pages/CollectorMainPage.vue
+++ b/apps/web/src/services/asset-inventory-v1/pages/CollectorMainPage.vue
@@ -13,8 +13,8 @@ import {
     PButton, PHeading, PDataLoader, PHeadingLayout,
 } from '@cloudforet/mirinae';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { CollectorListParameters } from '@/schema/inventory/collector/api-verbs/list';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
 
diff --git a/apps/web/src/services/asset-inventory-v1/pages/ServiceAccountPage.vue b/apps/web/src/services/asset-inventory-v1/pages/ServiceAccountPage.vue
index a786884bf9..69433dfe6b 100644
--- a/apps/web/src/services/asset-inventory-v1/pages/ServiceAccountPage.vue
+++ b/apps/web/src/services/asset-inventory-v1/pages/ServiceAccountPage.vue
@@ -23,7 +23,7 @@ import type {
 import type { DynamicLayoutOptions, SearchSchema } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import { ACCOUNT_TYPE, SERVICE_ACCOUNT_STATE } from '@/schema/identity/service-account/constant';
diff --git a/apps/web/src/services/asset-inventory-v1/pages/admin/AdminCollectorHistoryPage.vue b/apps/web/src/services/asset-inventory-v1/pages/admin/AdminCollectorHistoryPage.vue
index c9cbd7df1a..0e74b61135 100644
--- a/apps/web/src/services/asset-inventory-v1/pages/admin/AdminCollectorHistoryPage.vue
+++ b/apps/web/src/services/asset-inventory-v1/pages/admin/AdminCollectorHistoryPage.vue
@@ -21,8 +21,8 @@ import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/
 import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import { durationFormatter, iso8601Formatter } from '@cloudforet/utils';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { JobListParameters } from '@/schema/inventory/job/api-verbs/list';
 import type { JobModel } from '@/schema/inventory/job/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/asset-inventory-v1/pages/admin/AdminCollectorMainPage.vue b/apps/web/src/services/asset-inventory-v1/pages/admin/AdminCollectorMainPage.vue
index 705a921fc9..76a70197c9 100644
--- a/apps/web/src/services/asset-inventory-v1/pages/admin/AdminCollectorMainPage.vue
+++ b/apps/web/src/services/asset-inventory-v1/pages/admin/AdminCollectorMainPage.vue
@@ -13,8 +13,8 @@ import {
     PButton, PHeading, PDataLoader, PHeadingLayout,
 } from '@cloudforet/mirinae';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { CollectorListParameters } from '@/schema/inventory/collector/api-verbs/list';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
 
diff --git a/apps/web/src/services/asset-inventory-v1/stores/cloud-service-detail-page-store.ts b/apps/web/src/services/asset-inventory-v1/stores/cloud-service-detail-page-store.ts
index 78c7ef2c6c..3c0c991229 100644
--- a/apps/web/src/services/asset-inventory-v1/stores/cloud-service-detail-page-store.ts
+++ b/apps/web/src/services/asset-inventory-v1/stores/cloud-service-detail-page-store.ts
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceTypeListParameters } from '@/schema/inventory/cloud-service-type/api-verbs/list';
 import type { CloudServiceTypeModel } from '@/schema/inventory/cloud-service-type/model';
 
diff --git a/apps/web/src/services/asset-inventory-v1/stores/collector-data-modal-store.ts b/apps/web/src/services/asset-inventory-v1/stores/collector-data-modal-store.ts
index 8f29c0b3b2..8922ab11a0 100644
--- a/apps/web/src/services/asset-inventory-v1/stores/collector-data-modal-store.ts
+++ b/apps/web/src/services/asset-inventory-v1/stores/collector-data-modal-store.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type {
     CollectorModel,
 } from '@/schema/inventory/collector/model';
diff --git a/apps/web/src/services/asset-inventory-v1/stores/collector-form-store.ts b/apps/web/src/services/asset-inventory-v1/stores/collector-form-store.ts
index f35ba3f47f..c0cfa58d27 100644
--- a/apps/web/src/services/asset-inventory-v1/stores/collector-form-store.ts
+++ b/apps/web/src/services/asset-inventory-v1/stores/collector-form-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CollectorRuleListParameters } from '@/schema/inventory/collector-rule/api-verbs/list';
 import type { CollectorRuleModel } from '@/schema/inventory/collector-rule/model';
 import type {
diff --git a/apps/web/src/services/asset-inventory-v1/stores/collector-job-store.ts b/apps/web/src/services/asset-inventory-v1/stores/collector-job-store.ts
index cb9e29fb8c..9d79dac207 100644
--- a/apps/web/src/services/asset-inventory-v1/stores/collector-job-store.ts
+++ b/apps/web/src/services/asset-inventory-v1/stores/collector-job-store.ts
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
 import type { Schedule } from '@/schema/inventory/collector/type';
 import type { JobListParameters } from '@/schema/inventory/job/api-verbs/list';
diff --git a/apps/web/src/services/asset-inventory-v1/stores/collector-page-store.ts b/apps/web/src/services/asset-inventory-v1/stores/collector-page-store.ts
index f5e7cd91b5..89b3cde3ef 100644
--- a/apps/web/src/services/asset-inventory-v1/stores/collector-page-store.ts
+++ b/apps/web/src/services/asset-inventory-v1/stores/collector-page-store.ts
@@ -6,7 +6,7 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CollectorListParameters } from '@/schema/inventory/collector/api-verbs/list';
 import type { CollectorUpdateParameters } from '@/schema/inventory/collector/api-verbs/update';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
diff --git a/apps/web/src/services/asset-inventory-v1/stores/metric-explorer-page-store.ts b/apps/web/src/services/asset-inventory-v1/stores/metric-explorer-page-store.ts
index 06f5f80595..b4755f0630 100644
--- a/apps/web/src/services/asset-inventory-v1/stores/metric-explorer-page-store.ts
+++ b/apps/web/src/services/asset-inventory-v1/stores/metric-explorer-page-store.ts
@@ -7,7 +7,7 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { MetricExampleListParameters } from '@/schema/inventory/metric-example/api-verbs/list';
 import type { MetricExampleModel } from '@/schema/inventory/metric-example/model';
 import type { MetricGetParameters } from '@/schema/inventory/metric/api-verbs/get';
diff --git a/apps/web/src/services/asset-inventory-v1/stores/service-account-page-store.ts b/apps/web/src/services/asset-inventory-v1/stores/service-account-page-store.ts
index 6f6074b0c9..34865a0124 100644
--- a/apps/web/src/services/asset-inventory-v1/stores/service-account-page-store.ts
+++ b/apps/web/src/services/asset-inventory-v1/stores/service-account-page-store.ts
@@ -6,9 +6,9 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CostReportConfigListParameters } from '@/schema/cost-analysis/cost-report-config/api-verbs/list';
-import type { CostReportConfigModel } from '@/schema/cost-analysis/cost-report-config/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostReportConfigListParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
 import type { IdentityJobListParameters } from '@/schema/identity/job/api-verbs/list';
 import type { IdentityJobModel } from '@/schema/identity/job/model';
 import type { IdentityJobStatus } from '@/schema/identity/job/type';
diff --git a/apps/web/src/services/asset-inventory-v1/stores/service-account-schema-store.ts b/apps/web/src/services/asset-inventory-v1/stores/service-account-schema-store.ts
index c611036bfe..bd6faa42a5 100644
--- a/apps/web/src/services/asset-inventory-v1/stores/service-account-schema-store.ts
+++ b/apps/web/src/services/asset-inventory-v1/stores/service-account-schema-store.ts
@@ -8,7 +8,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { DynamicField } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-field/type/field-schema';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProviderModel } from '@/schema/identity/provider/model';
 import type { SchemaListParameters } from '@/schema/identity/schema/api-verbs/list';
 import type { SchemaModel } from '@/schema/identity/schema/model';
diff --git a/apps/web/src/services/asset-inventory-v1/types/collector-main-page-type.ts b/apps/web/src/services/asset-inventory-v1/types/collector-main-page-type.ts
index a29a416260..c3a9193fc8 100644
--- a/apps/web/src/services/asset-inventory-v1/types/collector-main-page-type.ts
+++ b/apps/web/src/services/asset-inventory-v1/types/collector-main-page-type.ts
@@ -2,7 +2,7 @@ import type { Dictionary, Location } from 'vue-router/types/router';
 
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
     CollectorPluginInfo,
 
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceDetail.vue b/apps/web/src/services/asset-inventory/components/CloudServiceDetail.vue
index 3ea6b646d9..6c58281629 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceDetail.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceDetail.vue
@@ -21,9 +21,9 @@ import type { DynamicLayout, DynamicLayoutType } from '@cloudforet/mirinae/types
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
 
-import { QueryType } from '@/schema/_common/api-verbs/export';
-import type { ExportParameter } from '@/schema/_common/api-verbs/export';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import { QueryType } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ExportParameter } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceGetParameters } from '@/schema/inventory/cloud-service/api-verbs/get';
 import type { CloudServiceListParameters } from '@/schema/inventory/cloud-service/api-verbs/list';
 import type { CloudServiceModel } from '@/schema/inventory/cloud-service/model';
@@ -46,7 +46,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { useCloudServiceDetailPageStore } from '@/services/asset-inventory/stores/cloud-service-detail-page-store';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface Props {
     cloudServiceId: string;
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceDetailExcelExportOptionModal.vue b/apps/web/src/services/asset-inventory/components/CloudServiceDetailExcelExportOptionModal.vue
index 4be6357afb..95ac4e38d2 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceDetailExcelExportOptionModal.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceDetailExcelExportOptionModal.vue
@@ -16,8 +16,8 @@ import {
 import type { DynamicField } from '@cloudforet/mirinae/src/data-display/dynamic/dynamic-field/type/field-schema';
 import type { DynamicLayout } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 
-import { QueryType } from '@/schema/_common/api-verbs/export';
-import type { ExportOption, ExportParameter } from '@/schema/_common/api-verbs/export';
+import { QueryType } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ExportOption, ExportParameter } from '@/api-clients/_common/schema/api-verbs/export';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceDetailMultipleSelectedData.vue b/apps/web/src/services/asset-inventory/components/CloudServiceDetailMultipleSelectedData.vue
index 8421a37138..7be7e31ff6 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceDetailMultipleSelectedData.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceDetailMultipleSelectedData.vue
@@ -20,9 +20,9 @@ import type { DynamicLayout } from '@cloudforet/mirinae/types/data-display/dynam
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
 
-import { QueryType } from '@/schema/_common/api-verbs/export';
-import type { ExportParameter } from '@/schema/_common/api-verbs/export';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import { QueryType } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ExportParameter } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceGetParameters } from '@/schema/inventory/cloud-service/api-verbs/get';
 import type { CloudServiceListParameters } from '@/schema/inventory/cloud-service/api-verbs/list';
 import type { CloudServiceModel } from '@/schema/inventory/cloud-service/model';
@@ -44,7 +44,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { BASE_INFORMATION } from '@/services/asset-inventory/constants/cloud-service-detail-constant';
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { useCloudServiceDetailPageStore } from '@/services/asset-inventory/stores/cloud-service-detail-page-store';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface Props {
     cloudServiceIdList: string[];
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceDetailTabs.vue b/apps/web/src/services/asset-inventory/components/CloudServiceDetailTabs.vue
index 79d903fd34..b125eda84f 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceDetailTabs.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceDetailTabs.vue
@@ -43,7 +43,7 @@ import BoardTaskTable from '@/services/ops-flow/components/BoardTaskTable.vue';
 import {
     useTaskManagementTemplateStore,
 } from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface Props {
     tableState: any;
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceExcelExportOptionModal.vue b/apps/web/src/services/asset-inventory/components/CloudServiceExcelExportOptionModal.vue
index 20bd58c0c8..7bea462dd2 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceExcelExportOptionModal.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceExcelExportOptionModal.vue
@@ -12,8 +12,8 @@ import {
 import type { DynamicLayout } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 
 
-import { QueryType } from '@/schema/_common/api-verbs/export';
-import type { ExportOption, ExportParameter } from '@/schema/_common/api-verbs/export';
+import { QueryType } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ExportOption, ExportParameter } from '@/api-clients/_common/schema/api-verbs/export';
 import type { CloudServiceAnalyzeParameters } from '@/schema/inventory/cloud-service/api-verbs/analyze';
 import { i18n } from '@/translations';
 
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceHistory.vue b/apps/web/src/services/asset-inventory/components/CloudServiceHistory.vue
index 9a5c21953f..a9104d384c 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceHistory.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceHistory.vue
@@ -113,8 +113,8 @@ import {
 import type { KeyItem, ValueHandler } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { ChangeHistoryListParameters } from '@/schema/inventory/change-history/api-verbs/list';
 import type { ChangeHistoryModel } from '@/schema/inventory/change-history/model';
 import type { NoteListParameters } from '@/schema/inventory/note/api-verbs/list';
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue b/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue
index 6233732d55..e5b709b0ad 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceHistoryDetailNoteTab.vue
@@ -10,7 +10,7 @@ import {
 } from '@cloudforet/mirinae';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { NoteCreateParameters } from '@/schema/inventory/note/api-verbs/create';
 import type { NoteDeleteParameters } from '@/schema/inventory/note/api-verbs/delete';
 import type { NoteListParameters } from '@/schema/inventory/note/api-verbs/list';
diff --git a/apps/web/src/services/asset-inventory/components/CloudServiceLogTab.vue b/apps/web/src/services/asset-inventory/components/CloudServiceLogTab.vue
index a082b145e7..67ae196d4c 100644
--- a/apps/web/src/services/asset-inventory/components/CloudServiceLogTab.vue
+++ b/apps/web/src/services/asset-inventory/components/CloudServiceLogTab.vue
@@ -88,7 +88,7 @@ import type { DynamicLayoutEventListener } from '@cloudforet/mirinae/types/data-
 import type { DynamicLayout } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { DataSourceListParameters } from '@/schema/monitoring/data-source/api-verbs/list';
 import type { DataSourceModel } from '@/schema/monitoring/data-source/model';
 import type { MonitoringLogListParameters } from '@/schema/monitoring/log/api-verbs/list';
diff --git a/apps/web/src/services/asset-inventory/components/CollectorAdditionalRuleForm.vue b/apps/web/src/services/asset-inventory/components/CollectorAdditionalRuleForm.vue
index 3318fb192e..f8b50cc20d 100644
--- a/apps/web/src/services/asset-inventory/components/CollectorAdditionalRuleForm.vue
+++ b/apps/web/src/services/asset-inventory/components/CollectorAdditionalRuleForm.vue
@@ -12,7 +12,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceTypeStatParameters } from '@/schema/inventory/cloud-service-type/api-verbs/stat';
 import {
     COLLECTOR_RULE_CONDITION_KEY, COLLECTOR_RULE_CONDITION_KEY_LABEL,
diff --git a/apps/web/src/services/asset-inventory/components/CollectorCreateStep1.vue b/apps/web/src/services/asset-inventory/components/CollectorCreateStep1.vue
index 4a18473195..027883c4db 100644
--- a/apps/web/src/services/asset-inventory/components/CollectorCreateStep1.vue
+++ b/apps/web/src/services/asset-inventory/components/CollectorCreateStep1.vue
@@ -80,7 +80,7 @@ import {
 } from '@cloudforet/mirinae';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { PluginListParameters } from '@/schema/repository/plugin/api-verbs/list';
 import type { PluginModel } from '@/schema/repository/plugin/model';
 
diff --git a/apps/web/src/services/asset-inventory/components/CollectorCreateStep1SearchFilter.vue b/apps/web/src/services/asset-inventory/components/CollectorCreateStep1SearchFilter.vue
index 447d66ca7d..3dea7cc2a1 100644
--- a/apps/web/src/services/asset-inventory/components/CollectorCreateStep1SearchFilter.vue
+++ b/apps/web/src/services/asset-inventory/components/CollectorCreateStep1SearchFilter.vue
@@ -122,7 +122,7 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RepositoryListParameters } from '@/schema/repository/repository/api-verbs/list';
 import type { RepositoryModel } from '@/schema/repository/repository/model';
 
diff --git a/apps/web/src/services/asset-inventory/components/CollectorCreateStep4.vue b/apps/web/src/services/asset-inventory/components/CollectorCreateStep4.vue
index 8d65c8ff8f..2526eb44f5 100644
--- a/apps/web/src/services/asset-inventory/components/CollectorCreateStep4.vue
+++ b/apps/web/src/services/asset-inventory/components/CollectorCreateStep4.vue
@@ -59,8 +59,8 @@ import {
 } from '@cloudforet/mirinae';
 
 
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import { SpaceRouter } from '@/router';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
 import type { CollectorCollectParameters } from '@/schema/inventory/collector/api-verbs/collect';
 import type { CollectorCreateParameters } from '@/schema/inventory/collector/api-verbs/create';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
diff --git a/apps/web/src/services/asset-inventory/components/CollectorDataModal.vue b/apps/web/src/services/asset-inventory/components/CollectorDataModal.vue
index cc6c92de8d..1826da26d3 100644
--- a/apps/web/src/services/asset-inventory/components/CollectorDataModal.vue
+++ b/apps/web/src/services/asset-inventory/components/CollectorDataModal.vue
@@ -40,7 +40,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PButtonModal } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CollectorCollectParameters } from '@/schema/inventory/collector/api-verbs/collect';
 import type { JobModel } from '@/schema/inventory/job/model';
 import type { SecretListParameters } from '@/schema/secret/secret/api-verbs/list';
diff --git a/apps/web/src/services/asset-inventory/components/CollectorDetailAttachedServiceAccounts.vue b/apps/web/src/services/asset-inventory/components/CollectorDetailAttachedServiceAccounts.vue
index 653bafc413..b19b261a73 100644
--- a/apps/web/src/services/asset-inventory/components/CollectorDetailAttachedServiceAccounts.vue
+++ b/apps/web/src/services/asset-inventory/components/CollectorDetailAttachedServiceAccounts.vue
@@ -14,7 +14,7 @@ import type { DefinitionField } from '@cloudforet/mirinae/types/data-display/tab
 import type { ToolboxTableOptions } from '@cloudforet/mirinae/types/data-display/tables/toolbox-table/type';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { SecretListParameters } from '@/schema/secret/secret/api-verbs/list';
 import type { SecretModel } from '@/schema/secret/secret/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/asset-inventory/components/CollectorDetailTags.vue b/apps/web/src/services/asset-inventory/components/CollectorDetailTags.vue
index 2325242570..8f7a80ebae 100644
--- a/apps/web/src/services/asset-inventory/components/CollectorDetailTags.vue
+++ b/apps/web/src/services/asset-inventory/components/CollectorDetailTags.vue
@@ -4,7 +4,7 @@ import { computed } from 'vue';
 import { PTag, PFieldTitle, PEmpty } from '@cloudforet/mirinae';
 import { isNotEmpty } from '@cloudforet/utils';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 const props = withDefaults(defineProps<{
     tags: Tags;
diff --git a/apps/web/src/services/asset-inventory/components/CollectorHistoryJobTaskTable.vue b/apps/web/src/services/asset-inventory/components/CollectorHistoryJobTaskTable.vue
index adf73e64f0..241ede2dc4 100644
--- a/apps/web/src/services/asset-inventory/components/CollectorHistoryJobTaskTable.vue
+++ b/apps/web/src/services/asset-inventory/components/CollectorHistoryJobTaskTable.vue
@@ -14,7 +14,7 @@ import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 import type { KeyItemSet } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 import { durationFormatter, iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { JobTaskListParameters } from '@/schema/inventory/job-task/api-verbs/list';
 import type { JobTaskModel } from '@/schema/inventory/job-task/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue
index e127be5213..842510cbdd 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue
@@ -13,7 +13,7 @@ import {
     PEmpty, PSelectButton, PSkeleton, PSelectDropdown, PButton,
 } from '@cloudforet/mirinae';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 import type { MetricDataAnalyzeParameters } from '@/schema/inventory/metric-data/api-verbs/analyze';
 
 import MetricExplorerDonutChart from '@/services/asset-inventory/components/MetricExplorerDonutChart.vue';
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerDataTable.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerDataTable.vue
index cf84e262e8..ff44b3b686 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerDataTable.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerDataTable.vue
@@ -18,7 +18,7 @@ import { PTextPagination, PToolboxTable } from '@cloudforet/mirinae';
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import { byteFormatter, numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 import type { MetricDataAnalyzeParameters } from '@/schema/inventory/metric-data/api-verbs/analyze';
 import type { MetricLabelKey } from '@/schema/inventory/metric/type';
 
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerDonutChart.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerDonutChart.vue
index 982872df01..eae084082c 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerDonutChart.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerDonutChart.vue
@@ -11,7 +11,7 @@ import { isEmpty, orderBy, throttle } from 'lodash';
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import { getReferenceLabel } from '@/common/modules/widgets/_helpers/widget-date-helper';
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue
index 13e40c7725..f3204b2bee 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerHeader.vue
@@ -10,7 +10,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { MetricExampleDeleteParameters } from '@/schema/inventory/metric-example/api-verbs/delete';
 import type { MetricExampleUpdateParameters } from '@/schema/inventory/metric-example/api-verbs/update';
 import type { MetricExampleModel } from '@/schema/inventory/metric-example/model';
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerHorizontalColumnChart.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerHorizontalColumnChart.vue
index 375ec05b77..6f166b898f 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerHorizontalColumnChart.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerHorizontalColumnChart.vue
@@ -13,7 +13,7 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import {
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerLineChart.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerLineChart.vue
index f38c488de2..689f5e8a34 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerLineChart.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerLineChart.vue
@@ -14,7 +14,7 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import {
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerMapChart.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerMapChart.vue
index c9fbf1c18a..7b4369d797 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerMapChart.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerMapChart.vue
@@ -13,7 +13,7 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { getReferenceLabel } from '@/common/modules/widgets/_helpers/widget-date-helper';
 
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerQueryFormSidebar.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerQueryFormSidebar.vue
index 1a72c81bf7..e3a09c900e 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerQueryFormSidebar.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerQueryFormSidebar.vue
@@ -9,7 +9,7 @@ import {
 } from '@cloudforet/mirinae';
 
 
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { MetricCreateParameters } from '@/schema/inventory/metric/api-verbs/create';
 import type { MetricUpdateParameters } from '@/schema/inventory/metric/api-verbs/update';
 import { METRIC_TYPE } from '@/schema/inventory/metric/constant';
diff --git a/apps/web/src/services/asset-inventory/components/ServiceAccountAttachedGeneralAccounts.vue b/apps/web/src/services/asset-inventory/components/ServiceAccountAttachedGeneralAccounts.vue
index 03a00e2b09..b52902b02b 100644
--- a/apps/web/src/services/asset-inventory/components/ServiceAccountAttachedGeneralAccounts.vue
+++ b/apps/web/src/services/asset-inventory/components/ServiceAccountAttachedGeneralAccounts.vue
@@ -29,7 +29,7 @@ import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import { SERVICE_ACCOUNT_STATE } from '@/schema/identity/service-account/constant';
 import type { ServiceAccountModel } from '@/schema/identity/service-account/model';
@@ -51,7 +51,7 @@ import { getAccountFields, stateFormatter } from '@/services/asset-inventory/hel
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { useServiceAccountPageStore } from '@/services/asset-inventory/stores/service-account-page-store';
 import { useServiceAccountSchemaStore } from '@/services/asset-inventory/stores/service-account-schema-store';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 const props = withDefaults(defineProps<{
     serviceAccountId: string;
diff --git a/apps/web/src/services/asset-inventory/components/ServiceAccountBaseInformationForm.vue b/apps/web/src/services/asset-inventory/components/ServiceAccountBaseInformationForm.vue
index 5ac5fa9e1c..7971ccc79d 100644
--- a/apps/web/src/services/asset-inventory/components/ServiceAccountBaseInformationForm.vue
+++ b/apps/web/src/services/asset-inventory/components/ServiceAccountBaseInformationForm.vue
@@ -9,7 +9,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import type { ServiceAccountModel } from '@/schema/identity/service-account/model';
 import type { TrustedAccountModel } from '@/schema/identity/trusted-account/model';
diff --git a/apps/web/src/services/asset-inventory/components/ServiceAccountCredentialsForm.vue b/apps/web/src/services/asset-inventory/components/ServiceAccountCredentialsForm.vue
index f2379d59b6..63385848e7 100644
--- a/apps/web/src/services/asset-inventory/components/ServiceAccountCredentialsForm.vue
+++ b/apps/web/src/services/asset-inventory/components/ServiceAccountCredentialsForm.vue
@@ -17,7 +17,7 @@ import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-s
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { SchemaListParameters } from '@/schema/identity/schema/api-verbs/list';
 import type { SchemaModel } from '@/schema/identity/schema/model';
 import { ACCOUNT_TYPE } from '@/schema/identity/service-account/constant';
diff --git a/apps/web/src/services/asset-inventory/components/ServiceAccountEditModal.vue b/apps/web/src/services/asset-inventory/components/ServiceAccountEditModal.vue
index 6234508974..b59a18f5a6 100644
--- a/apps/web/src/services/asset-inventory/components/ServiceAccountEditModal.vue
+++ b/apps/web/src/services/asset-inventory/components/ServiceAccountEditModal.vue
@@ -7,7 +7,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import type { ServiceAccountUpdateParameters } from '@/schema/identity/service-account/api-verbs/update';
 import type { ServiceAccountModel } from '@/schema/identity/service-account/model';
diff --git a/apps/web/src/services/asset-inventory/components/WorkspaceDropdown.vue b/apps/web/src/services/asset-inventory/components/WorkspaceDropdown.vue
index 571e0c4bb1..49248584bc 100644
--- a/apps/web/src/services/asset-inventory/components/WorkspaceDropdown.vue
+++ b/apps/web/src/services/asset-inventory/components/WorkspaceDropdown.vue
@@ -9,7 +9,7 @@ import { PButton, PSelectDropdown, PStatus } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/src/controls/dropdown/select-dropdown/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
diff --git a/apps/web/src/services/asset-inventory/helpers/asset-analysis-chart-data-helper.ts b/apps/web/src/services/asset-inventory/helpers/asset-analysis-chart-data-helper.ts
index 0288a4a159..428b73f076 100644
--- a/apps/web/src/services/asset-inventory/helpers/asset-analysis-chart-data-helper.ts
+++ b/apps/web/src/services/asset-inventory/helpers/asset-analysis-chart-data-helper.ts
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import type { ReferenceMap } from '@/store/reference/type';
 
diff --git a/apps/web/src/services/asset-inventory/helpers/dynamic-ui-schema-generator/index.ts b/apps/web/src/services/asset-inventory/helpers/dynamic-ui-schema-generator/index.ts
index 306a83047f..f22094aac7 100644
--- a/apps/web/src/services/asset-inventory/helpers/dynamic-ui-schema-generator/index.ts
+++ b/apps/web/src/services/asset-inventory/helpers/dynamic-ui-schema-generator/index.ts
@@ -3,7 +3,7 @@ import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-s
 import type { DynamicField } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-field/type/field-schema';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserConfigCreateParameters } from '@/schema/config/user-config/api-verbs/create';
 import type { UserConfigGetParameters } from '@/schema/config/user-config/api-verbs/get';
 import type { UserConfigUpdateParameters } from '@/schema/config/user-config/api-verbs/update';
diff --git a/apps/web/src/services/asset-inventory/pages/CloudServiceDetailPage.vue b/apps/web/src/services/asset-inventory/pages/CloudServiceDetailPage.vue
index dbcba434e7..899ee88918 100644
--- a/apps/web/src/services/asset-inventory/pages/CloudServiceDetailPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/CloudServiceDetailPage.vue
@@ -24,9 +24,9 @@ import type {
     DynamicLayoutOptions,
 } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 
-import { QueryType } from '@/schema/_common/api-verbs/export';
-import type { ExportParameter } from '@/schema/_common/api-verbs/export';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import { QueryType } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ExportParameter } from '@/api-clients/_common/schema/api-verbs/export';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceGetParameters } from '@/schema/inventory/cloud-service/api-verbs/get';
 import type { CloudServiceListParameters } from '@/schema/inventory/cloud-service/api-verbs/list';
 import type { CloudServiceModel } from '@/schema/inventory/cloud-service/model';
@@ -65,7 +65,7 @@ import {
 import { useCloudServiceDetailPageStore } from '@/services/asset-inventory/stores/cloud-service-detail-page-store';
 import { useCloudServiceLSBStore } from '@/services/asset-inventory/stores/cloud-service-l-s-b-store';
 import type { Period } from '@/services/asset-inventory/types/type';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 
 interface Props {
diff --git a/apps/web/src/services/asset-inventory/pages/CollectorHistoryPage.vue b/apps/web/src/services/asset-inventory/pages/CollectorHistoryPage.vue
index 9c8cb8b92d..b67bb3042c 100644
--- a/apps/web/src/services/asset-inventory/pages/CollectorHistoryPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/CollectorHistoryPage.vue
@@ -20,8 +20,8 @@ import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/
 import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import { durationFormatter, iso8601Formatter } from '@cloudforet/utils';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { JobListParameters } from '@/schema/inventory/job/api-verbs/list';
 import type { JobModel } from '@/schema/inventory/job/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/asset-inventory/pages/CollectorMainPage.vue b/apps/web/src/services/asset-inventory/pages/CollectorMainPage.vue
index be2c7c8d4f..e27fdfd78a 100644
--- a/apps/web/src/services/asset-inventory/pages/CollectorMainPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/CollectorMainPage.vue
@@ -13,8 +13,8 @@ import {
     PButton, PHeading, PDataLoader, PHeadingLayout,
 } from '@cloudforet/mirinae';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { CollectorListParameters } from '@/schema/inventory/collector/api-verbs/list';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
 
diff --git a/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue b/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue
index b5cec03e0e..238a464649 100644
--- a/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/ServiceAccountPage.vue
@@ -21,7 +21,7 @@ import type {
 import type { DynamicLayoutOptions, SearchSchema } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-layout/type/layout-schema';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import { ACCOUNT_TYPE, SERVICE_ACCOUNT_STATE } from '@/schema/identity/service-account/constant';
diff --git a/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorHistoryPage.vue b/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorHistoryPage.vue
index 2f4f4a54f1..b867c2fe3b 100644
--- a/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorHistoryPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorHistoryPage.vue
@@ -21,8 +21,8 @@ import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/
 import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import { durationFormatter, iso8601Formatter } from '@cloudforet/utils';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { JobListParameters } from '@/schema/inventory/job/api-verbs/list';
 import type { JobModel } from '@/schema/inventory/job/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorMainPage.vue b/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorMainPage.vue
index e149fd8ccf..15395f49bf 100644
--- a/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorMainPage.vue
+++ b/apps/web/src/services/asset-inventory/pages/admin/AdminCollectorMainPage.vue
@@ -13,8 +13,8 @@ import {
     PButton, PHeading, PDataLoader, PHeadingLayout,
 } from '@cloudforet/mirinae';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { CollectorListParameters } from '@/schema/inventory/collector/api-verbs/list';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
 
diff --git a/apps/web/src/services/asset-inventory/stores/cloud-service-detail-page-store.ts b/apps/web/src/services/asset-inventory/stores/cloud-service-detail-page-store.ts
index c9c0b5c9d0..f095bb0f76 100644
--- a/apps/web/src/services/asset-inventory/stores/cloud-service-detail-page-store.ts
+++ b/apps/web/src/services/asset-inventory/stores/cloud-service-detail-page-store.ts
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceTypeListParameters } from '@/schema/inventory/cloud-service-type/api-verbs/list';
 import type { CloudServiceTypeModel } from '@/schema/inventory/cloud-service-type/model';
 
diff --git a/apps/web/src/services/asset-inventory/stores/collector-data-modal-store.ts b/apps/web/src/services/asset-inventory/stores/collector-data-modal-store.ts
index b4d0137e86..632d7e394c 100644
--- a/apps/web/src/services/asset-inventory/stores/collector-data-modal-store.ts
+++ b/apps/web/src/services/asset-inventory/stores/collector-data-modal-store.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type {
     CollectorModel,
 } from '@/schema/inventory/collector/model';
diff --git a/apps/web/src/services/asset-inventory/stores/collector-form-store.ts b/apps/web/src/services/asset-inventory/stores/collector-form-store.ts
index 7eeceaffd4..acfd5dfbca 100644
--- a/apps/web/src/services/asset-inventory/stores/collector-form-store.ts
+++ b/apps/web/src/services/asset-inventory/stores/collector-form-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CollectorRuleListParameters } from '@/schema/inventory/collector-rule/api-verbs/list';
 import type { CollectorRuleModel } from '@/schema/inventory/collector-rule/model';
 import type {
diff --git a/apps/web/src/services/asset-inventory/stores/collector-job-store.ts b/apps/web/src/services/asset-inventory/stores/collector-job-store.ts
index 4aa052a67b..c386514608 100644
--- a/apps/web/src/services/asset-inventory/stores/collector-job-store.ts
+++ b/apps/web/src/services/asset-inventory/stores/collector-job-store.ts
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
 import type { Schedule } from '@/schema/inventory/collector/type';
 import type { JobListParameters } from '@/schema/inventory/job/api-verbs/list';
diff --git a/apps/web/src/services/asset-inventory/stores/collector-page-store.ts b/apps/web/src/services/asset-inventory/stores/collector-page-store.ts
index 23634de7e9..21d56f6966 100644
--- a/apps/web/src/services/asset-inventory/stores/collector-page-store.ts
+++ b/apps/web/src/services/asset-inventory/stores/collector-page-store.ts
@@ -6,7 +6,7 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CollectorListParameters } from '@/schema/inventory/collector/api-verbs/list';
 import type { CollectorUpdateParameters } from '@/schema/inventory/collector/api-verbs/update';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
diff --git a/apps/web/src/services/asset-inventory/stores/metric-explorer-l-s-b-store.ts b/apps/web/src/services/asset-inventory/stores/metric-explorer-l-s-b-store.ts
index b8706cfbb1..962a74d282 100644
--- a/apps/web/src/services/asset-inventory/stores/metric-explorer-l-s-b-store.ts
+++ b/apps/web/src/services/asset-inventory/stores/metric-explorer-l-s-b-store.ts
@@ -5,8 +5,8 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { NamespaceGroupListParameters } from '@/schema/inventory-v2/namespace-group/api-verbs/list';
 import type { NamespaceGroupModel } from '@/schema/inventory-v2/namespace-group/model';
 import type { NamespaceGetParameters } from '@/schema/inventory-v2/namespace/api-verbs/get';
diff --git a/apps/web/src/services/asset-inventory/stores/metric-explorer-page-store.ts b/apps/web/src/services/asset-inventory/stores/metric-explorer-page-store.ts
index f15fc8672b..0f5db1cbd9 100644
--- a/apps/web/src/services/asset-inventory/stores/metric-explorer-page-store.ts
+++ b/apps/web/src/services/asset-inventory/stores/metric-explorer-page-store.ts
@@ -7,7 +7,7 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { MetricExampleListParameters } from '@/schema/inventory/metric-example/api-verbs/list';
 import type { MetricExampleModel } from '@/schema/inventory/metric-example/model';
 import type { MetricGetParameters } from '@/schema/inventory/metric/api-verbs/get';
diff --git a/apps/web/src/services/asset-inventory/stores/service-account-page-store.ts b/apps/web/src/services/asset-inventory/stores/service-account-page-store.ts
index 5841b32ce1..34939f66ac 100644
--- a/apps/web/src/services/asset-inventory/stores/service-account-page-store.ts
+++ b/apps/web/src/services/asset-inventory/stores/service-account-page-store.ts
@@ -6,9 +6,9 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CostReportConfigListParameters } from '@/schema/cost-analysis/cost-report-config/api-verbs/list';
-import type { CostReportConfigModel } from '@/schema/cost-analysis/cost-report-config/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostReportConfigListParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
 import type { IdentityJobListParameters } from '@/schema/identity/job/api-verbs/list';
 import type { IdentityJobModel } from '@/schema/identity/job/model';
 import type { IdentityJobStatus } from '@/schema/identity/job/type';
diff --git a/apps/web/src/services/asset-inventory/stores/service-account-schema-store.ts b/apps/web/src/services/asset-inventory/stores/service-account-schema-store.ts
index aa5ab9da82..be50f5dddb 100644
--- a/apps/web/src/services/asset-inventory/stores/service-account-schema-store.ts
+++ b/apps/web/src/services/asset-inventory/stores/service-account-schema-store.ts
@@ -8,7 +8,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { DynamicField } from '@cloudforet/mirinae/types/data-display/dynamic/dynamic-field/type/field-schema';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProviderModel } from '@/schema/identity/provider/model';
 import type { SchemaListParameters } from '@/schema/identity/schema/api-verbs/list';
 import type { SchemaModel } from '@/schema/identity/schema/model';
diff --git a/apps/web/src/services/asset-inventory/types/collector-main-page-type.ts b/apps/web/src/services/asset-inventory/types/collector-main-page-type.ts
index a29a416260..c3a9193fc8 100644
--- a/apps/web/src/services/asset-inventory/types/collector-main-page-type.ts
+++ b/apps/web/src/services/asset-inventory/types/collector-main-page-type.ts
@@ -2,7 +2,7 @@ import type { Dictionary, Location } from 'vue-router/types/router';
 
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type {
     CollectorPluginInfo,
 
diff --git a/apps/web/src/services/cost-explorer/components/AnomalyDetectionConfigurationRecipientsForm.vue b/apps/web/src/services/cost-explorer/components/AnomalyDetectionConfigurationRecipientsForm.vue
index 0552efbcbf..2de2dbf0cd 100644
--- a/apps/web/src/services/cost-explorer/components/AnomalyDetectionConfigurationRecipientsForm.vue
+++ b/apps/web/src/services/cost-explorer/components/AnomalyDetectionConfigurationRecipientsForm.vue
@@ -9,7 +9,7 @@ import {
 import type { SelectDropdownMenuItem, AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_STATE, ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateForm.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateForm.vue
index b366499d01..0eaab0e5d2 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateForm.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateForm.vue
@@ -8,9 +8,9 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PButton } from '@cloudforet/mirinae';
 
 
+import type { BudgetCreateParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/create';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 import { SpaceRouter } from '@/router';
-import type { BudgetCreateParameters } from '@/schema/cost-analysis/budget/api-verbs/create';
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlan.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlan.vue
index 26269978d9..a142221bc4 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlan.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlan.vue
@@ -6,7 +6,7 @@ import {
 import { PPaneLayout, PHeading } from '@cloudforet/mirinae';
 
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 
 import BudgetCreateFormAmountPlanLastMonthsCost
     from '@/services/cost-explorer/components/BudgetCreateFormAmountPlanLastMonthsCost.vue';
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlanLastMonthsCost.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlanLastMonthsCost.vue
index e6228845f5..f25627bd21 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlanLastMonthsCost.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlanLastMonthsCost.vue
@@ -8,7 +8,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 
 import type { Currency } from '@/store/display/type';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlanUnitSelect.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlanUnitSelect.vue
index 719dd14bff..ce02fb73ac 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlanUnitSelect.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateFormAmountPlanUnitSelect.vue
@@ -4,7 +4,7 @@ import type { TranslateResult } from 'vue-i18n';
 
 import { PFieldTitle, PSelectCard } from '@cloudforet/mirinae';
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 import { i18n } from '@/translations';
 
 
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateFormBaseInfo.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateFormBaseInfo.vue
index 419d209468..13f5a23b46 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateFormBaseInfo.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateFormBaseInfo.vue
@@ -7,7 +7,7 @@ import {
     PFieldGroup, PPaneLayout, PHeading, PTextInput,
 } from '@cloudforet/mirinae';
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateProviderSelect.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateProviderSelect.vue
index 1dbfe73960..ee872075fd 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateProviderSelect.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateProviderSelect.vue
@@ -13,7 +13,7 @@ import type {
     SelectDropdownMenuItem,
 } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 import { i18n } from '@/translations';
 
 
diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateTargetSelect.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateTargetSelect.vue
index 3faa753500..8bf56c5edb 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateTargetSelect.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateTargetSelect.vue
@@ -10,7 +10,7 @@ import type {
 } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailDeleteModal.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailDeleteModal.vue
index 97392b8463..c6723ee189 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailDeleteModal.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailDeleteModal.vue
@@ -17,7 +17,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PDoubleCheckModal } from '@cloudforet/mirinae';
 
 
-import type { BudgetDeleteParameters } from '@/schema/cost-analysis/budget/api-verbs/delete';
+import type { BudgetDeleteParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/delete';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
index d5a6cf5f4d..3eb10a9635 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailHeading.vue
@@ -6,7 +6,7 @@ import {
     PDivider, PHeading, PIconButton, PHeadingLayout,
 } from '@cloudforet/mirinae';
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailInfo.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailInfo.vue
index 233bd7bb0f..3ace8adf94 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailInfo.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailInfo.vue
@@ -9,7 +9,7 @@ import {
 } from '@cloudforet/mirinae';
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailInfoAmountPlanningTypePopover.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailInfoAmountPlanningTypePopover.vue
index a31356c19e..d37d42a0ea 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailInfoAmountPlanningTypePopover.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailInfoAmountPlanningTypePopover.vue
@@ -5,7 +5,7 @@ import dayjs from 'dayjs';
 
 import { PPopover } from '@cloudforet/mirinae';
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 
 import { currencyMoneyFormatter } from '@/lib/helper/currency-helper';
 
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailNotifications.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailNotifications.vue
index bc65e3abcb..c41656c9b3 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailNotifications.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailNotifications.vue
@@ -23,7 +23,7 @@ import BudgetDetailNotificationsChannelTable
 import BudgetDetailNotificationsConditionSettingModal
     from '@/services/cost-explorer/components/BudgetDetailNotificationsConditionSettingModal.vue';
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 
 interface Props {
@@ -150,7 +150,7 @@ const handleBudgetNotifications = () => {
                                         size="md"
                                         :text="$t('BILLING.COST_MANAGEMENT.BUDGET.DETAIL.SET_NOTIFICATION_CHANNEL')"
                                         :to="getProperRouteLocation({
-                                            name: PROJECT_ROUTE_V1.DETAIL.TAB.NOTIFICATIONS._NAME,
+                                            name: PROJECT_ROUTE.DETAIL.TAB.NOTIFICATIONS._NAME,
                                             params: {
                                                 id: state.budgetTargetId
                                             }
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailNotificationsConditionSettingModal.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailNotificationsConditionSettingModal.vue
index 2a418a1864..411f36ecc0 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailNotificationsConditionSettingModal.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailNotificationsConditionSettingModal.vue
@@ -8,7 +8,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 import { i18n } from '@/translations';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailSummaryTable.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailSummaryTable.vue
index bad2760720..5f58ec91de 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetDetailSummaryTable.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetDetailSummaryTable.vue
@@ -8,8 +8,8 @@ import cloneDeep from 'lodash/cloneDeep';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { PCollapsibleToggle, PDataTable, PLink } from '@cloudforet/mirinae';
 
-import type { BudgetUsageModel } from '@/schema/cost-analysis/budget-usage/model';
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetUsageModel } from '@/api-clients/cost-analysis/budget-usage/schema/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 import { i18n } from '@/translations';
 
 
diff --git a/apps/web/src/services/cost-explorer/components/BudgetMainList.vue b/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
index d63821a301..6884206ac7 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
@@ -12,13 +12,13 @@ import {
     PDataLoader,
 } from '@cloudforet/mirinae';
 
-import { SpaceRouter } from '@/router';
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type {
     BudgetUsageAnalyzeParameters,
     BudgetUsageAnalyzeResult,
-} from '@/schema/cost-analysis/budget-usage/api-verbs/analyze';
+} from '@/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze';
+import { SpaceRouter } from '@/router';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
diff --git a/apps/web/src/services/cost-explorer/components/BudgetMainListCard.vue b/apps/web/src/services/cost-explorer/components/BudgetMainListCard.vue
index 91422a9e5a..35ad0e25ac 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetMainListCard.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetMainListCard.vue
@@ -6,7 +6,7 @@ import {
     PDivider, PI, PBadge, PStatus,
 } from '@cloudforet/mirinae';
 
-import type { BudgetUsageAnalyzeResult } from '@/schema/cost-analysis/budget-usage/api-verbs/analyze';
+import type { BudgetUsageAnalyzeResult } from '@/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisChart.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisChart.vue
index a87bffc286..39c3e3ad99 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisChart.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisChart.vue
@@ -16,7 +16,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
index eb0b44cdee..f86b969357 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
@@ -4,7 +4,7 @@ import {
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
 
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 
 import {
     queryStringToArray,
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisDataTable.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisDataTable.vue
index a374f2c120..331a4afb5e 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisDataTable.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisDataTable.vue
@@ -27,7 +27,7 @@ import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/typ
 import { numberFormatter } from '@cloudforet/utils';
 
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
@@ -64,7 +64,7 @@ import type {
     Period,
     DisplayDataType,
 } from '@/services/cost-explorer/types/cost-explorer-query-type';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 
 type CostAnalyzeRawData = {
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
index 7c2d066974..6a72853630 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
@@ -8,8 +8,8 @@ import {
     PIconButton, PHeading, PLazyImg, PDivider, PI, PHeadingLayout, PScopedNotification,
 } from '@cloudforet/mirinae';
 
+import type { CostQuerySetDeleteParameters } from '@/api-clients/cost-analysis/cost-query-set/schema/api-verbs/delete';
 import { SpaceRouter } from '@/router';
-import type { CostQuerySetDeleteParameters } from '@/schema/cost-analysis/cost-query-set/api-verbs/delete';
 import { i18n } from '@/translations';
 
 import { makeAdminRouteName } from '@/router/helpers/route-helper';
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisPeriodSelectDropdown.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisPeriodSelectDropdown.vue
index f97c733404..3a4cc8ec60 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisPeriodSelectDropdown.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisPeriodSelectDropdown.vue
@@ -11,7 +11,7 @@ import { PSelectDropdown } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 import { i18n } from '@/translations';
 
 import { queryStringToObject, queryStringToString } from '@/lib/router-query-string';
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisQueryFormModal.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisQueryFormModal.vue
index e2aebb1585..ed5ea05ebb 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisQueryFormModal.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisQueryFormModal.vue
@@ -7,7 +7,7 @@ import {
     PButtonModal, PFieldGroup, PTextInput,
 } from '@cloudforet/mirinae';
 
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
index 57a1f74e7a..f94431d234 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
@@ -13,8 +13,8 @@ import {
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
+import type { CostQuerySetUpdateParameters } from '@/api-clients/cost-analysis/cost-query-set/schema/api-verbs/update';
 import { SpaceRouter } from '@/router';
-import type { CostQuerySetUpdateParameters } from '@/schema/cost-analysis/cost-query-set/api-verbs/update';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisStackedColumnChart.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisStackedColumnChart.vue
index 404372584e..592f329ce2 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisStackedColumnChart.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisStackedColumnChart.vue
@@ -17,7 +17,7 @@ import {
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import {
diff --git a/apps/web/src/services/cost-explorer/components/CostReportMonthlyTotalAmountSummaryCard.vue b/apps/web/src/services/cost-explorer/components/CostReportMonthlyTotalAmountSummaryCard.vue
index af223ae86f..507561c0a9 100644
--- a/apps/web/src/services/cost-explorer/components/CostReportMonthlyTotalAmountSummaryCard.vue
+++ b/apps/web/src/services/cost-explorer/components/CostReportMonthlyTotalAmountSummaryCard.vue
@@ -21,11 +21,11 @@ import type { DataTableFieldType } from '@cloudforet/mirinae/src/data-display/ta
 import type { SelectButtonType } from '@cloudforet/mirinae/types/controls/buttons/select-button-group/type';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CostReportDataAnalyzeParameters } from '@/schema/cost-analysis/cost-report-data/api-verbs/analyze';
-import type { CostReportListParameters } from '@/schema/cost-analysis/cost-report/api-verbs/list';
-import type { CostReportModel } from '@/schema/cost-analysis/cost-report/model';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostReportDataAnalyzeParameters } from '@/api-clients/cost-analysis/cost-report-data/schema/api-verbs/analyze';
+import type { CostReportListParameters } from '@/api-clients/cost-analysis/cost-report/schema/api-verbs/list';
+import type { CostReportModel } from '@/api-clients/cost-analysis/cost-report/schema/model';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
@@ -54,7 +54,6 @@ import {
 } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
-
 type CostReportDataAnalyzeResult = {
     [groupBy: string]: string | any;
     value_sum: number;
diff --git a/apps/web/src/services/cost-explorer/components/CostReportOverviewCostTrendCard.vue b/apps/web/src/services/cost-explorer/components/CostReportOverviewCostTrendCard.vue
index 44abbd5ead..c7a60561ba 100644
--- a/apps/web/src/services/cost-explorer/components/CostReportOverviewCostTrendCard.vue
+++ b/apps/web/src/services/cost-explorer/components/CostReportOverviewCostTrendCard.vue
@@ -14,8 +14,8 @@ import type { SelectButtonType } from '@cloudforet/mirinae/types/controls/button
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
-import type { CostReportDataAnalyzeParameters } from '@/schema/cost-analysis/cost-report-data/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
+import type { CostReportDataAnalyzeParameters } from '@/api-clients/cost-analysis/cost-report-data/schema/api-verbs/analyze';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/cost-explorer/components/CostReportOverviewCostTrendChart.vue b/apps/web/src/services/cost-explorer/components/CostReportOverviewCostTrendChart.vue
index 2e3ef785c7..02ffa10404 100644
--- a/apps/web/src/services/cost-explorer/components/CostReportOverviewCostTrendChart.vue
+++ b/apps/web/src/services/cost-explorer/components/CostReportOverviewCostTrendChart.vue
@@ -19,7 +19,7 @@ import {
 import type { DataTableFieldType } from '@cloudforet/mirinae/src/data-display/tables/data-table/type';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
diff --git a/apps/web/src/services/cost-explorer/components/CostReportRecipientsCard.vue b/apps/web/src/services/cost-explorer/components/CostReportRecipientsCard.vue
index 9229030c4a..54f53160a2 100644
--- a/apps/web/src/services/cost-explorer/components/CostReportRecipientsCard.vue
+++ b/apps/web/src/services/cost-explorer/components/CostReportRecipientsCard.vue
@@ -8,11 +8,11 @@ import {
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 
 
-import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner.png';
 import type {
     CostReportConfigUpdateRecipientsParameters,
-} from '@/schema/cost-analysis/cost-report-config/api-verbs/update-recipients';
-import type { CostReportConfigModel } from '@/schema/cost-analysis/cost-report-config/model';
+} from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/update-recipients';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
+import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner.png';
 import { i18n } from '@/translations';
 
 import { makeAdminRouteName } from '@/router/helpers/route-helper';
diff --git a/apps/web/src/services/cost-explorer/components/CostReportResendModal.vue b/apps/web/src/services/cost-explorer/components/CostReportResendModal.vue
index b35115ebcb..e41a05693e 100644
--- a/apps/web/src/services/cost-explorer/components/CostReportResendModal.vue
+++ b/apps/web/src/services/cost-explorer/components/CostReportResendModal.vue
@@ -6,7 +6,7 @@ import {
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PButtonModal, PDefinitionTable, PLink } from '@cloudforet/mirinae';
 
-import type { CostReportSendParameters } from '@/schema/cost-analysis/cost-report/api-verbs/send';
+import type { CostReportSendParameters } from '@/api-clients/cost-analysis/cost-report/schema/api-verbs/send';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { RoleType } from '@/schema/identity/role/type';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/cost-explorer/components/CostReportSettingsModal.vue b/apps/web/src/services/cost-explorer/components/CostReportSettingsModal.vue
index aa9c2f29f6..85cc865817 100644
--- a/apps/web/src/services/cost-explorer/components/CostReportSettingsModal.vue
+++ b/apps/web/src/services/cost-explorer/components/CostReportSettingsModal.vue
@@ -10,8 +10,8 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { CostReportConfigUpdateParameters } from '@/schema/cost-analysis/cost-report-config/api-verbs/update';
-import type { CostReportConfigModel } from '@/schema/cost-analysis/cost-report-config/model';
+import type { CostReportConfigUpdateParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/update';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
 import { i18n } from '@/translations';
 
 import { CURRENCY, CURRENCY_SYMBOL } from '@/store/display/constant';
diff --git a/apps/web/src/services/cost-explorer/components/DataSourceManagementModal.vue b/apps/web/src/services/cost-explorer/components/DataSourceManagementModal.vue
index 7ec5d4cf69..adbdf3337c 100644
--- a/apps/web/src/services/cost-explorer/components/DataSourceManagementModal.vue
+++ b/apps/web/src/services/cost-explorer/components/DataSourceManagementModal.vue
@@ -8,8 +8,8 @@ import { PButtonModal, PSelectDropdown, PFieldTitle } from '@cloudforet/mirinae'
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CostDataSourceAccountModel } from '@/schema/cost-analysis/data-source-account/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostDataSourceAccountModel } from '@/api-clients/cost-analysis/data-source-account/schema/model';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabAccessRestriction.vue b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabAccessRestriction.vue
index cdc37598dd..e1c6b51a1a 100644
--- a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabAccessRestriction.vue
+++ b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabAccessRestriction.vue
@@ -8,7 +8,7 @@ import { PHeading, PToggleButton, PButtonModal } from '@cloudforet/mirinae';
 
 import type {
     CostDataSourceUpdatePermissionsParameters,
-} from '@/schema/cost-analysis/data-source/api-verbs/update-permissions';
+} from '@/api-clients/cost-analysis/data-source/schema/api-verbs/update-permissions';
 import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
diff --git a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistory.vue b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistory.vue
index abc0abe3dc..1d92e0c9e9 100644
--- a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistory.vue
+++ b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistory.vue
@@ -14,7 +14,7 @@ import type { DefinitionField } from '@cloudforet/mirinae/src/data-display/table
 import type { KeyItemSet, ValueHandlerMap } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
-import type { CostJobStatus } from '@/schema/cost-analysis/job/type';
+import type { CostJobStatus } from '@/api-clients/cost-analysis/job/schema/type';
 import { i18n } from '@/translations';
 
 import { useQueryTags } from '@/common/composables/query-tags';
diff --git a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabLinkedAccountTable.vue b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabLinkedAccountTable.vue
index f972852894..4cb5a6b147 100644
--- a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabLinkedAccountTable.vue
+++ b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabLinkedAccountTable.vue
@@ -17,8 +17,8 @@ import type { KeyItemSet, ValueHandlerMap } from '@cloudforet/mirinae/types/cont
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CostDataSourceAccountModel } from '@/schema/cost-analysis/data-source-account/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostDataSourceAccountModel } from '@/api-clients/cost-analysis/data-source-account/schema/model';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/cost-explorer/constants/managed-cost-analysis-query-sets.ts b/apps/web/src/services/cost-explorer/constants/managed-cost-analysis-query-sets.ts
index 0ecc1c28a3..1caea60b8c 100644
--- a/apps/web/src/services/cost-explorer/constants/managed-cost-analysis-query-sets.ts
+++ b/apps/web/src/services/cost-explorer/constants/managed-cost-analysis-query-sets.ts
@@ -1,4 +1,4 @@
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 
 import {
     GRANULARITY, GROUP_BY, GROUP_BY_FILTER_ITEM_MAP,
diff --git a/apps/web/src/services/cost-explorer/helpers/budget-usage-analyze-api-query-helper.ts b/apps/web/src/services/cost-explorer/helpers/budget-usage-analyze-api-query-helper.ts
index 29a65ef3de..dd0f50012c 100644
--- a/apps/web/src/services/cost-explorer/helpers/budget-usage-analyze-api-query-helper.ts
+++ b/apps/web/src/services/cost-explorer/helpers/budget-usage-analyze-api-query-helper.ts
@@ -3,7 +3,7 @@ import { isEmpty } from 'lodash';
 import type { Query } from '@cloudforet/core-lib/space-connector/type';
 
 
-import type { BudgetUsageAnalyzeResult } from '@/schema/cost-analysis/budget-usage/api-verbs/analyze';
+import type { BudgetUsageAnalyzeResult } from '@/api-clients/cost-analysis/budget-usage/schema/api-verbs/analyze';
 
 import { GRANULARITY } from '@/services/cost-explorer/constants/cost-explorer-constant';
 import type { Period } from '@/services/cost-explorer/types/cost-explorer-query-type';
diff --git a/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue b/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue
index 8ba268cd51..ed88429aac 100644
--- a/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/BudgetDetailPage.vue
@@ -5,7 +5,7 @@ import type { Location } from 'vue-router';
 import { PLink, PScopedNotification } from '@cloudforet/mirinae';
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 import { i18n } from '@/translations';
 
 import { makeAdminRouteName } from '@/router/helpers/route-helper';
diff --git a/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetDetailPage.vue b/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetDetailPage.vue
index 55ff854114..d66c090535 100644
--- a/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetDetailPage.vue
+++ b/apps/web/src/services/cost-explorer/pages/admin/AdminBudgetDetailPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
diff --git a/apps/web/src/services/cost-explorer/routes/admin/routes.ts b/apps/web/src/services/cost-explorer/routes/admin/routes.ts
index 9bdda84e3c..e02fc0f6fc 100644
--- a/apps/web/src/services/cost-explorer/routes/admin/routes.ts
+++ b/apps/web/src/services/cost-explorer/routes/admin/routes.ts
@@ -2,8 +2,8 @@ import type { RouteConfig } from 'vue-router';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CostDataSourceListParameters } from '@/schema/cost-analysis/data-source/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostDataSourceListParameters } from '@/api-clients/cost-analysis/data-source/schema/api-verbs/list';
 import type { DataSourceModel } from '@/schema/monitoring/data-source/model';
 
 import { makeAdminRouteName } from '@/router/helpers/route-helper';
diff --git a/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts b/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts
index c30416e03c..b582f121a8 100644
--- a/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts
+++ b/apps/web/src/services/cost-explorer/stores/budget-detail-page-store.ts
@@ -3,13 +3,13 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
-import type { BudgetUsageListParameters } from '@/schema/cost-analysis/budget-usage/api-verbs/list';
-import type { BudgetUsageModel } from '@/schema/cost-analysis/budget-usage/model';
-import type { BudgetGetParameters } from '@/schema/cost-analysis/budget/api-verbs/get';
-import type { BudgetSetNotificationParameters } from '@/schema/cost-analysis/budget/api-verbs/set-notification';
-import type { BudgetUpdateParameters } from '@/schema/cost-analysis/budget/api-verbs/update';
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
+import type { BudgetUsageListParameters } from '@/api-clients/cost-analysis/budget-usage/schema/api-verbs/list';
+import type { BudgetUsageModel } from '@/api-clients/cost-analysis/budget-usage/schema/model';
+import type { BudgetGetParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/get';
+import type { BudgetSetNotificationParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/set-notification';
+import type { BudgetUpdateParameters } from '@/api-clients/cost-analysis/budget/schema/api-verbs/update';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
diff --git a/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts b/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts
index 82707d904d..8f227a50ec 100644
--- a/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts
+++ b/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts
@@ -8,9 +8,9 @@ import type { ConsoleFilter, ConsoleFilterValue } from '@cloudforet/core-lib/que
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
 
-import type { CostQuerySetCreateParameters } from '@/schema/cost-analysis/cost-query-set/api-verbs/create';
-import type { CostQuerySetUpdateParameters } from '@/schema/cost-analysis/cost-query-set/api-verbs/update';
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
+import type { CostQuerySetCreateParameters } from '@/api-clients/cost-analysis/cost-query-set/schema/api-verbs/create';
+import type { CostQuerySetUpdateParameters } from '@/api-clients/cost-analysis/cost-query-set/schema/api-verbs/update';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/cost-explorer/stores/cost-query-set-store.ts b/apps/web/src/services/cost-explorer/stores/cost-query-set-store.ts
index 823d5f879c..fa9116e3c8 100644
--- a/apps/web/src/services/cost-explorer/stores/cost-query-set-store.ts
+++ b/apps/web/src/services/cost-explorer/stores/cost-query-set-store.ts
@@ -6,7 +6,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
diff --git a/apps/web/src/services/cost-explorer/stores/cost-report-page-store.ts b/apps/web/src/services/cost-explorer/stores/cost-report-page-store.ts
index 6374caf3ee..3761be71c0 100644
--- a/apps/web/src/services/cost-explorer/stores/cost-report-page-store.ts
+++ b/apps/web/src/services/cost-explorer/stores/cost-report-page-store.ts
@@ -6,13 +6,13 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CostReportConfigListParameters } from '@/schema/cost-analysis/cost-report-config/api-verbs/list';
-import type { CostReportConfigModel } from '@/schema/cost-analysis/cost-report-config/model';
-import type { CostReportGetParameters } from '@/schema/cost-analysis/cost-report/api-verbs/get';
-import type { CostReportGetUrlParameters } from '@/schema/cost-analysis/cost-report/api-verbs/get-url';
-import type { CostReportListParameters } from '@/schema/cost-analysis/cost-report/api-verbs/list';
-import type { CostReportModel, CostReportDataLinkInfoModel } from '@/schema/cost-analysis/cost-report/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostReportConfigListParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
+import type { CostReportGetParameters } from '@/api-clients/cost-analysis/cost-report/schema/api-verbs/get';
+import type { CostReportGetUrlParameters } from '@/api-clients/cost-analysis/cost-report/schema/api-verbs/get-url';
+import type { CostReportListParameters } from '@/api-clients/cost-analysis/cost-report/schema/api-verbs/list';
+import type { CostReportModel, CostReportDataLinkInfoModel } from '@/api-clients/cost-analysis/cost-report/schema/model';
 
 import type { Currency } from '@/store/display/type';
 
diff --git a/apps/web/src/services/cost-explorer/stores/data-sources-page-store.ts b/apps/web/src/services/cost-explorer/stores/data-sources-page-store.ts
index cd1064e293..04e3efc5ba 100644
--- a/apps/web/src/services/cost-explorer/stores/data-sources-page-store.ts
+++ b/apps/web/src/services/cost-explorer/stores/data-sources-page-store.ts
@@ -7,23 +7,20 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { durationFormatter } from '@cloudforet/utils';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { DataSourceAccountAnalyzeParameters } from '@/schema/cost-analysis/data-source-account/api-verbs/analyze';
-import type { CostDataSourceAccountListParameters } from '@/schema/cost-analysis/data-source-account/api-verbs/list';
-import type { CostDataSourceAccountResetParameters } from '@/schema/cost-analysis/data-source-account/api-verbs/reset';
-import type { CostDataSourceAccountUpdateParameters } from '@/schema/cost-analysis/data-source-account/api-verbs/update';
-import type {
-    CostDataSourceAccountModel,
-    CostDataSourceAnalyzeModel,
-} from '@/schema/cost-analysis/data-source-account/model';
-import type { CostDataSourceGetParameters } from '@/schema/cost-analysis/data-source/api-verbs/get';
-import type { CostDataSourceListParameters } from '@/schema/cost-analysis/data-source/api-verbs/list';
-import type { CostDataSourceSyncParameters } from '@/schema/cost-analysis/data-source/api-verbs/sync';
-import type { CostDataSourceModel } from '@/schema/cost-analysis/data-source/model';
-import type { CostJobCancelParameters } from '@/schema/cost-analysis/job/api-verbs/cancel';
-import type { CostJobListParameters } from '@/schema/cost-analysis/job/api-verbs/list';
-import type { CostJobModel } from '@/schema/cost-analysis/job/model';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { DataSourceAccountAnalyzeParameters } from '@/api-clients/cost-analysis/data-source-account/schema/api-verbs/analyze';
+import type { CostDataSourceAccountListParameters } from '@/api-clients/cost-analysis/data-source-account/schema/api-verbs/list';
+import type { CostDataSourceAccountResetParameters } from '@/api-clients/cost-analysis/data-source-account/schema/api-verbs/reset';
+import type { CostDataSourceAccountUpdateParameters } from '@/api-clients/cost-analysis/data-source-account/schema/api-verbs/update';
+import type { CostDataSourceAccountModel, CostDataSourceAnalyzeModel } from '@/api-clients/cost-analysis/data-source-account/schema/model';
+import type { CostDataSourceGetParameters } from '@/api-clients/cost-analysis/data-source/schema/api-verbs/get';
+import type { CostDataSourceListParameters } from '@/api-clients/cost-analysis/data-source/schema/api-verbs/list';
+import type { CostDataSourceSyncParameters } from '@/api-clients/cost-analysis/data-source/schema/api-verbs/sync';
+import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
+import type { CostJobCancelParameters } from '@/api-clients/cost-analysis/job/schema/api-verbs/cancel';
+import type { CostJobListParameters } from '@/api-clients/cost-analysis/job/schema/api-verbs/list';
+import type { CostJobModel } from '@/api-clients/cost-analysis/job/schema/model';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import { useUserStore } from '@/store/user/user-store';
@@ -38,6 +35,7 @@ import type {
     DataSourceItem,
 } from '@/services/cost-explorer/types/data-sources-type';
 
+
 export const useDataSourcesPageStore = defineStore('page-data-sources', () => {
     const allReferenceStore = useAllReferenceStore();
     const allReferenceGetters = allReferenceStore.getters;
diff --git a/apps/web/src/services/cost-explorer/types/budget-form-type.ts b/apps/web/src/services/cost-explorer/types/budget-form-type.ts
index 883a88889c..9a8a770f4c 100644
--- a/apps/web/src/services/cost-explorer/types/budget-form-type.ts
+++ b/apps/web/src/services/cost-explorer/types/budget-form-type.ts
@@ -1,6 +1,6 @@
 import type { TranslateResult } from 'vue-i18n';
 
-import type { BudgetModel } from '@/schema/cost-analysis/budget/model';
+import type { BudgetModel } from '@/api-clients/cost-analysis/budget/schema/model';
 
 
 export interface MonthAmountInput {
diff --git a/apps/web/src/services/cost-explorer/types/cost-report-data-type.ts b/apps/web/src/services/cost-explorer/types/cost-report-data-type.ts
index 127bb0a2ee..687ae61622 100644
--- a/apps/web/src/services/cost-explorer/types/cost-report-data-type.ts
+++ b/apps/web/src/services/cost-explorer/types/cost-report-data-type.ts
@@ -1,4 +1,4 @@
-import type { CostReportModel } from '@/schema/cost-analysis/cost-report/model';
+import type { CostReportModel } from '@/api-clients/cost-analysis/cost-report/schema/model';
 import type { RoleType } from '@/schema/identity/role/type';
 
 export type CostReportDataAnalyzeResult = {
diff --git a/apps/web/src/services/cost-explorer/types/data-sources-type.ts b/apps/web/src/services/cost-explorer/types/data-sources-type.ts
index 7b25cb1b11..c96ae50830 100644
--- a/apps/web/src/services/cost-explorer/types/data-sources-type.ts
+++ b/apps/web/src/services/cost-explorer/types/data-sources-type.ts
@@ -1,7 +1,8 @@
 import type { TranslateResult } from 'vue-i18n';
 
-import type { CostDataSourceModel } from '@/schema/cost-analysis/data-source/model';
-import type { CostJobModel } from '@/schema/cost-analysis/job/model';
+import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
+import type { CostJobModel } from '@/api-clients/cost-analysis/job/schema/model';
+
 
 export interface DataSourceItem extends CostDataSourceModel {
     icon?: string;
diff --git a/apps/web/src/services/dashboards/DashboardsContainer.vue b/apps/web/src/services/dashboards/DashboardsContainer.vue
index f097989d5f..0a418f4d02 100644
--- a/apps/web/src/services/dashboards/DashboardsContainer.vue
+++ b/apps/web/src/services/dashboards/DashboardsContainer.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import { useGrantScopeGuard } from '@/common/composables/grant-scope-guard';
 import CenteredPageLayout from '@/common/modules/page-layouts/CenteredPageLayout.vue';
 import GeneralPageLayout from '@/common/modules/page-layouts/GeneralPageLayout.vue';
 import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout.vue';
@@ -27,17 +25,11 @@ import { useDashboardSettingsStore } from '@/services/dashboards/stores/dashboar
 
 
 
-const dashboardStore = useDashboardStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
 const dashboardSettings = useDashboardSettingsStore();
 const userStore = useUserStore();
 dashboardSettings.initState(userStore.state.userId);
-const loadDashboard = async () => {
-    await dashboardStore.load();
-};
-const { callApiWithGrantGuard } = useGrantScopeGuard(['WORKSPACE', 'DOMAIN'], loadDashboard);
-callApiWithGrantGuard();
 
 </script>
 
diff --git a/apps/web/src/services/dashboards/DashboardsLSB.vue b/apps/web/src/services/dashboards/DashboardsLSB.vue
index e9ebb14323..4453617b8d 100644
--- a/apps/web/src/services/dashboards/DashboardsLSB.vue
+++ b/apps/web/src/services/dashboards/DashboardsLSB.vue
@@ -8,17 +8,16 @@ import {
     PIconButton,
 } from '@cloudforet/mirinae';
 
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { MENU_ID } from '@/lib/menu/config';
 
-import { useGrantScopeGuard } from '@/common/composables/grant-scope-guard';
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
@@ -34,15 +33,12 @@ import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
 import { gray } from '@/styles/colors';
 
 import DashboardLSBTree from '@/services/dashboards/components/dashboard-main/DashboardLSBTree.vue';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
 const appContextStore = useAppContextStore();
 const favoriteStore = useFavoriteStore();
 const favoriteGetters = favoriteStore.getters;
-const dashboardStore = useDashboardStore();
-const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const userStore = useUserStore();
 
 const { getProperRouteLocation } = useProperRouteLocation();
@@ -51,15 +47,38 @@ const { hasReadWriteAccess } = usePageEditableStatus();
 const router = useRouter();
 const route = useRoute();
 
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    publicFolderList,
+    privateFolderList,
+} = useDashboardQuery();
+
 const storeState = reactive({
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
     favoriteItems: computed(() => favoriteGetters.dashboardItems),
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
+
+const queryState = reactive({
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value?.filter((d) => d.version !== '1.0') || [];
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value?.filter((d) => d.version !== '1.0') || []),
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value?.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT')) || [];
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
+});
+
 const state = reactive({
     currentPath: computed(() => route.fullPath),
-    publicV2DashboardMenuSet: computed(() => getDashboardMenuSet(dashboardPageControlGetters.publicDashboardItems)),
-    privateV2DashboardMenuSet: computed(() => getDashboardMenuSet(dashboardPageControlGetters.privateDashboardItems)),
+    publicV2DashboardMenuSet: computed(() => getDashboardMenuSet(queryState.publicDashboardItems)),
+    privateV2DashboardMenuSet: computed(() => getDashboardMenuSet(queryState.privateDashboardItems)),
     favoriteItemMap: computed(() => {
         const result: Record<string, FavoriteConfig> = {};
         storeState.favoriteItems?.forEach((d) => {
@@ -71,7 +90,12 @@ const state = reactive({
         ...(storeState.isWorkspaceOwner ? filterStarredItems(state.publicV2DashboardMenuSet) : []),
         ...filterStarredItems(state.privateV2DashboardMenuSet),
     ]),
-    deprecatedMenuSet: computed<LSBItem[]>(() => dashboardPageControlGetters.deprecatedDashboardItems.map((d) => ({
+    deprecatedDashboardItems: computed(() => {
+        const _public = publicDashboardList.value?.filter((d) => d.version === '1.0') || [];
+        const _private = privateDashboardList.value?.filter((d) => d.version === '1.0') || [];
+        return [..._public, ..._private];
+    }),
+    deprecatedMenuSet: computed<LSBItem[]>(() => state.deprecatedDashboardItems.map((d) => ({
         type: MENU_ITEM_TYPE.ITEM,
         id: d.dashboard_id,
         label: d.name,
@@ -155,8 +179,12 @@ const state = reactive({
     }),
 });
 
+
+
+
+
 /* Util */
-const getDashboardMenuSet = (dashboardList: DashboardModel[]) => dashboardList?.map((d) => ({
+const getDashboardMenuSet = (dashboardList: (PublicDashboardModel|PrivateDashboardModel)[]) => dashboardList?.map((d) => ({
     type: MENU_ITEM_TYPE.ITEM,
     id: d.dashboard_id,
     label: d.name,
@@ -184,17 +212,17 @@ const filterStarredItems = (menuItems: LSBMenu[] = []): LSBMenu[] => {
     }));
     return _starredItem;
 };
-const loadDashboard = async () => {
-    await dashboardStore.load();
-};
+// const loadDashboard = async () => {
+//     await dashboardStore.load();
+// };
 
 /* Event */
 const handleClickAddButton = () => {
     router.push(getProperRouteLocation({ name: DASHBOARDS_ROUTE.CREATE._NAME }));
 };
 
-const { callApiWithGrantGuard } = useGrantScopeGuard(['WORKSPACE'], loadDashboard);
-callApiWithGrantGuard();
+// const { callApiWithGrantGuard } = useGrantScopeGuard(['WORKSPACE'], loadDashboard);
+// callApiWithGrantGuard();
 </script>
 
 <template>
@@ -222,13 +250,14 @@ callApiWithGrantGuard();
                   #slot-admin
         >
             <dashboard-l-s-b-tree type="PUBLIC"
-                                  :dashboards="dashboardPageControlGetters.publicDashboardItems"
+                                  :dashboards="queryState.publicDashboardItems"
+                                  :folders="queryState.publicFolderItems"
             />
         </template>
         <template v-if="!storeState.isAdminMode"
                   #slot-shared
         >
-            <l-s-b-collapsible-menu-item v-if="dashboardPageControlGetters.publicFolderItems.length || dashboardPageControlGetters.publicDashboardItems.length"
+            <l-s-b-collapsible-menu-item v-if="queryState.publicFolderItems.length || queryState.publicDashboardItems.length"
                                          class="category-menu-item mt-1"
                                          :item="{
                                              type: 'collapsible',
@@ -239,13 +268,14 @@ callApiWithGrantGuard();
             >
                 <template #collapsible-contents>
                     <dashboard-l-s-b-tree type="PUBLIC"
-                                          :dashboards="dashboardPageControlGetters.publicDashboardItems"
+                                          :dashboards="queryState.publicDashboardItems"
+                                          :folders="queryState.publicFolderItems"
                     />
                 </template>
             </l-s-b-collapsible-menu-item>
         </template>
         <template #slot-private>
-            <l-s-b-collapsible-menu-item v-if="dashboardPageControlGetters.privateFolderItems.length || dashboardPageControlGetters.privateDashboardItems.length"
+            <l-s-b-collapsible-menu-item v-if="queryState.privateFolderItems.length || queryState.privateDashboardItems.length"
                                          class="category-menu-item mt-1"
                                          :item="{
                                              type: 'collapsible',
@@ -256,7 +286,8 @@ callApiWithGrantGuard();
             >
                 <template #collapsible-contents>
                     <dashboard-l-s-b-tree type="PRIVATE"
-                                          :dashboards="dashboardPageControlGetters.privateDashboardItems"
+                                          :dashboards="queryState.privateDashboardItems"
+                                          :folders="queryState.privateFolderItems"
                     />
                 </template>
             </l-s-b-collapsible-menu-item>
diff --git a/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue b/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
index 3a4381a1d5..cedc40216c 100644
--- a/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
+++ b/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
@@ -1,18 +1,26 @@
 <script lang="ts" setup>
-import { reactive } from 'vue';
+import { computed, reactive } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
+
+import type { PrivateDashboardDeleteParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/delete';
+import type { PublicDashboardDeleteParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/delete';
 import { SpaceRouter } from '@/router';
 import { i18n } from '@/translations';
 
+import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import { useProxyValue } from '@/common/composables/proxy-state';
+import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 const recentStore = useRecentStore();
 
@@ -28,36 +36,77 @@ const emit = defineEmits<{(e: 'update:visible', value: boolean): void,
 }>();
 
 const { getProperRouteLocation } = useProperRouteLocation();
-const dashboardDetailStore = useDashboardDetailInfoStore();
+const favoriteStore = useFavoriteStore();
+const favoriteGetters = favoriteStore.getters;
+const userWorkspaceStore = useUserWorkspaceStore();
+/* Query */
+const {
+    api,
+    keys,
+    queryClient,
+} = useDashboardQuery();
+
+const storeState = reactive({
+    currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
+});
+
 const state = reactive({
     proxyVisible: useProxyValue('visible', props, emit),
     loading: false,
 });
 
 const handleDeleteDashboardConfirm = async () => {
-    try {
-        state.loading = true;
-        if (!props.dashboardId) {
-            throw new Error('Dashboard ID is not provided');
-        }
-        await dashboardDetailStore.deleteDashboard(props.dashboardId);
-        await recentStore.deleteRecent({
-            type: RECENT_TYPE.DASHBOARD,
-            itemId: props.dashboardId,
-        });
-        state.loading = false;
-        state.proxyVisible = false;
-        await SpaceRouter.router.replace(getProperRouteLocation({ name: DASHBOARDS_ROUTE._NAME }));
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.FORM.ALT_E_DELETE_DASHBOARD'));
+    if (!props.dashboardId) {
+        throw new Error('Dashboard ID is not provided');
     }
+    deleteDashboard({
+        dashboard_id: props.dashboardId,
+    });
 };
+
+/* Api */
+const deleteDashboardFn = (params: PublicDashboardDeleteParameters|PrivateDashboardDeleteParameters): Promise<void> => {
+    const _isPrivate = params.dashboard_id.startsWith('private');
+    if (_isPrivate) {
+        return api.privateDashboardAPI.delete(params as PrivateDashboardDeleteParameters);
+    }
+    return api.publicDashboardAPI.delete(params as PublicDashboardDeleteParameters);
+};
+
+const { mutate: deleteDashboard, isPending: loading } = useMutation(
+    {
+        mutationFn: deleteDashboardFn,
+        onSuccess: async (_, params) => {
+            const _isPrivate = params.dashboard_id.startsWith('private');
+            const dashboardListQueryKey = _isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+            await queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
+            await recentStore.deleteRecent({
+                type: RECENT_TYPE.DASHBOARD,
+                itemId: props.dashboardId,
+            });
+            const isFavoriteItem = favoriteGetters.dashboardItems.find((item) => item.itemId === params.dashboard_id);
+            if (isFavoriteItem) {
+                await favoriteStore.deleteFavorite({
+                    itemType: FAVORITE_TYPE.DASHBOARD,
+                    workspaceId: storeState.currentWorkspaceId || '',
+                    itemId: params.dashboard_id,
+                });
+            }
+            state.proxyVisible = false;
+            await SpaceRouter.router.replace(getProperRouteLocation({ name: DASHBOARDS_ROUTE._NAME }));
+        },
+        onError(error) {
+            ErrorHandler.handleRequestError(error, i18n.t('DASHBOARDS.FORM.ALT_E_DELETE_DASHBOARD'));
+        },
+    },
+);
+
 </script>
 
 <template>
     <delete-modal :header-title="$t('DASHBOARDS.FORM.DELETE_TITLE')"
                   :visible.sync="state.proxyVisible"
-                  :loading="state.loading"
+                  :loading="loading"
                   @confirm="handleDeleteDashboardConfirm"
     />
 </template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue b/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue
index bac8adbb25..fbe57a8fa0 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue
@@ -10,19 +10,21 @@ import {
 import type { TreeNode } from '@cloudforet/mirinae/src/data-display/tree/tree-view/type';
 import type { BoardSet } from '@cloudforet/mirinae/types/data-display/board/type';
 
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { DashboardTemplateModel } from '@/schema/repository/dashboard-template/model';
 import { i18n } from '@/translations';
 
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
 import DashboardCreateBlankBoardItem from '@/services/dashboards/components/dashboard-create/DashboardCreateBlankBoardItem.vue';
 import type { FilterLabelItem } from '@/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue';
 import DashboardCreateStep1SearchFilter from '@/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue';
 import DashboardFolderTree from '@/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
-import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardTreeDataType } from '@/services/dashboards/types/dashboard-folder-type';
 
 
@@ -31,11 +33,31 @@ const emit = defineEmits<{(e: 'click-next'): void }>();
 const router = useRouter();
 const { getProperRouteLocation } = useProperRouteLocation();
 
+const appContextStore = useAppContextStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardCreatePageGetters = dashboardCreatePageStore.getters;
-const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
+
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+} = useDashboardQuery();
+
+const queryState = reactive({
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    allDashboardItems: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
+});
+
+const storeState = reactive({
+    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
+});
+
 const state = reactive({
     templates: [] as DashboardTemplateModel[],
     blankTemplate: computed<BoardSet[]>(() => ([{
@@ -61,7 +83,7 @@ const state = reactive({
     }),
     allExistingLabels: computed<string[]>(() => {
         const _ootbTemplates = getFilteredTemplates(dashboardCreatePageState.dashboardTemplates, '', [], []);
-        const _existingTemplates = getFilteredTemplates(dashboardPageControlGetters.allDashboardItems, '', [], []);
+        const _existingTemplates = getFilteredTemplates(queryState.allDashboardItems, '', [], []);
 
         const _ootbLabels = flatMapDeep(_ootbTemplates.map((d) => d.labels ?? []));
         const _existingLabels = flatMapDeep(_existingTemplates.map((d) => d.labels ?? []));
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue b/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue
index c691fc1f66..75e1239d38 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue
@@ -10,15 +10,14 @@ import {
 } from '@cloudforet/mirinae';
 import { getClonedName } from '@cloudforet/utils';
 
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { DashboardCreateParams, DashboardModel, DashboardType } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
 import { SpaceRouter } from '@/router';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
-import type { DashboardCreateParams, DashboardModel, DashboardType } from '@/schema/dashboard/_types/dashboard-type';
-import type { PublicDashboardCreateParameters } from '@/schema/dashboard/public-dashboard/api-verbs/create';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -27,6 +26,7 @@ import { useProperRouteLocation } from '@/common/composables/proper-route-locati
 
 import { gray } from '@/styles/colors';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
 } from '@/services/dashboards/constants/dashboard-vars-schema-preset';
@@ -43,19 +43,33 @@ const TABLE_FIELDS = [
 ];
 const { getProperRouteLocation } = useProperRouteLocation();
 const appContextStore = useAppContextStore();
-const dashboardStore = useDashboardStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const userStore = useUserStore();
+
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    keys,
+    api,
+    queryClient,
+} = useDashboardQuery();
+
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceMember: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
 });
 const state = reactive({
     loading: false,
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
     bundleCaseType: computed(() => {
         if (!isEmpty(dashboardCreatePageState.selectedOotbIdMap)) return 'TEMPLATE';
         return 'EXISTING';
@@ -75,8 +89,8 @@ const state = reactive({
             type: 'DASHBOARD',
         }));
     }),
-    existingPublicDashboardNameList: computed<string[]>(() => dashboardPageControlGetters.publicDashboardItems.map((d) => d.name)),
-    existingPrivateDashboardNameList: computed<string[]>(() => dashboardPageControlGetters.privateDashboardItems.map((d) => d.name)),
+    existingPublicDashboardNameList: computed<string[]>(() => state.publicDashboardItems.map((d) => d.name)),
+    existingPrivateDashboardNameList: computed<string[]>(() => state.privateDashboardItems.map((d) => d.name)),
 });
 
 /* Util */
@@ -112,7 +126,10 @@ const createBundleOotb = async () => {
         if (storeState.isWorkspaceMember) {
             _createType = 'PRIVATE';
         }
-        _promises.push(dashboardStore.createDashboard(_createType, _dashboardParams));
+        const fetcher = _createType === 'PRIVATE'
+            ? api.privateDashboardAPI.create
+            : api.publicDashboardAPI.create;
+        _promises.push(fetcher(_dashboardParams));
     }));
     const _results = await Promise.allSettled(_promises);
     const _fulfilledResults = _results.filter((r) => r.status === 'fulfilled');
@@ -135,7 +152,8 @@ const handleChangePrivate = (id: string, value: boolean) => {
 const handleConfirm = async () => {
     dashboardCreatePageStore.setLoading(true);
     await createBundleOotb();
-    await dashboardStore.load();
+    await queryClient.invalidateQueries({ queryKey: keys.publicDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: keys.privateDashboardListQueryKey.value });
     await SpaceRouter.router.push(getProperRouteLocation({
         name: DASHBOARDS_ROUTE._NAME,
     }));
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue b/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue
index eac9a051f1..d24211aae9 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue
@@ -3,20 +3,24 @@ import {
     computed, defineExpose, reactive, watch,
 } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
+
 import {
     PI, PFieldGroup, PTextInput, PSelectDropdown,
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import type { InputItem } from '@cloudforet/mirinae/types/controls/input/text-input/type';
 
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { DashboardCreateParams, DashboardModel, DashboardType } from '@/api-clients/dashboard/_types/dashboard-type';
+import type {
+    PrivateDashboardCreateParameters,
+} from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/create';
+import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
 import { SpaceRouter } from '@/router';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
-import type { DashboardCreateParams } from '@/schema/dashboard/_types/dashboard-type';
-import type { PublicDashboardCreateParameters } from '@/schema/dashboard/public-dashboard/api-verbs/create';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
@@ -26,14 +30,12 @@ import { useProperRouteLocation } from '@/common/composables/proper-route-locati
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 import DashboardCreateScopeForm from '@/services/dashboards/components/dashboard-create/DashboardCreateScopeForm.vue';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
 } from '@/services/dashboards/constants/dashboard-vars-schema-preset';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
-import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
-
-
 
 interface Props {
     isValid: boolean;
@@ -44,19 +46,40 @@ const emit = defineEmits<{(e: 'update:is-valid', value: boolean): void
 
 const { getProperRouteLocation } = useProperRouteLocation();
 const appContextStore = useAppContextStore();
-const dashboardStore = useDashboardStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardCreatePageGetters = dashboardCreatePageStore.getters;
-const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const userStore = useUserStore();
+
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    publicFolderList,
+    privateFolderList,
+    keys,
+    api,
+    queryClient,
+} = useDashboardQuery();
+
+const getDashboardNameList = (dashboardType: DashboardType) => {
+    if (dashboardType === 'PRIVATE') {
+        return (privateDashboardList.value.filter((i) => i.version !== '1.0')).map((item) => item.name);
+    }
+    return publicDashboardList.value.filter((i) => i.version !== '1.0').map((item) => item.name);
+};
+
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 const state = reactive({
     proxyIsValid: useProxyValue('isValid', props, emit),
-    dashboardNameList: computed<string[]>(() => dashboardStore.getDashboardNameList(dashboardCreatePageGetters.dashboardType)),
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
+    dashboardNameList: computed<string[]>(() => getDashboardNameList(dashboardCreatePageGetters.dashboardType)),
     labels: [] as InputItem[],
     folderMenuItems: computed<SelectDropdownMenuItem[]>(() => {
         const defaultItem = {
@@ -66,7 +89,7 @@ const state = reactive({
         if (dashboardCreatePageState.dashboardScope === 'PRIVATE') {
             return [
                 defaultItem,
-                ...dashboardPageControlGetters.privateFolderItems.map((folder) => ({
+                ...state.privateFolderItems.map((folder) => ({
                     label: folder.name,
                     name: folder.folder_id,
                 })),
@@ -74,7 +97,7 @@ const state = reactive({
         }
         return [
             defaultItem,
-            ...dashboardPageControlGetters.publicFolderItems.map((folder) => ({
+            ...state.publicFolderItems.map((folder) => ({
                 label: folder.name,
                 name: folder.folder_id,
             })),
@@ -103,7 +126,39 @@ const {
 });
 
 /* Api */
-const createSingleDashboard = async () => {
+const createDashboardFn = (params: DashboardCreateParams): Promise<DashboardModel> => {
+    if (dashboardCreatePageState.dashboardScope === 'PRIVATE') {
+        return api.privateDashboardAPI.create(params as PrivateDashboardCreateParameters);
+    }
+    return api.publicDashboardAPI.create(params as PublicDashboardCreateParameters);
+};
+
+const { mutate: createDashboard } = useMutation(
+    {
+        mutationFn: createDashboardFn,
+        onSuccess: (dashboard: DashboardModel) => {
+            dashboardCreatePageStore.setDashboardCreated(true);
+            const isPrivate = dashboard.dashboard_id.startsWith('private');
+            const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
+        },
+        onError: (e) => {
+            showErrorMessage(i18n.t('DASHBOARDS.FORM.ALT_E_CREATE_DASHBOARD'), e);
+        },
+        onSettled(data) {
+            if (data?.dashboard_id) {
+                SpaceRouter.router.push(getProperRouteLocation({
+                    name: DASHBOARDS_ROUTE.DETAIL._NAME,
+                    params: { dashboardId: data.dashboard_id },
+                }));
+            }
+        },
+    },
+);
+
+/* Event */
+const handleConfirm = async () => {
+    dashboardCreatePageStore.setLoading(true);
     const _dashboardParams: DashboardCreateParams = {
         name: dashboardName.value,
         labels: state.labels.map((item) => item.name),
@@ -111,35 +166,12 @@ const createSingleDashboard = async () => {
         folder_id: state.selectedFolderId,
         vars_schema: DASHBOARD_VARS_SCHEMA_PRESET,
     };
-    try {
-        if (storeState.isAdminMode) {
-            (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
-        } else if (dashboardCreatePageState.dashboardScope !== 'PRIVATE') {
-            (_dashboardParams as PublicDashboardCreateParameters).resource_group = dashboardCreatePageState.dashboardScope || RESOURCE_GROUP.WORKSPACE;
-        }
-        const _dashboardType = dashboardCreatePageState.dashboardScope === 'PRIVATE' ? 'PRIVATE' : 'PUBLIC';
-        const res = await dashboardStore.createDashboard(_dashboardType, _dashboardParams);
-        dashboardCreatePageStore.setDashboardCreated(true);
-        return res.dashboard_id;
-    } catch (e) {
-        showErrorMessage(i18n.t('DASHBOARDS.FORM.ALT_E_CREATE_DASHBOARD'), e);
-        return undefined;
-    }
-};
-
-/* Event */
-const handleConfirm = async () => {
-    dashboardCreatePageStore.setLoading(true);
-    const createdDashboardId = await createSingleDashboard();
-    await dashboardStore.load();
-    if (createdDashboardId) {
-        await SpaceRouter.router.push(getProperRouteLocation({
-            name: DASHBOARDS_ROUTE.DETAIL._NAME,
-            params: {
-                dashboardId: createdDashboardId,
-            },
-        }));
+    if (storeState.isAdminMode) {
+        (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
+    } else if (dashboardCreatePageState.dashboardScope !== 'PRIVATE') {
+        (_dashboardParams as PublicDashboardCreateParameters).resource_group = dashboardCreatePageState.dashboardScope || RESOURCE_GROUP.WORKSPACE;
     }
+    createDashboard(_dashboardParams as DashboardCreateParams);
 };
 
 /* Watcher */
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardCloneModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardCloneModal.vue
index d615878ae9..56a69dfe8d 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardCloneModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardCloneModal.vue
@@ -1,26 +1,25 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { useMutation } from '@tanstack/vue-query';
+
 import {
     PButtonModal, PFieldGroup, PTextInput, PToggleButton,
 } from '@cloudforet/mirinae';
 import { getClonedName } from '@cloudforet/utils';
 
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { DashboardCreateParams, DashboardModel, DashboardType } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
+import type { PrivateDashboardCreateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/create';
+import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
+import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
+import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
-import type { DashboardType, DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
-import type { WidgetModel } from '@/schema/dashboard/_types/widget-type';
-import type { PrivateDashboardCreateParameters } from '@/schema/dashboard/private-dashboard/api-verbs/create';
-import type { PrivateWidgetListParameters } from '@/schema/dashboard/private-widget/api-verbs/list';
-import type { PublicDashboardCreateParameters } from '@/schema/dashboard/public-dashboard/api-verbs/create';
-import type { PublicWidgetListParameters } from '@/schema/dashboard/public-widget/api-verbs/list';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 import { useUserStore } from '@/store/user/user-store';
@@ -32,13 +31,12 @@ import { useFormValidator } from '@/common/composables/form-validator';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { getSharedDashboardLayouts } from '@/services/dashboards/helpers/dashboard-share-helper';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
 
 
-type DashboardCreateParameters = PublicDashboardCreateParameters | PrivateDashboardCreateParameters;
 interface Props {
     visible: boolean;
     dashboardId: string;
@@ -49,13 +47,21 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
 }>();
+const { privateWidgetAPI } = usePrivateWidgetApi();
+const { publicWidgetAPI } = usePublicWidgetApi();
+
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    keys,
+    api,
+    queryClient,
+} = useDashboardQuery();
 
 const { getProperRouteLocation } = useProperRouteLocation();
 const appContextStore = useAppContextStore();
 const allReferenceStore = useAllReferenceStore();
-const dashboardStore = useDashboardStore();
-const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const userStore = useUserStore();
 const {
     forms: {
@@ -84,19 +90,24 @@ const storeState = reactive({
     costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
 });
 const state = reactive({
-    loading: false,
     proxyVisible: useProxyValue('visible', props, emit),
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
     dashboardType: computed<DashboardType>(() => {
         if (state.isPrivate) return 'PRIVATE';
         return 'PUBLIC';
     }),
     isPrivate: true,
-    targetDashboard: computed<DashboardModel>(() => dashboardPageControlGetters.allDashboardItems.find((item: DashboardModel) => item.dashboard_id === props.dashboardId)),
+    targetDashboard: computed<DashboardModel>(() => [...state.publicDashboardItems, ...state.privateDashboardItems].find((item: DashboardModel) => item.dashboard_id === props.dashboardId)),
     dashboardNameList: computed<string[]>(() => {
         if (props.dashboardId.startsWith('private')) {
-            return dashboardPageControlGetters.privateDashboardItems.map((item) => item.name);
+            return state.privateDashboardItems.map((item) => item.name);
         }
-        return dashboardPageControlGetters.publicDashboardItems.map((item) => item.name);
+        return state.publicDashboardItems.map((item) => item.name);
     }),
 });
 
@@ -105,9 +116,9 @@ const listDashboardWidgets = async (dashboardId: string): Promise<WidgetModel[]>
     try {
         const isPrivate = dashboardId.startsWith('private');
         const fetcher = isPrivate
-            ? SpaceConnector.clientV2.dashboard.privateWidget.list
-            : SpaceConnector.clientV2.dashboard.publicWidget.list;
-        const res = await fetcher<PublicWidgetListParameters|PrivateWidgetListParameters, ListResponse<WidgetModel>>({
+            ? privateWidgetAPI.list
+            : publicWidgetAPI.list;
+        const res = await fetcher({
             dashboard_id: dashboardId,
         });
         return res.results || [];
@@ -121,55 +132,66 @@ const handleUpdateVisible = (visible) => {
     state.proxyVisible = visible;
 };
 
-const cloneDashboard = async (): Promise<string|undefined> => {
-    try {
-        state.loading = true;
-        const _dashboardWidgets = await listDashboardWidgets(props.dashboardId);
-
-        const _sharedLayouts = await getSharedDashboardLayouts(state.targetDashboard.layouts, _dashboardWidgets, storeState.costDataSource);
-        const _sharedDashboard: DashboardCreateParameters = {
-            name: name.value,
-            layouts: _sharedLayouts,
-            options: state.targetDashboard.options || {},
-            labels: state.targetDashboard.labels || [],
-            tags: { created_by: userStore.state.userId },
-            vars: state.targetDashboard.vars,
-            vars_schema: state.targetDashboard.vars_schema,
-        };
-        if (storeState.isWorkspaceMember) {
-            state.isPrivate = true;
-        } else if (storeState.isAdminMode) {
-            state.isPrivate = false;
-            (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
-        } else if (!state.isPrivate) {
-            (_sharedDashboard as PublicDashboardCreateParameters).resource_group = state.targetDashboard?.resource_group || RESOURCE_GROUP.WORKSPACE;
-        }
-        const res = await dashboardStore.createDashboard(state.dashboardType, _sharedDashboard);
-        return res.dashboard_id;
-    } catch (e) {
-        showErrorMessage(i18n.t('DASHBOARDS.FORM.ALT_E_CLONE_DASHBOARD'), e);
-    } finally {
-        state.loading = false;
-    }
-    return undefined;
-};
-
 /* Event */
 const handleChangePrivate = (val: boolean) => {
     state.isPrivate = val;
 };
 const handleConfirm = async () => {
     if (!isAllValid) return;
-    const clonedDashboardId = await cloneDashboard();
-    state.proxyVisible = false;
-    if (clonedDashboardId) {
-        await SpaceRouter.router.push(getProperRouteLocation({
-            name: DASHBOARDS_ROUTE.DETAIL._NAME,
-            params: { dashboardId: clonedDashboardId },
-        }));
+    const _dashboardWidgets = await listDashboardWidgets(props.dashboardId);
+
+    const _sharedLayouts = await getSharedDashboardLayouts(state.targetDashboard.layouts, _dashboardWidgets, storeState.costDataSource);
+    const _sharedDashboard: DashboardCreateParams = {
+        name: name.value,
+        layouts: _sharedLayouts,
+        options: state.targetDashboard.options || {},
+        labels: state.targetDashboard.labels || [],
+        tags: { created_by: userStore.state.userId },
+        vars: state.targetDashboard.vars,
+        vars_schema: state.targetDashboard.vars_schema,
+    };
+    if (storeState.isWorkspaceMember) {
+        state.isPrivate = true;
+    } else if (storeState.isAdminMode) {
+        state.isPrivate = false;
+        (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
+    } else if (!state.isPrivate) {
+        (_sharedDashboard as PublicDashboardCreateParameters).resource_group = state.targetDashboard?.resource_group || RESOURCE_GROUP.WORKSPACE;
+    }
+
+    mutate(_sharedDashboard as PrivateDashboardCreateParameters);
+};
+
+const createDashboard = (params: DashboardCreateParams): Promise<DashboardModel> => {
+    if (state.isPrivate) {
+        return api.privateDashboardAPI.create(params as PrivateDashboardCreateParameters);
     }
+    return api.publicDashboardAPI.create(params as PublicDashboardCreateParameters);
 };
 
+const { mutate, isPending: dashboardCloneLoading } = useMutation(
+    {
+        mutationFn: createDashboard,
+        onSuccess: (dashboard: DashboardModel) => {
+            const isPrivate = dashboard.dashboard_id.startsWith('private');
+            const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
+        },
+        onError: (e) => {
+            showErrorMessage(i18n.t('DASHBOARDS.FORM.ALT_E_CLONE_DASHBOARD'), e);
+        },
+        onSettled(data) {
+            state.proxyVisible = false;
+            if (data?.dashboard_id) {
+                SpaceRouter.router.push(getProperRouteLocation({
+                    name: DASHBOARDS_ROUTE.DETAIL._NAME,
+                    params: { dashboardId: data.dashboard_id },
+                }));
+            }
+        },
+    },
+);
+
 watch(() => props.visible, (visible) => {
     if (visible) {
         const _clonedName = getClonedName(state.dashboardNameList, state.targetDashboard.name);
@@ -183,7 +205,7 @@ watch(() => props.visible, (visible) => {
                     :header-title="$t('DASHBOARDS.FORM.CLONE_TITLE')"
                     size="sm"
                     :disabled="!isAllValid"
-                    :loading="state.loading"
+                    :loading="dashboardCloneLoading"
                     class="dashboard-clone-modal"
                     @confirm="handleConfirm"
                     @update:visible="handleUpdateVisible"
@@ -207,7 +229,7 @@ watch(() => props.visible, (visible) => {
                            class="mt-6"
             >
                 <p-toggle-button :value="state.isPrivate"
-                                 :disabled="state.loading"
+                                 :disabled="dashboardCloneLoading"
                                  @change-toggle="handleChangePrivate"
                 />
             </p-field-group>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
index 622a4635d5..1999bab3a1 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
@@ -7,7 +7,7 @@ import {
 import type { BadgeStyleType, BadgeType } from '@cloudforet/mirinae/src/data-display/badge/type';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { DashboardScope } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardScope } from '@/api-clients/dashboard/_types/dashboard-type';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import { i18n } from '@/translations';
 
@@ -19,6 +19,9 @@ import { gray } from '@/styles/colors';
 import DashboardControlButtons from '@/services/dashboards/components/dashboard-detail/DashboardControlButtons.vue';
 import DashboardLabelsButton from '@/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue';
 import { useDashboardControlMenuItems } from '@/services/dashboards/composables/use-dashboard-control-menu-items';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
@@ -31,11 +34,41 @@ interface Props {
 const props = defineProps<Props>();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
 const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const appContextStore = useAppContextStore();
 const userStore = useUserStore();
+
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    publicFolderList,
+    privateFolderList,
+} = useDashboardQuery();
+
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => props.dashboardId),
+});
+const { isManageable } = useDashboardManageable({
+    dashboardId: computed(() => props.dashboardId),
+});
+
+const queryState = reactive({
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    allDashboardItems: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
+    allFolderItems: computed(() => [...queryState.publicFolderItems, ...queryState.privateFolderItems]),
+});
+
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
@@ -43,19 +76,19 @@ const storeState = reactive({
 const { getControlMenuItems } = useDashboardControlMenuItems({
     isAdminMode: computed(() => storeState.isAdminMode),
     isWorkspaceOwner: computed(() => storeState.isWorkspaceOwner),
-    dashboardList: computed(() => dashboardPageControlGetters.allDashboardItems),
 });
 const state = reactive({
-    isSharedDashboard: computed<boolean>(() => !!dashboardDetailGetters.dashboardInfo?.shared),
-    sharedScope: computed<DashboardScope|undefined>(() => dashboardDetailGetters.dashboardInfo?.scope),
+    isPrivate: computed<boolean>(() => !!dashboard.value?.dashboard_id.startsWith('private')),
+    isSharedDashboard: computed<boolean>(() => !!dashboard.value?.shared),
+    sharedScope: computed<DashboardScope|undefined>(() => dashboard.value?.scope),
     selectedSharedScope: 'WORKSPACE' as DashboardScope,
     showBadge: computed<boolean>(() => {
-        if (dashboardDetailGetters.dashboardInfo?.user_id) return true;
+        if (dashboard.value?.user_id) return true;
         return state.isSharedDashboard;
     }),
     badgeType: computed<BadgeType>(() => 'subtle'),
     badgeStyleType: computed<BadgeStyleType>(() => {
-        if (dashboardDetailGetters.isPrivate) return 'gray150';
+        if (state.isPrivate) return 'gray150';
         if (state.sharedScope === 'PROJECT') return 'primary3';
         return 'indigo100';
     }),
@@ -63,7 +96,7 @@ const state = reactive({
         if (dashboardDetailState.dashboardId?.startsWith('private')) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.PRIVATE');
         if (state.isSharedDashboard) {
             if (storeState.isAdminMode) {
-                if (dashboardDetailGetters.dashboardInfo?.scope === 'PROJECT') {
+                if (dashboard.value?.scope === 'PROJECT') {
                     return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_ALL_PROJECTS');
                 }
                 return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_WORKSPACES');
@@ -74,8 +107,8 @@ const state = reactive({
         return '';
     }),
     folderName: computed<string|undefined>(() => {
-        const _folderId = dashboardPageControlGetters.allDashboardItems.find((d) => d.dashboard_id === props.dashboardId)?.folder_id;
-        const folder = dashboardPageControlGetters.allFolderItems.find((d) => d.folder_id === _folderId);
+        const _folderId = queryState.allDashboardItems.find((d) => d.dashboard_id === props.dashboardId)?.folder_id;
+        const folder = queryState.allFolderItems.find((d) => d.folder_id === _folderId);
         return folder?.name;
     }),
 });
@@ -105,8 +138,8 @@ const handleSelectItem = (item: MenuItem) => {
         </div>
         <p-heading-layout class="mb-6">
             <template #heading>
-                <p-heading :title="dashboardDetailGetters.dashboardName">
-                    <p-skeleton v-if="!dashboardDetailGetters.dashboardName"
+                <p-heading :title="dashboard?.name">
+                    <p-skeleton v-if="!dashboard?.name"
                                 width="20rem"
                                 height="1.5rem"
                     />
@@ -116,7 +149,7 @@ const handleSelectItem = (item: MenuItem) => {
                                  :style-type="state.badgeStyleType"
                                  class="mr-2"
                         >
-                            <p-i v-if="dashboardDetailGetters.isPrivate"
+                            <p-i v-if="state.isPrivate"
                                  name="ic_lock-filled"
                                  width="0.75rem"
                                  height="0.75rem"
@@ -141,12 +174,12 @@ const handleSelectItem = (item: MenuItem) => {
                     </template>
                 </p-heading>
             </template>
-            <template v-if="!dashboardDetailGetters.isDeprecatedDashboard"
+            <template v-if="dashboard?.version !== '1.0'"
                       #extra
             >
-                <dashboard-control-buttons v-if="!dashboardDetailGetters.disableManageButtons"
+                <dashboard-control-buttons v-if="isManageable"
                                            :dashboard-id="props.dashboardId"
-                                           :name="dashboardDetailGetters.dashboardName"
+                                           :name="dashboard?.name"
                 />
             </template>
         </p-heading-layout>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardFolderSingleMoveModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardFolderSingleMoveModal.vue
index 2cea478fe5..b619728e5e 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardFolderSingleMoveModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardFolderSingleMoveModal.vue
@@ -3,25 +3,37 @@ import {
     computed, reactive, watch,
 } from 'vue';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { useMutation } from '@tanstack/vue-query';
+
 import {
     PButtonModal, PFieldGroup, PI, PSelectDropdown,
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { DashboardChangeFolderParams } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardChangeFolderParams } from '@/api-clients/dashboard/_types/dashboard-type';
+import type {
+    PrivateDashboardChangeFolderParameters,
+} from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/change-folder';
+import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
+import type {
+    PublicDashboardChangeFolderParameters,
+} from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/change-folder';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 import { i18n } from '@/translations';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
+import { useAppContextStore } from '@/store/app-context/app-context-store';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
 
 
+
+type DashboardModel = PrivateFolderModel | PublicFolderModel;
 interface Props {
     visible: boolean;
     dashboardId: string;
@@ -32,12 +44,28 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
 }>();
-
-const dashboardStore = useDashboardStore();
+const appContextStore = useAppContextStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
+
+/* Query */
+const {
+    publicFolderList,
+    privateFolderList,
+    keys,
+    api,
+    queryClient,
+} = useDashboardQuery();
+
+const storeState = reactive({
+    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
+});
 const state = reactive({
     proxyVisible: useProxyValue<boolean>('visible', props, emit),
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
     menuItems: computed<SelectDropdownMenuItem[]>(() => {
         const defaultItem = {
             label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.NO_PARENT_FOLDER'),
@@ -46,7 +74,7 @@ const state = reactive({
         if (props.dashboardId.startsWith('public')) {
             return [
                 defaultItem,
-                ...dashboardPageControlGetters.publicFolderItems.map((folder) => ({
+                ...state.publicFolderItems.map((folder) => ({
                     label: folder.name,
                     name: folder.folder_id,
                 })),
@@ -54,7 +82,7 @@ const state = reactive({
         }
         return [
             defaultItem,
-            ...dashboardPageControlGetters.privateFolderItems.map((folder) => ({
+            ...state.privateFolderItems.map((folder) => ({
                 label: folder.name,
                 name: folder.folder_id,
             })),
@@ -64,28 +92,40 @@ const state = reactive({
 });
 
 /* Api */
-const updateDashboard = async (dashboardId: string): Promise<void> => {
-    try {
-        const _isPrivate = dashboardId.startsWith('private');
-        const fetcher = _isPrivate ? SpaceConnector.clientV2.dashboard.privateDashboard.changeFolder : SpaceConnector.clientV2.dashboard.publicDashboard.changeFolder;
-        const params: DashboardChangeFolderParams = {
-            dashboard_id: dashboardId,
-        };
-        if (state.selectedFolderId) {
-            params.folder_id = state.selectedFolderId;
-        }
-        await fetcher(params);
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_MOVE_DASHBOARD'), '');
-    } catch (e) {
-        showErrorMessage(i18n.t('DASHBOARDS.DETAIL.ALT_E_MOVE_DASHBOARD'), e);
+const changeFolderFn = (params: PrivateDashboardChangeFolderParameters | PublicDashboardChangeFolderParameters): Promise<DashboardModel> => {
+    const _isPrivate = props.dashboardId.startsWith('private');
+    if (_isPrivate) {
+        return api.privateDashboardAPI.changeFolder(params as PrivateDashboardChangeFolderParameters);
     }
+    return api.publicDashboardAPI.changeFolder(params as PublicDashboardChangeFolderParameters);
 };
+const { mutate: changeFolder } = useMutation(
+    {
+        mutationFn: changeFolderFn,
+        onSuccess: () => {
+            showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_MOVE_DASHBOARD'), '');
+            const isPrivate = props.dashboardId.startsWith('private');
+            const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
+        },
+        onError: (e) => {
+            showErrorMessage(i18n.t('DASHBOARDS.DETAIL.ALT_E_MOVE_DASHBOARD'), e);
+        },
+        onSettled: () => {
+            state.proxyVisible = false;
+        },
+    },
+);
 
 /* Event */
 const handleFormConfirm = async () => {
-    await updateDashboard(props.dashboardId);
-    await dashboardStore.load();
-    state.proxyVisible = false;
+    const params: DashboardChangeFolderParams = {
+        dashboard_id: props.dashboardId,
+    };
+    if (state.selectedFolderId) {
+        params.folder_id = state.selectedFolderId;
+    }
+    changeFolder(params);
 };
 
 /* Watcher */
@@ -94,7 +134,7 @@ watch(() => state.proxyVisible, (visible) => {
         state.selectedFolderId = '';
         dashboardPageControlStore.reset();
     } else {
-        const _folderId = dashboardPageControlGetters.allDashboardItems.find((d) => d.dashboard_id === props.dashboardId)?.folder_id;
+        const _folderId = [...state.publicFolderItems, ...state.privateFolderItems].find((d) => d.dashboard_id === props.dashboardId)?.folder_id;
         if (_folderId) state.selectedFolderId = _folderId;
     }
 }, { immediate: true });
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue
index 6d60d8a4db..4b6532283c 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue
@@ -3,7 +3,10 @@ import {
     computed, reactive,
 } from 'vue';
 
-import type { DashboardGlobalVariable, GlobalVariableFilterType } from '@/schema/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardGlobalVariable, GlobalVariableFilterType } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
+
+import { useProxyValue } from '@/common/composables/proxy-state';
 
 import DashboardGlobalVariableFilterEnum
     from '@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue';
@@ -19,11 +22,12 @@ import DashboardGlobalVariableFilterTextInput
 
 interface Props {
     variable: DashboardGlobalVariable;
+    vars?: DashboardVars;
 }
 
 const props = defineProps<Props>();
-
-
+const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void;
+}>();
 
 const state = reactive({
     variableMethod: computed<DashboardGlobalVariable['method']>(() => props.variable.method),
@@ -35,6 +39,7 @@ const state = reactive({
         if (props.variable.options.inputType === 'input') return 'NUMBER_INPUT'; // input - number
         return 'NUMBER_SLIDER'; // slider - number
     }),
+    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 </script>
@@ -43,18 +48,23 @@ const state = reactive({
     <div class="dashboard-global-variable-filter">
         <dashboard-global-variable-filter-enum v-if="state.variableFilterType === 'ENUM'"
                                                :variable="props.variable"
+                                               :vars.sync="state.proxyVars"
         />
         <dashboard-global-variable-filter-reference v-else-if="state.variableFilterType === 'REFERENCE'"
                                                     :variable="props.variable"
+                                                    :vars.sync="state.proxyVars"
         />
         <dashboard-global-variable-filter-text-input v-else-if="state.variableFilterType === 'TEXT_INPUT'"
                                                      :variable="props.variable"
+                                                     :vars.sync="state.proxyVars"
         />
         <dashboard-global-variable-filter-number-input v-else-if="state.variableFilterType === 'NUMBER_INPUT'"
                                                        :variable="props.variable"
+                                                       :vars.sync="state.proxyVars"
         />
         <dashboard-global-variable-filter-number-slider v-else-if="state.variableFilterType === 'NUMBER_SLIDER'"
                                                         :variable="props.variable"
+                                                        :vars.sync="state.proxyVars"
         />
     </div>
 </template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
index 8b1dc632f6..be4116fbc2 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
@@ -3,7 +3,9 @@
 
 import { computed, reactive, watch } from 'vue';
 
-import { cloneDeep, flattenDeep, isEqual } from 'lodash';
+import {
+    cloneDeep, flattenDeep, isEqual, xor,
+} from 'lodash';
 
 import { PSelectDropdown } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
@@ -13,21 +15,29 @@ import type {
     DashboardGlobalVariable,
     NumberEnumVariable,
     TextEnumVariable,
-} from '@/schema/dashboard/_types/dashboard-global-variable-type';
+} from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
+import { useProxyValue } from '@/common/composables/proxy-state';
+
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
 interface Props {
     variable: DashboardGlobalVariable;
+    vars?: DashboardVars;
 }
 
 
 const props = defineProps<Props>();
+const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
 
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 
 const state = reactive({
     variable: computed(() => props.variable as TextEnumVariable | NumberEnumVariable),
@@ -35,6 +45,7 @@ const state = reactive({
     menuItems: computed<SelectDropdownMenuItem[]>(() => state.variable.values.map((value) => ({ label: value.label, name: value.key }))),
     selected: [] as SelectDropdownMenuItem[],
     isNumber: computed<boolean>(() => state.variable.type === 'number'),
+    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 
@@ -44,30 +55,22 @@ const handleSelectOption = () => {
 
 const changeVariables = (changedSelected: MenuItem[]) => {
     const _key = state.variable.key;
-    const vars = cloneDeep(dashboardDetailState.vars);
+    const vars = cloneDeep(props.vars ?? {});
     const selectedValues: string[] = changedSelected.map((d) => d.name) as string[];
     if (selectedValues.length === 0) {
         delete vars[_key];
     } else {
         const _refinedValues: string[]|number[] = state.isNumber ? selectedValues.map((d) => parseFloat(d)) : selectedValues;
         const _vars = state.multiSelectable ? _refinedValues : _refinedValues[0];
-        if (isEqual(dashboardDetailState.vars[_key], _vars)) {
+        if (isEqual(vars[_key], _vars)) {
             return;
         }
         vars[_key] = _vars;
     }
-    dashboardDetailStore.setVars(vars);
-};
-
-const initVariableAndSelected = async () => {
-    const found = state.menuItems[0];
-    if (found) {
-        state.selected = [found];
-        changeVariables([found]);
-    }
+    state.proxyVars = vars;
 };
 
-const initSelected = async (value: any) => {
+const initSelected = (value: any) => {
     // Selected options data from backend can be undefined or string not string[]. Convert them to Array.
     const selectedValues = flattenDeep([value ?? []]);
     const refinedValues = selectedValues.map((d) => d.toString());
@@ -75,22 +78,37 @@ const initSelected = async (value: any) => {
     if (selectedItems.length) {
         state.selected = selectedItems;
     } else {
-        await initVariableAndSelected();
+        const found = state.menuItems[0];
+        if (found) {
+            state.selected = [found];
+            changeVariables([found]);
+        }
     }
 };
 
-watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, async (varsSchema, prevVarsSchema) => {
+watch(() => dashboard.value?.vars_schema?.properties, async (varsSchema, prevVarsSchema) => {
+    if (!varsSchema) return;
     const _variable = props.variable as TextEnumVariable|NumberEnumVariable;
     if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[varsSchema[_variable.key]])) return;
 
-    const value = dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key];
+    const value = dashboard.value?.vars?.[_variable.key];
     if (value) {
-        await initSelected(value);
+        initSelected(value);
     } else {
         state.selected = [];
     }
 }, { immediate: true });
 
+// for reset
+watch(() => props.vars, (_vars) => {
+    const selectedValues = state.selected.map((d) => d.name);
+    const _variable = props.variable as TextEnumVariable|NumberEnumVariable;
+    const tempVarsValue = flattenDeep([(_vars?.[_variable.key] as string|string[]|undefined) ?? []]);
+    const isNotSame = xor(selectedValues, tempVarsValue).length > 0;
+    if (isNotSame) {
+        initSelected(_vars?.[state.variable.key]);
+    }
+});
 
 
 </script>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue
index 20d02c4e12..302922a9d7 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue
@@ -15,21 +15,28 @@ import type { InputItem } from '@cloudforet/mirinae/src/controls/input/text-inpu
 import type {
     DashboardGlobalVariable,
     NumberAnyVariable,
-} from '@/schema/dashboard/_types/dashboard-global-variable-type';
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
+} from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
+import { useProxyValue } from '@/common/composables/proxy-state';
+
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 interface Props {
     variable: DashboardGlobalVariable;
+    vars?: DashboardVars;
 }
 
 
 const props = defineProps<Props>();
+const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 
 const state = reactive({
     variable: computed(() => {
@@ -44,6 +51,7 @@ const state = reactive({
     value: undefined as number|undefined,
     editMode: false,
     keyword: undefined as number|undefined,
+    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 const handleUpdateKeyword = (value: string) => {
@@ -136,25 +144,34 @@ const isValidNumberInfo = (value: string, min: number, max: number, step?: strin
 
 const changeVariables = (changedSelected?: number) => {
     const _key = state.variable.key;
-    const vars = cloneDeep(dashboardDetailState.vars) as DashboardVars;
+    const vars = cloneDeep(props.vars ?? {}) as DashboardVars;
     if (changedSelected !== undefined) {
         vars[_key] = changedSelected;
     } else {
         delete vars[_key];
     }
-    dashboardDetailStore.setVars(vars);
+    state.proxyVars = vars;
 };
 
-watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, (varsSchema, prevVarsSchema) => {
+watch(() => dashboard.value?.vars_schema?.properties, (varsSchema, prevVarsSchema) => {
+    if (!varsSchema) return;
     const _variable = props.variable as NumberAnyVariable;
     if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[varsSchema[_variable.key]])) return;
 
-    state.value = (dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key] as number) || _variable.options.min;
+    state.value = (dashboard.value?.vars?.[_variable.key] as number) || _variable.options.min;
     changeVariables(state.value);
 
-    state.keyword = (dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key] as number) || _variable.options.min;
+    state.keyword = (dashboard.value?.vars?.[_variable.key] as number) || _variable.options.min;
 }, { immediate: true });
 
+// for reset
+watch(() => props.vars, (_vars) => {
+    const _variable = props.variable as NumberAnyVariable;
+    const tempVarsValue = _vars?.[_variable.key] as number|undefined;
+    if (state.value !== parseFloat(tempVarsValue)) {
+        state.value = parseFloat(tempVarsValue);
+    }
+});
 
 
 </script>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue
index c94edf8ec6..a1b75dd76c 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue
@@ -11,19 +11,27 @@ import { PTag, PSlider } from '@cloudforet/mirinae';
 import type {
     DashboardGlobalVariable,
     NumberAnyVariable,
-} from '@/schema/dashboard/_types/dashboard-global-variable-type';
+} from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
+import { useProxyValue } from '@/common/composables/proxy-state';
+
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 interface Props {
     variable: DashboardGlobalVariable;
+    vars?: DashboardVars;
 }
 
 
 const props = defineProps<Props>();
+const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 
 const state = reactive({
     variable: computed(() => {
@@ -34,6 +42,7 @@ const state = reactive({
     min: computed<number>(() => parseFloat(state.variable.options.min)),
     max: computed<number>(() => parseFloat(state.variable.options.max)),
     value: undefined as number|undefined,
+    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 const handleUpdateSliderValue = debounce((value: string) => {
@@ -44,25 +53,33 @@ const handleUpdateSliderValue = debounce((value: string) => {
 
 const changeVariables = (changedSelected?: number) => {
     const _key = state.variable.key;
-    const vars = cloneDeep(dashboardDetailState.vars);
+    const vars = cloneDeep(props.vars ?? {});
     if (changedSelected !== undefined) {
         vars[_key] = changedSelected;
     } else {
         delete vars[_key];
     }
-    dashboardDetailStore.setVars(vars);
+    state.proxyVars = vars;
 };
 
-watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, (varsSchema, prevVarsSchema) => {
+watch(() => dashboard.value?.vars_schema?.properties, (varsSchema, prevVarsSchema) => {
+    if (!varsSchema) return;
     const _variable = props.variable as NumberAnyVariable;
     if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[varsSchema[_variable.key]])) return;
 
-    state.value = dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key] || _variable.options.min;
+    state.value = dashboard.value?.vars?.[_variable.key] || _variable.options.min;
     changeVariables(state.value);
-
-    state.keyword = dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key] || _variable.options.min;
 }, { immediate: true });
 
+// for reset
+watch(() => props.vars, (_vars) => {
+    const _variable = props.variable as NumberAnyVariable;
+    const tempVarsValue = _vars?.[_variable.key] as number|undefined;
+    if (state.value !== parseFloat(tempVarsValue)) {
+        state.value = parseFloat(tempVarsValue);
+    }
+});
+
 </script>
 
 <template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue
index b5de0f4829..8867ca6af3 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue
@@ -3,7 +3,9 @@
 
 import { computed, reactive, watch } from 'vue';
 
-import { cloneDeep, flattenDeep, isEqual } from 'lodash';
+import {
+    cloneDeep, flattenDeep, isEqual, xor,
+} from 'lodash';
 
 import { PSelectDropdown } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
@@ -12,7 +14,8 @@ import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dro
 import type {
     DashboardGlobalVariable,
     ReferenceVariable,
-} from '@/schema/dashboard/_types/dashboard-global-variable-type';
+} from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
@@ -29,22 +32,28 @@ import {
     getVariableModelMenuHandler,
 } from '@/lib/variable-models/variable-model-menu-handler';
 
+import { useProxyValue } from '@/common/composables/proxy-state';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
 import { getWorkspaceInfo } from '@/services/advanced/composables/refined-table-data';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 interface Props {
     variable: DashboardGlobalVariable;
+    vars?: DashboardVars;
 }
 
 
 const props = defineProps<Props>();
+const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const userWorkspaceStore = useUserWorkspaceStore();
 const workspaceStoreGetters = userWorkspaceStore.getters;
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 
 const storeState = reactive({
     workspaceList: computed<WorkspaceModel[]>(() => workspaceStoreGetters.workspaceList),
@@ -82,6 +91,7 @@ const state = reactive({
         return getVariableModelMenuHandler([variableModelInfo], listQueryOptions);
     }),
     selected: [] as MenuItem[],
+    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 // event
@@ -92,7 +102,7 @@ const handleSelectOption = () => {
 // helper
 const changeVariables = (changedSelected: MenuItem[]) => {
     const _key = state.variable.key;
-    const vars = cloneDeep(dashboardDetailState.vars);
+    const vars = cloneDeep(props.vars ?? {});
     const reconvertedSelected = changedSelected.map((d) => d.name) as string[];
     if (reconvertedSelected.length === 0) {
         delete vars[_key];
@@ -101,7 +111,7 @@ const changeVariables = (changedSelected: MenuItem[]) => {
     } else {
         vars[_key] = reconvertedSelected[0];
     }
-    dashboardDetailStore.setVars(vars);
+    state.proxyVars = vars;
 };
 
 const loadOptionItems = async (selectedValues?: string[]): Promise<MenuItem[]> => {
@@ -116,8 +126,7 @@ const loadOptionItems = async (selectedValues?: string[]): Promise<MenuItem[]> =
     foundItems = foundItems.concat(results);
     return foundItems;
 };
-const initVariableAndSelected = async () => {
-    const items = await loadOptionItems();
+const initVariableAndSelected = (items: MenuItem[]) => {
     const found = items[0];
     if (found) {
         state.selected = [found];
@@ -133,15 +142,16 @@ const initSelected = async (value: any) => {
     if (selectedItems.length) {
         state.selected = selectedItems;
     } else {
-        await initVariableAndSelected();
+        initVariableAndSelected(items);
     }
 };
 
-watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, async (varsSchema, prevVarsSchema) => {
+watch(() => dashboard.value?.vars_schema?.properties, async (varsSchema, prevVarsSchema) => {
+    if (!varsSchema) return;
     const _variable = props.variable as ReferenceVariable;
     if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[varsSchema[_variable.key]])) return;
 
-    const value = dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key];
+    const value = dashboard.value?.vars?.[_variable.key];
     if (value) {
         await initSelected(value);
     } else {
@@ -150,6 +160,18 @@ watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, async (varsSch
 }, { immediate: true });
 
 
+// for reset
+watch(() => props.vars, (_vars) => {
+    const selectedValues = state.selected.map((d) => d.name);
+    const _variable = props.variable as ReferenceVariable;
+    const tempVarsValue = flattenDeep([(_vars?.[_variable.key] as string|string[]|undefined) ?? []]);
+    const isNotSame = xor(selectedValues, tempVarsValue).length > 0;
+    if (isNotSame) {
+        initSelected(_vars?.[state.variable.key]);
+    }
+});
+
+
 </script>
 
 <template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue
index 069aa3f228..5f205710bf 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue
@@ -12,20 +12,27 @@ import type { InputItem } from '@cloudforet/mirinae/src/controls/input/text-inpu
 import type {
     DashboardGlobalVariable,
     TextAnyVariable,
-} from '@/schema/dashboard/_types/dashboard-global-variable-type';
+} from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
+import { useProxyValue } from '@/common/composables/proxy-state';
+
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 interface Props {
     variable: DashboardGlobalVariable;
+    vars?: DashboardVars;
 }
 
 
 const props = defineProps<Props>();
+const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
-
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 const state = reactive({
     variable: computed(() => {
         const anyTextVariable = props.variable as TextAnyVariable;
@@ -34,6 +41,7 @@ const state = reactive({
     value: undefined as string|undefined,
     editMode: false,
     keyword: '',
+    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 const handleDeleteTextValue = () => {
@@ -58,23 +66,33 @@ const handleClickDoneButton = () => {
 
 const changeVariables = (changedSelected?: string) => {
     const _key = state.variable.key;
-    const vars = cloneDeep(dashboardDetailState.vars);
+    const vars = cloneDeep(props.vars ?? {});
     if (changedSelected) {
         vars[_key] = changedSelected;
     } else {
         delete vars[_key];
     }
-    dashboardDetailStore.setVars(vars);
+    state.proxyVars = vars;
 };
 
 // set default value
-watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, (varsSchema, prevVarsSchema) => {
+watch(() => dashboard.value?.vars_schema?.properties, (varsSchema, prevVarsSchema) => {
+    if (!varsSchema) return;
     const _variable = props.variable as TextAnyVariable;
     if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[_variable.key])) return;
-    state.value = dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key] || _variable.options?.defaultValue;
+    state.value = dashboard.value?.vars?.[_variable.key] || _variable.options?.defaultValue;
     changeVariables(state.value);
 }, { immediate: true });
 
+// for reset
+watch(() => props.vars, (_vars) => {
+    const _variable = props.variable as TextAnyVariable;
+    const tempVarsValue = _vars?.[_variable.key] as string|undefined;
+    if (state.value !== tempVarsValue) {
+        state.value = tempVarsValue;
+    }
+});
+
 </script>
 
 <template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue
index c8098a248d..6d651cdbc1 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue
@@ -2,6 +2,7 @@
 // CAUTION: this vOnClickOutside is using !! Please do not remove.
 import { vOnClickOutside } from '@vueuse/components';
 import {
+    computed,
     reactive, watch,
 } from 'vue';
 
@@ -13,6 +14,7 @@ import { i18n } from '@/translations';
 
 import { useFormValidator } from '@/common/composables/form-validator';
 
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
@@ -40,7 +42,11 @@ const {
 });
 
 const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailGetters = dashboardDetailStore.getters;
+const dashboardDetailState = dashboardDetailStore.state;
+
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 
 const state = reactive({
     labelList: [] as string[],
@@ -67,7 +73,8 @@ const handleDelete = (index: number) => {
     emit('update-labels', state.labelList);
 };
 
-watch(() => dashboardDetailGetters.dashboardLabels, (val) => {
+watch(() => dashboard.value?.labels, (val) => {
+    if (!val) return;
     state.labelList = val;
 }, { immediate: true });
 </script>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue
index 55ed40b7fc..e9427d48f6 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core';
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
 
 import { PButton, PBadge, PPopover } from '@cloudforet/mirinae';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import DashboardLabels from '@/services/dashboards/components/dashboard-detail/DashboardLabels.vue';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 
 
 
@@ -18,26 +22,47 @@ interface Props {
 }
 const props = defineProps<Props>();
 
-const dashboardStore = useDashboardStore();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailGetters = dashboardDetailStore.getters;
 const labelPopoverRef = ref<HTMLElement|null>(null);
 
+/* Query */
+const {
+    dashboard,
+    fetcher,
+    keys,
+    queryClient,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => props.dashboardId),
+});
+const { isManageable } = useDashboardManageable({
+    dashboardId: computed(() => props.dashboardId),
+});
 const state = reactive({
     visible: false,
+    dashboardLabels: computed<string[]>(() => dashboard.value?.labels || []),
+    isDeprecatedDashboard: computed(() => dashboard.value?.version === '1.0'),
 });
 
 const handleUpdateLabels = async (labels: string[]) => {
-    try {
-        await dashboardStore.updateDashboard(props.dashboardId, {
-            dashboard_id: props.dashboardId,
-            labels,
-        });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    }
+    mutate({
+        dashboard_id: props.dashboardId,
+        labels,
+    });
 };
 
+const { mutate } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+        },
+        onError: (e) => {
+            ErrorHandler.handleError(e);
+        },
+    },
+);
+
 onClickOutside(labelPopoverRef, () => { state.visible = false; });
 </script>
 
@@ -55,17 +80,17 @@ onClickOutside(labelPopoverRef, () => { state.visible = false; });
             >
                 <div class="button-contents-wrapper">
                     <span class="button-text">{{ $t('Label') }}</span>
-                    <p-badge v-if="dashboardDetailGetters.dashboardLabels.length > 0"
+                    <p-badge v-if="state.dashboardLabels.length > 0"
                              style-type="gray200"
                              badge-type="subtle"
                     >
-                        +{{ dashboardDetailGetters.dashboardLabels.length }}
+                        +{{ state.dashboardLabels.length }}
                     </p-badge>
                 </div>
             </p-button>
             <template #content>
                 <div class="content-wrapper">
-                    <dashboard-labels :editable="!dashboardDetailGetters.isDeprecatedDashboard && !dashboardDetailGetters.disableManageButtons"
+                    <dashboard-labels :editable="!state.isDeprecatedDashboard && isManageable"
                                       @update-labels="handleUpdateLabels"
                     />
                 </div>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
index ef03196b91..5b7a35b2eb 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
 
 import {
     PButton, PButtonModal, PCheckbox, PSearch, PScopedNotification,
 } from '@cloudforet/mirinae';
 
-import type { DashboardGlobalVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
-import type { PrivateDashboardModel } from '@/schema/dashboard/private-dashboard/model';
-import type { PublicDashboardModel } from '@/schema/dashboard/public-dashboard/model';
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { i18n } from '@/translations';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
+import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -23,33 +24,59 @@ import LSBCollapsibleMenuItem from '@/common/modules/navigations/lsb/modules/LSB
 
 import DashboardManageVariableImportModalTree
     from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
-import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
 
 
 interface Props {
     visible: boolean;
 }
-const dashboardStore = useDashboardStore();
-const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
+const appContextStore = useAppContextStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
 const userStore = useUserStore();
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:visible', value: boolean): void;}>();
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    publicFolderList,
+    privateFolderList,
+} = useDashboardQuery();
+const {
+    dashboard,
+    fetcher,
+    keys,
+    queryClient,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
+
+const storeState = reactive({
+    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
+});
 
 const state = reactive({
     proxyVisible: useProxyValue<boolean>('visible', props, emit),
     currentDashboardId: computed<string>(() => dashboardDetailState.dashboardId || ''),
-    currentDashboardVariables: computed<DashboardGlobalVariable[]>(() => Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties)),
+    currentDashboardVariables: computed<DashboardGlobalVariable[]>(() => Object.values(dashboard.value?.vars_schema?.properties ?? {})),
     keyword: '',
     selectedDashboardId: '' as string|undefined,
-    publicDashboardItems: computed<PublicDashboardModel[]>(() => dashboardPageControlGetters.publicDashboardItems.filter((item) => item.dashboard_id !== state.currentDashboardId)),
-    privateDashboardItems: computed<PrivateDashboardModel[]>(() => dashboardPageControlGetters.privateDashboardItems.filter((item) => item.dashboard_id !== state.currentDashboardId)),
+    publicDashboardItems: computed<PublicDashboardModel[]>(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0' && d.dashboard_id !== state.currentDashboardId);
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed<PrivateDashboardModel[]>(() => privateDashboardList.value.filter((d) => d.version !== '1.0' && d.dashboard_id !== state.currentDashboardId)),
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
     allDashboardItems: computed<PrivateDashboardModel[]>(() => [...state.publicDashboardItems, ...state.privateDashboardItems]),
     selectedDashboardVariables: computed<DashboardGlobalVariable[]>(() => {
         const selectedDashboard = state.allDashboardItems.find((item) => item.dashboard_id === state.selectedDashboardId);
@@ -68,30 +95,23 @@ const state = reactive({
 
 
 /* Api */
-const updateUseDashboardVarsSchema = async (dashboardId: string) => {
-    try {
-        const _dashboardVarsSchemaProperties = cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties);
-        state.selectedDashboardVariables
-            .filter((variable) => state.selectedVariableKeys.includes(variable.key))
-            .forEach((variable) => {
-                _dashboardVarsSchemaProperties[variable.key] = {
-                    ...variable,
-                    use: false,
-                    created_by: userStore.state.userId,
-                };
-            });
-        await dashboardStore.updateDashboard(dashboardId, {
-            dashboard_id: dashboardId,
-            vars_schema: {
-                properties: _dashboardVarsSchemaProperties,
-            },
-        });
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_UPDATE_DASHBOARD_VARS_SCHEMA'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA'));
-    }
-};
-
+const { mutate } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+            showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_UPDATE_DASHBOARD_VARS_SCHEMA'), '');
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA'));
+        },
+        onSettled() {
+            state.proxyVisible = false;
+        },
+    },
+);
 
 /* Event */
 const handleChangeSelectedVariableKeys = (selected: string[]) => {
@@ -103,12 +123,25 @@ const handleChangeAllSelectedVariables = (selected: boolean) => {
 const handleClickClearAll = () => {
     state.selectedVariableKeys = [];
 };
-const handleConfirmImportVariables = async () => {
-    await updateUseDashboardVarsSchema(state.currentDashboardId);
-    state.proxyVisible = false;
+const handleConfirmImportVariables = () => {
+    const _dashboardVarsSchemaProperties = cloneDeep(dashboard.value?.vars_schema?.properties ?? {});
+    state.selectedDashboardVariables
+        .filter((variable) => state.selectedVariableKeys.includes(variable.key))
+        .forEach((variable) => {
+            _dashboardVarsSchemaProperties[variable.key] = {
+                ...variable,
+                use: false,
+                created_by: userStore.state.userId,
+            };
+        });
+    mutate({
+        dashboard_id: state.currentDashboardId,
+        vars_schema: {
+            properties: _dashboardVarsSchemaProperties,
+        },
+    });
 };
 
-
 const isDuplicatedVariableName = (variable: DashboardGlobalVariable): boolean => state.currentDashboardVariables.some((currentVariable) => currentVariable.name === variable.name
     || currentVariable.key === variable.key);
 
@@ -135,7 +168,7 @@ watch(() => state.selectedDashboardId, () => {
         <template #body>
             <div class="import-contents">
                 <div class="left-dashboard-variable-tree-contents">
-                    <l-s-b-collapsible-menu-item v-if="state.publicDashboardItems.length || dashboardPageControlGetters.publicFolderItems.length"
+                    <l-s-b-collapsible-menu-item v-if="state.publicDashboardItems.length || publicFolderItems.length"
                                                  class="category-menu-item mt-1"
                                                  :item="{
                                                      type: 'collapsible',
@@ -148,11 +181,12 @@ watch(() => state.selectedDashboardId, () => {
                         <template #collapsible-contents>
                             <dashboard-manage-variable-import-modal-tree type="PUBLIC"
                                                                          :dashboards="state.publicDashboardItems"
+                                                                         :folders="state.publicFolderItems"
                                                                          :selected.sync="state.selectedDashboardId"
                             />
                         </template>
                     </l-s-b-collapsible-menu-item>
-                    <l-s-b-collapsible-menu-item v-if="state.privateDashboardItems.length || dashboardPageControlGetters.privateFolderItems.length"
+                    <l-s-b-collapsible-menu-item v-if="state.privateDashboardItems.length || privateFolderItems.length"
                                                  class="category-menu-item mt-1"
                                                  :item="{
                                                      type: 'collapsible',
@@ -165,6 +199,7 @@ watch(() => state.selectedDashboardId, () => {
                         <template #collapsible-contents>
                             <dashboard-manage-variable-import-modal-tree type="PRIVATE"
                                                                          :dashboards="state.privateDashboardItems"
+                                                                         :folders="state.privateFolderItems"
                                                                          :selected.sync="state.selectedDashboardId"
                             />
                         </template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue
index bcf70e79dc..2f187099ae 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue
@@ -7,20 +7,21 @@ import { PI, PTreeView } from '@cloudforet/mirinae';
 import type { TreeNode } from '@cloudforet/mirinae/src/data-display/tree/tree-view/type';
 import type { TreeDisplayMap } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
 
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { gray } from '@/styles/colors';
 
 import { getDashboardTreeData } from '@/services/dashboards/helpers/dashboard-tree-data-helper';
-import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardTreeDataType } from '@/services/dashboards/types/dashboard-folder-type';
 
 
 
 interface Props {
     dashboards: DashboardModel[];
+    folders: FolderModel[];
     type: 'PRIVATE' | 'PUBLIC';
     selected: string|undefined;
 }
@@ -31,19 +32,12 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits<{e: 'update:selected', value: string|undefined}>();
 
-const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
 
 const state = reactive({
     currentParentPathIds: [] as string[],
     currentFolderId: undefined as string|undefined,
     treeDisplayMap: {} as TreeDisplayMap,
-    dashboardTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => {
-        if (props.type === 'PRIVATE') {
-            return getDashboardTreeData(dashboardPageControlGetters.privateFolderItems, props.dashboards);
-        }
-        return getDashboardTreeData(dashboardPageControlGetters.publicFolderItems, props.dashboards);
-    }),
+    dashboardTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => getDashboardTreeData(props.folders, props.dashboards)),
     proxySelected: useProxyValue<string|undefined>('selected', props, emit),
 });
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
index 29c5965b46..a663dfd361 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
@@ -2,6 +2,7 @@
 import { computed, reactive } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
+import { useMutation } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
 
 import {
@@ -10,11 +11,14 @@ import {
 import type { DataTableField } from '@cloudforet/mirinae/src/data-display/tables/data-table/type';
 import { getClonedName } from '@cloudforet/utils';
 
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type {
+    DashboardGlobalVariableSchemaProperties,
+    DashboardModel,
+} from '@/api-clients/dashboard/_types/dashboard-type';
 import { SpaceRouter } from '@/router';
-import type { DashboardGlobalVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
 import { i18n } from '@/translations';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -27,6 +31,7 @@ import DashboardManageVariableImportModal
     from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue';
 import DashboardVariablesFormModal
     from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
 } from '@/services/dashboards/constants/dashboard-vars-schema-preset';
@@ -48,12 +53,21 @@ interface Props {
     visible: boolean;
 }
 const props = defineProps<Props>();
-const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
 const userStore = useUserStore();
 
+/* Query */
+const {
+    dashboard,
+    keys,
+    fetcher,
+    queryClient,
+    isLoading,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
+
 const { getProperRouteLocation } = useProperRouteLocation();
 const state = reactive({
     selectedVariableKey: undefined as string|undefined,
@@ -65,8 +79,9 @@ const state = reactive({
     thisPage: 1,
     pageSize: 15,
     searchText: '',
+    dashboardVarsSchemaProperties: computed<DashboardGlobalVariableSchemaProperties>(() => dashboard.value?.vars_schema?.properties ?? {}),
     globalVariablesTableItems: computed<GlobalVariableTableItem[]>(() => {
-        const _properties: DashboardGlobalVariable[] = Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties);
+        const _properties: DashboardGlobalVariable[] = Object.values(state.dashboardVarsSchemaProperties);
         const _orderedProperties = getOrderedGlobalVariables(_properties);
         return _orderedProperties.map((d) => ({
             ...d,
@@ -88,9 +103,20 @@ const state = reactive({
         { name: 'buttons', label: ' ', width: '144px' },
     ] as DataTableField[],
     showDeleteWarning: computed<boolean>(() => {
-        const _varsKeys = Object.keys(dashboardDetailGetters.dashboardInfo?.vars || {});
+        const _varsKeys = Object.keys(dashboard.value?.vars || {});
         return _varsKeys.includes(state.selectedVariableKey);
     }),
+    actionType: 'DELETE' as 'DELETE'|'CLONE'|'UPDATE',
+    successMessage: computed(() => {
+        if (state.updateType === 'DELETE') return i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_DELETE_DASHBOARD_VARS_SCHEMA');
+        if (state.updateType === 'CLONE') return i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_CLONE_DASHBOARD_VARS_SCHEMA');
+        return i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_UPDATE_DASHBOARD_VARS_SCHEMA');
+    }),
+    failMessage: computed(() => {
+        if (state.updateType === 'DELETE') return i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_DELETE_DASHBOARD_VARS_SCHEMA');
+        if (state.updateType === 'CLONE') return i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_CLONE_DASHBOARD_VARS_SCHEMA');
+        return i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA');
+    }),
 });
 
 /* Util */
@@ -106,77 +132,81 @@ const isPresetVarsSchemaProperty = (key: string): boolean => {
 
 /* Api */
 const deleteDashboardVarsSchema = async (dashboardId: string, variableKey: string) => {
-    try {
-        const _varsSchemaProperties = cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties);
-        delete _varsSchemaProperties[variableKey];
-        const _vars = cloneDeep(dashboardDetailGetters.dashboardInfo?.vars || {});
-        const _tempVars = cloneDeep(dashboardDetailState.vars);
-        delete _vars[variableKey];
-        delete _tempVars[variableKey];
-        dashboardDetailStore.setVars(_tempVars);
-        await dashboardStore.updateDashboard(dashboardId, {
-            dashboard_id: dashboardId,
-            vars_schema: {
-                properties: _varsSchemaProperties,
-            },
-            vars: _vars,
-        });
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_DELETE_DASHBOARD_VARS_SCHEMA'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_DELETE_DASHBOARD_VARS_SCHEMA'));
-    }
+    const _varsSchemaProperties = cloneDeep(state.dashboardVarsSchemaProperties);
+    delete _varsSchemaProperties[variableKey];
+    const _vars = cloneDeep(dashboard.value?.vars || {});
+    delete _vars[variableKey];
+    mutate({
+        dashboard_id: dashboardId,
+        vars_schema: {
+            properties: _varsSchemaProperties,
+        },
+        vars: _vars,
+    });
 };
 const cloneDashboardVarsSchema = async (dashboardId: string, variableKey: string) => {
-    try {
-        const _clonedProperty = cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties[variableKey]);
-        const _varsNameList: string[] = Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties).map((d) => d.name);
-        const _varsKeyList: string[] = Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties).map((d) => d.key);
-        _clonedProperty.key = getClonedName(_varsKeyList, _clonedProperty.key, 'clone_');
-        _clonedProperty.name = getClonedName(_varsNameList, _clonedProperty.name);
-        await dashboardStore.updateDashboard(dashboardId, {
-            dashboard_id: dashboardId,
-            vars_schema: {
-                properties: {
-                    ...dashboardDetailGetters.dashboardVarsSchemaProperties,
-                    [_clonedProperty.key]: {
-                        ..._clonedProperty,
-                        use: false,
-                        created_by: userStore.state.userId,
-                    },
+    const _clonedProperty = cloneDeep(state.dashboardVarsSchemaProperties[variableKey]);
+    const _varsNameList: string[] = Object.values(state.dashboardVarsSchemaProperties).map((d) => d.name);
+    const _varsKeyList: string[] = Object.values(state.dashboardVarsSchemaProperties).map((d) => d.key);
+    _clonedProperty.key = getClonedName(_varsKeyList, _clonedProperty.key, 'clone_');
+    _clonedProperty.name = getClonedName(_varsNameList, _clonedProperty.name);
+    mutate({
+        dashboard_id: dashboardId,
+        vars_schema: {
+            properties: {
+                ...state.dashboardVarsSchemaProperties,
+                [_clonedProperty.key]: {
+                    ..._clonedProperty,
+                    use: false,
+                    created_by: userStore.state.userId,
                 },
             },
-        });
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_CLONE_DASHBOARD_VARS_SCHEMA'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_CLONE_DASHBOARD_VARS_SCHEMA'));
-    }
+        },
+    });
 };
-const updateUseDashboardVarsSchema = async (dashboardId: string, variableKey: string, use: boolean) => {
-    try {
-        const _vars = cloneDeep(dashboardDetailGetters.dashboardInfo?.vars || {});
-        const _tempVars = cloneDeep(dashboardDetailState.vars);
-        delete _vars[variableKey];
-        delete _tempVars[variableKey];
-        await dashboardStore.updateDashboard(dashboardId, {
-            dashboard_id: dashboardId,
-            vars_schema: {
-                properties: {
-                    ...dashboardDetailGetters.dashboardVarsSchemaProperties,
-                    [variableKey]: {
-                        ...dashboardDetailGetters.dashboardVarsSchemaProperties[variableKey],
-                        use,
-                    },
+const updateUseDashboardVarsSchema = (dashboardId: string, variableKey: string, use: boolean) => {
+    const _vars = cloneDeep(dashboard.value?.vars || {});
+    delete _vars[variableKey];
+    mutate({
+        dashboard_id: dashboardId,
+        vars_schema: {
+            properties: {
+                ...state.dashboardVarsSchemaProperties,
+                [variableKey]: {
+                    ...state.dashboardVarsSchemaProperties[variableKey],
+                    use,
                 },
             },
-            vars: _vars,
-        });
-        dashboardDetailStore.setVars(_tempVars);
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_UPDATE_DASHBOARD_VARS_SCHEMA'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA'));
-    }
+        },
+        vars: _vars,
+    });
 };
 
+const { mutate } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: DashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            queryClient.setQueryData(dashboardQueryKey.value, (oldDashboard) => {
+                if (!oldDashboard) return oldDashboard;
+                return {
+                    ...oldDashboard,
+                    vars_schema: _dashboard.vars_schema,
+                    vars: _dashboard.vars,
+                };
+            });
+            showSuccessMessage(state.successMessage, '');
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, state.failMessage);
+        },
+        onSettled() {
+            if (state.actionType === 'DELETE') state.deleteModalVisible = false;
+        },
+    },
+);
+
 /* Event */
 const handleClickCreateButton = () => {
     state.modalType = 'CREATE';
@@ -196,10 +226,12 @@ const handleClickEditButton = (variableKey: string) => {
 };
 const handleClickCloneButton = (variableKey: string) => {
     if (!dashboardDetailState.dashboardId) return;
+    state.actionType = 'CLONE';
     cloneDashboardVarsSchema(dashboardDetailState.dashboardId, variableKey);
 };
 const handleToggleUse = (variableKey: string, val: boolean) => {
     if (!dashboardDetailState.dashboardId) return;
+    state.actionType = 'UPDATE';
     updateUseDashboardVarsSchema(dashboardDetailState.dashboardId, variableKey, val);
 };
 const handleCloseOverlay = () => {
@@ -210,8 +242,8 @@ const handleCloseOverlay = () => {
 };
 const handleConfirmDelete = () => {
     if (!dashboardDetailState.dashboardId || !state.selectedVariableKey) return;
+    state.actionType = 'DELETE';
     deleteDashboardVarsSchema(dashboardDetailState.dashboardId, state.selectedVariableKey);
-    state.deleteModalVisible = false;
 };
 </script>
 
@@ -224,7 +256,7 @@ const handleConfirmDelete = () => {
                       @close="handleCloseOverlay"
     >
         <p-toolbox-table :fields="state.variableFields"
-                         :loading="dashboardDetailState.loadingDashboard"
+                         :loading="isLoading"
                          :items="getSlicedVariableItems(state.searchedGlobalVariablesTableItems, state.thisPage, state.pageSize)"
                          :page-size-options="[15, 30, 45]"
                          :page-size.sync="state.pageSize"
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue
index 82bb72b98f..7a11e2ef74 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue
@@ -2,19 +2,24 @@
 import {
     computed, reactive, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import { useMutation } from '@tanstack/vue-query';
 
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
+import { useAppContextStore } from '@/store/app-context/app-context-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+
 
 
 interface Props {
@@ -29,9 +34,22 @@ const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
     (e: 'confirm', value: string): void;
 }>();
 
-const dashboardStore = useDashboardStore();
-const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    keys,
+    queryClient,
+} = useDashboardQuery();
+const {
+    fetcher,
+    keys: dashboardDetailKeys,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => props.dashboardId),
+});
+const route = useRoute();
+
+const appContextStore = useAppContextStore();
 const {
     forms: {
         _name,
@@ -44,7 +62,7 @@ const {
     _name: '',
 }, {
     _name(value: string) {
-        if (state.loading) return '';
+        if (loading.value) return '';
         if (value === state.originName) return '';
         if (value.length > 100) return i18n.t('DASHBOARDS.FORM.VALIDATION_DASHBOARD_NAME_LENGTH');
         if (!value.trim().length) return i18n.t('DASHBOARDS.FORM.VALIDATION_DASHBOARD_NAME_INPUT');
@@ -52,38 +70,57 @@ const {
         return '';
     },
 });
+const storeState = reactive({
+    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
+});
 const state = reactive({
-    loading: false,
     proxyVisible: useProxyValue('visible', props, emit),
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
     originName: computed<string>(() => {
-        const _dashboard = dashboardPageControlGetters.allDashboardItems.find((item: DashboardModel) => item.dashboard_id === props.dashboardId);
+        const _dashboard = [...state.publicDashboardItems, ...state.privateDashboardItems].find((item: DashboardModel) => item.dashboard_id === props.dashboardId);
         return _dashboard?.name || '';
     }),
     dashboardNameList: computed<string[]>(() => {
-        if (props.dashboardId.startsWith('private')) return dashboardPageControlGetters.privateDashboardItems.map((d) => d.name);
-        return dashboardPageControlGetters.publicDashboardItems.map((d) => d.name);
+        if (props.dashboardId.startsWith('private')) return state.privateDashboardItems.map((d) => d.name);
+        return state.publicDashboardItems.map((d) => d.name);
     }),
+    isDetailPage: computed(() => route.params.dashboardId !== undefined),
 });
 
-const updateDashboard = async () => {
-    try {
-        await dashboardStore.updateDashboard(props.dashboardId, {
-            dashboard_id: props.dashboardId,
-            name: _name.value,
-        });
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.FORM.ALT_E_EDIT_NAME'));
-    }
-};
+const { mutate, isPending: loading } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: DashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
+            if (state.isDetailPage) {
+                const dashboardQueryKey = isPrivate ? dashboardDetailKeys.privateDashboardQueryKey : dashboardDetailKeys.publicDashboardQueryKey;
+                queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+            }
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.FORM.ALT_E_EDIT_NAME'));
+        },
+        onSettled() {
+            state.proxyVisible = false;
+        },
+    },
+);
 
 const handleConfirm = async () => {
-    state.loading = true;
-    await updateDashboard();
-    state.proxyVisible = false;
-    state.loading = false;
+    mutate({
+        dashboard_id: props.dashboardId,
+        name: _name.value,
+    });
 };
 
-const handleUpdateVisible = (visible) => {
+const handleUpdateVisible = (visible: boolean) => {
     state.proxyVisible = visible;
 };
 
@@ -103,8 +140,8 @@ watch(() => props.visible, (visible) => {
     >
         <template #body>
             <p-field-group :label="$t('DASHBOARDS.FORM.LABEL_DASHBOARD_NAME')"
-                           :invalid="!state.loading && invalidState._name"
-                           :invalid-text="state.loading ? '' : invalidTexts._name"
+                           :invalid="!loading && invalidState._name"
+                           :invalid-text="loading ? '' : invalidTexts._name"
                            required
             >
                 <template #default="{invalid}">
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue
index 155c97c610..58f26d30bb 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue
@@ -5,17 +5,22 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
+import { useMutation } from '@tanstack/vue-query';
+
 import { PIconButton, PSelectDropdown } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import { REFRESH_INTERVAL_OPTIONS_MAP } from '@/schema/dashboard/_constants/dashboard-constant';
-import type { RefreshIntervalOption } from '@/schema/dashboard/_types/dashboard-type';
+import { REFRESH_INTERVAL_OPTIONS_MAP } from '@/api-clients/dashboard/_constants/dashboard-constant';
+import type { RefreshIntervalOption } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { i18n } from '@/translations';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
-
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
+
 const REFRESH_INTERVAL_OPTIONS = Object.keys(REFRESH_INTERVAL_OPTIONS_MAP);
 
 interface Props {
@@ -31,10 +36,18 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{(e: 'refresh'): void;
 }>();
 
-const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
+
+/* Query */
+const {
+    dashboard, keys, fetcher, queryClient,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => props.dashboardId),
+});
+const { isManageable } = useDashboardManageable({
+    dashboardId: computed(() => props.dashboardId),
+});
 
 const state = reactive({
     intervalOptionList: computed<{label: TranslateResult; value: RefreshIntervalOption}[]>(() => [
@@ -90,16 +103,28 @@ const handleSelectRefreshIntervalOption = (option) => {
     clearRefreshInterval();
     executeRefreshInterval();
 
-    if (!dashboardDetailGetters.disableManageButtons) {
-        dashboardStore.updateDashboard(dashboardDetailState.dashboardId, {
+    if (isManageable.value) {
+        mutate({
+            dashboard_id: dashboardDetailState.dashboardId,
             options: {
-                ...dashboardDetailGetters.dashboardInfo?.options || {},
+                ...(dashboard.value?.options || {}),
                 refresh_interval_option: option,
             },
         });
     }
 };
 
+const { mutate } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+        },
+    },
+);
+
 watch([() => props.dashboardId, () => props.loading], ([dashboardId, loading], prev) => {
     if (!dashboardId) {
         clearRefreshInterval();
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue
index 03a9b19d61..31ba786689 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue
@@ -5,35 +5,48 @@ import {
 } from 'vue';
 import draggable from 'vuedraggable';
 
+import { useMutation } from '@tanstack/vue-query';
+
 import {
     PI, PButton,
 } from '@cloudforet/mirinae';
 
-import type { PrivateWidgetModel } from '@/schema/dashboard/private-widget/model';
-import type { PublicWidgetModel } from '@/schema/dashboard/public-widget/model';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useDisplayStore } from '@/store/display/display-store';
 
 import { WIDGET_COMPONENT_ICON_MAP } from '@/common/modules/widgets/_constants/widget-components-constant';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
 
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
 type WidgetModel = PublicWidgetModel | PrivateWidgetModel;
 const displayStore = useDisplayStore();
-const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
+
+/* Query */
+const {
+    dashboard,
+    widgetList,
+    keys,
+    fetcher,
+    queryClient,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 const state = reactive({
     widgetList: computed<WidgetModel[]>(() => {
         const results: WidgetModel[] = [];
-        dashboardDetailGetters.dashboardLayouts.forEach((d) => {
+        dashboard.value?.layouts?.forEach((d) => {
             const _widgetIdList = d.widgets;
             _widgetIdList?.forEach((widgetId) => {
-                const _widget = dashboardDetailState.dashboardWidgets.find((w) => w.widget_id === widgetId);
+                const _widget = widgetList.value.find((w) => w.widget_id === widgetId);
                 const _config = getWidgetConfig(_widget?.widget_type);
                 if (!_widget || !_config) return;
                 results.push(_widget);
@@ -44,20 +57,33 @@ const state = reactive({
 });
 
 /* Event */
-const handleChangeWidgetOrder = async () => {
+const handleChangeWidgetOrder = () => {
     const _widgetIdList = state.widgetList.map((w) => w.widget_id);
     const _updatedLayouts = [{ widgets: _widgetIdList }];
-    await dashboardStore.updateDashboard(dashboardDetailState.dashboardId as string, {
+    updateDashboard({
         dashboard_id: dashboardDetailState.dashboardId || '',
         layouts: _updatedLayouts,
     });
-    dashboardDetailStore.setDashboardWidgets([...dashboardDetailState.dashboardWidgets]);
 };
 const getWidgetDefaultName = (widgetType: string): string => {
     const _config = getWidgetConfig(widgetType);
     return _config?.meta?.title || widgetType;
 };
 
+const { mutate: updateDashboard } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+        },
+        onSettled: () => {
+            // dashboardDetailStore.setDashboardWidgets([...widgetList.value]);
+        },
+    },
+);
+
 watch(() => dashboardDetailState.dashboardId, (after, before) => {
     if (after !== before) {
         displayStore.setVisibleSidebar(false);
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
index b4a41edc95..a76cba3710 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
@@ -1,29 +1,25 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PButtonModal, PCodeEditor, PButton,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
-import type { WidgetModel } from '@/schema/dashboard/_types/widget-type';
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetListParameters } from '@/schema/dashboard/private-widget/api-verbs/list';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetListParameters } from '@/schema/dashboard/public-widget/api-verbs/list';
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 
+import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 
 import { copyAnyData } from '@/lib/helper/copy-helper';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { getSharedDashboardLayouts } from '@/services/dashboards/helpers/dashboard-share-helper';
-import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { SharedDashboardInfo } from '@/services/dashboards/types/shared-dashboard-type';
 
 
@@ -41,38 +37,43 @@ const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
     (e: 'confirm', value: string): void;
 }>();
 
+const appContextStore = useAppContextStore();
 const allReferenceStore = useAllReferenceStore();
-const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
+
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+} = useDashboardQuery();
+const {
+    widgetList,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => props.dashboardId),
+});
+
+const queryState = reactive({
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    allDashboardItems: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
+});
+
 const storeState = reactive({
+    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
 });
 const state = reactive({
     proxyVisible: useProxyValue('visible', props, emit),
-    targetDashboard: computed<DashboardModel>(() => dashboardPageControlGetters.allDashboardItems.find((item: DashboardModel) => item.dashboard_id === props.dashboardId)),
+    targetDashboard: computed<DashboardModel>(() => queryState.allDashboardItems.find((item: DashboardModel) => item.dashboard_id === props.dashboardId)),
     loading: false,
     isCopied: false,
     sharedDashboard: {} as SharedDashboardInfo,
     widgetDataTablesMap: {} as Record<string, DataTableModel[]>,
 });
 
-/* Api */
-const listDashboardWidgets = async (dashboardId: string): Promise<WidgetModel[]> => {
-    try {
-        const isPrivate = dashboardId.startsWith('private');
-        const fetcher = isPrivate
-            ? SpaceConnector.clientV2.dashboard.privateWidget.list
-            : SpaceConnector.clientV2.dashboard.publicWidget.list;
-        const res = await fetcher<PublicWidgetListParameters|PrivateWidgetListParameters, ListResponse<WidgetModel>>({
-            dashboard_id: dashboardId,
-        });
-        return res.results || [];
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        return [];
-    }
-};
-
 /* Event */
 const handleUpdateVisible = (visible: boolean) => {
     state.proxyVisible = visible;
@@ -93,8 +94,7 @@ watch(() => props.visible, async (visible) => {
     if (visible) {
         state.loading = true;
 
-        const _dashboardWidgets = await listDashboardWidgets(props.dashboardId);
-        const _sharedLayouts = await getSharedDashboardLayouts(state.targetDashboard.layouts, _dashboardWidgets, storeState.costDataSource);
+        const _sharedLayouts = await getSharedDashboardLayouts(state.targetDashboard.layouts, widgetList.value, storeState.costDataSource);
         state.sharedDashboard = {
             name: state.targetDashboard.name || '',
             layouts: _sharedLayouts,
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue
index 37bf004a6a..3d9da1bd02 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue
@@ -3,23 +3,25 @@ import {
     computed, reactive, watch,
 } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import { cloneDeep, range } from 'lodash';
 
 import { PSelectDropdown } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { DateRange, DashboardOptions } from '@/schema/dashboard/_types/dashboard-type';
+import type { DateRange, DashboardOptions } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { i18n } from '@/translations';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
-
 import { useI18nDayjs } from '@/common/composables/i18n-dayjs';
 
 import DashboardToolsetDateCustomModal from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateCustomModal.vue';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
-
 interface Props {
     dateRange?: DateRange;
     widgetMode?: boolean; // NOTE: this for widget mode (temporary)
@@ -29,10 +31,21 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const { i18nDayjs } = useI18nDayjs();
-const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
+
+/* Query */
+const {
+    dashboard,
+    fetcher,
+    keys,
+    queryClient,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
+const { isManageable } = useDashboardManageable({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 const state = reactive({
     monthMenuItems: computed<MenuItem[]>(() => {
         const monthData: MenuItem[] = [];
@@ -99,10 +112,11 @@ const handleSelectMonthMenuItem = (selected: string) => {
         updateDashboardDateRange(state.selectedDateRange);
     }
 
-    if (!dashboardDetailGetters.disableManageButtons && !props.widgetMode) {
-        dashboardStore.updateDashboard(dashboardDetailState.dashboardId, {
+    if (isManageable.value && !props.widgetMode) {
+        mutate({
+            dashboard_id: dashboardDetailState.dashboardId,
             options: {
-                ...dashboardDetailGetters.dashboardInfo?.options || {},
+                ...(dashboard.value?.options || {}),
                 date_range: state.selectedDateRange,
             },
         });
@@ -143,6 +157,17 @@ const setInitialDateRange = () => {
     return state.monthMenuItems.length - 1;
 };
 
+const { mutate } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+        },
+    },
+);
+
 watch(() => props.dateRange, () => {
     state.selectedMonthMenuItem = state.monthMenuItems[setInitialDateRange()];
 }, { immediate: true });
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue
index de7da92782..6599b75d4b 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue
@@ -9,7 +9,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem, AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue
index 5b46d8c22c..8482a003e4 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue
@@ -8,7 +8,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { DashboardGlobalVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue
index fce0e3b3e3..bb3bdac49f 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue
@@ -8,7 +8,7 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 
 import type {
     DashboardGlobalVariable, ManualVariable,
-} from '@/schema/dashboard/_types/dashboard-global-variable-type';
+} from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 import { i18n } from '@/translations';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
index d9a93c5d02..f0d832c6c1 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
@@ -1,16 +1,19 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
 import { cloneDeep, isEmpty } from 'lodash';
 
 import {
     PButtonModal, PFieldGroup, PTextInput, PRadioGroup, PRadio, PScopedNotification,
 } from '@cloudforet/mirinae';
 
-import type { DashboardGlobalVariable, ManualVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardGlobalVariable, ManualVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardGlobalVariableSchemaProperties } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { i18n } from '@/translations';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -23,10 +26,9 @@ import DashboardVariablesFormDynamic
     from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue';
 import DashboardVariablesFormManual
     from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
-
-
 type ManualVariableData = Omit<ManualVariable, 'management'|'key'|'name'|'method'>;
 type DynamicVariableData = Omit<DashboardGlobalVariable, 'management'|'key'|'name'|'method'>;
 const METHOD_TYPE = {
@@ -47,13 +49,21 @@ const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
 }>();
 
 const userStore = useUserStore();
-const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
+
+/* Query */
+const {
+    dashboard,
+    fetcher,
+    keys,
+    queryClient,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
+
 const state = reactive({
     proxyVisible: useProxyValue('visible', props, emit),
-    loading: false,
     modalTitle: computed(() => {
         if (props.modalType === 'CREATE') return i18n.t('DASHBOARDS.DETAIL.VARIABLES.CREATE_VARIABLE');
         return i18n.t('DASHBOARDS.DETAIL.VARIABLES.EDIT_VARIABLE');
@@ -63,17 +73,18 @@ const state = reactive({
         if (state.selectedMethod === METHOD_TYPE.MANUAL_ENTRY) return state.isManualFormValid;
         return state.isDynamicFormValid;
     }),
+    dashboardVarsSchemaProperties: computed<DashboardGlobalVariableSchemaProperties>(() => dashboard.value?.vars_schema?.properties || {}),
     targetVariable: computed<DashboardGlobalVariable|undefined>(() => {
         if (props.modalType === 'CREATE' || !props.variableKey || !props.visible) return undefined;
-        return cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties[props.variableKey]);
+        return cloneDeep(state.dashboardVarsSchemaProperties[props.variableKey]);
     }),
     existingVariableNameList: computed<string[]>(() => {
-        const _nameList: string[] = Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties).map((d) => d.name);
+        const _nameList: string[] = Object.values(state.dashboardVarsSchemaProperties).map((d) => d.name);
         if (props.modalType === 'CREATE' || !state.targetVariable) return _nameList;
         return _nameList.filter((d) => d !== state.targetVariable?.name);
     }),
     existingVariableKeyList: computed<string[]>(() => {
-        const _keyList: string[] = Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties).map((d) => d.key);
+        const _keyList: string[] = Object.values(state.dashboardVarsSchemaProperties).map((d) => d.key);
         if (props.modalType === 'CREATE' || !state.targetVariable) return _keyList;
         return _keyList.filter((d) => d !== state.targetVariable?.key);
     }),
@@ -82,7 +93,7 @@ const state = reactive({
     isDynamicFormValid: false,
     showUpdateWarning: computed<boolean>(() => {
         if (props.modalType === 'CREATE') return false;
-        const _varsKeys = Object.keys(dashboardDetailGetters.dashboardInfo?.vars || {});
+        const _varsKeys = Object.keys(dashboard.value?.vars || {});
         return _varsKeys.includes(props.variableKey || '');
     }),
     //
@@ -106,6 +117,14 @@ const state = reactive({
             ...state.dynamicGlobalVariable,
         };
     }),
+    variableFormSuccessMessage: computed(() => {
+        if (props.modalType === 'CREATE') return i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_CREATE_DASHBOARD_VARS_SCHEMA');
+        return i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_UPDATE_DASHBOARD_VARS_SCHEMA');
+    }),
+    variableFormFailMessage: computed(() => {
+        if (props.modalType === 'CREATE') return i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_CREATE_DASHBOARD_VARS_SCHEMA');
+        return i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA');
+    }),
 });
 const {
     forms: { variableName, variableKey },
@@ -119,13 +138,13 @@ const {
     variableKey: undefined as string|undefined,
 }, {
     variableName(value: string) {
-        if (state.loading) return '';
+        if (loading.value) return '';
         if (!value) return i18n.t('DASHBOARDS.DETAIL.VARIABLES.NAME_REQUIRED');
         if (state.existingVariableNameList.find((d) => d === value)) return i18n.t('DASHBOARDS.DETAIL.VARIABLES.NAME_DUPLICATED');
         return '';
     },
     variableKey(value: string) {
-        if (state.loading) return '';
+        if (loading.value) return '';
         if (!value) return i18n.t('DASHBOARDS.DETAIL.VARIABLES.KEY_REQUIRED');
         if (state.existingVariableKeyList.find((d) => d === value)) return i18n.t('DASHBOARDS.DETAIL.VARIABLES.KEY_DUPLICATED');
         const _snakeCaseRegex = RegExp(/^[a-z]+(_[a-z]+)*$/);
@@ -156,66 +175,75 @@ const resetState = () => {
 };
 
 /* Api */
-const createDashboardVarsSchema = async (dashboardId: string) => {
-    try {
-        await dashboardStore.updateDashboard(dashboardId, {
-            dashboard_id: dashboardId,
-            vars_schema: {
-                properties: {
-                    ...dashboardDetailGetters.dashboardVarsSchemaProperties,
-                    [state.dashboardGlobalVariable.key]: {
-                        ...state.dashboardGlobalVariable,
-                        use: true,
-                        created_by: userStore.state.userId,
-                    },
+const createDashboardVarsSchema = (dashboardId: string) => {
+    mutate({
+        dashboard_id: dashboardId,
+        vars_schema: {
+            properties: {
+                ...state.dashboardVarsSchemaProperties,
+                [state.dashboardGlobalVariable.key]: {
+                    ...state.dashboardGlobalVariable,
+                    use: true,
+                    created_by: userStore.state.userId,
                 },
             },
-        });
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_CREATE_DASHBOARD_VARS_SCHEMA'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_CREATE_DASHBOARD_VARS_SCHEMA'));
-    }
+        },
+    });
 };
-const updateDashboardVarsSchema = async (dashboardId: string) => {
-    try {
-        const _originalKey = state.targetVariable?.key;
-        if (!_originalKey) return;
-        const _newVarsSchemaProperties = cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties);
-        delete _newVarsSchemaProperties[_originalKey];
-        _newVarsSchemaProperties[state.dashboardGlobalVariable.key] = {
-            ...state.dashboardGlobalVariable,
-            use: state.targetVariable?.use || false,
-            created_by: state.targetVariable?.created_by,
-        };
-        const _vars = cloneDeep(dashboardDetailGetters.dashboardInfo?.vars || {});
-        const _tempVars = cloneDeep(dashboardDetailState.vars);
-        delete _vars[_originalKey];
-        delete _tempVars[_originalKey];
-        dashboardDetailStore.setVars(_tempVars);
-        await dashboardStore.updateDashboard(dashboardId, {
-            dashboard_id: dashboardId,
-            vars_schema: {
-                properties: _newVarsSchemaProperties,
-            },
-            vars: _vars,
-        });
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_UPDATE_DASHBOARD_VARS_SCHEMA'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA'));
-    }
+const updateDashboardVarsSchema = (dashboardId: string) => {
+    const _originalKey = state.targetVariable?.key;
+    if (!_originalKey) return;
+    const _newVarsSchemaProperties = cloneDeep(state.dashboardVarsSchemaProperties);
+    delete _newVarsSchemaProperties[_originalKey];
+    _newVarsSchemaProperties[state.dashboardGlobalVariable.key] = {
+        ...state.dashboardGlobalVariable,
+        use: state.targetVariable?.use || false,
+        created_by: state.targetVariable?.created_by,
+    };
+    const _vars = cloneDeep(dashboard.value?.vars || {});
+    delete _vars[_originalKey];
+    mutate({
+        dashboard_id: dashboardId,
+        vars_schema: {
+            properties: _newVarsSchemaProperties,
+        },
+        vars: _vars,
+    });
 };
 
+const { mutate, isPending: loading } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            queryClient.setQueryData(dashboardQueryKey.value, (oldDashboard) => {
+                if (!oldDashboard) return oldDashboard;
+                return {
+                    ...oldDashboard,
+                    vars_schema: _dashboard.vars_schema,
+                    vars: _dashboard.vars,
+                };
+            });
+            showSuccessMessage(state.variableFormSuccessMessage, '');
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, state.variableFormFailMessage);
+        },
+        onSettled() {
+            state.proxyVisible = false;
+        },
+    },
+);
+
 /* Event */
 const handleConfirm = async () => {
     if (!dashboardDetailState.dashboardId) return;
-    state.loading = true;
     if (props.modalType === 'CREATE') {
-        await createDashboardVarsSchema(dashboardDetailState.dashboardId);
+        createDashboardVarsSchema(dashboardDetailState.dashboardId);
     } else {
-        await updateDashboardVarsSchema(dashboardDetailState.dashboardId);
+        updateDashboardVarsSchema(dashboardDetailState.dashboardId);
     }
-    state.proxyVisible = false;
-    state.loading = false;
 };
 const handleClickClose = () => {
     state.proxyVisible = false;
@@ -228,7 +256,7 @@ const handleChangeMethod = (method: MethodType) => {
 watch(() => state.proxyVisible, (visible) => {
     if (visible) {
         if (props.modalType === 'UPDATE' && props.variableKey) {
-            const _targetProperty = cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties[props.variableKey]);
+            const _targetProperty = cloneDeep(state.dashboardVarsSchemaProperties[props.variableKey]);
             if (isEmpty(_targetProperty)) return;
             initSelectedVariable(_targetProperty);
         }
@@ -242,7 +270,7 @@ watch(() => state.proxyVisible, (visible) => {
     <p-button-modal :header-title="state.modalTitle"
                     class="notification-email-modal-wrapper"
                     :visible.sync="state.proxyVisible"
-                    :loading="state.loading"
+                    :loading="loading"
                     :disabled="!state.isAllValid"
                     @confirm="handleConfirm"
                     @cancel="handleClickClose"
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
index f8fb2a21b3..9191dc8ea8 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
@@ -6,6 +6,7 @@ import {
 } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
+import { useMutation } from '@tanstack/vue-query';
 import {
     cloneDeep, debounce,
 } from 'lodash';
@@ -13,23 +14,24 @@ import {
 import { PButton, PContextMenu, useContextMenuController } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { DashboardGlobalVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type {
+    DashboardGlobalVariableSchemaProperties,
+    DashboardModel,
+} from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
-
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { MANAGE_VARIABLES_HASH_NAME } from '@/services/dashboards/constants/manage-variable-overlay-constant';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
-
-
 interface VariableMenuItem extends MenuItem {
     use?: boolean;
 }
@@ -40,22 +42,28 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-
-const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
 
 const router = useRouter();
 const { getProperRouteLocation } = useProperRouteLocation();
 
+/* Query */
+const {
+    dashboard,
+    fetcher,
+    keys,
+    queryClient,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 const state = reactive({
     targetRef: null as HTMLElement | null,
     contextMenuRef: null as any | null,
     searchText: '',
-    varsSchemaProperties: computed(() => ({})),
+    dashboardVarsSchemaProperties: computed<DashboardGlobalVariableSchemaProperties>(() => dashboard.value?.vars_schema?.properties || {}),
     variableList: computed<VariableMenuItem[]>(() => {
-        const _refinedProperties: DashboardGlobalVariable[] = Object.values(dashboardDetailGetters.dashboardVarsSchemaProperties);
+        const _refinedProperties: DashboardGlobalVariable[] = Object.values(state.dashboardVarsSchemaProperties);
         const _orderedVariables = getOrderedGlobalVariables(_refinedProperties);
         return _orderedVariables.map((property) => ({
             name: property.key,
@@ -64,6 +72,7 @@ const state = reactive({
         }));
     }),
     selected: computed<VariableMenuItem[]>(() => state.variableList.filter((item) => item.use)),
+    isDeprecatedDashboard: computed(() => dashboard.value?.version === '1.0'),
 });
 
 const {
@@ -89,36 +98,54 @@ const containerRef = ref<HTMLElement|null>(null);
 onClickOutside(containerRef, hideContextMenu);
 
 /* Api */
-const toggleUseDashboardVarsSchema = debounce(async (dashboardId: string, variableKey: string) => {
-    try {
-        const _dashboardVarsSchemaProperties: Record<string, DashboardGlobalVariable> = cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties);
-        const _use = !_dashboardVarsSchemaProperties[variableKey].use;
-        const _vars = cloneDeep(dashboardDetailGetters.dashboardInfo?.vars || {});
-        const _tempVars = cloneDeep(dashboardDetailState.vars);
-        if (!_use) {
-            delete _vars[variableKey];
-            delete _tempVars[variableKey];
-            dashboardDetailStore.setVars(_tempVars);
-        }
-        await dashboardStore.updateDashboard(dashboardId, {
-            dashboard_id: dashboardId,
-            vars_schema: {
-                properties: {
-                    ..._dashboardVarsSchemaProperties,
-                    [variableKey]: {
-                        ..._dashboardVarsSchemaProperties[variableKey],
-                        use: !_dashboardVarsSchemaProperties[variableKey].use,
-                    },
+const toggleUseDashboardVarsSchema = debounce((dashboardId: string, variableKey: string) => {
+    const _dashboardVarsSchemaProperties: Record<string, DashboardGlobalVariable> = cloneDeep(state.dashboardVarsSchemaProperties);
+    const _use = !_dashboardVarsSchemaProperties[variableKey].use;
+    const _vars = cloneDeep(dashboard.value?.vars || {});
+    if (!_use) {
+        delete _vars[variableKey];
+    }
+    mutate({
+        dashboard_id: dashboardId,
+        vars_schema: {
+            properties: {
+                ..._dashboardVarsSchemaProperties,
+                [variableKey]: {
+                    ..._dashboardVarsSchemaProperties[variableKey],
+                    use: !_dashboardVarsSchemaProperties[variableKey].use,
                 },
             },
-            vars: _vars,
-        });
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_UPDATE_DASHBOARD_VARS_SCHEMA'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA'));
-    }
+        },
+        vars: _vars,
+    });
 }, 300);
 
+const { mutate, isPending: loading } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: DashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            queryClient.setQueryData(dashboardQueryKey.value, (oldDashboard) => {
+                if (!oldDashboard) return oldDashboard;
+                return {
+                    ...oldDashboard,
+                    vars_schema: _dashboard.vars_schema,
+                    vars: _dashboard.vars,
+                };
+            });
+            showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_UPDATE_DASHBOARD_VARS_SCHEMA'), '');
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA'));
+        },
+        onSettled() {
+            hideContextMenu();
+            state.searchText = '';
+        },
+    },
+);
+
 /* Event */
 const handleOpenOverlay = () => {
     hideContextMenu();
@@ -132,11 +159,9 @@ const handleClickButton = () => {
     if (visibleMenu.value) hideContextMenu();
     else focusOnContextMenu();
 };
-const handleSelectVariable = async (item: VariableMenuItem) => { // idx, isSelected
-    if (!dashboardDetailState.dashboardId || !item.name) return;
-    await toggleUseDashboardVarsSchema(dashboardDetailState.dashboardId, item.name);
-    hideContextMenu();
-    state.searchText = '';
+const handleSelectVariable = (item: VariableMenuItem) => { // idx, isSelected
+    if (!dashboardDetailState.dashboardId || !item.name || loading.value) return;
+    toggleUseDashboardVarsSchema(dashboardDetailState.dashboardId, item.name);
 };
 const handleUpdateSearchText = debounce((text: string) => {
     state.searchText = text;
@@ -181,7 +206,7 @@ const {
                         @select="handleSelectVariable"
                         @update:search-text="handleUpdateSearchText"
         >
-            <template v-if="!dashboardDetailGetters.isDeprecatedDashboard && !props.widgetMode"
+            <template v-if="!state.isDeprecatedDashboard && !props.widgetMode"
                       #bottom
             >
                 <p-button class="manage-variable-button"
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
index a3b1063860..0fe70a1f96 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { computed, reactive } from 'vue';
+import { computed, reactive, watch } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
 import { isEqual } from 'lodash';
 
 import { PI, PTextButton, PDivider } from '@cloudforet/mirinae';
 
-import type { DashboardGlobalVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
-import type { DashboardVars } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardGlobalVariableSchemaProperties, DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
@@ -18,6 +18,7 @@ import DashboardGlobalVariableFilter
 import DashboardManageVariableOverlay from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue';
 import DashboardVariablesMoreButton
     from '@/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { MANAGE_VARIABLES_HASH_NAME } from '@/services/dashboards/constants/manage-variable-overlay-constant';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
@@ -40,25 +41,33 @@ const emit = defineEmits<{(e: 'update', val: { vars?: DashboardVars }): void;
 const route = useRoute();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
 const appContextStore = useAppContextStore();
-
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 const state = reactive({
     showOverlay: computed(() => route.hash === `#${MANAGE_VARIABLES_HASH_NAME}`),
+    dashboardVarsSchemaProperties: computed<DashboardGlobalVariableSchemaProperties>(() => dashboard.value?.vars_schema?.properties ?? {}),
+    dashboardVars: computed<DashboardVars>(() => dashboard.value?.vars ?? {}),
+    tempVars: undefined as DashboardVars|undefined,
     globalVariables: computed<DashboardGlobalVariable[]>(() => {
-        const properties = dashboardDetailGetters.dashboardVarsSchemaProperties as Record<string, DashboardGlobalVariable>;
+        const properties = state.dashboardVarsSchemaProperties as Record<string, DashboardGlobalVariable>;
         const _usedProperties: DashboardGlobalVariable[] = Object.values(properties).filter((d) => d.use);
+        if (props.isProjectDashboard) {
+            const _usedPropertiesWithoutProject = getOrderedGlobalVariables(_usedProperties).filter((d) => d.key !== 'project_id');
+            return getOrderedGlobalVariables(_usedPropertiesWithoutProject);
+        }
         return getOrderedGlobalVariables(_usedProperties);
     }),
     allReferenceTypeInfo: computed(() => allReferenceTypeInfoStore.getters.allReferenceTypeInfo),
     modifiedVariablesSchemaProperties: computed<string[]>(() => {
         const results: string[] = [];
         state.globalVariables.forEach((_var) => {
-            if (!isEqual(dashboardDetailGetters.dashboardInfo?.vars?.[_var.key], dashboardDetailState.vars?.[_var.key])) {
+            if (!isEqual(state.dashboardVars?.[_var.key], state.tempVars?.[_var.key])) {
                 results.push(_var.key);
             }
         });
@@ -66,17 +75,26 @@ const state = reactive({
     }),
     showSaveButton: computed<boolean>(() => !props.disableSaveButton && state.modifiedVariablesSchemaProperties.length > 0),
     notChanged: computed(() => state.modifiedVariablesSchemaProperties.length === 0),
-    isSharedDashboard: computed<boolean>(() => !!dashboardDetailGetters.dashboardInfo?.shared && !storeState.isAdminMode),
+    isSharedDashboard: computed<boolean>(() => !!dashboard.value?.shared && !storeState.isAdminMode),
 });
 
 const handleClickSaveButton = () => {
-    emit('update', { vars: dashboardDetailState.vars });
-    dashboardDetailStore.setVars(dashboardDetailState.vars);
+    emit('update', { vars: state.tempVars });
 };
 const handleResetVariables = () => {
-    const _originVars = props.originVars ?? dashboardDetailGetters.dashboardInfo?.vars ?? {};
+    const _originVars = state.dashboardVars;
+    state.tempVars = { ..._originVars };
     dashboardDetailStore.setVars(_originVars);
 };
+
+const handleUpdateVars = (val: DashboardVars) => {
+    state.tempVars = val;
+    dashboardDetailStore.setVars(val);
+};
+
+watch(() => dashboard.value?.vars, (_vars) => {
+    state.tempVars = { ..._vars };
+}, { immediate: true });
 </script>
 
 <template>
@@ -85,7 +103,10 @@ const handleResetVariables = () => {
     >
         <template v-for="(property, idx) in state.globalVariables">
             <div :key="`${property.name}-${idx}`">
-                <dashboard-global-variable-filter :variable="property" />
+                <dashboard-global-variable-filter :variable="property"
+                                                  :vars="state.tempVars"
+                                                  @update:vars="handleUpdateVars"
+                />
                 <changed-mark v-if="state.modifiedVariablesSchemaProperties.includes(property.key)" />
             </div>
         </template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue
index 7611d621cb..ef48fa4cb5 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue
@@ -4,28 +4,28 @@ import {
     reactive, ref, watch, computed, onBeforeUnmount,
 } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
 import { cloneDeep, debounce, flattenDeep } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PDataLoader, PEmpty, PButton,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetCreateParameters } from '@/schema/dashboard/private-widget/api-verbs/create';
-import type { PrivateWidgetDeleteParameters } from '@/schema/dashboard/private-widget/api-verbs/delete';
-import type { PrivateWidgetUpdateParameters } from '@/schema/dashboard/private-widget/api-verbs/update';
-import type { PrivateWidgetModel } from '@/schema/dashboard/private-widget/model';
-import type { DataTableListParameters } from '@/schema/dashboard/public-data-table/api-verbs/list';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetCreateParameters } from '@/schema/dashboard/public-widget/api-verbs/create';
-import type { PublicWidgetDeleteParameters } from '@/schema/dashboard/public-widget/api-verbs/delete';
-import type { PublicWidgetUpdateParameters } from '@/schema/dashboard/public-widget/api-verbs/update';
-import type { PublicWidgetModel } from '@/schema/dashboard/public-widget/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import {
+    usePrivateDataTableApi,
+} from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PrivateWidgetDeleteParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/delete';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+import type { PublicWidgetDeleteParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/delete';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
 import { i18n } from '@/translations';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useDisplayStore } from '@/store/display/display-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
@@ -49,6 +49,8 @@ import DashboardReorderSidebar from '@/services/dashboards/components/dashboard-
 import {
     useDashboardContainerWidth,
 } from '@/services/dashboards/composables/use-dashboard-container-width';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import {
     useAllReferenceTypeInfoStore,
@@ -66,7 +68,6 @@ type RefinedWidgetInfo = WidgetModel & {
     component: AsyncComponent|null;
 };
 
-const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailGetters = dashboardDetailStore.getters;
 const dashboardDetailState = dashboardDetailStore.state;
@@ -75,6 +76,24 @@ const widgetGenerateState = widgetGenerateStore.state;
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
 const allReferenceStore = useAllReferenceStore();
 const displayStore = useDisplayStore();
+const { publicDataTableAPI } = usePublicDataTableApi();
+const { privateDataTableAPI } = usePrivateDataTableApi();
+
+/* Query */
+const {
+    dashboard,
+    widgetList,
+    keys,
+    api,
+    isLoading,
+    fetcher,
+    queryClient,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
+const { isManageable } = useDashboardManageable({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 
 /* State */
 const containerRef = ref<HTMLElement|null>(null);
@@ -105,7 +124,7 @@ const getRefinedWidgetInfoList = (dashboardWidgets: Array<PublicWidgetModel|Priv
         return [];
     }
     let _refinedWidgets: RefinedWidgetInfo[] = [];
-    dashboardDetailGetters.dashboardLayouts.forEach((d) => {
+    dashboard.value?.layouts?.forEach((d) => {
         const _widgetIdList = d.widgets;
         _widgetIdList?.forEach((widgetId) => {
             const _widget = dashboardWidgets.find((w) => w.widget_id === widgetId);
@@ -129,7 +148,6 @@ const getRefinedWidgetInfoList = (dashboardWidgets: Array<PublicWidgetModel|Priv
     return _refinedWidgets;
 };
 const getWidgetLoading = (widgetId: string) => {
-    // if (!dashboardDetailGetters.isAllVariablesInitialized) return true;
     if (!state.isAllWidgetsMounted) return true;
     if (!state.intersectedWidgetMap[widgetId]) return true;
     return false;
@@ -139,7 +157,7 @@ const refreshAllWidget = debounce(async () => {
 
     widgetRef.value.forEach((comp) => {
         if (!comp) return false;
-        comp.loadWidget(true);
+        comp.loadWidget();
         return true;
     });
 
@@ -149,7 +167,7 @@ const loadAWidget = async (widgetId: string) => {
     if (!widgetId) return;
     widgetRef.value.forEach((comp) => {
         if (!comp || comp.$el.id !== widgetId) return;
-        comp.loadWidget(true);
+        comp.loadWidget();
     });
 };
 const getResizedWidgetInfoList = (widgetInfoList: RefinedWidgetInfo[], _containerWidth: number): RefinedWidgetInfo[] => {
@@ -164,41 +182,76 @@ const getResizedWidgetInfoList = (widgetInfoList: RefinedWidgetInfo[], _containe
 
 
 /* Api */
-const deleteWidget = async (widgetId: string) => {
+const { mutateAsync: updateDashboard } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: async (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            await queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+        },
+    },
+);
+const deleteWidgetFn = (params: PrivateWidgetDeleteParameters|PublicWidgetDeleteParameters) => {
     const isPrivate = dashboardDetailState.dashboardId?.startsWith('private');
-    const fetcher = isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateWidget.delete<PrivateWidgetDeleteParameters>
-        : SpaceConnector.clientV2.dashboard.publicWidget.delete<PublicWidgetDeleteParameters>;
-    try {
-        await fetcher({
-            widget_id: widgetId,
-        });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    }
+    const _fetcher = isPrivate
+        ? api.privateWidgetAPI.delete
+        : api.publicWidgetAPI.delete;
+    return _fetcher(params);
 };
-const updateWidget = async (widgetId: string, size: WidgetSize) => {
-    const isPrivate = widgetId.startsWith('private');
-    const fetcher = isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateWidget.update<PrivateWidgetUpdateParameters, PrivateWidgetModel>
-        : SpaceConnector.clientV2.dashboard.publicWidget.update<PublicWidgetUpdateParameters, PublicWidgetModel>;
-    try {
-        await fetcher({
-            widget_id: widgetId,
-            size,
+const { mutateAsync: deleteWidget } = useMutation(
+    {
+        mutationFn: deleteWidgetFn,
+        onSuccess: (_, variables) => {
+            // delete wisdget from mounted map
+            delete state.mountedWidgetMap[variables.widget_id];
+            state.mountedWidgetMap = { ...state.mountedWidgetMap };
+
+            const isPrivate = variables.widget_id?.startsWith('private');
+            const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+            queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value });
+        },
+        onError: (e) => {
+            ErrorHandler.handleError(e);
+        },
+        onSettled: () => {
+            // close modal
+            widgetDeleteState.visibleModal = false;
+            widgetDeleteState.targetWidget = null;
+        },
+    },
+);
+
+const { mutate: updateWidgetSize } = useMutation({
+    mutationFn: fetcher.updateWidgetFn,
+    onSuccess: (_, variables) => {
+        const isPrivate = dashboardDetailState.dashboardId?.startsWith('private');
+        const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+        queryClient.setQueryData(widgetListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
+            const _updatedWidgetList = (oldData.results ?? []).map((widget) => {
+                if (widget.widget_id === variables.widget_id) {
+                    return { ...widget, size: variables.size };
+                }
+                return widget;
+            });
+            return {
+                ...oldData,
+                results: _updatedWidgetList,
+            };
         });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    }
-};
+    },
+    onError: (error) => {
+        ErrorHandler.handleError(error);
+    },
+});
 
 const listWidgetDataTables = async (widgetId: string) => {
     const isPrivate = widgetId.startsWith('private');
-    const fetcher = isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateDataTable.list<DataTableListParameters, ListResponse<DataTableModel>>
-        : SpaceConnector.clientV2.dashboard.publicDataTable.list<DataTableListParameters, ListResponse<DataTableModel>>;
+    const _fetcher = isPrivate
+        ? privateDataTableAPI.list
+        : publicDataTableAPI.list;
     try {
-        const { results } = await fetcher({ widget_id: widgetId });
+        const { results } = await _fetcher({ widget_id: widgetId });
         if (!results) return [];
         const _refinedResults = cloneDeep(results);
         results.forEach((r, idx) => {
@@ -258,10 +311,9 @@ const handleClickDeleteWidget = (widget: RefinedWidgetInfo) => {
     widgetDeleteState.targetWidget = widget;
     widgetDeleteState.visibleModal = true;
 };
-const handleOpenWidgetOverlay = async (widget: RefinedWidgetInfo, overlayType: WidgetOverlayType) => {
+const handleOpenWidgetOverlay = (widget: RefinedWidgetInfo, overlayType: WidgetOverlayType) => {
     widgetGenerateStore.setOverlayType(overlayType);
-    widgetGenerateStore.setWidgetForm(widget);
-    await widgetGenerateStore.listDataTable();
+    widgetGenerateStore.setWidgetFormInfo(widget);
     widgetGenerateStore.setOverlayStep(2);
     widgetGenerateStore.setShowOverlay(true);
 };
@@ -269,11 +321,11 @@ const handleCloneWidget = async (widget: RefinedWidgetInfo) => {
     if (!dashboardDetailState.dashboardId) return;
     const isPrivate = widget.widget_id.startsWith('private');
     const widgetCreateFetcher = isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateWidget.create<PrivateWidgetCreateParameters, PrivateWidgetModel>
-        : SpaceConnector.clientV2.dashboard.publicWidget.create<PublicWidgetCreateParameters, PublicWidgetModel>;
+        ? api.privateWidgetAPI.create
+        : api.publicWidgetAPI.create;
     const widgetUpdateFetcher = isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateWidget.update<PrivateWidgetUpdateParameters, PrivateWidgetModel>
-        : SpaceConnector.clientV2.dashboard.publicWidget.update<PublicWidgetUpdateParameters, PublicWidgetModel>;
+        ? api.privateWidgetAPI.update
+        : api.publicWidgetAPI.update;
 
     const dataTableList = await listWidgetDataTables(widget.widget_id);
     const dataTableIndex = dataTableList.findIndex((d) => d.data_table_id === widget.data_table_id);
@@ -297,8 +349,32 @@ const handleCloneWidget = async (widget: RefinedWidgetInfo) => {
             widget_id: createdWidget.widget_id,
             state: 'ACTIVE',
         });
-        await dashboardStore.addWidgetToDashboard(dashboardDetailState.dashboardId, createdWidget.widget_id);
-        dashboardDetailStore.setDashboardWidgets([...dashboardDetailState.dashboardWidgets, completedWidget]);
+        const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+        await queryClient.setQueryData(widgetListQueryKey.value, (oldData: ListResponse<WidgetModel>) => ({
+            ...oldData,
+            results: [...(oldData.results || []), completedWidget],
+        }));
+
+        const _layouts = cloneDeep(dashboard.value?.layouts || []);
+        if (_layouts.length) {
+            const _targetLayout = _layouts[0];
+            if (_targetLayout.widgets) {
+                _targetLayout.widgets.push(createdWidget.widget_id);
+            } else {
+                _targetLayout.widgets = [createdWidget.widget_id];
+            }
+            _layouts[0] = _targetLayout;
+        } else {
+            _layouts.push({
+                widgets: [createdWidget.widget_id],
+            });
+        }
+        await updateDashboard({
+            dashboard_id: dashboardDetailState.dashboardId || '',
+            layouts: _layouts,
+        });
+
+        dashboardDetailStore.setDashboardWidgets([...widgetList.value, completedWidget]);
         showSuccessMessage(i18n.t('COMMON.WIDGETS.CLONE_SUCCESS_MSG'), '');
     } catch (e: any) {
         showErrorMessage(e.message, e);
@@ -306,10 +382,12 @@ const handleCloneWidget = async (widget: RefinedWidgetInfo) => {
     }
 };
 const handleToggleWidgetSize = async (widget: RefinedWidgetInfo, size: WidgetSize) => {
-    const _widget = dashboardDetailState.dashboardWidgets.find((w) => w.widget_id === widget.widget_id);
+    const _widget = widgetList.value.find((w) => w.widget_id === widget.widget_id);
     if (!_widget) return;
-    await updateWidget(widget.widget_id, size);
-    await dashboardDetailStore.listDashboardWidgets();
+    await updateWidgetSize({
+        widget_id: widget.widget_id,
+        size,
+    });
 };
 const handleWidgetMounted = (widgetId: string) => {
     state.mountedWidgetMap = {
@@ -320,16 +398,19 @@ const handleWidgetMounted = (widgetId: string) => {
 const handleDeleteModalConfirm = async () => {
     const _targetWidgetId = widgetDeleteState.targetWidget?.widget_id as string;
     // 1. remove from dashboard layouts
-    await dashboardDetailStore.deleteDashboardWidget(_targetWidgetId);
+    const _dashboardLayouts = cloneDeep(dashboard.value?.layouts ?? []);
+    const firstLayout = _dashboardLayouts[0];
+    const deletedWidgetIndex = firstLayout?.widgets?.indexOf(_targetWidgetId) ?? -1;
+    const changedLayouts = deletedWidgetIndex !== -1
+        ? (_dashboardLayouts[0]?.widgets?.splice(deletedWidgetIndex, 1), _dashboardLayouts)
+        : undefined;
+
+    await updateDashboard({
+        dashboard_id: dashboardDetailState.dashboardId || '',
+        layouts: changedLayouts,
+    });
     // 2. delete widget
-    await deleteWidget(_targetWidgetId);
-    // 3. delete widget from mounted map
-    delete state.mountedWidgetMap[_targetWidgetId];
-    state.mountedWidgetMap = { ...state.mountedWidgetMap };
-    // 3. close modal
-    widgetDeleteState.visibleModal = false;
-    widgetDeleteState.targetWidget = null;
-    await dashboardDetailStore.listDashboardWidgets();
+    await deleteWidget({ widget_id: _targetWidgetId });
 };
 const handleClickAddWidget = () => {
     widgetGenerateStore.setOverlayType('ADD');
@@ -337,23 +418,28 @@ const handleClickAddWidget = () => {
 };
 
 /* Watcher */
-watch(() => dashboardDetailState.dashboardWidgets, (widgets) => {
+watch([widgetList, () => dashboard.value?.layouts], ([widgets]) => {
     state.refinedWidgetInfoList = getRefinedWidgetInfoList(widgets);
 });
 watch(() => widgetGenerateState.showOverlay, async (showOverlay) => {
     if (!showOverlay && widgetGenerateState.overlayType !== 'EXPAND') {
         state.remountWidgetId = widgetGenerateState.latestWidgetId;
-        await dashboardDetailStore.listDashboardWidgets();
+
+        // fetch widget list
+        const isPrivate = dashboard.value?.dashboard_id?.startsWith('private');
+        const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+        await queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value });
+
         state.remountWidgetId = undefined;
         await loadAWidget(widgetGenerateState.latestWidgetId);
     }
 });
-watch(() => dashboardDetailState.dashboardWidgets, (dashboardWidgets) => {
+watch(widgetList, (dashboardWidgets) => {
     // delete creating widgets
     if (!widgetGenerateState.showOverlay) {
         dashboardWidgets.forEach((widget) => {
             if (widget.state === 'CREATING') {
-                deleteWidget(widget.widget_id);
+                deleteWidget({ widget_id: widget.widget_id });
             }
         });
     }
@@ -424,7 +510,7 @@ onBeforeUnmount(() => {
     <div ref="containerRef"
          class="dashboard-widget-container"
     >
-        <p-data-loader :loading="dashboardDetailState.loadingDashboard || dashboardDetailState.loadingWidgets"
+        <p-data-loader :loading="isLoading"
                        :data="state.refinedWidgetInfoList"
                        loader-backdrop-color="gray.100"
                        disable-empty-case
@@ -446,8 +532,9 @@ onBeforeUnmount(() => {
                                :loading="getWidgetLoading(widget.widget_id)"
                                :dashboard-options="dashboardDetailState.options"
                                :dashboard-vars="dashboardDetailGetters.refinedVars"
+                               :dashboard-id="dashboardDetailState.dashboardId"
                                :disable-refresh-on-variable-change="widgetGenerateState.showOverlay || dashboardDetailState.loadingDashboard"
-                               :disable-manage-buttons="dashboardDetailGetters.disableManageButtons"
+                               :disable-manage-buttons="!isManageable"
                                :all-reference-type-info="state.allReferenceTypeInfo"
                                @mounted="handleWidgetMounted(widget.widget_id)"
                                @click-edit="handleOpenWidgetOverlay(widget, 'EDIT')"
@@ -459,13 +546,13 @@ onBeforeUnmount(() => {
                 </template>
             </div>
         </p-data-loader>
-        <div v-if="!(dashboardDetailState.loadingDashboard || dashboardDetailState.loadingWidgets) && !state.refinedWidgetInfoList?.length"
+        <div v-if="!isLoading && !state.refinedWidgetInfoList?.length"
              class="no-data-wrapper"
         >
             <p-empty show-image
                      image-size="sm"
                      class="empty-wrapper"
-                     :show-button="!dashboardDetailGetters.disableManageButtons"
+                     :show-button="isManageable"
             >
                 {{ $t('DASHBOARDS.DETAIL.NO_WIDGET_TEXT') }}
                 <template #button>
diff --git a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderFormModal.vue b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderFormModal.vue
index 840dcc032b..3577525707 100644
--- a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderFormModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderFormModal.vue
@@ -3,23 +3,22 @@ import {
     computed, reactive, watch,
 } from 'vue';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { useMutation } from '@tanstack/vue-query';
+
 import {
     PButtonModal, PFieldGroup, PTextInput, PToggleButton,
 } from '@cloudforet/mirinae';
 
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
-import type { PrivateFolderCreateParameters } from '@/schema/dashboard/private-folder/api-verbs/create';
-import type { PrivateFolderUpdateParameters } from '@/schema/dashboard/private-folder/api-verbs/update';
-import type { PrivateFolderModel } from '@/schema/dashboard/private-folder/model';
-import type { PublicFolderCreateParameters } from '@/schema/dashboard/public-folder/api-verbs/create';
-import type { PublicFolderUpdateParameters } from '@/schema/dashboard/public-folder/api-verbs/update';
-import type { PublicFolderModel } from '@/schema/dashboard/public-folder/model';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { FolderCreateParams, FolderModel, FolderUpdateParams } from '@/api-clients/dashboard/_types/folder-type';
+import type { PrivateFolderCreateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/create';
+import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
+import type { PublicFolderCreateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/create';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -28,13 +27,9 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
-
-
-type FolderModel = PublicFolderModel | PrivateFolderModel;
-type FolderCreateParams = PublicFolderCreateParameters | PrivateFolderCreateParameters;
-type FolderUpdateParams = PublicFolderUpdateParameters | PrivateFolderUpdateParameters;
 interface Props {
     visible: boolean;
     folderId?: string;
@@ -48,10 +43,19 @@ const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
 
 const appContextStore = useAppContextStore();
 const userStore = useUserStore();
-const dashboardStore = useDashboardStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
+
+/* Query */
+const {
+    publicFolderList,
+    privateFolderList,
+    keys,
+    api,
+    fetcher,
+    queryClient,
+} = useDashboardQuery();
+
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceMember: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
@@ -59,17 +63,22 @@ const storeState = reactive({
 const state = reactive({
     proxyVisible: useProxyValue<boolean>('visible', props, emit),
     isPrivate: false,
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
     selectedFolder: computed<FolderModel|undefined>(() => {
         if (dashboardPageControlState.folderFormModalType === 'UPDATE') {
             if (props.folderId?.startsWith('private')) {
-                return dashboardPageControlGetters.privateFolderItems.find((d) => d.folder_id === props.folderId);
+                return state.privateFolderItems.find((d) => d.folder_id === props.folderId);
             }
-            return dashboardPageControlGetters.publicFolderItems.find((d) => d.folder_id === props.folderId);
+            return state.publicFolderItems.find((d) => d.folder_id === props.folderId);
         }
         return undefined;
     }),
     existingNameList: computed<string[]>(() => {
-        const _targetFolderItems = state.isPrivate ? dashboardPageControlGetters.privateFolderItems : dashboardPageControlGetters.publicFolderItems;
+        const _targetFolderItems = state.isPrivate ? state.privateFolderItems : state.publicFolderItems;
         if (dashboardPageControlState.folderFormModalType === 'UPDATE') {
             return _targetFolderItems.filter((d) => d.folder_id !== state.selectedFolder?.folder_id).map((d) => d.name);
         }
@@ -97,12 +106,17 @@ const {
     },
 });
 
-/* Api */
-const createFolder = async () => {
-    try {
+/* Event */
+const handleFormConfirm = async () => {
+    if (!isAllValid) return;
+    if (dashboardPageControlState.folderFormModalType === 'UPDATE') {
+        const params: FolderUpdateParams = {
+            folder_id: state.selectedFolder?.folder_id as string,
+            name: name.value as string,
+        };
+        updateFolder(params);
+    } else {
         const _isPrivate = storeState.isWorkspaceMember ? true : state.isPrivate;
-
-        const fetcher = _isPrivate ? SpaceConnector.clientV2.dashboard.privateFolder.create : SpaceConnector.clientV2.dashboard.publicFolder.create;
         const params: FolderCreateParams = {
             name: name.value as string,
             tags: { created_by: userStore.state.userId },
@@ -110,46 +124,56 @@ const createFolder = async () => {
         if (!_isPrivate) {
             (params as PublicFolderCreateParameters).resource_group = storeState.isAdminMode ? RESOURCE_GROUP.DOMAIN : RESOURCE_GROUP.WORKSPACE;
         }
-        const createdFolder = await fetcher(params);
-        dashboardPageControlStore.setNewIdList([
-            ...dashboardPageControlState.newIdList,
-            createdFolder.folder_id,
-        ]);
-        showSuccessMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_S_CREATE_FOLDER'), '');
-        state.proxyVisible = false;
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_E_CREATE_FOLDER'));
+        createFolder(params);
     }
 };
-const updateFolderName = async () => {
-    try {
-        const _isPrivate = props.folderId?.startsWith('private');
-        const fetcher = _isPrivate ? SpaceConnector.clientV2.dashboard.privateFolder.update : SpaceConnector.clientV2.dashboard.publicFolder.update;
-        const params: FolderUpdateParams = {
-            folder_id: state.selectedFolder?.folder_id as string,
-            name: name.value as string,
-        };
-        await fetcher(params);
-        state.proxyVisible = false;
-        showSuccessMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_S_UPDATE_FOLDER'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_E_UPDATE_FOLDER'));
-    }
+const handleUpdatePrivate = (value: boolean) => {
+    state.isPrivate = value;
 };
 
-/* Event */
-const handleFormConfirm = async () => {
-    if (!isAllValid) return;
-    if (dashboardPageControlState.folderFormModalType === 'UPDATE') {
-        await updateFolderName();
-    } else {
-        await createFolder();
+const createFolderFn = (params: PrivateFolderCreateParameters | PublicFolderCreateParameters): Promise<FolderModel> => {
+    const _isPrivate = storeState.isWorkspaceMember ? true : state.isPrivate;
+    if (_isPrivate) {
+        return api.privateFolderAPI.create(params as PrivateFolderCreateParameters);
     }
-    await dashboardStore.load();
-};
-const handleUpdatePrivate = (value: boolean) => {
-    state.isPrivate = value;
+    return api.publicFolderAPI.create(params as PublicFolderCreateParameters);
 };
+const { mutate: createFolder } = useMutation(
+    {
+        mutationFn: createFolderFn,
+        onSuccess: (folder: PublicFolderModel|PrivateFolderModel) => {
+            dashboardPageControlStore.setNewIdList([
+                ...dashboardPageControlState.newIdList,
+                folder.folder_id,
+            ]);
+            showSuccessMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_S_CREATE_FOLDER'), '');
+            state.proxyVisible = false;
+
+            const isPrivate = folder.folder_id.startsWith('private');
+            const folderListQueryKey = isPrivate ? keys.privateFolderListQueryKey : keys.publicFolderListQueryKey;
+            queryClient.invalidateQueries({ queryKey: folderListQueryKey.value });
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_E_CREATE_FOLDER'));
+        },
+    },
+);
+const { mutate: updateFolder } = useMutation(
+    {
+        mutationFn: fetcher.updateFolderFn,
+        onSuccess: (folder: PublicFolderModel|PrivateFolderModel) => {
+            showSuccessMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_S_UPDATE_FOLDER'), '');
+            state.proxyVisible = false;
+
+            const isPrivate = folder.folder_id.startsWith('private');
+            const folderListQueryKey = isPrivate ? keys.privateFolderListQueryKey : keys.publicFolderListQueryKey;
+            queryClient.invalidateQueries({ queryKey: folderListQueryKey.value });
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_E_UPDATE_FOLDER'));
+        },
+    },
+);
 
 /* Watcher */
 watch(() => state.proxyVisible, (visible) => {
diff --git a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue
index 9a60b5be3a..d7048c7e60 100644
--- a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue
@@ -45,15 +45,13 @@ const { getProperRouteLocation } = useProperRouteLocation();
 const appContextStore = useAppContextStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const userStore = useUserStore();
 
 const { getControlMenuItems } = useDashboardControlMenuItems({
     isAdminMode: computed(() => storeState.isAdminMode),
     isWorkspaceOwner: computed(() => storeState.isWorkspaceOwner),
-    dashboardList: computed(() => dashboardPageControlGetters.allDashboardItems),
-    folderList: computed(() => dashboardPageControlGetters.allFolderItems),
 });
+
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleCloneModal.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleCloneModal.vue
index 10c240608e..a6f8ec1543 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleCloneModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleCloneModal.vue
@@ -9,23 +9,40 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
+import { getClonedName } from '@cloudforet/utils';
 
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
-import type { FolderModel } from '@/schema/dashboard/_types/folder-type';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type {
+    DashboardCreateParams,
+    DashboardModel,
+    DashboardType,
+} from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderCreateParams, FolderModel } from '@/api-clients/dashboard/_types/folder-type';
+import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
+import type { PrivateDashboardCreateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/create';
+import type { PrivateFolderCreateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/create';
+import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
+import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
+import type { PublicFolderCreateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/create';
+import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
+import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { gray } from '@/styles/colors';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+import { getSharedDashboardLayouts } from '@/services/dashboards/helpers/dashboard-share-helper';
 import { getSelectedDataTableItems } from '@/services/dashboards/helpers/dashboard-tree-data-helper';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
@@ -64,15 +81,47 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{(e: 'update:visible', visible: boolean): void,
 }>();
 const appContextStore = useAppContextStore();
-const dashboardStore = useDashboardStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const userStore = useUserStore();
+const allReferenceStore = useAllReferenceStore();
+const { privateWidgetAPI } = usePrivateWidgetApi();
+const { publicWidgetAPI } = usePublicWidgetApi();
+
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    publicFolderList,
+    privateFolderList,
+    api,
+    keys,
+    queryClient,
+} = useDashboardQuery();
+
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceMember: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
+    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
+    userId: computed<string|undefined>(() => userStore.state.userId),
+});
+
+const queryState = reactive({
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    allDashboardItems: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
+    allFolderItems: computed(() => [...queryState.publicFolderItems, ...queryState.privateFolderItems]),
 });
+
 const state = reactive({
     loading: false,
     proxyVisible: useProxyValue<boolean>('visible', props, emit),
@@ -97,7 +146,7 @@ const state = reactive({
         if (!state.changeFolderStructure) {
             let _selectedIdMap = dashboardPageControlState.selectedPublicIdMap;
             if (props.folderId) {
-                const _childrenIdList = dashboardPageControlGetters.allDashboardItems.filter((d) => d.folder_id === props.folderId);
+                const _childrenIdList = queryState.allDashboardItems.filter((d) => d.folder_id === props.folderId);
                 _selectedIdMap = {
                     [props.folderId]: true,
                     ..._childrenIdList.reduce((acc, d) => ({ ...acc, [d.dashboard_id]: true }), {}),
@@ -105,7 +154,7 @@ const state = reactive({
             } else if (dashboardPageControlState.folderModalType === 'PRIVATE') {
                 _selectedIdMap = dashboardPageControlState.selectedPrivateIdMap;
             }
-            return getSelectedDataTableItems(dashboardPageControlGetters.allFolderItems, dashboardPageControlGetters.allDashboardItems, _selectedIdMap);
+            return getSelectedDataTableItems(queryState.allFolderItems, queryState.allDashboardItems, _selectedIdMap);
         }
 
         // 2. Change Folder Structure
@@ -114,9 +163,9 @@ const state = reactive({
             _targetDashboardList = _targetDashboardList.filter((d) => d.folder_id === props.folderId);
         } else {
             const _selectedIdMap = dashboardPageControlState.folderModalType === 'PRIVATE' ? dashboardPageControlState.selectedPrivateIdMap : dashboardPageControlState.selectedPublicIdMap;
-            _targetDashboardList = dashboardPageControlGetters.allDashboardItems.filter((d) => _selectedIdMap[d.dashboard_id]);
+            _targetDashboardList = queryState.allDashboardItems.filter((d) => _selectedIdMap[d.dashboard_id]);
         }
-        return getChangedFolderModalTableItems(dashboardPageControlGetters.allFolderItems, _targetDashboardList);
+        return getChangedFolderModalTableItems(queryState.allFolderItems, _targetDashboardList);
     }),
     disableModalConfirm: computed<boolean>(() => {
         if (!state.changeFolderStructure) return false; // 1. Use Existing Folder Structure
@@ -136,13 +185,13 @@ const state = reactive({
         if (!state.changeFolderStructure) return undefined;
         if (state.selectedFolderStructure === 'new_folder') return folderName.value;
         if (state.selectedFolderStructure === 'select_folder') {
-            return dashboardPageControlGetters.allFolderItems.find((f) => f.folder_id === state.selectedFolderId);
+            return queryState.allFolderItems.find((f) => f.folder_id === state.selectedFolderId);
         }
         return undefined;
     }),
     // 2.1. Create New Folder
     existingNameList: computed<string[]>(() => { // NOTE: only for 'create new folder' case
-        const _targetFolderItems = state.isNewFolderPrivate ? dashboardPageControlGetters.privateFolderItems : dashboardPageControlGetters.publicFolderItems;
+        const _targetFolderItems = state.isNewFolderPrivate ? queryState.privateFolderItems : queryState.publicFolderItems;
         if (dashboardPageControlState.folderFormModalType === 'UPDATE') {
             return _targetFolderItems.filter((d) => d.folder_id !== state.selectedFolder?.folder_id).map((d) => d.name);
         }
@@ -151,7 +200,7 @@ const state = reactive({
     isNewFolderPrivate: false,
     // 2.2. Select Existing Folder
     existingFolderMenuItems: computed<SelectDropdownMenuItem[]>(() => {
-        const _allFolderItems: FolderModel[] = [...dashboardPageControlGetters.publicFolderItems, ...dashboardPageControlGetters.privateFolderItems];
+        const _allFolderItems: FolderModel[] = [...queryState.publicFolderItems, ...queryState.privateFolderItems];
         return _allFolderItems.map((folder) => ({
             label: folder.name,
             name: folder.folder_id,
@@ -180,6 +229,12 @@ const {
 });
 
 /* Util */
+const getDashboardNameList = (dashboardType: DashboardType) => {
+    if (dashboardType === 'PRIVATE') {
+        return (privateDashboardList.value.filter((i) => i.version !== '1.0')).map((item) => item.name);
+    }
+    return publicDashboardList.value.filter((i) => i.version !== '1.0').map((item) => item.name);
+};
 const getChangedFolderModalTableItems = (folderItems: FolderModel[], targetDashboardItems: DashboardModel[]): DashboardDataTableItem[] => {
     // 2.1. Create New Folder
     if (state.selectedFolderStructure === 'new_folder') {
@@ -232,8 +287,53 @@ const getLocation = (selectedFolder: FolderModel|string|undefined): string => {
 };
 
 /* Api */
+const dashboardCreateFetcher = (params: DashboardCreateParams, isPrivate?: boolean) => {
+    if (isPrivate) {
+        return api.privateDashboardAPI.create(params as PrivateDashboardCreateParameters);
+    }
+    return api.publicDashboardAPI.create(params as PublicDashboardCreateParameters);
+};
+const listDashboardWidgets = async (dashboardId: string): Promise<WidgetModel[]> => {
+    try {
+        const isPrivate = dashboardId.startsWith('private');
+        const fetcher = isPrivate
+            ? privateWidgetAPI.list
+            : publicWidgetAPI.list;
+        const res = await fetcher({
+            dashboard_id: dashboardId,
+        });
+        return res.results || [];
+    } catch (e) {
+        ErrorHandler.handleError(e);
+        return [];
+    }
+};
 const cloneDashboard = async (dashboardId: string, isPrivate?: boolean, folderId?: string) => {
-    const createdDashboard = await dashboardStore.cloneDashboard(dashboardId, isPrivate, folderId);
+    const _dashboardType = isPrivate ? 'PRIVATE' : 'PUBLIC';
+    const _allDashboardItems = [...privateDashboardList.value, ...publicDashboardList.value];
+    const _dashboard = _allDashboardItems.find((item) => item.dashboard_id === dashboardId);
+    if (!_dashboard) throw new Error('Dashboard not found');
+
+    const _dashboardNameList = getDashboardNameList(_dashboardType);
+    const _dashboardWidgets = await listDashboardWidgets(_dashboard.dashboard_id);
+    const _createdLayouts = await getSharedDashboardLayouts(_dashboard.layouts, _dashboardWidgets, storeState.costDataSource);
+    const _createdDashboardParams: DashboardCreateParams = {
+        name: getClonedName(_dashboardNameList, _dashboard.name),
+        layouts: _createdLayouts,
+        options: _dashboard.options || {},
+        labels: _dashboard.labels || [],
+        tags: { created_by: storeState.userId },
+        folder_id: folderId,
+        vars: _dashboard.vars,
+        vars_schema: _dashboard.vars_schema,
+    };
+    if (storeState.isAdminMode) {
+        (_createdDashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
+    } else if (!isPrivate) {
+        (_createdDashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
+    }
+
+    const createdDashboard = await dashboardCreateFetcher(_createdDashboardParams, isPrivate);
     if (createdDashboard) {
         dashboardPageControlStore.setNewIdList([
             ...dashboardPageControlState.newIdList,
@@ -241,7 +341,24 @@ const cloneDashboard = async (dashboardId: string, isPrivate?: boolean, folderId
         ]);
     }
 };
-
+const folderCreateFetcher = (params: FolderCreateParams, isPrivate?: boolean) => {
+    if (isPrivate) {
+        return api.privateDashboardAPI.create(params as PrivateFolderCreateParameters);
+    }
+    return api.publicDashboardAPI.create(params as PublicFolderCreateParameters);
+};
+const createFolder = async (name: string, isPrivate: boolean) => {
+    const _existingFolderNameList = isPrivate ? privateFolderList.value.map((d) => d.name) : publicFolderList.value.map((d) => d.name);
+    const params: FolderCreateParams = {
+        name: getClonedName(_existingFolderNameList, name),
+        tags: { created_by: storeState.userId },
+    };
+    if (!isPrivate) {
+        (params as PublicFolderCreateParameters).resource_group = storeState.isAdminMode ? RESOURCE_GROUP.DOMAIN : RESOURCE_GROUP.WORKSPACE;
+    }
+    const createdFolder = await folderCreateFetcher(params, isPrivate);
+    return createdFolder?.folder_id;
+};
 
 /* Event */
 const handleToggleChangeFolderStructure = (value: boolean) => {
@@ -259,7 +376,7 @@ const handleCloneConfirm = async () => {
         await Promise.allSettled(state.modalTableItems.map(async (item) => {
             const _isPrivate = storeState.isWorkspaceMember ? true : state.privateMap[item.id];
             if (item.type === 'FOLDER') {
-                const createdFolderId = await dashboardStore.createFolder(item.name, _isPrivate);
+                const createdFolderId = await createFolder(item.name, _isPrivate);
                 if (!createdFolderId) return;
                 dashboardPageControlStore.setNewIdList([...dashboardPageControlState.newIdList, createdFolderId]);
                 const _children = state.modalTableItems.filter((d) => d.folderId === item.id);
@@ -275,7 +392,7 @@ const handleCloneConfirm = async () => {
     } else { // 2. Change Folder Structure
         // 2.1. Create New Folder
         if (state.selectedFolderStructure === 'new_folder') {
-            const createdFolderId = await dashboardStore.createFolder(folderName.value || '', state.isNewFolderPrivate);
+            const createdFolderId = await createFolder(folderName.value || '', state.isNewFolderPrivate);
             if (!createdFolderId) return;
             dashboardPageControlStore.setNewIdList([...dashboardPageControlState.newIdList, createdFolderId]);
             state.modalTableItems.filter((d) => d.type === 'DASHBOARD').forEach((item) => {
@@ -304,7 +421,10 @@ const handleCloneConfirm = async () => {
         const _failedCount = _results.filter((r) => r.status !== 'fulfilled').length;
         showErrorMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.ALT_E_CLONE_DASHBOARD', { count: _failedCount }), '');
     }
-    await dashboardStore.load();
+    await queryClient.invalidateQueries({ queryKey: keys.publicDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: keys.privateDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: keys.publicFolderListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: keys.privateFolderListQueryKey.value });
     dashboardPageControlStore.reset();
     state.proxyVisible = false;
     state.loading = false;
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleDeleteModal.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleDeleteModal.vue
index 54f59ca805..8979c83593 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleDeleteModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleDeleteModal.vue
@@ -1,29 +1,33 @@
 <script lang="ts" setup>
 import { computed, reactive } from 'vue';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PDataTable, PI } from '@cloudforet/mirinae';
 
-import type { PrivateFolderDeleteParameters } from '@/schema/dashboard/private-folder/api-verbs/delete';
-import type { PublicFolderDeleteParameters } from '@/schema/dashboard/public-folder/api-verbs/delete';
 import { i18n } from '@/translations';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
+import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { getSelectedDataTableItems } from '@/services/dashboards/helpers/dashboard-tree-data-helper';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
 
 
 
+
+
+
 /* Cases
 * Single Case: If props.folderId exists, delete single folder
 * Multiple Case: Otherwise, delete multiple folders (get selected data from dashboardPageControlGetters)
@@ -32,7 +36,7 @@ const DELETE_TABLE_FIELDS = [
     { name: 'name', label: 'Name' },
     { name: 'location', label: 'Location' },
 ];
-type FolderDeleteParams = PublicFolderDeleteParameters | PrivateFolderDeleteParameters;
+
 interface Props {
     visible?: boolean;
     folderId?: string;
@@ -43,10 +47,45 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits<{(e: 'update:visible', visible: boolean): void,
 }>();
-const dashboardStore = useDashboardStore();
+const appContextStore = useAppContextStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
+const favoriteStore = useFavoriteStore();
+const favoriteGetters = favoriteStore.getters;
+const userWorkspaceStore = useUserWorkspaceStore();
+
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    publicFolderList,
+    privateFolderList,
+    api,
+    keys,
+    queryClient,
+} = useDashboardQuery();
+
+const queryState = reactive({
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    allDashboardItems: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
+    allFolderItems: computed(() => [...queryState.publicFolderItems, ...queryState.privateFolderItems]),
+});
+
+const storeState = reactive({
+    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
+    currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
+});
+
 const state = reactive({
     loading: false,
     proxyVisible: useProxyValue<boolean>('visible', props, emit),
@@ -54,7 +93,7 @@ const state = reactive({
         let _selectedIdMap = dashboardPageControlState.selectedPublicIdMap;
         // single case
         if (props.folderId) {
-            const _childrenIdList = dashboardPageControlGetters.allDashboardItems.filter((d) => d.folder_id === props.folderId);
+            const _childrenIdList = queryState.allDashboardItems.filter((d) => d.folder_id === props.folderId);
             _selectedIdMap = {
                 [props.folderId]: true,
                 ..._childrenIdList.reduce((acc, d) => ({ ...acc, [d.dashboard_id]: true }), {}),
@@ -62,25 +101,36 @@ const state = reactive({
         } else if (dashboardPageControlState.folderModalType === 'PRIVATE') { // bundle case
             _selectedIdMap = dashboardPageControlState.selectedPrivateIdMap;
         }
-        return getSelectedDataTableItems(dashboardPageControlGetters.allFolderItems, dashboardPageControlGetters.allDashboardItems, _selectedIdMap);
+        return getSelectedDataTableItems(queryState.allFolderItems, queryState.allDashboardItems, _selectedIdMap);
     }),
 });
 
 /* Api */
 const deleteFolder = async (folderId: string): Promise<boolean> => {
     const fetcher = folderId.startsWith('private')
-        ? SpaceConnector.clientV2.dashboard.privateFolder.delete
-        : SpaceConnector.clientV2.dashboard.publicFolder.delete;
+        ? api.privateFolderAPI.delete
+        : api.publicFolderAPI.delete;
     try {
-        await fetcher<FolderDeleteParams>({ folder_id: folderId });
+        await fetcher({ folder_id: folderId });
         return true;
     } catch (e) {
         return false;
     }
 };
 const deleteDashboard = async (dashboardId: string): Promise<boolean> => {
+    const fetcher = dashboardId.startsWith('private')
+        ? api.privateDashboardAPI.delete
+        : api.publicDashboardAPI.delete;
     try {
-        await dashboardStore.deleteDashboard(dashboardId);
+        await fetcher({ dashboard_id: dashboardId });
+        const isFavoriteItem = favoriteGetters.dashboardItems.find((item) => item.itemId === dashboardId);
+        if (isFavoriteItem) {
+            await favoriteStore.deleteFavorite({
+                itemType: FAVORITE_TYPE.DASHBOARD,
+                workspaceId: storeState.currentWorkspaceId || '',
+                itemId: dashboardId,
+            });
+        }
         return true;
     } catch (e) {
         return false;
@@ -105,7 +155,10 @@ const handleDeleteConfirm = async () => {
     } else {
         ErrorHandler.handleRequestError(new Error('Delete failed'), i18n.t('DASHBOARDS.ALL_DASHBOARDS.ALT_E_DELETE_DASHBOARD'));
     }
-    await dashboardStore.load();
+    await queryClient.invalidateQueries({ queryKey: keys.publicDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: keys.privateDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: keys.publicFolderListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: keys.privateFolderListQueryKey.value });
     dashboardPageControlStore.reset();
     state.loading = false;
     state.proxyVisible = false;
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleMoveModal.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleMoveModal.vue
index a2306d0812..a22a8ae6e8 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleMoveModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleMoveModal.vue
@@ -4,24 +4,23 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PButtonModal, PFieldGroup, PI, PSelectDropdown,
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { DashboardChangeFolderParams } from '@/schema/dashboard/_types/dashboard-type';
-import type { FolderModel } from '@/schema/dashboard/_types/folder-type';
+import type { DashboardChangeFolderParams } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
 
@@ -35,15 +34,28 @@ const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
 }>();
 
 const appContextStore = useAppContextStore();
-const dashboardStore = useDashboardStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
+
+/* Query */
+const {
+    publicFolderList,
+    privateFolderList,
+    api,
+    keys,
+    queryClient,
+} = useDashboardQuery();
+
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 const state = reactive({
     proxyVisible: useProxyValue<boolean>('visible', props, emit),
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
     selectedIdMap: computed<Record<string, boolean>>(() => {
         if (dashboardPageControlState.folderModalType === 'PUBLIC') {
             return dashboardPageControlState.selectedPublicIdMap;
@@ -55,9 +67,9 @@ const state = reactive({
         .filter(([key]) => key.includes('dash'))
         .map(([key]) => key)),
     availableFolderItems: computed<FolderModel[]>(() => {
-        if (dashboardPageControlState.folderModalType === 'PRIVATE') return dashboardPageControlGetters.privateFolderItems;
-        if (storeState.isAdminMode) return dashboardPageControlGetters.publicFolderItems;
-        return dashboardPageControlGetters.publicFolderItems.filter((d) => !(d.shared && d.scope === 'WORKSPACE'));
+        if (dashboardPageControlState.folderModalType === 'PRIVATE') return state.privateFolderItems;
+        if (storeState.isAdminMode) return state.publicFolderItems;
+        return state.publicFolderItems.filter((d) => !(d.shared && d.scope === 'WORKSPACE'));
     }),
     headerTitle: computed<TranslateResult>(() => i18n.t('DASHBOARDS.ALL_DASHBOARDS.MOVE_DASHBOARDS', { count: state.targetDashboardIdList.length })),
     menuItems: computed<SelectDropdownMenuItem[]>(() => {
@@ -89,7 +101,9 @@ const state = reactive({
 const updateDashboard = async (dashboardId: string): Promise<boolean> => {
     try {
         const _isPrivate = dashboardId.startsWith('private');
-        const fetcher = _isPrivate ? SpaceConnector.clientV2.dashboard.privateDashboard.changeFolder : SpaceConnector.clientV2.dashboard.publicDashboard.changeFolder;
+        const fetcher = _isPrivate
+            ? api.privateDashboardAPI.changeFolder
+            : api.publicDashboardAPI.changeFolder;
         const params: DashboardChangeFolderParams = {
             dashboard_id: dashboardId,
         };
@@ -113,7 +127,8 @@ const handleFormConfirm = async () => {
     } if (failCount > 0) {
         ErrorHandler.handleRequestError(new Error(''), i18n.t('DASHBOARDS.ALL_DASHBOARDS.ALT_E_MOVE_DASHBOARD', { count: failCount }));
     }
-    await dashboardStore.load();
+    await queryClient.invalidateQueries({ queryKey: keys.publicDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: keys.privateDashboardListQueryKey.value });
     dashboardPageControlStore.reset();
     state.proxyVisible = false;
 };
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleShareModal.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleShareModal.vue
index 0fd44a47d7..b1a4382b9e 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleShareModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleShareModal.vue
@@ -2,22 +2,22 @@
 import { computed, reactive, watch } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { useMutation } from '@tanstack/vue-query';
+
 import {
     PDataTable, PI, PButtonModal, PRadioGroup, PRadio, PFieldGroup,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { PublicDashboardShareParameters } from '@/schema/dashboard/public-dashboard/api-verbs/share';
-import type { PublicDashboardUnshareParameters } from '@/schema/dashboard/public-dashboard/api-verbs/unshare';
-import type { PublicDashboardModel } from '@/schema/dashboard/public-dashboard/model';
-import type { PublicFolderShareParameters } from '@/schema/dashboard/public-folder/api-verbs/share';
-import type { PublicFolderUnshareParameters } from '@/schema/dashboard/public-folder/api-verbs/unshare';
-import type { PublicFolderModel } from '@/schema/dashboard/public-folder/model';
+import type { PublicDashboardShareParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/share';
+import type { PublicDashboardUnshareParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/unshare';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import type { PublicFolderShareParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/share';
+import type { PublicFolderUnshareParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/unshare';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
@@ -26,6 +26,7 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { gray } from '@/styles/colors';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
 
@@ -48,18 +49,43 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{(e: 'update:visible', visible: boolean): void,
 }>();
 const appContextStore = useAppContextStore();
-const dashboardStore = useDashboardStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
+
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    publicFolderList,
+    privateFolderList,
+    api,
+    keys,
+    queryClient,
+} = useDashboardQuery();
+
+const queryState = reactive({
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    allDashboardItems: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
+    allFolderItems: computed(() => [...queryState.publicFolderItems, ...queryState.privateFolderItems]),
+});
+
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 const state = reactive({
-    loading: false,
     proxyVisible: useProxyValue<boolean>('visible', props, emit),
     targetFolderId: computed<string|undefined>(() => props.folderId || state.targetDashboardItem?.folder_id),
-    targetFolderItem: computed<PublicFolderModel|undefined>(() => dashboardPageControlGetters.allFolderItems.find((f) => f.folder_id === state.targetFolderId)),
-    targetDashboardItem: computed<PublicDashboardModel|undefined>(() => dashboardPageControlGetters.allDashboardItems.find((d) => d.dashboard_id === props.dashboardId)),
+    targetFolderItem: computed<PublicFolderModel|undefined>(() => queryState.allFolderItems.find((f) => f.folder_id === state.targetFolderId)),
+    targetDashboardItem: computed<PublicDashboardModel|undefined>(() => queryState.allDashboardItems.find((d) => d.dashboard_id === props.dashboardId)),
     isShared: computed<boolean>(() => {
         if (props.folderId) return !!state.targetFolderItem?.shared;
         return !!state.targetDashboardItem?.shared;
@@ -81,7 +107,7 @@ const state = reactive({
             name: _folderName,
             type: 'FOLDER',
         }];
-        const _dashboardItems: DashboardDataTableItem[] = dashboardPageControlGetters.allDashboardItems
+        const _dashboardItems: DashboardDataTableItem[] = queryState.allDashboardItems
             .filter((d) => d.folder_id === state.targetFolderId)
             .map((d) => ({
                 id: d.dashboard_id,
@@ -134,78 +160,85 @@ const state = reactive({
 });
 
 /* Api */
-const shareFolder = async () => {
-    state.loading = true;
-    try {
-        await SpaceConnector.clientV2.dashboard.publicFolder.share<PublicFolderShareParameters>({
-            folder_id: state.targetFolderId || '',
-            scope: storeState.isAdminMode ? state.selectedTarget : 'PROJECT',
-        });
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_SHARE_DASHBOARD'), '');
-    } catch (e: any) {
-        showErrorMessage(e.message, e);
-        ErrorHandler.handleError(e);
-    } finally {
-        state.loading = false;
+const shareFolder = () => {
+    folderShareMutate({
+        folder_id: state.targetFolderId || '',
+        scope: storeState.isAdminMode ? state.selectedTarget : 'PROJECT',
+    });
+};
+const unshareFolder = () => {
+    folderShareMutate({
+        folder_id: state.targetFolderId || '',
+    });
+};
+const shareDashboard = () => {
+    dashboardShareMutate({
+        dashboard_id: props.dashboardId || '',
+        scope: storeState.isAdminMode ? state.selectedTarget : 'PROJECT',
+    });
+};
+const unshareDashboard = () => {
+    dashboardShareMutate({
+        dashboard_id: props.dashboardId || '',
+    });
+};
+const folderSharefetcher = (params: PublicFolderShareParameters|PublicFolderUnshareParameters) => {
+    if (!state.isShared) {
+        return api.publicFolderAPI.share(params as PublicFolderShareParameters);
     }
+    return api.publicFolderAPI.unshare(params as PublicFolderUnshareParameters);
 };
-const unshareFolder = async () => {
-    state.loading = true;
-    try {
-        await SpaceConnector.clientV2.dashboard.publicFolder.unshare<PublicFolderUnshareParameters>({
-            folder_id: state.targetFolderId || '',
-        });
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_UNSHARE_DASHBOARD'), '');
-    } catch (e: any) {
-        showErrorMessage(e.message, e);
-        ErrorHandler.handleError(e);
-    } finally {
-        state.loading = false;
+const dashboardShareFetcher = (params: PublicDashboardShareParameters|PublicDashboardUnshareParameters) => {
+    if (!state.isShared) {
+        return api.publicDashboardAPI.share(params as PublicDashboardShareParameters);
     }
+    return api.publicDashboardAPI.unshare(params as PublicDashboardUnshareParameters);
 };
-const shareDashboard = async () => {
-    state.loading = true;
-    try {
-        await SpaceConnector.clientV2.dashboard.publicDashboard.share<PublicDashboardShareParameters>({
-            dashboard_id: props.dashboardId || '',
-            scope: storeState.isAdminMode ? state.selectedTarget : 'PROJECT',
-        });
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_SHARE_DASHBOARD'), '');
-    } catch (e: any) {
+
+const { mutate: folderShareMutate, isPending: folderLoading } = useMutation({
+    mutationFn: folderSharefetcher,
+    onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: keys.publicFolderListQueryKey.value });
+        if (state.isShared) showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_SHARE_DASHBOARD'), '');
+        else showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_UNSHARE_DASHBOARD'), '');
+    },
+    onError: (e) => {
         showErrorMessage(e.message, e);
         ErrorHandler.handleError(e);
-    } finally {
-        state.loading = false;
-    }
-};
-const unshareDashboard = async () => {
-    state.loading = true;
-    try {
-        await SpaceConnector.clientV2.dashboard.publicDashboard.unshare<PublicDashboardUnshareParameters>({
-            dashboard_id: props.dashboardId || '',
-        });
-        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_UNSHARE_DASHBOARD'), '');
-    } catch (e: any) {
+    },
+    onSettled: () => {
+        dashboardPageControlStore.reset();
+        state.proxyVisible = false;
+    },
+});
+
+const { mutate: dashboardShareMutate, isPending: dashboardLoading } = useMutation({
+    mutationFn: dashboardShareFetcher,
+    onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: keys.publicDashboardListQueryKey.value });
+        if (state.isShared) showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_SHARE_DASHBOARD'), '');
+        else showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_UNSHARE_DASHBOARD'), '');
+    },
+    onError: (e) => {
         showErrorMessage(e.message, e);
         ErrorHandler.handleError(e);
-    } finally {
-        state.loading = false;
-    }
-};
+    },
+    onSettled: () => {
+        dashboardPageControlStore.reset();
+        state.proxyVisible = false;
+    },
+});
 
 /* Event */
-const handleConfirm = async () => {
+const handleConfirm = () => {
     if (!state.isShared) {
-        if (state.targetFolderId) await shareFolder();
-        else await shareDashboard();
+        if (state.targetFolderId) shareFolder();
+        else shareDashboard();
     } else if (state.targetFolderId) {
-        await unshareFolder();
+        unshareFolder();
     } else {
-        await unshareDashboard();
+        unshareDashboard();
     }
-    await dashboardStore.load();
-    dashboardPageControlStore.reset();
-    state.proxyVisible = false;
 };
 const handleChangeTarget = (value: 'WORKSPACE' | 'PROJECT') => {
     state.selectedTarget = value;
@@ -223,8 +256,8 @@ watch(() => state.proxyVisible, (visible) => {
     <p-button-modal :visible.sync="state.proxyVisible"
                     size="md"
                     :header-title="state.headerTitle"
-                    :loading="state.loading"
-                    :disabled="state.loading"
+                    :loading="folderLoading || dashboardLoading"
+                    :disabled="folderLoading || dashboardLoading"
                     :enable-scroll="true"
                     class="dashboard-folder-share-modal"
                     @confirm="handleConfirm"
@@ -255,7 +288,7 @@ watch(() => state.proxyVisible, (visible) => {
             </p-field-group>
             <p-data-table :items="state.modalTableItems"
                           :fields="TABLE_FIELDS"
-                          :loading="state.loading"
+                          :loading="folderLoading || dashboardLoading"
             >
                 <template #col-name-format="{item}">
                     <div class="table-column">
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue
index 848f3095cb..f44332fccc 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue
@@ -9,7 +9,9 @@ import type { TreeNode } from '@cloudforet/mirinae/src/data-display/tree/tree-vi
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { TreeDisplayMap } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
 
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
@@ -31,6 +33,7 @@ import type { DashboardTreeDataType } from '@/services/dashboards/types/dashboar
 
 interface Props {
     dashboards: DashboardModel[];
+    folders: (PrivateFolderModel|PublicFolderModel)[];
     type: 'PRIVATE' | 'PUBLIC';
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -41,7 +44,6 @@ const route = useRoute();
 const router = useRouter();
 const { getProperRouteLocation } = useProperRouteLocation();
 const dashboardPageControlStore = useDashboardPageControlStore();
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const appContextStore = useAppContextStore();
 const userStore = useUserStore();
 
@@ -52,19 +54,12 @@ const storeState = reactive({
 const { getControlMenuItems } = useDashboardControlMenuItems({
     isAdminMode: computed(() => storeState.isAdminMode),
     isWorkspaceOwner: computed(() => storeState.isWorkspaceOwner),
-    dashboardList: computed(() => dashboardPageControlGetters.allDashboardItems),
-    folderList: computed(() => dashboardPageControlGetters.allFolderItems),
 });
 const state = reactive({
     currentParentPathIds: [] as string[],
     currentFolderId: undefined as string|undefined,
     treeDisplayMap: {} as TreeDisplayMap,
-    dashboardTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => {
-        if (props.type === 'PRIVATE') {
-            return getDashboardTreeData(dashboardPageControlGetters.privateFolderItems, props.dashboards);
-        }
-        return getDashboardTreeData(dashboardPageControlGetters.publicFolderItems, props.dashboards);
-    }),
+    dashboardTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => getDashboardTreeData(props.folders, props.dashboards)),
     selectedTreeId: undefined as string|undefined,
 });
 
@@ -80,7 +75,7 @@ const init = (dashboardId?: string, _onMounted?: boolean) => {
         return;
     }
     state.selectedTreeId = dashboardId as string;
-    const folderId = dashboardPageControlGetters.allDashboardItems.find((d) => d.dashboard_id === dashboardId)?.folder_id;
+    const folderId = props.dashboards.find((d) => d.dashboard_id === dashboardId)?.folder_id;
     if (_onMounted && folderId) {
         updateTreeDisplayMap(folderId);
     }
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardMainBoardList.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardMainBoardList.vue
index 8dc4756358..6b41c6453d 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardMainBoardList.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardMainBoardList.vue
@@ -9,9 +9,9 @@ import {
 import type { BoardSet } from '@cloudforet/mirinae/types/data-display/board/type';
 
 
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
-import type { PrivateDashboardModel } from '@/schema/dashboard/private-dashboard/model';
-import type { PublicDashboardModel } from '@/schema/dashboard/public-dashboard/model';
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardManageVariableForm.vue b/apps/web/src/services/dashboards/components/legacy/DashboardManageVariableForm.vue
index 42a59e8887..acd9bc3b1b 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardManageVariableForm.vue
+++ b/apps/web/src/services/dashboards/components/legacy/DashboardManageVariableForm.vue
@@ -7,7 +7,7 @@ import {
     PButton, PFieldGroup, PSelectDropdown, PTextInput, useProxyValue,
 } from '@cloudforet/mirinae';
 
-import type { DashboardVariableSchemaProperty } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardVariableSchemaProperty } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
 import getRandomId from '@/lib/random-id-generator';
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardVariableDropdown.vue b/apps/web/src/services/dashboards/components/legacy/DashboardVariableDropdown.vue
index 9a5b139528..cd1e2a5350 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardVariableDropdown.vue
+++ b/apps/web/src/services/dashboards/components/legacy/DashboardVariableDropdown.vue
@@ -15,7 +15,7 @@ import type {
     AutocompleteHandler,
 } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { DashboardVariableSchemaProperty, DashboardVariables } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardVariableSchemaProperty, DashboardVariables } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue b/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue
index 8254e5edab..d1dd61aceb 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue
+++ b/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue
@@ -5,11 +5,12 @@ import { isEqual, xor } from 'lodash';
 
 import { PI, PTextButton, PDivider } from '@cloudforet/mirinae';
 
-import type { DashboardVariables, DashboardVariablesSchema } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardVariables, DashboardVariablesSchema } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import ChangedMark from '@/common/components/marks/ChangedMark.vue';
 
 import DashboardVariableDropdown from '@/services/dashboards/components/legacy/DashboardVariableDropdown.vue';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
@@ -28,7 +29,9 @@ const emit = defineEmits<{(e: 'update', val: { variables?: DashboardVariables, v
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
 const dashboardDetailGetters = dashboardDetailStore.getters;
-
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
 
 const state = reactive({
@@ -38,11 +41,11 @@ const state = reactive({
     modifiedVariablesSchemaProperties: computed<string[]>(() => {
         if (props.disableSaveButton) return [];
         const results: string[] = [];
-        const prevUsedProperties = Object.entries(dashboardDetailGetters.dashboardInfo?.variables_schema.properties ?? {}).filter(([, v]) => v.use);
+        const prevUsedProperties = Object.entries(dashboard.value?.variables_schema?.properties ?? {}).filter(([, v]) => v.use);
         const currUsedProperties = Object.entries(dashboardDetailGetters.refinedVariablesSchema.properties).filter(([, v]) => v.use);
         // check variables changed
         currUsedProperties.forEach(([k]) => {
-            if (!isEqual(dashboardDetailGetters.dashboardInfo?.variables?.[k], dashboardDetailState.variables?.[k])) {
+            if (!isEqual(dashboard.value?.variables?.[k], dashboardDetailState.variables?.[k])) {
                 results.push(k);
             }
         });
@@ -60,8 +63,8 @@ const handleClickSaveButton = () => {
     });
 };
 const handleResetVariables = () => {
-    const _originVariables = props.originVariables ?? dashboardDetailGetters.dashboardInfo?.variables;
-    const _originVariablesSchema = props.originVariablesSchema ?? dashboardDetailGetters.dashboardInfo?.variables_schema;
+    const _originVariables = props.originVariables ?? dashboard.value?.variables;
+    const _originVariablesSchema = props.originVariablesSchema ?? dashboard.value?.variables_schema;
     dashboardDetailStore.resetVariables(_originVariables, _originVariablesSchema);
 };
 
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue b/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue
index 14882b53ca..4838924189 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue
+++ b/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue
@@ -8,14 +8,18 @@ import { debounce } from 'lodash';
 
 import { PDataLoader } from '@cloudforet/mirinae';
 
+import type { DashboardLayoutWidgetInfo } from '@/api-clients/dashboard/_types/dashboard-type';
+
 import WidgetFullModeModal from '@/services/dashboards/components/legacy/WidgetFullModeModal.vue';
 import {
     useDashboardContainerWidth,
 } from '@/services/dashboards/composables/use-dashboard-container-width';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import type { ReformedWidgetInfo } from '@/services/dashboards/composables/use-reformed-widget-info-list';
 import {
     useReformedWidgetInfoList,
 } from '@/services/dashboards/composables/use-reformed-widget-info-list';
+import { getDashboardWidgetInfoList } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
@@ -29,6 +33,9 @@ type WidgetComponent = ComponentPublicInstance<WidgetProps, WidgetExpose>;
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailGetters = dashboardDetailStore.getters;
 const dashboardDetailState = dashboardDetailStore.state;
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
 
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
 
@@ -46,7 +53,7 @@ const { containerWidth } = useDashboardContainerWidth({ containerRef, observeRes
 
 /* reform widget info list */
 const { reformedWidgetInfoList } = useReformedWidgetInfoList({
-    dashboardWidgetInfoList: computed(() => dashboardDetailGetters.dashboardWidgetInfoList),
+    dashboardWidgetInfoList: computed(() => getDashboardWidgetInfoList((dashboard.value?.layouts?.[0].widgets as DashboardLayoutWidgetInfo[]) || [])),
     containerWidth,
 });
 
diff --git a/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue b/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue
index 66e3fab4c2..63456bb3bb 100644
--- a/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue
+++ b/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue
@@ -15,13 +15,15 @@ import type {
     DashboardVariablesSchema,
     DashboardVariables as IDashboardVariables,
     DashboardLayoutWidgetInfo,
-} from '@/schema/dashboard/_types/dashboard-type';
-import type { WidgetSize } from '@/schema/dashboard/_types/widget-type';
+} from '@/api-clients/dashboard/_types/dashboard-type';
+import type { WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 
 import { gray } from '@/styles/colors';
 
 import DashboardToolsetDateDropdown from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue';
 import DashboardVariables from '@/services/dashboards/components/legacy/DashboardVariables.vue';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { getDashboardWidgetInfoList } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
@@ -55,6 +57,11 @@ const dashboardDetailGetters = dashboardDetailStore.getters;
 const widgetFormStore = useWidgetFormStore();
 const widgetFormGetters = widgetFormStore.getters;
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
+
+const { dashboard } = useDashboardDetailQuery({
+    dashboardId: computed(() => dashboardDetailState.dashboardId),
+});
+
 const state = reactive({
     widgetRef: null as WidgetComponent|null,
     loadingWidget: true,
@@ -66,7 +73,8 @@ const state = reactive({
     hasNonInheritedWidgetOptions: false,
     originWidgetInfo: computed<DashboardLayoutWidgetInfo|undefined>(() => {
         if (!props.widgetKey) return undefined;
-        return dashboardDetailGetters.dashboardWidgetInfoList.find((widgetInfo) => widgetInfo.widget_key === props.widgetKey);
+        const widgetInfoList = getDashboardWidgetInfoList((dashboard.value?.layouts?.[0].widgets as DashboardLayoutWidgetInfo[]) || []);
+        return widgetInfoList.find((widgetInfo) => widgetInfo.widget_key === props.widgetKey);
     }),
     hideDateDropdown: computed<boolean>(() => widgetFormGetters.widgetConfig?.options?.data_criteria === 'realtime'),
 });
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts b/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts
index aa369af4bd..b0a9ea9b0c 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts
@@ -1,27 +1,55 @@
 import type { ComputedRef } from 'vue';
-import { computed } from 'vue';
+import { reactive, computed } from 'vue';
 
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
-import type { FolderModel } from '@/schema/dashboard/_types/folder-type';
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
 import { i18n } from '@/translations';
 
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+
 
 
 interface UseDashboardControlMenuItems {
     isAdminMode: ComputedRef<boolean>;
     isWorkspaceOwner: ComputedRef<boolean>;
-    dashboardList?: ComputedRef<DashboardModel[]>;
-    folderList?: ComputedRef<FolderModel[]>;
 }
 interface UseDashboardControlMenuItemsReturn {
     getControlMenuItems: (id: string) => ComputedRef<MenuItem[]>|MenuItem[];
 }
 
 export const useDashboardControlMenuItems = ({
-    isAdminMode, isWorkspaceOwner, dashboardList, folderList,
+    isAdminMode, isWorkspaceOwner,
 }: UseDashboardControlMenuItems): UseDashboardControlMenuItemsReturn => {
+    const appContextStore = useAppContextStore();
+
+    /* Query */
+    const {
+        publicDashboardList,
+        privateDashboardList,
+        publicFolderList,
+        privateFolderList,
+    } = useDashboardQuery();
+
+    const queryState = reactive({
+        publicDashboardItems: computed(() => {
+            const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+            if (appContextStore.getters.isAdminMode) return _v2DashboardItems;
+            return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+        }),
+        privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+        dashboardList: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
+        publicFolderItems: computed(() => {
+            if (appContextStore.getters.isAdminMode) return publicFolderList.value;
+            return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+        }),
+        privateFolderItems: computed(() => privateFolderList.value),
+        folderList: computed(() => [...queryState.publicFolderItems, ...queryState.privateFolderItems]),
+    });
+
     const _getDashboardManageable = (dashboard: DashboardModel): boolean => {
         if (dashboard.dashboard_id.startsWith('private')) return true;
         if (isAdminMode.value) return true;
@@ -40,7 +68,7 @@ export const useDashboardControlMenuItems = ({
     };
     const _getDashboardControlMenuItems = (dashboardId: string): ComputedRef<MenuItem[]>|MenuItem[] => {
         const _isPrivate = dashboardId.startsWith('private');
-        const _dashboard = dashboardList?.value.find((item) => item.dashboard_id === dashboardId);
+        const _dashboard = queryState.dashboardList.find((item) => item.dashboard_id === dashboardId);
         if (!_dashboard) return [];
 
         const _isDeprecated = _dashboard.version === '1.0';
@@ -94,7 +122,7 @@ export const useDashboardControlMenuItems = ({
     };
     const _getFolderControlMenuItems = (folderId: string): ComputedRef<MenuItem[]>|MenuItem[] => {
         const _isPrivate = folderId.startsWith('private');
-        const _folder = folderList?.value.find((item) => item.folder_id === folderId);
+        const _folder = queryState.folderList.find((item) => item.folder_id === folderId);
         if (!_folder) return [];
 
         const _isFolderManageable = _getFolderManageable(_folder);
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts
new file mode 100644
index 0000000000..ed2796fdcc
--- /dev/null
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts
@@ -0,0 +1,169 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import type { QueryClient, QueryKey } from '@tanstack/vue-query';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+
+import type { DashboardModel, DashboardUpdateParams } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import type { PrivateDashboardUpdateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/update';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
+import type { PrivateWidgetUpdateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/update';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
+import type { PublicWidgetUpdateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/update';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
+
+const DEFAULT_LIST_DATA = { results: [] };
+const STALE_TIME = 1000 * 60 * 5;
+
+interface UseDashboardDetailQueryOptions {
+    dashboardId: ComputedRef<string|undefined>;
+}
+
+interface UseDashboardDetailQueryReturn {
+    dashboard: ComputedRef<PublicDashboardModel|PrivateDashboardModel|undefined>;
+    widgetList: ComputedRef<(PublicWidgetModel|PrivateWidgetModel)[]>;
+    isLoading: ComputedRef<boolean>;
+    isError: ComputedRef<boolean>;
+    keys: {
+        publicDashboardQueryKey: ComputedRef<QueryKey>;
+        privateDashboardQueryKey: ComputedRef<QueryKey>;
+        publicWidgetListQueryKey: ComputedRef<QueryKey>;
+        privateWidgetListQueryKey: ComputedRef<QueryKey>;
+    };
+    api: {
+        publicDashboardAPI: ReturnType<typeof usePublicDashboardApi>['publicDashboardAPI'];
+        privateDashboardAPI: ReturnType<typeof usePrivateDashboardApi>['privateDashboardAPI'];
+        publicWidgetAPI: ReturnType<typeof usePublicWidgetApi>['publicWidgetAPI'];
+        privateWidgetAPI: ReturnType<typeof usePrivateWidgetApi>['privateWidgetAPI'];
+    };
+    fetcher: {
+        updateDashboardFn: (args: DashboardUpdateParams) => Promise<DashboardModel>
+        updateWidgetFn: (args: WidgetUpdateParams) => Promise<WidgetModel>
+    };
+    queryClient: QueryClient;
+}
+
+export const useDashboardDetailQuery = ({
+    dashboardId,
+}: UseDashboardDetailQueryOptions): UseDashboardDetailQueryReturn => {
+    const { publicDashboardAPI, publicDashboardQueryKey } = usePublicDashboardApi();
+    const { privateDashboardAPI, privateDashboardQueryKey } = usePrivateDashboardApi();
+    const { publicWidgetAPI, publicWidgetListQueryKey } = usePublicWidgetApi();
+    const { privateWidgetAPI, privateWidgetListQueryKey } = usePrivateWidgetApi();
+    const queryClient = useQueryClient();
+
+    const isPrivate = computed(() => !!dashboardId.value?.startsWith('private'));
+
+    /* Query Keys */
+    const _publicDashboardQueryKey = computed(() => [
+        ...publicDashboardQueryKey.value,
+        dashboardId.value,
+    ]);
+    const _privateDashboardQueryKey = computed(() => [
+        ...privateDashboardQueryKey.value,
+        dashboardId.value,
+    ]);
+    const _publicWidgetListQueryKey = computed(() => [
+        ...publicWidgetListQueryKey.value,
+        dashboardId.value,
+    ]);
+    const _privateWidgetListQueryKey = computed(() => [
+        ...privateWidgetListQueryKey.value,
+        dashboardId.value,
+    ]);
+
+    /* Querys */
+    const publicDashboardQuery = useQuery({
+        queryKey: _publicDashboardQueryKey,
+        queryFn: () => publicDashboardAPI.get({
+            dashboard_id: dashboardId.value as string,
+        }),
+        enabled: computed(() => !!dashboardId.value && !isPrivate.value),
+        staleTime: STALE_TIME,
+    });
+    const privateDashboardQuery = useQuery({
+        queryKey: _privateDashboardQueryKey,
+        queryFn: () => privateDashboardAPI.get({
+            dashboard_id: dashboardId.value as string,
+        }),
+        enabled: computed(() => !!dashboardId.value && isPrivate.value),
+        staleTime: STALE_TIME,
+    });
+    const publicWidgetListQuery = useQuery({
+        queryKey: _publicWidgetListQueryKey,
+        queryFn: () => publicWidgetAPI.list({
+            dashboard_id: dashboardId.value as string,
+        }),
+        select: (data) => data?.results || [],
+        enabled: computed(() => !!dashboardId.value && publicDashboardQuery.isSuccess && !isPrivate.value),
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+    });
+    const privateWidgetListQuery = useQuery({
+        queryKey: _privateWidgetListQueryKey,
+        queryFn: () => privateWidgetAPI.list({
+            dashboard_id: dashboardId.value as string,
+        }),
+        select: (data) => data?.results || [],
+        enabled: computed(() => !!dashboardId.value && privateDashboardQuery.isSuccess && isPrivate.value),
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+    });
+
+    /* Functions */
+    const updateDashboardFn = (params: DashboardUpdateParams): Promise<DashboardModel> => {
+        const _isPrivate = params.dashboard_id.startsWith('private');
+        if (_isPrivate) {
+            return privateDashboardAPI.update(params as PrivateDashboardUpdateParameters);
+        }
+        return publicDashboardAPI.update(params as PublicDashboardUpdateParameters);
+    };
+    const updateWidgetFn = (params: WidgetUpdateParams): Promise<WidgetModel> => {
+        const _isPrivate = params.widget_id.startsWith('private');
+        if (_isPrivate) {
+            return privateWidgetAPI.update(params as PrivateWidgetUpdateParameters);
+        }
+        return publicWidgetAPI.update(params as PublicWidgetUpdateParameters);
+    };
+
+    /* State */
+    const isLoading = computed<boolean>(() => (isPrivate.value
+        ? (privateDashboardQuery.isFetching.value || privateWidgetListQuery.isFetching.value)
+        : (publicWidgetListQuery.isFetching.value || publicDashboardQuery.isFetching.value)));
+    const isError = computed<boolean>(() => (isPrivate.value
+        ? (privateDashboardQuery.isError.value || privateWidgetListQuery.isError.value)
+        : (publicDashboardQuery.isError.value || publicWidgetListQuery.isError.value)));
+
+    return {
+        dashboard: computed(() => (isPrivate.value ? privateDashboardQuery.data?.value : publicDashboardQuery.data?.value)),
+        widgetList: computed(() => (isPrivate.value ? privateWidgetListQuery.data?.value : publicWidgetListQuery.data?.value)),
+        isLoading,
+        isError,
+        api: {
+            publicDashboardAPI,
+            privateDashboardAPI,
+            publicWidgetAPI,
+            privateWidgetAPI,
+        },
+        keys: {
+            publicDashboardQueryKey: _publicDashboardQueryKey,
+            privateDashboardQueryKey: _privateDashboardQueryKey,
+            publicWidgetListQueryKey: _publicWidgetListQueryKey,
+            privateWidgetListQueryKey: _privateWidgetListQueryKey,
+        },
+        fetcher: {
+            updateDashboardFn,
+            updateWidgetFn,
+        },
+        queryClient,
+    };
+};
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
new file mode 100644
index 0000000000..4e56d3a64e
--- /dev/null
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
@@ -0,0 +1,43 @@
+import type { ComputedRef } from 'vue';
+import { computed, reactive } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import { ROLE_TYPE } from '@/schema/identity/role/constant';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { useUserStore } from '@/store/user/user-store';
+
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+
+interface UseDashboardManageableOptions {
+    dashboardId: ComputedRef<string|undefined>;
+}
+
+interface UseDashboardManageableReturn {
+    isManageable: ComputedRef<boolean>;
+}
+
+export const useDashboardManageable = ({ dashboardId }: UseDashboardManageableOptions): UseDashboardManageableReturn => {
+    const appContextStore = useAppContextStore();
+    const userStore = useUserStore();
+    const route = useRoute();
+    const storeState = reactive({
+        isAdminMode: computed(() => appContextStore.getters.isAdminMode),
+        isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
+    });
+
+    const { dashboard } = useDashboardDetailQuery({ dashboardId });
+
+    const isManageable = computed(() => {
+        if (storeState.isAdminMode) return true;
+        if (dashboard.value?.dashboard_id.startsWith('private')) return true;
+        // TODO: implement this condition after project dashboard is implemented
+        if (!!route.params.id && !!route.params.dashboardId) return false;
+        if (storeState.isWorkspaceOwner) return true;
+        return false;
+    });
+
+    return {
+        isManageable,
+    };
+};
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-query.ts
new file mode 100644
index 0000000000..aedef6620d
--- /dev/null
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-query.ts
@@ -0,0 +1,210 @@
+import type { Ref } from 'vue';
+import {
+    computed, type ComputedRef, reactive, watch,
+} from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+import { type QueryClient, useQuery, useQueryClient } from '@tanstack/vue-query';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import type { FolderModel, FolderUpdateParams } from '@/api-clients/dashboard/_types/folder-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import { usePrivateFolderApi } from '@/api-clients/dashboard/private-folder/composables/use-private-folder-api';
+import type { PrivateFolderUpdateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/update';
+import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import type { PublicFolderUpdateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/update';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
+import { useUserStore } from '@/store/user/user-store';
+
+const DEFAULT_LIST_DATA = { results: [] };
+const STALE_TIME = 1000 * 60 * 5;
+
+interface UseDashboardQueryReturn {
+    publicDashboardList: Ref<PublicDashboardModel[]>;
+    privateDashboardList: Ref<PrivateDashboardModel[]>;
+    publicFolderList: Ref<PublicFolderModel[]>;
+    privateFolderList: Ref<PrivateFolderModel[]>;
+    isLoading: ComputedRef<boolean>;
+    keys: {
+        publicDashboardListQueryKey: ComputedRef<QueryKey>;
+        privateDashboardListQueryKey: ComputedRef<QueryKey>;
+        publicFolderListQueryKey: ComputedRef<QueryKey>;
+        privateFolderListQueryKey: ComputedRef<QueryKey>;
+    };
+    fetcher: {
+        updateFolderFn: (args: FolderUpdateParams) => Promise<FolderModel>
+    };
+    api: {
+        publicDashboardAPI: ReturnType<typeof usePublicDashboardApi>['publicDashboardAPI'];
+        privateDashboardAPI: ReturnType<typeof usePrivateDashboardApi>['privateDashboardAPI'];
+        publicFolderAPI: ReturnType<typeof usePublicFolderApi>['publicFolderAPI'];
+        privateFolderAPI: ReturnType<typeof usePrivateFolderApi>['privateFolderAPI'];
+    };
+    queryClient: QueryClient;
+}
+
+export const useDashboardQuery = (): UseDashboardQueryReturn => {
+    const { publicDashboardAPI, publicDashboardListQueryKey } = usePublicDashboardApi();
+    const { privateDashboardAPI, privateDashboardListQueryKey } = usePrivateDashboardApi();
+    const { publicFolderAPI, publicFolderListQueryKey } = usePublicFolderApi();
+    const { privateFolderAPI, privateFolderListQueryKey } = usePrivateFolderApi();
+
+    const queryClient = useQueryClient();
+
+    const appContextStore = useAppContextStore();
+    const userWorkspaceStore = useUserWorkspaceStore();
+    const allReferenceStore = useAllReferenceStore();
+    const userStore = useUserStore();
+    const publicDashboardListApiQueryHelper = new ApiQueryHelper();
+    const publicFolderListApiQueryHelper = new ApiQueryHelper();
+
+    const _state = reactive({
+        // Store State
+        isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
+        currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
+        costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
+        userId: computed<string|undefined>(() => userStore.state.userId),
+        // state
+        publicDashboardListApiQuery: publicDashboardListApiQueryHelper.data,
+        publicFolderListApiQuery: publicFolderListApiQueryHelper.data,
+        defaultListQuery: {
+            query: {
+                sort: [{ key: 'created_at', desc: true }],
+            },
+        },
+    });
+
+    /* Query Keys */
+    const _publicDashboardListQueryKey = computed(() => [
+        ...publicDashboardListQueryKey.value,
+        _state.defaultListQuery,
+    ]);
+    const _privateDashboardListQueryKey = computed(() => [
+        ...privateDashboardListQueryKey.value,
+        _state.defaultListQuery,
+    ]);
+    const _publicFolderListQueryKey = computed(() => [
+        ...publicFolderListQueryKey.value,
+        _state.defaultListQuery,
+    ]);
+    const _privateFolderListQueryKey = computed(() => [
+        ...privateFolderListQueryKey.value,
+        _state.defaultListQuery,
+    ]);
+
+
+    /* Querys */
+    const publicDashboardListQuery = useQuery({
+        queryKey: _publicDashboardListQueryKey,
+        queryFn: () => publicDashboardAPI.list({
+            query: {
+                ..._state.publicDashboardListApiQuery,
+                sort: [{ key: 'created_at', desc: true }],
+            },
+        }),
+        select: (data) => data?.results || [],
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+    });
+    const privateDashboardListQuery = useQuery({
+        queryKey: _privateDashboardListQueryKey,
+        queryFn: () => privateDashboardAPI.list({
+            query: {
+                sort: [{ key: 'created_at', desc: true }],
+            },
+        }),
+        select: (data) => data?.results || [],
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+        enabled: computed(() => !_state.isAdminMode),
+    });
+    const publicFolderListQuery = useQuery({
+        queryKey: _publicFolderListQueryKey,
+        queryFn: () => publicFolderAPI.list({
+            query: {
+                ..._state.publicFolderListApiQuery,
+                sort: [{ key: 'created_at', desc: true }],
+            },
+        }),
+        select: (data) => data?.results || [],
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+    });
+    const privateFolderListQuery = useQuery({
+        queryKey: _privateFolderListQueryKey,
+        queryFn: () => privateFolderAPI.list({
+            query: {
+                sort: [{ key: 'created_at', desc: true }],
+            },
+        }),
+        select: (data) => data?.results || [],
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+        enabled: computed(() => !_state.isAdminMode),
+    });
+
+    /* Fetchers */
+    const updateFolderFn = (params: FolderUpdateParams): Promise<FolderModel> => {
+        const _isPrivate = params.folder_id.startsWith('private');
+        if (_isPrivate) {
+            return privateFolderAPI.update(params as PrivateFolderUpdateParameters);
+        }
+        return publicFolderAPI.update(params as PublicFolderUpdateParameters);
+    };
+
+    watch(() => _state.isAdminMode, () => {
+        publicDashboardListApiQueryHelper.setFilters([]);
+        publicFolderListApiQueryHelper.setFilters([]);
+        if (_state.isAdminMode) {
+            publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: 'DOMAIN', o: '=' });
+            publicFolderListApiQueryHelper.addFilter({ k: 'resource_group', v: 'DOMAIN', o: '=' });
+        } else {
+            publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '=' });
+            publicFolderListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '=' });
+        }
+        _state.publicDashboardListApiQuery = publicDashboardListApiQueryHelper.data;
+        _state.publicFolderListApiQuery = publicFolderListApiQueryHelper.data;
+    }, { immediate: true });
+
+    const isLoading = computed<boolean>(() => publicDashboardListQuery.isFetching.value || privateDashboardListQuery.isFetching.value
+        || publicFolderListQuery.isFetching.value || privateFolderListQuery.isFetching.value);
+
+    return {
+        publicDashboardList: publicDashboardListQuery.data,
+        privateDashboardList: privateDashboardListQuery.data,
+        publicFolderList: publicFolderListQuery.data,
+        privateFolderList: privateFolderListQuery.data,
+        isLoading,
+        keys: {
+            publicDashboardListQueryKey: _publicDashboardListQueryKey,
+            privateDashboardListQueryKey: _privateDashboardListQueryKey,
+            publicFolderListQueryKey: _publicFolderListQueryKey,
+            privateFolderListQueryKey: _privateFolderListQueryKey,
+        },
+        fetcher: {
+            updateFolderFn,
+        },
+        api: {
+            publicDashboardAPI,
+            privateDashboardAPI,
+            publicFolderAPI,
+            privateFolderAPI,
+        },
+        queryClient,
+    };
+};
+
diff --git a/apps/web/src/services/dashboards/composables/use-reformed-widget-info-list.ts b/apps/web/src/services/dashboards/composables/use-reformed-widget-info-list.ts
index 5b2f04df9b..5926f71e76 100644
--- a/apps/web/src/services/dashboards/composables/use-reformed-widget-info-list.ts
+++ b/apps/web/src/services/dashboards/composables/use-reformed-widget-info-list.ts
@@ -3,8 +3,8 @@ import { computed, reactive, toRef } from 'vue';
 
 import { flattenDeep } from 'lodash';
 
-import type { DashboardLayoutWidgetInfo } from '@/schema/dashboard/_types/dashboard-type';
-import type { WidgetConfig, WidgetSize } from '@/schema/dashboard/_types/widget-type';
+import type { DashboardLayoutWidgetInfo } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { WidgetConfig, WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 
 import {
     widgetThemeAssigner,
diff --git a/apps/web/src/services/dashboards/constants/dashboard-managed-variables-schema.ts b/apps/web/src/services/dashboards/constants/dashboard-managed-variables-schema.ts
index fbd8957792..7893603229 100644
--- a/apps/web/src/services/dashboards/constants/dashboard-managed-variables-schema.ts
+++ b/apps/web/src/services/dashboards/constants/dashboard-managed-variables-schema.ts
@@ -1,4 +1,4 @@
-import type { DashboardVariablesSchema } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardVariablesSchema } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import {
     MANAGED_VARIABLE_MODEL_KEY_MAP,
diff --git a/apps/web/src/services/dashboards/constants/dashboard-vars-schema-preset.ts b/apps/web/src/services/dashboards/constants/dashboard-vars-schema-preset.ts
index ad46f2b7e0..21b2c0c4bf 100644
--- a/apps/web/src/services/dashboards/constants/dashboard-vars-schema-preset.ts
+++ b/apps/web/src/services/dashboards/constants/dashboard-vars-schema-preset.ts
@@ -1,4 +1,4 @@
-import type { DashboardGlobalVariablesSchema } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardGlobalVariablesSchema } from '@/api-clients/dashboard/_types/dashboard-type';
 
 
 
diff --git a/apps/web/src/services/dashboards/constants/widget-container-config.ts b/apps/web/src/services/dashboards/constants/widget-container-config.ts
index 2fe174df08..ff9613bc5e 100644
--- a/apps/web/src/services/dashboards/constants/widget-container-config.ts
+++ b/apps/web/src/services/dashboards/constants/widget-container-config.ts
@@ -1,4 +1,4 @@
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import type { WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
 
diff --git a/apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.test.ts b/apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.test.ts
index 62895d9eff..ca5f10faa7 100644
--- a/apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.test.ts
+++ b/apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect } from 'vitest';
 
-import type { WidgetSize } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 
 import {
     WIDGET_CONTAINER_MAX_WIDTH,
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-global-variables-helper.ts b/apps/web/src/services/dashboards/helpers/dashboard-global-variables-helper.ts
index c8925d911f..d0464b125a 100644
--- a/apps/web/src/services/dashboards/helpers/dashboard-global-variables-helper.ts
+++ b/apps/web/src/services/dashboards/helpers/dashboard-global-variables-helper.ts
@@ -1,6 +1,6 @@
 import { orderBy } from 'lodash';
 
-import type { DashboardGlobalVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 
 import { DASHBOARD_VARS_SCHEMA_PRESET } from '@/services/dashboards/constants/dashboard-vars-schema-preset';
 
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-share-helper.ts b/apps/web/src/services/dashboards/helpers/dashboard-share-helper.ts
index b0d017e637..b9b3b2793a 100644
--- a/apps/web/src/services/dashboards/helpers/dashboard-share-helper.ts
+++ b/apps/web/src/services/dashboards/helpers/dashboard-share-helper.ts
@@ -2,13 +2,13 @@ import { cloneDeep, flattenDeep } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { DashboardLayout } from '@/schema/dashboard/_types/dashboard-type';
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetModel } from '@/schema/dashboard/private-widget/model';
-import type { DataTableListParameters } from '@/schema/dashboard/public-data-table/api-verbs/list';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetModel } from '@/schema/dashboard/public-widget/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { DashboardLayout } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+import type { DataTableListParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/list';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
 
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-tree-data-helper.ts b/apps/web/src/services/dashboards/helpers/dashboard-tree-data-helper.ts
index 0f42896012..cfa0b5ff8f 100644
--- a/apps/web/src/services/dashboards/helpers/dashboard-tree-data-helper.ts
+++ b/apps/web/src/services/dashboards/helpers/dashboard-tree-data-helper.ts
@@ -1,7 +1,7 @@
 import type { TreeNode } from '@cloudforet/mirinae/src/data-display/tree/tree-view/type';
 
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
-import type { FolderModel } from '@/schema/dashboard/_types/folder-type';
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
 
 import type { DashboardTreeDataType, DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
 
@@ -120,3 +120,27 @@ export const getSelectedDataTableItems = (folderItems: FolderModel[], dashboardI
 
     return _results;
 };
+
+export const isPublicControlButtonDisabled = (dashboardItems: DashboardModel[], selectedIdMap: Record<string, boolean>): boolean => {
+    const _selectedIdList: string[] = Object.entries(selectedIdMap).filter(([, isSelected]) => isSelected).map(([id]) => id);
+    if (_selectedIdList.length === 0) return true;
+    let result = false;
+    _selectedIdList.forEach((id) => {
+        if (result) return;
+        const _isFolder = id.includes('folder');
+        if (_isFolder) {
+            const _childrenDashboards = dashboardItems.filter((d) => d.folder_id === id);
+            _childrenDashboards?.forEach((child) => {
+                if (child?.shared && child?.scope === 'WORKSPACE') {
+                    result = true;
+                }
+            });
+        } else {
+            const _dashboard = dashboardItems.find((d) => d.dashboard_id === id);
+            if (_dashboard?.shared && _dashboard?.scope === 'WORKSPACE') {
+                result = true;
+            }
+        }
+    });
+    return result;
+};
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-widget-info-helper.ts b/apps/web/src/services/dashboards/helpers/dashboard-widget-info-helper.ts
index 490c1bb1b6..361fd22a7d 100644
--- a/apps/web/src/services/dashboards/helpers/dashboard-widget-info-helper.ts
+++ b/apps/web/src/services/dashboards/helpers/dashboard-widget-info-helper.ts
@@ -2,9 +2,12 @@ import { cloneDeep, isEmpty, isEqual } from 'lodash';
 
 import { isObjectEqual } from '@cloudforet/utils';
 
+import type { DashboardLayoutWidgetInfo } from '@/api-clients/dashboard/_types/dashboard-type';
 import type {
     InheritOptions, WidgetConfig, WidgetFiltersMap, WidgetOptions,
-} from '@/schema/dashboard/_types/widget-type';
+} from '@/api-clients/dashboard/_types/widget-type';
+
+import getRandomId from '@/lib/random-id-generator';
 
 import { getInheritingOptionKeys } from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
 import { getWidgetOptionKeyByVariableKey } from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
@@ -67,3 +70,9 @@ export const getUpdatedWidgetInfo = (widgetConfig: WidgetConfig, mergedWidgetInf
         schema_properties: schemaProperties.length ? schemaProperties : undefined,
     };
 };
+
+// only for 1.0 legacy dashboard
+export const getDashboardWidgetInfoList = (widgets: DashboardLayoutWidgetInfo[] = []) => widgets.map((info) => ({
+    ...info,
+    widget_key: info.widget_key ?? getRandomId(),
+})) ?? [];
diff --git a/apps/web/src/services/dashboards/helpers/widget-width-helper.ts b/apps/web/src/services/dashboards/helpers/widget-width-helper.ts
index 1d227186df..5a2e6a3bf3 100644
--- a/apps/web/src/services/dashboards/helpers/widget-width-helper.ts
+++ b/apps/web/src/services/dashboards/helpers/widget-width-helper.ts
@@ -1,7 +1,7 @@
 import { sum, max } from 'lodash';
 
-import { WIDGET_SIZE } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetSize } from '@/schema/dashboard/_types/widget-type';
+import { WIDGET_SIZE } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 
 import {
     WIDGET_WIDTH_RANGE_LIST,
diff --git a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
index baad00dda5..9c5801cdbb 100644
--- a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
@@ -4,14 +4,17 @@ import {
     onUnmounted, reactive, ref, watch,
 } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
+
 import {
     PDivider, PI,
 } from '@cloudforet/mirinae';
 
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { SpaceRouter } from '@/router';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 
 import { useBreadcrumbs } from '@/common/composables/breadcrumbs';
 import ErrorHandler from '@/common/composables/error/errorHandler';
@@ -29,20 +32,18 @@ import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-det
 import DashboardWidgetContainerV2 from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue';
 import DashboardVariables from '@/services/dashboards/components/legacy/DashboardVariables.vue';
 import DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
-
-
 interface Props {
     dashboardId: string;
 }
 const props = defineProps<Props>();
 
 const gnbStore = useGnbStore();
-const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailGetters = dashboardDetailStore.getters;
 const dashboardDetailState = dashboardDetailStore.state;
 const widgetGenerateStore = useWidgetGenerateStore();
 const { breadcrumbs } = useBreadcrumbs();
@@ -51,52 +52,100 @@ const { getProperRouteLocation } = useProperRouteLocation();
 const appContextStore = useAppContextStore();
 const widgetContainerRef = ref<typeof DashboardWidgetContainer|null>(null);
 
+/* Query */
+const {
+    dashboard,
+    widgetList,
+    isError,
+    isLoading,
+    keys,
+    fetcher,
+    queryClient,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => props.dashboardId),
+});
+const { isManageable } = useDashboardManageable({
+    dashboardId: computed(() => props.dashboardId),
+});
+
 const state = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     favoriteOptions: computed<FavoriteOptions>(() => ({
         type: FAVORITE_TYPE.DASHBOARD,
         id: props.dashboardId,
     })),
-    dashboardVariablesLoading: false,
+    isDeprecatedDashboard: computed(() => dashboard.value?.version === '1.0'),
 });
 
-const getDashboardDataAndListWidget = async (dashboardId: string) => {
-    try {
-        await dashboardDetailStore.getDashboardInfo({ dashboardId, fetchWidgets: true });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        await SpaceRouter.router.push(getProperRouteLocation({ name: DASHBOARDS_ROUTE._NAME }));
-    }
-};
-
 /* Event */
 const handleRefresh = async () => {
-    if (dashboardDetailGetters.dashboardInfo?.version !== '1.0') await dashboardDetailStore.listDashboardWidgets();
+    if (dashboard.value?.version !== '1.0') {
+        const isPrivate = props.dashboardId.startsWith('private');
+        const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+        await queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value });
+    }
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
 };
-const handleUpdateDashboardVariables = async (params) => {
-    state.dashboardVariablesLoading = true;
-    try {
-        await dashboardStore.updateDashboard(props.dashboardId, params);
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dashboardVariablesLoading = false;
-    }
+const handleUpdateDashboardVariables = (params) => {
+    updateDashboard({
+        dashboard_id: props.dashboardId,
+        ...params,
+    });
 };
 
-watch(() => props.dashboardId, async (dashboardId, prevDashboardId) => {
-    /* NOTE: The dashboard data is reset in first entering case */
-    if (dashboardId && !prevDashboardId) { // this includes all three cases
-        dashboardDetailStore.reset();
-    }
-    await getDashboardDataAndListWidget(dashboardId);
+
+const { mutate: updateDashboard, isPending: dashboardUpdateLoading } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardQueryKey : keys.publicDashboardQueryKey;
+            queryClient.setQueryData(dashboardQueryKey.value, (oldDashboard) => {
+                if (!oldDashboard) return _dashboard;
+                return {
+                    ...oldDashboard,
+                    vars: { ..._dashboard.vars },
+                };
+            });
+        },
+        onError: (e) => {
+            ErrorHandler.handleError(e);
+        },
+    },
+);
+
+
+watch(() => props.dashboardId, async (dashboardId) => {
     // Set Dashboard Detail Custom breadcrumbs
-    gnbStore.setBreadcrumbs(breadcrumbs.value);
+    if (dashboardId) { // this includes all three cases
+        gnbStore.setBreadcrumbs(breadcrumbs.value);
+    }
 }, { immediate: true });
 
+watch(dashboard, (_dashboard) => {
+    if (_dashboard) {
+        dashboardDetailStore.reset();
+        if (state.isDeprecatedDashboard) {
+            dashboardDetailStore.setDashboardInfoStoreState(_dashboard);
+        } else {
+            dashboardDetailStore.setDashboardInfoStoreStateV2(_dashboard);
+        }
+    }
+});
+watch(widgetList, (_widgetList) => {
+    if (_widgetList.length) {
+        dashboardDetailStore.setDashboardWidgets(_widgetList);
+    }
+});
+watch(isError, (error) => {
+    if (error) {
+        ErrorHandler.handleError(error);
+        SpaceRouter.router.push(getProperRouteLocation({ name: DASHBOARDS_ROUTE._NAME }));
+    }
+});
+
 watch(() => state.favoriteOptions, (favoriteOptions) => {
     gnbStore.setFavoriteItemId(favoriteOptions);
 }, { immediate: true });
@@ -112,7 +161,7 @@ onUnmounted(() => {
 <template>
     <div class="dashboard-detail-page">
         <portal-target name="dashboard-detail-page" />
-        <div v-if="dashboardDetailGetters.isDeprecatedDashboard"
+        <div v-if="state.isDeprecatedDashboard"
              class="deprecated-banner"
         >
             <p-i name="ic_limit-filled"
@@ -139,23 +188,23 @@ onUnmounted(() => {
                 </div>
                 <div class="right-part">
                     <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
-                                                :loading="dashboardDetailState.loadingWidgets"
+                                                :loading="isLoading || dashboardUpdateLoading"
                                                 @refresh="handleRefresh"
                     />
                 </div>
             </div>
-            <div v-if="!dashboardDetailState.loadingDashboard"
+            <div v-if="!dashboardUpdateLoading"
                  class="dashboard-selectors"
             >
-                <dashboard-variables v-if="dashboardDetailGetters.isDeprecatedDashboard"
+                <dashboard-variables v-if="state.isDeprecatedDashboard"
                                      class="variable-selector-wrapper"
-                                     :loading="state.dashboardVariablesLoading"
+                                     :loading="dashboardUpdateLoading"
                                      @update="handleUpdateDashboardVariables"
                 />
                 <dashboard-variables-v2 v-else
                                         class="variable-selector-wrapper"
-                                        :disable-save-button="dashboardDetailGetters.disableManageButtons"
-                                        :loading="state.dashboardVariablesLoading"
+                                        :disable-save-button="!isManageable"
+                                        :loading="dashboardUpdateLoading"
                                         @update="handleUpdateDashboardVariables"
                 />
             </div>
@@ -163,7 +212,7 @@ onUnmounted(() => {
         <div />
 
         <div class="widget-container-body">
-            <dashboard-widget-container v-if="dashboardDetailGetters.isDeprecatedDashboard"
+            <dashboard-widget-container v-if="state.isDeprecatedDashboard"
                                         ref="widgetContainerRef"
             />
             <dashboard-widget-container-v2 v-else
diff --git a/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue b/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
index 1f1724007d..6ca4736f01 100644
--- a/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
@@ -21,9 +21,9 @@ import type {
 } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { DashboardListParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { DashboardListParams, DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
@@ -39,6 +39,11 @@ import { useQueryTags } from '@/common/composables/query-tags';
 import DashboardFolderTree from '@/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue';
 import DashboardFolderTreeTitle from '@/services/dashboards/components/dashboard-folder/DashboardFolderTreeTitle.vue';
 import DashboardMainBoardList from '@/services/dashboards/components/dashboard-main/DashboardMainBoardList.vue';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+import {
+    getDashboardTreeData,
+    isPublicControlButtonDisabled,
+} from '@/services/dashboards/helpers/dashboard-tree-data-helper';
 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';
@@ -46,7 +51,6 @@ import type { DashboardTreeDataType } from '@/services/dashboards/types/dashboar
 const appContextStore = useAppContextStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
-const dashboardPageControlGetters = dashboardPageControlStore.getters;
 const userStore = useUserStore();
 
 const { hasReadWriteAccess } = usePageEditableStatus();
@@ -62,43 +66,94 @@ const queryTagsHelper = useQueryTags({
     }],
 });
 
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+    publicFolderList,
+    privateFolderList,
+    isLoading,
+} = useDashboardQuery();
+
 const storeState = reactive({
     isWorkspaceOwner: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
     isWorkspaceMember: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
     isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
 });
+
+
 const state = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
+    publicDashboardItems: computed(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    publicFolderItems: computed(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed(() => privateFolderList.value),
+    deprecatedDashboardItems: computed(() => {
+        const _public = publicDashboardList.value.filter((d) => d.version === '1.0');
+        const _private = privateDashboardList.value.filter((d) => d.version === '1.0');
+        return [..._public, ..._private];
+    }),
+    publicDashboardTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => getDashboardTreeData(publicFolderList.value, publicDashboardList.value, dashboardPageControlState.newIdList)),
+    privateDashboardTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => getDashboardTreeData(privateFolderList.value, privateDashboardList.value, dashboardPageControlState.newIdList)),
+    publicTreeControlButtonDisableMap: computed<Record<string, boolean>>(() => {
+        if (storeState.isAdminMode) {
+            const _selectedPublicIdList: string[] = Object.entries(dashboardPageControlState.selectedPublicIdMap).filter(([, isSelected]) => isSelected).map(([id]) => id);
+            return {
+                clone: _selectedPublicIdList.length === 0,
+                move: _selectedPublicIdList.length === 0,
+                delete: _selectedPublicIdList.length === 0,
+            };
+        }
+        const _selectedPublicIdList: string[] = Object.entries(dashboardPageControlState.selectedPublicIdMap).filter(([, isSelected]) => isSelected).map(([id]) => id);
+        return {
+            clone: _selectedPublicIdList.length === 0,
+            move: isPublicControlButtonDisabled(state.publicDashboardItems, dashboardPageControlState.selectedPublicIdMap),
+            delete: isPublicControlButtonDisabled(state.publicDashboardItems, dashboardPageControlState.selectedPublicIdMap),
+        };
+    }),
+    privateTreeControlButtonDisableMap: computed<Record<string, boolean>>(() => {
+        const _selectedPrivateIdList: string[] = Object.entries(dashboardPageControlState.selectedPrivateIdMap).filter(([, isSelected]) => isSelected).map(([id]) => id);
+        return {
+            clone: _selectedPrivateIdList.length === 0,
+            move: _selectedPrivateIdList.length === 0,
+            delete: _selectedPrivateIdList.length === 0,
+        };
+    }),
+
     refinedPublicTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => {
         if (state.isSearching.PUBLIC) return [];
-        if (!state.searchFilters.length) return dashboardPageControlGetters.publicDashboardTreeData;
-        return getSearchedTreeData(dashboardPageControlGetters.publicDashboardTreeData, state.searchedDashboardIdList);
+        if (!state.searchFilters.length) return state.publicDashboardTreeData;
+        return getSearchedTreeData(state.publicDashboardTreeData, state.searchedDashboardIdList);
     }),
     refinedPrivateTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => {
         if (state.isSearching.PRIVATE) return [];
-        if (!state.searchFilters.length) return dashboardPageControlGetters.privateDashboardTreeData;
-        return getSearchedTreeData(dashboardPageControlGetters.privateDashboardTreeData, state.searchedDashboardIdList);
+        if (!state.searchFilters.length) return state.privateDashboardTreeData;
+        return getSearchedTreeData(state.privateDashboardTreeData, state.searchedDashboardIdList);
     }),
     isDashboardExist: computed<boolean>(() => {
         if (state.isAdminMode) {
-            return !!dashboardPageControlGetters.publicDashboardItems.length || !!dashboardPageControlGetters.publicFolderItems.length;
+            return !!state.publicDashboardItems.length || !!state.publicFolderItems.length;
         }
         return !!(
-            dashboardPageControlGetters.publicDashboardItems.length
-            || dashboardPageControlGetters.privateDashboardItems.length
-            || dashboardPageControlGetters.deprecatedDashboardItems.length
-            || dashboardPageControlGetters.publicFolderItems.length
-            || dashboardPageControlGetters.privateFolderItems.length
+            state.publicDashboardItems.length
+            || state.privateDashboardItems.length
+            || state.deprecatedDashboardItems.length
+            || state.publicFolderItems.length
+            || state.privateFolderItems.length
         );
     }),
     treeCollapseMap: {
         public: false,
         private: false,
     } as Record<string, boolean>,
-    publicTreeControlButtonDisableMap: computed<Record<string, boolean>>(() => {
-        if (storeState.isAdminMode) return dashboardPageControlGetters.adminTreeControlButtonDisableMap;
-        return dashboardPageControlGetters.publicTreeControlButtonDisableMap;
-    }),
+
     // search
     isSearching: {
         PUBLIC: false,
@@ -299,7 +354,7 @@ onUnmounted(() => {
                    @change="handleQueryChange"
                    @refresh="handleQueryChange()"
         />
-        <p-data-loader :loading="dashboardPageControlGetters.loading"
+        <p-data-loader :loading="isLoading"
                        :data="state.isDashboardExist"
                        class="dashboard-list-wrapper"
         >
@@ -352,7 +407,7 @@ onUnmounted(() => {
                 <dashboard-folder-tree v-if="!state.treeCollapseMap.private"
                                        :selected-id-map="dashboardPageControlState.selectedPrivateIdMap"
                                        :dashboard-tree-data="state.refinedPrivateTreeData"
-                                       :button-disable-map="dashboardPageControlGetters.privateTreeControlButtonDisableMap"
+                                       :button-disable-map="state.privateTreeControlButtonDisableMap"
                                        show-control-buttons
                                        @update:selectedIdMap="handleUpdateSelectedIdMap('PRIVATE', $event)"
                                        @click-clone="dashboardPageControlStore.openBundleCloneModal('PRIVATE')"
@@ -360,10 +415,10 @@ onUnmounted(() => {
                                        @click-move="dashboardPageControlStore.openBundleMoveModal('PRIVATE')"
                 />
             </div>
-            <dashboard-main-board-list v-if="dashboardPageControlGetters.deprecatedDashboardItems.length"
+            <dashboard-main-board-list v-if="state.deprecatedDashboardItems.length"
                                        class="dashboard-list"
                                        :field-title="$t('DASHBOARDS.ALL_DASHBOARDS.DEPRECATED')"
-                                       :dashboard-list="dashboardPageControlGetters.deprecatedDashboardItems"
+                                       :dashboard-list="state.deprecatedDashboardItems"
                                        is-collapsed
             />
         </p-data-loader>
diff --git a/apps/web/src/services/dashboards/stores/dashboard-create-page-store.ts b/apps/web/src/services/dashboards/stores/dashboard-create-page-store.ts
index bb2132fc16..ef246438a6 100644
--- a/apps/web/src/services/dashboards/stores/dashboard-create-page-store.ts
+++ b/apps/web/src/services/dashboards/stores/dashboard-create-page-store.ts
@@ -4,8 +4,8 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { DashboardType, AdminDashboardType } from '@/schema/dashboard/_types/dashboard-type';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { DashboardType, AdminDashboardType } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { DashboardTemplateListParameters } from '@/schema/repository/dashboard-template/api-verbs/list';
 import type { DashboardTemplateModel } from '@/schema/repository/dashboard-template/model';
 
diff --git a/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts b/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts
index 1f5f158c17..c3ca17a807 100644
--- a/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts
+++ b/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts
@@ -6,10 +6,8 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { DashboardGlobalVariable } from '@/schema/dashboard/_types/dashboard-global-variable-type';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type {
-    DashboardLayout,
     DashboardLayoutWidgetInfo,
     DashboardModel,
     DashboardOptions,
@@ -18,19 +16,18 @@ import type {
     DashboardVariablesSchema,
     DashboardVars,
     DashboardGlobalVariablesSchema,
-} from '@/schema/dashboard/_types/dashboard-type';
-import type { PrivateDashboardGetParameters } from '@/schema/dashboard/private-dashboard/api-verbs/get';
-import type { PrivateDashboardModel } from '@/schema/dashboard/private-dashboard/model';
-import type { PrivateWidgetListParameters } from '@/schema/dashboard/private-widget/api-verbs/list';
-import type { PrivateWidgetModel } from '@/schema/dashboard/private-widget/model';
-import type { PublicDashboardGetParameters } from '@/schema/dashboard/public-dashboard/api-verbs/get';
-import type { PublicDashboardModel } from '@/schema/dashboard/public-dashboard/model';
-import type { PublicWidgetListParameters } from '@/schema/dashboard/public-widget/api-verbs/list';
-import type { PublicWidgetModel } from '@/schema/dashboard/public-widget/model';
+} from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDashboardGetParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/get';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PrivateWidgetListParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/list';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/get';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import type { PublicWidgetListParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/list';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import getRandomId from '@/lib/random-id-generator';
@@ -40,8 +37,6 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { MANAGED_DASHBOARD_VARIABLES_SCHEMA } from '@/services/dashboards/constants/dashboard-managed-variables-schema';
 
-
-
 type WidgetModel = PublicWidgetModel | PrivateWidgetModel;
 type GetDashboardParameters = PublicDashboardGetParameters | PrivateDashboardGetParameters;
 const DEFAULT_REFRESH_INTERVAL = '5m';
@@ -86,8 +81,6 @@ const refineProjectDashboardVariables = (variables: DashboardVariables, projectI
 };
 
 export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info', () => {
-    const dashboardStore = useDashboardStore();
-    const dashboardState = dashboardStore.state;
     const appContextStore = useAppContextStore();
     const userStore = useUserStore();
     const storeState = reactive({
@@ -119,29 +112,26 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
     });
 
     const getters = reactive({
-        dashboardInfo: computed<PublicDashboardModel|PrivateDashboardModel|undefined>(() => {
-            const _allDashboardItems = [...dashboardState.privateDashboardItems, ...dashboardState.publicDashboardItems];
-            return _allDashboardItems.find((d) => d.dashboard_id === state.dashboardId) || state.dashboard;
-        }),
-        dashboardName: computed<string>(() => getters.dashboardInfo?.name || ''),
-        dashboardLabels: computed<string[]>(() => getters.dashboardInfo?.labels || []),
-        dashboardLayouts: computed<DashboardLayout[]>(() => getters.dashboardInfo?.layouts || []),
-        dashboardVarsSchema: computed<DashboardVariablesSchema>(() => getters.dashboardInfo?.vars_schema || {}),
-        dashboardVarsSchemaProperties: computed<Record<string, DashboardGlobalVariable>>(() => getters.dashboardInfo?.vars_schema?.properties || {}),
-        isPrivate: computed<boolean>(() => !!state.dashboardId?.startsWith('private')),
-        //
-        isAllVariablesInitialized: computed(() => Object.values(state.variablesInitMap).every((d) => d === true)),
-        isDeprecatedDashboard: computed<boolean>(() => getters.dashboardInfo?.version === '1.0'),
-        disableManageButtons: computed<boolean>(() => {
-            if (state.projectId) return true;
-            if (state.dashboardId?.startsWith('private')) return false;
-            if (storeState.isAdminMode) return false;
-            if (storeState.isWorkspaceOwner) {
-                if (getters.dashboardInfo?.workspace_id === '*') return true;
-                return false;
+        refinedVars: computed<DashboardVars>(() => {
+            const isProjectSharedDashboard = !!state.projectId;
+            const _vars: DashboardVars = cloneDeep(state.vars);
+            if (isProjectSharedDashboard && !!state.projectId) {
+                _vars.project = [state.projectId];
+            }
+            if (storeState.isAdminMode) {
+                if (state.selectedWorkspaceId && state.selectedWorkspaceId !== 'all') {
+                    _vars[WorkspaceVariableModel.meta.idKey] = [state.selectedWorkspaceId];
+                } else {
+                    delete _vars[WorkspaceVariableModel.meta.idKey];
+                }
+            } else {
+                delete _vars[WorkspaceVariableModel.meta.idKey];
             }
-            return true;
+            return _vars;
         }),
+
+        // only for 1.0 legacy dashboard
+        isAllVariablesInitialized: computed(() => Object.values(state.variablesInitMap).every((d) => d === true)),
         refinedVariablesSchema: computed<DashboardVariablesSchema>(() => {
             const _storedVariablesSchema = cloneDeep(state.variablesSchema);
             const _refinedVariablesSchema: DashboardVariablesSchema = {
@@ -167,26 +157,8 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
             });
             return _refinedVariablesSchema;
         }),
-        refinedVars: computed<DashboardVars>(() => {
-            const isProjectSharedDashboard = !!state.projectId;
-            const _vars: DashboardVars = cloneDeep(state.vars);
-            if (isProjectSharedDashboard && !!state.projectId) {
-                _vars.project = [state.projectId];
-            }
-            if (storeState.isAdminMode) {
-                if (state.selectedWorkspaceId && state.selectedWorkspaceId !== 'all') {
-                    _vars[WorkspaceVariableModel.meta.idKey] = [state.selectedWorkspaceId];
-                } else {
-                    delete _vars[WorkspaceVariableModel.meta.idKey];
-                }
-            } else {
-                delete _vars[WorkspaceVariableModel.meta.idKey];
-            }
-            return _vars;
-        }),
-        // only for 1.0 legacy dashboard
         dashboardWidgetInfoList: computed<DashboardLayoutWidgetInfo[]>(() => {
-            const _dashboardWidget: DashboardLayoutWidgetInfo[] = getters.dashboardInfo?.layouts?.[0].widgets || [];
+            const _dashboardWidget: DashboardLayoutWidgetInfo[] = state.dashboard?.layouts?.[0].widgets || [];
             return _dashboardWidget.map((info) => ({
                 ...info,
                 widget_key: info.widget_key ?? getRandomId(),
@@ -220,11 +192,14 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
         state.showDateRangeNotification = true;
         state.selectedWorkspaceId = undefined;
     };
-    const _setDashboardInfoStoreStateV2 = (dashboardInfo?: DashboardModel) => {
+    const setDashboardInfoStoreStateV2 = (dashboardInfo?: DashboardModel) => {
         if (!dashboardInfo || isEmpty(dashboardInfo)) {
             console.error('setDashboardInfo failed', dashboardInfo);
             return;
         }
+        if (!!dashboardInfo.project_id && dashboardInfo.project_id !== '*') {
+            state.projectId = dashboardInfo.project_id;
+        }
         state.vars = dashboardInfo.vars ?? {};
         state.dashboard = dashboardInfo;
         const _dashboardInfo = cloneDeep(dashboardInfo);
@@ -237,7 +212,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
             refresh_interval_option: _dashboardInfo.options?.refresh_interval_option ?? DEFAULT_REFRESH_INTERVAL,
         };
     };
-    const _setDashboardInfoStoreState = (dashboardInfo?: DashboardModel) => {
+    const setDashboardInfoStoreState = (dashboardInfo?: DashboardModel) => {
         if (!dashboardInfo || isEmpty(dashboardInfo)) {
             console.error('setDashboardInfo failed', dashboardInfo);
             return;
@@ -253,8 +228,8 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
             },
             refresh_interval_option: _dashboardInfo.options?.refresh_interval_option ?? DEFAULT_REFRESH_INTERVAL,
         };
-        if (!['*', '-'].includes(_dashboardInfo.project_id)) {
-            state.projectId = _dashboardInfo.project_id;
+        if (!['*', '-'].includes(_dashboardInfo?.project_id)) {
+            state.projectId = _dashboardInfo?.project_id;
         }
 
         // variables, variables schema
@@ -288,9 +263,9 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
             const { status, response } = await fetcher<GetDashboardParameters, DashboardModel>(params);
             if (status === 'succeed') {
                 if (response.version === '1.0') {
-                    _setDashboardInfoStoreState(response);
+                    setDashboardInfoStoreState(response);
                 } else {
-                    _setDashboardInfoStoreStateV2(response);
+                    setDashboardInfoStoreStateV2(response);
                 }
                 if (fetchWidgets) {
                     await listDashboardWidgets();
@@ -303,21 +278,10 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
             state.loadingDashboard = false;
         }
     };
-    const deleteDashboardWidget = async (widgetId?: string) => {
-        if (!widgetId) return;
-        const _dashboardLayouts = cloneDeep(getters.dashboardLayouts ?? []);
-        const deletedWidgetIndex = _dashboardLayouts[0]?.widgets?.findIndex((d) => d === widgetId);
-        if (!deletedWidgetIndex || deletedWidgetIndex === -1) return;
-        _dashboardLayouts[0]?.widgets?.splice(deletedWidgetIndex, 1);
-        await dashboardStore.updateDashboard(state.dashboardId as string, {
-            dashboard_id: state.dashboardId || '',
-            layouts: _dashboardLayouts,
-        });
-    };
     // HACK: only for 1.0 dashboard
     const resetVariables = (originVariables?: DashboardVariables, originVariablesSchema?: DashboardVariablesSchema) => {
-        const _originVariables: DashboardVariables = originVariables ?? getters.dashboardInfo?.variables ?? {};
-        const _originVariablesSchema: DashboardVariablesSchema = originVariablesSchema ?? getters.dashboardInfo?.variables_schema ?? { properties: {}, order: [] };
+        const _originVariables: DashboardVariables = originVariables ?? state.variables ?? {};
+        const _originVariablesSchema: DashboardVariablesSchema = originVariablesSchema ?? state.variablesSchema ?? { properties: {}, order: [] };
 
         // reset variables schema
         let _variableSchema = cloneDeep(state.variablesSchema);
@@ -346,10 +310,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
         setVariables(_variables);
         setVariablesInitMap(_variablesInitMap);
     };
-    //
-    const deleteDashboard = async (dashboardId: string) => {
-        await dashboardStore.deleteDashboard(dashboardId);
-    };
+    // HACK: only for Project Dashboard
     const listDashboardWidgets = async () => {
         if (!state.dashboardId) return;
         try {
@@ -360,7 +321,6 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
             const res = await fetcher<PublicWidgetListParameters|PrivateWidgetListParameters, ListResponse<WidgetModel>>({
                 dashboard_id: state.dashboardId,
             });
-            // state.dashboardWidgets = migrateLegacyWidgetOptions(res.results || []);
             state.dashboardWidgets = res.results || [];
             return;
         } catch (e) {
@@ -383,10 +343,10 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
     const actions = {
         reset,
         getDashboardInfo,
-        deleteDashboardWidget,
         resetVariables,
-        deleteDashboard,
         listDashboardWidgets,
+        setDashboardInfoStoreStateV2,
+        setDashboardInfoStoreState,
     };
 
     return {
diff --git a/apps/web/src/services/dashboards/stores/dashboard-page-control-store.ts b/apps/web/src/services/dashboards/stores/dashboard-page-control-store.ts
index 60d35de436..b2c118f8ee 100644
--- a/apps/web/src/services/dashboards/stores/dashboard-page-control-store.ts
+++ b/apps/web/src/services/dashboards/stores/dashboard-page-control-store.ts
@@ -1,62 +1,10 @@
-import { computed, reactive } from 'vue';
+import { reactive } from 'vue';
 
 import { defineStore } from 'pinia';
 
 import type { QueryTag } from '@cloudforet/mirinae/src/controls/search/query-search-tags/type';
-import type { TreeNode } from '@cloudforet/mirinae/src/data-display/tree/tree-view/type';
-
-import type { DashboardModel } from '@/schema/dashboard/_types/dashboard-type';
-import type { FolderModel } from '@/schema/dashboard/_types/folder-type';
-import type { PrivateDashboardModel } from '@/schema/dashboard/private-dashboard/model';
-import type { PrivateFolderModel } from '@/schema/dashboard/private-folder/model';
-import type { PublicDashboardModel } from '@/schema/dashboard/public-dashboard/model';
-import type { PublicFolderModel } from '@/schema/dashboard/public-folder/model';
-import { ROLE_TYPE } from '@/schema/identity/role/constant';
-
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
-import { useUserStore } from '@/store/user/user-store';
-
-import {
-    getDashboardTreeData,
-} from '@/services/dashboards/helpers/dashboard-tree-data-helper';
-import type { DashboardTreeDataType } from '@/services/dashboards/types/dashboard-folder-type';
-
-
-
-const _isPublicControlButtonDisabled = (dashboardItems: DashboardModel[], selectedIdMap: Record<string, boolean>): boolean => {
-    const _selectedIdList: string[] = Object.entries(selectedIdMap).filter(([, isSelected]) => isSelected).map(([id]) => id);
-    if (_selectedIdList.length === 0) return true;
-    let result = false;
-    _selectedIdList.forEach((id) => {
-        if (result) return;
-        const _isFolder = id.includes('folder');
-        if (_isFolder) {
-            const _childrenDashboards = dashboardItems.filter((d) => d.folder_id === id);
-            _childrenDashboards?.forEach((child) => {
-                if (child?.shared && child?.scope === 'WORKSPACE') {
-                    result = true;
-                }
-            });
-        } else {
-            const _dashboard = dashboardItems.find((d) => d.dashboard_id === id);
-            if (_dashboard?.shared && _dashboard?.scope === 'WORKSPACE') {
-                result = true;
-            }
-        }
-    });
-    return result;
-};
 
 export const useDashboardPageControlStore = defineStore('page-dashboard-control', () => {
-    const appContextStore = useAppContextStore();
-    const dashboardStore = useDashboardStore();
-    const dashboardState = dashboardStore.state;
-    const userStore = useUserStore();
-    const storeState = reactive({
-        isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-        isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
-    });
     const state = reactive({
         // folder
         folderFormModalVisible: false,
@@ -81,58 +29,6 @@ export const useDashboardPageControlStore = defineStore('page-dashboard-control'
         newIdList: [] as string[],
         searchQueryTags: [] as QueryTag[],
     });
-    const getters = reactive({
-        // admin
-        adminTreeControlButtonDisableMap: computed<Record<string, boolean>>(() => {
-            const _selectedPublicIdList: string[] = Object.entries(state.selectedPublicIdMap).filter(([, isSelected]) => isSelected).map(([id]) => id);
-            return {
-                clone: _selectedPublicIdList.length === 0,
-                move: _selectedPublicIdList.length === 0,
-                delete: _selectedPublicIdList.length === 0,
-            };
-        }),
-        // public (only for dashboard page, so project dashboards are excluded)
-        publicDashboardItems: computed<PublicDashboardModel[]>(() => {
-            const _v2DashboardItems = dashboardState.publicDashboardItems.filter((d) => d.version !== '1.0');
-            if (storeState.isAdminMode) return _v2DashboardItems;
-            return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-        }),
-        publicFolderItems: computed<PublicFolderModel[]>(() => {
-            if (storeState.isAdminMode) return dashboardState.publicFolderItems;
-            return dashboardState.publicFolderItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-        }),
-        publicDashboardTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => getDashboardTreeData(getters.publicFolderItems, getters.publicDashboardItems, state.newIdList)),
-        publicTreeControlButtonDisableMap: computed<Record<string, boolean>>(() => {
-            const _selectedPublicIdList: string[] = Object.entries(state.selectedPublicIdMap).filter(([, isSelected]) => isSelected).map(([id]) => id);
-            return {
-                clone: _selectedPublicIdList.length === 0,
-                move: _isPublicControlButtonDisabled(getters.publicDashboardItems, state.selectedPublicIdMap),
-                delete: _isPublicControlButtonDisabled(getters.publicDashboardItems, state.selectedPublicIdMap),
-            };
-        }),
-        // private
-        privateDashboardItems: computed<PrivateDashboardModel[]>(() => dashboardState.privateDashboardItems.filter((d) => d.version !== '1.0')),
-        privateFolderItems: computed<PrivateFolderModel[]>(() => dashboardState.privateFolderItems),
-        privateDashboardTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => getDashboardTreeData(getters.privateFolderItems, getters.privateDashboardItems, state.newIdList)),
-        privateTreeControlButtonDisableMap: computed<Record<string, boolean>>(() => {
-            const _selectedPrivateIdList: string[] = Object.entries(state.selectedPrivateIdMap).filter(([, isSelected]) => isSelected).map(([id]) => id);
-            return {
-                clone: _selectedPrivateIdList.length === 0,
-                move: _selectedPrivateIdList.length === 0,
-                delete: _selectedPrivateIdList.length === 0,
-            };
-        }),
-        // deprecated (version 1.0)
-        deprecatedDashboardItems: computed<Array<PublicDashboardModel|PrivateDashboardModel>>(() => {
-            const _publicDeprecated = dashboardState.publicDashboardItems.filter((d) => d.version === '1.0');
-            const _privateDeprecated = dashboardState.privateDashboardItems.filter((d) => d.version === '1.0');
-            return [..._publicDeprecated, ..._privateDeprecated];
-        }),
-        // etc
-        allDashboardItems: computed<DashboardModel[]>(() => [...getters.publicDashboardItems, ...getters.privateDashboardItems]),
-        allFolderItems: computed<FolderModel[]>(() => [...getters.publicFolderItems, ...getters.privateFolderItems]),
-        loading: computed<boolean>(() => dashboardState.loading),
-    });
 
     /* Mutations */
     const setFolderFormModalVisible = (visible: boolean) => {
@@ -304,7 +200,6 @@ export const useDashboardPageControlStore = defineStore('page-dashboard-control'
 
     return {
         state,
-        getters,
         ...mutations,
         ...actions,
     };
diff --git a/apps/web/src/services/dashboards/stores/widget-form-store.ts b/apps/web/src/services/dashboards/stores/widget-form-store.ts
index b1ed3abc77..9bea18d3fa 100644
--- a/apps/web/src/services/dashboards/stores/widget-form-store.ts
+++ b/apps/web/src/services/dashboards/stores/widget-form-store.ts
@@ -4,10 +4,10 @@ import { computed, reactive } from 'vue';
 import { flattenDeep, union } from 'lodash';
 import { defineStore } from 'pinia';
 
-import type { DashboardLayoutWidgetInfo } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardLayoutWidgetInfo } from '@/api-clients/dashboard/_types/dashboard-type';
 import type {
     InheritOptions, WidgetConfig, WidgetOptions,
-} from '@/schema/dashboard/_types/widget-type';
+} from '@/api-clients/dashboard/_types/widget-type';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
diff --git a/apps/web/src/services/dashboards/types/shared-dashboard-type.ts b/apps/web/src/services/dashboards/types/shared-dashboard-type.ts
index aacaddec48..3e3131a89e 100644
--- a/apps/web/src/services/dashboards/types/shared-dashboard-type.ts
+++ b/apps/web/src/services/dashboards/types/shared-dashboard-type.ts
@@ -1,9 +1,9 @@
-import type { PrivateDashboardModel } from '@/schema/dashboard/private-dashboard/model';
-import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
-import type { PrivateWidgetModel } from '@/schema/dashboard/private-widget/model';
-import type { PublicDashboardModel } from '@/schema/dashboard/public-dashboard/model';
-import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
-import type { PublicWidgetModel } from '@/schema/dashboard/public-widget/model';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
 
 
 type DashboardModel = PublicDashboardModel | PrivateDashboardModel;
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue b/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
index 2ffc77f1e9..0efb27f99f 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
@@ -13,7 +13,7 @@ import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/canc
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PDataLoader, PTextPagination } from '@cloudforet/mirinae';
 
-import { ASSET_DATA_FIELD_MAP } from '@/schema/dashboard/_constants/widget-constant';
+import { ASSET_DATA_FIELD_MAP } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { CloudServiceAnalyzeParameters } from '@/schema/inventory/cloud-service/api-verbs/analyze';
 
 import type { ReferenceMap } from '@/store/reference/type';
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/widget-config.ts b/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/widget-config.ts
index 92619a9e2b..a9da70f3a6 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/widget-config.ts
@@ -1,5 +1,5 @@
-import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 const baseCountOfFindingsWidgetConfig: WidgetConfig = {
     widget_config_id: 'baseCountOfFindings',
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue b/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue
index 15630711da..09a9dc874f 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue
@@ -16,7 +16,7 @@ import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PDataLoader, PSkeleton } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import { CHART_TYPE, COST_DATA_FIELD_MAP } from '@/schema/dashboard/_constants/widget-constant';
+import { CHART_TYPE, COST_DATA_FIELD_MAP } from '@/api-clients/dashboard/_constants/widget-constant';
 
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/widget-config.ts b/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/widget-config.ts
index 799c670423..7ce31ad63f 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/widget-config.ts
@@ -1,5 +1,5 @@
-import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 const basePieWidgetConfig: WidgetConfig = {
     widget_config_id: 'basePie',
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue b/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
index 242147e75b..632036cced 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
@@ -17,8 +17,8 @@ import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PDataLoader } from '@cloudforet/mirinae';
 import { sortArrayInObjectArray } from '@cloudforet/utils';
 
-import { CHART_TYPE, COST_DATA_FIELD_MAP, WIDGET_SIZE } from '@/schema/dashboard/_constants/widget-constant';
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import { CHART_TYPE, COST_DATA_FIELD_MAP, WIDGET_SIZE } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { currencyMoneyFormatter } from '@/lib/helper/currency-helper';
 import { usageUnitFormatter } from '@/lib/helper/usage-formatter';
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/widget-config.ts b/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/widget-config.ts
index 3ed4398a02..ffb7644e22 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/widget-config.ts
@@ -1,5 +1,5 @@
-import { GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 const baseTrendWidgetConfig: WidgetConfig = {
     widget_config_id: 'baseTrend',
diff --git a/apps/web/src/services/dashboards/widgets/_components/WidgetFrame.vue b/apps/web/src/services/dashboards/widgets/_components/WidgetFrame.vue
index 17e5d066d1..6dacde9c95 100644
--- a/apps/web/src/services/dashboards/widgets/_components/WidgetFrame.vue
+++ b/apps/web/src/services/dashboards/widgets/_components/WidgetFrame.vue
@@ -12,9 +12,9 @@ import {
 } from '@cloudforet/mirinae';
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 
-import { GRANULARITY, WIDGET_SIZE } from '@/schema/dashboard/_constants/widget-constant';
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
-import type { Granularity, WidgetSize } from '@/schema/dashboard/_types/widget-type';
+import { GRANULARITY, WIDGET_SIZE } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { Granularity, WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
 import { CURRENCY_SYMBOL } from '@/store/display/constant';
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget-lifecycle.ts b/apps/web/src/services/dashboards/widgets/_composables/use-widget-lifecycle.ts
index 651a70f312..1d2e89bbc1 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget-lifecycle.ts
+++ b/apps/web/src/services/dashboards/widgets/_composables/use-widget-lifecycle.ts
@@ -9,8 +9,8 @@ import {
     isEqual,
 } from 'lodash';
 
-import type { DashboardVariables } from '@/schema/dashboard/_types/dashboard-type';
-import type { InheritOptions } from '@/schema/dashboard/_types/widget-type';
+import type { DashboardVariables } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { InheritOptions } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
 import type { Currency } from '@/store/display/type';
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state.ts b/apps/web/src/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state.ts
index b2856e16bd..d3fd9aa713 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state.ts
+++ b/apps/web/src/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state.ts
@@ -5,8 +5,8 @@ import type {
     DashboardOptions,
     DashboardVariables,
     DashboardVariablesSchema,
-} from '@/schema/dashboard/_types/dashboard-type';
-import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/schema/dashboard/_types/widget-type';
+} from '@/api-clients/dashboard/_types/dashboard-type';
+import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetConfig } from '@/services/dashboards/widgets/_helpers/widget-config-helper';
 import { getInitialWidgetInheritOptions } from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-base-widget-state.ts b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-base-widget-state.ts
index a1453d6be9..aea1a05272 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-base-widget-state.ts
+++ b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-base-widget-state.ts
@@ -5,7 +5,7 @@ import {
 
 import type {
     AssetDataField, ChartType, CostDataField, Granularity,
-} from '@/schema/dashboard/_types/widget-type';
+} from '@/api-clients/dashboard/_types/widget-type';
 
 import { CURRENCY } from '@/store/display/constant';
 import type { Currency } from '@/store/display/type';
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters.ts b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters.ts
index 52c1f2429a..51ada452c9 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters.ts
+++ b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters.ts
@@ -6,7 +6,7 @@ import { flattenDeep, isEmpty } from 'lodash';
 import { QueryHelper } from '@cloudforet/core-lib/query';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 
-import type { WidgetFiltersMap } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-type';
 
 import type { BaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
 import type { OverridableWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-date-range.ts b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-date-range.ts
index 126da4cf67..bfbf55324a 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-date-range.ts
+++ b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-date-range.ts
@@ -4,8 +4,8 @@ import { computed, isRef } from 'vue';
 
 import dayjs from 'dayjs';
 
-import { GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import type { BaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
 import type { OverridableWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-frame.ts b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-frame.ts
index b32f8fe84b..ce84abae61 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-frame.ts
+++ b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-frame.ts
@@ -2,8 +2,8 @@ import type { ComputedRef, UnwrapRef } from 'vue';
 import { computed } from 'vue';
 import type { Location } from 'vue-router/types/router';
 
-import { WIDGET_SIZE } from '@/schema/dashboard/_constants/widget-constant';
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import { WIDGET_SIZE } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
 import type { Currency } from '@/store/display/type';
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-location.ts b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-location.ts
index 6a7740937c..98cc340315 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-location.ts
+++ b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-location.ts
@@ -6,7 +6,7 @@ import { flattenDeep } from 'lodash';
 
 import { QueryHelper } from '@cloudforet/core-lib/query';
 
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { arrayToQueryString, objectToQueryString, primitiveToQueryString } from '@/lib/router-query-string';
 
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget.ts b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget.ts
index 64c9a286d1..1f054f6266 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget.ts
+++ b/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget.ts
@@ -10,7 +10,7 @@ import type { Location } from 'vue-router/types/router';
 
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import type {
     BaseWidgetState,
diff --git a/apps/web/src/services/dashboards/widgets/_constants/managed-widget-options-schema.ts b/apps/web/src/services/dashboards/widgets/_constants/managed-widget-options-schema.ts
index 5f2cb335d6..e543991b6a 100644
--- a/apps/web/src/services/dashboards/widgets/_constants/managed-widget-options-schema.ts
+++ b/apps/web/src/services/dashboards/widgets/_constants/managed-widget-options-schema.ts
@@ -1,7 +1,7 @@
 import type {
     WidgetFilterOptionKey, WidgetOptionKey,
     WidgetOptionsSchemaProperty,
-} from '@/schema/dashboard/_types/widget-type';
+} from '@/api-clients/dashboard/_types/widget-type';
 
 import { MANAGED_VARIABLE_MODEL_KEY_MAP } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
diff --git a/apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts b/apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts
index a874208c4f..8a45742bfe 100644
--- a/apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts
+++ b/apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts
@@ -25,7 +25,7 @@ import costTrendStacked from '@/services/dashboards/widgets/cost-widgets/cost-tr
 import costTrend from '@/services/dashboards/widgets/cost-widgets/cost-trend/widget-config';
 import monthlyCost from '@/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config';
 
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 import type { BaseWidgetConfigKey, WidgetConfigKey } from '@/services/dashboards/widgets/_types/widget-list-type';
 
 export const BASE_WIDGET_CONFIG_KEYS = [
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts b/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
index 0ad7de6492..b7f20f2a23 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
@@ -1,8 +1,8 @@
 import { cloneDeep } from 'lodash';
 import { describe, expect, it } from 'vitest';
 
-import type { DashboardVariablesSchema } from '@/schema/dashboard/_types/dashboard-type';
-import type { InheritOptions, WidgetConfig, WidgetOptionsSchema } from '@/schema/dashboard/_types/widget-type';
+import type { DashboardVariablesSchema } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { InheritOptions, WidgetConfig, WidgetOptionsSchema } from '@/api-clients/dashboard/_types/widget-type';
 
 import {
     getInheritingOptionKeys,
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts b/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
index 9eaa7af7e0..61d4f9a8a7 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
@@ -1,4 +1,4 @@
-import type { WidgetFilterKey, WidgetFiltersMap } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetFilterKey, WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-type';
 
 import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboards/widgets/_helpers/widget-options-filters-helper';
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-schema-helper.test.ts b/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-schema-helper.test.ts
index a1fff9193d..611ed71954 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-schema-helper.test.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-schema-helper.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
-import type { DashboardVariableSchemaProperty, DashboardVariablesSchema } from '@/schema/dashboard/_types/dashboard-type';
-import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/schema/dashboard/_types/widget-type';
+import type { DashboardVariableSchemaProperty, DashboardVariablesSchema } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/api-clients/dashboard/_types/widget-type';
 
 import {
     getInitialSchemaProperties, getNonInheritedWidgetOptionNamesAmongUsedVariables,
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-chart-helper.ts b/apps/web/src/services/dashboards/widgets/_helpers/widget-chart-helper.ts
index 38c1290959..56b8c76c55 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-chart-helper.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/widget-chart-helper.ts
@@ -2,9 +2,9 @@ import type { TimeUnit } from '@amcharts/amcharts5/.internal/core/util/Time';
 import type { IDateAxisSettings } from '@amcharts/amcharts5/xy';
 import dayjs from 'dayjs';
 
-import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
-import type { Granularity } from '@/schema/dashboard/_types/widget-type';
+import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { Granularity } from '@/api-clients/dashboard/_types/widget-type';
 
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import type {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-config-helper.ts b/apps/web/src/services/dashboards/widgets/_helpers/widget-config-helper.ts
index 3fec3e09e5..95382780f0 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-config-helper.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/widget-config-helper.ts
@@ -1,6 +1,6 @@
 import { mergeWith } from 'lodash';
 
-import type { WidgetConfig, BaseConfigInfo } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetConfig, BaseConfigInfo } from '@/api-clients/dashboard/_types/widget-type';
 
 import { BASE_WIDGET_CONFIGS, CONSOLE_WIDGET_CONFIGS } from '@/services/dashboards/widgets/_constants/widget-config-list-constant';
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-inherit-options-helper.ts b/apps/web/src/services/dashboards/widgets/_helpers/widget-inherit-options-helper.ts
index 07a8047ad7..2ad9830bc1 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-inherit-options-helper.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/widget-inherit-options-helper.ts
@@ -1,5 +1,5 @@
-import type { DashboardVariablesSchema } from '@/schema/dashboard/_types/dashboard-type';
-import type { InheritOptions, WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import type { DashboardVariablesSchema } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { InheritOptions, WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 
 export const getInitialWidgetInheritOptions = (
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-location-helper.ts b/apps/web/src/services/dashboards/widgets/_helpers/widget-location-helper.ts
index d7acb2ce1d..33f483d994 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-location-helper.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/widget-location-helper.ts
@@ -4,7 +4,7 @@ import { cloneDeep } from 'lodash';
 
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 
-import type { WidgetFiltersMap } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-type';
 
 import { arrayToQueryString, queryStringToArray } from '@/lib/router-query-string';
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-filters-helper.ts b/apps/web/src/services/dashboards/widgets/_helpers/widget-options-filters-helper.ts
index 8a77bbe360..eea851b520 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-filters-helper.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/widget-options-filters-helper.ts
@@ -1,6 +1,6 @@
 import { cloneDeep, union } from 'lodash';
 
-import type { WidgetFiltersMap, WidgetFilterKey } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetFiltersMap, WidgetFilterKey } from '@/api-clients/dashboard/_types/widget-type';
 
 import { MANAGED_VARIABLE_MODELS } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-helper.ts b/apps/web/src/services/dashboards/widgets/_helpers/widget-options-helper.ts
index 2fbcde928c..693c64929f 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-helper.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/widget-options-helper.ts
@@ -1,9 +1,9 @@
 import { isEqual, merge } from 'lodash';
 
-import type { DashboardVariables } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardVariables } from '@/api-clients/dashboard/_types/dashboard-type';
 import type {
     InheritOptions, WidgetConfig, WidgetOptions, WidgetFilterKey,
-} from '@/schema/dashboard/_types/widget-type';
+} from '@/api-clients/dashboard/_types/widget-type';
 
 import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboards/widgets/_helpers/widget-options-filters-helper';
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-schema-generator.ts b/apps/web/src/services/dashboards/widgets/_helpers/widget-options-schema-generator.ts
index 12e0f83870..23bcb62a2d 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-schema-generator.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/widget-options-schema-generator.ts
@@ -1,4 +1,4 @@
-import type { WidgetOptionKey, WidgetOptionsSchema, WidgetOptionsSchemaProperty } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetOptionKey, WidgetOptionsSchema, WidgetOptionsSchemaProperty } from '@/api-clients/dashboard/_types/widget-type';
 
 import {
     MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES,
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-schema-helper.ts b/apps/web/src/services/dashboards/widgets/_helpers/widget-schema-helper.ts
index e2954bcde6..72b4dad4b8 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-schema-helper.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/widget-schema-helper.ts
@@ -1,9 +1,9 @@
 import { chain, get, union } from 'lodash';
 
-import type { DashboardVariablesSchema } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardVariablesSchema } from '@/api-clients/dashboard/_types/dashboard-type';
 import type {
     InheritOptions, WidgetConfig, WidgetFilterOptionKey, WidgetOptions, WidgetOptionsSchema,
-} from '@/schema/dashboard/_types/widget-type';
+} from '@/api-clients/dashboard/_types/widget-type';
 
 import { MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES, MANAGED_WIDGET_OPTIONS_SCHEMA_PROPERTIES } from '@/services/dashboards/widgets/_constants/managed-widget-options-schema';
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-table-helper.ts b/apps/web/src/services/dashboards/widgets/_helpers/widget-table-helper.ts
index fc93bb3c5a..52a580f5bd 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-table-helper.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/widget-table-helper.ts
@@ -2,9 +2,9 @@ import type { TimeUnit } from '@amcharts/amcharts5/.internal/core/util/Time';
 import dayjs from 'dayjs';
 import { cloneDeep, sortBy } from 'lodash';
 
-import { GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
-import type { Granularity } from '@/schema/dashboard/_types/widget-type';
+import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { Granularity } from '@/api-clients/dashboard/_types/widget-type';
 
 import type { ManagedVariableModelKey } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-validation-helper.ts b/apps/web/src/services/dashboards/widgets/_helpers/widget-validation-helper.ts
index 4a37e873cf..75898b3090 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-validation-helper.ts
+++ b/apps/web/src/services/dashboards/widgets/_helpers/widget-validation-helper.ts
@@ -2,13 +2,13 @@ import {
     cloneDeep, isEmpty, isEqual, union,
 } from 'lodash';
 
-import type { DashboardLayoutWidgetInfo, DashboardVariablesSchema } from '@/schema/dashboard/_types/dashboard-type';
+import type { DashboardLayoutWidgetInfo, DashboardVariablesSchema } from '@/api-clients/dashboard/_types/dashboard-type';
 import type {
     InheritOptions,
     WidgetConfig,
     WidgetFilterOptionKey,
     WidgetOptionsSchema,
-} from '@/schema/dashboard/_types/widget-type';
+} from '@/api-clients/dashboard/_types/widget-type';
 
 import { getUpdatedWidgetInfo } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
 import { getInheritingOptionKeys } from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
diff --git a/apps/web/src/services/dashboards/widgets/_types/widget-type.ts b/apps/web/src/services/dashboards/widgets/_types/widget-type.ts
index 9c973130bf..108077612a 100644
--- a/apps/web/src/services/dashboards/widgets/_types/widget-type.ts
+++ b/apps/web/src/services/dashboards/widgets/_types/widget-type.ts
@@ -5,11 +5,11 @@ import type {
     DashboardOptions,
     DashboardVariables,
     DashboardVariablesSchema,
-} from '@/schema/dashboard/_types/dashboard-type';
+} from '@/api-clients/dashboard/_types/dashboard-type';
 import type {
     InheritOptions,
     WidgetOptions, WidgetSize,
-} from '@/schema/dashboard/_types/widget-type';
+} from '@/api-clients/dashboard/_types/widget-type';
 
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/widget-config.ts b/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/widget-config.ts
index 86d55f5b6c..4ef09eecb0 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/widget-config.ts
@@ -1,4 +1,4 @@
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config.ts b/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
index d138286c09..8a7ff243ff 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
@@ -1,5 +1,5 @@
-import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts b/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
index 7dab775eef..64ee6aaa85 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
@@ -1,5 +1,5 @@
-import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config.ts b/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config.ts
index 3ddf62bd88..1906823970 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config.ts
@@ -1,4 +1,4 @@
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue b/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
index f45bf8d4af..1d40db1693 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
@@ -15,8 +15,8 @@ import {
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import { GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
 import { useAmcharts5 } from '@/common/composables/amcharts5';
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config.ts b/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
index dcfbf1569e..7002896ba8 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
@@ -1,5 +1,5 @@
-import { GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config.ts b/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
index d5fbb83351..ec0db72670 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
@@ -1,4 +1,4 @@
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue b/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
index 1f2051b3b6..1fab8fe3cc 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
@@ -12,8 +12,8 @@ import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/canc
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PDataLoader } from '@cloudforet/mirinae';
 
-import { ASSET_DATA_FIELD_MAP, WIDGET_SIZE } from '@/schema/dashboard/_constants/widget-constant';
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import { ASSET_DATA_FIELD_MAP, WIDGET_SIZE } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import { setXYSharedTooltipTextWithRate } from '@/common/composables/amcharts5/xy-chart-helper';
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts b/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
index 7622979ce4..2a34f114b7 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
@@ -1,5 +1,5 @@
-import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/widget-config.ts
index 82e3929fc2..c188ba39d5 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/widget-config.ts
@@ -1,5 +1,5 @@
-import { CHART_TYPE, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { CHART_TYPE, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue b/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
index eeca362d66..f0abe2ca57 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
@@ -12,7 +12,7 @@ import {
     PProgressBar,
 } from '@cloudforet/mirinae';
 
-import { COST_DATA_FIELD_MAP } from '@/schema/dashboard/_constants/widget-constant';
+import { COST_DATA_FIELD_MAP } from '@/api-clients/dashboard/_constants/widget-constant';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
index 5649bb5956..379de2dc4c 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
@@ -1,5 +1,5 @@
-import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue b/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
index f2188df8d7..489f65c343 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
@@ -12,7 +12,7 @@ import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/canc
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PDataLoader, PSkeleton, PProgressBar } from '@cloudforet/mirinae';
 
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { CURRENCY_SYMBOL } from '@/store/display/constant';
 import type { CurrencySymbol } from '@/store/display/type';
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config.ts
index f89eb24fda..4ebab30add 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config.ts
@@ -1,5 +1,5 @@
-import { GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
index e88b35fbc9..835ce5cddf 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
@@ -14,7 +14,7 @@ import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/canc
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PDataLoader } from '@cloudforet/mirinae';
 
-import { COST_DATA_FIELD_MAP } from '@/schema/dashboard/_constants/widget-constant';
+import { COST_DATA_FIELD_MAP } from '@/api-clients/dashboard/_constants/widget-constant';
 
 import type { RegionReferenceMap } from '@/store/reference/region-reference-store';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
index ca95b2abb5..fb1343ae4d 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
@@ -1,5 +1,5 @@
-import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
index 5eba75aaff..73f15ff3e8 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
@@ -15,7 +15,7 @@ import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PDataLoader } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import { COST_DATA_FIELD_MAP } from '@/schema/dashboard/_constants/widget-constant';
+import { COST_DATA_FIELD_MAP } from '@/api-clients/dashboard/_constants/widget-constant';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config.ts
index 5cdabd7159..d367986be0 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config.ts
@@ -1,5 +1,5 @@
-import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-donut/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-donut/widget-config.ts
index abbb9f235b..b655413936 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-donut/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-donut/widget-config.ts
@@ -1,5 +1,5 @@
-import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue
index 18849062fe..8fd2a1544f 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue
@@ -12,8 +12,8 @@ import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PDataLoader } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import { WIDGET_SIZE } from '@/schema/dashboard/_constants/widget-constant';
-import type { CostDataField } from '@/schema/dashboard/_types/widget-type';
+import { WIDGET_SIZE } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { CostDataField } from '@/api-clients/dashboard/_types/widget-type';
 
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts
index 8fb2e7fcf2..19248f9826 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts
@@ -1,4 +1,4 @@
-import type { CostDataField } from '@/schema/dashboard/_types/widget-type';
+import type { CostDataField } from '@/api-clients/dashboard/_types/widget-type';
 
 import type { ReferenceMap } from '@/store/reference/type';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/widget-config.ts
index 3581ca88f0..fb0c097418 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/widget-config.ts
@@ -1,5 +1,5 @@
-import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-pie/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-pie/widget-config.ts
index 93548b0cb8..f1f9c85423 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-pie/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-pie/widget-config.ts
@@ -1,5 +1,5 @@
-import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
index f9e8b5ab18..75295a02e5 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
@@ -15,7 +15,7 @@ import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/canc
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PSkeleton } from '@cloudforet/mirinae';
 
-import { COST_DATA_FIELD_MAP } from '@/schema/dashboard/_constants/widget-constant';
+import { COST_DATA_FIELD_MAP } from '@/api-clients/dashboard/_constants/widget-constant';
 
 import { currencyMoneyFormatter } from '@/lib/helper/currency-helper';
 import { usageUnitFormatter } from '@/lib/helper/usage-formatter';
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
index b05460b032..d5e77a4697 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
@@ -1,5 +1,5 @@
-import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
index 3ef7cc4286..3706a2a329 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
@@ -1,5 +1,5 @@
-import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend/widget-config.ts
index c32e77080b..8ad71ca15f 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend/widget-config.ts
@@ -1,5 +1,5 @@
-import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue b/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
index 9ae7268f18..44eccec8f7 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
@@ -14,7 +14,7 @@ import {
     PDivider, PDataLoader, PI, PSkeleton,
 } from '@cloudforet/mirinae';
 
-import type { DateRange } from '@/schema/dashboard/_types/dashboard-type';
+import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { CURRENCY_SYMBOL } from '@/store/display/constant';
 import type { CurrencySymbol } from '@/store/display/type';
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config.ts b/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config.ts
index 86a12d9556..fcc061cc82 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config.ts
+++ b/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config.ts
@@ -1,5 +1,5 @@
-import { GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
-import type { WidgetConfig } from '@/schema/dashboard/_types/widget-type';
+import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
 import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
 
diff --git a/apps/web/src/services/iam/components/AppManagementFormModal.vue b/apps/web/src/services/iam/components/AppManagementFormModal.vue
index 7561003cbb..bcc513eb61 100644
--- a/apps/web/src/services/iam/components/AppManagementFormModal.vue
+++ b/apps/web/src/services/iam/components/AppManagementFormModal.vue
@@ -13,10 +13,10 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 import type { InputItem } from '@cloudforet/mirinae/types/controls/input/text-input/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
-import type { Tags } from '@/schema/_common/model';
-import type { ResourceGroupType } from '@/schema/_common/type';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { Tags } from '@/api-clients/_common/schema/model';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
 import type { AppModel } from '@/schema/identity/app/model';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_STATE, ROLE_TYPE } from '@/schema/identity/role/constant';
@@ -32,7 +32,7 @@ import { useRoleFormatter } from '@/services/iam/composables/refined-table-data'
 import { getInputItemsFromTagKeys } from '@/services/iam/composables/tag-data';
 import { APP_DROPDOWN_MODAL_TYPE } from '@/services/iam/constants/app-constant';
 import { useAppPageStore } from '@/services/iam/store/app-page-store';
-import type { ProjectTreeNodeData } from '@/services/project/types/project-tree-type';
+import type { ProjectTreeNodeData } from '@/services/project-v1/types/project-tree-type';
 
 
 interface AppDropdownMenuItem extends SelectDropdownMenuItem {
diff --git a/apps/web/src/services/iam/components/RoleDeleteModal.vue b/apps/web/src/services/iam/components/RoleDeleteModal.vue
index 62301dda03..9606add357 100644
--- a/apps/web/src/services/iam/components/RoleDeleteModal.vue
+++ b/apps/web/src/services/iam/components/RoleDeleteModal.vue
@@ -7,7 +7,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PDataTable } from '@cloudforet/mirinae';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleBindingListParameters } from '@/schema/identity/role-binding/api-verbs/list';
 import type { RoleBindingModel } from '@/schema/identity/role-binding/model';
 import type { RoleDeleteParameters } from '@/schema/identity/role/api-verbs/delete';
diff --git a/apps/web/src/services/iam/components/UserGroupChannelAddFormData.vue b/apps/web/src/services/iam/components/UserGroupChannelAddFormData.vue
index 7fe6951364..1b523b6222 100644
--- a/apps/web/src/services/iam/components/UserGroupChannelAddFormData.vue
+++ b/apps/web/src/services/iam/components/UserGroupChannelAddFormData.vue
@@ -7,7 +7,7 @@ import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PJsonSchemaForm } from '@cloudforet/mirinae';
 import type { JsonSchema } from '@cloudforet/mirinae/types/inputs/forms/json-schema-form/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { NotificationProtocolListParameters } from '@/schema/alert-manager/notification-protocol/api-verbs/list';
 import type { NotificationProtocolModel } from '@/schema/alert-manager/notification-protocol/model';
 
diff --git a/apps/web/src/services/iam/components/UserGroupManagementTabNotificationChannel.vue b/apps/web/src/services/iam/components/UserGroupManagementTabNotificationChannel.vue
index 209fea2f63..2e314abec0 100644
--- a/apps/web/src/services/iam/components/UserGroupManagementTabNotificationChannel.vue
+++ b/apps/web/src/services/iam/components/UserGroupManagementTabNotificationChannel.vue
@@ -11,7 +11,7 @@ import {
     PHeadingLayout, PHeading, PButton, PToolboxTable, PBadge, PLazyImg,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { NotificationProtocolGetParameters } from '@/schema/alert-manager/notification-protocol/api-verbs/get';
 import type { NotificationProtocolListParameters } from '@/schema/alert-manager/notification-protocol/api-verbs/list';
 import type { NotificationProtocolModel } from '@/schema/alert-manager/notification-protocol/model';
diff --git a/apps/web/src/services/iam/components/UserGroupManagementTabUsers.vue b/apps/web/src/services/iam/components/UserGroupManagementTabUsers.vue
index 0c023bb547..7adf75100e 100644
--- a/apps/web/src/services/iam/components/UserGroupManagementTabUsers.vue
+++ b/apps/web/src/services/iam/components/UserGroupManagementTabUsers.vue
@@ -13,7 +13,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceUserListParameters } from '@/schema/identity/workspace-user/api-verbs/list';
 import type { WorkspaceUserModel } from '@/schema/identity/workspace-user/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/iam/components/UserManagementAddAdminRole.vue b/apps/web/src/services/iam/components/UserManagementAddAdminRole.vue
index 1fdb367283..add5667cf6 100644
--- a/apps/web/src/services/iam/components/UserManagementAddAdminRole.vue
+++ b/apps/web/src/services/iam/components/UserManagementAddAdminRole.vue
@@ -12,7 +12,7 @@ import type {
 } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_STATE, ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/iam/components/UserManagementAddModal.vue b/apps/web/src/services/iam/components/UserManagementAddModal.vue
index 672d83f90d..7fc69a1dcc 100644
--- a/apps/web/src/services/iam/components/UserManagementAddModal.vue
+++ b/apps/web/src/services/iam/components/UserManagementAddModal.vue
@@ -9,8 +9,8 @@ import { cloneDeep, isEmpty } from 'lodash';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PButtonModal } from '@cloudforet/mirinae';
 
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
-import type { Tags } from '@/schema/_common/model';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { RoleCreateParameters } from '@/schema/identity/role-binding/api-verbs/create';
 import type { RoleBindingModel } from '@/schema/identity/role-binding/model';
 import type { UserCreateParameters } from '@/schema/identity/user/api-verbs/create';
diff --git a/apps/web/src/services/iam/components/UserManagementAddRole.vue b/apps/web/src/services/iam/components/UserManagementAddRole.vue
index fbaa4627c1..ec1ebde650 100644
--- a/apps/web/src/services/iam/components/UserManagementAddRole.vue
+++ b/apps/web/src/services/iam/components/UserManagementAddRole.vue
@@ -9,7 +9,7 @@ import {
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_STATE, ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/iam/components/UserManagementAddTag.vue b/apps/web/src/services/iam/components/UserManagementAddTag.vue
index db3f828d4b..7433bbaf75 100644
--- a/apps/web/src/services/iam/components/UserManagementAddTag.vue
+++ b/apps/web/src/services/iam/components/UserManagementAddTag.vue
@@ -5,7 +5,7 @@ import {
 
 import { PTextButton } from '@cloudforet/mirinae';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 import TagsInput from '@/common/components/inputs/TagsInput.vue';
 
diff --git a/apps/web/src/services/iam/components/UserManagementFormAdminRole.vue b/apps/web/src/services/iam/components/UserManagementFormAdminRole.vue
index 1365831d69..2e627f606d 100644
--- a/apps/web/src/services/iam/components/UserManagementFormAdminRole.vue
+++ b/apps/web/src/services/iam/components/UserManagementFormAdminRole.vue
@@ -13,7 +13,7 @@ import type {
     SelectDropdownMenuItem,
 } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_STATE, ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/iam/components/UserManagementFormModal.vue b/apps/web/src/services/iam/components/UserManagementFormModal.vue
index 2258a4607a..10ba2df9f7 100644
--- a/apps/web/src/services/iam/components/UserManagementFormModal.vue
+++ b/apps/web/src/services/iam/components/UserManagementFormModal.vue
@@ -6,9 +6,9 @@ import { cloneDeep, isEmpty } from 'lodash';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PButtonModal } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
-import type { Tags } from '@/schema/_common/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { RoleCreateParameters } from '@/schema/identity/role-binding/api-verbs/create';
 import type { RoleBindingDeleteParameters } from '@/schema/identity/role-binding/api-verbs/delete';
 import type { RoleBindingListParameters } from '@/schema/identity/role-binding/api-verbs/list';
diff --git a/apps/web/src/services/iam/components/UserManagementTab.vue b/apps/web/src/services/iam/components/UserManagementTab.vue
index 9b53242e96..4eee2598fe 100644
--- a/apps/web/src/services/iam/components/UserManagementTab.vue
+++ b/apps/web/src/services/iam/components/UserManagementTab.vue
@@ -14,7 +14,7 @@ import type {
 } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleBindingUpdateRoleParameters } from '@/schema/identity/role-binding/api-verbs/update-role';
 import type { RoleBindingModel } from '@/schema/identity/role-binding/model';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
diff --git a/apps/web/src/services/iam/components/UserManagementTabAssignedRole.vue b/apps/web/src/services/iam/components/UserManagementTabAssignedRole.vue
index f4407501e4..b8ad3f4d92 100644
--- a/apps/web/src/services/iam/components/UserManagementTabAssignedRole.vue
+++ b/apps/web/src/services/iam/components/UserManagementTabAssignedRole.vue
@@ -11,7 +11,7 @@ import {
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { UserGetParameters } from '@/schema/identity/user/api-verbs/get';
 import type { UserModel } from '@/schema/identity/user/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/iam/components/UserManagementTabProjects.vue b/apps/web/src/services/iam/components/UserManagementTabProjects.vue
index 5120781a16..833b6b93f8 100644
--- a/apps/web/src/services/iam/components/UserManagementTabProjects.vue
+++ b/apps/web/src/services/iam/components/UserManagementTabProjects.vue
@@ -7,7 +7,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectListParameters } from '@/schema/identity/project/api-verbs/list';
 import type { ProjectRemoveUsersParameters } from '@/schema/identity/project/api-verbs/remove-users';
 import type { ProjectModel } from '@/schema/identity/project/model';
@@ -20,7 +20,7 @@ import { useProperRouteLocation } from '@/common/composables/proper-route-locati
 
 import UserManagementRemoveModal from '@/services/iam/components/UserManagementRemoveModal.vue';
 import { useUserPageStore } from '@/services/iam/store/user-page-store';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface TableItem {
     project_id?: string;
diff --git a/apps/web/src/services/iam/components/UserManagementTabTag.vue b/apps/web/src/services/iam/components/UserManagementTabTag.vue
index c4057cd203..bedd147e7c 100644
--- a/apps/web/src/services/iam/components/UserManagementTabTag.vue
+++ b/apps/web/src/services/iam/components/UserManagementTabTag.vue
@@ -9,7 +9,7 @@ import {
 } from '@cloudforet/mirinae';
 
 
-import type { Tags, TimeStamp } from '@/schema/_common/model';
+import type { Tags, TimeStamp } from '@/api-clients/_common/schema/model';
 import type { UserUpdateParameters } from '@/schema/identity/user/api-verbs/update';
 import type { UserModel } from '@/schema/identity/user/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/iam/components/UserManagementTabWorkspace.vue b/apps/web/src/services/iam/components/UserManagementTabWorkspace.vue
index da996c6d87..d20242f368 100644
--- a/apps/web/src/services/iam/components/UserManagementTabWorkspace.vue
+++ b/apps/web/src/services/iam/components/UserManagementTabWorkspace.vue
@@ -16,8 +16,8 @@ import type {
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import { iso8601Formatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { RoleBindingDeleteParameters } from '@/schema/identity/role-binding/api-verbs/delete';
 import type { RoleBindingListParameters } from '@/schema/identity/role-binding/api-verbs/list';
 import type { RoleBindingUpdateRoleParameters } from '@/schema/identity/role-binding/api-verbs/update-role';
diff --git a/apps/web/src/services/iam/components/UserManagementTable.vue b/apps/web/src/services/iam/components/UserManagementTable.vue
index f25f315fe1..2241cfeff1 100644
--- a/apps/web/src/services/iam/components/UserManagementTable.vue
+++ b/apps/web/src/services/iam/components/UserManagementTable.vue
@@ -13,7 +13,7 @@ import {
 import type { SelectDropdownMenuItem, AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleBindingDeleteParameters } from '@/schema/identity/role-binding/api-verbs/delete';
 import type { RoleBindingUpdateRoleParameters } from '@/schema/identity/role-binding/api-verbs/update-role';
 import type { RoleBindingModel } from '@/schema/identity/role-binding/model';
diff --git a/apps/web/src/services/iam/composables/tag-data.ts b/apps/web/src/services/iam/composables/tag-data.ts
index 2b528bd6b4..caafebb55c 100644
--- a/apps/web/src/services/iam/composables/tag-data.ts
+++ b/apps/web/src/services/iam/composables/tag-data.ts
@@ -1,6 +1,6 @@
 import type { InputItem } from '@cloudforet/mirinae/types/controls/input/text-input/type';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 
 export const getInputItemsFromTagKeys = (keys: Tags): InputItem[] => Object.keys(keys).map((key) => ({
     label: `${key}:${keys[key]}`,
diff --git a/apps/web/src/services/iam/helpers/user-management-form-validations.ts b/apps/web/src/services/iam/helpers/user-management-form-validations.ts
index d7d13ab857..8d05d2fe94 100644
--- a/apps/web/src/services/iam/helpers/user-management-form-validations.ts
+++ b/apps/web/src/services/iam/helpers/user-management-form-validations.ts
@@ -2,7 +2,7 @@ import VueI18n from 'vue-i18n';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserListParameters } from '@/schema/identity/user/api-verbs/list';
 import type { UserModel } from '@/schema/identity/user/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/iam/store/app-page-store.ts b/apps/web/src/services/iam/store/app-page-store.ts
index 6e88b22d27..816d6a958e 100644
--- a/apps/web/src/services/iam/store/app-page-store.ts
+++ b/apps/web/src/services/iam/store/app-page-store.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AppCreateParameters } from '@/schema/identity/app/api-verbs/create';
 import type { AppDeleteParameters } from '@/schema/identity/app/api-verbs/delete';
 import type { AppDisableParameters } from '@/schema/identity/app/api-verbs/disable';
diff --git a/apps/web/src/services/iam/store/role-page-store.ts b/apps/web/src/services/iam/store/role-page-store.ts
index c3a4d332e9..9f812b3c5a 100644
--- a/apps/web/src/services/iam/store/role-page-store.ts
+++ b/apps/web/src/services/iam/store/role-page-store.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/iam/store/user-group-page-store.ts b/apps/web/src/services/iam/store/user-group-page-store.ts
index c67e9f9dfe..fdb1d55848 100644
--- a/apps/web/src/services/iam/store/user-group-page-store.ts
+++ b/apps/web/src/services/iam/store/user-group-page-store.ts
@@ -6,7 +6,7 @@ import { defineStore } from 'pinia';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserGroupChannelListParameters } from '@/schema/alert-manager/user-group-channel/api-verbs/list';
 import type { UserGroupChannelModel } from '@/schema/alert-manager/user-group-channel/model';
 import type { UserGroupGetParameters } from '@/schema/identity/user-group/api-verbs/get';
diff --git a/apps/web/src/services/iam/store/user-page-store.ts b/apps/web/src/services/iam/store/user-page-store.ts
index d5489e010f..f1529629bb 100644
--- a/apps/web/src/services/iam/store/user-page-store.ts
+++ b/apps/web/src/services/iam/store/user-page-store.ts
@@ -6,7 +6,7 @@ import { defineStore } from 'pinia';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/iam/types/user-type.ts b/apps/web/src/services/iam/types/user-type.ts
index 5d383fbd3d..411e63fbd5 100644
--- a/apps/web/src/services/iam/types/user-type.ts
+++ b/apps/web/src/services/iam/types/user-type.ts
@@ -2,7 +2,7 @@ import type { TranslateResult } from 'vue-i18n';
 
 import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/type';
 
-import type { Tags } from '@/schema/_common/model';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { RoleType } from '@/schema/identity/role/type';
 import type { UserModel } from '@/schema/identity/user/model';
 import type { AuthType } from '@/schema/identity/user/type';
diff --git a/apps/web/src/services/info/components/NoticeDetail.vue b/apps/web/src/services/info/components/NoticeDetail.vue
index ddb2d8ea36..d48978573e 100644
--- a/apps/web/src/services/info/components/NoticeDetail.vue
+++ b/apps/web/src/services/info/components/NoticeDetail.vue
@@ -12,8 +12,8 @@ import {
 } from '@cloudforet/mirinae';
 import { iso8601Formatter } from '@cloudforet/utils';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { PostListParameters } from '@/schema/board/post/api-verbs/list';
 import { POST_BOARD_TYPE } from '@/schema/board/post/constant';
 import type { PostModel } from '@/schema/board/post/model';
diff --git a/apps/web/src/services/info/components/NoticeForm.vue b/apps/web/src/services/info/components/NoticeForm.vue
index 5424e9539c..f7a0a225c2 100644
--- a/apps/web/src/services/info/components/NoticeForm.vue
+++ b/apps/web/src/services/info/components/NoticeForm.vue
@@ -15,9 +15,9 @@ import {
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { ContentsType, ResourceGroupType } from '@/api-clients/_common/schema/type';
 import { SpaceRouter } from '@/router';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
-import type { ContentsType, ResourceGroupType } from '@/schema/_common/type';
 import type { PostUpdateParameters } from '@/schema/board/post/api-verbs/update';
 import { POST_BOARD_TYPE } from '@/schema/board/post/constant';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
diff --git a/apps/web/src/services/info/components/NoticeList.vue b/apps/web/src/services/info/components/NoticeList.vue
index 82205d84b8..ef7858a86c 100644
--- a/apps/web/src/services/info/components/NoticeList.vue
+++ b/apps/web/src/services/info/components/NoticeList.vue
@@ -14,8 +14,8 @@ import {
 import type { ValueItem } from '@cloudforet/mirinae/src/controls/search/query-search/type';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { PostListParameters } from '@/schema/board/post/api-verbs/list';
 import { POST_BOARD_TYPE } from '@/schema/board/post/constant';
 import type { PostModel } from '@/schema/board/post/model';
diff --git a/apps/web/src/services/info/components/NoticeWorkspaceDropdown.vue b/apps/web/src/services/info/components/NoticeWorkspaceDropdown.vue
index 24cb24ac2d..0d84b52c23 100644
--- a/apps/web/src/services/info/components/NoticeWorkspaceDropdown.vue
+++ b/apps/web/src/services/info/components/NoticeWorkspaceDropdown.vue
@@ -10,7 +10,7 @@ import {
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
diff --git a/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue b/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue
index eccb561b63..09069df348 100644
--- a/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue
+++ b/apps/web/src/services/info/pages/admin/AdminNoticeDetailPage.vue
@@ -10,7 +10,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { PostSendParameters } from '@/schema/board/post/api-verbs/send';
 import type { PostModel } from '@/schema/board/post/model';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
diff --git a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingGroupWorkspaces.vue b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingGroupWorkspaces.vue
index 1f733625d3..c4811b9108 100644
--- a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingGroupWorkspaces.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingGroupWorkspaces.vue
@@ -9,7 +9,7 @@ import {
     PFieldTitle, PButton, PButtonTab, PIconButton, PEmpty,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserProfileGetWorkspacesParameters } from '@/schema/identity/user-profile/api-verbs/get-workspaces';
 import type { MyWorkspaceModel } from '@/schema/identity/user-profile/model';
 import type { WorkspaceGroupModel } from '@/schema/identity/workspace-group/model';
diff --git a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupAddUsersModal.vue b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupAddUsersModal.vue
index 0f178d1ff5..2082ed272a 100644
--- a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupAddUsersModal.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupAddUsersModal.vue
@@ -9,7 +9,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListBasicRoleParameters } from '@/schema/identity/role/api-verbs/list-basic-role';
 import { ROLE_STATE, ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { BasicRoleModel, RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupTabGroupUser.vue b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupTabGroupUser.vue
index 8a8c43ba8b..99b7759d0a 100644
--- a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupTabGroupUser.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupTabGroupUser.vue
@@ -9,7 +9,7 @@ import {
     PHeading, PButton, PToolboxTable, PStatus, PSelectDropdown, PTooltip, PHeadingLayout,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_STATE, ROLE_TYPE } from '@/schema/identity/role/constant';
 import type { BasicRoleModel, RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupTabWorkspace.vue b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupTabWorkspace.vue
index 41803b5814..e5b07cd0e9 100644
--- a/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupTabWorkspace.vue
+++ b/apps/web/src/services/landing/components/workspace-landing/landing-group-workspaces/LandingWorkspaceGroupTabWorkspace.vue
@@ -10,7 +10,7 @@ import {
     PHeading, PToolboxTable, PLink, PStatus, PTooltip, PI,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserProfileGetWorkspacesParameters } from '@/schema/identity/user-profile/api-verbs/get-workspaces';
 import type { MyWorkspaceModel } from '@/schema/identity/user-profile/model';
 
diff --git a/apps/web/src/services/my-page/components/NotificationAddFormData.vue b/apps/web/src/services/my-page/components/NotificationAddFormData.vue
index 502ee9df15..ff5a154867 100644
--- a/apps/web/src/services/my-page/components/NotificationAddFormData.vue
+++ b/apps/web/src/services/my-page/components/NotificationAddFormData.vue
@@ -12,7 +12,7 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { NotificationProtocolListParameters } from '@/schema/alert-manager/notification-protocol/api-verbs/list';
 import type { NotificationProtocolModel } from '@/schema/alert-manager/notification-protocol/model';
 import type { NotificationLevel } from '@/schema/notification/notification/type';
diff --git a/apps/web/src/services/my-page/components/NotificationAddMemberGroup.vue b/apps/web/src/services/my-page/components/NotificationAddMemberGroup.vue
index 45f121ca76..021124dcce 100644
--- a/apps/web/src/services/my-page/components/NotificationAddMemberGroup.vue
+++ b/apps/web/src/services/my-page/components/NotificationAddMemberGroup.vue
@@ -9,7 +9,7 @@ import { PSelectDropdown } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectGetParameters } from '@/schema/identity/project/api-verbs/get';
 import type { ProjectModel } from '@/schema/identity/project/model';
 import type { WorkspaceUserListParameters } from '@/schema/identity/workspace-user/api-verbs/list';
diff --git a/apps/web/src/services/my-page/components/NotificationChannelList.vue b/apps/web/src/services/my-page/components/NotificationChannelList.vue
index 938ab956ac..bf9a512c1f 100644
--- a/apps/web/src/services/my-page/components/NotificationChannelList.vue
+++ b/apps/web/src/services/my-page/components/NotificationChannelList.vue
@@ -13,8 +13,8 @@ import {
 } from '@cloudforet/mirinae';
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { Tags } from '@/schema/_common/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { Tags } from '@/api-clients/_common/schema/model';
 import type { NotificationProtocolListParameters } from '@/schema/alert-manager/notification-protocol/api-verbs/list';
 import type { NotificationProtocolModel } from '@/schema/alert-manager/notification-protocol/model';
 import type { UserChannelListParameters } from '@/schema/alert-manager/user-channel/api-verbs/list';
@@ -40,7 +40,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import NotificationChannelItem from '@/services/my-page/components/NotificationChannelItem.vue';
 import { MY_PAGE_ROUTE } from '@/services/my-page/routes/route-constant';
 import type { NotiChannelItem, NotiChannelItemV1 } from '@/services/my-page/types/notification-channel-item-type';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface EnrichedProtocolItem extends ProtocolModel {
     label: TranslateResult;
@@ -86,7 +86,7 @@ const createProtocolItem = (d) => {
     return {
         label: d.protocol_type === 'INTERNAL' ? i18n.t('IAM.USER.NOTIFICATION.ASSOCIATED_MEMBER') : i18n.t('IDENTITY.USER.NOTIFICATION.FORM.ADD_CHANNEL', { type: d.name }),
         link: {
-            name: props.projectId ? PROJECT_ROUTE_V1.DETAIL.TAB.NOTIFICATIONS.ADD._NAME : MY_PAGE_ROUTE.NOTIFICATION.ADD._NAME,
+            name: props.projectId ? PROJECT_ROUTE.DETAIL.TAB.NOTIFICATIONS.ADD._NAME : MY_PAGE_ROUTE.NOTIFICATION.ADD._NAME,
             params: { protocolId: d.protocol_id },
             query,
         },
diff --git a/apps/web/src/services/ops-flow/components/AssociatedTasks.vue b/apps/web/src/services/ops-flow/components/AssociatedTasks.vue
index c9896a404f..55447977ae 100644
--- a/apps/web/src/services/ops-flow/components/AssociatedTasks.vue
+++ b/apps/web/src/services/ops-flow/components/AssociatedTasks.vue
@@ -4,7 +4,7 @@ import { computed } from 'vue';
 import { PDataTable, PLink, PSkeleton } from '@cloudforet/mirinae';
 import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 
-import type { TaskModel } from '@/schema/opsflow/task/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { i18n } from '@/translations';
 
 import { useWorkspaceReferenceStore } from '@/store/reference/workspace-reference-store';
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskComment.vue b/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
index 99a6936e4a..8863a6092b 100644
--- a/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
+++ b/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
@@ -8,7 +8,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { CollapsibleItem } from '@cloudforet/mirinae/types/data-display/collapsible/collapsible-list/type';
 
-import type { CommentModel } from '@/schema/opsflow/comment/model';
+import type { CommentModel } from '@/api-clients/opsflow/comment/schema/model';
 import { i18n } from '@/translations';
 
 import { useUserReferenceStore } from '@/store/reference/user-reference-store';
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskTable.vue b/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
index 42af46faaa..b16db8fe1b 100644
--- a/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
+++ b/apps/web/src/services/ops-flow/components/BoardTaskTable.vue
@@ -13,9 +13,9 @@ import {
 import type { DataTableField } from '@cloudforet/mirinae/src/data-display/tables/data-table/type';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
-import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
-import type { TaskModel } from '@/schema/opsflow/task/model';
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { i18n } from '@/translations';
 
 import { useUserReferenceStore } from '@/store/reference/user-reference-store';
diff --git a/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue b/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
index 24b17eceed..898a900faa 100644
--- a/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskContentBaseForm.vue
@@ -8,10 +8,10 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
-import type { TaskModel } from '@/schema/opsflow/task/model';
-import type { TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
+import type { TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 import { i18n } from '@/translations';
 
 import { useUserReferenceStore } from '@/store/reference/user-reference-store';
diff --git a/apps/web/src/services/ops-flow/components/TaskDeleteModal.vue b/apps/web/src/services/ops-flow/components/TaskDeleteModal.vue
index f0ced68742..679c866f5e 100644
--- a/apps/web/src/services/ops-flow/components/TaskDeleteModal.vue
+++ b/apps/web/src/services/ops-flow/components/TaskDeleteModal.vue
@@ -3,8 +3,8 @@ import { ref } from 'vue';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { TaskDeleteParameters } from '@/schema/opsflow/task/api-verbs/delete';
-import type { TaskModel } from '@/schema/opsflow/task/model';
+import type { TaskDeleteParameters } from '@/api-clients/opsflow/task/schema/api-verbs/delete';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { getParticle, i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
diff --git a/apps/web/src/services/ops-flow/components/TaskProgressEventView.vue b/apps/web/src/services/ops-flow/components/TaskProgressEventView.vue
index ea3092f589..3500680097 100644
--- a/apps/web/src/services/ops-flow/components/TaskProgressEventView.vue
+++ b/apps/web/src/services/ops-flow/components/TaskProgressEventView.vue
@@ -2,8 +2,9 @@
 import { asyncComputed } from '@vueuse/core';
 import { computed } from 'vue';
 
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
-import type { EventAdditionalInfo, EventType } from '@/schema/opsflow/event/type';
+
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
+import type { EventAdditionalInfo, EventType } from '@/api-clients/opsflow/event/schema/type';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useTimezoneDate } from '@/common/composables/timezone-date';
diff --git a/apps/web/src/services/ops-flow/components/TaskProgressTab.vue b/apps/web/src/services/ops-flow/components/TaskProgressTab.vue
index 294124ae7a..b5c10f0608 100644
--- a/apps/web/src/services/ops-flow/components/TaskProgressTab.vue
+++ b/apps/web/src/services/ops-flow/components/TaskProgressTab.vue
@@ -5,7 +5,7 @@ import {
 
 import { PDataLoader, PButton } from '@cloudforet/mirinae';
 
-import type { EventModel } from '@/schema/opsflow/event/model';
+import type { EventModel } from '@/api-clients/opsflow/event/schema/model';
 import { i18n as _i18n } from '@/translations';
 
 import { useUserStore } from '@/store/user/user-store';
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusForm.vue b/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
index 2b0113da3d..cbcad6eb5d 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusForm.vue
@@ -10,12 +10,14 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import { TASK_STATUS_COLOR_NAMES } from '@/schema/opsflow/task/constant';
+
+import { TASK_STATUS_COLOR_NAMES } from '@/api-clients/opsflow/task/schema/constant';
 import type {
     TaskStatusColorName,
-    TaskStatusOption, TaskStatusOptions,
+    TaskStatusOption,
+    TaskStatusOptions,
     TaskStatusType,
-} from '@/schema/opsflow/task/type';
+} from '@/api-clients/opsflow/task/schema/type';
 import { getParticle, i18n as _i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
diff --git a/apps/web/src/services/ops-flow/components/TaskStatusTree.vue b/apps/web/src/services/ops-flow/components/TaskStatusTree.vue
index d9c1ddaf45..08e15986e1 100644
--- a/apps/web/src/services/ops-flow/components/TaskStatusTree.vue
+++ b/apps/web/src/services/ops-flow/components/TaskStatusTree.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import type { TaskStatusOption, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusOption, TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
diff --git a/apps/web/src/services/ops-flow/composables/use-category-field.ts b/apps/web/src/services/ops-flow/composables/use-category-field.ts
index 690b45f3b9..8a01892fc9 100644
--- a/apps/web/src/services/ops-flow/composables/use-category-field.ts
+++ b/apps/web/src/services/ops-flow/composables/use-category-field.ts
@@ -3,8 +3,8 @@ import { computed, ref } from 'vue';
 import { getTextHighlightRegex } from '@cloudforet/mirinae';
 import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
 import { getParticle, i18n } from '@/translations';
 
 import { useFieldValidator } from '@/common/composables/form-validator';
diff --git a/apps/web/src/services/ops-flow/composables/use-task-api.ts b/apps/web/src/services/ops-flow/composables/use-task-api.ts
index f1b7c2040b..71515a5be3 100644
--- a/apps/web/src/services/ops-flow/composables/use-task-api.ts
+++ b/apps/web/src/services/ops-flow/composables/use-task-api.ts
@@ -1,15 +1,16 @@
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { TaskChangeAssigneeParameters } from '@/schema/opsflow/task/api-verbs/change-assignee';
-import type { TaskChangeStatusParameters } from '@/schema/opsflow/task/api-verbs/change-status';
-import type { TaskCreateParameters } from '@/schema/opsflow/task/api-verbs/create';
-import type { TaskDeleteParameters } from '@/schema/opsflow/task/api-verbs/delete';
-import type { TaskGetParameters } from '@/schema/opsflow/task/api-verbs/get';
-import type { TaskListParameters } from '@/schema/opsflow/task/api-verbs/list';
-import type { TaskUpdateParameters } from '@/schema/opsflow/task/api-verbs/update';
-import type { TaskModel } from '@/schema/opsflow/task/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { TaskChangeAssigneeParameters } from '@/api-clients/opsflow/task/schema/api-verbs/change-assignee';
+import type { TaskChangeStatusParameters } from '@/api-clients/opsflow/task/schema/api-verbs/change-status';
+import type { TaskCreateParameters } from '@/api-clients/opsflow/task/schema/api-verbs/create';
+import type { TaskDeleteParameters } from '@/api-clients/opsflow/task/schema/api-verbs/delete';
+import type { TaskGetParameters } from '@/api-clients/opsflow/task/schema/api-verbs/get';
+import type { TaskListParameters } from '@/api-clients/opsflow/task/schema/api-verbs/list';
+import type { TaskUpdateParameters } from '@/api-clients/opsflow/task/schema/api-verbs/update';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
+
 
 export const useTaskAPI = () => {
     const fetchList = getCancellableFetcher<TaskListParameters, ListResponse<TaskModel>>(SpaceConnector.clientV2.opsflow.task.list);
diff --git a/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue b/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
index a99a52adf0..338e8e856b 100644
--- a/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
+++ b/apps/web/src/services/ops-flow/pages/OpsFlowLandingPage.vue
@@ -8,8 +8,9 @@ import {
     PButton, PHeading, PSelectCard, PEmpty, PDataLoader,
 } from '@cloudforet/mirinae';
 
-import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
-import type { TaskModel } from '@/schema/opsflow/task/model';
+
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 
 import { useUserStore } from '@/store/user/user-store';
 
diff --git a/apps/web/src/services/ops-flow/stores/admin/package-store.ts b/apps/web/src/services/ops-flow/stores/admin/package-store.ts
index 2076fda226..242efc6b73 100644
--- a/apps/web/src/services/ops-flow/stores/admin/package-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/package-store.ts
@@ -6,7 +6,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { PackageCreateParameters } from '@/schema/identity/package/api-verbs/create';
 import type { PackageDeleteParameters } from '@/schema/identity/package/api-verbs/delete';
 import type { PackageListParameters } from '@/schema/identity/package/api-verbs/list';
diff --git a/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts b/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
index 725a95307f..14a6333905 100644
--- a/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/admin/task-management-page-store.ts
@@ -5,9 +5,9 @@ import {
 
 import { defineStore } from 'pinia';
 
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import type { PackageModel } from '@/schema/identity/package/model';
-import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
-import type { TaskModel } from '@/schema/opsflow/task/model';
 
 import type { WorkspaceItem } from '@/store/reference/workspace-reference-store';
 import { useWorkspaceReferenceStore } from '@/store/reference/workspace-reference-store';
diff --git a/apps/web/src/services/ops-flow/stores/comment-store.ts b/apps/web/src/services/ops-flow/stores/comment-store.ts
index 34ff97de07..92d74122b3 100644
--- a/apps/web/src/services/ops-flow/stores/comment-store.ts
+++ b/apps/web/src/services/ops-flow/stores/comment-store.ts
@@ -5,11 +5,11 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CommentCreateParameters } from '@/schema/opsflow/comment/api-verbs/create';
-import type { CommentDeleteParameters } from '@/schema/opsflow/comment/api-verbs/delete';
-import type { CommentListParameters } from '@/schema/opsflow/comment/api-verbs/list';
-import type { CommentModel } from '@/schema/opsflow/comment/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CommentCreateParameters } from '@/api-clients/opsflow/comment/schema/api-verbs/create';
+import type { CommentDeleteParameters } from '@/api-clients/opsflow/comment/schema/api-verbs/delete';
+import type { CommentListParameters } from '@/api-clients/opsflow/comment/schema/api-verbs/list';
+import type { CommentModel } from '@/api-clients/opsflow/comment/schema/model';
 
 export const useCommentStore = defineStore('comment', () => {
     const comments = ref<CommentModel[]|undefined>();
diff --git a/apps/web/src/services/ops-flow/stores/task-category-store.ts b/apps/web/src/services/ops-flow/stores/task-category-store.ts
index 10cb9fdc12..c454280faa 100644
--- a/apps/web/src/services/ops-flow/stores/task-category-store.ts
+++ b/apps/web/src/services/ops-flow/stores/task-category-store.ts
@@ -5,19 +5,20 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { TaskCategoryCreateParameters } from '@/schema/opsflow/task-category/api-verbs/create';
-import type { TaskCategoryDeleteParameters } from '@/schema/opsflow/task-category/api-verbs/delete';
-import type { TaskCategoryGetParameters } from '@/schema/opsflow/task-category/api-verbs/get';
-import type { TaskCategoryListParameters } from '@/schema/opsflow/task-category/api-verbs/list';
-import type { TaskCategoryUpdateParameters } from '@/schema/opsflow/task-category/api-verbs/update';
-import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { TaskCategoryCreateParameters } from '@/api-clients/opsflow/task-category/schema/api-verbs/create';
+import type { TaskCategoryDeleteParameters } from '@/api-clients/opsflow/task-category/schema/api-verbs/delete';
+import type { TaskCategoryGetParameters } from '@/api-clients/opsflow/task-category/schema/api-verbs/get';
+import type { TaskCategoryListParameters } from '@/api-clients/opsflow/task-category/schema/api-verbs/list';
+import type { TaskCategoryUpdateParameters } from '@/api-clients/opsflow/task-category/schema/api-verbs/update';
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 
+
 interface UseTaskCategoryStoreState {
     loading: boolean;
     items?: TaskCategoryModel[];
diff --git a/apps/web/src/services/ops-flow/stores/task-content-form-store.ts b/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
index c408f4e0b9..d8c53fc327 100644
--- a/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
+++ b/apps/web/src/services/ops-flow/stores/task-content-form-store.ts
@@ -5,10 +5,10 @@ import { defineStore } from 'pinia';
 
 import { APIError } from '@cloudforet/core-lib/space-connector/error';
 
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
-import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
-import type { TaskModel } from '@/schema/opsflow/task/model';
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { i18n } from '@/translations';
 
 import { useUserStore } from '@/store/user/user-store';
diff --git a/apps/web/src/services/ops-flow/stores/task-detail-page-store.ts b/apps/web/src/services/ops-flow/stores/task-detail-page-store.ts
index e20fa73d94..da1629356d 100644
--- a/apps/web/src/services/ops-flow/stores/task-detail-page-store.ts
+++ b/apps/web/src/services/ops-flow/stores/task-detail-page-store.ts
@@ -6,16 +6,17 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CommentModel } from '@/schema/opsflow/comment/model';
-import type { EventListParameters } from '@/schema/opsflow/event/api-verbs/list';
-import type { EventModel } from '@/schema/opsflow/event/model';
-import type { TaskModel } from '@/schema/opsflow/task/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CommentModel } from '@/api-clients/opsflow/comment/schema/model';
+import type { EventListParameters } from '@/api-clients/opsflow/event/schema/api-verbs/list';
+import type { EventModel } from '@/api-clients/opsflow/event/schema/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
 
+
 const EVENT_PAGE_SIZE = 10;
 interface UseTaskDetailPageStoreState {
     // task
diff --git a/apps/web/src/services/ops-flow/stores/task-type-store.ts b/apps/web/src/services/ops-flow/stores/task-type-store.ts
index 20f051067f..20d1abb777 100644
--- a/apps/web/src/services/ops-flow/stores/task-type-store.ts
+++ b/apps/web/src/services/ops-flow/stores/task-type-store.ts
@@ -5,19 +5,20 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { TaskTypeCreateParameters } from '@/schema/opsflow/task-type/api-verbs/create';
-import type { TaskTypeDeleteParameters } from '@/schema/opsflow/task-type/api-verbs/delete';
-import type { TaskTypeGetParameters } from '@/schema/opsflow/task-type/api-verbs/get';
-import type { TaskTypeListParameters } from '@/schema/opsflow/task-type/api-verbs/list';
-import type { TaskTypeUpdateParameters } from '@/schema/opsflow/task-type/api-verbs/update';
-import type { TaskTypeUpdateFieldsParameters } from '@/schema/opsflow/task-type/api-verbs/update-fields';
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { TaskTypeCreateParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/create';
+import type { TaskTypeDeleteParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/delete';
+import type { TaskTypeGetParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/get';
+import type { TaskTypeListParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/list';
+import type { TaskTypeUpdateParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/update';
+import type { TaskTypeUpdateFieldsParameters } from '@/api-clients/opsflow/task-type/schema/api-verbs/update-fields';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+
 interface UseTaskTypeStoreState {
     loading: boolean;
     itemsByCategoryId: Record<string, TaskTypeModel[]|undefined>;
diff --git a/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue b/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
index b0c8472e2d..4710437712 100644
--- a/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
+++ b/apps/web/src/services/ops-flow/task-fields-form/field-templates/AssetTaskField.vue
@@ -7,7 +7,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { MenuAttachHandler } from '@cloudforet/mirinae/types/hooks/use-context-menu-attach/use-context-menu-attach';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceListParameters } from '@/schema/inventory/cloud-service/api-verbs/list';
 import type { CloudServiceModel } from '@/schema/inventory/cloud-service/model';
 import type { OtherTaskField } from '@/schema/opsflow/_types/task-field-type';
diff --git a/apps/web/src/services/project-v1/ProjectContainer.vue b/apps/web/src/services/project-v1/ProjectContainer.vue
index d1cdb2d04c..d02028e7d7 100644
--- a/apps/web/src/services/project-v1/ProjectContainer.vue
+++ b/apps/web/src/services/project-v1/ProjectContainer.vue
@@ -13,7 +13,7 @@ import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout
 import ProjectFormModal from '@/services/project-v1/components/ProjectFormModal.vue';
 import ProjectMainProjectGroupFormModal from '@/services/project-v1/components/ProjectMainProjectGroupFormModal.vue';
 import ProjectLSB from '@/services/project-v1/ProjectLSB.vue';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectPageStore } from '@/services/project-v1/stores/project-page-store';
 import { useProjectTreeStore } from '@/services/project-v1/stores/project-tree-store';
 
@@ -28,7 +28,7 @@ const projectTreeStore = useProjectTreeStore();
 
 const state = reactive({
     currentProjectGroupId: computed(() => route.params.projectGroupId),
-    isProjectRootPage: computed(() => route.name === PROJECT_ROUTE_V1._NAME && !state.currentProjectGroupId),
+    isProjectRootPage: computed(() => route.name === PROJECT_ROUTE._NAME && !state.currentProjectGroupId),
 });
 
 /* Event */
@@ -53,13 +53,13 @@ const refreshProejctTree = () => {
 const handleConfirmProjectFormModal = (isCreating: boolean, result: ProjectModel) => {
     refreshProejctTree();
     if (isCreating && !result.project_group_id && !state.isProjectRootPage) {
-        router.push({ name: PROJECT_ROUTE_V1._NAME });
+        router.push({ name: PROJECT_ROUTE._NAME });
     }
 };
 const handleConfirmProjectGroupFormModal = (isCreating: boolean, result: ProjectGroupModel) => {
     refreshProejctTree();
     if (isCreating && !result.parent_group_id && !state.isProjectRootPage) {
-        router.push({ name: PROJECT_ROUTE_V1._NAME });
+        router.push({ name: PROJECT_ROUTE._NAME });
     }
 };
 
diff --git a/apps/web/src/services/project-v1/ProjectLSB.vue b/apps/web/src/services/project-v1/ProjectLSB.vue
index 8d16b90975..f6c3f44a64 100644
--- a/apps/web/src/services/project-v1/ProjectLSB.vue
+++ b/apps/web/src/services/project-v1/ProjectLSB.vue
@@ -31,7 +31,7 @@ import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
 import { indigo, peacock } from '@/styles/colors';
 
 import ProjectMainTree from '@/services/project-v1/components/ProjectMainTree.vue';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project-v1/stores/project-detail-page-store';
 import { useProjectPageStore } from '@/services/project-v1/stores/project-page-store';
 
@@ -70,7 +70,7 @@ const state = reactive({
                 id: d.name,
                 icon: { name: 'ic_folder-filled', color: indigo[500] },
                 to: getProperRouteLocation({
-                    name: PROJECT_ROUTE_V1._NAME,
+                    name: PROJECT_ROUTE._NAME,
                     params: { projectGroupId: d.itemId },
                 }),
                 favoriteOptions: { type: FAVORITE_TYPE.PROJECT_GROUP, id: d.name },
@@ -82,20 +82,20 @@ const state = reactive({
             id: d.name,
             icon: { name: 'ic_document-filled', color: peacock[600] },
             to: getProperRouteLocation({
-                name: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+                name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
                 params: { id: d.itemId },
             }),
             favoriteOptions: { type: FAVORITE_TYPE.PROJECT, id: d.name },
         };
     })),
-    isProjectLandingPage: computed(() => route.name === PROJECT_ROUTE_V1._NAME),
+    isProjectLandingPage: computed(() => route.name === PROJECT_ROUTE._NAME),
     projectLandingMenuSet: computed(() => [
         {
             type: MENU_ITEM_TYPE.SLOT,
             label: i18n.t('PROJECT.LANDING.ALL_PROJECTS'),
             id: MENU_ID.PROJECT,
             icon: 'ic_dots-4-square',
-            to: getProperRouteLocation({ name: PROJECT_ROUTE_V1._NAME }),
+            to: getProperRouteLocation({ name: PROJECT_ROUTE._NAME }),
             hideFavorite: true,
         },
         {
@@ -128,7 +128,7 @@ const state = reactive({
             id: project.key,
             icon: { name: 'ic_document-filled', color: peacock[600] },
             to: getProperRouteLocation({
-                name: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+                name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
                 params: { id: project.key, workspaceId: storeState.currentWorkspaceId },
             }),
             favoriteOptions: { type: FAVORITE_TYPE.PROJECT, id: project.key },
diff --git a/apps/web/src/services/project-v1/components/ProjectAlertEventRuleConditionForm.vue b/apps/web/src/services/project-v1/components/ProjectAlertEventRuleConditionForm.vue
index dd98ad1659..2551ccf136 100644
--- a/apps/web/src/services/project-v1/components/ProjectAlertEventRuleConditionForm.vue
+++ b/apps/web/src/services/project-v1/components/ProjectAlertEventRuleConditionForm.vue
@@ -8,7 +8,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WebhookListParameters } from '@/schema/monitoring/webhook/api-verbs/list';
 import type { WebhookModel } from '@/schema/monitoring/webhook/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/project-v1/components/ProjectAlertSettingsEscalationPolicy.vue b/apps/web/src/services/project-v1/components/ProjectAlertSettingsEscalationPolicy.vue
index 633bfe275f..9ff1ce62f6 100644
--- a/apps/web/src/services/project-v1/components/ProjectAlertSettingsEscalationPolicy.vue
+++ b/apps/web/src/services/project-v1/components/ProjectAlertSettingsEscalationPolicy.vue
@@ -16,7 +16,7 @@ import {
 } from '@cloudforet/mirinae';
 import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { ESCALATION_POLICY_FINISH_CONDITION } from '@/schema/monitoring/escalation-policy/constant';
 import type { EscalationPolicyModel } from '@/schema/monitoring/escalation-policy/model';
 import type { EscalationPolicyFinishCondition, EscalationPolicyRule } from '@/schema/monitoring/escalation-policy/type';
diff --git a/apps/web/src/services/project-v1/components/ProjectAlertSettingsTab.vue b/apps/web/src/services/project-v1/components/ProjectAlertSettingsTab.vue
index da531ecb7d..4888b4748f 100644
--- a/apps/web/src/services/project-v1/components/ProjectAlertSettingsTab.vue
+++ b/apps/web/src/services/project-v1/components/ProjectAlertSettingsTab.vue
@@ -11,8 +11,8 @@ import {
     PI, PIconButton, PPaneLayout, PButton,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { EscalationPolicyGetParameters } from '@/schema/monitoring/escalation-policy/api-verbs/get';
 import type { EscalationPolicyModel } from '@/schema/monitoring/escalation-policy/model';
 import type { EventRuleListParameters } from '@/schema/monitoring/event-rule/api-verbs/list';
@@ -39,7 +39,7 @@ import ProjectAlertSettingsEscalationPolicyChangeModal
     from '@/services/project-v1/components/ProjectAlertSettingsEscalationPolicyChangeModal.vue';
 import ProjectAlertSettingsNotificationPolicyUpdateModal
     from '@/services/project-v1/components/ProjectAlertSettingsNotificationPolicyUpdateModal.vue';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface NotificationUrgencyOption {
     name: ProjectAlertConfigNotiUrgency;
@@ -130,7 +130,7 @@ const onClickChangeEscalationPolicy = () => {
 };
 const onClickEditEventRule = () => {
     router.push({
-        name: PROJECT_ROUTE_V1.DETAIL.EVENT_RULE._NAME,
+        name: PROJECT_ROUTE.DETAIL.EVENT_RULE._NAME,
         params: { projectId: props.id ?? '' },
     }).catch(() => {});
 };
diff --git a/apps/web/src/services/project-v1/components/ProjectAlertTab.vue b/apps/web/src/services/project-v1/components/ProjectAlertTab.vue
new file mode 100644
index 0000000000..2aeceb84de
--- /dev/null
+++ b/apps/web/src/services/project-v1/components/ProjectAlertTab.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+
+import {
+    computed, onMounted, reactive, watch,
+} from 'vue';
+
+import { isEmpty } from 'lodash';
+
+import {
+    PBadge, PLazyImg, PDefinitionTable, PHeading, PHorizontalLayout, PMarkdown, PStatus, PTab,
+} from '@cloudforet/mirinae';
+import type { DefinitionField } from '@cloudforet/mirinae/types/data-display/tables/definition-table/type';
+import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
+
+import type { ProjectModel } from '@/schema/identity/project/model';
+import type { WebhookModel } from '@/schema/monitoring/webhook/model.js';
+import { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store.js';
+
+import { useProxyValue } from '@/common/composables/proxy-state';
+
+import { userStateFormatter } from '@/services/iam/composables/refined-table-data.js';
+import ProjectDetailTab from '@/services/project-v1/components/ProjectDetailTab.vue';
+import { useProjectDetailPageStore } from '@/services/project-v1/stores/project-detail-page-store.js';
+import type { WebhookType } from '@/services/project-v1/types/project-alert-type';
+
+interface Props {
+    id?: string;
+    tabs: TabItem[];
+    activeTab: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{(e: 'update:active-tab', value: string): void;}>();
+
+const userStore = useUserStore();
+const projectDetailPageStore = useProjectDetailPageStore();
+const projectDetailPageState = projectDetailPageStore.state;
+const projectDetailPageGetters = projectDetailPageStore.getters;
+
+const storeState = reactive({
+    selectedWebhookItem: computed<WebhookModel|undefined>(() => projectDetailPageGetters.selectedWebhookItem),
+    language: computed<string|undefined>(() => userStore.state.language),
+});
+
+const state = reactive({
+    proxyActiveTab: useProxyValue('activeTab', props, emit),
+    item: computed<ProjectModel | undefined>(() => projectDetailPageState.currentProject),
+    selectedPlugin: computed<WebhookType|undefined>(() => {
+        const id = storeState.selectedWebhookItem?.plugin_info.plugin_id;
+        return state.webhookTypeList.find((i) => i.plugin_id === id);
+    }),
+    webhookTypeList: [] as WebhookType[],
+    webhookDetailTab: computed<TabItem[]>(() => {
+        const defaultTab = [{
+            name: 'details',
+            label: i18n.t('MONITORING.ALERT.DETAIL.DETAILS.DETAILS'),
+        }];
+        if (state.selectedPlugin?.docs && !isEmpty(state.selectedPlugin?.docs)) {
+            defaultTab.push({
+                name: 'help',
+                label: i18n.t('PROJECT.DETAIL.HELP'),
+            });
+        }
+        return defaultTab;
+    }),
+    webhookDetailActiveTab: 'details',
+
+});
+
+const tableState = reactive({
+    definitionFields: computed<DefinitionField[]>(() => [
+        { label: 'Webhook ID', name: 'webhook_id' },
+        { label: 'Name', name: 'name' },
+        { label: 'State', name: 'state' },
+        { label: 'Plugin', name: 'plugin_info.plugin_id' },
+        { label: 'Version', name: 'plugin_info.version' },
+        { label: 'Webhook URL', name: 'webhook_url' },
+    ]),
+});
+
+watch(() => projectDetailPageState.projectId, async (projectId) => {
+    if (projectId) {
+        await projectDetailPageStore.getAlertCounts(projectId);
+    }
+});
+watch(() => storeState.selectedWebhookItem, () => {
+    state.webhookDetailActiveTab = 'details';
+}, { immediate: true });
+onMounted(async () => {
+    state.webhookTypeList = await projectDetailPageStore.getListWebhookType();
+});
+</script>
+
+<template>
+    <div class="project-alert-tab">
+        <p-horizontal-layout class="page-inner"
+                             :height="522"
+        >
+            <template #container="{ height }">
+                <project-detail-tab :id="props.id"
+                                    :style="{ height: `${height}px` }"
+                                    :item="state.item"
+                                    :tabs="props.tabs"
+                                    :active-tab.sync="state.proxyActiveTab"
+                />
+            </template>
+        </p-horizontal-layout>
+        <p-tab v-if="storeState.selectedWebhookItem"
+               :tabs="state.webhookDetailTab"
+               :active-tab.sync="state.webhookDetailActiveTab"
+        >
+            <template #details>
+                <p-heading class="pt-8 px-4 pb-4"
+                           heading-type="sub"
+                           :title="$t('PROJECT.DETAIL.MEMBER.BASE_INFORMATION')"
+                />
+                <p-definition-table :fields="tableState.definitionFields"
+                                    :data="storeState.selectedWebhookItem"
+                                    :skeleton-rows="4"
+                                    block
+                >
+                    <template #data-state="{data}">
+                        <p-status
+                            class="capitalize"
+                            v-bind="userStateFormatter(data)"
+                        />
+                    </template>
+                    <template #data-plugin_info.plugin_id="{value}">
+                        <div class="col-type">
+                            <p-lazy-img :src="state.selectedPlugin ? state.selectedPlugin?.tags?.icon : 'ic_webhook'"
+                                        error-icon="ic_webhook"
+                                        width="1rem"
+                                        height="1rem"
+                                        class="mr-2"
+                            />
+                            <span class="name">{{ state.selectedPlugin ? state.selectedPlugin?.name : value }}</span>
+                        </div>
+                    </template>
+                </p-definition-table>
+            </template>
+            <template #help>
+                <div class="help-tap">
+                    <div class="plugin-wrapper">
+                        <p-lazy-img :src="state.selectedPlugin ? state.selectedPlugin?.tags?.icon : 'ic_webhook'"
+                                    error-icon="ic_webhook"
+                                    width="2rem"
+                                    height="2rem"
+                        />
+                        <div class="plugin-info-wrapper">
+                            <p class="plugin-info">
+                                <span class="name">
+                                    {{ state.selectedPlugin ? state.selectedPlugin?.name : storeState.selectedWebhookItem?.plugin_info.plugin_id }}
+                                </span>
+                                <p-badge style-type="gray900"
+                                         badge-type="solid-outline"
+                                >
+                                    v {{ storeState.selectedWebhookItem?.plugin_info.version }}
+                                </p-badge>
+                            </p>
+                            <p class="desc">
+                                {{ state.selectedPlugin?.tags?.long_description || state.selectedPlugin?.tags.description }}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="docs-wrapper">
+                        <p-markdown :markdown="state.selectedPlugin?.docs"
+                                    :language="storeState.language"
+                                    remove-spacing
+                                    class="markdown"
+                        />
+                    </div>
+                </div>
+            </template>
+        </p-tab>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.project-alert-tab {
+    .page-inner {
+        height: 100%;
+        max-width: 85.5rem;
+    }
+    .help-tap {
+        padding-top: 2rem;
+        padding-right: 1rem;
+        padding-left: 1rem;
+        .plugin-wrapper {
+            @apply flex;
+            gap: 1rem;
+            .plugin-info-wrapper {
+                flex: 1;
+                .plugin-info {
+                    @apply flex items-center;
+                    gap: 0.125rem;
+                    .name {
+                        @apply text-label-xl font-bold;
+                    }
+                }
+                .desc {
+                    @apply text-label-sm text-gray-600;
+                }
+            }
+        }
+        .docs-wrapper {
+            margin-top: 1.125rem;
+            .empty {
+                @apply bg-violet-100;
+                padding-top: 4.125rem;
+                padding-bottom: 4.125rem;
+                border-radius: 0.375rem;
+            }
+        }
+        .markdown {
+            @apply bg-violet-100;
+            padding: 1rem;
+            border-radius: 0.375rem;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreateStep1.vue b/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreateStep1.vue
index 7eb58f8428..0bdf048d45 100644
--- a/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreateStep1.vue
+++ b/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreateStep1.vue
@@ -12,7 +12,7 @@ import type { PluginModel } from '@/schema/repository/plugin/model';
 
 import { assetUrlConverter } from '@/lib/helper/asset-helper';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project-v1/stores/project-detail-page-store';
 import type { WebhookType } from '@/services/project-v1/types/project-alert-type';
 
@@ -33,7 +33,7 @@ const handleClickNextStep = () => {
     emit('update:currentStep', 2, state.selectedWebhookType);
 };
 const handleClickGoBack = () => {
-    router.push({ name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME, query: { tab: 'webhook' } });
+    router.push({ name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME, query: { tab: 'webhook' } });
 };
 
 onMounted(async () => {
diff --git a/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreateStep2.vue b/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreateStep2.vue
index 7ea25a05ae..002f944c89 100644
--- a/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreateStep2.vue
+++ b/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreateStep2.vue
@@ -11,7 +11,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WebhookCreateParameters } from '@/schema/monitoring/webhook/api-verbs/create';
 import type { WebhookModel } from '@/schema/monitoring/webhook/model';
 import type { PluginGetVersionsParameters } from '@/schema/repository/plugin/api-verbs/get-versions';
diff --git a/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreatedModal.vue b/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreatedModal.vue
index 058e541985..7bd7600176 100644
--- a/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreatedModal.vue
+++ b/apps/web/src/services/project-v1/components/ProjectAlertWebhookCreatedModal.vue
@@ -23,7 +23,7 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { userStateFormatter } from '@/services/iam/composables/refined-table-data';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import type { WebhookType } from '@/services/project-v1/types/project-alert-type';
 
 interface Props {
@@ -68,7 +68,7 @@ const state = reactive({
 
 const handleCloseSucceedModal = () => {
     state.proxyVisible = false;
-    router.push({ name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME, query: { tab: 'webhook' } });
+    router.push({ name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME, query: { tab: 'webhook' } });
 };
 const handleCopyWebhookUrl = () => {
     copyAnyData(props.succeedWebhook?.webhook_url || '');
diff --git a/apps/web/src/services/project-v1/components/ProjectAlertWebhookTab.vue b/apps/web/src/services/project-v1/components/ProjectAlertWebhookTab.vue
index 3624220a19..05e555fd87 100644
--- a/apps/web/src/services/project-v1/components/ProjectAlertWebhookTab.vue
+++ b/apps/web/src/services/project-v1/components/ProjectAlertWebhookTab.vue
@@ -24,7 +24,7 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { KeyItemSet } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WebhookDeleteParameters } from '@/schema/monitoring/webhook/api-verbs/delete';
 import type { WebhookDisableParameters } from '@/schema/monitoring/webhook/api-verbs/disable';
 import type { WebhookEnableParameters } from '@/schema/monitoring/webhook/api-verbs/enable';
@@ -46,7 +46,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { userStateFormatter } from '@/services/iam/composables/refined-table-data';
 import ProjectAlertWebhookUpdateModal from '@/services/project-v1/components/ProjectAlertWebhookUpdateModal.vue';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project-v1/stores/project-detail-page-store';
 
 
@@ -209,7 +209,7 @@ const deleteWebhookConfirm = async () => {
 
 /* event */
 const onClickAdd = () => {
-    router.push({ name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT.WEBHOOK.CREATE._NAME });
+    router.push({ name: PROJECT_ROUTE.DETAIL.TAB.ALERT.WEBHOOK.CREATE._NAME });
 };
 const checkModalConfirm = async () => {
     if (checkModalState.mode === WEBHOOK_STATE.ENABLED) await enableWebhook();
diff --git a/apps/web/src/services/project-v1/components/ProjectDetailTab.vue b/apps/web/src/services/project-v1/components/ProjectDetailTab.vue
index c689390415..f4897394fe 100644
--- a/apps/web/src/services/project-v1/components/ProjectDetailTab.vue
+++ b/apps/web/src/services/project-v1/components/ProjectDetailTab.vue
@@ -15,7 +15,7 @@ import BetaMark from '@/common/components/marks/BetaMark.vue';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project-v1/stores/project-detail-page-store';
 
 interface Props {
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
     id: undefined,
     item: undefined,
     tabs: () => [],
-    activeTab: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+    activeTab: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
 });
 
 const route = useRoute();
@@ -52,7 +52,7 @@ const onChangeTab = (activeTab: string) => {
     if (activeTab === route.name) return;
     const isDashboardTab = activeTab.startsWith('public-dash-');
     const dashboardTabRoute = {
-        name: PROJECT_ROUTE_V1.DETAIL.TAB.DASHBOARD._NAME,
+        name: PROJECT_ROUTE.DETAIL.TAB.DASHBOARD._NAME,
         params: {
             id: props.id as string,
             dashboardId: activeTab,
diff --git a/apps/web/src/services/project-v1/components/ProjectDetailTabHeader.vue b/apps/web/src/services/project-v1/components/ProjectDetailTabHeader.vue
index 092f566bc2..d5d352cfa3 100644
--- a/apps/web/src/services/project-v1/components/ProjectDetailTabHeader.vue
+++ b/apps/web/src/services/project-v1/components/ProjectDetailTabHeader.vue
@@ -13,12 +13,12 @@ import {
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import DomainAdminImage from '@/assets/images/role/img_avatar_admin.png';
 import UserImage from '@/assets/images/role/img_avatar_no-role.png';
 import SystemAdminImage from '@/assets/images/role/img_avatar_system-admin.png';
 import WorkspaceMemberImage from '@/assets/images/role/img_avatar_workspace-member.png';
 import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner.png';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { ProjectGetParameters } from '@/schema/identity/project/api-verbs/get';
 import type { ProjectRemoveUsersParameters } from '@/schema/identity/project/api-verbs/remove-users';
 import type { ProjectUpdateParameters } from '@/schema/identity/project/api-verbs/udpate';
@@ -37,6 +37,7 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 import type { UserReferenceMap } from '@/store/reference/user-reference-store';
 
+import { useIsAlertManagerV2Enabled } from '@/lib/config/composables/use-is-alert-manager-v2-enabled';
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import { arrayToQueryString } from '@/lib/router-query-string';
 
@@ -54,7 +55,7 @@ import ProjectMainDeleteModal from '@/services/project-v1/components/ProjectMain
 import ProjectMainProjectGroupMoveModal from '@/services/project-v1/components/ProjectMainProjectGroupMoveModal.vue';
 import ProjectMemberInviteModal from '@/services/project-v1/components/ProjectMemberInviteModal.vue';
 import ProjectTagsModal from '@/services/project-v1/components/ProjectTagsModal.vue';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project-v1/stores/project-detail-page-store';
 import { useProjectTreeStore } from '@/services/project-v1/stores/project-tree-store';
 
@@ -87,6 +88,8 @@ const allReferenceStore = useAllReferenceStore();
 const appContextStore = useAppContextStore();
 const gnbStore = useGnbStore();
 
+const isAlertManagerV2Enabled = useIsAlertManagerV2Enabled();
+
 const queryHelper = new QueryHelper();
 const storeState = reactive({
     users: computed<UserReferenceMap>(() => allReferenceStore.getters.user),
@@ -197,10 +200,10 @@ const handleSelectItem = (selected: MenuItem) => {
 const handleClickWebhook = () => {
     if (!props.id) return;
     if (!webhooksState.alertActivated) {
-        router.push(getProperRouteLocation({ name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME, params: { id: props.id } }));
+        router.push(getProperRouteLocation({ name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME, params: { id: props.id } }));
         return;
     }
-    router.push(getProperRouteLocation({ name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME, params: { id: props.id }, query: { tab: 'webhook' } }));
+    router.push(getProperRouteLocation({ name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME, params: { id: props.id }, query: { tab: 'webhook' } }));
 };
 const handleOpenMemberModal = () => {
     memberState.memberModalVisible = true;
@@ -252,12 +255,12 @@ const handleHeaderIconHover = (isHovered: boolean) => {
 const handleClickBackButton = () => {
     if (state.parentGroupId) {
         router.push({
-            name: PROJECT_ROUTE_V1._NAME,
+            name: PROJECT_ROUTE._NAME,
             params: { projectGroupId: state.parentGroupId },
         });
         return;
     }
-    router.push({ name: PROJECT_ROUTE_V1._NAME });
+    router.push({ name: PROJECT_ROUTE._NAME });
 };
 
 const handleRemoveProjectUser = async (userId: string) => {
@@ -340,11 +343,13 @@ const getProjectAlertActivated = async () => {
 
 /* Watchers */
 watch(() => projectDetailPageGetters.projectType, async () => {
-    await Promise.allSettled([
-        getProjectAlertActivated(),
-        listWebhooks(),
-        fetchUserList(),
-    ]);
+    if (!isAlertManagerV2Enabled) {
+        await Promise.allSettled([
+            getProjectAlertActivated(),
+            listWebhooks(),
+        ]);
+    }
+    await fetchUserList();
 });
 
 watch(() => projectDetailPageState.projectId, async (projectId) => {
@@ -457,7 +462,8 @@ watch(() => projectDetailPageState.projectId, (projectId) => {
                                  :color="gray[400]"
                             />
                         </template>
-                        <div class="info-item"
+                        <div v-if="!isAlertManagerV2Enabled"
+                             class="info-item"
                              @click="handleClickWebhook"
                         >
                             <p-i class="info-icon"
diff --git a/apps/web/src/services/project-v1/components/ProjectFavoriteList.vue b/apps/web/src/services/project-v1/components/ProjectFavoriteList.vue
index 26a08036a7..dafdf36ba5 100644
--- a/apps/web/src/services/project-v1/components/ProjectFavoriteList.vue
+++ b/apps/web/src/services/project-v1/components/ProjectFavoriteList.vue
@@ -14,7 +14,7 @@ import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteB
 import type { FavoriteItem, FavoriteType } from '@/common/modules/favorites/favorite-button/type';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 const LIMIT_COUNT = 5;
 
@@ -43,7 +43,7 @@ const state = reactive({
     }),
     hoveredItem: null as null|FavoriteItem,
     isExpanded: false,
-    selectedItem: computed(() => (route.name === PROJECT_ROUTE_V1._NAME ? route.params.projectGroupId : route.params.id)),
+    selectedItem: computed(() => (route.name === PROJECT_ROUTE._NAME ? route.params.projectGroupId : route.params.id)),
 });
 
 const getResourceType = (type: FavoriteType) => {
diff --git a/apps/web/src/services/project-v1/components/ProjectMain.vue b/apps/web/src/services/project-v1/components/ProjectMain.vue
index 53ad30d38b..aa0b763490 100644
--- a/apps/web/src/services/project-v1/components/ProjectMain.vue
+++ b/apps/web/src/services/project-v1/components/ProjectMain.vue
@@ -10,7 +10,7 @@ import {
     PFieldTitle, PEmpty, PPaneLayout,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import type { ServiceAccountModel } from '@/schema/identity/service-account/model';
 
diff --git a/apps/web/src/services/project-v1/components/ProjectMainDeleteModal.vue b/apps/web/src/services/project-v1/components/ProjectMainDeleteModal.vue
index ee42c05e71..f69d202ccd 100644
--- a/apps/web/src/services/project-v1/components/ProjectMainDeleteModal.vue
+++ b/apps/web/src/services/project-v1/components/ProjectMainDeleteModal.vue
@@ -22,7 +22,7 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 
 interface Props {
@@ -69,7 +69,7 @@ const handleConfirmDelete = async () => {
         state.proxyVisible = false;
         if (!props.skipRedirect) {
             await router.replace({
-                name: PROJECT_ROUTE_V1._NAME,
+                name: PROJECT_ROUTE._NAME,
             });
         }
     }
diff --git a/apps/web/src/services/project-v1/components/ProjectMainProjectCard.vue b/apps/web/src/services/project-v1/components/ProjectMainProjectCard.vue
index 8a286ad21f..0d9fc853d9 100644
--- a/apps/web/src/services/project-v1/components/ProjectMainProjectCard.vue
+++ b/apps/web/src/services/project-v1/components/ProjectMainProjectCard.vue
@@ -22,7 +22,7 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { peacock } from '@/styles/colors';
 
 import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectPageStore } from '@/services/project-v1/stores/project-page-store';
 import type { ProjectCardItemType } from '@/services/project-v1/types/project-type';
 
@@ -86,7 +86,7 @@ const getProvider = (name: string): ProviderItem => storeState.providers[name] |
 
 const handleSelectProject = () => {
     router.push(getProperRouteLocation({
-        name: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+        name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
         params: {
             id: props.item.id as string,
         },
diff --git a/apps/web/src/services/project-v1/components/ProjectMainProjectGroupCard.vue b/apps/web/src/services/project-v1/components/ProjectMainProjectGroupCard.vue
index 5ef1cacf37..cad7e4bc03 100644
--- a/apps/web/src/services/project-v1/components/ProjectMainProjectGroupCard.vue
+++ b/apps/web/src/services/project-v1/components/ProjectMainProjectGroupCard.vue
@@ -15,7 +15,7 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { indigo } from '@/styles/colors';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectPageStore } from '@/services/project-v1/stores/project-page-store';
 import type { ProjectCardItemType } from '@/services/project-v1/types/project-type';
 
@@ -64,7 +64,7 @@ const state = reactive({
 
 const handleSelectProjectGroup = () => {
     router.push(getProperRouteLocation({
-        name: PROJECT_ROUTE_V1._NAME,
+        name: PROJECT_ROUTE._NAME,
         params: {
             projectGroupId: props.item.id as string,
         },
diff --git a/apps/web/src/services/project-v1/components/ProjectMainProjectGroupFormModal.vue b/apps/web/src/services/project-v1/components/ProjectMainProjectGroupFormModal.vue
index 76924a2cf1..1b7a0cc004 100644
--- a/apps/web/src/services/project-v1/components/ProjectMainProjectGroupFormModal.vue
+++ b/apps/web/src/services/project-v1/components/ProjectMainProjectGroupFormModal.vue
@@ -8,7 +8,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectGroupCreateParameters } from '@/schema/identity/project-group/api-verbs/create';
 import type { ProjectGroupListParameters } from '@/schema/identity/project-group/api-verbs/list';
 import type { ProjectGroupUpdateParameters } from '@/schema/identity/project-group/api-verbs/update';
diff --git a/apps/web/src/services/project-v1/components/ProjectMainTree.vue b/apps/web/src/services/project-v1/components/ProjectMainTree.vue
index d7cabf1e2f..b15b785dad 100644
--- a/apps/web/src/services/project-v1/components/ProjectMainTree.vue
+++ b/apps/web/src/services/project-v1/components/ProjectMainTree.vue
@@ -23,7 +23,7 @@ import type { Breadcrumb } from '@/common/modules/page-layouts/type';
 
 import { indigo, peacock } from '@/styles/colors';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectTreeStore } from '@/services/project-v1/stores/project-tree-store';
 import type { TreeNode, TreeDisplayMap, TreeData } from '@/services/project-v1/tree/type';
 
@@ -54,13 +54,13 @@ const state = reactive({
         const allPaths = state.currentParentPathIds.map((id) => ({
             name: storeState.projectGroup[id].name,
             to: {
-                name: PROJECT_ROUTE_V1._NAME,
+                name: PROJECT_ROUTE._NAME,
                 params: {
                     projectGroupId: id,
                 },
             },
         }));
-        return [{ name: i18n.t('MENU.PROJECT'), to: { name: PROJECT_ROUTE_V1._NAME } }, ...allPaths];
+        return [{ name: i18n.t('MENU.PROJECT'), to: { name: PROJECT_ROUTE._NAME } }, ...allPaths];
     }),
     selectedTreeId: undefined as string|undefined,
     projectTreeData: computed<TreeNode<ProjectDataType>[]>(() => {
@@ -76,7 +76,7 @@ const state = reactive({
                     id: key,
                     parentGroupId: projectGroup.data.parentGroupInfo?.id,
                     to: getProperRouteLocation({
-                        name: PROJECT_ROUTE_V1._NAME,
+                        name: PROJECT_ROUTE._NAME,
                         params: {
                             projectGroupId: key,
                         },
@@ -96,7 +96,7 @@ const state = reactive({
                     id: key,
                     parentGroupId: project.data.groupInfo?.id,
                     to: getProperRouteLocation({
-                        name: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+                        name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
                         params: {
                             id: key,
                         },
diff --git a/apps/web/src/services/project-v1/components/ProjectMemberInviteModal.vue b/apps/web/src/services/project-v1/components/ProjectMemberInviteModal.vue
index eaaa2bce09..12fee8681e 100644
--- a/apps/web/src/services/project-v1/components/ProjectMemberInviteModal.vue
+++ b/apps/web/src/services/project-v1/components/ProjectMemberInviteModal.vue
@@ -10,12 +10,12 @@ import {
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import DomainAdminImage from '@/assets/images/role/img_avatar_admin.png';
 import UserImage from '@/assets/images/role/img_avatar_no-role.png';
 import SystemAdminImage from '@/assets/images/role/img_avatar_system-admin.png';
 import WorkspaceMemberImage from '@/assets/images/role/img_avatar_workspace-member.png';
 import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner.png';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { ProjectAddUsersParameters } from '@/schema/identity/project/api-verbs/add-users';
 import type { ProjectGetParameters } from '@/schema/identity/project/api-verbs/get';
 import type { ProjectModel } from '@/schema/identity/project/model';
diff --git a/apps/web/src/services/project-v1/components/ProjectSummaryAlertWidget.vue b/apps/web/src/services/project-v1/components/ProjectSummaryAlertWidget.vue
index ff2bd5e05b..066179893f 100644
--- a/apps/web/src/services/project-v1/components/ProjectSummaryAlertWidget.vue
+++ b/apps/web/src/services/project-v1/components/ProjectSummaryAlertWidget.vue
@@ -15,7 +15,7 @@ import {
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AlertListParameters } from '@/schema/monitoring/alert/api-verbs/list';
 import { ALERT_STATE } from '@/schema/monitoring/alert/constants';
 import type { AlertModel } from '@/schema/monitoring/alert/model';
@@ -32,7 +32,7 @@ import { alert, secondary } from '@/styles/colors';
 import AlertListItem from '@/services/alert-manager-v1/components/AlertListItem.vue';
 import { ALERT_ASSIGNED_FILTER } from '@/services/alert-manager-v1/constants/alert-constant';
 import type { AlertListPageUrlQuery } from '@/services/alert-manager-v1/types/alert-type';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 interface AlertState {
     name: string;
@@ -94,7 +94,7 @@ const state = reactive({
 
 /* util */
 const alertLinkFormatter = (alertState): Location => ({
-    name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME,
+    name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME,
     query: {
         state: alertState,
     } as AlertListPageUrlQuery,
diff --git a/apps/web/src/services/project-v1/composables/use-project-tree-data.ts b/apps/web/src/services/project-v1/composables/use-project-tree-data.ts
index fc1c274eeb..0d9bb38ec9 100644
--- a/apps/web/src/services/project-v1/composables/use-project-tree-data.ts
+++ b/apps/web/src/services/project-v1/composables/use-project-tree-data.ts
@@ -11,7 +11,7 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
 import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectTreeStore } from '@/services/project-v1/stores/project-tree-store';
 import type { TreeNode, TreeDisplayMap } from '@/services/project-v1/tree/type';
 
@@ -124,12 +124,12 @@ export const useProjectTreeData = (): UseProjectTreeDataReturnType => {
         children: item.type === 'PROJECT' ? undefined : convertItemsToTreeData([], depth + 1),
     }));
     const convertProjectTreeNodeToLocation = (item: ProjectDataType): Location => (item.type === 'PROJECT' ? {
-        name: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+        name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
         params: {
             id: item.id,
         },
     } : {
-        name: PROJECT_ROUTE_V1._NAME,
+        name: PROJECT_ROUTE._NAME,
         params: {
             projectGroupId: item.id,
         },
diff --git a/apps/web/src/services/project-v1/composables/use-project-tree.ts b/apps/web/src/services/project-v1/composables/use-project-tree.ts
index 6fee433b5a..054d4b962e 100644
--- a/apps/web/src/services/project-v1/composables/use-project-tree.ts
+++ b/apps/web/src/services/project-v1/composables/use-project-tree.ts
@@ -3,7 +3,7 @@ import { cloneDeep, get } from 'lodash';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { Query, Sort } from '@cloudforet/core-lib/space-connector/type';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectGroupListParameters } from '@/schema/identity/project-group/api-verbs/list';
 import type { ProjectGroupModel } from '@/schema/identity/project-group/model';
 import type { ProjectListParameters } from '@/schema/identity/project/api-verbs/list';
diff --git a/apps/web/src/services/project-v1/pages/ProjectAlertEventRulePage.vue b/apps/web/src/services/project-v1/pages/ProjectAlertEventRulePage.vue
index bbc25d73e9..0bdcdf0f6a 100644
--- a/apps/web/src/services/project-v1/pages/ProjectAlertEventRulePage.vue
+++ b/apps/web/src/services/project-v1/pages/ProjectAlertEventRulePage.vue
@@ -9,7 +9,7 @@ import {
 } from '@cloudforet/mirinae';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { EventRuleChangeOrderParameters } from '@/schema/monitoring/event-rule/api-verbs/change-order';
 import type { EventRuleDeleteParameters } from '@/schema/monitoring/event-rule/api-verbs/delete';
 import type { EventRuleListParameters } from '@/schema/monitoring/event-rule/api-verbs/list';
diff --git a/apps/web/src/services/project-v1/pages/ProjectAlertPage.vue b/apps/web/src/services/project-v1/pages/ProjectAlertPage.vue
index cbe922236c..287960862f 100644
--- a/apps/web/src/services/project-v1/pages/ProjectAlertPage.vue
+++ b/apps/web/src/services/project-v1/pages/ProjectAlertPage.vue
@@ -9,7 +9,7 @@ import { PButtonTab, PButton } from '@cloudforet/mirinae';
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectAlertConfigCreateParameters } from '@/schema/monitoring/project-alert-config/api-verbs/create';
 import type { ProjectAlertConfigListParameters } from '@/schema/monitoring/project-alert-config/api-verbs/list';
 import type { ProjectAlertConfigModel } from '@/schema/monitoring/project-alert-config/model';
diff --git a/apps/web/src/services/project-v1/pages/ProjectDashboardPage.vue b/apps/web/src/services/project-v1/pages/ProjectDashboardPage.vue
index 780dbb38f0..dc5531ae98 100644
--- a/apps/web/src/services/project-v1/pages/ProjectDashboardPage.vue
+++ b/apps/web/src/services/project-v1/pages/ProjectDashboardPage.vue
@@ -1,14 +1,16 @@
 <script lang="ts" setup>
 import {
+    computed,
     onUnmounted,
-    reactive, ref, watch,
+    ref, watch,
 } from 'vue';
 
 import { PSkeleton } from '@cloudforet/mirinae';
 
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
+import { SpaceRouter } from '@/router';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
 import DashboardLabelsButton from '@/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue';
 import DashboardRefreshDropdown from '@/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue';
@@ -18,7 +20,9 @@ import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-det
 import DashboardWidgetContainerV2
     from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue';
 import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
+import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 
 
@@ -27,53 +31,45 @@ interface Props {
     dashboardId: string;
 }
 const props = defineProps<Props>();
+const { getProperRouteLocation } = useProperRouteLocation();
 
-const dashboardStore = useDashboardStore();
 const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailGetters = dashboardDetailStore.getters;
 const dashboardDetailState = dashboardDetailStore.state;
 const widgetContainerRef = ref<typeof DashboardWidgetContainer|null>(null);
-
-
-const state = reactive({
-    hasAlertConfig: false,
-    dashboardVariablesLoading: false,
+/* Query */
+const {
+    dashboard,
+    widgetList,
+    isError,
+    isLoading,
+} = useDashboardDetailQuery({
+    dashboardId: computed(() => props.dashboardId),
 });
 
-
-const handleUpdateDashboardVariables = async (params) => {
-    if (!props.dashboardId) return;
-    state.dashboardVariablesLoading = true;
-    try {
-        await dashboardStore.updateDashboard(props.dashboardId, params);
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dashboardVariablesLoading = false;
-    }
-};
 const handleRefresh = async () => {
     await dashboardDetailStore.listDashboardWidgets();
     if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
 };
-/* api */
-const getDashboardDataAndListWidget = async (dashboardId: string) => {
-    try {
-        await dashboardDetailStore.getDashboardInfo({ dashboardId, fetchWidgets: true });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    }
-};
-
-watch(() => props.dashboardId, async (dashboardId, prevDashboardId) => {
-    if (!dashboardId || !props.id) return;
-    /* NOTE: The dashboard data is reset in first entering case */
-    if (dashboardId && !prevDashboardId) { // this includes all three cases
+watch(dashboard, (_dashboard) => {
+    if (_dashboard) {
         dashboardDetailStore.reset();
+        dashboardDetailStore.setDashboardInfoStoreStateV2({
+            ..._dashboard,
+            project_id: props.id,
+        });
+    }
+});
+watch(widgetList, (_widgetList) => {
+    if (_widgetList.length) {
+        dashboardDetailStore.setDashboardWidgets(_widgetList);
     }
-    dashboardDetailStore.setProjectId(props.id);
-    await getDashboardDataAndListWidget(dashboardId);
-}, { immediate: true });
+});
+watch(isError, (error) => {
+    if (error) {
+        ErrorHandler.handleError(error);
+        SpaceRouter.router.push(getProperRouteLocation({ name: PROJECT_ROUTE.DETAIL._NAME }));
+    }
+});
 
 onUnmounted(() => {
     dashboardDetailStore.reset();
@@ -84,7 +80,7 @@ onUnmounted(() => {
     <div class="project-dashboard-page">
         <div class="dashboard-wrapper">
             <div class="title-wrapper">
-                <p-skeleton v-if="!dashboardDetailGetters.dashboardName"
+                <p-skeleton v-if="!dashboard?.name"
                             width="20rem"
                             height="1.5rem"
                 />
@@ -92,7 +88,7 @@ onUnmounted(() => {
                      class="dashboard-title"
                 >
                     <p class="title">
-                        {{ dashboardDetailGetters.dashboardName }}
+                        {{ dashboard?.name }}
                     </p>
                     <span class="beta-mark">beta</span>
                 </div>
@@ -104,19 +100,18 @@ onUnmounted(() => {
                 <div class="toolset">
                     <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
                     <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
-                                                :loading="dashboardDetailState.loadingWidgets"
+                                                :loading="isLoading"
                                                 disable-interval
                                                 @refresh="handleRefresh"
                     />
                 </div>
-                <div v-if="!dashboardDetailState.loadingDashboard"
+                <div v-if="!isLoading"
                      class="selectors"
                 >
                     <dashboard-variables-v2 class="variable-selector-wrapper"
                                             is-project-dashboard
-                                            :disable-save-button="dashboardDetailGetters.disableManageButtons"
-                                            :loading="state.dashboardVariablesLoading"
-                                            @update="handleUpdateDashboardVariables"
+                                            disable-save-button
+                                            :loading="isLoading"
                     />
                 </div>
                 <dashboard-widget-container-v2 ref="widgetContainerRef" />
diff --git a/apps/web/src/services/project-v1/pages/ProjectDetailPageLegacy.vue b/apps/web/src/services/project-v1/pages/ProjectDetailPageLegacy.vue
index 5c96d026f1..bcbb75fc5f 100644
--- a/apps/web/src/services/project-v1/pages/ProjectDetailPageLegacy.vue
+++ b/apps/web/src/services/project-v1/pages/ProjectDetailPageLegacy.vue
@@ -41,7 +41,7 @@ import { peacock } from '@/styles/colors';
 
 import ProjectFormModal from '@/services/project-v1/components/ProjectFormModal.vue';
 import ProjectMainProjectGroupMoveModal from '@/services/project-v1/components/ProjectMainProjectGroupMoveModal.vue';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project-v1/stores/project-detail-page-store';
 import { useProjectPageStore } from '@/services/project-v1/stores/project-page-store';
 
@@ -78,7 +78,7 @@ const state = reactive({
     projectGroupInfo: computed<ProjectGroupReferenceItem>(() => storeState.projectGroups?.[state.projectGroupId] ?? {}),
     pageNavigation: computed<Route[]>(() => {
         let results: Route[] = [
-            { name: i18n.t('MENU.PROJECT') as string, to: { name: PROJECT_ROUTE_V1._NAME } },
+            { name: i18n.t('MENU.PROJECT') as string, to: { name: PROJECT_ROUTE._NAME } },
         ];
         if (!isEmpty(state.projectGroupInfo)) {
             results.push({
@@ -86,12 +86,12 @@ const state = reactive({
                 to: referenceRouter(state.projectGroupId, { resource_type: 'identity.ProjectGroup' }),
             });
         }
-        if (route.name === PROJECT_ROUTE_V1.DETAIL.EVENT_RULE._NAME) {
+        if (route.name === PROJECT_ROUTE.DETAIL.EVENT_RULE._NAME) {
             results = results.concat([
                 { name: state.item?.name, to: referenceRouter(state.item?.project_id, { resource_type: 'identity.Project' }) },
                 { name: i18n.t('PROJECT.DETAIL.ALERT.EVENT_RULE') as string },
             ]);
-        } else if (route.name === PROJECT_ROUTE_V1.DETAIL.TAB.NOTIFICATIONS.ADD._NAME) {
+        } else if (route.name === PROJECT_ROUTE.DETAIL.TAB.NOTIFICATIONS.ADD._NAME) {
             results = results.concat([
                 { name: state.item?.name, to: referenceRouter(state.item?.project_id, { resource_type: 'identity.Project' }) },
                 { name: i18n.t('IDENTITY.USER.NOTIFICATION.FORM.ADD_CHANNEL', { type: route.query.protocolLabel }) as string },
@@ -111,9 +111,9 @@ const state = reactive({
     })),
     isHeaderVisible: computed<boolean>(() => {
         const excludeRoutes = [
-            PROJECT_ROUTE_V1.DETAIL.EVENT_RULE._NAME,
-            PROJECT_ROUTE_V1.DETAIL.TAB.NOTIFICATIONS.ADD._NAME,
-            PROJECT_ROUTE_V1.DETAIL.TAB.ALERT.WEBHOOK.CREATE._NAME,
+            PROJECT_ROUTE.DETAIL.EVENT_RULE._NAME,
+            PROJECT_ROUTE.DETAIL.TAB.NOTIFICATIONS.ADD._NAME,
+            PROJECT_ROUTE.DETAIL.TAB.ALERT.WEBHOOK.CREATE._NAME,
         ];
         return route.name ? !excludeRoutes.includes(route.name) : true;
     }),
@@ -153,7 +153,7 @@ const projectDeleteFormConfirm = async () => {
             itemId: projectDetailPageState.projectId as string,
         });
         showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_DELETE_PROJECT'), '');
-        router.push({ name: PROJECT_ROUTE_V1._NAME });
+        router.push({ name: PROJECT_ROUTE._NAME });
         const isFavoriteItem = favoriteGetters.projectItems.find((item) => item.itemId === projectDetailPageState.projectId);
         if (isFavoriteItem) {
             await favoriteStore.deleteFavorite({
@@ -178,7 +178,7 @@ const handleConfirmProjectGroupMoveModal = () => {
     projectDetailPageStore.getProject();
 };
 const handleGoBackProjectLanding = () => {
-    router.push(getProperRouteLocation({ name: PROJECT_ROUTE_V1._NAME, params: { projectGroupId: state.projectGroupId } }));
+    router.push(getProperRouteLocation({ name: PROJECT_ROUTE._NAME, params: { projectGroupId: state.projectGroupId } }));
 };
 
 /* Watchers */
diff --git a/apps/web/src/services/project-v1/pages/ProjectDetailTabPage.vue b/apps/web/src/services/project-v1/pages/ProjectDetailTabPage.vue
index f2d09838c1..e9967e771a 100644
--- a/apps/web/src/services/project-v1/pages/ProjectDetailTabPage.vue
+++ b/apps/web/src/services/project-v1/pages/ProjectDetailTabPage.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
 import {
-    computed, onMounted, onUnmounted, reactive, watch,
+    computed, onUnmounted, reactive, watch,
 } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
 import { isEmpty } from 'lodash';
 
 import {
-    PDataLoader, PHorizontalLayout, PTab, PDefinitionTable, PStatus, PHeading, PLazyImg, PBadge, PMarkdown,
+    PDataLoader,
 } from '@cloudforet/mirinae';
-import type { DefinitionField } from '@cloudforet/mirinae/types/data-display/tables/definition-table/type';
 import type { Route } from '@cloudforet/mirinae/types/navigation/breadcrumbs/type';
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
 import type { ProjectModel } from '@/schema/identity/project/model';
-import type { WebhookModel } from '@/schema/monitoring/webhook/model';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
@@ -24,6 +22,7 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProjectGroupReferenceItem, ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
+import { useIsAlertManagerV2Enabled } from '@/lib/config/composables/use-is-alert-manager-v2-enabled';
 import { referenceRouter } from '@/lib/reference/referenceRouter';
 
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
@@ -32,12 +31,12 @@ import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
 import { BACKGROUND_COLOR } from '@/styles/colorsets';
 
-import { userStateFormatter } from '@/services/iam/composables/refined-table-data';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+import ProjectAlertTab from '@/services/project-v1/components/ProjectAlertTab.vue';
 import ProjectDetailTab from '@/services/project-v1/components/ProjectDetailTab.vue';
 import ProjectDetailTabHeader from '@/services/project-v1/components/ProjectDetailTabHeader.vue';
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project-v1/stores/project-detail-page-store';
-import type { WebhookType } from '@/services/project-v1/types/project-alert-type';
 
 interface Props {
     id?: string;
@@ -50,26 +49,30 @@ const appContextStore = useAppContextStore();
 const allReferenceStore = useAllReferenceStore();
 const projectDetailPageStore = useProjectDetailPageStore();
 const projectDetailPageState = projectDetailPageStore.state;
-const projectDetailPageGetters = projectDetailPageStore.getters;
 const userWorkspaceStore = useUserWorkspaceStore();
 const dashboardStore = useDashboardStore();
 const userStore = useUserStore();
 
+/* Query */
+const {
+    publicDashboardList,
+    publicFolderList,
+} = useDashboardQuery();
+
+const isAlertManagerV2Enabled = useIsAlertManagerV2Enabled();
+
 const storeState = reactive({
     projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
     currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
-    selectedWebhookItem: computed<WebhookModel|undefined>(() => projectDetailPageGetters.selectedWebhookItem),
     language: computed<string|undefined>(() => userStore.state.language),
-    dashboardList: computed(() => dashboardStore.state.publicDashboardItems),
-    folderList: computed(() => dashboardStore.state.publicFolderItems),
 });
 const state = reactive({
     item: computed<ProjectModel|undefined>(() => projectDetailPageState.currentProject),
     projectGroupId: computed<string|undefined>(() => state.item?.project_group_id),
     projectGroupInfo: computed<ProjectGroupReferenceItem>(() => storeState.projectGroups?.[state.projectGroupId] ?? {}),
     pageNavigation: computed<Route[]>(() => {
-        let results: Route[] = [
-            { name: i18n.t('MENU.PROJECT') as string, to: { name: PROJECT_ROUTE_V1._NAME } },
+        const results: Route[] = [
+            { name: i18n.t('MENU.PROJECT') as string, to: { name: PROJECT_ROUTE._NAME } },
         ];
         if (!isEmpty(state.projectGroupInfo)) {
             results.push({
@@ -77,19 +80,19 @@ const state = reactive({
                 to: referenceRouter(state.projectGroupId, { resource_type: 'identity.ProjectGroup' }),
             });
         }
-        if (route.name === PROJECT_ROUTE_V1.DETAIL.EVENT_RULE._NAME) {
-            results = results.concat([
-                { name: state.item?.name, to: referenceRouter(state.item?.project_id, { resource_type: 'identity.Project' }) },
-                { name: i18n.t('PROJECT.DETAIL.ALERT.EVENT_RULE') as string },
-            ]);
-        } else if (route.name === PROJECT_ROUTE_V1.DETAIL.TAB.NOTIFICATIONS.ADD._NAME) {
-            results = results.concat([
-                { name: state.item?.name, to: referenceRouter(state.item?.project_id, { resource_type: 'identity.Project' }) },
-                { name: i18n.t('IDENTITY.USER.NOTIFICATION.FORM.ADD_CHANNEL', { type: route.query.protocolLabel }) as string },
-            ]);
-        } else {
-            results.push({ name: state.item?.name });
-        }
+        // if (route.name === PROJECT_ROUTE_V1.DETAIL.EVENT_RULE._NAME) {
+        //     results = results.concat([
+        //         { name: state.item?.name, to: referenceRouter(state.item?.project_id, { resource_type: 'identity.Project' }) },
+        //         { name: i18n.t('PROJECT.DETAIL.ALERT.EVENT_RULE') as string },
+        //     ]);
+        // } else if (route.name === PROJECT_ROUTE_V1.DETAIL.TAB.NOTIFICATIONS.ADD._NAME) {
+        //     results = results.concat([
+        //         { name: state.item?.name, to: referenceRouter(state.item?.project_id, { resource_type: 'identity.Project' }) },
+        //         { name: i18n.t('IDENTITY.USER.NOTIFICATION.FORM.ADD_CHANNEL', { type: route.query.protocolLabel }) as string },
+        //     ]);
+        // } else {
+        // }
+        results.push({ name: state.item?.name });
         return results;
     }),
     projectGroupMoveModalVisible: false,
@@ -97,26 +100,23 @@ const state = reactive({
         type: FAVORITE_TYPE.PROJECT,
         id: projectDetailPageState.projectId,
     })),
-    webhookTypeList: [] as WebhookType[],
-    selectedPlugin: computed<WebhookType|undefined>(() => {
-        const id = storeState.selectedWebhookItem?.plugin_info.plugin_id;
-        return state.webhookTypeList.find((i) => i.plugin_id === id);
-    }),
 });
 const singleItemTabState = reactive({
     tabs: computed<TabItem[]>(() => [
         {
-            name: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+            name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
             label: i18n.t('PROJECT.DETAIL.TAB_SUMMARY'),
         },
-        {
-            name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME,
-            label: i18n.t('PROJECT.DETAIL.TAB_ALERT'),
-        },
-        {
-            name: PROJECT_ROUTE_V1.DETAIL.TAB.NOTIFICATIONS._NAME,
-            label: i18n.t('PROJECT.DETAIL.TAB_NOTIFICATIONS'),
-        },
+        ...(isAlertManagerV2Enabled ? [] : [
+            {
+                name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME,
+                label: i18n.t('PROJECT.DETAIL.TAB_ALERT'),
+            },
+            {
+                name: PROJECT_ROUTE.DETAIL.TAB.NOTIFICATIONS._NAME,
+                label: i18n.t('PROJECT.DETAIL.TAB_NOTIFICATIONS'),
+            },
+        ]),
         ...(singleItemTabState.dashboardTabs.length
             ? [
                 {
@@ -128,10 +128,10 @@ const singleItemTabState = reactive({
             : []),
     ]),
     dashboardTabs: computed(() => {
-        const projectDashboardItems = storeState.dashboardList
-            .filter((d) => d.version !== '1.0' && !!d.shared && d.scope === 'PROJECT');
-        const projectFolderItems = storeState.folderList
-            .filter((d) => !!d.shared && d.scope === 'PROJECT');
+        const projectDashboardItems = publicDashboardList.value
+            .filter((d) => d.version !== '1.0' && d.shared && d.scope === 'PROJECT');
+        const projectFolderItems = publicFolderList.value
+            .filter((d) => d.shared && d.scope === 'PROJECT');
 
         const folderTabs = projectFolderItems.map((folder) => ({
             name: folder.folder_id,
@@ -154,47 +154,13 @@ const singleItemTabState = reactive({
             ...dashboardTabs,
         ];
     }),
-    activeTab: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
-    webhookDetailTab: computed<TabItem[]>(() => {
-        const defaultTab = [{
-            name: 'details',
-            label: i18n.t('MONITORING.ALERT.DETAIL.DETAILS.DETAILS'),
-        }];
-        if (state.selectedPlugin?.docs && !isEmpty(state.selectedPlugin?.docs)) {
-            defaultTab.push({
-                name: 'help',
-                label: i18n.t('PROJECT.DETAIL.HELP'),
-            });
-        }
-        return defaultTab;
-    }),
-    webhookDetailActiveTab: 'details',
-});
-const tableState = reactive({
-    definitionFields: computed<DefinitionField[]>(() => [
-        { label: 'Webhook ID', name: 'webhook_id' },
-        { label: 'Name', name: 'name' },
-        { label: 'State', name: 'state' },
-        { label: 'Plugin', name: 'plugin_info.plugin_id' },
-        { label: 'Version', name: 'plugin_info.version' },
-        { label: 'Webhook URL', name: 'webhook_url' },
-    ]),
+    activeTab: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
 });
 
-const listProjectDashboard = async () => {
-    await dashboardStore.load();
-};
-
 /* Watchers */
-watch(() => storeState.selectedWebhookItem, () => {
-    singleItemTabState.webhookDetailActiveTab = 'details';
-}, { immediate: true });
 watch(() => projectDetailPageState.projectId, async (projectId) => {
     if (projectId) {
-        await Promise.allSettled([
-            projectDetailPageStore.getProject(projectId),
-            projectDetailPageStore.getAlertCounts(projectId),
-        ]);
+        await projectDetailPageStore.getProject(projectId);
     }
 });
 watch(() => route.name, (routeName) => {
@@ -207,10 +173,10 @@ watch(() => route.name, (routeName) => {
         return acc;
     }, [] as TabItem[]);
     const exactRoute = route.matched.find((d) => flattenTabs.find((tab) => tab.name === d.name));
-    if (routeName === PROJECT_ROUTE_V1.DETAIL.TAB.DASHBOARD._NAME) {
+    if (routeName === PROJECT_ROUTE.DETAIL.TAB.DASHBOARD._NAME) {
         singleItemTabState.activeTab = route.params.dashboardId;
     } else {
-        singleItemTabState.activeTab = exactRoute?.name || PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME;
+        singleItemTabState.activeTab = exactRoute?.name || PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME;
     }
 }, { immediate: true });
 watch([
@@ -229,10 +195,6 @@ watch(() => state.favoriteOptions, (favoriteOptions) => {
     gnbStore.setFavoriteItemId(favoriteOptions);
 }, { immediate: true });
 
-onMounted(async () => {
-    state.webhookTypeList = await projectDetailPageStore.getListWebhookType();
-    await listProjectDashboard();
-});
 onUnmounted(() => {
     projectDetailPageStore.reset();
     dashboardStore.reset();
@@ -246,89 +208,12 @@ onUnmounted(() => {
                        :loading="projectDetailPageState.loading"
                        :loader-backdrop-color="BACKGROUND_COLOR"
         >
-            <div v-if="singleItemTabState.activeTab === PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME
-                && route.query?.tab === 'webhook'"
-            >
-                <p-horizontal-layout class="page-inner"
-                                     :height="522"
-                >
-                    <template #container="{ height }">
-                        <project-detail-tab :id="props.id"
-                                            :style="{ height: `${height}px` }"
-                                            :item="state.item"
-                                            :tabs="singleItemTabState.tabs"
-                                            :active-tab.sync="singleItemTabState.activeTab"
-                        />
-                    </template>
-                </p-horizontal-layout>
-                <p-tab v-if="storeState.selectedWebhookItem"
-                       :tabs="singleItemTabState.webhookDetailTab"
-                       :active-tab.sync="singleItemTabState.webhookDetailActiveTab"
-                >
-                    <template #details>
-                        <p-heading class="pt-8 px-4 pb-4"
-                                   heading-type="sub"
-                                   :title="$t('PROJECT.DETAIL.MEMBER.BASE_INFORMATION')"
-                        />
-                        <p-definition-table :fields="tableState.definitionFields"
-                                            :data="storeState.selectedWebhookItem"
-                                            :skeleton-rows="4"
-                                            block
-                        >
-                            <template #data-state="{data}">
-                                <p-status
-                                    class="capitalize"
-                                    v-bind="userStateFormatter(data)"
-                                />
-                            </template>
-                            <template #data-plugin_info.plugin_id="{value}">
-                                <div class="col-type">
-                                    <p-lazy-img :src="state.selectedPlugin ? state.selectedPlugin?.tags?.icon : 'ic_webhook'"
-                                                error-icon="ic_webhook"
-                                                width="1rem"
-                                                height="1rem"
-                                                class="mr-2"
-                                    />
-                                    <span class="name">{{ state.selectedPlugin ? state.selectedPlugin?.name : value }}</span>
-                                </div>
-                            </template>
-                        </p-definition-table>
-                    </template>
-                    <template #help>
-                        <div class="help-tap">
-                            <div class="plugin-wrapper">
-                                <p-lazy-img :src="state.selectedPlugin ? state.selectedPlugin?.tags?.icon : 'ic_webhook'"
-                                            error-icon="ic_webhook"
-                                            width="2rem"
-                                            height="2rem"
-                                />
-                                <div class="plugin-info-wrapper">
-                                    <p class="plugin-info">
-                                        <span class="name">
-                                            {{ state.selectedPlugin ? state.selectedPlugin?.name : storeState.selectedWebhookItem?.plugin_info.plugin_id }}
-                                        </span>
-                                        <p-badge style-type="gray900"
-                                                 badge-type="solid-outline"
-                                        >
-                                            v {{ storeState.selectedWebhookItem?.plugin_info.version }}
-                                        </p-badge>
-                                    </p>
-                                    <p class="desc">
-                                        {{ state.selectedPlugin?.tags?.long_description || state.selectedPlugin?.tags.description }}
-                                    </p>
-                                </div>
-                            </div>
-                            <div class="docs-wrapper">
-                                <p-markdown :markdown="state.selectedPlugin?.docs"
-                                            :language="storeState.language"
-                                            remove-spacing
-                                            class="markdown"
-                                />
-                            </div>
-                        </div>
-                    </template>
-                </p-tab>
-            </div>
+            <project-alert-tab v-if="singleItemTabState.activeTab === PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME
+                                   && route.query?.tab === 'webhook'"
+                               :id="props.id"
+                               :tabs="singleItemTabState.tabs"
+                               :active-tab.sync="singleItemTabState.activeTab"
+            />
             <div v-else>
                 <project-detail-tab :id="props.id"
                                     :item="state.item"
diff --git a/apps/web/src/services/project-v1/pages/ProjectSummaryPage.vue b/apps/web/src/services/project-v1/pages/ProjectSummaryPage.vue
index 5f0e120ddf..acca1a0fa6 100644
--- a/apps/web/src/services/project-v1/pages/ProjectSummaryPage.vue
+++ b/apps/web/src/services/project-v1/pages/ProjectSummaryPage.vue
@@ -6,10 +6,12 @@ import {
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PI, PIconButton } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectAlertConfigListParameters } from '@/schema/monitoring/project-alert-config/api-verbs/list';
 import type { ProjectAlertConfigModel } from '@/schema/monitoring/project-alert-config/model';
 
+import { useIsAlertManagerV2Enabled } from '@/lib/config/composables/use-is-alert-manager-v2-enabled';
+
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import DailyUpdates from '@/common/modules/widgets/DailyUpdates.vue';
 
@@ -33,6 +35,7 @@ const state = reactive({
     hasAlertConfig: false,
     deprecatedNotiVisible: true,
 });
+const isAlertManagerV2Enabled = useIsAlertManagerV2Enabled();
 
 const handleClickNotiClose = () => {
     state.deprecatedNotiVisible = false;
@@ -51,7 +54,7 @@ const getProjectAlertConfig = async () => {
 };
 
 watch(() => props.id, () => {
-    getProjectAlertConfig();
+    if (!isAlertManagerV2Enabled) getProjectAlertConfig();
 }, { immediate: true });
 </script>
 
@@ -89,11 +92,10 @@ watch(() => props.id, () => {
             :project-id="props.id"
         />
         <div class="col-span-12 lg:col-span-9 grid grid-cols-12 left-part">
-            <project-summary-alert-widget
-                v-if="state.hasAlertConfig"
-                :key="`project-summary-alert-widget-${props.id}`"
-                class="col-span-12"
-                :project-id="props.id"
+            <project-summary-alert-widget v-if="!isAlertManagerV2Enabled && state.hasAlertConfig"
+                                          :key="`project-summary-alert-widget-${props.id}`"
+                                          class="col-span-12"
+                                          :project-id="props.id"
             />
             <!--            <project-v1-summary-billing-widget-->
             <!--                class="col-span-12"-->
diff --git a/apps/web/src/services/project-v1/routes/route-constant.ts b/apps/web/src/services/project-v1/routes/route-constant.ts
index 70770ee910..927b8216d4 100644
--- a/apps/web/src/services/project-v1/routes/route-constant.ts
+++ b/apps/web/src/services/project-v1/routes/route-constant.ts
@@ -1,6 +1,6 @@
 import { MENU_ID } from '@/lib/menu/config';
 
-export const PROJECT_ROUTE_V1 = Object.freeze({
+export const PROJECT_ROUTE = Object.freeze({
     _NAME: MENU_ID.PROJECT,
     DETAIL: {
         _NAME: `${MENU_ID.PROJECT}.detail`,
diff --git a/apps/web/src/services/project-v1/routes/routes.ts b/apps/web/src/services/project-v1/routes/routes.ts
index d1d49f8883..98a4ac0d7b 100644
--- a/apps/web/src/services/project-v1/routes/routes.ts
+++ b/apps/web/src/services/project-v1/routes/routes.ts
@@ -3,7 +3,7 @@ import type { RouteConfig } from 'vue-router';
 import { MENU_ID } from '@/lib/menu/config';
 import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 const ProjectContainer = () => import('@/services/project-v1/ProjectContainer.vue');
 
@@ -27,7 +27,7 @@ export default {
     children: [
         {
             path: ':projectGroupId?',
-            name: PROJECT_ROUTE_V1._NAME,
+            name: PROJECT_ROUTE._NAME,
             meta: {
                 menuId: MENU_ID.PROJECT,
                 lsbVisible: true,
@@ -37,35 +37,35 @@ export default {
         },
         {
             path: 'detail/:id',
-            name: PROJECT_ROUTE_V1.DETAIL._NAME,
-            redirect: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+            name: PROJECT_ROUTE.DETAIL._NAME,
+            redirect: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
             props: true,
             component: ProjectDetailPage,
             children: [
                 {
                     path: '/',
-                    name: PROJECT_ROUTE_V1.DETAIL.TAB._NAME,
-                    redirect: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+                    name: PROJECT_ROUTE.DETAIL.TAB._NAME,
+                    redirect: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
                     props: true,
                     component: ProjectDetailTabPage,
                     children: [
                         {
                             path: 'summary',
-                            name: PROJECT_ROUTE_V1.DETAIL.TAB.SUMMARY._NAME,
+                            name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
                             meta: { lsbVisible: true },
                             props: true,
                             component: ProjectSummaryPage,
                         },
                         {
                             path: 'alert',
-                            name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT._NAME,
+                            name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME,
                             meta: { lsbVisible: true },
                             props: true,
                             component: ProjectAlertPage,
                         },
                         {
                             path: 'notification',
-                            name: PROJECT_ROUTE_V1.DETAIL.TAB.NOTIFICATIONS._NAME,
+                            name: PROJECT_ROUTE.DETAIL.TAB.NOTIFICATIONS._NAME,
                             meta: { lsbVisible: true },
                             props: true,
                             component: ProjectNotificationsPage,
@@ -76,7 +76,7 @@ export default {
                         },
                         {
                             path: 'dashboard/:dashboardId',
-                            name: PROJECT_ROUTE_V1.DETAIL.TAB.DASHBOARD._NAME,
+                            name: PROJECT_ROUTE.DETAIL.TAB.DASHBOARD._NAME,
                             meta: { lsbVisible: true },
                             props: true,
                             component: ProjectDashboardPage,
@@ -85,21 +85,21 @@ export default {
                 },
                 {
                     path: 'event-rule',
-                    name: PROJECT_ROUTE_V1.DETAIL.EVENT_RULE._NAME,
+                    name: PROJECT_ROUTE.DETAIL.EVENT_RULE._NAME,
                     props: (route) => ({ projectId: route.params.id }),
                     meta: { lsbVisible: true },
                     component: ProjectAlertEventRulePage,
                 },
                 {
                     path: 'notification/:protocolId',
-                    name: PROJECT_ROUTE_V1.DETAIL.TAB.NOTIFICATIONS.ADD._NAME,
+                    name: PROJECT_ROUTE.DETAIL.TAB.NOTIFICATIONS.ADD._NAME,
                     meta: { lsbVisible: true },
                     component: ProjectNotificationAddPage,
                     props: true,
                 },
                 {
                     path: 'webhook/create',
-                    name: PROJECT_ROUTE_V1.DETAIL.TAB.ALERT.WEBHOOK.CREATE._NAME,
+                    name: PROJECT_ROUTE.DETAIL.TAB.ALERT.WEBHOOK.CREATE._NAME,
                     meta: { centeredLayout: true },
                     component: ProjectAlertWebhookCreatePage,
                 },
diff --git a/apps/web/src/services/project-v1/stores/project-detail-page-store.ts b/apps/web/src/services/project-v1/stores/project-detail-page-store.ts
index bf5d916442..cf2392ef87 100644
--- a/apps/web/src/services/project-v1/stores/project-detail-page-store.ts
+++ b/apps/web/src/services/project-v1/stores/project-detail-page-store.ts
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectGetParameters } from '@/schema/identity/project/api-verbs/get';
 import type { ProjectModel } from '@/schema/identity/project/model';
 import type { ProjectType } from '@/schema/identity/project/type';
@@ -18,7 +18,7 @@ import type { RepositoryModel } from '@/schema/repository/repository/model';
 import { NoResourceError } from '@/common/composables/error/error';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import { PROJECT_ROUTE_V1 } from '@/services/project-v1/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 
 export interface AlertCount {
     state: AlertState;
@@ -76,7 +76,7 @@ export const useProjectDetailPageStore = defineStore('page-project-v1-detail', (
             });
         } catch (e) {
             state.currentProject = undefined;
-            ErrorHandler.handleError(new NoResourceError({ name: PROJECT_ROUTE_V1._NAME }));
+            ErrorHandler.handleError(new NoResourceError({ name: PROJECT_ROUTE._NAME }));
         } finally {
             state.loading = false;
         }
diff --git a/apps/web/src/services/project/ProjectContainer.vue b/apps/web/src/services/project/ProjectContainer.vue
deleted file mode 100644
index 7965631e4d..0000000000
--- a/apps/web/src/services/project/ProjectContainer.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { computed, onUnmounted, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import type { ProjectGroupModel } from '@/schema/identity/project-group/model';
-import type { ProjectModel } from '@/schema/identity/project/model';
-
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-import CenteredPageLayout from '@/common/modules/page-layouts/CenteredPageLayout.vue';
-import GeneralPageLayout from '@/common/modules/page-layouts/GeneralPageLayout.vue';
-import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout.vue';
-
-import ProjectFormModal from '@/services/project/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupFormModal from '@/services/project/components/ProjectMainProjectGroupFormModal.vue';
-import ProjectLSB from '@/services/project/ProjectLSB.vue';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-import { useProjectPageStore } from '@/services/project/stores/project-page-store';
-import { useProjectTreeStore } from '@/services/project/stores/project-tree-store';
-
-
-
-const route = useRoute();
-const router = useRouter();
-const gnbStore = useGnbStore();
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
-const projectTreeStore = useProjectTreeStore();
-
-const state = reactive({
-    currentProjectGroupId: computed(() => route.params.projectGroupId),
-    isProjectRootPage: computed(() => route.name === PROJECT_ROUTE._NAME && !state.currentProjectGroupId),
-});
-
-/* Event */
-const handleUpdateProjectFormModalVisible = (visible: boolean) => {
-    projectPageStore.setProjectFormModalVisible(visible);
-    if (projectPageState.currentSelectedProjectId && !visible) {
-        projectPageStore.setCurrentSelectedProjectId(undefined);
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-    }
-};
-const handleUpdateProjectGroupFormModalVisible = (visible: boolean) => {
-    projectPageStore.setProjectGroupFormVisible(visible);
-    if (projectPageState.currentSelectedProjectGroupId && !visible) {
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-        projectPageStore.setProjectGroupFormUpdateMode(false);
-    }
-};
-const refreshProejctTree = () => {
-    projectTreeStore.refreshProjectTree();
-};
-
-const handleConfirmProjectFormModal = (isCreating: boolean, result: ProjectModel) => {
-    refreshProejctTree();
-    if (isCreating && !result.project_group_id && !state.isProjectRootPage) {
-        router.push({ name: PROJECT_ROUTE._NAME });
-    }
-};
-const handleConfirmProjectGroupFormModal = (isCreating: boolean, result: ProjectGroupModel) => {
-    refreshProejctTree();
-    if (isCreating && !result.parent_group_id && !state.isProjectRootPage) {
-        router.push({ name: PROJECT_ROUTE._NAME });
-    }
-};
-
-/* Lifecycle */
-onUnmounted(() => {
-    gnbStore.initState();
-    projectPageStore.reset();
-});
-</script>
-
-<template>
-    <fragment>
-        <vertical-page-layout v-if="$route.meta.lsbVisible">
-            <template #sidebar>
-                <project-l-s-b />
-            </template>
-            <template #default>
-                <router-view />
-            </template>
-        </vertical-page-layout>
-        <centered-page-layout v-else-if="$route.meta.centeredLayout"
-                              has-nav-bar
-        >
-            <router-view />
-        </centered-page-layout>
-        <general-page-layout v-else>
-            <router-view />
-        </general-page-layout>
-        <project-form-modal v-if="projectPageState.projectFormModalVisible"
-                            :visible="projectPageState.projectFormModalVisible"
-                            :project-id="projectPageState.currentSelectedProjectId"
-                            :project-group-id="projectPageState.currentSelectedProjectGroupId"
-                            @update:visible="handleUpdateProjectFormModalVisible"
-                            @confirm="handleConfirmProjectFormModal"
-        />
-        <project-main-project-group-form-modal v-if="projectPageState.projectGroupFormVisible"
-                                               :visible="projectPageState.projectGroupFormVisible"
-                                               :update-mode="projectPageState.projectGroupFormUpdateMode"
-                                               :parent-group-id="projectPageState.currentSelectedProjectGroupId"
-                                               :project-group-id="projectPageState.currentSelectedProjectGroupId || state.currentProjectGroupId"
-                                               @update:visible="handleUpdateProjectGroupFormModalVisible"
-                                               @confirm="handleConfirmProjectGroupFormModal"
-        />
-    </fragment>
-</template>
diff --git a/apps/web/src/services/project/ProjectLSB.vue b/apps/web/src/services/project/ProjectLSB.vue
deleted file mode 100644
index afea89ed8a..0000000000
--- a/apps/web/src/services/project/ProjectLSB.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<script setup lang="ts">
-import { onClickOutside } from '@vueuse/core/index';
-import { computed, reactive, ref } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-
-import { find } from 'lodash';
-
-import {
-    PTextInput, PTextHighlighting, PEmpty, PBadge, PContextMenu, PIconButton,
-} from '@cloudforet/mirinae';
-import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
-
-import { ALERT_STATE } from '@/schema/monitoring/alert/constants';
-import { i18n } from '@/translations';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectReferenceItem } from '@/store/reference/project-reference-store';
-
-import { MENU_ID } from '@/lib/menu/config';
-
-import { useProperRouteLocation } from '@/common/composables/proper-route-location';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import LSB from '@/common/modules/navigations/lsb/LSB.vue';
-import LSBRouterMenuItem from '@/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue';
-import type { LSBItem, LSBMenu } from '@/common/modules/navigations/lsb/type';
-import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
-
-import { indigo, peacock } from '@/styles/colors';
-
-import ProjectMainTree from '@/services/project/components/ProjectMainTree.vue';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-import { useProjectDetailPageStore } from '@/services/project/stores/project-detail-page-store';
-import { useProjectPageStore } from '@/services/project/stores/project-page-store';
-
-const route = useRoute();
-const allReferenceStore = useAllReferenceStore();
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const userWorkspaceStore = useUserWorkspaceStore();
-const workspaceStoreGetters = userWorkspaceStore.getters;
-const { getProperRouteLocation } = useProperRouteLocation();
-const projectDetailPageStore = useProjectDetailPageStore();
-const projectDetailPageState = projectDetailPageStore.state;
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
-const menuRef = ref<any|null>(null);
-
-
-const storeState = reactive({
-    projectItems: computed<ProjectReferenceItem[]>(() => Object.values(allReferenceStore.getters.project)),
-    favoriteItems: computed(() => favoriteGetters.favoriteMenuList.filter((favoriteMenu) => {
-        if (favoriteMenu.itemType === FAVORITE_TYPE.PROJECT) return true;
-        if (favoriteMenu.itemType === FAVORITE_TYPE.PROJECT_GROUP) return true;
-        return false;
-    })),
-    currentWorkspaceId: computed(() => workspaceStoreGetters.currentWorkspaceId as string),
-});
-
-const state = reactive({
-    projectKeyword: '',
-    currentPath: computed(() => route.fullPath),
-    starredMenuItems: computed<LSBItem[]>(() => storeState.favoriteItems.map((d) => {
-        if (d.itemType === FAVORITE_TYPE.PROJECT_GROUP) {
-            return {
-                type: MENU_ITEM_TYPE.ITEM,
-                label: d.label,
-                id: d.name,
-                icon: { name: 'ic_folder-filled', color: indigo[500] },
-                to: getProperRouteLocation({
-                    name: PROJECT_ROUTE._NAME,
-                    params: { projectGroupId: d.itemId },
-                }),
-                favoriteOptions: { type: FAVORITE_TYPE.PROJECT_GROUP, id: d.name },
-            };
-        }
-        return {
-            type: MENU_ITEM_TYPE.ITEM,
-            label: d.label,
-            id: d.name,
-            icon: { name: 'ic_document-filled', color: peacock[600] },
-            to: getProperRouteLocation({
-                name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-                params: { id: d.itemId },
-            }),
-            favoriteOptions: { type: FAVORITE_TYPE.PROJECT, id: d.name },
-        };
-    })),
-    isProjectLandingPage: computed(() => route.name === PROJECT_ROUTE._NAME),
-    projectLandingMenuSet: computed(() => [
-        {
-            type: MENU_ITEM_TYPE.SLOT,
-            label: i18n.t('PROJECT.LANDING.ALL_PROJECTS'),
-            id: MENU_ID.PROJECT,
-            icon: 'ic_dots-4-square',
-            to: getProperRouteLocation({ name: PROJECT_ROUTE._NAME }),
-            hideFavorite: true,
-        },
-        {
-            type: MENU_ITEM_TYPE.DIVIDER,
-        },
-        {
-            type: MENU_ITEM_TYPE.COLLAPSIBLE,
-            label: i18n.t('PROJECT.LANDING.PROJECT'),
-            id: 'project',
-        },
-    ]),
-    menuSet: computed<LSBMenu[]>(() => {
-        const baseMenuSet = [
-            {
-                type: MENU_ITEM_TYPE.STARRED,
-                childItems: state.starredMenuItems,
-                currentPath: state.currentPath,
-            },
-            { type: MENU_ITEM_TYPE.DIVIDER },
-        ];
-        return [
-            ...baseMenuSet,
-            ...state.projectLandingMenuSet,
-        ];
-    }),
-    projectFilteredByKeyword: computed<LSBItem[]>(() => storeState.projectItems.filter((project) => project.name?.toLowerCase()?.includes(state.projectKeyword?.toLowerCase()))
-        .map((project) => ({
-            type: MENU_ITEM_TYPE.ITEM,
-            label: project.name,
-            id: project.key,
-            icon: { name: 'ic_document-filled', color: peacock[600] },
-            to: getProperRouteLocation({
-                name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-                params: { id: project.key, workspaceId: storeState.currentWorkspaceId },
-            }),
-            favoriteOptions: { type: FAVORITE_TYPE.PROJECT, id: project.key },
-        }))),
-    alertCounts: computed(() => ({
-        TRIGGERED: find(projectDetailPageState.alertCounts, { state: ALERT_STATE.TRIGGERED })?.total ?? 0,
-    })),
-    createDropdownMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
-        {
-            name: 'project',
-            label: i18n.t('PROJECT.LANDING.PROJECT') as string,
-            icon: 'ic_document-filled',
-            iconColor: peacock[600],
-        },
-        {
-            name: 'projectGroup',
-            label: i18n.t('PROJECT.LANDING.PROJECT_GROUP') as string,
-            icon: 'ic_folder-filled',
-            iconColor: indigo[500],
-        },
-    ])),
-    createMenuVisible: false,
-});
-
-const handleClickAddButton = () => {
-    state.createMenuVisible = !state.createMenuVisible;
-};
-const handleSelectCreateMenu = (item: SelectDropdownMenuItem) => {
-    if (item.name === 'project') {
-        projectPageStore.setProjectFormModalVisible(true);
-    } else if (item.name === 'projectGroup') {
-        projectPageStore.setProjectGroupFormVisible(true);
-    }
-};
-
-onClickOutside(menuRef, () => {
-    state.createMenuVisible = false;
-});
-</script>
-
-<template>
-    <l-s-b class="project-l-s-b"
-           :menu-set="state.menuSet"
-    >
-        <template #slot-project="item">
-            <l-s-b-router-menu-item :current-path="state.currentPath"
-                                    :item="item"
-            >
-                <template #right-extra>
-                    <div v-if="projectPageState.isWorkspaceOwner"
-                         ref="menuRef"
-                         class="create-button-wrapper"
-                    >
-                        <p-icon-button name="ic_plus"
-                                       size="sm"
-                                       style-type="tertiary"
-                                       shape="square"
-                                       class="dashboard-create-button"
-                                       @click.prevent="handleClickAddButton"
-                        />
-                        <p-context-menu v-show="state.createMenuVisible"
-                                        class="create-context-menu"
-                                        no-select-indication
-                                        :menu="state.createDropdownMenuItems"
-                                        @select="handleSelectCreateMenu"
-                        />
-                    </div>
-                </template>
-            </l-s-b-router-menu-item>
-        </template>
-        <template #collapsible-contents-project>
-            <p-text-input v-model="state.projectKeyword"
-                          class="project-search"
-                          placeholder="Search project"
-            />
-            <template v-if="state.projectKeyword">
-                <l-s-b-router-menu-item v-for="(_item, idx) of state.projectFilteredByKeyword"
-                                        :key="idx"
-                                        :item="_item"
-                                        :idx="`search-${idx}`"
-                                        :current-path="state.currentPath"
-                                        is-hide-favorite
-                >
-                    <p-text-highlighting class="search-result-text"
-                                         :term="state.projectKeyword"
-                                         :text="_item.label"
-                    />
-                </l-s-b-router-menu-item>
-                <p-empty v-if="state.projectKeyword && !state.projectFilteredByKeyword.length"
-                         class="search-empty"
-                >
-                    <span>
-                        {{ $t('PROJECT.LANDING.SEARCH_EMPTY_TEXT') }}
-                    </span>
-                </p-empty>
-            </template>
-            <project-main-tree v-else />
-        </template>
-        <template #after-text-project-alert>
-            <p-badge style-type="primary3"
-                     badge-type="subtle"
-                     class="ml-1"
-            >
-                {{ state.alertCounts.TRIGGERED }}
-            </p-badge>
-        </template>
-    </l-s-b>
-</template>
-
-<style scoped lang="postcss">
-.project-l-s-b {
-
-    .create-button-wrapper {
-        @apply relative inline-block;
-
-        .create-context-menu {
-            @apply absolute;
-            top: 100%;
-            right: 0;
-            z-index: 10;
-            width: max-content;
-        }
-    }
-
-    .project-search {
-        @apply w-full;
-        margin-bottom: 0.5rem;
-    }
-    .search-result-text {
-        @apply overflow-hidden whitespace-nowrap;
-        text-overflow: ellipsis;
-    }
-    .search-empty {
-        @apply text-paragraph-md;
-        white-space: pre;
-        margin-top: 0.75rem;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectDetailTab.vue b/apps/web/src/services/project/components/ProjectDetailTab.vue
deleted file mode 100644
index 2f74f4bb7a..0000000000
--- a/apps/web/src/services/project/components/ProjectDetailTab.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { find } from 'lodash';
-
-import { PTab, PBadge } from '@cloudforet/mirinae';
-import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
-import { numberFormatter } from '@cloudforet/utils';
-
-import type { ProjectModel } from '@/schema/identity/project/model';
-import { ALERT_STATE } from '@/schema/monitoring/alert/constants';
-
-import BetaMark from '@/common/components/marks/BetaMark.vue';
-import { useProperRouteLocation } from '@/common/composables/proper-route-location';
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-import { useProjectDetailPageStore } from '@/services/project/stores/project-detail-page-store';
-
-interface Props {
-    id?: string,
-    item?: ProjectModel,
-    tabs: TabItem[],
-    activeTab: string,
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    id: undefined,
-    item: undefined,
-    tabs: () => [],
-    activeTab: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-});
-
-const route = useRoute();
-const router = useRouter();
-const { getProperRouteLocation } = useProperRouteLocation();
-
-const projectDetailPageStore = useProjectDetailPageStore();
-const projectDetailPageState = projectDetailPageStore.state;
-
-const emit = defineEmits<{(e: 'update:active-tab', value: string): void;}>();
-
-const state = reactive({
-    proxyActiveTab: useProxyValue('activeTab', props, emit),
-    counts: computed(() => ({
-        TRIGGERED: find(projectDetailPageState.alertCounts, { state: ALERT_STATE.TRIGGERED })?.total ?? 0,
-    })),
-});
-
-const onChangeTab = (activeTab: string) => {
-    if (activeTab === route.name) return;
-    const isDashboardTab = activeTab.startsWith('public-dash-');
-    const dashboardTabRoute = {
-        name: PROJECT_ROUTE.DETAIL.TAB.DASHBOARD._NAME,
-        params: {
-            id: props.id as string,
-            dashboardId: activeTab,
-        },
-    };
-    router.replace(getProperRouteLocation(isDashboardTab ? dashboardTabRoute : { name: activeTab }));
-};
-</script>
-
-<template>
-    <p-tab v-if="props.item"
-           :tabs="props.tabs"
-           :active-tab.sync="state.proxyActiveTab"
-           @change="onChangeTab"
-    >
-        <router-view />
-        <template #extra="tab">
-            <p-badge v-if="tab.label === $t('PROJECT.DETAIL.TAB_ALERT') && state.counts[ALERT_STATE.TRIGGERED] !== 0"
-                     style-type="primary3"
-                     badge-type="subtle"
-            >
-                {{ numberFormatter(state.counts[ALERT_STATE.TRIGGERED]) }}
-            </p-badge>
-            <beta-mark v-if="tab.name === 'projectAlert' || tab.name === 'projectNotifications'" />
-        </template>
-    </p-tab>
-</template>
-
-<style scoped lang="postcss">
-.edit-button {
-    margin-right: 0.5rem;
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectDetailTabHeader.vue b/apps/web/src/services/project/components/ProjectDetailTabHeader.vue
deleted file mode 100644
index 040e313e89..0000000000
--- a/apps/web/src/services/project/components/ProjectDetailTabHeader.vue
+++ /dev/null
@@ -1,669 +0,0 @@
-<script setup lang="ts">
-import {
-    computed, reactive, watch,
-} from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-import { useRouter } from 'vue-router/composables';
-import type { Location } from 'vue-router/types/router';
-
-import { QueryHelper } from '@cloudforet/core-lib/query';
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PI, PIconButton, PSelectDropdown, PButtonModal, PButton, PEmpty, PLazyImg, PLink,
-} from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
-
-import DomainAdminImage from '@/assets/images/role/img_avatar_admin.png';
-import UserImage from '@/assets/images/role/img_avatar_no-role.png';
-import SystemAdminImage from '@/assets/images/role/img_avatar_system-admin.png';
-import WorkspaceMemberImage from '@/assets/images/role/img_avatar_workspace-member.png';
-import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner.png';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { ProjectGetParameters } from '@/schema/identity/project/api-verbs/get';
-import type { ProjectRemoveUsersParameters } from '@/schema/identity/project/api-verbs/remove-users';
-import type { ProjectUpdateParameters } from '@/schema/identity/project/api-verbs/udpate';
-import type { ProjectModel } from '@/schema/identity/project/model';
-import { ROLE_TYPE } from '@/schema/identity/role/constant';
-import type { WorkspaceUserListParameters } from '@/schema/identity/workspace-user/api-verbs/list';
-import type { WorkspaceUserModel } from '@/schema/identity/workspace-user/model';
-import { i18n } from '@/translations';
-
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import type { UserReferenceMap } from '@/store/reference/user-reference-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import { arrayToQueryString } from '@/lib/router-query-string';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useProperRouteLocation } from '@/common/composables/proper-route-location';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-
-import { gray, peacock } from '@/styles/colors';
-
-import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
-import { DYNAMIC_COST_QUERY_SET_PARAMS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-import ProjectFormModal from '@/services/project/components/ProjectFormModal.vue';
-import ProjectMainDeleteModal from '@/services/project/components/ProjectMainDeleteModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/components/ProjectMainProjectGroupMoveModal.vue';
-import ProjectMemberInviteModal from '@/services/project/components/ProjectMemberInviteModal.vue';
-import ProjectTagsModal from '@/services/project/components/ProjectTagsModal.vue';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-import { useProjectDetailPageStore } from '@/services/project/stores/project-detail-page-store';
-import { useProjectTreeStore } from '@/services/project/stores/project-tree-store';
-
-
-const ROLE_INFO_MAP = {
-    [ROLE_TYPE.SYSTEM_ADMIN]: { icon: SystemAdminImage, label: 'System Admin' },
-    [ROLE_TYPE.DOMAIN_ADMIN]: { icon: DomainAdminImage, label: 'Domain Admin' },
-    [ROLE_TYPE.WORKSPACE_OWNER]: { icon: WorkspaceOwnerImage, label: 'Workspace Owner' },
-    [ROLE_TYPE.WORKSPACE_MEMBER]: { icon: WorkspaceMemberImage, label: 'Workspace Member' },
-    [ROLE_TYPE.USER]: { icon: UserImage, label: 'User' },
-} as const;
-interface ViewInItem {
-    label: TranslateResult;
-    to: Location;
-}
-interface Props {
-    id?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-    id: '',
-});
-// const route = useRoute();
-const router = useRouter();
-const { getProperRouteLocation } = useProperRouteLocation();
-
-const projectDetailPageStore = useProjectDetailPageStore();
-const projectDetailPageState = projectDetailPageStore.state;
-const projectDetailPageGetters = projectDetailPageStore.getters;
-const projectTreeStore = useProjectTreeStore();
-
-const allReferenceStore = useAllReferenceStore();
-const appContextStore = useAppContextStore();
-const gnbStore = useGnbStore();
-
-const queryHelper = new QueryHelper();
-const storeState = reactive({
-    users: computed<UserReferenceMap>(() => allReferenceStore.getters.user),
-    projects: computed(() => allReferenceStore.getters.project),
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-});
-const state = reactive({
-    menuItems: computed(() => [
-        {
-            type: 'item',
-            name: 'update',
-            label: i18n.t('PROJECT.DETAIL.UPDATE'),
-            icon: 'ic_settings',
-        },
-        {
-            type: 'item',
-            name: 'move',
-            label: i18n.t('PROJECT.DETAIL.MOVE'),
-            icon: 'ic_move',
-        },
-        { type: 'divider', name: 'divider' },
-        {
-            type: 'item',
-            name: 'delete',
-            label: i18n.t('PROJECT.DETAIL.DELETE'),
-            icon: 'ic_delete',
-        },
-    ]),
-    viewInItems: computed<ViewInItem[]>(() => ([
-        {
-            label: i18n.t('PROJECT.DETAIL.CLOUD_SERVICE'),
-            to: getProperRouteLocation({
-                name: ASSET_INVENTORY_ROUTE_V1.CLOUD_SERVICE._NAME,
-                query: {
-                    project: [props.id],
-                },
-            }),
-        },
-        {
-            label: i18n.t('PROJECT.DETAIL.SERVICE_ACCOUNT'),
-            to: getProperRouteLocation({
-                name: ASSET_INVENTORY_ROUTE_V1.SERVICE_ACCOUNT._NAME,
-                query: {
-                    filters: queryHelper.setFilters([
-                        { k: 'project_id', v: [props.id], o: '' },
-                    ]).rawQueryStrings,
-                },
-            }),
-        },
-        {
-            label: i18n.t('PROJECT.DETAIL.COST_ANALYSIS'),
-            to: getProperRouteLocation({
-                name: COST_EXPLORER_ROUTE.COST_ANALYSIS.QUERY_SET._NAME,
-                params: {
-                    dataSourceId: Object.keys(storeState.costDataSource)?.[0],
-                    costQuerySetId: DYNAMIC_COST_QUERY_SET_PARAMS,
-                },
-                query: {
-                    filters: arrayToQueryString([
-                        { k: 'project_id', v: [props.id], o: 'in' },
-                    ]),
-                },
-            }),
-        },
-    ])),
-    currentProject: computed<ProjectModel|undefined>(() => projectDetailPageState.currentProject),
-    parentGroupId: computed(() => storeState.projects[props.id]?.data?.groupInfo?.id),
-    projectGroupMoveModalVisible: false,
-    projectDeleteModalVisible: false,
-    projectEditModalVisible: false,
-    isHeaderIconHovered: false,
-});
-
-const memberState = reactive({
-    loading: false,
-    memberModalVisible: false,
-    memberInviteModalVisible: false,
-    projectUserIdList: [] as string[],
-    totalCount: 0,
-    userIcon: computed<Record<string, any>>(() => ({
-        [ROLE_TYPE.SYSTEM_ADMIN]: SystemAdminImage,
-        [ROLE_TYPE.DOMAIN_ADMIN]: DomainAdminImage,
-        [ROLE_TYPE.WORKSPACE_OWNER]: WorkspaceOwnerImage,
-        [ROLE_TYPE.WORKSPACE_MEMBER]: WorkspaceMemberImage,
-        [ROLE_TYPE.USER]: UserImage,
-    })),
-});
-
-const tagsState = reactive({
-    loading: false,
-    tagsModalVisible: false,
-    tags: computed(() => state.currentProject?.tags ?? {}),
-});
-
-/* Event */
-const handleSelectItem = (selected: MenuItem) => {
-    if (selected.name === 'update') state.projectEditModalVisible = true;
-    if (selected.name === 'move') state.projectGroupMoveModalVisible = true;
-    if (selected.name === 'delete') state.projectDeleteModalVisible = true;
-};
-
-const handleOpenMemberModal = () => {
-    memberState.memberModalVisible = true;
-};
-const handleCloseMemberModal = () => {
-    memberState.memberModalVisible = false;
-};
-const handleClickInvite = () => {
-    memberState.memberModalVisible = false;
-    memberState.memberInviteModalVisible = true;
-};
-const handleConfirmInvite = () => {
-    fetchUserList();
-};
-const handleOpenTagsModal = () => {
-    tagsState.tagsModalVisible = true;
-};
-const handleTagUpdate = async (newTags) => {
-    try {
-        tagsState.loading = true;
-        const result = await SpaceConnector.client.identity.project.update<ProjectUpdateParameters, ProjectModel>({
-            project_id: props.id,
-            tags: newTags,
-        });
-        projectDetailPageStore.setProject(result);
-        showSuccessMessage(i18n.t('COMMON.TAGS.ALT_S_UPDATE'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('COMMON.TAGS.ALT_E_UPDATE'));
-    } finally {
-        tagsState.loading = false;
-        tagsState.tagsModalVisible = false;
-    }
-};
-const handleConfirmProjectForm = (_, data: ProjectModel) => {
-    projectDetailPageStore.setProject(data);
-};
-
-const handleConfirmProjectGroupMoveModal = () => {
-    projectDetailPageStore.getProject();
-};
-
-const handleRefreshTree = () => {
-    projectTreeStore.refreshProjectTree();
-};
-
-const handleHeaderIconHover = (isHovered: boolean) => {
-    state.isHeaderIconHovered = isHovered;
-};
-const handleClickBackButton = () => {
-    if (state.parentGroupId) {
-        router.push({
-            name: PROJECT_ROUTE._NAME,
-            params: { projectGroupId: state.parentGroupId },
-        });
-        return;
-    }
-    router.push({ name: PROJECT_ROUTE._NAME });
-};
-
-const handleRemoveProjectUser = async (userId: string) => {
-    try {
-        const params: ProjectRemoveUsersParameters = {
-            project_id: props.id,
-            users: [userId],
-        };
-        await SpaceConnector.clientV2.identity.project.removeUsers<ProjectRemoveUsersParameters, ProjectModel>(params);
-        await fetchUserList();
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    }
-};
-
-
-/* API */
-const fetchWorkspaceUserList = async () => {
-    memberState.loading = true;
-    try {
-        const res = await SpaceConnector.clientV2.identity.workspaceUser.list<WorkspaceUserListParameters, ListResponse<WorkspaceUserModel>>();
-        memberState.projectUserIdList = res.results?.map((d) => d.user_id) ?? [];
-        memberState.totalCount = res.total_count ?? 0;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        memberState.projectUserIdList = [];
-        memberState.totalCount = 0;
-    } finally {
-        memberState.loading = false;
-    }
-};
-const fetchProjectUsers = async () => {
-    memberState.loading = true;
-    // state.selectIndex = [];
-    try {
-        const res = await SpaceConnector.clientV2.identity.project.get<ProjectGetParameters, ProjectModel>({
-            project_id: props.id,
-        });
-        memberState.projectUserIdList = res.users ?? [];
-        memberState.totalCount = res.users?.length ?? 0;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        memberState.projectUserIdList = [];
-        memberState.totalCount = 0;
-    } finally {
-        memberState.loading = false;
-    }
-};
-const fetchUserList = async () => {
-    if (projectDetailPageGetters.projectType === 'PUBLIC') {
-        await fetchWorkspaceUserList();
-    } else {
-        await fetchProjectUsers();
-    }
-};
-
-/* Watchers */
-watch(() => projectDetailPageGetters.projectType, async () => {
-    await Promise.allSettled([
-        fetchUserList(),
-    ]);
-}, { immediate: true });
-
-watch(() => projectDetailPageState.projectId, async (projectId) => {
-    if (projectId) {
-        await Promise.allSettled([
-            projectDetailPageStore.getProject(projectId),
-            projectDetailPageStore.getAlertCounts(projectId),
-        ]);
-    }
-}, { immediate: true });
-
-
-watch([
-    () => props.id,
-    () => appContextStore.getters.globalGrantLoading,
-], ([id, globalGrantLoading]) => {
-    if (!globalGrantLoading) projectDetailPageStore.setProjectId(id);
-}, { immediate: true });
-
-watch(() => projectDetailPageState.projectId, (projectId) => {
-    gnbStore.setId(projectId);
-}, { immediate: true });
-
-</script>
-
-<template>
-    <div class="project-detail-tab-header">
-        <div class="header-container">
-            <div class="header-icon-wrapper tablet"
-                 @mouseover="handleHeaderIconHover(true)"
-                 @mouseleave="handleHeaderIconHover(false)"
-            >
-                <p-i :name="state.isHeaderIconHovered ? 'ic_arrow-left' : 'ic_document-filled'"
-                     width="1.5rem"
-                     height="1.5rem"
-                     :color="state.isHeaderIconHovered ? gray[900] : peacock[600]"
-                     @click="handleClickBackButton"
-                />
-            </div>
-            <div class="header-icon-wrapper mobile">
-                <p-i name="ic_arrow-left"
-                     width="1.5rem"
-                     height="1.5rem"
-                     :color="gray[900]"
-                     class="cursor-pointer mr-2"
-                     @click="handleClickBackButton"
-                />
-                <p-i name="ic_document-filled"
-                     width="1.5rem"
-                     height="1.5rem"
-                     :color="peacock[600]"
-                />
-            </div>
-            <div class="header-contents">
-                <div class="title-wrapper">
-                    <span class="title">
-                        {{ state.currentProject?.name ?? '' }}
-                    </span>
-                    <p-select-dropdown style-type="tertiary-icon-button"
-                                       button-icon="ic_ellipsis-horizontal"
-                                       size="sm"
-                                       :menu="state.menuItems"
-                                       :selected="[]"
-                                       use-fixed-menu-style
-                                       reset-selection-on-menu-close
-                                       @select="handleSelectItem"
-                    />
-                </div>
-                <div class="header-sub-contents">
-                    <div class="description">
-                        <template v-if="projectDetailPageGetters.projectType === 'PRIVATE'">
-                            <div class="info-item invite-only">
-                                <p-i name="ic_lock-filled"
-                                     width="0.625rem"
-                                     height="0.625rem"
-                                     color="inherit"
-                                />
-                                <span>{{ $t('PROJECT.DETAIL.INVITE_ONLY') }}</span>
-                            </div>
-                            <p-i name="ic_dot"
-                                 width="0.125rem"
-                                 height="0.125rem"
-                                 :color="gray[400]"
-                            />
-                            <div class="info-item"
-                                 @click="handleOpenMemberModal"
-                            >
-                                <template v-if="projectDetailPageGetters.projectType === 'PRIVATE' && memberState.totalCount === 0">
-                                    <p-i class="info-icon"
-                                         name="ic_plus"
-                                         width="0.75rem"
-                                         height="0.75rem"
-                                         color="inherit"
-                                    />
-                                    <span>{{ $t('PROJECT.DETAIL.ADD_MEMBERS') }}</span>
-                                </template>
-                                <template v-else>
-                                    <p-i class="info-icon"
-                                         name="ic_member"
-                                         width="0.75rem"
-                                         height="0.75rem"
-                                         color="inherit"
-                                    />
-                                    <span>{{ memberState.totalCount }} {{ $t('PROJECT.DETAIL.MEMBERS') }}</span>
-                                </template>
-                            </div>
-                            <p-i name="ic_dot"
-                                 width="0.125rem"
-                                 height="0.125rem"
-                                 :color="gray[400]"
-                            />
-                        </template>
-                        <p-i name="ic_dot"
-                             width="0.125rem"
-                             height="0.125rem"
-                             :color="gray[400]"
-                        />
-                        <div class="info-item"
-                             @click="handleOpenTagsModal"
-                        >
-                            <p-i class="info-icon"
-                                 name="ic_label"
-                                 width="0.75rem"
-                                 height="0.75rem"
-                                 color="inherit"
-                            />
-                            <span>{{ Object.keys(tagsState.tags).length }}{{ $t('PROJECT.DETAIL.TAGS') }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <p-button-modal :header-title="$t('PROJECT.DETAIL.MEMBER_TITLE')"
-                            :visible.sync="memberState.memberModalVisible"
-                            size="md"
-                            hide-footer-close-button
-                            @confirm="handleCloseMemberModal"
-            >
-                <template #body>
-                    <div class="member-contents-wrapper">
-                        <div class="member-contents">
-                            <div class="contents-header">
-                                <span>{{ $t('PROJECT.DETAIL.INVITE_MEMBER_DESC') }}</span>
-                                <p-button v-if="projectDetailPageGetters.projectType === 'PRIVATE'"
-                                          icon-left="ic_plus_bold"
-                                          style-type="tertiary"
-                                          @click="handleClickInvite"
-                                >
-                                    {{ $t('PROJECT.DETAIL.MEMBER.INVITE') }}
-                                </p-button>
-                            </div>
-                            <div class="main-contents">
-                                <div v-if="memberState.projectUserIdList.length">
-                                    <div v-for="(userId) in memberState.projectUserIdList"
-                                         :key="userId"
-                                         class="member-item"
-                                    >
-                                        <div class="left-contents">
-                                            <p-lazy-img :src="ROLE_INFO_MAP[storeState.users[userId]?.data.roleInfo.role_type]?.icon"
-                                                        class="menu-icon"
-                                                        width="1.75rem"
-                                                        height="1.75rem"
-                                            />
-                                            <span>{{ userId }} <span v-if="!!storeState.users[userId]?.name">({{ storeState.users[userId]?.name }})</span></span>
-                                        </div>
-                                        <div class="right-contents">
-                                            <span>{{ ROLE_INFO_MAP[storeState.users[userId]?.data.roleInfo.role_type]?.label }}</span>
-                                            <p-icon-button name="ic_delete"
-                                                           size="sm"
-                                                           @click="handleRemoveProjectUser(userId)"
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
-                                <p-empty v-else
-                                         class="project-member-empty"
-                                         show-image
-                                         :title="$t('PROJECT.DETAIL.MEMBER.NO_PROJECT_MEMBER')"
-                                >
-                                    <template #image>
-                                        <img alt="illust_astronaut_radio"
-                                             src="@/assets/images/img_ghost.png"
-                                        >
-                                    </template>
-                                </p-empty>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-                <template #confirm-button>
-                    {{ $t('PROJECT.DETAIL.MEMBER.DONE') }}
-                </template>
-            </p-button-modal>
-            <project-member-invite-modal v-if="memberState.memberInviteModalVisible"
-                                         :visible.sync="memberState.memberInviteModalVisible"
-                                         :project-id="props.id"
-                                         @confirm="handleConfirmInvite"
-            />
-            <project-tags-modal v-if="tagsState.tagsModalVisible"
-                                :visible.sync="tagsState.tagsModalVisible"
-                                :tags="tagsState.tags"
-                                :project-id="props.id"
-                                @update="handleTagUpdate"
-            />
-            <project-form-modal v-if="state.projectEditModalVisible"
-                                :visible.sync="state.projectEditModalVisible"
-                                :project-id="props.id"
-                                @confirm="handleConfirmProjectForm"
-            />
-            <project-main-project-group-move-modal v-if="state.projectGroupMoveModalVisible"
-                                                   :visible.sync="state.projectGroupMoveModalVisible"
-                                                   is-project
-                                                   :target-id="projectDetailPageState.projectId"
-                                                   @confirm="handleConfirmProjectGroupMoveModal"
-            />
-            <project-main-delete-modal v-if="state.projectDeleteModalVisible"
-                                       :visible.sync="state.projectDeleteModalVisible"
-                                       is-project
-                                       :target-id="props.id"
-                                       @confirm="handleRefreshTree"
-            />
-        </div>
-
-        <div class="quick-link-wrapper">
-            <span class="field-title">{{ $t('PROJECT.DETAIL.VIEW_IN') }}</span>
-            <p-link v-for="(item, idx) in state.viewInItems"
-                    :key="`view-in-${idx}`"
-                    new-tab
-                    action-icon="internal-link"
-                    size="md"
-                    :to="item.to"
-            >
-                {{ item.label }}
-            </p-link>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.project-detail-tab-header {
-
-    .header-container {
-        @apply flex gap-3;
-        .header-icon-wrapper {
-            @apply flex items-center justify-center border-2 border-white;
-            width: 3.5rem;
-            height: 3.5rem;
-            border-radius: 0.75rem;
-            background-color: rgba(255, 255, 255, 0.5);
-            cursor: pointer;
-            &.tablet {
-                display: flex;
-            }
-            &.mobile {
-                display: none;
-            }
-        }
-        .header-contents {
-            .title-wrapper {
-                @apply flex items-center gap-2;
-                padding-bottom: 0.375rem;
-                .title {
-                    @apply text-display-md font-bold text-gray-900;
-                }
-            }
-            .header-sub-contents {
-                .description {
-                    @apply flex items-center gap-2;
-                    .info-item {
-                        @apply flex items-center text-label-sm text-gray-700 cursor-pointer;
-                        gap: 0.15625rem;
-                        .info-icon {
-                            min-width: 0.75rem;
-                        }
-                        &.invite-only {
-                            @apply text-gray-900 cursor-auto;
-                        }
-                    }
-                }
-            }
-        }
-
-        .member-contents-wrapper {
-            @apply bg-violet-100;
-            padding: 1rem;
-            width: 100%;
-            height: 25rem;
-            .member-contents {
-                @apply rounded-lg border border-violet-200 bg-white;
-                padding: 0.75rem;
-                height: 100%;
-
-                .contents-header {
-                    @apply flex items-center justify-between text-label-md font-bold text-gray-900;
-                    padding-bottom: 0.5rem;
-                    height: 2.5rem;
-                }
-                .main-contents {
-                    @apply overflow-scroll;
-                    height: calc(100% - 2.5rem);
-                    .member-item {
-                        @apply flex items-center justify-between;
-                        padding: 0.5rem 0.25rem 0.5rem 0.5rem;
-                        .left-contents {
-                            @apply flex items-center gap-2 text-label-md text-gray-900;
-                            .menu-icon {
-                                @apply rounded-full;
-                            }
-                        }
-                        .right-contents {
-                            @apply text-label-md text-gray-500 flex items-center gap-2;
-                        }
-                    }
-                    .project-member-empty {
-                        margin-top: 3rem;
-                    }
-                }
-            }
-        }
-    }
-
-    .quick-link-wrapper {
-        @apply flex items-center gap-4 bg-white border border-gray-200 rounded-lg;
-        width: 100%;
-        height: 2.75rem;
-        padding: 0.75rem 1rem;
-        margin-top: 1.5rem;
-
-        .field-title {
-            @apply text-label-md font-bold text-gray-600;
-        }
-    }
-}
-
-@screen mobile {
-    .project-detail-tab-header {
-        .header-container {
-            .header-icon-wrapper {
-                @apply bg-transparent;
-                align-items: flex-start;
-                cursor: default;
-                border: none;
-                padding-top: 0.25rem;
-                &.tablet {
-                    display: none;
-                }
-                &.mobile {
-                    display: flex;
-                }
-            }
-        }
-    }
-}
-
-/* custom design-system component - p-select-dropdown */
-:deep(.p-select-dropdown) {
-    .dropdown-button-component {
-        @apply rounded-full;
-
-        &.opened {
-            @apply rounded-full;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectFavoriteList.vue b/apps/web/src/services/project/components/ProjectFavoriteList.vue
deleted file mode 100644
index 0cb4be0a7f..0000000000
--- a/apps/web/src/services/project/components/ProjectFavoriteList.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<script lang="ts" setup>
-import {
-    computed, reactive,
-} from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { PI } from '@cloudforet/mirinae';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-
-import { referenceRouter } from '@/lib/reference/referenceRouter';
-
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import type { FavoriteItem, FavoriteType } from '@/common/modules/favorites/favorite-button/type';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-
-const LIMIT_COUNT = 5;
-
-interface Props {
-    items: FavoriteItem[];
-    loading?: boolean;
-    beforeRoute?: (item: FavoriteItem, e: MouseEvent) => Promise<void>|void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    loading: false,
-    beforeRoute: undefined,
-});
-
-const route = useRoute();
-
-const userWorkspaceStore = useUserWorkspaceStore();
-
-const storeState = reactive({
-    currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-});
-const state = reactive({
-    displayItems: computed<FavoriteItem[]>(() => {
-        if (state.isExpanded) return props.items;
-        return props.items.slice(0, LIMIT_COUNT);
-    }),
-    hoveredItem: null as null|FavoriteItem,
-    isExpanded: false,
-    selectedItem: computed(() => (route.name === PROJECT_ROUTE._NAME ? route.params.projectGroupId : route.params.id)),
-});
-
-const getResourceType = (type: FavoriteType) => {
-    if (type === FAVORITE_TYPE.PROJECT) return 'identity.Project';
-    if (type === FAVORITE_TYPE.PROJECT_GROUP) return 'identity.ProjectGroup';
-    return '';
-};
-const handleClickToggle = () => {
-    state.isExpanded = !state.isExpanded;
-};
-const handleClickItem = async (item, e) => {
-    if (props.beforeRoute) {
-        const res = props.beforeRoute(item, e);
-        if (res) await res;
-    }
-};
-</script>
-
-<template>
-    <div class="favorite-list"
-         @mouseleave="state.hoveredItem = null"
-    >
-        <template v-if="props.loading" />
-        <span v-else-if="props.items.length === 0"
-              class="no-data"
-        >
-            {{ $t('COMMON.STARRED_NO_DATA') }}
-        </span>
-        <template v-else>
-            <div v-for="item in state.displayItems"
-                 :key="item.itemId"
-                 class="item"
-                 :class="{
-                     hovered: state.hoveredItem ? state.hoveredItem?.itemId === item.itemId : false,
-                     clicked: state.selectedItem === item.itemId,
-                 }"
-                 @click="handleClickItem(item, $event)"
-                 @mouseenter="state.hoveredItem = item"
-                 @mouseleave="state.hoveredItem = null"
-            >
-                <router-link :to="referenceRouter(
-                                 item.itemId, {
-                                     resource_type: getResourceType(item.itemType),
-                                     workspace_id: storeState.currentWorkspaceId,
-                                 })"
-                             class="item-link"
-                >
-                    <span class="icon"><slot name="icon"
-                                             :item="item"
-                    /></span>
-                    <span class="name">{{ item.label }}</span>
-                </router-link>
-                <favorite-button v-if="state.hoveredItem && state.hoveredItem?.itemId === item.itemId"
-                                 :item-id="item.itemId"
-                                 :favorite-type="item.itemType"
-                                 scale="0.8"
-                                 class="favorite-button"
-                />
-            </div>
-            <summary v-if="props.items.length > LIMIT_COUNT"
-                     class="toggle-btn"
-                     @click.stop="handleClickToggle"
-            >
-                {{ state.isExpanded ? $t('COMMON.COMPONENTS.FAVORITES.FAVORITE_LIST.TOGGLE_LESS') : $t('COMMON.COMPONENTS.FAVORITES.FAVORITE_LIST.TOGGLE_MORE') }}
-                <p-i :name="state.isExpanded ? 'ic_chevron-up' : 'ic_chevron-down'"
-                     height="1rem"
-                     width="1rem"
-                     color="inherit transparent"
-                />
-            </summary>
-        </template>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.favorite-list {
-    .item {
-        @apply flex items-center rounded;
-        height: 2rem;
-        padding-left: 0.5rem;
-        cursor: pointer;
-        &.hovered {
-            @apply bg-secondary2 text-secondary;
-        }
-        &.clicked {
-            @apply bg-blue-200;
-        }
-        .item-link {
-            @apply flex flex-grow items-center;
-            line-height: 1.5;
-            max-width: calc(100% - 1.75rem);
-        }
-        .icon {
-            @apply flex-shrink-0 flex overflow-hidden rounded-sm;
-            width: 1rem;
-            height: 1rem;
-        }
-        .name {
-            @apply ml-1 flex-grow truncate;
-            font-size: 0.875rem;
-        }
-    }
-    .toggle-btn {
-        @apply mt-3 text-blue-700;
-        cursor: pointer;
-        right: 1rem;
-        bottom: 1rem;
-        z-index: 1;
-        font-size: 0.75rem;
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-    .no-data {
-        @apply flex items-start text-gray-500;
-        padding-right: 0.5rem;
-        padding-left: 0.5rem;
-        gap: 0.125rem;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectFormModal.vue b/apps/web/src/services/project/components/ProjectFormModal.vue
deleted file mode 100644
index b19ced6df7..0000000000
--- a/apps/web/src/services/project/components/ProjectFormModal.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-<script lang="ts" setup>
-import { computed, reactive, watch } from 'vue';
-import { useRouter } from 'vue-router/composables';
-
-import { isEmpty } from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PButtonModal, PFieldGroup, PI, PSelectDropdown, PTextInput,
-} from '@cloudforet/mirinae';
-import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
-
-
-import type { ProjectCreateParameters } from '@/schema/identity/project/api-verbs/create';
-import type { ProjectUpdateParameters } from '@/schema/identity/project/api-verbs/udpate';
-import type { ProjectUpdateProjectTypeParameters } from '@/schema/identity/project/api-verbs/update-project-type';
-import type { ProjectModel } from '@/schema/identity/project/model';
-import type { ProjectType } from '@/schema/identity/project/type';
-import { i18n } from '@/translations';
-
-import type { ProjectReferenceItem } from '@/store/reference/project-reference-store';
-import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useFormValidator } from '@/common/composables/form-validator';
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import { gray, indigo } from '@/styles/colors';
-
-
-interface Props {
-    visible?: boolean;
-    projectId?: string;
-    projectGroupId?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-    visible: false,
-    projectId: undefined,
-    projectGroupId: undefined,
-});
-const emit = defineEmits<{(e: 'confirm', isCreating: boolean, project?: ProjectModel): void;
-    (e: 'update:visible', visible?: boolean): void;
-}>();
-
-const router = useRouter();
-const projectStore = useProjectReferenceStore();
-const state = reactive({
-    proxyVisible: useProxyValue('visible', props, emit),
-    projectNames: [] as string[],
-    accessMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
-        {
-            name: 'PRIVATE',
-            label: i18n.t('PROJECT.LANDING.ONLY_PEOPLE_INVITED'),
-            icon: 'ic_lock-filled',
-            iconColor: gray[800],
-        },
-        {
-            name: 'PUBLIC',
-            label: i18n.t('PROJECT.LANDING.EVERYONE_AT_THIS_WORKSPACE'),
-            icon: 'ic_globe-filled',
-            iconColor: indigo[600],
-        },
-    ])),
-    selectedAccess: 'PRIVATE' as ProjectType,
-    loading: false,
-    isConfirmed: false,
-});
-const {
-    forms: { projectName },
-    invalidState,
-    invalidTexts,
-    setForm, isAllValid,
-    initForm,
-} = useFormValidator({
-    projectName: undefined as string|undefined,
-}, {
-    projectName: (val: string) => {
-        if (state.isConfirmed) return true;
-        if (!val?.length) return i18n.t('PROJECT.DETAIL.MODAL_VALIDATION_REQUIRED');
-        if (val.length > 40) return i18n.t('PROJECT.DETAIL.MODAL_VALIDATION_LENGTH');
-        if (state.projectNames.includes(val)) return i18n.t('PROJECT.DETAIL.MODAL_VALIDATION_DUPLICATED');
-        return true;
-    },
-});
-
-/* Api */
-const createProject = async (): Promise<ProjectModel|undefined> => {
-    state.loading = true;
-    try {
-        const params: ProjectCreateParameters = {
-            name: projectName.value?.trim() as string,
-            project_type: state.selectedAccess,
-            project_group_id: props.projectGroupId,
-        };
-        const res = await SpaceConnector.clientV2.identity.project.create<ProjectCreateParameters, ProjectModel>({
-            ...params,
-        });
-        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT'), '');
-        return res;
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT'));
-        return undefined;
-    } finally {
-        state.loading = false;
-    }
-};
-const updateProject = async (): Promise<ProjectModel|undefined> => {
-    state.loading = true;
-    try {
-        const params: ProjectUpdateParameters = {
-            project_id: props.projectId || router.currentRoute.params.id,
-            name: projectName.value?.trim() as string,
-        };
-        const res = await SpaceConnector.clientV2.identity.project.update<ProjectUpdateParameters, ProjectModel>({
-            ...params,
-        });
-        showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_UPDATE_PROJECT'), '');
-        return res;
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_UPDATE_PROJECT'));
-        return undefined;
-    } finally {
-        state.loading = false;
-    }
-};
-const updateProjectType = async (): Promise<ProjectModel|undefined> => {
-    try {
-        const params: ProjectUpdateProjectTypeParameters = {
-            project_id: props.projectId || router.currentRoute.params.id,
-            project_type: state.selectedAccess,
-        };
-        const res = await SpaceConnector.clientV2.identity.project.updateProjectType<ProjectUpdateProjectTypeParameters, ProjectModel>({
-            ...params,
-        });
-        showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_UPDATE_PROJECT_TYPE'), '');
-        return res;
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_UPDATE_PROJECT_TYPE'));
-        return undefined;
-    }
-};
-
-/* Event */
-const confirm = async () => {
-    if (state.loading) return;
-    if (!isAllValid.value) return;
-
-    state.isConfirmed = true;
-
-    if (props.projectId) { // update project-v1
-        const updatedProject1 = await updateProject();
-        const updatedProject2 = await updateProjectType();
-        if ((updatedProject1 && updatedProject2) || updatedProject2) {
-            await projectStore.sync(updatedProject2);
-            emit('confirm', false, updatedProject2);
-        } else if (updatedProject1) {
-            await projectStore.sync(updatedProject1);
-            emit('confirm', false, updatedProject1);
-        }
-    } else { // create project-v1
-        const project = await createProject();
-        if (project) {
-            emit('confirm', true, project);
-        }
-    }
-    state.proxyVisible = false;
-};
-const handleSelectAccess = (selectedAccess: ProjectType) => {
-    state.selectedAccess = selectedAccess;
-};
-
-watch(() => state.proxyVisible, (visible) => {
-    if (!visible) return;
-    state.isConfirmed = false;
-}, { immediate: true });
-watch(() => props.projectId, async (projectId) => {
-    if (!projectId) {
-        initForm();
-        return;
-    }
-    const project = projectStore.state.items ? projectStore.state.items[projectId] : undefined;
-    if (project) {
-        setForm('projectName', project?.name);
-        state.selectedAccess = project?.data.projectType ?? 'PRIVATE';
-    } else initForm();
-}, { immediate: true });
-watch(() => projectStore.state.items, (items) => {
-    if (isEmpty(items)) return;
-    const names = Object.values(items).filter((item) => item.key !== props.projectId).map((project: ProjectReferenceItem) => project.name);
-    state.projectNames = names;
-}, { immediate: true });
-</script>
-
-<template>
-    <p-button-modal
-        class="project-form-modal"
-        :header-title="props.projectId ? $t('PROJECT.DETAIL.MODAL_UPDATE_PROJECT_TITLE') : $t('PROJECT.DETAIL.MODAL_CREATE_PROJECT_TITLE')"
-        centered
-        size="sm"
-        fade
-        backdrop
-        :visible.sync="state.proxyVisible"
-        :disabled="state.loading || !isAllValid"
-        @confirm="confirm"
-    >
-        <template #body>
-            <p-field-group :label="$t('PROJECT.DETAIL.MODAL_CREATE_PROJECT_LABEL')"
-                           :invalid-text="invalidTexts.projectName"
-                           :invalid="invalidState.projectName"
-                           required
-            >
-                <template #default="{invalid}">
-                    <p-text-input :value="projectName"
-                                  class="block w-full"
-                                  :invalid="invalid"
-                                  :placeholder="$t('PROJECT.DETAIL.MODAL_CREATE_PROJECT_PLACEHOLDER')"
-                                  @update:value="setForm('projectName', $event)"
-                    />
-                </template>
-            </p-field-group>
-            <p-field-group :label="$t('PROJECT.DETAIL.ACCESS')"
-                           required
-            >
-                <template #default>
-                    <p-select-dropdown class="access-dropdown"
-                                       :menu="state.accessMenuItems"
-                                       :selected="state.selectedAccess"
-                                       use-fixed-menu-style
-                                       @select="handleSelectAccess"
-                    >
-                        <template #dropdown-button>
-                            <div class="text-wrapper">
-                                <p-i :name="state.selectedAccess === 'PRIVATE' ? 'ic_lock-filled' : 'ic_globe-filled'"
-                                     width="1rem"
-                                     height="1rem"
-                                     :color="state.selectedAccess === 'PRIVATE' ? gray[900] : indigo[600]"
-                                />
-                                <span>{{ state.selectedAccess === 'PRIVATE' ? $t('PROJECT.LANDING.ONLY_PEOPLE_INVITED') : $t('PROJECT.LANDING.EVERYONE_AT_THIS_WORKSPACE') }}</span>
-                                <span class="sub-text">
-                                    {{ $t('PROJECT.LANDING.CAN_ACCESS_TO_THIS_PROJECT') }}
-                                </span>
-                            </div>
-                        </template>
-                    </p-select-dropdown>
-                </template>
-            </p-field-group>
-        </template>
-    </p-button-modal>
-</template>
-
-<style lang="postcss" scoped>
-.project-form-modal {
-    .access-dropdown {
-        width: 100%;
-        .text-wrapper {
-            @apply text-gray-800 text-label-md;
-            display: flex;
-            align-items: center;
-            gap: 0.25rem;
-        }
-        .sub-text {
-            @apply text-gray-500;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectGroupMemberManagementModal.vue b/apps/web/src/services/project/components/ProjectGroupMemberManagementModal.vue
deleted file mode 100644
index 362b602523..0000000000
--- a/apps/web/src/services/project/components/ProjectGroupMemberManagementModal.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<script lang="ts" setup>
-import {
-    reactive, computed, watch,
-} from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-
-import { cloneDeep, difference } from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PButtonModal, PDataLoader, PEmpty, PFieldGroup, PTextInput, PIconButton,
-} from '@cloudforet/mirinae';
-import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
-
-
-import type { ProjectGroupAddUsersParameters } from '@/schema/identity/project-group/api-verbs/add-users';
-import type { ProjectGroupGetParameters } from '@/schema/identity/project-group/api-verbs/get';
-import type { ProjectGroupRemoveUsersParameters } from '@/schema/identity/project-group/api-verbs/remove-users';
-import type { ProjectGroupModel } from '@/schema/identity/project-group/model';
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { UserReferenceMap } from '@/store/reference/user-reference-store';
-
-import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import { useRoleFormatter } from '@/services/iam/composables/refined-table-data';
-import { useProjectPageStore } from '@/services/project/stores/project-page-store';
-
-
-interface Props {
-    visible?: boolean;
-    projectGroupId: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-    visible: false,
-});
-const emit = defineEmits<{(e: 'confirm'): void;
-}>();
-
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
-const allReferenceStore = useAllReferenceStore();
-const storeState = reactive({
-    users: computed<UserReferenceMap>(() => allReferenceStore.getters.user),
-});
-const state = reactive({
-    loading: true,
-    proxyVisible: useProxyValue('visible', props, emit),
-    readonlyMode: computed<boolean>(() => !projectPageState.isWorkspaceOwner),
-    projectGroupUserIdList: [] as string[],
-    userMenuItems: computed<SelectDropdownMenuItem[]>(() => {
-        const _items: SelectDropdownMenuItem[] = [];
-        Object.values(storeState.users).forEach((user) => {
-            const singleItem = {
-                name: user.key,
-                label: user.label,
-                disabled: false,
-            };
-            if (state.selectedUserIdList.includes(user.key)) {
-                singleItem.disabled = true;
-            }
-            _items.push(singleItem);
-        });
-        return _items;
-    }),
-    selectedUserIdList: [] as string[],
-    searchText: '',
-});
-
-/* Util */
-const getRoleImage = (userId: string): string => {
-    const _roleType = storeState.users[userId]?.data?.roleInfo?.role_type;
-    const _roleInfo = _roleType ? useRoleFormatter(_roleType) : undefined;
-    return _roleInfo?.image ?? '';
-};
-const getRoleName = (userId: string): TranslateResult => {
-    const _roleType = storeState.users[userId]?.data?.roleInfo?.role_type;
-    const _roleInfo = _roleType ? useRoleFormatter(_roleType) : undefined;
-    return _roleInfo?.name ?? '';
-};
-
-/* Api */
-const addMember = async (userIds: string[]) => {
-    try {
-        const params: ProjectGroupAddUsersParameters = {
-            project_group_id: props.projectGroupId,
-            users: userIds,
-        };
-        await SpaceConnector.clientV2.identity.projectGroup.addUsers(params);
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        throw e;
-    }
-};
-const removeMember = async (userIds: string[]) => {
-    try {
-        const params: ProjectGroupRemoveUsersParameters = {
-            project_group_id: props.projectGroupId,
-            users: userIds,
-        };
-        await SpaceConnector.clientV2.identity.projectGroup.removeUsers(params);
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        throw e;
-    }
-};
-const addAndRemoveMember = async () => {
-    const _addedUserIds = difference(state.selectedUserIdList, state.projectGroupUserIdList);
-    const _removedUserIds = difference(state.projectGroupUserIdList, state.selectedUserIdList);
-    try {
-        if (_addedUserIds.length) await addMember(_addedUserIds);
-        if (_removedUserIds.length) await removeMember(_removedUserIds);
-        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP_MEMBER'), '');
-    } catch (e) {
-        showErrorMessage(i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP_MEMBER'), e);
-    }
-};
-const getProjectGroupUserData = async () => {
-    try {
-        state.loading = true;
-        const params: ProjectGroupGetParameters = {
-            project_group_id: props.projectGroupId as string,
-        };
-        const res: ProjectGroupModel = await SpaceConnector.clientV2.identity.projectGroup.get(params);
-        state.projectGroupUserIdList = res.users ?? [];
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        state.projectGroupUserIdList = [];
-    } finally {
-        state.loading = false;
-    }
-};
-
-/* Event */
-const handleConfirm = async () => {
-    if (!state.readonlyMode) {
-        await addAndRemoveMember();
-        emit('confirm');
-    }
-    state.proxyVisible = false;
-};
-const handleUpdateSelected = (items?: SelectDropdownMenuItem[]) => {
-    if (!items?.length) return;
-    const _selected = items[0];
-    if (storeState.users[_selected.name]) {
-        state.selectedUserIdList.unshift(_selected.name);
-        state.searchText = '';
-    }
-};
-const handleRemoveProjectGroupMember = (idx: number) => {
-    const _selectedUserItems = cloneDeep(state.selectedUserIdList);
-    _selectedUserItems.splice(idx, 1);
-    state.selectedUserIdList = _selectedUserItems;
-};
-
-/* Init */
-watch(() => props.visible, async (visible) => {
-    if (visible) {
-        await getProjectGroupUserData();
-        state.selectedUserIdList = cloneDeep(state.projectGroupUserIdList);
-    }
-}, { immediate: true });
-</script>
-
-<template>
-    <p-button-modal
-        :header-title="$t('PROJECT.LANDING.PROJECT_GROUP_MEMBER')"
-        :fade="true"
-        :backdrop="true"
-        size="md"
-        :visible.sync="state.proxyVisible"
-        :hide-footer-close-button="state.readonlyMode"
-        @confirm="handleConfirm"
-    >
-        <template #body>
-            <div class="project-group-management-box">
-                <div class="project-group-management-wrapper">
-                    <p-field-group v-if="!state.readonlyMode"
-                                   :label="$t('PROJECT.LANDING.GROUP_MEMBERS_WITH_ACCESS_TO_ALL_SUB_PROJECTS')"
-                                   required
-                    >
-                        <p-text-input
-                            :menu="state.userMenuItems"
-                            :value.sync="state.searchText"
-                            :selected="[]"
-                            block
-                            use-auto-complete
-                            use-fixed-menu-style
-                            :placeholder="$t('PROJECT.LANDING.ADD_GROUP_MEMBER')"
-                            :page-size="5"
-                            @update="handleUpdateSelected"
-                        />
-                    </p-field-group>
-                    <p-data-loader :loading="state.loading"
-                                   :data="state.selectedUserIdList"
-                                   class="data-loader"
-                    >
-                        <template #no-data>
-                            <p-empty show-image
-                                     :title="$t('PROJECT.LANDING.NO_GROUP_MEMBER')"
-                            />
-                        </template>
-                        <template v-for="(userId, idx) in state.selectedUserIdList">
-                            <div :key="`selected-member-${userId}`"
-                                 class="selected-member-wrapper"
-                            >
-                                <div class="left-part">
-                                    <img :src="getRoleImage(userId)"
-                                         alt="role-type-icon"
-                                         class="role-type-icon"
-                                    >
-                                    <div class="inline-flex">
-                                        <span>{{ storeState.users[userId]?.label || userId }}</span>
-                                        <span v-if="!state.projectGroupUserIdList.includes(userId)"
-                                              class="new-text"
-                                        >new</span>
-                                    </div>
-                                </div>
-                                <div class="right-part">
-                                    <span class="role-type-text">
-                                        {{ getRoleName(userId) }}
-                                    </span>
-                                    <p-icon-button v-if="!state.readonlyMode"
-                                                   name="ic_delete"
-                                                   size="sm"
-                                                   @click="handleRemoveProjectGroupMember(idx)"
-                                    />
-                                </div>
-                            </div>
-                        </template>
-                    </p-data-loader>
-                </div>
-            </div>
-        </template>
-        <template v-if="state.readonlyMode"
-                  #confirm-button
-        >
-            Done
-        </template>
-    </p-button-modal>
-</template>
-
-<style lang="postcss" scoped>
-.project-group-management-box {
-    @apply bg-primary4 rounded-md;
-    min-height: 25rem;
-    padding: 1rem;
-    .project-group-management-wrapper {
-        @apply bg-white border border-primary3 rounded-md;
-        min-height: 23rem;
-        padding: 0.75rem;
-    }
-
-    .p-data-loader {
-        height: 15rem;
-    }
-
-    .selected-member-wrapper {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0.5rem 0;
-        .left-part {
-            @apply text-label-md;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            .role-type-icon {
-                @apply rounded-full;
-                width: 1.5rem;
-                height: 1.5rem;
-            }
-            .new-text {
-                @apply text-label-xs text-coral-500;
-                display: inline-flex;
-                align-items: flex-start;
-                padding-left: 0.25rem;
-            }
-        }
-        .right-part {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            .role-type-text {
-                @apply text-label-md text-gray-500;
-            }
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectMain.vue b/apps/web/src/services/project/components/ProjectMain.vue
deleted file mode 100644
index 35bd02606e..0000000000
--- a/apps/web/src/services/project/components/ProjectMain.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script setup lang="ts">
-
-import { computed, onMounted, reactive } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { uniq } from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PFieldTitle, PEmpty, PPaneLayout,
-} from '@cloudforet/mirinae';
-
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
-import type { ServiceAccountModel } from '@/schema/identity/service-account/model';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import ProjectMainProjectCard from '@/services/project/components/ProjectMainProjectCard.vue';
-import ProjectMainProjectGroupCard from '@/services/project/components/ProjectMainProjectGroupCard.vue';
-import type { ProjectCardItemType } from '@/services/project/types/project-type';
-
-
-const route = useRoute();
-const allReferenceStore = useAllReferenceStore();
-
-const storeState = reactive({
-    project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    projectGroup: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-});
-
-const state = reactive({
-    currentProjectGroupId: computed(() => route.params.projectGroupId),
-    serviceAccountList: [] as ServiceAccountModel[],
-    currentProjectGroupList: computed<ProjectCardItemType[]>(() => {
-        const allProjectGroupList: ProjectCardItemType[] = Object.values(storeState.projectGroup).map((d) => ({
-            type: 'projectGroup',
-            id: d.key,
-            name: d.name,
-            parentId: d.data.parentGroupInfo?.id as string|undefined,
-        }));
-        return allProjectGroupList.filter((projectGroup) => projectGroup.parentId === state.currentProjectGroupId);
-    }),
-    currentProjectList: computed<ProjectCardItemType[]>(() => {
-        const allProjectList: ProjectCardItemType[] = Object.values(storeState.project).map((d) => ({
-            type: 'project',
-            id: d.key,
-            name: d.name,
-            parentId: d.data.groupInfo?.id,
-            projectType: d.data.projectType,
-        }));
-        return allProjectList.filter((project) => project.parentId === state.currentProjectGroupId);
-    }),
-    filteredCardList: computed<ProjectCardItemType[]>(() => [...state.currentProjectGroupList, ...state.currentProjectList]),
-    paginatedCardList: computed(() => ({
-        projectGroup: state.filteredCardList.filter((item) => item.type === 'projectGroup'),
-        project: state.filteredCardList.filter((item) => item.type === 'project'),
-    })),
-});
-
-/* Util */
-const getDistinctProviders = (projectId: string): string[] => uniq(state.serviceAccountList.filter((d) => d.project_id === projectId).map((d) => d.provider));
-
-const listServiceAccount = async () => {
-    try {
-        const params: ServiceAccountListParameters = {
-            query: {
-                only: ['provider', 'project_id'],
-            },
-        };
-        const response = await SpaceConnector.clientV2.identity.serviceAccount.list<ServiceAccountListParameters, ListResponse<ServiceAccountModel>>(params);
-        state.serviceAccountList = response.results || [];
-    } catch (e) {
-        state.serviceAccountList = [];
-        ErrorHandler.handleError(e);
-    }
-};
-
-onMounted(async () => {
-    await listServiceAccount();
-});
-
-</script>
-
-<template>
-    <p-pane-layout class="project-main">
-        <div class="project-contents">
-            <div v-if="state.paginatedCardList.projectGroup.length"
-                 class="contents-wrapper"
-            >
-                <p-field-title class="content-title"
-                               :label="$t('PROJECT.LANDING.PROJECT_GROUP')"
-                />
-                <div class="card-contents">
-                    <project-main-project-group-card v-for="(projectGroup, idx) in state.paginatedCardList.projectGroup"
-                                                     :key="`project-group-${idx}`"
-                                                     :item="projectGroup"
-                    />
-                </div>
-            </div>
-
-            <div v-if="state.paginatedCardList.project.length"
-                 class="contents-wrapper"
-            >
-                <p-field-title class="content-title"
-                               :label="$t('PROJECT.LANDING.PROJECT')"
-                />
-                <div class="card-contents">
-                    <project-main-project-card v-for="(project, idx) in state.paginatedCardList.project"
-                                               :key="`project-${idx}`"
-                                               :item="project"
-                                               :service-account-provider-list="getDistinctProviders(project.id)"
-                    />
-                </div>
-            </div>
-
-            <p-empty v-if="!state.filteredCardList.length"
-                     show-image
-                     class="empty-contents"
-            >
-                <div class="empty-text">
-                    <p>{{ $t('PROJECT.LANDING.EMPTY_TEXT') }}</p>
-                </div>
-            </p-empty>
-        </div>
-    </p-pane-layout>
-</template>
-
-<style scoped lang="postcss">
-.project-main {
-    padding: 1.5rem 1rem 2.5rem;
-
-    .project-contents {
-        .contents-wrapper {
-            margin-bottom: 1.5rem;
-
-            .content-title {
-                margin-bottom: 0.5rem;
-            }
-        }
-    }
-    .card-contents {
-        @apply grid;
-        gap: 1rem;
-        grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
-    }
-    .empty-contents {
-        margin-top: 4rem;
-        .empty-text {
-            width: 20rem;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectMainDeleteModal.vue b/apps/web/src/services/project/components/ProjectMainDeleteModal.vue
deleted file mode 100644
index 462425175e..0000000000
--- a/apps/web/src/services/project/components/ProjectMainDeleteModal.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<script lang="ts" setup>
-import {
-    computed, reactive,
-} from 'vue';
-import { useRouter } from 'vue-router/composables';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-
-import type { ProjectGroupDeleteParameters } from '@/schema/identity/project-group/api-verbs/delete';
-import type { ProjectDeleteParameters } from '@/schema/identity/project/api-verbs/delete';
-import { i18n as _i18n } from '@/translations';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-
-import DeleteModal from '@/common/components/modals/DeleteModal.vue';
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useProxyValue } from '@/common/composables/proxy-state';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
-import { RECENT_TYPE } from '@/common/modules/navigations/type';
-
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-
-
-interface Props {
-    visible: boolean;
-    targetId: string;
-    isProject?: boolean;
-    skipRedirect?: boolean;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
-    (e: 'confirm'): void;
-}>();
-
-const router = useRouter();
-const userWorkspaceStore = useUserWorkspaceStore();
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const recentStore = useRecentStore();
-
-const state = reactive({
-    proxyVisible: useProxyValue('visible', props, emit),
-    currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
-    title: computed(() => (props.isProject ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_TITLE') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE'))),
-    content: computed(() => (props.isProject ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_CONTENT') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.CONTENT'))),
-    loading: false,
-});
-
-const handleConfirmDelete = async () => {
-    if (state.loading) return;
-    state.loading = true;
-    try {
-        if (props.isProject) {
-            await deleteProject();
-        } else {
-            await deleteProjectGroup();
-        }
-        emit('confirm');
-    } catch (e) {
-        if (props.isProject) ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.DETAIL.ALT_E_DELETE_PROJECT'));
-        else ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.LANDING.ALT_E_DELETE_PROJECT_GROUP', { action: _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE') }));
-    } finally {
-        state.loading = false;
-        state.proxyVisible = false;
-        if (!props.skipRedirect) {
-            await router.replace({
-                name: PROJECT_ROUTE._NAME,
-            });
-        }
-    }
-};
-
-const deleteProject = async () => {
-    await SpaceConnector.clientV2.identity.project.delete<ProjectDeleteParameters>({
-        project_id: props.targetId as string,
-    });
-    await recentStore.deleteRecent({
-        type: RECENT_TYPE.PROJECT,
-        itemId: props.targetId,
-    });
-    showSuccessMessage(_i18n.t('PROJECT.DETAIL.ALT_S_DELETE_PROJECT'), '');
-    const isFavoriteItem = favoriteGetters.projectItems.find((item) => item.itemId === props.targetId);
-    if (isFavoriteItem) {
-        await favoriteStore.deleteFavorite({
-            itemType: FAVORITE_TYPE.PROJECT,
-            workspaceId: state.currentWorkspaceId || '',
-            itemId: props.targetId as string,
-        });
-    }
-};
-
-const deleteProjectGroup = async () => {
-    await SpaceConnector.clientV2.identity.projectGroup.delete<ProjectGroupDeleteParameters>({
-        project_group_id: props.targetId,
-    });
-    showSuccessMessage(_i18n.t('PROJECT.LANDING.ALT_S_DELETE_PROJECT_GROUP'), '');
-    const isFavoriteItem = favoriteGetters.projectGroupItems.find((item) => item.itemId === props.targetId);
-    if (isFavoriteItem) {
-        await favoriteStore.deleteFavorite({
-            itemType: FAVORITE_TYPE.PROJECT_GROUP,
-            workspaceId: state.currentWorkspaceId || '',
-            itemId: props.targetId,
-        });
-    }
-};
-
-</script>
-
-<template>
-    <delete-modal :header-title="state.title"
-                  :visible.sync="state.proxyVisible"
-                  :loading="state.loading"
-                  @confirm="handleConfirmDelete"
-    >
-        <p>
-            {{ state.content }}
-        </p>
-        <i18n v-if="!props.isProject"
-              path="PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.DESC"
-              tag="p"
-              class="desc"
-        >
-            <template #deleteAllSubProjects>
-                <strong>{{ $t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.DELETE_ALL_SUB_PROJECT') }}</strong>
-            </template>
-        </i18n>
-    </delete-modal>
-</template>
-
-<style lang="postcss" scoped>
-.delete-modal-contents {
-    line-height: 1.4;
-    .desc {
-        @apply mt-1 text-gray-600;
-        font-size: 0.875rem;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectMainProjectCard.vue b/apps/web/src/services/project/components/ProjectMainProjectCard.vue
deleted file mode 100644
index 3dc96192ac..0000000000
--- a/apps/web/src/services/project/components/ProjectMainProjectCard.vue
+++ /dev/null
@@ -1,335 +0,0 @@
-<script setup lang="ts">
-
-import { computed, reactive } from 'vue';
-import { useRouter } from 'vue-router/composables';
-
-import {
-    PI, PTextHighlighting, PSelectDropdown,
-} from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
-
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProviderItem, ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-
-import { useProperRouteLocation } from '@/common/composables/proper-route-location';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-
-import { peacock } from '@/styles/colors';
-
-import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-import { useProjectPageStore } from '@/services/project/stores/project-page-store';
-import type { ProjectCardItemType } from '@/services/project/types/project-type';
-
-
-
-
-interface Props {
-    item: ProjectCardItemType;
-    serviceAccountProviderList: string[];
-    searchKeyword?: string;
-}
-
-const props = defineProps<Props>();
-
-const allReferenceStore = useAllReferenceStore();
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const projectPageStore = useProjectPageStore();
-
-
-const router = useRouter();
-const { getProperRouteLocation } = useProperRouteLocation();
-
-const storeState = reactive({
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-    projectGroup: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    favoriteItems: computed(() => favoriteGetters.projectItems),
-});
-
-const state = reactive({
-    projectGroupName: computed<string>(() => {
-        if (!props.item.parentId) return '';
-        return storeState.projectGroup[props.item.parentId].name;
-    }),
-    isStarred: computed(() => storeState.favoriteItems.some((item) => item.itemId === props.item.id)),
-    toolsetMenuItems: computed(() => [
-        {
-            type: 'item',
-            name: 'update',
-            label: i18n.t('PROJECT.DETAIL.UPDATE'),
-            icon: 'ic_settings',
-        },
-        {
-            type: 'item',
-            name: 'move',
-            label: i18n.t('PROJECT.DETAIL.MOVE'),
-            icon: 'ic_move',
-        },
-        { type: 'divider', name: 'divider' },
-        {
-            type: 'item',
-            name: 'delete',
-            label: i18n.t('PROJECT.DETAIL.DELETE'),
-            icon: 'ic_delete',
-        },
-    ]),
-    toolsetMenuVisible: false,
-});
-
-const getProvider = (name: string): ProviderItem => storeState.providers[name] || {};
-
-const handleSelectProject = () => {
-    router.push(getProperRouteLocation({
-        name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-        params: {
-            id: props.item.id as string,
-        },
-    }));
-};
-
-const handleSelectItem = (selected: MenuItem) => {
-    projectPageStore.setCurrentSelectedProjectId(props.item.id);
-    if (selected.name === 'update') {
-        projectPageStore.setProjectFormModalVisible(true);
-    }
-    if (selected.name === 'move') {
-        projectPageStore.setProjectGroupMoveModalVisible(true);
-    }
-    if (selected.name === 'delete') {
-        projectPageStore.setProjectDeleteModalVisible(true);
-    }
-};
-
-</script>
-
-<template>
-    <div :class="{'project-main-project-card': true, 'toolset-active': state.toolsetMenuVisible }"
-         @click="handleSelectProject"
-    >
-        <div class="main-contents">
-            <div class="title-wrapper">
-                <div class="title">
-                    <p-i name="ic_document-filled"
-                         :color="peacock[600]"
-                         width="1rem"
-                         height="1rem"
-                    />
-                    <p-text-highlighting class="text"
-                                         :text="props.item.name"
-                                         :term="props.searchKeyword"
-                    />
-                </div>
-
-                <div class="toolset-group">
-                    <p-select-dropdown class="toolset-button"
-                                       style-type="tertiary-icon-button"
-                                       button-icon="ic_ellipsis-horizontal"
-                                       size="sm"
-                                       :visible-menu.sync="state.toolsetMenuVisible"
-                                       :menu="state.toolsetMenuItems"
-                                       :selected="[]"
-                                       use-fixed-menu-style
-                                       reset-selection-on-menu-close
-                                       @select="handleSelectItem"
-                    />
-                    <favorite-button :class="{'favorite-button': true, 'starred': state.isStarred }"
-                                     :item-id="props.item.id"
-                                     :favorite-type="FAVORITE_TYPE.PROJECT"
-                    />
-                </div>
-            </div>
-            <span class="project-group">
-                {{ state.projectGroupName }}
-            </span>
-        </div>
-        <div class="sub-contents">
-            <div v-if="props.serviceAccountProviderList.length > 0"
-                 class="provider-icon-wrapper"
-            >
-                <div class="provider">
-                    <template v-for="(provider, index) in props.serviceAccountProviderList">
-                        <router-link v-if="index < 5"
-                                     :key="index"
-                                     :to="{name: ASSET_INVENTORY_ROUTE_V1.SERVICE_ACCOUNT._NAME,query: { provider: getProvider(provider) ? provider : null },}"
-                                     class="icon-link"
-                                     :style="{backgroundImage: `url('${getProvider(provider).icon || require('@/assets/images/ic_cloud-filled.svg')}')`}"
-                                     @click.native.stop.prevent
-                        />
-                    </template>
-                </div>
-                <span v-if="props.serviceAccountProviderList.length > 5"
-                      class="provider-more-text"
-                >
-                    ...
-                </span>
-                <router-link v-if="props.serviceAccountProviderList.length !== 0"
-                             class="icon-wrapper"
-                             :to="{ name: ASSET_INVENTORY_ROUTE_V1.SERVICE_ACCOUNT._NAME }"
-                             @click.native.stop.prevent
-                >
-                    <p-i name="ic_plus_thin"
-                         scale="0.8"
-                         color="inherit"
-                    />
-                </router-link>
-            </div>
-            <div v-else
-                 class="account-add"
-            >
-                <router-link :to="{ name: ASSET_INVENTORY_ROUTE_V1.SERVICE_ACCOUNT._NAME }"
-                             @click.native.stop.prevent
-                >
-                    <p-i name="ic_plus_thin"
-                         scale="0.8"
-                         color="inherit"
-                    />
-                </router-link>
-                <router-link :to="{ name: ASSET_INVENTORY_ROUTE_V1.SERVICE_ACCOUNT._NAME }"
-                             @click.native.stop.prevent
-                >
-                    <span class="add-label"> {{ $t('PROJECT.LANDING.ADD_SERVICE_ACCOUNT') }}</span>
-                </router-link>
-            </div>
-            <div v-if="item.projectType === 'PRIVATE'"
-                 class="private-badge"
-            >
-                <p-i name="ic_lock-filled"
-                     scale="0.8"
-                     color="inherit"
-                     class="badge-icon"
-                />
-                {{ $t('PROJECT.LANDING.INVITE_ONLY') }}
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.project-main-project-card {
-    @apply flex flex-col justify-between bg-gray-100 rounded-lg cursor-pointer;
-    height: 6.5rem;
-    padding: 0.75rem 0.75rem 1rem;
-
-    .main-contents {
-        .title-wrapper {
-            @apply flex items-center justify-between;
-            .title {
-                @apply flex gap-1 items-center text-paragraph-md text-gray-900;
-                margin-bottom: 0.25rem;
-            }
-        }
-        .project-group {
-            @apply text-label-md text-gray-600;
-        }
-    }
-
-    .sub-contents {
-        @apply flex justify-between items-center;
-
-        .provider-icon-wrapper {
-            @apply flex-shrink inline-flex items-center truncate;
-            .provider {
-                @apply truncate;
-                min-width: 0;
-                height: 1.25rem;
-            }
-            .icon-wrapper {
-                @apply rounded-full inline-flex justify-center items-center;
-                height: 1.25rem;
-                width: 1.25rem;
-                &:hover {
-                    @apply bg-blue-300;
-                }
-            }
-            .provider-more-text {
-                @apply text-label-sm text-gray-500;
-                cursor: default;
-                font-weight: normal;
-                padding-right: 0.5rem;
-            }
-            &:hover {
-                @apply text-secondary font-bold;
-            }
-            .icon-link {
-                @apply flex-shrink-0 inline-block;
-                height: 1.25rem;
-                width: 1.25rem;
-                background-repeat: no-repeat;
-                background-size: 100%;
-                background-position: center;
-                line-height: 1.25rem;
-                margin-right: 0.37rem;
-                &:hover {
-                    opacity: 50%;
-                }
-            }
-        }
-        .account-add {
-            @apply flex-shrink-0 inline-flex text-gray-700;
-            .add-label {
-                @apply text-xs;
-                line-height: 1.2;
-            }
-            &:hover {
-                .add-label {
-                    text-decoration: underline;
-                }
-            }
-        }
-        .private-badge {
-            @apply text-gray-500 flex items-center text-label-sm;
-            gap: 0.125rem;
-            .badge-icon {
-                margin-right: 0.125rem;
-            }
-        }
-    }
-
-    .favorite-button {
-        display: none;
-
-        &.starred {
-            display: block;
-        }
-    }
-    .toolset-button {
-        display: none;
-    }
-
-    .toolset-group {
-        @apply flex gap-1 items-center;
-    }
-
-    &:hover {
-        @apply bg-gray-150;
-
-        .toolset-button {
-            display: block;
-        }
-        .favorite-button {
-            display: block;
-        }
-    }
-    &.toolset-active {
-        @apply bg-blue-200;
-    }
-}
-
-/* custom design-system component - p-select-dropdown */
-:deep(.p-select-dropdown) {
-    .dropdown-button-component {
-        @apply rounded-full;
-
-        &.opened {
-            @apply rounded-full;
-        }
-    }
-}
-
-</style>
diff --git a/apps/web/src/services/project/components/ProjectMainProjectGroupCard.vue b/apps/web/src/services/project/components/ProjectMainProjectGroupCard.vue
deleted file mode 100644
index 886ab5c73a..0000000000
--- a/apps/web/src/services/project/components/ProjectMainProjectGroupCard.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<script setup lang="ts">
-
-import { computed, reactive } from 'vue';
-import { useRouter } from 'vue-router/composables';
-
-import { PI, PTextHighlighting, PSelectDropdown } from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
-
-import { i18n } from '@/translations';
-
-import { useProperRouteLocation } from '@/common/composables/proper-route-location';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-
-import { indigo } from '@/styles/colors';
-
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-import { useProjectPageStore } from '@/services/project/stores/project-page-store';
-import type { ProjectCardItemType } from '@/services/project/types/project-type';
-
-interface Props {
-    item: ProjectCardItemType;
-    searchKeyword?: string;
-}
-
-const props = defineProps<Props>();
-const router = useRouter();
-const { getProperRouteLocation } = useProperRouteLocation();
-
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const projectPageStore = useProjectPageStore();
-
-const storeState = reactive({
-    favoriteItems: computed(() => favoriteGetters.projectGroupItems),
-});
-
-const state = reactive({
-    isStarred: computed(() => storeState.favoriteItems.some((item) => item.itemId === props.item.id)),
-    toolsetMenuItems: [
-        {
-            type: 'item',
-            name: 'rename',
-            label: i18n.t('Rename'),
-            icon: 'ic_settings',
-        },
-        {
-            type: 'item',
-            name: 'move',
-            label: i18n.t('Move'),
-            icon: 'ic_move',
-        },
-        { type: 'divider', name: 'divider' },
-        {
-            type: 'item',
-            name: 'delete',
-            label: i18n.t('Delete'),
-            icon: 'ic_delete',
-        },
-    ],
-    toolsetMenuVisible: false,
-});
-
-const handleSelectProjectGroup = () => {
-    router.push(getProperRouteLocation({
-        name: PROJECT_ROUTE._NAME,
-        params: {
-            projectGroupId: props.item.id as string,
-        },
-    }));
-};
-
-const handleSelectItem = (selected: MenuItem) => {
-    projectPageStore.setCurrentSelectedProjectGroupId(props.item.id);
-    if (selected.name === 'rename') {
-        projectPageStore.setProjectGroupFormUpdateMode(true);
-        projectPageStore.setProjectGroupFormVisible(true);
-    }
-    if (selected.name === 'move') {
-        projectPageStore.setProjectGroupMoveModalVisible(true);
-    }
-    if (selected.name === 'delete') {
-        projectPageStore.setProjectDeleteModalVisible(true);
-    }
-};
-
-
-</script>
-
-<template>
-    <div class="project-main-project-group-card"
-         @click="handleSelectProjectGroup"
-    >
-        <div class="project-group-item">
-            <p-i name="ic_folder-filled"
-                 :color="indigo[500]"
-                 width="1rem"
-                 height="1rem"
-            />
-            <p-text-highlighting class="project-group-name"
-                                 :text="props.item.name"
-                                 :term="props.searchKeyword"
-            />
-        </div>
-        <div class="toolset-group">
-            <p-select-dropdown class="toolset-button"
-                               style-type="tertiary-icon-button"
-                               button-icon="ic_ellipsis-horizontal"
-                               size="sm"
-                               :visible-menu.sync="state.toolsetMenuVisible"
-                               :menu="state.toolsetMenuItems"
-                               :selected="[]"
-                               use-fixed-menu-style
-                               reset-selection-on-menu-close
-                               @select="handleSelectItem"
-            />
-            <favorite-button :item-id="props.item.id"
-                             :favorite-type="FAVORITE_TYPE.PROJECT_GROUP"
-                             :class="{'favorite-button': true, 'starred': state.isStarred }"
-            />
-        </div>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.project-main-project-group-card {
-    @apply flex items-center justify-between bg-gray-100 rounded-lg cursor-pointer;
-    height: 3rem;
-    padding: 0.75rem;
-
-    .project-group-item {
-        @apply flex gap-1;
-
-        .project-group-name {
-            @apply text-label-md text-gray-900;
-        }
-    }
-
-    .favorite-button {
-        display: none;
-
-        &.starred {
-            display: block;
-        }
-    }
-    .toolset-button {
-        display: none;
-    }
-
-    .toolset-group {
-        @apply flex gap-1 items-center;
-    }
-
-    &:hover {
-        @apply bg-gray-150;
-
-        .toolset-button {
-            display: block;
-        }
-        .favorite-button {
-            display: block;
-        }
-    }
-    &.toolset-active {
-        @apply bg-blue-200;
-    }
-}
-
-/* custom design-system component - p-select-dropdown */
-:deep(.p-select-dropdown) {
-    .dropdown-button-component {
-        @apply rounded-full;
-
-        &.opened {
-            @apply rounded-full;
-        }
-    }
-}
-
-</style>
diff --git a/apps/web/src/services/project/components/ProjectMainProjectGroupFormModal.vue b/apps/web/src/services/project/components/ProjectMainProjectGroupFormModal.vue
deleted file mode 100644
index 76924a2cf1..0000000000
--- a/apps/web/src/services/project/components/ProjectMainProjectGroupFormModal.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<script lang="ts" setup>
-import {
-    computed, reactive, watch,
-} from 'vue';
-
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
-import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
-
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { ProjectGroupCreateParameters } from '@/schema/identity/project-group/api-verbs/create';
-import type { ProjectGroupListParameters } from '@/schema/identity/project-group/api-verbs/list';
-import type { ProjectGroupUpdateParameters } from '@/schema/identity/project-group/api-verbs/update';
-import type { ProjectGroupModel } from '@/schema/identity/project-group/model';
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useFormValidator } from '@/common/composables/form-validator';
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-interface Props {
-    visible: boolean;
-    projectGroupId?: string;
-    updateMode: boolean;
-    parentGroupId?: string;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
-    (e: 'confirm', isCreating: boolean, projectGroup?: ProjectGroupModel): void;
-}>();
-
-const allReferenceStore = useAllReferenceStore();
-
-const storeState = reactive({
-    projectGroups: computed(() => allReferenceStore.getters.projectGroup),
-});
-
-const state = reactive({
-    proxyVisible: useProxyValue('visible', props, emit),
-    projectGroupNames: [] as string[],
-    loading: false,
-});
-const {
-    forms: { projectGroupName },
-    invalidState,
-    invalidTexts,
-    setForm, isAllValid,
-    initForm,
-} = useFormValidator({
-    projectGroupName: undefined as string|undefined,
-}, {
-    projectGroupName: (val?: string) => {
-        if (!val?.length) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_REQUIRED');
-        if (val.length > 40) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_LENGTH');
-        if (state.projectGroupNames.includes(val)) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_DUPLICATED');
-        return true;
-    },
-});
-
-/* Api */
-const projectGroupNameApiQuery = new ApiQueryHelper().setOnly('name', 'project_group_id');
-const getProjectGroupNames = async () => {
-    const res = await SpaceConnector.clientV2.identity.projectGroup.list<ProjectGroupListParameters, ListResponse<ProjectGroupModel>>({
-        query: projectGroupNameApiQuery.data,
-    });
-    if (props.updateMode) {
-        state.projectGroupNames = (res.results || []).filter((projectGroup) => projectGroup.project_group_id !== props.projectGroupId).map((item) => item.name);
-    } else {
-        state.projectGroupNames = (res.results || []).map((item) => item.name);
-    }
-};
-
-const createProjectGroup = async (params: ProjectGroupCreateParameters): Promise<ProjectGroupModel|undefined> => {
-    try {
-        const result = await SpaceConnector.clientV2.identity.projectGroup.create<ProjectGroupCreateParameters, ProjectGroupModel>(params);
-        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT_GROUP'), '');
-        return result;
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT_GROUP'));
-        return undefined;
-    }
-};
-const updateProjectGroup = async (params: ProjectGroupUpdateParameters): Promise<ProjectGroupModel|undefined> => {
-    try {
-        const result = await SpaceConnector.clientV2.identity.projectGroup.update<ProjectGroupUpdateParameters, ProjectGroupModel>(params);
-        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
-        return result;
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
-        return undefined;
-    }
-};
-
-/* Event */
-const confirm = async () => {
-    if (state.loading) return;
-    if (!projectGroupName.value) return;
-    if (!isAllValid.value) return;
-
-    state.loading = true;
-    const updateParams: ProjectGroupUpdateParameters = {
-        name: projectGroupName.value,
-        project_group_id: props.projectGroupId as string,
-    };
-
-    const createParams: ProjectGroupCreateParameters = {
-        name: projectGroupName.value,
-        parent_group_id: props.parentGroupId,
-    };
-
-    let result: ProjectGroupModel|undefined;
-
-    if (!props.updateMode) result = await createProjectGroup({ ...createParams } as ProjectGroupCreateParameters);
-    else result = await updateProjectGroup({ ...updateParams });
-
-    emit('confirm', !props.updateMode, result);
-    state.loading = false;
-    state.proxyVisible = false;
-};
-
-watch(() => props.projectGroupId, async (after) => {
-    if (after && props.updateMode) {
-        setForm('projectGroupName', storeState.projectGroups[after].name);
-    } else {
-        initForm();
-    }
-}, { immediate: true });
-
-
-/* Init */
-(async () => {
-    await getProjectGroupNames();
-})();
-</script>
-
-<template>
-    <p-button-modal :header-title="props.updateMode ? $t('PROJECT.LANDING.MODAL_UPDATE_PROJECT_GROUP_TITLE') : $t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_TITLE')"
-                    centered
-                    size="sm"
-                    fade
-                    backdrop
-                    :visible.sync="state.proxyVisible"
-                    :disabled="state.loading || !isAllValid || storeState.projectGroups[props.projectGroupId]?.name === projectGroupName"
-                    @confirm="confirm"
-    >
-        <template #body>
-            <p-field-group :label="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_LABEL')"
-                           :invalid-text="invalidTexts.projectGroupName"
-                           :invalid="invalidState.projectGroupName"
-                           required
-            >
-                <template #default="{invalid}">
-                    <p-text-input :value="projectGroupName"
-                                  class="block w-full"
-                                  :invalid="invalid"
-                                  :placeholder="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_PLACEHOLDER')"
-                                  @keydown.enter="confirm"
-                                  @update:value="setForm('projectGroupName', $event)"
-                    />
-                </template>
-            </p-field-group>
-        </template>
-    </p-button-modal>
-</template>
diff --git a/apps/web/src/services/project/components/ProjectMainProjectGroupMoveModal.vue b/apps/web/src/services/project/components/ProjectMainProjectGroupMoveModal.vue
deleted file mode 100644
index 7ff8013afd..0000000000
--- a/apps/web/src/services/project/components/ProjectMainProjectGroupMoveModal.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<script lang="ts" setup>
-import { computed, reactive, watch } from 'vue';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { PButtonModal, PRadio, PRadioGroup } from '@cloudforet/mirinae';
-
-
-import type { ProjectGroupChangeParentGroupParameters } from '@/schema/identity/project-group/api-verbs/change-parent-group';
-import type { ProjectChangeProjectGroupParameters } from '@/schema/identity/project/api-verbs/change-project-group';
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useProxyValue } from '@/common/composables/proxy-state';
-import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
-
-import type { ProjectTreeNodeData } from '@/services/project/types/project-tree-type';
-
-
-interface Props {
-    visible?: boolean;
-    isProject?: boolean;
-    targetId?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-    visible: false,
-    isProject: false,
-    targetId: undefined,
-});
-const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
-    (e: 'confirm'): void;
-}>();
-
-const allReferenceStore = useAllReferenceStore();
-const storeState = reactive({
-    projects: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-});
-const state = reactive({
-    proxyVisible: useProxyValue('visible', props, emit),
-    originParentGroupId: computed<string|undefined>(() => {
-        if (!props.targetId) return undefined;
-        if (props.isProject) return storeState.projects[props.targetId]?.data.groupInfo?.id;
-        return storeState.projectGroups[props.targetId]?.data.parentGroupInfo?.id;
-    }),
-    selectedProjectGroupIdList: [] as string[],
-    selectProjectGroup: true as boolean,
-    isValid: computed<boolean>(() => getIsValid(props.isProject, state.selectProjectGroup, state.selectedProjectGroupIdList, state.originParentGroupId)),
-    targetName: computed<string>(() => {
-        if (!props.targetId) return '';
-        if (props.isProject) return storeState.projects[props.targetId]?.name;
-        return storeState.projectGroups[props.targetId]?.name;
-    }),
-    projectGroupSelectOptions: computed(() => ({
-        id: props.targetId,
-        type: props.isProject ? 'PROJECT' : 'PROJECT_GROUP',
-        currentProjectGroupId: state.originParentGroupId,
-    })),
-});
-
-/* Util */
-const getIsValid = (isProject: boolean, selectProjectGroup: boolean, selectedProjectGroupIdList: string[], originParentGroupId?: string) => {
-    if (isProject) return true;
-    if (!selectProjectGroup) { // no project-v1 group
-        if (!originParentGroupId) return false;
-    } else {
-        if (!selectedProjectGroupIdList.length) return false;
-        if (originParentGroupId === selectedProjectGroupIdList[0]) return false;
-    }
-    return true;
-};
-
-/* Api */
-const changeProjectGroup = async () => {
-    try {
-        if (!props.targetId) throw new Error('No target id');
-        const _projectGroupId = state.selectProjectGroup ? state.selectedProjectGroupIdList[0] : null;
-        if (props.isProject) {
-            await SpaceConnector.clientV2.identity.project.changeProjectGroup<ProjectChangeProjectGroupParameters>({
-                project_id: props.targetId,
-                project_group_id: _projectGroupId,
-            });
-        } else {
-            await SpaceConnector.clientV2.identity.projectGroup.changeParentGroup<ProjectGroupChangeParentGroupParameters>({
-                project_group_id: props.targetId,
-                parent_group_id: _projectGroupId,
-            });
-        }
-        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
-        state.proxyVisible = false;
-        emit('confirm');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
-    }
-};
-
-/* Event */
-const handleChangeSelectProjectGroup = (value: boolean) => {
-    state.selectProjectGroup = value;
-};
-const handleSelectProjectGroup = (projectGroupTreeNodeData: ProjectTreeNodeData[]) => {
-    state.selectedProjectGroupIdList = projectGroupTreeNodeData.map((item) => item.id);
-};
-const handleConfirm = async () => {
-    await changeProjectGroup();
-};
-
-/* Watch */
-watch(() => state.originParentGroupId, (_id?: string) => {
-    if (_id) state.selectedProjectGroupIdList = [_id];
-    else state.selectProjectGroup = false;
-}, { immediate: true });
-</script>
-
-<template>
-    <p-button-modal :header-title="$t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.MODAL_MOVE_PROJECT_TITLE', { name: state.targetName })"
-                    centered
-                    size="sm"
-                    fade
-                    backdrop
-                    :disabled="!state.isValid"
-                    :visible.sync="state.proxyVisible"
-                    @confirm="handleConfirm"
-    >
-        <template #body>
-            <p-radio-group direction="vertical">
-                <p-radio :value="true"
-                         :selected="state.selectProjectGroup"
-                         @change="handleChangeSelectProjectGroup"
-                >
-                    {{ $t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.SELECT_A_PROJECT_GROUP_TO_MOVE_TO') }}
-                </p-radio>
-                <project-select-dropdown v-if="state.projectGroupSelectOptions.id"
-                                         :project-selectable="false"
-                                         class="project-select-dropdown"
-                                         project-group-selectable
-                                         :selected-project-ids="state.selectedProjectGroupIdList"
-                                         :disabled="!state.selectProjectGroup"
-                                         :project-group-select-options="state.projectGroupSelectOptions"
-                                         @select="handleSelectProjectGroup"
-                />
-                <p-radio :value="false"
-                         :selected="state.selectProjectGroup"
-                         @change="state.selectProjectGroup = $event"
-                >
-                    {{ props.isProject ? $t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.NO_PROJECT_GROUP')
-                        : $t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.NO_PARENT_GROUP') }}
-                </p-radio>
-            </p-radio-group>
-        </template>
-    </p-button-modal>
-</template>
-
-<style lang="postcss" scoped>
-.project-select-dropdown {
-    padding-left: 1.25rem;
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectMainTree.vue b/apps/web/src/services/project/components/ProjectMainTree.vue
deleted file mode 100644
index 6cbb6b1037..0000000000
--- a/apps/web/src/services/project/components/ProjectMainTree.vue
+++ /dev/null
@@ -1,264 +0,0 @@
-<script setup lang="ts">
-
-import {
-    computed, onMounted, reactive, watch,
-} from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { isEqual } from 'lodash';
-
-import { PI, PTreeView } from '@cloudforet/mirinae';
-
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-
-import { useProperRouteLocation } from '@/common/composables/proper-route-location';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-import type { Breadcrumb } from '@/common/modules/page-layouts/type';
-
-import { indigo, peacock } from '@/styles/colors';
-
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-import { useProjectTreeStore } from '@/services/project/stores/project-tree-store';
-import type { TreeNode, TreeDisplayMap, TreeData } from '@/services/project/tree/type';
-
-interface ProjectDataType extends TreeData {
-    name: string;
-    type: 'PROJECT'|'PROJECT_GROUP';
-    id: string;
-    parentGroupId?: string;
-}
-
-const route = useRoute();
-const gnbStore = useGnbStore();
-
-const allReferenceStore = useAllReferenceStore();
-const { getProperRouteLocation } = useProperRouteLocation();
-const projectTreeStore = useProjectTreeStore();
-const projectTreeState = projectTreeStore.state;
-
-const storeState = reactive({
-    projectGroup: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    treeDisplayMap: computed(() => projectTreeState.treeDisplayMap),
-});
-
-const state = reactive({
-    currentParentPathIds: [] as string[],
-    projectGroupNavigation: computed<Breadcrumb[]>(() => {
-        const allPaths = state.currentParentPathIds.map((id) => ({
-            name: storeState.projectGroup[id].name,
-            to: {
-                name: PROJECT_ROUTE._NAME,
-                params: {
-                    projectGroupId: id,
-                },
-            },
-        }));
-        return [{ name: i18n.t('MENU.PROJECT'), to: { name: PROJECT_ROUTE._NAME } }, ...allPaths];
-    }),
-    selectedTreeId: undefined as string|undefined,
-    projectTreeData: computed<TreeNode<ProjectDataType>[]>(() => {
-        const nodes: Record<string, TreeNode<ProjectDataType>> = {};
-        Object.keys(storeState.projectGroup).forEach((key) => {
-            const projectGroup = storeState.projectGroup[key];
-            nodes[key] = {
-                id: key,
-                depth: 0,
-                data: {
-                    name: projectGroup.name,
-                    type: 'PROJECT_GROUP',
-                    id: key,
-                    parentGroupId: projectGroup.data.parentGroupInfo?.id,
-                    to: getProperRouteLocation({
-                        name: PROJECT_ROUTE._NAME,
-                        params: {
-                            projectGroupId: key,
-                        },
-                    }),
-                },
-                children: [],
-            };
-        });
-        Object.keys(storeState.project).forEach((key) => {
-            const project = storeState.project[key];
-            nodes[key] = {
-                id: key,
-                depth: 0,
-                data: {
-                    name: project.name,
-                    type: 'PROJECT',
-                    id: key,
-                    parentGroupId: project.data.groupInfo?.id,
-                    to: getProperRouteLocation({
-                        name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-                        params: {
-                            id: key,
-                        },
-                    }),
-                },
-            };
-        });
-
-        const rootNodes: TreeNode<ProjectDataType>[] = [];
-        const setDepth = (node, depth) => {
-            node.depth = depth;
-            if (!node.children) return;
-            node.children.forEach((child) => {
-                setDepth(child, depth + 1);
-            });
-        };
-        Object.values(nodes).forEach((node) => {
-            const parentGroupId = node.data?.parentGroupId;
-            if (!parentGroupId) {
-                rootNodes.push(node);
-                setDepth(node, 0);
-            } else {
-                const parentNode = nodes[parentGroupId];
-                if (parentNode) {
-                    parentNode.children = parentNode.children || [];
-                    parentNode.children.push(node);
-                    setDepth(node, parentNode.depth + 1);
-                }
-            }
-        });
-
-        return rootNodes;
-    }),
-});
-
-/* Event */
-const handleUpdateTreeDisplayMap = (treeDisplayMap: TreeDisplayMap) => {
-    if (isEqual(treeDisplayMap, storeState.treeDisplayMap)) return;
-    projectTreeStore.setTreeDisplayMap(treeDisplayMap);
-};
-
-/* Helper */
-const updateTreeDisplayMap = (selectedTreeId: string) => {
-    const displayMap = { ...storeState.treeDisplayMap };
-    const parentPathIds: string[] = [];
-    let currentId = selectedTreeId;
-
-    while (currentId) {
-        displayMap[currentId] = { isOpen: true };
-        parentPathIds.unshift(currentId);
-        const currentNode = storeState.projectGroup[currentId] || storeState.project[currentId];
-        if (currentNode?.data?.parentGroupInfo?.id) {
-            currentId = currentNode.data.parentGroupInfo.id;
-        } else if (currentNode?.data?.groupInfo?.id) {
-            currentId = currentNode.data?.groupInfo.id;
-        } else {
-            break;
-        }
-    }
-
-    state.currentParentPathIds = parentPathIds;
-    projectTreeStore.setTreeDisplayMap(displayMap);
-};
-
-
-
-onMounted(() => {
-    const selectedProjectGroupId = route.params.projectGroupId as string|undefined;
-    const selectedProjectId = route.params.id as string|undefined;
-    if (selectedProjectGroupId) {
-        state.selectedTreeId = selectedProjectGroupId as string;
-        updateTreeDisplayMap(selectedProjectGroupId);
-    }
-    if (selectedProjectId) {
-        state.selectedTreeId = selectedProjectId as string;
-        const parentGroupId = storeState.project[selectedProjectId]?.data.groupInfo?.id;
-        if (parentGroupId) updateTreeDisplayMap(parentGroupId);
-    }
-});
-
-watch(() => route.params, ({ id, projectGroupId }) => {
-    if (projectGroupId) {
-        state.selectedTreeId = projectGroupId as string;
-        updateTreeDisplayMap(projectGroupId);
-    }
-    if (id) {
-        state.selectedTreeId = id as string;
-        const parentGroupId = storeState.project[id]?.data.groupInfo?.id;
-        if (parentGroupId) updateTreeDisplayMap(parentGroupId);
-    }
-});
-watch(() => state.projectGroupNavigation, async (projectGroupNavigation) => {
-    gnbStore.setBreadcrumbs(projectGroupNavigation);
-});
-
-
-</script>
-
-<template>
-    <div class="project-main-tree">
-        <p-tree-view :tree-data="state.projectTreeData"
-                     :tree-display-map="storeState.treeDisplayMap"
-                     :selected-id="state.selectedTreeId"
-                     @update:tree-display-map="handleUpdateTreeDisplayMap"
-        >
-            <template #content="{ node }">
-                <div class="project-menu-item-content">
-                    <div class="contents-wrapper">
-                        <p-i class="project-icon"
-                             :name="Array.isArray(node.children) ? 'ic_folder-filled' : 'ic_document-filled'"
-                             :color="Array.isArray(node.children) ? indigo[500] : peacock[600]"
-                             width="0.875rem"
-                             height="0.875rem"
-                        />
-                        <span class="text">{{ node.data.name }}</span>
-                    </div>
-                    <favorite-button :item-id="node.id"
-                                     :favorite-type="Array.isArray(node.children) ? FAVORITE_TYPE.PROJECT_GROUP : FAVORITE_TYPE.PROJECT"
-                                     scale="0.8"
-                                     class="favorite-button"
-                    />
-                </div>
-            </template>
-        </p-tree-view>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.project-main-tree {
-    width: 100%;
-    .project-menu-item-content {
-        @apply flex items-center justify-between w-full;
-        height: 2rem;
-        .contents-wrapper {
-            @apply flex items-center gap-1 w-full;
-
-            .project-icon {
-                min-width: 0.875rem;
-            }
-            .text {
-                @apply text-label-md text-gray-900;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        .favorite-button {
-            display: none;
-            min-width: 1.5rem;
-            height: 1rem;
-            padding-left: 0.5rem;
-        }
-
-        &:hover {
-            .contents-wrapper {
-                width: calc(100% - 1.5rem);
-            }
-            .favorite-button {
-                display: block;
-            }
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectMemberInviteModal.vue b/apps/web/src/services/project/components/ProjectMemberInviteModal.vue
deleted file mode 100644
index eaaa2bce09..0000000000
--- a/apps/web/src/services/project/components/ProjectMemberInviteModal.vue
+++ /dev/null
@@ -1,231 +0,0 @@
-<script lang="ts" setup>
-import {
-    reactive, computed,
-} from 'vue';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PButtonModal, PFieldGroup, PSelectDropdown, PLazyImg,
-} from '@cloudforet/mirinae';
-import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
-
-
-import DomainAdminImage from '@/assets/images/role/img_avatar_admin.png';
-import UserImage from '@/assets/images/role/img_avatar_no-role.png';
-import SystemAdminImage from '@/assets/images/role/img_avatar_system-admin.png';
-import WorkspaceMemberImage from '@/assets/images/role/img_avatar_workspace-member.png';
-import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner.png';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { ProjectAddUsersParameters } from '@/schema/identity/project/api-verbs/add-users';
-import type { ProjectGetParameters } from '@/schema/identity/project/api-verbs/get';
-import type { ProjectModel } from '@/schema/identity/project/model';
-import { ROLE_TYPE } from '@/schema/identity/role/constant';
-import type { WorkspaceUserListParameters } from '@/schema/identity/workspace-user/api-verbs/list';
-import type { WorkspaceUserModel } from '@/schema/identity/workspace-user/model';
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { UserReferenceMap } from '@/store/reference/user-reference-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useFormValidator } from '@/common/composables/form-validator';
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-const ROLE_INFO_MAP = {
-    [ROLE_TYPE.SYSTEM_ADMIN]: { icon: SystemAdminImage, label: 'System Admin' },
-    [ROLE_TYPE.DOMAIN_ADMIN]: { icon: DomainAdminImage, label: 'Domain Admin' },
-    [ROLE_TYPE.WORKSPACE_OWNER]: { icon: WorkspaceOwnerImage, label: 'Workspace Owner' },
-    [ROLE_TYPE.WORKSPACE_MEMBER]: { icon: WorkspaceMemberImage, label: 'Workspace Member' },
-    [ROLE_TYPE.USER]: { icon: UserImage, label: 'User' },
-} as const;
-
-interface Props {
-    visible?: boolean;
-    projectId?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-    visible: false,
-    projectId: undefined,
-});
-
-const emit = defineEmits<{(e: 'confirm'): void;
-}>();
-const allReferenceStore = useAllReferenceStore();
-
-
-const storeState = reactive({
-    users: computed<UserReferenceMap>(() => allReferenceStore.getters.user),
-});
-
-const state = reactive({
-    loading: false,
-    proxyVisible: useProxyValue('visible', props, emit),
-    workSpaceUserList: [] as WorkspaceUserModel[],
-    projectUserIdList: [] as string[],
-    //
-    userMenuItems: computed<SelectDropdownMenuItem[]>(() => {
-        const items: SelectDropdownMenuItem[] = [];
-        state.workSpaceUserList.forEach((user) => {
-            const singleItem = {
-                name: user.user_id,
-                label: user.name ? `${user.user_id} (${user.name})` : user.user_id,
-                disabled: false,
-            };
-            if (state.projectUserIdList.includes(user.user_id)) {
-                singleItem.disabled = true;
-            }
-            items.push(singleItem);
-        });
-        return items;
-    }),
-    searchText: '',
-});
-const {
-    forms: {
-        selectedUserItems,
-    },
-    invalidState,
-    invalidTexts,
-    setForm, isAllValid,
-} = useFormValidator({
-    selectedUserItems: [] as SelectDropdownMenuItem[],
-}, {
-    selectedUserItems: (val: SelectDropdownMenuItem[]) => {
-        if (!val.length) return i18n.t('PROJECT.DETAIL.MEMBER.MODAL_VALIDATION_REQUIRED');
-        return true;
-    },
-});
-
-/* Util */
-const fetchWorkspaceUsers = async () => {
-    try {
-        const response = await SpaceConnector.clientV2.identity.workspaceUser.list<WorkspaceUserListParameters, ListResponse<WorkspaceUserModel>>();
-        state.workSpaceUserList = response.results ?? [];
-    } catch (e) {
-        state.workSpaceUserList = [];
-        ErrorHandler.handleError(e);
-    }
-};
-
-/* Api */
-const addMember = async () => {
-    try {
-        const params: ProjectAddUsersParameters = {
-            project_id: props.projectId,
-            users: selectedUserItems.value.map((d) => d.name),
-        };
-        await SpaceConnector.clientV2.identity.project.addUsers(params);
-        showSuccessMessage(i18n.t('PROJECT.DETAIL.MEMBER.ALS_S_ADD_MEMBER'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.MEMBER.ALT_E_ADD_MEMBER'));
-    }
-};
-const getProjectUserData = async () => {
-    try {
-        const params: ProjectGetParameters = {
-            project_id: props.projectId,
-        };
-        const res: ProjectModel = await SpaceConnector.clientV2.identity.project.get(params);
-        state.projectUserIdList = res.users ?? [];
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        state.projectUserIdList = [];
-    }
-};
-/* Event */
-const handleConfirm = async () => {
-    await addMember();
-    emit('confirm');
-    state.proxyVisible = false;
-};
-
-/* Init */
-(async () => {
-    await Promise.allSettled([
-        fetchWorkspaceUsers(),
-        getProjectUserData(),
-    ]);
-})();
-</script>
-
-<template>
-    <p-button-modal
-        class="project-member-invite-modal"
-        modal-body-id="project-member-invite"
-        :header-title="$t('PROJECT.DETAIL.MEMBER.INVITE_MEMBER')"
-        :fade="true"
-        :backdrop="true"
-        size="sm"
-        :visible.sync="state.proxyVisible"
-        :disabled="!isAllValid"
-        @confirm="handleConfirm"
-    >
-        <template #body>
-            <div class="form-wrapper">
-                <p-field-group :label="$t('PROJECT.DETAIL.MEMBER.MEMBER')"
-                               required
-                               :invalid="invalidState.selectedUserItems"
-                               :invalid-text="invalidTexts.selectedUserItems"
-                >
-                    <template #default="{invalid}">
-                        <p-select-dropdown
-                            :menu="state.userMenuItems"
-                            :selected="selectedUserItems"
-                            :search-text.sync="state.searchText"
-                            parent-id="project-member-invite"
-                            multi-selectable
-                            appearance-type="stack"
-                            show-select-marker
-                            is-filterable
-                            show-delete-all-button
-                            use-fixed-menu-style
-                            :invalid="invalid"
-                            @update:selected="setForm('selectedUserItems', $event)"
-                        >
-                            <template #menu-item--format="{item}">
-                                <p-lazy-img :src="ROLE_INFO_MAP[storeState.users[item.name]?.data.roleInfo.role_type]?.icon"
-                                            class="menu-icon"
-                                            width="1rem"
-                                            height="1rem"
-                                />
-                                <span>
-                                    {{ storeState.users[item.name]?.label || item.label }}
-                                </span>
-                            </template>
-                        </p-select-dropdown>
-                    </template>
-                </p-field-group>
-            </div>
-        </template>
-        <template #confirm-button>
-            <span>{{ $t('PROJECT.DETAIL.MEMBER.INVITE') }}</span>
-            <span v-if="selectedUserItems.length"
-                  class="ml-1"
-            >{{ selectedUserItems.length }}</span>
-        </template>
-    </p-button-modal>
-</template>
-
-<style lang="postcss" scoped>
-.project-member-invite-modal {
-    /* custom design-system component - p-box-tab */
-    :deep(.p-box-tab) {
-        .tab-pane {
-            padding: 0;
-        }
-    }
-    .form-wrapper {
-        .title {
-            @apply text-gray-900;
-            font-size: 1.375rem;
-            line-height: 1.25;
-            padding-bottom: 1rem;
-        }
-    }
-    .menu-icon {
-        @apply rounded-full overflow-hidden;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectSummaryAllSummaryWidget.vue b/apps/web/src/services/project/components/ProjectSummaryAllSummaryWidget.vue
deleted file mode 100644
index 5c982a8e3d..0000000000
--- a/apps/web/src/services/project/components/ProjectSummaryAllSummaryWidget.vue
+++ /dev/null
@@ -1,688 +0,0 @@
-<script lang="ts" setup>
-import {
-    computed, onUnmounted, reactive, ref, watch,
-} from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-import type { Location } from 'vue-router';
-
-import type { TimeUnit } from '@amcharts/amcharts5/.internal/core/util/Time';
-import type { XYChart } from '@amcharts/amcharts5/xy';
-import type { Unit } from 'bytes';
-import dayjs from 'dayjs';
-import {
-    cloneDeep, forEach, orderBy, range,
-} from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
-import {
-    PBalloonTab, PSelectButton, PDataLoader, PSkeleton, PSpinner,
-} from '@cloudforet/mirinae';
-import { byteFormatter, numberFormatter } from '@cloudforet/utils';
-
-import { i18n } from '@/translations';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-
-import { arrayToQueryString } from '@/lib/router-query-string';
-
-import { useAmcharts5 } from '@/common/composables/amcharts5';
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import {
-    primary,
-} from '@/styles/colors';
-
-import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
-import type {
-    CloudServiceDetailPageUrlQuery,
-    CloudServiceMainPageUrlQuery,
-} from '@/services/asset-inventory-v1/types/cloud-service-page-type';
-import ProjectSummaryAllSummaryWidgetRegionService
-    from '@/services/project/components/ProjectSummaryAllSummaryWidgetRegionService.vue';
-import { SERVICE_CATEGORY } from '@/services/project/constants/project-summary-constant';
-import type { DateType, ServiceCategory } from '@/services/project/types/project-summary-type';
-
-
-interface ChartData {
-    date: string;
-    count: number;
-}
-interface SummaryData {
-    type: string;
-    provider: string;
-    label: string | TranslateResult;
-    count: number | string;
-    to: string | Location;
-    color?: string;
-}
-
-interface Props {
-    projectId: string;
-}
-const props = defineProps<Props>();
-
-const DAY_COUNT = 14;
-const MONTH_COUNT = 12;
-const allReferenceStore = useAllReferenceStore();
-
-const chartContext = ref<HTMLElement|null>(null);
-const chartHelper = useAmcharts5(chartContext);
-const userWorkspaceStore = useUserWorkspaceStore();
-const storeState = reactive({
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-    currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-});
-const state = reactive({
-    loading: true,
-    summaryLoading: true,
-    chart: null as null | XYChart,
-    skeletons: range(4),
-    //
-    selectedDateType: 'DAILY' as DateType,
-    dateTypes: computed(() => ([
-        { name: 'DAILY', label: i18n.t('COMMON.WIDGETS.ALL_SUMMARY.DAY') },
-        { name: 'MONTHLY', label: i18n.t('COMMON.WIDGETS.ALL_SUMMARY.MONTH') },
-    ])),
-    //
-    storageSuffix: 'TB' as Unit,
-    storageTrendSuffix: 'TB' as Unit,
-    tabs: Object.values(SERVICE_CATEGORY),
-    activeTab: SERVICE_CATEGORY.SERVER as ServiceCategory,
-    labelMap: computed(() => ({
-        [SERVICE_CATEGORY.SERVER]: i18n.t('COMMON.WIDGETS.ALL_SUMMARY.SERVER'),
-        [SERVICE_CATEGORY.CONTAINER]: i18n.t('COMMON.WIDGETS.ALL_SUMMARY.CONTAINER'),
-        [SERVICE_CATEGORY.DATABASE]: i18n.t('COMMON.WIDGETS.ALL_SUMMARY.DATABASE'),
-        [SERVICE_CATEGORY.NETWORKING]: i18n.t('COMMON.WIDGETS.ALL_SUMMARY.NETWORKING'),
-        [SERVICE_CATEGORY.STORAGE]: i18n.t('COMMON.WIDGETS.ALL_SUMMARY.STORAGE'),
-        [SERVICE_CATEGORY.SECURITY]: i18n.t('COMMON.WIDGETS.ALL_SUMMARY.SECURITY'),
-        [SERVICE_CATEGORY.ANALYTICS]: i18n.t('COMMON.WIDGETS.ALL_SUMMARY.ANALYTICS'),
-        [SERVICE_CATEGORY.ALL]: i18n.t('COMMON.WIDGETS.ALL_SUMMARY.ALL'),
-    })),
-    countMap: {},
-    summaryData: [] as SummaryData[],
-});
-const chartState = reactive({
-    loading: true,
-    registry: {},
-    data: [] as ChartData[],
-});
-
-/* Util */
-const drawChart = () => {
-    // refresh root for deleting previous chart
-    chartHelper.refreshRoot();
-
-    // set date formatter for tooltip text
-    if (state.selectedDateType === 'DAILY') {
-        chartHelper.root.value?.dateFormatter.setAll({
-            dateFormat: 'd MMM, yyyy',
-            dateFields: ['valueX'],
-        });
-    }
-
-    let timeUnit: TimeUnit = 'day';
-    if (state.selectedDateType === 'MONTHLY') timeUnit = 'month';
-
-    const { chart, xAxis, yAxis } = chartHelper.createXYDateChart({
-        paddingLeft: -5,
-        paddingTop: 10,
-        paddingBottom: 0,
-    });
-
-    // set base interval of xAxis
-    xAxis.get('baseInterval').timeUnit = timeUnit;
-    yAxis.set('extraMax', 0.02);
-
-    // create column series
-    const columnSeries = chartHelper.createXYColumnSeries(chart, {
-        name: 'date',
-        valueYField: 'count',
-        stacked: true,
-    });
-    columnSeries.columns.template.setAll({
-        width: chartHelper.percent(25),
-        cornerRadiusTL: 3,
-        cornerRadiusTR: 3,
-    });
-
-    // set data processor
-    let dateFormat = 'yyyy-MM-dd';
-    if (state.selectedDateType === 'MONTHLY') dateFormat = 'yyyy-MM';
-    columnSeries.data.processor = chartHelper.createDataProcessor({
-        dateFormat,
-        dateFields: ['date'],
-    });
-
-    // create bullet
-    columnSeries.bullets.push(() => {
-        const label = chartHelper.createLabel({
-            text: '{bulletText}',
-            populateText: true,
-            fontSize: 14,
-            fill: chartHelper.color(primary),
-            textAlign: 'center',
-            centerX: chartHelper.percent(50),
-            centerY: chartHelper.percent(80),
-        });
-        return chartHelper.createBullet({
-            locationX: 0.5,
-            locationY: 1,
-            sprite: label,
-            dynamic: true,
-        });
-    });
-
-    // set series to chart and set data
-    columnSeries.data.setAll(cloneDeep(chartState.data));
-    chart.series.push(columnSeries);
-
-    // create tooltip
-    const tooltip = chartHelper.createTooltip();
-    chartHelper.setXYSingleTooltipText(chart, tooltip);
-    columnSeries.set('tooltip', tooltip);
-
-    state.chart = chart;
-};
-const getLocation = (type: ServiceCategory) => {
-    const query: CloudServiceMainPageUrlQuery = {
-        project: arrayToQueryString([props.projectId]),
-    };
-    if (type !== SERVICE_CATEGORY.ALL) {
-        query.service = type;
-    }
-    const location: Location = {
-        name: ASSET_INVENTORY_ROUTE_V1.CLOUD_SERVICE._NAME,
-        query,
-    };
-    return location;
-};
-
-/* Api */
-const getCloudServiceSummary = async () => {
-    try {
-        state.summaryLoading = true;
-        const { results } = await SpaceConnector.client.statistics.topic.cloudServiceSummary({
-            project_id: props.projectId,
-            labels: Object.values(SERVICE_CATEGORY),
-            workspace_id: storeState.currentWorkspaceId,
-        });
-
-        state.countMap = {};
-        Object.values(SERVICE_CATEGORY).forEach((serviceName) => {
-            const result = results.find((d) => d.label === serviceName);
-            const count = result?.total || 0;
-            state.countMap[serviceName] = count;
-            if (serviceName === SERVICE_CATEGORY.STORAGE) {
-                state.storageSuffix = byteFormatter(count).split(' ')[1] as Unit;
-            }
-        });
-    } catch (e) {
-        state.countMap = {};
-        ErrorHandler.handleError(e);
-    } finally {
-        state.summaryLoading = false;
-    }
-};
-const getTrend = async (type) => {
-    const dateRange = state.selectedDateType === 'MONTHLY' ? MONTH_COUNT : DAY_COUNT;
-    const dateUnit = state.selectedDateType === 'MONTHLY' ? 'month' : 'day';
-    const dateFormat = state.selectedDateType === 'MONTHLY' ? 'YYYY-MM' : 'YYYY-MM-DD';
-
-    try {
-        const param: any = {
-            granularity: state.selectedDateType,
-            project_id: props.projectId,
-        };
-        if (type !== SERVICE_CATEGORY.ALL) param.label = type;
-        const res = await SpaceConnector.client.statistics.topic.dailyCloudServiceSummary({
-            ...param,
-            workspace_id: storeState.currentWorkspaceId,
-        });
-        const data = res.results;
-
-        if (type === SERVICE_CATEGORY.STORAGE) {
-            const smallestCount = Math.min(...data.map((d) => d.total));
-            const formattedSize = byteFormatter(smallestCount);
-            if (formattedSize) state.storageTrendSuffix = formattedSize.split(' ')[1] as Unit;
-        }
-        const chartData = data.map((d) => {
-            let count = d.total;
-            if (type === SERVICE_CATEGORY.STORAGE) {
-                const formattedSize = byteFormatter(d.total, { unit: state.storageTrendSuffix });
-                if (formattedSize) count = formattedSize.split(' ')[0];
-            }
-            return {
-                date: d.date,
-                count,
-            };
-        });
-
-        forEach(range(0, dateRange), (i) => {
-            const date = dayjs.utc().subtract(i, dateUnit);
-            if (chartData.find((d) => date.format(dateFormat) === d.date)) {
-                chartData.push(chartData.find((d) => date.format(dateFormat) === d.date));
-            } else {
-                chartData.push({ date: date.format(dateFormat), count: null });
-            }
-        });
-
-        const orderedData = orderBy(chartData, ['date'], ['asc']);
-        chartState.data = orderedData.map((d, idx) => {
-            let bulletText: string|undefined;
-            if (idx % 3 === 1) {
-                if (type !== SERVICE_CATEGORY.STORAGE) {
-                    bulletText = numberFormatter(d.count, { notation: 'compact' });
-                } else {
-                    bulletText = d.count;
-                }
-            }
-            return {
-                date: d.date,
-                count: d.count,
-                bulletText,
-            };
-        });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        chartState.data = [];
-    }
-};
-const apiQueryHelper = new ApiQueryHelper();
-const getApiParameter = (type) => {
-    apiQueryHelper
-        .setSort('count', true)
-        .setFilters([{ k: 'project_id', v: props.projectId, o: '=' }]);
-    const defaultParam: any = {
-        query: apiQueryHelper.data,
-    };
-    if (type !== SERVICE_CATEGORY.ALL) defaultParam.labels = [type];
-    if (type !== SERVICE_CATEGORY.STORAGE) {
-        return {
-            ...defaultParam,
-            is_primary: true,
-        };
-    }
-
-    // STORAGE
-    apiQueryHelper.setSort('size', true);
-    return {
-        ...defaultParam,
-        is_major: true,
-        query: apiQueryHelper.data,
-        fields: [{
-            name: 'size',
-            operator: 'sum',
-            key: 'data.size',
-        }],
-    };
-};
-const getSummaryInfo = async (type) => {
-    try {
-        state.loading = true;
-        const param = getApiParameter(type);
-        const res = await SpaceConnector.client.statistics.topic.cloudServiceResources({
-            ...param,
-            workspace_id: storeState.currentWorkspaceId,
-        });
-        const summaryData: SummaryData[] = [];
-        const query: CloudServiceDetailPageUrlQuery = {
-            project: arrayToQueryString([props.projectId]),
-        };
-
-        res.results.forEach((d) => {
-            summaryData.push({
-                provider: d.provider,
-                label: storeState.providers[d.provider]?.label,
-                type: d.display_name || d.cloud_service_group,
-                count: type === SERVICE_CATEGORY.STORAGE ? byteFormatter(d.size) : numberFormatter(d.count),
-                to: {
-                    name: ASSET_INVENTORY_ROUTE_V1.CLOUD_SERVICE.DETAIL._NAME,
-                    params: {
-                        provider: d.provider,
-                        group: d.cloud_service_group,
-                        name: d.cloud_service_type,
-                    },
-                    query,
-                },
-                color: storeState.providers[d.provider]?.color,
-            });
-        });
-        state.summaryData = summaryData;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        state.summaryData = [];
-    } finally {
-        state.loading = false;
-    }
-};
-
-/* Event */
-const handleChangeTab = async (type) => {
-    await Promise.all([getSummaryInfo(type), getTrend(type)]);
-    drawChart();
-};
-const handleChangeDateType = async (dateType: DateType) => {
-    state.selectedDateType = dateType;
-    await getTrend(state.activeTab);
-    drawChart();
-};
-
-/* Init */
-(async () => {
-    await getCloudServiceSummary();
-})();
-const chartInit = async () => {
-    await getTrend(SERVICE_CATEGORY.SERVER);
-    setTimeout(() => {
-        chartState.loading = false;
-    }, 300);
-};
-chartInit();
-
-/* Watcher */
-watch(() => storeState.providers, (providers) => {
-    if (providers) getSummaryInfo(SERVICE_CATEGORY.SERVER);
-}, { immediate: true });
-watch([() => chartState.loading, () => chartContext.value], async ([loading, _chartContext]) => {
-    if (!loading && _chartContext) {
-        drawChart();
-    }
-}, { immediate: true });
-
-onUnmounted(() => {
-    if (state.chart) state.chart.dispose();
-});
-</script>
-
-<template>
-    <div>
-        <div class="title">
-            <span>{{ $t('COMMON.WIDGETS.ALL_SUMMARY.TITLE') }}</span>
-        </div>
-        <p-balloon-tab v-model="state.activeTab"
-                       size="sm"
-                       style-type="primary"
-                       :tabs="state.tabs"
-                       tail
-                       @change="handleChangeTab"
-        >
-            <template #tab="{name}">
-                <div class="box"
-                     :class="{selected: name === state.activeTab}"
-                >
-                    <span>{{ state.labelMap[name] }}</span>
-                    <span v-if="name === SERVICE_CATEGORY.STORAGE"
-                          class="suffix"
-                    >({{ state.storageSuffix }})</span>
-                    <p-spinner v-if="state.summaryLoading"
-                               size="sm"
-                    />
-                    <span v-else
-                          class="count"
-                    > {{ name === SERVICE_CATEGORY.STORAGE ? byteFormatter(state.countMap[name]).split(' ')[0] : numberFormatter(state.countMap[name]) }}</span>
-                </div>
-            </template>
-        </p-balloon-tab>
-        <div class="bottom-part">
-            <div class="content-wrapper">
-                <div class="chart-wrapper">
-                    <div class="sub-title">
-                        <span>{{ $t('COMMON.WIDGETS.ALL_SUMMARY.TREND_TITLE') }}</span>
-                        <span v-if="state.activeTab === SERVICE_CATEGORY.STORAGE"
-                              class="suffix"
-                        >({{ state.storageTrendSuffix }})</span>
-                    </div>
-                    <div class="toggle-button-group">
-                        <p-select-button v-for="(d, idx) in state.dateTypes"
-                                         :key="`date-${d.name}-${idx}`"
-                                         :class="{'selected': state.selectedDateType === d.name}"
-                                         style-type="gray"
-                                         size="sm"
-                                         @click="handleChangeDateType(d.name)"
-                        >
-                            {{ d.label }}
-                        </p-select-button>
-                    </div>
-                    <p-data-loader :loading="chartState.loading">
-                        <template #loader>
-                            <p-skeleton width="100%"
-                                        height="100%"
-                            />
-                        </template>
-                        <div ref="chartContext"
-                             class="chart"
-                        />
-                    </p-data-loader>
-                </div>
-                <div class="summary-wrapper">
-                    <div class="sub-title">
-                        {{ $t('COMMON.WIDGETS.ALL_SUMMARY.TYPE_TITLE', { service: state.labelMap[state.activeTab] }) }}
-                    </div>
-                    <template v-if="!state.loading && state.summaryData.length > 0">
-                        <div class="summary-content-wrapper">
-                            <router-link :to="getLocation(state.activeTab)"
-                                         class="summary-row"
-                            >
-                                <div class="text-group">
-                                    <span>{{ $t('COMMON.WIDGETS.ALL_SUMMARY.ALL') }}</span>
-                                </div>
-                                <span class="count">
-                                    {{ state.activeTab === SERVICE_CATEGORY.STORAGE ? byteFormatter(state.countMap[state.activeTab]) : numberFormatter(state.countMap[state.activeTab]) }}
-                                </span>
-                            </router-link>
-                            <router-link v-for="(data, idx) of state.summaryData"
-                                         :key="idx"
-                                         :to="data.to"
-                                         class="summary-row"
-                            >
-                                <div class="text-group">
-                                    <span class="provider"
-                                          :style="{ color: data.color }"
-                                    >{{ data.label }}</span>
-                                    <span class="type">{{ data.type }}</span>
-                                </div>
-                                <span class="count">{{ data.count }}</span>
-                            </router-link>
-                        </div>
-                    </template>
-                    <template v-else-if="!state.loading">
-                        <div class="summary-content-wrapper no-data-wrapper">
-                            <div class="m-auto">
-                                <img src="@/assets/images/illust_cloud.svg"
-                                     class="empty-image hidden lg:block"
-                                >
-                                <p class="text">
-                                    {{ $t('COMMON.WIDGETS.ALL_SUMMARY.NO_SERVICE', { service: state.labelMap[state.activeTab] }) }}
-                                </p>
-                            </div>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div v-for="v in state.skeletons"
-                             :key="v"
-                             class="flex items-center p-2 col-span-3"
-                        >
-                            <p-skeleton class="flex-grow" />
-                        </div>
-                    </template>
-                </div>
-                <div class="region-service-wrapper">
-                    <div class="sub-title">
-                        <span>{{ $t('COMMON.WIDGETS.ALL_SUMMARY.REGION_SERVICE_TITLE') }}</span>
-                    </div>
-                    <project-summary-all-summary-widget-region-service
-                        :project-id="projectId"
-                        :label="state.activeTab"
-                        :count="state.countMap[state.activeTab]"
-                    />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.title {
-    font-size: 1.5rem;
-    line-height: 1.6;
-    margin-bottom: 0.5rem;
-}
-.sub-title {
-    font-size: 0.875rem;
-    line-height: 1.5;
-    font-weight: bold;
-    margin-bottom: 1rem;
-    .suffix {
-        font-size: 0.75rem;
-        font-weight: normal;
-        padding-left: 0.5rem;
-    }
-}
-.box {
-    display: flex;
-    align-items: center;
-    .suffix {
-        @apply text-gray-500;
-        font-size: 0.75rem;
-        padding-left: 0.125rem;
-    }
-    .count {
-        @apply text-primary1;
-        font-weight: bold;
-        padding-left: 0.25rem;
-    }
-
-    &.selected {
-        .suffix, .count {
-            @apply text-white;
-        }
-    }
-    .p-spinner {
-        padding-left: 0.25rem;
-    }
-}
-
-/* custom design-system component - p-balloon-tab */
-:deep(.p-balloon-tab) {
-    .tab-pane {
-        padding-bottom: 0;
-    }
-}
-.bottom-part {
-    margin-top: 0.625rem;
-
-    .content-wrapper {
-        @apply bg-white border border-gray-200 rounded-md grid-cols-12 gap-2;
-        position: relative;
-        display: grid;
-        height: auto;
-        padding: 1rem;
-
-        @screen lg {
-            height: 17.5rem;
-        }
-
-        .chart-wrapper {
-            @apply col-span-12;
-            position: relative;
-
-            @apply lg:col-span-7;
-            .toggle-button-group {
-                position: absolute;
-                right: 0.5rem;
-                top: 0;
-                .p-select-button {
-                    margin-right: 0.375rem;
-                    min-width: 2.4375rem;
-                }
-            }
-            .chart {
-                height: 13rem;
-            }
-        }
-        .summary-wrapper {
-            @apply col-span-12 md:col-span-4 lg:col-span-2;
-
-            .sub-title {
-                padding-left: 0.5rem;
-            }
-            .summary-content-wrapper {
-                height: 5rem;
-                overflow-y: auto;
-                overflow-x: hidden;
-
-                @screen lg {
-                    height: 13rem;
-                }
-
-                &.no-data-wrapper {
-                    display: grid;
-                    .empty-image {
-                        margin: 0 auto 0.5rem auto;
-                    }
-
-                    .text {
-                        @apply text-primary2;
-                        font-size: 0.875rem;
-                        font-weight: bold;
-                        line-height: 1.5;
-                        text-align: center;
-                        opacity: 0.7;
-                        margin-bottom: 0.625rem;
-                    }
-                }
-            }
-            .summary-row {
-                position: relative;
-                display: block;
-                font-size: 0.875rem;
-                line-height: 1.2;
-                cursor: pointer;
-                padding: 0.25rem 0.5rem;
-                margin: auto 0;
-
-                &:hover {
-                    @apply bg-secondary2;
-                    .provider {
-                        text-decoration: underline;
-                    }
-                    .type {
-                        text-decoration: underline;
-                    }
-                    .count {
-                        text-decoration: underline;
-                    }
-                }
-
-                .text-group {
-                    display: inline-block;
-                    width: 80%;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-
-                    .type {
-                        padding-left: 0.5rem;
-                    }
-                }
-
-                .count {
-                    @apply text-gray-600;
-                    position: absolute;
-                    right: 0.5rem;
-                }
-            }
-        }
-        .region-service-wrapper {
-            @apply col-span-12 md:col-span-5 lg:col-span-3;
-
-            .sub-title {
-                padding-left: 0.5rem;
-            }
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectSummaryAllSummaryWidgetRegionService.vue b/apps/web/src/services/project/components/ProjectSummaryAllSummaryWidgetRegionService.vue
deleted file mode 100644
index f147289837..0000000000
--- a/apps/web/src/services/project/components/ProjectSummaryAllSummaryWidgetRegionService.vue
+++ /dev/null
@@ -1,322 +0,0 @@
-<script lang="ts" setup>
-import {
-    reactive, watch, computed, ref,
-} from 'vue';
-import type { Location } from 'vue-router';
-
-import type { PieSeriesOption } from 'echarts/charts';
-import type { EChartsType } from 'echarts/core';
-import { init } from 'echarts/core';
-import { range, orderBy, isEmpty } from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PSkeleton, PDataLoader,
-} from '@cloudforet/mirinae';
-import { byteFormatter } from '@cloudforet/utils';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-
-import { arrayToQueryString, primitiveToQueryString } from '@/lib/router-query-string';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import {
-    gray, coral, yellow, secondary1,
-} from '@/styles/colors';
-
-import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
-import type { CloudServiceMainPageUrlQuery } from '@/services/asset-inventory-v1/types/cloud-service-page-type';
-
-
-interface Data {
-    provider: string;
-    region_code: string;
-    total: number;
-}
-interface Props {
-    projectId: string;
-    label?: string;
-    count?: number;
-}
-const props = withDefaults(defineProps<Props>(), {
-    label: undefined,
-    count: undefined,
-});
-const allReferenceStore = useAllReferenceStore();
-
-const chartContext = ref<HTMLElement|null>(null);
-const userWorkspaceStore = useUserWorkspaceStore();
-const storeState = reactive({
-    currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-});
-const state = reactive({
-    loading: true,
-    skeletons: range(3),
-    data: [] as Data[],
-    chart: null as EChartsType | null,
-    chartData: [],
-    chartOptions: computed<PieSeriesOption>(() => ({
-        tooltip: {
-            show: false,
-        },
-        grid: {
-            containLabel: true,
-        },
-        legend: {
-            show: false,
-        },
-        series: [
-            {
-                type: 'pie',
-                radius: ['20%', '50%'],
-                center: ['30%', '50%'],
-                data: state.chartData,
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)',
-                    },
-                },
-                avoidLabelOverlap: false,
-                label: {
-                    show: false,
-                },
-            },
-        ],
-    })),
-});
-
-/* Util */
-const getLocation = (provider: string, region: string, projectId: string, label: string) => {
-    const query: CloudServiceMainPageUrlQuery = {
-        provider: primitiveToQueryString(provider),
-        region: arrayToQueryString([region]),
-        project: arrayToQueryString([projectId]),
-    };
-    if (label !== 'All') query.service = arrayToQueryString([label]);
-
-    const location: Location = {
-        name: ASSET_INVENTORY_ROUTE_V1.CLOUD_SERVICE._NAME,
-        query,
-    };
-    return location;
-};
-const drawChart = (rawData) => {
-    if (isEmpty(rawData)) return;
-
-    state.chartData = rawData?.map((d) => ({
-        name: d.region,
-        value: d.count,
-        itemStyle: {
-            color: d.color,
-        },
-    })) || [];
-    state.chart = init(chartContext.value);
-    state.chart.setOption(state.chartOptions, true);
-};
-
-/* Api */
-const getData = async () => {
-    try {
-        state.loading = true;
-        state.data = [];
-        const param: any = {
-            project_id: props.projectId,
-            aggregation: 'inventory.Region',
-            labels: [props.label],
-        };
-        const res = await SpaceConnector.client.statistics.topic.cloudServiceSummary({
-            ...param,
-            workspace_id: storeState.currentWorkspaceId,
-        });
-        const colors = [coral[500], yellow[400], secondary1];
-        let data = orderBy(res.results, ['total'], ['desc']);
-        data = data.map((d, idx) => ({
-            provider: storeState.providers[d.provider]?.label,
-            region: d.region_code,
-            total: d.total,
-            count: d.label === 'Storage' ? byteFormatter(d.total) : d.total,
-            providerColor: storeState.providers[d.provider]?.color,
-            color: colors[idx] || gray[400],
-            to: getLocation(d.provider, d.region_code, props.projectId, props.label),
-        }));
-        state.data = data;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        state.data = [];
-    } finally {
-        state.loading = false;
-    }
-};
-
-/* Watcher */
-watch(() => props.label, async () => {
-    await getData();
-}, { immediate: false });
-watch([() => state.loading, () => chartContext.value], ([loading, chartCtx]) => {
-    if (!loading && chartCtx) {
-        drawChart(state.data);
-    }
-});
-
-(async () => {
-    await getData();
-})();
-</script>
-
-<template>
-    <div class="project-summary-all-summary-widget-region-service">
-        <div v-if="!state.loading && state.data.length === 0"
-             class="no-data-wrapper grid"
-        >
-            <div class="m-auto">
-                <img src="@/assets/images/illust_cloud.svg"
-                     class="empty-image hidden lg:block"
-                >
-                <p class="text">
-                    {{ $t('COMMON.WIDGETS.ALL_SUMMARY.NO_SERVICE', { service: $t('COMMON.WIDGETS.ALL_SUMMARY.REGION_SERVICE') }) }}
-                </p>
-            </div>
-        </div>
-        <div v-else
-             class="grid grid-cols-12"
-        >
-            <div class="col-span-3 chart-wrapper">
-                <p-data-loader :loading="state.loading">
-                    <div ref="chartContext"
-                         class="chart"
-                    />
-                </p-data-loader>
-            </div>
-            <div class="col-span-9 summary-content-wrapper">
-                <template v-if="state.loading">
-                    <div v-for="v in state.skeletons"
-                         :key="v"
-                         class="flex items-center p-2 col-span-3"
-                    >
-                        <p-skeleton class="flex-grow" />
-                    </div>
-                </template>
-                <template v-else>
-                    <router-link v-for="(d, idx) of state.data"
-                                 :key="idx"
-                                 :to="d.to"
-                                 class="summary-row col-span-3 md:col-span-1 lg:col-span-3"
-                    >
-                        <span class="circle"
-                              :style="{ 'background-color': d.color }"
-                        />
-                        <div class="text-group">
-                            <span :style="{ color: d.providerColor }">{{ d.provider }}</span>
-                            <span class="type truncate">{{ d.region }}</span>
-                        </div>
-                        <span class="count">{{ d.count }}</span>
-                    </router-link>
-                </template>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.project-summary-all-summary-widget-region-service {
-    .no-data-wrapper {
-        height: 13rem;
-        .empty-image {
-            margin: 0 auto 0.5rem auto;
-        }
-
-        .text {
-            @apply text-primary2;
-            font-size: 0.875rem;
-            font-weight: bold;
-            line-height: 1.5;
-            text-align: center;
-            opacity: 0.7;
-            margin-bottom: 0.625rem;
-        }
-    }
-    .chart-wrapper {
-        .chart {
-            width: 100%;
-            height: 100%;
-            max-width: 6rem;
-            max-height: 6rem;
-            margin: auto;
-
-            @screen md {
-                position: absolute;
-                top: -1rem;
-            }
-        }
-    }
-    .summary-content-wrapper {
-        overflow-y: auto;
-        height: 13rem;
-    }
-    .summary-row {
-        position: relative;
-        display: block;
-        font-size: 0.875rem;
-        line-height: 1.2;
-        cursor: pointer;
-        padding: 0.25rem 0.5rem;
-        margin: auto 0;
-
-        &:hover {
-            @apply bg-secondary2;
-            .provider {
-                text-decoration: underline;
-            }
-            .type {
-                text-decoration: underline;
-            }
-            .count {
-                text-decoration: underline;
-            }
-        }
-
-        .circle {
-            @apply rounded-full;
-            display: inline-block;
-            width: 0.5rem;
-            height: 0.5rem;
-            margin-bottom: 0.25rem;
-            margin-right: 0.25rem;
-        }
-
-        .text-group {
-            display: inline-block;
-            width: 75%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            .type {
-                padding-left: 0.5rem;
-            }
-        }
-
-        .count {
-            @apply text-gray-600;
-            position: absolute;
-            right: 0.5rem;
-        }
-    }
-
-    .p-data-loader {
-        height: 100%;
-    }
-
-    @screen mobile {
-        .summary-content-wrapper {
-            height: auto;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectSummaryBillingWidget.vue b/apps/web/src/services/project/components/ProjectSummaryBillingWidget.vue
deleted file mode 100644
index f4a6bd89d0..0000000000
--- a/apps/web/src/services/project/components/ProjectSummaryBillingWidget.vue
+++ /dev/null
@@ -1,624 +0,0 @@
-<script setup lang="ts">
-import {
-    computed, reactive, ref, watch,
-} from 'vue';
-
-import dayjs from 'dayjs';
-import type { LineSeriesOption } from 'echarts/charts';
-import type { EChartsType } from 'echarts/core';
-import { init } from 'echarts/core';
-import { range } from 'lodash';
-
-import { QueryHelper } from '@cloudforet/core-lib/query';
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PSelectButton, PCollapsibleToggle, PDataTable, PI, PIconButton, PSkeleton, PSelectDropdown, PLazyImg,
-} from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
-import { numberFormatter } from '@cloudforet/utils';
-
-import { i18n } from '@/translations';
-
-import { CURRENCY } from '@/store/display/constant';
-import type { Currency } from '@/store/display/type';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import type { PluginReferenceMap } from '@/store/reference/plugin-reference-store';
-
-import { currencyMoneyFormatter } from '@/lib/helper/currency-helper';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { getWidgetDateFields } from '@/common/modules/widgets/_helpers/widget-date-helper';
-
-import { GROUP_BY } from '@/services/cost-explorer/constants/cost-explorer-constant';
-
-
-enum DATE_TYPE {
-    daily = 'DAILY',
-    monthly = 'MONTHLY',
-}
-const DAY_COUNT = 14;
-const MONTH_COUNT = 12;
-const DATA_TABLE_COLUMN = 6;
-
-interface Props {
-    projectId: string;
-}
-const props = defineProps<Props>();
-
-const allReferenceStore = useAllReferenceStore();
-const chartContext = ref<HTMLElement | null>(null);
-const storeState = reactive({
-    plugins: computed<PluginReferenceMap>(() => allReferenceStore.getters.plugin),
-    dataSourceMap: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource ?? {}),
-});
-const state = reactive({
-    loading: true,
-    skeletons: range(4),
-    dateTypes: computed(() => ([
-        { name: DATE_TYPE.daily, label: i18n.t('COMMON.WIDGETS.BILLING.DAY') },
-        { name: DATE_TYPE.monthly, label: i18n.t('COMMON.WIDGETS.BILLING.MONTH') },
-    ])),
-    data: [],
-    selectedDateType: DATE_TYPE.monthly,
-    dataSourceMenuItems: computed<MenuItem[]>(() => Object.entries(storeState.dataSourceMap).map(([key, value]) => ({
-        name: key,
-        label: value?.name,
-        imageUrl: storeState.plugins[value.data.plugin_info?.plugin_id]?.icon ? storeState.plugins[value.data.plugin_info?.plugin_id]?.icon : 'error',
-    }))),
-    selectedDataSourceId: undefined as undefined|string,
-    currency: computed<Currency>(() => {
-        const targetDataSource = storeState.dataSourceMap[state.selectedDataSourceId ?? ''];
-        if (!targetDataSource) return CURRENCY.USD;
-        const currentCurrency = targetDataSource.data.plugin_info.metadata.currency;
-        return currentCurrency ?? CURRENCY.USD;
-    }),
-});
-const summaryState = reactive({
-    pastDateText: computed(() => {
-        if (state.selectedDateType === DATE_TYPE.monthly) return i18n.t('COMMON.WIDGETS.BILLING.LAST_MONTH');
-        return i18n.t('COMMON.WIDGETS.BILLING.TWO_DAYS_AGO');
-    }),
-    currentDateText: computed(() => {
-        if (state.selectedDateType === DATE_TYPE.monthly) return i18n.t('COMMON.WIDGETS.BILLING.THIS_MONTH');
-        return i18n.t('COMMON.WIDGETS.BILLING.YESTERDAY');
-    }),
-    pastDate: computed(() => {
-        if (state.selectedDateType === DATE_TYPE.monthly) {
-            return dayjs.utc().subtract(1, 'month').format('MMM/YYYY');
-        }
-        return dayjs.utc().subtract(2, 'day').format('DD/MM/YYYY');
-    }),
-    currentDate: computed(() => {
-        if (state.selectedDateType === DATE_TYPE.monthly) {
-            return dayjs.utc().format('MMM/YYYY');
-        }
-        return dayjs.utc().subtract(1, 'day').format('DD/MM/YYYY');
-    }),
-    pastCost: 0,
-    currentCost: 0,
-});
-const tableState = reactive({
-    isCollapsed: true,
-    loading: true,
-    fields: computed(() => {
-        const fields: any = [];
-        const timeUnit = state.selectedDateType === DATE_TYPE.monthly ? 'month' : 'day';
-        const dateNameFormat = state.selectedDateType === DATE_TYPE.monthly ? 'YYYY-MM' : 'YYYY-MM-DD';
-        const dateLabelFormat = state.selectedDateType === DATE_TYPE.monthly ? 'MMM/YYYY' : 'MM/DD/YYYY';
-        let now = tableState.endDate.clone();
-
-        const start = now.subtract(DATA_TABLE_COLUMN, timeUnit);
-        while (now.isAfter(start, timeUnit)) {
-            fields.unshift({
-                name: now.format(dateNameFormat),
-                label: now.format(dateLabelFormat),
-            });
-            now = now.subtract(1, timeUnit);
-        }
-        fields.unshift({ name: 'service', label: '' });
-        return fields;
-    }),
-    data: [],
-    refinedData: computed(() => {
-        if (!tableState.data.length) return [];
-        const data: any = [];
-        tableState.data.forEach((d) => {
-            const costData: Record<string, string> = {};
-            // const timeUnit = state.selectedDateType === DATE_TYPE.monthly ? 'month' : 'day';
-            // const dateFormat = state.selectedDateType === DATE_TYPE.monthly ? 'YYYY-MM' : 'YYYY-MM-DD';
-            // const pastDate = dayjs.utc(d.date).subtract(1, timeUnit).format(dateFormat);
-            // const pastCost = results.find((bd) => bd.date === pastDate)?.value_sum || 0;
-            // costData[d.date] = {
-            //     cost: currencyMoneyFormatter(d.value, { currency: state.currency }),
-            // };
-            // if (pastCost && pastCost < d.value_sum && (d.value_sum - pastCost) / Math.abs(pastCost) > 0.5) {
-            //     costData[d.date].color = 'red';
-            // }
-            d.value_sum.forEach((cost) => {
-                costData[cost.date] = currencyMoneyFormatter(cost.value, { currency: state.currency });
-            });
-
-            data.push({
-                service: d.product,
-                ...costData,
-            });
-        });
-        return data;
-    }),
-    endDate: dayjs.utc(),
-    nextButtonDisabled: computed(() => {
-        const now = dayjs.utc();
-        if (state.selectedDateType === DATE_TYPE.monthly) {
-            return now.isSame(tableState.endDate, 'month');
-        }
-        return now.isSame(tableState.endDate, 'day');
-    }),
-});
-const chartState = reactive({
-    chart: null as EChartsType | null,
-    chartData: [],
-    xAxisData: [],
-    chartOptions: computed<LineSeriesOption>(() => ({
-        legend: {
-            show: false,
-        },
-        tooltip: {
-            trigger: 'axis',
-            valueFormatter: (val) => numberFormatter(val) || '',
-        },
-        grid: {
-            top: 10,
-            bottom: 20,
-        },
-        xAxis: {
-            type: 'category',
-            data: chartState.xAxisData,
-        },
-        yAxis: {
-            type: 'value',
-            axisLabel: {
-                formatter: (val) => numberFormatter(val, { notation: 'compact' }),
-            },
-        },
-        series: chartState.chartData,
-    })),
-    dateRange: computed(() => {
-        let start = dayjs.utc().subtract(DAY_COUNT - 1, 'day').format('YYYY-MM-DD');
-        let end = dayjs.utc().format('YYYY-MM-DD');
-        if (state.selectedDateType === 'MONTHLY') {
-            start = dayjs.utc().subtract(MONTH_COUNT - 1, 'month').format('YYYY-MM');
-            end = dayjs.utc().format('YYYY-MM');
-        }
-        return { start, end };
-    }),
-});
-
-/* Api */
-const costAnalyzeQueryHelper = new QueryHelper();
-const fetchTrendData = async (dataSourceId: string) => {
-    try {
-        state.loading = true;
-        costAnalyzeQueryHelper.setFilters([{ k: 'project_id', v: props.projectId, o: '=' }]);
-        const { results } = await SpaceConnector.clientV2.costAnalysis.cost.analyze({
-            data_source_id: dataSourceId,
-            query: {
-                granularity: state.selectedDateType,
-                fields: {
-                    value_sum: {
-                        key: 'cost',
-                        operator: 'sum',
-                    },
-                },
-                sort: [{ key: 'date', desc: false }],
-                filter: costAnalyzeQueryHelper.apiQuery.filter,
-                start: chartState.dateRange.start,
-                end: chartState.dateRange.end,
-            },
-        });
-        state.data = results;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        state.data = [];
-    } finally {
-        state.loading = false;
-    }
-};
-const fetchTableData = async (dataSourceId: string) => {
-    try {
-        tableState.loading = true;
-        const today = tableState.endDate;
-        let start;
-        let end;
-        if (state.selectedDateType === DATE_TYPE.monthly) {
-            start = today.subtract(MONTH_COUNT - 1, 'month').format('YYYY-MM');
-            end = today.format('YYYY-MM');
-        } else {
-            start = today.subtract(DAY_COUNT - 1, 'day').format('YYYY-MM-DD');
-            end = today.format('YYYY-MM-DD');
-        }
-        costAnalyzeQueryHelper.setFilters([{ k: 'project_id', v: props.projectId, o: '=' }]);
-        const { results } = await SpaceConnector.clientV2.costAnalysis.cost.analyze({
-            data_source_id: dataSourceId,
-            query: {
-                granularity: state.selectedDateType,
-                group_by: [GROUP_BY.PRODUCT],
-                fields: {
-                    value_sum: {
-                        key: 'cost',
-                        operator: 'sum',
-                    },
-                },
-                sort: [{ key: '_total_value_sum', desc: true }],
-                field_group: ['date'],
-                filter: costAnalyzeQueryHelper.apiQuery.filter,
-                start,
-                end,
-            },
-        });
-        tableState.data = results;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        tableState.data = [];
-    } finally {
-        tableState.loading = false;
-    }
-};
-
-/* Util */
-const setCountData = (results) => {
-    const utcToday = dayjs.utc();
-    let start;
-    let end;
-    if (state.selectedDateType === DATE_TYPE.monthly) {
-        start = utcToday.subtract(1, 'month').format('YYYY-MM');
-        end = utcToday.format('YYYY-MM');
-    } else {
-        start = utcToday.subtract(2, 'day').format('YYYY-MM-DD');
-        end = utcToday.subtract(1, 'day').format('YYYY-MM-DD');
-    }
-    summaryState.pastCost = results.find((d) => d.date === start)?.value_sum || 0;
-    summaryState.currentCost = results.find((d) => d.date === end)?.value_sum || 0;
-};
-const drawChart = (rawData) => {
-    if (!rawData.length) return;
-    chartState.xAxisData = getWidgetDateFields(state.selectedDateType, chartState.dateRange.start, chartState.dateRange.end);
-    const _seriesData: number[] = [];
-    chartState.xAxisData.forEach((date) => {
-        const data = rawData.find((d) => d.date === date);
-        _seriesData.push(data?.value_sum || 0);
-    });
-    chartState.chartData = {
-        name: 'Cost',
-        type: 'line',
-        data: _seriesData,
-    };
-    chartState.chart = init(chartContext.value);
-    chartState.chart.setOption(chartState.chartOptions, true);
-};
-
-/* Event */
-const handleClickDateButton = (type) => {
-    let dateUnit = 'month';
-    if (state.selectedDateType === DATE_TYPE.daily) dateUnit = 'day';
-    if (type === 'prev') {
-        tableState.endDate = tableState.endDate.subtract(DATA_TABLE_COLUMN, dateUnit);
-    } else {
-        tableState.endDate = tableState.endDate.add(DATA_TABLE_COLUMN, dateUnit);
-    }
-    fetchTableData(state.selectedDataSourceId);
-};
-const handleChangeSelectedDataSourceId = (id: string) => {
-    state.selectedDataSourceId = id;
-};
-
-/* Watcher */
-watch(() => storeState.dataSourceMap, (dataSourceMap) => {
-    if (dataSourceMap) {
-        state.selectedDataSourceId = Object.keys(dataSourceMap)[0];
-    }
-}, { immediate: true });
-watch([() => state.selectedDateType, () => state.selectedDataSourceId], async ([, dataSourceId]) => {
-    if (dataSourceId) {
-        await Promise.all([
-            fetchTrendData(dataSourceId),
-            fetchTableData(dataSourceId),
-        ]);
-        setCountData(state.data);
-    }
-}, { immediate: true });
-watch([() => state.data, () => chartContext.value], async ([data, _chartContext]) => {
-    if (_chartContext) drawChart(data);
-});
-</script>
-
-<template>
-    <div>
-        <div class="title">
-            <span>{{ $t('COMMON.WIDGETS.BILLING.TITLE') }}</span>
-        </div>
-        <div class="content-wrapper grid grid-cols-12 gap-2">
-            <div class="col-span-12 title-wrapper">
-                <div class="left-part">
-                    <span class="title">{{ $t('COMMON.WIDGETS.BILLING.TREND_TITLE') }}</span>
-                    <p-select-dropdown :menu="state.dataSourceMenuItems"
-                                       :selected="state.selectedDataSourceId"
-                                       style-type="transparent"
-                                       size="sm"
-                                       class="data-source-dropdown"
-                                       @update:selected="handleChangeSelectedDataSourceId"
-                    >
-                        <template #dropdown-button="item">
-                            <div class="selected-wrapper">
-                                <p-lazy-img v-if="item && item.imageUrl"
-                                            class="selected-icon"
-                                            :src="item.imageUrl"
-                                            width="1rem"
-                                            height="1rem"
-                                />
-                                {{ item?.label }}
-                            </div>
-                        </template>
-                    </p-select-dropdown>
-                </div>
-                <div class="right-part">
-                    <p-select-button v-for="(d, idx) in state.dateTypes"
-                                     :key="`date-${d.name}-${idx}`"
-                                     :class="{'selected': state.selectedDateType === d.name}"
-                                     style-type="gray"
-                                     size="sm"
-                                     @click="state.selectedDateType = d.name"
-                    >
-                        {{ d.label }}
-                    </p-select-button>
-                </div>
-            </div>
-            <div class="col-span-12 md:col-span-9">
-                <div class="chart-wrapper">
-                    <p-skeleton v-if="state.loading"
-                                width="100%"
-                                height="100%"
-                    />
-                    <div v-else
-                         ref="chartContext"
-                         class="chart"
-                    />
-                </div>
-            </div>
-            <div class="col-span-12 md:col-span-3 grid grid-cols-12 summary-group">
-                <div class="summary-wrapper col-span-6 md:col-span-12">
-                    <span class="label">{{ summaryState.pastDateText }}</span>
-                    <span class="date">({{ summaryState.pastDate }})</span>
-                    <span class="cost">
-                        <span v-if="summaryState.pastCost !== 0">{{ currencyMoneyFormatter(summaryState.pastCost, { currency: state.currency }) }}</span>
-                        <span v-else
-                              class="empty"
-                        />
-                    </span>
-                </div>
-                <div class="summary-wrapper col-span-6 md:col-span-12">
-                    <span class="label">{{ summaryState.currentDateText }}</span>
-                    <span class="date">({{ summaryState.currentDate }})</span>
-                    <div class="cost in-process">
-                        <template v-if="summaryState.currentCost !== 0">
-                            <span>{{ currencyMoneyFormatter(summaryState.currentCost, { currency: state.currency }) }}</span>
-                            <span class="in-process-text">({{ $t('COMMON.WIDGETS.BILLING.IN_PROCESS') }})</span>
-                            <div class="help">
-                                <p-i v-tooltip.top="$t('COMMON.WIDGETS.BILLING.TOOLTIP_TEXT')"
-                                     name="ic_question-mark-circle-filled"
-                                     width="1rem"
-                                     height="1rem"
-                                     color="inherit transparent"
-                                />
-                            </div>
-                        </template>
-                        <template v-else>
-                            <span class="empty" />
-                        </template>
-                    </div>
-                </div>
-            </div>
-            <div class="col-span-12 detail-wrapper">
-                <div class="table-button-wrapper">
-                    <p-icon-button class="text"
-                                   name="ic_chevron-left"
-                                   color="inherit transparent"
-                                   @click="handleClickDateButton('prev')"
-                    />
-                    <p-icon-button class="text"
-                                   name="ic_chevron-right"
-                                   color="inherit transparent"
-                                   :disabled="tableState.nextButtonDisabled"
-                                   @click="handleClickDateButton('next')"
-                    />
-                </div>
-                <p-data-table
-                    :loading="tableState.loading"
-                    :fields="tableState.fields"
-                    :items="tableState.isCollapsed ? tableState.refinedData.slice(0, 5) : tableState.refinedData"
-                    :bordered="false"
-                >
-                    <template #th-service-format>
-                        <span />
-                    </template>
-                </p-data-table>
-                <div v-if="tableState.data.length > 5"
-                     class="toggle-button-wrapper"
-                >
-                    <p-collapsible-toggle :is-collapsed.sync="tableState.isCollapsed">
-                        {{ tableState.isCollapsed ? $t('COMMON.WIDGETS.BILLING.SHOW_ALL') : $t('COMMON.WIDGETS.BILLING.HIDE') }}
-                    </p-collapsible-toggle>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.title {
-    font-size: 1.5rem;
-    line-height: 1.6;
-    padding-top: 0.5rem;
-    margin-bottom: 0.75rem;
-}
-.content-wrapper {
-    @apply border border-gray-200 rounded-md;
-    padding: 1rem;
-    .title-wrapper {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 1rem;
-        .title {
-            font-weight: bold;
-            font-size: 0.875rem;
-        }
-        .right-part {
-            .p-select-button {
-                margin-right: 0.375rem;
-                min-width: 2.4375rem;
-            }
-        }
-    }
-    .data-source-dropdown {
-        margin-left: 1rem;
-        .selected-wrapper {
-            @apply flex items-center;
-
-            .selected-icon {
-                margin-right: 0.25rem;
-                margin-top: 0.125rem;
-                flex-shrink: 0;
-            }
-        }
-    }
-    .summary-group {
-        grid-auto-rows: max-content;
-        .summary-wrapper {
-            line-height: 1.5;
-            padding-bottom: 0.5rem;
-            .label {
-                @apply text-gray-700;
-                font-size: 0.875rem;
-            }
-            .date {
-                @apply text-gray-500;
-                font-size: 0.75rem;
-                padding-left: 0.375rem;
-            }
-            .cost {
-                @apply text-secondary;
-                display: block;
-                font-size: 1.375rem;
-                line-height: 1.55;
-                &.in-process {
-                    @apply text-safe;
-                    .in-process-text {
-                        font-size: 0.75rem;
-                        padding-left: 0.375rem;
-                    }
-                }
-                .help {
-                    @apply text-gray-300;
-                    display: inline-block;
-                    padding-left: 0.25rem;
-                    .p-i-icon {
-                        cursor: help;
-                    }
-                }
-                .empty {
-                    display: block;
-                    width: 1rem;
-                    height: 1rem;
-                    border-bottom: 2px solid;
-                    margin-bottom: 1rem;
-                }
-            }
-        }
-    }
-    .chart-wrapper {
-        min-height: 13rem;
-        margin-bottom: 1rem;
-        .chart {
-            height: 13rem;
-            width: 100%;
-        }
-
-        /* custom design-system component - p-data-loader */
-        :deep(.p-data-loader) {
-            height: 13rem;
-        }
-    }
-    .detail-wrapper {
-        .table-button-wrapper {
-            text-align: right;
-        }
-
-        /* custom design-system component - p-data-table */
-        :deep(.p-data-table) {
-            @apply rounded-xs;
-            height: auto;
-            text-align: right;
-            margin-top: 0.5rem;
-            .table-container {
-                min-height: 5rem;
-                max-height: 17.5rem;
-            }
-            th {
-                @apply bg-gray-100 text-gray-400;
-                height: 1.5rem;
-                text-align: right;
-                border: none;
-                font-size: 0.75rem;
-                &:first-child {
-                    @apply bg-white;
-                    width: 10rem;
-                }
-                .th-contents {
-                    display: block;
-                    padding-right: 1rem;
-                }
-            }
-            tr {
-                &:nth-child(even) {
-                    td {
-                        @apply bg-primary4;
-                        &:last-child {
-                            @apply bg-green-100;
-                        }
-                        &:first-child {
-                            @apply bg-white;
-                        }
-                    }
-                }
-                &:hover {
-                    @apply bg-white;
-                }
-            }
-            td {
-                width: auto;
-                height: 1.75rem;
-                .col-service {
-                    @apply text-gray-700;
-                    cursor: default;
-                    &.link-text {
-                        @apply text-secondary;
-                        cursor: pointer;
-                        &:hover {
-                            text-decoration: underline;
-                        }
-                    }
-                }
-            }
-        }
-        .toggle-button-wrapper {
-            text-align: center;
-            .p-collapsible-toggle {
-                display: block;
-                padding-top: 0.5rem;
-            }
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectSummaryPersonalHealthDashboardWidget.vue b/apps/web/src/services/project/components/ProjectSummaryPersonalHealthDashboardWidget.vue
deleted file mode 100644
index 49e2ef9985..0000000000
--- a/apps/web/src/services/project/components/ProjectSummaryPersonalHealthDashboardWidget.vue
+++ /dev/null
@@ -1,380 +0,0 @@
-<script lang="ts" setup>
-import {
-    computed, nextTick, reactive, watch,
-} from 'vue';
-
-import dayjs from 'dayjs';
-
-import { QueryHelper } from '@cloudforet/core-lib/query';
-import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
-import {
-    PLink, PToolboxTable, PTooltip,
-} from '@cloudforet/mirinae';
-import { ACTION_ICON } from '@cloudforet/mirinae/src/navigation/link/type';
-import { numberFormatter } from '@cloudforet/utils';
-
-import { i18n } from '@/translations';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CloudServiceTypeReferenceMap } from '@/store/reference/cloud-service-type-reference-store';
-import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-import type { RegionReferenceMap } from '@/store/reference/region-reference-store';
-import { useUserStore } from '@/store/user/user-store';
-
-import { referenceRouter } from '@/lib/reference/referenceRouter';
-
-import WidgetLayout from '@/common/components/layouts/WidgetLayout.vue';
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useProperRouteLocation } from '@/common/composables/proper-route-location';
-
-import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
-
-
-
-enum EVENT_CATEGORY {
-    accountNotification = 'accountNotification',
-    scheduledChange = 'scheduledChange',
-    issue = 'issue'
-}
-const CLOUD_SERVICE_GROUP = 'PersonalHealthDashboard';
-const CLOUD_SERVICE_NAME = 'Event';
-const EVENT_PERIOD = 7;
-
-interface Props {
-    projectId?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-    projectId: undefined,
-});
-const allReferenceStore = useAllReferenceStore();
-const userStore = useUserStore();
-const { getProperRouteLocation } = useProperRouteLocation();
-const getEventsApiQuery = new ApiQueryHelper();
-const queryHelper = new QueryHelper();
-const userWorkspaceStore = useUserWorkspaceStore();
-const storeState = reactive({
-    currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-});
-const state = reactive({
-    loading: false,
-    regions: computed<RegionReferenceMap>(() => allReferenceStore.getters.region),
-    timezone: computed<string|undefined>(() => userStore.state.timezone),
-    cloudServiceTypes: computed<CloudServiceTypeReferenceMap>(() => allReferenceStore.getters.cloudServiceType),
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-    pageStart: 1,
-    pageLimit: 5,
-    totalCount: 0,
-    data: [],
-    summaryData: computed(() => ([
-        {
-            name: EVENT_CATEGORY.issue,
-            label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.SUMMARY_ISSUE'),
-            count: state.countData.issue,
-            date: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.PAST_7_DAYS'),
-        },
-        {
-            name: EVENT_CATEGORY.scheduledChange,
-            label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.SUMMARY_SCHEDULED_CHANGE'),
-            count: state.countData.scheduledChange,
-            date: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.UPCOMING_AND_PAST_7_DAYS'),
-        },
-        {
-            name: EVENT_CATEGORY.accountNotification,
-            label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.SUMMARY_NOTIFICATION'),
-            count: state.countData.accountNotification,
-            date: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.PAST_7_DAYS'),
-        },
-    ])),
-    fields: computed(() => [
-        { name: 'event', label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.FIELD_EVENT'), sortable: false },
-        { name: 'region_code', label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.FIELD_REGION') },
-        { name: 'start_time', label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.FIELD_START_TIME') },
-        { name: 'last_update_time', label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.FIELD_LAST_UPDATE_TIME') },
-        { name: 'affected_resources', label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.FIELD_AFFECTED_RESOURCES'), sortable: false },
-    ]),
-    countData: {},
-    search: '',
-    sortBy: 'last_update_time',
-    sortDesc: true,
-    awsProvider: computed(() => state.providers.aws),
-});
-const tabState = reactive({
-    tabs: computed(() => [
-        {
-            name: EVENT_CATEGORY.issue,
-            label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.SUMMARY_ISSUE'),
-            type: 'item',
-        }, {
-            name: EVENT_CATEGORY.scheduledChange,
-            label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.SUMMARY_SCHEDULED_CHANGE'),
-            type: 'item',
-        }, {
-            name: EVENT_CATEGORY.accountNotification,
-            label: i18n.t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.SUMMARY_NOTIFICATION'),
-            type: 'item',
-        },
-    ]),
-    activeTab: EVENT_CATEGORY.issue,
-});
-
-/* util */
-const summaryLinkFormatter = (category) => {
-    const filters: ConsoleFilter[] = [];
-    const status = ['open'];
-    if (category === EVENT_CATEGORY.scheduledChange) status.push('upcoming');
-    filters.push({ k: 'data.event_type_category', o: '=', v: category });
-    filters.push({ k: 'data.status_code', o: '=', v: status });
-
-    return {
-        name: ASSET_INVENTORY_ROUTE_V1.CLOUD_SERVICE.DETAIL._NAME,
-        query: {
-            filters: queryHelper.setFilters(filters).rawQueryStrings,
-        },
-        params: {
-            provider: 'aws',
-            group: CLOUD_SERVICE_GROUP,
-            name: CLOUD_SERVICE_NAME,
-        },
-    };
-};
-
-/* api */
-const getCount = async () => {
-    try {
-        state.countData = await SpaceConnector.client.statistics.topic.phdCountByType({
-            project_id: props.projectId,
-            period: EVENT_PERIOD,
-            workspace_id: storeState.currentWorkspaceId,
-        });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    }
-};
-const getEvents = async () => {
-    try {
-        state.loading = true;
-        getEventsApiQuery
-            .setSort(state.sortBy, state.sortDesc)
-            .setPage(state.pageStart, state.pageLimit)
-            .setFilters([{ v: state.search }]);
-        const res = await SpaceConnector.client.statistics.topic.phdEvents({
-            project_id: props.projectId,
-            event_type_category: tabState.activeTab,
-            query: getEventsApiQuery.data,
-            period: EVENT_PERIOD,
-            workspace_id: storeState.currentWorkspaceId,
-        });
-
-        state.totalCount = res.total_count;
-        state.data = res.results.map((d) => {
-            const startTime = dayjs.tz(dayjs(d.start_time).utc(), state.timezone).format('YYYY-MM-DD HH:mm:ss');
-            const lastUpdateTime = dayjs.tz(dayjs(d.last_update_time).utc(), state.timezone).format('YYYY-MM-DD HH:mm:ss');
-            return {
-                event: {
-                    name: d.event_title,
-                    to: getProperRouteLocation(referenceRouter(d.resource_id, { resource_type: 'inventory.CloudService' })),
-                },
-                region_code: d.region_code,
-                start_time: startTime,
-                last_update_time: lastUpdateTime,
-                affected_resources: d.affected_resources,
-            };
-        });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        state.data = [];
-    } finally {
-        state.loading = false;
-    }
-};
-
-/* event */
-const onChange = () => {
-    nextTick(async () => {
-        await getEvents();
-    });
-};
-
-watch(() => tabState.activeTab, () => {
-    getEvents();
-}, { immediate: false });
-
-/* init */
-(async () => {
-    await Promise.allSettled([
-        getEvents(), getCount(),
-    ]);
-})();
-</script>
-
-<template>
-    <div class="project-summary-personal-health-dashboard-widget">
-        <template v-if="state.awsProvider">
-            <div class="title">
-                <span :style="{ color: state.awsProvider ? state.awsProvider.color : '' }">AWS </span>
-                <span>{{ $t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.TITLE') }}</span>
-            </div>
-
-            <div class="summary-wrapper"
-                 :style="{ color: state.awsProvider ? state.awsProvider.color : '' }"
-            >
-                <div v-for="(data, index) in state.summaryData"
-                     :key="index"
-                     class="summary"
-                     :class="{active: tabState.activeTab === data.name}"
-                     @click="tabState.activeTab = data.name"
-                >
-                    <p-link :to="summaryLinkFormatter(data.name)"
-                            class="count"
-                            highlight
-                    >
-                        {{ numberFormatter(data.count, { notation: 'compact' }) }}
-                    </p-link>
-                    <span class="label">{{ data.label }}</span>
-                    <span class="date">{{ data.date }}</span>
-                </div>
-            </div>
-
-            <widget-layout>
-                <p-toolbox-table :loading="state.loading"
-                                 :fields="state.fields"
-                                 :items="state.data"
-                                 :sort-by.sync="state.sortBy"
-                                 :sort-desc.sync="state.sortDesc"
-                                 :search-text.sync="state.search"
-                                 :placeholder="$t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.PLACEHOLDER')"
-                                 :page-size-changeable="false"
-                                 sortable
-                                 class="search-table"
-                                 @change="onChange"
-                >
-                    <template #col-event-format="{ value }">
-                        <p-link :to="value.to"
-                                :action-icon="ACTION_ICON.EXTERNAL_LINK"
-                                highlight
-                        >
-                            {{ value.name }}
-                        </p-link>
-                    </template>
-                    <template #col-region_code-format="{ value }">
-                        <span>{{ state.regions[value]?.name || value }}</span>
-                    </template>
-                    <template #col-start_time-format="{ value }">
-                        <span>{{ value }}</span>
-                    </template>
-                    <template #col-affected_resources-format="{ value }">
-                        <div v-if="value.length > 0">
-                            <div v-for="(resource, index) in value"
-                                 :key="index"
-                                 class="affected-resources-wrapper"
-                            >
-                                <template v-if="resource.entity_type === 'account'">
-                                    <span class="label">{{ $t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.ACCOUNT_ID') }} : </span>
-                                    <span class="value">{{ resource.aws_account_id }}</span>
-                                </template>
-                                <template v-else>
-                                    <p-tooltip :contents="resource.entity_value">
-                                        <p-link :action-icon="ACTION_ICON.INTERNAL_LINK"
-                                                new-tab
-                                                :to="getProperRouteLocation(referenceRouter(resource.entity_value, { resource_type: 'inventory.CloudService' }))"
-                                                class="affected-resource-link"
-                                                highlight
-                                        >
-                                            {{ resource.entity_value }}
-                                        </p-link>
-                                    </p-tooltip>
-                                </template>
-                            </div>
-                        </div>
-                        <div v-else />
-                    </template>
-                    <template #no-data-format>
-                        {{ $t('COMMON.WIDGETS.PERSONAL_HEALTH_DASHBOARD.NO_DATA') }}
-                    </template>
-                </p-toolbox-table>
-            </widget-layout>
-        </template>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.project-summary-personal-health-dashboard-widget {
-    .title {
-        font-size: 1.5rem;
-        line-height: 1.4;
-        padding-top: 0.5rem;
-        margin-bottom: 0.75rem;
-    }
-    .widget-layout {
-        @apply block border border-gray-200 rounded-md;
-        padding: 0;
-    }
-}
-.summary-wrapper {
-    @apply flex;
-    margin-bottom: -1px;
-    .summary {
-        @apply flex-grow border border-gray-200 bg-white rounded-tr-lg rounded-tl-lg;
-        margin-right: 0.375rem;
-        max-width: 15.25rem;
-        cursor: pointer;
-        padding: 0.625rem 1rem;
-        &:last-child {
-            @apply m-0;
-        }
-        &.active {
-            box-shadow: inset 0 3px currentColor;
-            border-bottom-color: theme('colors.white');
-        }
-        .count {
-            font-size: 1.125rem;
-            padding-right: 0.375rem;
-        }
-        .label {
-            @apply text-gray-900;
-            font-size: 0.875rem;
-            font-weight: bold;
-        }
-        .date {
-            @apply text-gray-500;
-            display: block;
-            font-size: 0.75rem;
-            line-height: 1.2;
-            padding-top: 0.25rem;
-        }
-    }
-}
-
-.search-table {
-    @apply bg-white;
-    height: 18.75rem;
-    border-width: 0;
-    .affected-resources-wrapper {
-        display: flex;
-        width: 10rem;
-        line-height: 1.4;
-        flex-wrap: wrap;
-        padding-bottom: 0.5rem;
-        &:first-child {
-            padding-top: 0.5rem;
-        }
-        .label {
-            @apply text-gray-600;
-        }
-    }
-}
-
-/* custom design-system component - p-link */
-.affected-resource-link {
-    :deep(.p-link) {
-        .text {
-            @apply truncate;
-            width: 10rem;
-            display: inline-block;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectSummaryServiceAccountsWidget.vue b/apps/web/src/services/project/components/ProjectSummaryServiceAccountsWidget.vue
deleted file mode 100644
index c12afc7347..0000000000
--- a/apps/web/src/services/project/components/ProjectSummaryServiceAccountsWidget.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<script lang="ts" setup>
-import {
-    computed, reactive, watch,
-} from 'vue';
-import type { Location } from 'vue-router';
-
-import { isEmpty } from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { PDataTable } from '@cloudforet/mirinae';
-import { byteFormatter } from '@cloudforet/utils';
-
-import { i18n } from '@/translations';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-
-import { arrayToQueryString, primitiveToQueryString } from '@/lib/router-query-string';
-
-import WidgetLayout from '@/common/components/layouts/WidgetLayout.vue';
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
-import type { CloudServiceMainPageUrlQuery } from '@/services/asset-inventory-v1/types/cloud-service-page-type';
-
-
-const DATA_TYPE = {
-    SERVER: 'SERVER',
-    DATABASE: 'DATABASE',
-    STORAGE: 'STORAGE',
-} as const;
-enum CLOUD_SERVICE_LABEL {
-    SERVER = 'Server',
-    DATABASE = 'Database',
-    STORAGE = 'Storage',
-}
-
-interface TableColumnData {
-    label?: string;
-    count?: number;
-    color?: string;
-    to: Location;
-}
-interface Item {
-    [key: string]: TableColumnData;
-}
-interface Props {
-    projectId?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-    projectId: '',
-});
-const allReferenceStore = useAllReferenceStore();
-const userWorkspaceStore = useUserWorkspaceStore();
-const storeState = reactive({
-    currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-});
-const state = reactive({
-    loading: true,
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-    items: [] as Item[],
-    fields: computed(() => [
-        { name: 'provider', label: i18n.t('COMMON.WIDGETS.SERVICE_ACCOUNT_TABLE.PROVIDER') },
-        { name: 'service_account', label: i18n.t('COMMON.WIDGETS.SERVICE_ACCOUNT_TABLE.ACCOUNT_NAME') },
-        { name: 'server', label: i18n.t('COMMON.WIDGETS.SERVICE_ACCOUNT_TABLE.SERVER') },
-        { name: 'database', label: i18n.t('COMMON.WIDGETS.SERVICE_ACCOUNT_TABLE.DATABASE') },
-        { name: 'storage', label: i18n.t('COMMON.WIDGETS.SERVICE_ACCOUNT_TABLE.STORAGE') },
-    ]),
-});
-
-/* Util */
-const getLocation = (type, provider, serviceAccountId) => {
-    const query: CloudServiceMainPageUrlQuery = {
-        provider: primitiveToQueryString(provider),
-        service: CLOUD_SERVICE_LABEL[type],
-        service_account: arrayToQueryString([serviceAccountId]),
-        project: arrayToQueryString([props.projectId]),
-    };
-
-    const location: Location = {
-        name: ASSET_INVENTORY_ROUTE_V1.CLOUD_SERVICE._NAME,
-        query,
-    };
-    return location;
-};
-const getConvertedData = (rawData): Item[] => rawData.map((item) => ({
-    provider: {
-        label: state.providers[item.provider]?.label,
-        color: state.providers[item.provider]?.color,
-        to: {
-            name: ASSET_INVENTORY_ROUTE_V1.SERVICE_ACCOUNT._NAME,
-            query: { provider: item.provider },
-        },
-    },
-    service_account: {
-        label: item.service_account_name,
-        to: {
-            name: ASSET_INVENTORY_ROUTE_V1.SERVICE_ACCOUNT._NAME,
-            query: {
-                provider: item.provider,
-                filters: arrayToQueryString([item.service_account_id]),
-            },
-        },
-    },
-    server: {
-        count: item.server_count || 0,
-        to: getLocation(DATA_TYPE.SERVER, item.provider, item.service_account_id),
-    },
-    database: {
-        count: item.database_count || 0,
-        to: getLocation(DATA_TYPE.DATABASE, item.provider, item.service_account_id),
-    },
-    storage: {
-        count: byteFormatter(item.storage_size) || 0,
-        to: getLocation(DATA_TYPE.STORAGE, item.provider, item.service_account_id),
-    },
-}));
-
-/* api */
-const getData = async () => {
-    state.loading = true;
-    try {
-        const { results } = await SpaceConnector.client.statistics.topic.serviceAccountSummary({
-            project_id: props.projectId,
-            workspace_id: storeState.currentWorkspaceId,
-        });
-        state.items = getConvertedData(results);
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        state.items = [];
-    } finally {
-        state.loading = false;
-    }
-};
-
-/* Watcher */
-watch(() => state.providers, (providers) => {
-    if (!isEmpty(providers)) getData();
-}, { immediate: true });
-</script>
-
-<template>
-    <widget-layout :title="$t('COMMON.WIDGETS.SERVICE_ACCOUNT_TABLE.TITLE')"
-                   class="project-summary-service-accounts-widget"
-    >
-        <p-data-table :fields="state.fields"
-                      :sortable="false"
-                      :selectable="false"
-                      :bordered="false"
-                      :loading="state.loading"
-                      :items="state.items"
-        >
-            <template #col-provider-format="{ value }">
-                <router-link :to="value.to"
-                             class="link-text"
-                             :style="{color: value.color}"
-                >
-                    {{ value.label }}
-                </router-link>
-            </template>
-            <template #col-service_account-format="{ value }">
-                <router-link :to="value.to"
-                             class="link-text"
-                >
-                    {{ value.label }}
-                </router-link>
-            </template>
-            <template #col-server-format="{ value }">
-                <router-link :to="value.to"
-                             class="link-text"
-                >
-                    {{ value.count }}
-                </router-link>
-            </template>
-            <template #col-database-format="{ value }">
-                <router-link :to="value.to"
-                             class="link-text"
-                >
-                    {{ value.count }}
-                </router-link>
-            </template>
-            <template #col-storage-format="{ value }">
-                <router-link :to="value.to"
-                             class="link-text"
-                >
-                    {{ value.count }}
-                </router-link>
-            </template>
-        </p-data-table>
-    </widget-layout>
-</template>
-
-<style lang="postcss" scoped>
-.project-summary-service-accounts-widget {
-    /* custom design-system component - p-data-table */
-    :deep(.p-data-table) {
-        @apply rounded-xs;
-        min-height: 5rem;
-        margin-top: 0.75rem;
-
-        th {
-            @apply bg-gray-100 text-gray-400;
-            height: 1.5rem;
-            border: none;
-            font-size: 0.75rem;
-            font-weight: bold;
-        }
-        td {
-            height: 2rem;
-            .link-text {
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectSummaryTrustedAdvisorWidget.vue b/apps/web/src/services/project/components/ProjectSummaryTrustedAdvisorWidget.vue
deleted file mode 100644
index 0bd855004f..0000000000
--- a/apps/web/src/services/project/components/ProjectSummaryTrustedAdvisorWidget.vue
+++ /dev/null
@@ -1,334 +0,0 @@
-<script lang="ts" setup>
-import {
-    computed, reactive,
-} from 'vue';
-
-import { findKey } from 'lodash';
-
-import { QueryHelper } from '@cloudforet/core-lib/query';
-import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { PI } from '@cloudforet/mirinae';
-
-import { i18n } from '@/translations';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CloudServiceTypeReferenceMap } from '@/store/reference/cloud-service-type-reference-store';
-import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-
-import { arrayToQueryString } from '@/lib/router-query-string';
-
-import WidgetLayout from '@/common/components/layouts/WidgetLayout.vue';
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { green, red, yellow } from '@/styles/colors';
-
-import { ASSET_INVENTORY_ROUTE_V1 } from '@/services/asset-inventory-v1/routes/route-constant';
-import type { CloudServiceDetailPageUrlQuery } from '@/services/asset-inventory-v1/types/cloud-service-page-type';
-
-
-const TRUSTED_ADVISOR = 'Check';
-enum STATUS {
-    error = 'error',
-    warning = 'warning',
-    ok = 'ok',
-}
-enum CATEGORY {
-    costOptimizing = 'cost_optimizing',
-    performance = 'performance',
-    security = 'security',
-    faultTolerance = 'fault_tolerance',
-    serviceLimits = 'service_limits',
-}
-
-const CLOUD_SERVICE_GROUP = 'TrustedAdvisor';
-const CLOUD_SERVICE_NAME = 'Check';
-const ERROR_COLOR = red[500];
-const WARNING_COLOR = yellow[500];
-const OK_COLOR = green[500];
-
-interface Props {
-    projectId?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-    projectId: '',
-});
-
-const queryHelper = new QueryHelper();
-
-const userWorkspaceStore = useUserWorkspaceStore();
-const allReferenceStore = useAllReferenceStore();
-
-const storeState = reactive({
-    currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-});
-const state = reactive({
-    loading: false,
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-    cloudServiceTypes: computed<CloudServiceTypeReferenceMap>(() => allReferenceStore.getters.cloudServiceType),
-    trustedAdvisorId: computed<string>(() => {
-        const trustedAdvisorId = findKey(state.cloudServiceTypes, { name: TRUSTED_ADVISOR });
-        return trustedAdvisorId || '';
-    }),
-    legends: computed(() => ([
-        {
-            name: STATUS.error,
-            label: i18n.t('COMMON.WIDGETS.TRUSTED_ADVISOR.LABEL_ERROR'),
-            color: ERROR_COLOR,
-        },
-        {
-            name: STATUS.warning,
-            label: i18n.t('COMMON.WIDGETS.TRUSTED_ADVISOR.LABEL_WARNING'),
-            color: WARNING_COLOR,
-        },
-        {
-            name: STATUS.ok,
-            label: i18n.t('COMMON.WIDGETS.TRUSTED_ADVISOR.LABEL_OK'),
-            color: OK_COLOR,
-        },
-    ])),
-    categories: computed(() => ([
-        {
-            label: i18n.t('COMMON.WIDGETS.TRUSTED_ADVISOR.LABEL_COST_OPTIMIZATION'),
-            name: CATEGORY.costOptimizing,
-            icon: 'ic_coin-filled',
-        },
-        {
-            label: i18n.t('COMMON.WIDGETS.TRUSTED_ADVISOR.LABEL_PERFORMANCE'),
-            name: CATEGORY.performance,
-            icon: 'ic_performance-filled',
-        },
-        {
-            label: i18n.t('COMMON.WIDGETS.TRUSTED_ADVISOR.LABEL_SECURITY'),
-            name: CATEGORY.security,
-            icon: 'ic_lock-filled',
-        },
-        {
-            label: i18n.t('COMMON.WIDGETS.TRUSTED_ADVISOR.LABEL_FAULT_TOLERANCE'),
-            name: CATEGORY.faultTolerance,
-            icon: 'ic_spanner-filled',
-        },
-        {
-            label: i18n.t('COMMON.WIDGETS.TRUSTED_ADVISOR.LABEL_SERVICE_LIMITS'),
-            name: CATEGORY.serviceLimits,
-            icon: 'ic_limit-filled',
-        },
-    ])),
-    data: null as any,
-    awsProvider: computed(() => state.providers.aws),
-});
-
-const linkFormatter = (category, status) => {
-    if (!state.trustedAdvisorId) return '';
-
-    const filters: ConsoleFilter[] = [];
-    filters.push({ k: 'data.status', o: '=', v: status });
-    filters.push({ k: 'data.category', o: '=', v: category });
-
-    const query: CloudServiceDetailPageUrlQuery = {
-        filters: queryHelper.setFilters(filters).rawQueryStrings,
-        project: arrayToQueryString([props.projectId]),
-    };
-
-    return {
-        name: ASSET_INVENTORY_ROUTE_V1.CLOUD_SERVICE.DETAIL._NAME,
-        query,
-        params: {
-            provider: 'aws',
-            group: CLOUD_SERVICE_GROUP,
-            name: CLOUD_SERVICE_NAME,
-        },
-    };
-};
-const countFormatter = (category, status) => {
-    const categoryData = state.data[category];
-    if (!categoryData) return 0;
-    const statusData = categoryData[`${status}_count`];
-    if (!statusData) return 0;
-    return statusData;
-};
-const getData = async () => {
-    state.loading = true;
-    try {
-        const res = await SpaceConnector.client.statistics.topic.trustedAdvisorByProject({
-            project_id: props.projectId,
-            workspace_id: storeState.currentWorkspaceId,
-        });
-        state.data = res[props.projectId];
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        state.data = null;
-    } finally {
-        state.loading = false;
-    }
-};
-
-const init = () => {
-    getData();
-};
-init();
-</script>
-
-<template>
-    <widget-layout class="project-summary-trusted-advisor-widget">
-        <template v-if="state.awsProvider"
-                  #title
-        >
-            <div class="title">
-                <span :style="{ color: state.awsProvider ? state.awsProvider.color : '' }">AWS </span>
-                <span>{{ $t('COMMON.WIDGETS.TRUSTED_ADVISOR.TITLE') }}</span>
-            </div>
-        </template>
-        <template v-if="state.awsProvider">
-            <div v-if="state.loading" />
-            <div v-else-if="!state.data"
-                 class="no-data-wrapper"
-            >
-                <img alt="no-data-image"
-                     src="@/assets/images/illust_star.svg"
-                >
-                <div class="text">
-                    {{ $t('COMMON.WIDGETS.TRUSTED_ADVISOR.NO_DATA') }}
-                </div>
-            </div>
-            <template v-else>
-                <div class="content-wrapper">
-                    <div v-for="(category, cIdx) in state.categories"
-                         :key="cIdx"
-                         class="data-row"
-                    >
-                        <div class="left-part">
-                            <p-i :name="category.icon"
-                                 width="0.875rem"
-                                 height="0.875rem"
-                                 color="inherit transparent"
-                            />
-                            <span class="text">{{ category.label }}</span>
-                        </div>
-                        <div class="right-part grid grid-cols-12 gap-2">
-                            <router-link v-for="(legend, lIdx) in state.legends"
-                                         :key="lIdx"
-                                         class="box col-span-4"
-                                         :class="legend.name"
-                                         :to="linkFormatter(category.name, legend.name)"
-                            >
-                                <span class="text">{{ countFormatter(category.name, legend.name) }}</span>
-                            </router-link>
-                        </div>
-                    </div>
-                </div>
-                <div class="legend-wrapper">
-                    <div v-for="(legend, index) in state.legends"
-                         :key="index"
-                         class="legend"
-                         :class="legend.name"
-                    >
-                        <div class="box" />
-                        <span class="text">{{ legend.label }}</span>
-                    </div>
-                </div>
-            </template>
-        </template>
-    </widget-layout>
-</template>
-
-<style lang="postcss" scoped>
-.project-summary-trusted-advisor-widget {
-    min-height: 18.75rem;
-}
-
-.content-wrapper {
-    margin-top: 1rem;
-    .data-row {
-        @apply text-gray-400;
-        display: flex;
-        font-size: 0.75rem;
-        padding: 6px 0;
-        .text {
-            @apply text-gray-900;
-            white-space: nowrap;
-            margin-left: 0.25rem;
-        }
-    }
-    .left-part {
-        width: 55%;
-        white-space: nowrap;
-    }
-    .right-part {
-        width: 45%;
-        .box {
-            text-align: center;
-            &:hover {
-                text-decoration: underline;
-            }
-            &.error {
-                @apply bg-coral-100 border border-red-500 text-red-500;
-                .text {
-                    @apply text-red-500;
-                }
-            }
-            &.warning {
-                @apply bg-yellow-100 border border-yellow-500 text-yellow-500;
-            }
-            &.ok {
-                @apply bg-green-100 border border-green-500 text-green-500;
-            }
-        }
-        .text {
-            margin-left: 0;
-        }
-    }
-}
-.legend-wrapper {
-    margin-top: 1rem;
-    .legend {
-        display: flex;
-        padding: 0.25rem 0;
-        &.error {
-            .box {
-                @apply bg-coral-100 border border-red-500;
-            }
-            .text {
-                @apply text-red-500;
-            }
-        }
-        &.warning {
-            .box {
-                @apply bg-yellow-100 border border-yellow-500;
-            }
-            .text {
-                @apply text-yellow-500;
-            }
-        }
-        &.ok {
-            .box {
-                @apply bg-green-100 border border-green-500;
-            }
-            .text {
-                @apply text-green-500;
-            }
-        }
-        .box {
-            @apply border rounded-xs;
-            width: 10px;
-            height: 10px;
-            margin-right: 0.375rem;
-        }
-        .text {
-            @apply text-gray-700;
-            font-size: 0.75rem;
-            line-height: 1;
-        }
-    }
-}
-.no-data-wrapper {
-    @apply flex w-full h-full flex-col justify-center items-center;
-    .text {
-        @apply mt-5 text-center text-primary2;
-        font-weight: bold;
-        font-size: 0.875rem;
-        line-height: 1.6;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectTagsInputGroup.vue b/apps/web/src/services/project/components/ProjectTagsInputGroup.vue
deleted file mode 100644
index 4f2625d999..0000000000
--- a/apps/web/src/services/project/components/ProjectTagsInputGroup.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<script setup lang="ts">
-import {
-    computed, reactive, watch,
-} from 'vue';
-
-import { isEmpty } from 'lodash';
-
-import {
-    PButton, PFieldGroup, PIconButton, PTextInput,
-} from '@cloudforet/mirinae';
-
-import { i18n } from '@/translations';
-
-import type {
-    ValidationData,
-} from '@/common/components/forms/pairs-input-group/type';
-import type { Tag, TagItem } from '@/common/modules/tags/type';
-
-const dictToArray = (dict): TagItem[] => Object.keys(dict).map((k) => ({ key: k, value: dict[k] }));
-
-const arrayToDict = (arr: TagItem[]): Tag => {
-    const dict = {};
-    if (Array.isArray(arr)) {
-        arr.forEach(({ key, value }) => {
-            if (key !== '') dict[key] = value;
-        });
-    }
-    return dict;
-};
-
-const props = withDefaults(defineProps<{
-    tags?: Tag;
-    disabled?: boolean;
-    isValid?: boolean;
-    showValidation?: boolean;
-}>(), {
-    tags: () => ({}),
-    disabled: false,
-    isValid: true,
-    showValidation: false,
-});
-const emit = defineEmits<{(e: 'update:is-valid', value: boolean): void;
-    (e: 'update-tags', tags: Tag): void;
-}>();
-const state = reactive({
-    items: dictToArray(props.tags) as TagItem[],
-    keyValidations: computed<ValidationData[]>(() => {
-        const keys = state.items.map((item) => item.key);
-        return state.items.map((item) => {
-            const validation: ValidationData = { isValid: true, message: '' };
-            if (!item.key || !item.key.toString().length) {
-                validation.isValid = false;
-                validation.message = i18n.t('COMMON.COMPONENTS.TAGS.INVALID_NO_KEY');
-            } else {
-                const isDuplicated = keys.filter((k) => k === item.key).length > 1;
-                if (isDuplicated) {
-                    validation.isValid = false;
-                    validation.message = i18n.t('COMMON.COMPONENTS.TAGS.INVALID_DUPLICATED_KEY');
-                }
-            }
-            return validation;
-        });
-    }),
-    valueValidations: computed<ValidationData[]>(() => state.items.map((item) => {
-        const validation: ValidationData = { isValid: true, message: '' };
-        if (!item.value || !item.value.toString().length) {
-            validation.isValid = false;
-            validation.message = i18n.t('COMMON.COMPONENTS.TAGS.INVALID_NO_VALUE');
-        }
-        return validation;
-    })),
-    isAllValid: computed(() => {
-        const isKeyValid = state.keyValidations.every((d) => d.isValid);
-        const isValueValid = state.valueValidations.every((d) => d.isValid);
-        return isKeyValid && isValueValid;
-    }),
-});
-
-/* Event */
-const handleAddPair = () => {
-    state.items.push({ key: '', value: '' });
-};
-const handleDeletePair = (idx: number) => {
-    const _items = [...state.items];
-    _items.splice(idx, 1);
-    state.items = _items;
-};
-
-const handleInputKey = (idx, val) => {
-    const _items = [...state.items];
-    _items[idx].key = val;
-    state.items = _items;
-};
-const handleInputValue = (idx, val) => {
-    const _items = [...state.items];
-    _items[idx].value = val;
-    state.items = _items;
-};
-
-/* Watcher */
-watch(() => state.isAllValid, (after) => {
-    emit('update:is-valid', after);
-}, { immediate: true });
-watch(() => state.items, (items) => {
-    emit('update-tags', arrayToDict(items));
-});
-const stopTagInit = watch(() => props.tags, (tags) => {
-    if (!isEmpty(tags)) state.items = dictToArray(tags);
-    if (stopTagInit) stopTagInit();
-});
-
-</script>
-
-<template>
-    <div class="project-tags-input-group">
-        <slot name="add-button"
-              :disabled="props.disabled"
-              :handle-add-pair="handleAddPair"
-        >
-            <p-button class="add-button"
-                      style-type="secondary"
-                      icon-left="ic_plus_bold"
-                      @click="handleAddPair"
-            >
-                <span>{{ $t('COMMON.TAGS.ADD') }}</span>
-            </p-button>
-        </slot>
-        <div>
-            <div v-for="(item, idx) in state.items"
-                 :key="idx"
-                 class="tags-group"
-            >
-                <p-field-group :invalid-text="state.keyValidations[idx].message"
-                               :invalid="props.showValidation && !state.keyValidations[idx].isValid"
-                               class="input-box key"
-                >
-                    <template #default="{invalid}">
-                        <p-text-input :value="item.key"
-                                      :invalid="invalid"
-                                      :placeholder="$t('COMMON.COMPONENTS.TAGS.KEY')"
-                                      :disabled="props.disabled"
-                                      @update:value="handleInputKey(idx, ...arguments)"
-                        />
-                    </template>
-                </p-field-group>
-                <span class="split">:</span>
-                <p-field-group :invalid-text="state.valueValidations[idx].message"
-                               :invalid="props.showValidation && !state.valueValidations[idx].isValid"
-                               class="input-box value"
-                >
-                    <template #default="{invalid}">
-                        <p-text-input :value="item.value"
-                                      :invalid="invalid"
-                                      :placeholder="$t('COMMON.COMPONENTS.TAGS.VALUE')"
-                                      :disabled="props.disabled"
-                                      @update:value="handleInputValue(idx, ...arguments)"
-                        />
-                    </template>
-                </p-field-group>
-                <p-icon-button name="ic_delete"
-                               :disabled="props.disabled"
-                               @click="handleDeletePair(idx)"
-                />
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.project-tags-input-group {
-    .add-button {
-        margin: 1rem 0 1.5rem;
-        .p-i-icon {
-            margin-right: 0.5rem;
-        }
-    }
-    .tags-group {
-        display: flex;
-        margin-bottom: 1rem;
-
-        .input-box {
-            display: inline-block;
-            margin-bottom: 0;
-            width: 100%;
-
-            .p-text-input {
-                width: 100%;
-                &.invalid {
-                    @apply border border-alert;
-                }
-            }
-        }
-        .split {
-            padding-left: 0.125rem;
-            padding-right: 0.125rem;
-            line-height: 2rem;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/components/ProjectTagsModal.vue b/apps/web/src/services/project/components/ProjectTagsModal.vue
deleted file mode 100644
index b02058bf7f..0000000000
--- a/apps/web/src/services/project/components/ProjectTagsModal.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import {
-    reactive, computed, onMounted,
-} from 'vue';
-
-import { isEmpty } from 'lodash';
-
-import {
-    PButtonModal,
-} from '@cloudforet/mirinae';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-import type { Tag } from '@/common/modules/tags/type';
-
-import ProjectTagsInputGroup from '@/services/project/components/ProjectTagsInputGroup.vue';
-
-interface Props {
-    visible?: boolean;
-    projectId?: string;
-    tags?: Tag;
-    loading?: boolean;
-}
-const props = withDefaults(defineProps<Props>(), {
-    visible: false,
-    projectId: undefined,
-    tags: () => ({}),
-    loading: false,
-});
-
-const emit = defineEmits<{(e: 'update', tags: Tag): void;
-    (e: 'close'): void;
-}>();
-
-const state = reactive({
-    loading: false,
-    proxyVisible: useProxyValue('visible', props, emit),
-    newTags: { },
-    isTagsValid: false,
-    noItem: computed(() => isEmpty(state.newTags)),
-});
-
-/* Api */
-const handleSaveTags = async () => {
-    if (!state.isTagsValid) return;
-    emit('update', state.newTags);
-};
-
-/* Event */
-const handleUpdateTags = (tags?: Tag) => {
-    state.newTags = tags;
-};
-
-/* Init */
-onMounted(() => {
-    state.newTags = { ...props.tags };
-});
-</script>
-
-<template>
-    <p-button-modal
-        class="project-tags-modal"
-        modal-body-id="project-tags"
-        :header-title="$t('PROJECT.DETAIL.UPDATE_TAG')"
-        :fade="true"
-        :backdrop="true"
-        size="sm"
-        :visible.sync="state.proxyVisible"
-        :disabled="!state.isTagsValid"
-        @confirm="handleSaveTags"
-    >
-        <template #body>
-            <p class="description">
-                {{ $t('PROJECT.DETAIL.UPDATE_TAG_DESC') }}
-            </p>
-            <project-tags-input-group :tags="state.newTags"
-                                      :disabled="props.loading"
-                                      show-validation
-                                      :is-valid.sync="state.isTagsValid"
-                                      @update-tags="handleUpdateTags"
-            />
-        </template>
-    </p-button-modal>
-</template>
-
-<style lang="postcss" scoped>
-.project-tags-modal {
-    .description {
-        @apply text-paragraph-md text-gray-900;
-        white-space: pre-wrap;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/composables/use-project-favorite.ts b/apps/web/src/services/project/composables/use-project-favorite.ts
deleted file mode 100644
index 5e39e266d1..0000000000
--- a/apps/web/src/services/project/composables/use-project-favorite.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { reactive, computed, toRef } from 'vue';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-
-import {
-    convertProjectConfigToReferenceData,
-    convertProjectGroupConfigToReferenceData,
-} from '@/lib/helper/config-data-helper';
-
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
-
-import { useProjectPageStore } from '@/services/project/stores/project-page-store';
-
-
-export const useProjectFavorite = () => {
-    const allReferenceStore = useAllReferenceStore();
-    const projectPageStore = useProjectPageStore();
-    const projectPageGetters = projectPageStore.getters;
-    const userWorkspaceStore = useUserWorkspaceStore();
-    const userWorkspaceGetters = userWorkspaceStore.getters;
-    const favoriteStore = useFavoriteStore();
-    const favoriteGetters = favoriteStore.getters;
-
-    const storeState = reactive({
-        projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-        projects: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-        favoriteProjectGroups: computed(() => favoriteGetters.projectGroupItems),
-        favoriteProjects: computed(() => favoriteGetters.projectItems),
-        groupId: computed(() => projectPageGetters.groupId),
-        currentWorkspaceId: computed(() => userWorkspaceGetters.currentWorkspaceId as string),
-    });
-    const state = reactive({
-        favoriteItems: computed<FavoriteItem[]>(() => [
-            ...convertProjectGroupConfigToReferenceData(storeState.favoriteProjectGroups, storeState.projectGroups),
-            ...convertProjectConfigToReferenceData(storeState.favoriteProjects, storeState.projects),
-        ].filter((i) => !i.isDeleted)),
-    });
-
-    const beforeFavoriteRoute = async (item: FavoriteItem) => {
-        if (item.itemType === FAVORITE_TYPE.PROJECT_GROUP) {
-            if (storeState.groupId !== item.itemId) {
-                await projectPageStore.selectNode(item.itemId);
-            } else await projectPageStore.selectNode();
-        } else {
-            await projectPageStore.selectNode();
-        }
-    };
-    const handleDeleteFavorite = (item: FavoriteItem) => {
-        favoriteStore.deleteFavorite({
-            itemType: item.itemType,
-            workspaceId: userWorkspaceGetters.currentWorkspaceId || '',
-            itemId: item.itemId,
-        });
-    };
-
-    return {
-        favoriteItems: toRef(state, 'favoriteItems'),
-        beforeFavoriteRoute,
-        handleDeleteFavorite,
-    };
-};
diff --git a/apps/web/src/services/project/composables/use-project-tree-data.ts b/apps/web/src/services/project/composables/use-project-tree-data.ts
deleted file mode 100644
index 56089300e6..0000000000
--- a/apps/web/src/services/project/composables/use-project-tree-data.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import type { Ref } from 'vue';
-import {
-    computed,
-    nextTick, onMounted, reactive, toRef, watch,
-} from 'vue';
-import type { Location } from 'vue-router';
-
-import { get } from 'lodash';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-import { useProjectTreeStore } from '@/services/project/stores/project-tree-store';
-import type { TreeNode, TreeDisplayMap } from '@/services/project/tree/type';
-
-interface ParentGroupItem {
-    name: string;
-    id: string;
-}
-
-interface UseProjectTreeDataReturnType {
-    treeData: Ref<TreeNode[]>;
-    treeDisplayMap: Ref<TreeDisplayMap>;
-    parentGroupItems: Ref<ParentGroupItem[]>;
-    fetchData: (item: TreeNode) => void;
-    setSelectedNodeId: (id: string) => void;
-}
-
-interface ProjectDataType {
-    name: string;
-    type: 'PROJECT'|'PROJECT_GROUP';
-    id: string;
-    parentGroupId?: string;
-}
-
-export const useProjectTreeData = (): UseProjectTreeDataReturnType => {
-    const allReferenceStore = useAllReferenceStore();
-    const projectTreeStore = useProjectTreeStore();
-    const projectTreeState = projectTreeStore.state;
-
-    const storeState = reactive({
-        projectGroup: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-        project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    });
-    const state = reactive({
-        projectData: computed<ProjectDataType[]>(() => Object.entries(storeState.project).map(([key, value]) => ({
-            name: value.name,
-            type: 'PROJECT',
-            id: key,
-            parentGroupId: value.data.groupInfo?.id,
-        }))),
-        projectGroupData: computed<ProjectDataType[]>(() => Object.entries(storeState.projectGroup).map(([key, value]) => ({
-            name: value.name,
-            type: 'PROJECT_GROUP',
-            id: key,
-            parentGroupId: value.data.parentGroupInfo?.id,
-        }))),
-        treeData: [] as TreeNode[],
-        selectedTreeNodeId: '',
-        parentGroupItems: [] as ParentGroupItem[],
-    });
-    const fetchProjectGroupList = (parentGroupId?: string): ProjectDataType[] => state.projectGroupData.filter((projectGroup) => projectGroup.parentGroupId === parentGroupId);
-    const fetchProjectList = (parentGroupId?: string): ProjectDataType[] => state.projectData.filter((project) => project.parentGroupId === parentGroupId);
-
-
-    const updateTreeData = (nodes: TreeNode[], targetId: string, children?: TreeNode[], loading?: boolean): TreeNode[] => nodes.map((node) => {
-        if (node.data.id === targetId) {
-            if (children) {
-                node.children = children;
-            }
-            if (loading !== undefined) {
-                node.loading = loading;
-            }
-        } else if (node.children) {
-            node.children = updateTreeData(node.children, targetId, children, loading);
-        }
-        return node;
-    });
-
-
-    /* Method */
-    const fetchData = (item: TreeNode) => {
-        const projectGroupId = item.data.id;
-        if (!projectGroupId) return;
-
-        state.treeData = updateTreeData(state.treeData, projectGroupId, undefined, true);
-
-        const childrenGroups = fetchProjectGroupList(projectGroupId);
-        const childrenProjects = fetchProjectList(projectGroupId);
-
-        state.treeData = updateTreeData(state.treeData, projectGroupId, convertItemsToTreeData([...childrenGroups, ...childrenProjects], item.depth + 1), false);
-    };
-
-    const findSelectedNode = async (itemId: string, itemType: ProjectDataType['type']) => {
-        const openPaths = await getParentItem(itemId, itemType);
-        openPaths.map(async (path) => {
-            if (path === itemId) return;
-            await setOpenStateById(path);
-        });
-
-        // Set parent group paths, when selecting current group item. For breadcrumbs
-        state.parentGroupItems = openPaths.map((id) => ({
-            name: storeState.projectGroup[id].name,
-            id,
-        }));
-    };
-
-    const setSelectedNodeId = (id: string) => {
-        state.selectedTreeNodeId = id;
-    };
-
-
-    /* Helper */
-    const convertItemsToTreeData = (items: ProjectDataType[], depth: number): TreeNode[] => items.map((item) => ({
-        id: item.id,
-        depth,
-        isOpen: false,
-        data: {
-            ...item,
-            to: convertProjectTreeNodeToLocation(item),
-        },
-        children: item.type === 'PROJECT' ? undefined : convertItemsToTreeData([], depth + 1),
-    }));
-    const convertProjectTreeNodeToLocation = (item: ProjectDataType): Location => (item.type === 'PROJECT' ? {
-        name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-        params: {
-            id: item.id,
-        },
-    } : {
-        name: PROJECT_ROUTE._NAME,
-        params: {
-            projectGroupId: item.id,
-        },
-    });
-    const setOpenStateById = async (nodeId: string) => {
-        projectTreeState.treeDisplayMap = {
-            ...projectTreeState.treeDisplayMap,
-            [nodeId]: {
-                isOpen: true,
-            },
-        };
-        await nextTick();
-    };
-
-    const getParentItem = async (itemId: string, itemType: ProjectDataType['type'], openItems: string[] = []): Promise<string[]> => {
-        if (itemType === 'PROJECT') {
-            const parentProjectInfo = state.projectData.find((project) => project.id === itemId);
-            if (parentProjectInfo) openItems.unshift(parentProjectInfo.id);
-
-            const parentItemId = get(parentProjectInfo, 'parentGroupId');
-            if (parentItemId) await getParentItem(parentItemId, 'PROJECT_GROUP', openItems);
-        } else {
-            const parentProjectGroupInfo = state.projectGroupData.find((projectGroup) => projectGroup.id === itemId);
-            if (parentProjectGroupInfo) openItems.unshift(parentProjectGroupInfo.id);
-
-            const parentItemId = get(parentProjectGroupInfo, 'parentGroupId');
-            if (parentItemId) await getParentItem(parentItemId, 'PROJECT_GROUP', openItems);
-        }
-        return openItems;
-    };
-
-    /* Init */
-    const init = (): void => {
-        const initialProjectGroup = fetchProjectGroupList();
-        const initialProject = fetchProjectList();
-        state.treeData = convertItemsToTreeData([...initialProjectGroup, ...initialProject], 0);
-    };
-
-    onMounted(async () => {
-        await allReferenceStore.load('project_group');
-        await allReferenceStore.load('project');
-    });
-
-    // Whenever loading, creating or changing Project/ProjectGroup, update initial treeData
-    watch([() => storeState.projectGroup, () => storeState.project], () => {
-        init();
-    }, { immediate: true });
-
-    watch([() => state.selectedTreeNodeId, () => state.treeData], async ([id]) => {
-        const itemType = id.startsWith('pg-') ? 'PROJECT_GROUP' : 'PROJECT';
-        await findSelectedNode(id, itemType);
-    });
-
-    return {
-        treeData: toRef(state, 'treeData'),
-        treeDisplayMap: toRef(projectTreeState, 'treeDisplayMap'),
-        parentGroupItems: toRef(state, 'parentGroupItems'),
-        fetchData,
-        setSelectedNodeId,
-    };
-};
diff --git a/apps/web/src/services/project/composables/use-project-tree.ts b/apps/web/src/services/project/composables/use-project-tree.ts
deleted file mode 100644
index 98cc275200..0000000000
--- a/apps/web/src/services/project/composables/use-project-tree.ts
+++ /dev/null
@@ -1,267 +0,0 @@
-import { cloneDeep, get } from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import type { Query, Sort } from '@cloudforet/core-lib/space-connector/type';
-
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { ProjectGroupListParameters } from '@/schema/identity/project-group/api-verbs/list';
-import type { ProjectGroupModel } from '@/schema/identity/project-group/model';
-import type { ProjectListParameters } from '@/schema/identity/project/api-verbs/list';
-import type { ProjectModel } from '@/schema/identity/project/model';
-
-import type { ProjectTreeItemType, ProjectTreeNodeData } from '@/services/project/types/project-tree-type';
-
-
-type ProjectGroupListResponse = ListResponse<ProjectGroupModel>;
-type ProjectListResponse = ListResponse<ProjectModel>;
-type ListRequestParams = ProjectGroupListParameters | ProjectListParameters;
-export interface ProjectTreeOptions {
-    item_type: ProjectTreeItemType;
-    item_id?: string;
-    check_child?: boolean;
-    exclude_type?: ProjectTreeItemType;
-    query?: Query;
-    sort?: Sort[];
-}
-interface ProjectTreeSearchOptions {
-    item_type?: ProjectTreeItemType;
-    item_id?: string;
-    query?: Query;
-    sort?: Sort[];
-}
-interface ProjectTreeSearchResponse {
-    open_path: string[];
-}
-
-
-const fetchProjectGroupChildMap = async (groups: ProjectGroupModel[]): Promise<Record<string, boolean>> => {
-    const res = {};
-
-    const { results: allChildren } = await SpaceConnector.clientV2.identity.projectGroup.list<ProjectGroupListParameters, ProjectGroupListResponse>({
-        query: {
-            only: ['parent_group_id'],
-            filter: [{
-                k: 'parent_group_id',
-                v: groups.map((d) => d.project_group_id),
-                o: 'in',
-            }],
-        },
-    });
-
-    allChildren?.forEach((d) => {
-        if (d.parent_group_id) {
-            res[d.parent_group_id] = true;
-        }
-    });
-
-    return res;
-};
-const fetchProjectChildMap = async (groups: ProjectGroupModel[]): Promise<Record<string, boolean>> => {
-    const res: Record<string, boolean> = {};
-
-    const { results: allChildren } = await SpaceConnector.clientV2.identity.project.list<ListRequestParams, ProjectListResponse>({
-        query: {
-            only: ['project_group_id'],
-            filter: [{
-                k: 'project_group_id',
-                v: groups.map((d) => d.project_group_id),
-                o: 'in',
-            }],
-        },
-    });
-
-    allChildren?.forEach((d) => {
-        res[d.project_group_id] = true;
-    });
-
-    return res;
-};
-const getChildMap = async (groups: ProjectGroupModel[], excludeType: ProjectTreeItemType): Promise<Record<string, boolean>> => {
-    let res = {};
-
-    if (excludeType !== 'PROJECT') {
-        res = { ...res, ...await fetchProjectChildMap(groups) };
-    }
-    if (excludeType !== 'PROJECT_GROUP') {
-        res = { ...res, ...await fetchProjectGroupChildMap(groups) };
-    }
-
-    return res;
-};
-const fetchProjectGroups = async (params: ProjectTreeOptions): Promise<ProjectTreeNodeData[]> => {
-    const requestParams: ProjectGroupListParameters = {
-        query: cloneDeep(params.query) ?? {},
-    };
-
-    if (params.item_type === 'ROOT') {
-        (requestParams as Required<ListRequestParams>).query.filter = [
-            ...requestParams.query?.filter ?? [],
-            {
-                k: 'parent_group_id',
-                v: null,
-                o: 'eq',
-            },
-        ];
-    } else {
-        requestParams.parent_group_id = params.item_id;
-    }
-
-    const { results } = await SpaceConnector.clientV2.identity.projectGroup.list<ProjectGroupListParameters, ProjectGroupListResponse>(requestParams);
-    if (!results?.length) return [];
-
-    let childMap = {};
-    if (params.check_child) {
-        childMap = await getChildMap(results, params.exclude_type);
-    }
-
-    return results.map((d) => {
-        const item: ProjectTreeNodeData = {
-            id: d.project_group_id,
-            name: d.name,
-            item_type: 'PROJECT_GROUP',
-            has_child: null,
-        };
-
-        if (params.check_child) {
-            item.has_child = !!childMap[d.project_group_id];
-        }
-
-        return item;
-    });
-};
-const fetchProjects = async (params: ProjectTreeOptions): Promise<ProjectTreeNodeData[]> => {
-    const requestParams: ProjectListParameters = {
-        query: cloneDeep(params.query) ?? {},
-    };
-    if (params.item_type === 'ROOT') {
-        (requestParams as Required<ListRequestParams>).query.filter = [
-            ...requestParams.query?.filter ?? [],
-            {
-                k: 'project_group_id',
-                v: null,
-                o: 'eq',
-            },
-        ];
-    } else {
-        requestParams.project_group_id = params.item_id;
-    }
-
-    const { results } = await SpaceConnector.clientV2.identity.project.list<ProjectListParameters, ProjectListResponse>(requestParams);
-    if (!results?.length) return [];
-
-    const items: ProjectTreeNodeData[] = [];
-
-    results.forEach((itemInfo) => {
-        const item: ProjectTreeNodeData = {
-            id: itemInfo.project_id,
-            name: itemInfo.name,
-            item_type: 'PROJECT',
-            has_child: false,
-        };
-        items.push(item);
-    });
-
-    return items;
-};
-const getParentItem = async (itemId: string, itemType: ProjectTreeItemType, openItems: string[] = []): Promise<string[]> => {
-    if (itemType === 'PROJECT') {
-        const response = await SpaceConnector.clientV2.identity.project.list<ProjectListParameters, ProjectListResponse>({
-            project_id: itemId,
-        });
-
-        if (response.total_count === 1) {
-            const projectInfo = response?.results?.[0];
-            if (projectInfo) openItems.unshift(projectInfo.project_id);
-
-            const parentItemId = get(projectInfo, 'project_group_id');
-            if (parentItemId) await getParentItem(parentItemId, 'PROJECT_GROUP', openItems);
-        }
-    } else {
-        const response = await SpaceConnector.clientV2.identity.projectGroup.list<ProjectGroupListParameters, ProjectGroupListResponse>({
-            project_group_id: itemId,
-        });
-
-        if (response.total_count === 1) {
-            const projectGroupInfo = response?.results?.[0];
-            if (projectGroupInfo) openItems.unshift(projectGroupInfo.project_group_id);
-
-            const parentItemId = get(projectGroupInfo, 'parent_group_id');
-            if (parentItemId) await getParentItem(parentItemId, 'PROJECT_GROUP', openItems);
-        }
-    }
-    return openItems;
-};
-
-
-const getProjectTree = async (options: ProjectTreeOptions): Promise<ProjectTreeNodeData[]> => {
-    const _options = cloneDeep(options);
-
-    if (!options.item_type) {
-        throw new Error('Required Parameter. (key = item_type)');
-    }
-
-    if (options.item_type !== 'ROOT' && !options.item_id) {
-        throw new Error('Required Parameter. (key = item_id)');
-    }
-
-    if (!options.query) {
-        _options.query = {};
-    }
-    _options.query = { ..._options.query, minimal: true };
-
-    if (options.sort) {
-        _options.query = { ..._options.query, sort: options.sort };
-    }
-
-    const treeItems: ProjectTreeNodeData[] = [];
-
-    if (options.exclude_type !== 'PROJECT_GROUP') {
-        Array.prototype.push.apply(treeItems, await fetchProjectGroups(_options));
-    }
-    if (options.exclude_type !== 'PROJECT') {
-        Array.prototype.push.apply(treeItems, await fetchProjects(_options));
-    }
-
-    return treeItems;
-};
-const getProjectTreeSearchPath = async (options: ProjectTreeSearchOptions): Promise<ProjectTreeSearchResponse> => {
-    const _options = cloneDeep(options);
-
-    if (!options.item_type) {
-        throw new Error('Required Parameter. (key = item_type)');
-    }
-
-    if (['PROJECT_GROUP', 'PROJECT'].indexOf(options.item_type) === -1) {
-        throw new Error(`Invalid item type. (key = item_type) : ${options.item_type}`);
-    }
-
-    if (options.item_type !== 'ROOT' && !options.item_id) {
-        throw new Error('Required Parameter. (key = item_id)');
-    }
-
-    if (!options.query) {
-        _options.query = {};
-    }
-    _options.query = { ..._options.query, minimal: true };
-
-    if (options.sort) {
-        _options.query = { ..._options.query, sort: options.sort };
-    }
-
-    const response: ProjectTreeSearchResponse = {
-        open_path: [],
-    };
-
-    response.open_path = await getParentItem(
-        _options.item_id as string,
-        _options.item_type,
-    );
-
-    return response;
-};
-
-export const useProjectTree = () => ({
-    getProjectTree,
-    getProjectTreeSearchPath,
-});
-
diff --git a/apps/web/src/services/project/constants/project-summary-constant.ts b/apps/web/src/services/project/constants/project-summary-constant.ts
deleted file mode 100644
index d4acd8d1e3..0000000000
--- a/apps/web/src/services/project/constants/project-summary-constant.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const SERVICE_CATEGORY = {
-    SERVER: 'Server',
-    CONTAINER: 'Container',
-    DATABASE: 'Database',
-    NETWORKING: 'Networking',
-    STORAGE: 'Storage',
-    SECURITY: 'Security',
-    ANALYTICS: 'Analytics',
-    ALL: 'All',
-} as const;
diff --git a/apps/web/src/services/project/pages/ProjectDashboardPage.vue b/apps/web/src/services/project/pages/ProjectDashboardPage.vue
deleted file mode 100644
index 780dbb38f0..0000000000
--- a/apps/web/src/services/project/pages/ProjectDashboardPage.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<script lang="ts" setup>
-import {
-    onUnmounted,
-    reactive, ref, watch,
-} from 'vue';
-
-import { PSkeleton } from '@cloudforet/mirinae';
-
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import DashboardLabelsButton from '@/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue';
-import DashboardRefreshDropdown from '@/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue';
-import DashboardToolsetDateDropdown
-    from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue';
-import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue';
-import DashboardWidgetContainerV2
-    from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue';
-import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
-
-
-
-interface Props {
-    id: string;
-    dashboardId: string;
-}
-const props = defineProps<Props>();
-
-const dashboardStore = useDashboardStore();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailGetters = dashboardDetailStore.getters;
-const dashboardDetailState = dashboardDetailStore.state;
-const widgetContainerRef = ref<typeof DashboardWidgetContainer|null>(null);
-
-
-const state = reactive({
-    hasAlertConfig: false,
-    dashboardVariablesLoading: false,
-});
-
-
-const handleUpdateDashboardVariables = async (params) => {
-    if (!props.dashboardId) return;
-    state.dashboardVariablesLoading = true;
-    try {
-        await dashboardStore.updateDashboard(props.dashboardId, params);
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dashboardVariablesLoading = false;
-    }
-};
-const handleRefresh = async () => {
-    await dashboardDetailStore.listDashboardWidgets();
-    if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
-};
-/* api */
-const getDashboardDataAndListWidget = async (dashboardId: string) => {
-    try {
-        await dashboardDetailStore.getDashboardInfo({ dashboardId, fetchWidgets: true });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    }
-};
-
-watch(() => props.dashboardId, async (dashboardId, prevDashboardId) => {
-    if (!dashboardId || !props.id) return;
-    /* NOTE: The dashboard data is reset in first entering case */
-    if (dashboardId && !prevDashboardId) { // this includes all three cases
-        dashboardDetailStore.reset();
-    }
-    dashboardDetailStore.setProjectId(props.id);
-    await getDashboardDataAndListWidget(dashboardId);
-}, { immediate: true });
-
-onUnmounted(() => {
-    dashboardDetailStore.reset();
-});
-</script>
-
-<template>
-    <div class="project-dashboard-page">
-        <div class="dashboard-wrapper">
-            <div class="title-wrapper">
-                <p-skeleton v-if="!dashboardDetailGetters.dashboardName"
-                            width="20rem"
-                            height="1.5rem"
-                />
-                <div v-else
-                     class="dashboard-title"
-                >
-                    <p class="title">
-                        {{ dashboardDetailGetters.dashboardName }}
-                    </p>
-                    <span class="beta-mark">beta</span>
-                </div>
-                <dashboard-labels-button class="ml-4"
-                                         dashboard-id="props.dashboardId"
-                />
-            </div>
-            <div class="contents-wrapper">
-                <div class="toolset">
-                    <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
-                    <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
-                                                :loading="dashboardDetailState.loadingWidgets"
-                                                disable-interval
-                                                @refresh="handleRefresh"
-                    />
-                </div>
-                <div v-if="!dashboardDetailState.loadingDashboard"
-                     class="selectors"
-                >
-                    <dashboard-variables-v2 class="variable-selector-wrapper"
-                                            is-project-dashboard
-                                            :disable-save-button="dashboardDetailGetters.disableManageButtons"
-                                            :loading="state.dashboardVariablesLoading"
-                                            @update="handleUpdateDashboardVariables"
-                    />
-                </div>
-                <dashboard-widget-container-v2 ref="widgetContainerRef" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.project-dashboard-page {
-    .dashboard-wrapper {
-        .title-wrapper {
-            @apply flex items-center;
-            padding: 1.5rem 1rem;
-            .dashboard-title {
-                @apply flex;
-                .title {
-                    @apply text-label-xl font-bold text-gray-800;
-                }
-                .beta-mark {
-                    @apply text-coral-default;
-                    font-size: 0.625rem;
-                    cursor: default;
-                    margin-left: 0.125rem;
-                    height: 1.5rem;
-                }
-            }
-        }
-
-        .contents-wrapper {
-            @apply bg-gray-100 rounded-lg;
-            padding: 1rem 0.5rem 0.5rem;
-            margin: 0 1rem;
-            .toolset {
-                @apply flex justify-between items-center;
-            }
-            .selectors {
-                .variable-selector-wrapper {
-                    @apply flex flex-wrap gap-2;
-                    padding: 1rem 0 1.5rem;
-                    background-color: unset;
-                }
-            }
-        }
-    }
-
-    /* custom design-system component - p-heading */
-    :deep(.p-heading) {
-        .heading-wrapper {
-            line-height: unset;
-        }
-    }
-}
-</style>
-
diff --git a/apps/web/src/services/project/pages/ProjectDetailPage.vue b/apps/web/src/services/project/pages/ProjectDetailPage.vue
deleted file mode 100644
index f7fa0bafb3..0000000000
--- a/apps/web/src/services/project/pages/ProjectDetailPage.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import {
-    onUnmounted,
-} from 'vue';
-
-import { useProjectDetailPageStore } from '@/services/project/stores/project-detail-page-store';
-
-
-const projectDetailPageStore = useProjectDetailPageStore();
-
-onUnmounted(() => {
-    projectDetailPageStore.reset();
-});
-
-</script>
-
-<template>
-    <div class="project-detail-page">
-        <router-view />
-    </div>
-</template>
diff --git a/apps/web/src/services/project/pages/ProjectDetailPageLegacy.vue b/apps/web/src/services/project/pages/ProjectDetailPageLegacy.vue
deleted file mode 100644
index b0e83ba2d4..0000000000
--- a/apps/web/src/services/project/pages/ProjectDetailPageLegacy.vue
+++ /dev/null
@@ -1,324 +0,0 @@
-<script setup lang="ts">
-import {
-    computed, onUnmounted, reactive, watch,
-} from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { find, isEmpty } from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PBadge, PButtonModal, PPaneLayout, PIconButton, PI,
-} from '@cloudforet/mirinae';
-import type { Route } from '@cloudforet/mirinae/types/navigation/breadcrumbs/type';
-
-
-import type { ProjectDeleteParameters } from '@/schema/identity/project/api-verbs/delete';
-import type { ProjectModel } from '@/schema/identity/project/model';
-import { ALERT_STATE } from '@/schema/monitoring/alert/constants';
-import { i18n } from '@/translations';
-
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceItem, ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-import { referenceRouter } from '@/lib/reference/referenceRouter';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useProperRouteLocation } from '@/common/composables/proper-route-location';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
-import { RECENT_TYPE } from '@/common/modules/navigations/type';
-
-import { peacock } from '@/styles/colors';
-
-import ProjectFormModal from '@/services/project/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/components/ProjectMainProjectGroupMoveModal.vue';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-import { useProjectDetailPageStore } from '@/services/project/stores/project-detail-page-store';
-import { useProjectPageStore } from '@/services/project/stores/project-page-store';
-
-
-interface Props {
-    id?: string;
-}
-const props = defineProps<Props>();
-const route = useRoute();
-const router = useRouter();
-
-const gnbStore = useGnbStore();
-const appContextStore = useAppContextStore();
-const allReferenceStore = useAllReferenceStore();
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
-const projectDetailPageStore = useProjectDetailPageStore();
-const projectDetailPageState = projectDetailPageStore.state;
-const projectDetailPageGetters = projectDetailPageStore.getters;
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const recentStore = useRecentStore();
-const userWorkspaceStore = useUserWorkspaceStore();
-const { getProperRouteLocation } = useProperRouteLocation();
-
-const storeState = reactive({
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
-    favoriteItems: computed(() => favoriteGetters.projectItems),
-});
-const state = reactive({
-    item: computed<ProjectModel|undefined>(() => projectDetailPageState.currentProject),
-    projectGroupId: computed<string|undefined>(() => state.item?.project_group_id),
-    projectGroupInfo: computed<ProjectGroupReferenceItem>(() => storeState.projectGroups?.[state.projectGroupId] ?? {}),
-    pageNavigation: computed<Route[]>(() => {
-        const results: Route[] = [
-            { name: i18n.t('MENU.PROJECT') as string, to: { name: PROJECT_ROUTE._NAME } },
-        ];
-        if (!isEmpty(state.projectGroupInfo)) {
-            results.push({
-                name: state.projectGroupInfo.name,
-                to: referenceRouter(state.projectGroupId, { resource_type: 'identity.ProjectGroup' }),
-            });
-        }
-        results.push({ name: state.item?.name });
-        return results;
-    }),
-    counts: computed(() => ({
-        TRIGGERED: find(projectDetailPageState.alertCounts, { state: ALERT_STATE.TRIGGERED })?.total ?? 0,
-    })),
-    projectGroupMoveModalVisible: false,
-    favoriteOptions: computed<FavoriteOptions>(() => ({
-        type: FAVORITE_TYPE.PROJECT,
-        id: projectDetailPageState.projectId,
-    })),
-    isHeaderVisible: computed<boolean>(() => !route.name),
-    isStarred: computed(() => storeState.favoriteItems.some((item) => item.itemId === projectDetailPageState.projectId)),
-});
-
-// Member modal
-const formState = reactive({
-    projectDeleteFormVisible: false,
-    projectEditFormVisible: false,
-    headerTitle: '' as TranslateResult,
-    themeColor: undefined as string | undefined,
-    modalContent: '' as TranslateResult,
-    modalLoading: false,
-});
-
-const openProjectDeleteForm = () => {
-    formState.projectDeleteFormVisible = true;
-    formState.headerTitle = i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_TITLE');
-    formState.themeColor = 'alert';
-    formState.modalContent = i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_CONTENT');
-};
-const handleOpenProjectGroupMoveModal = () => {
-    state.projectGroupMoveModalVisible = true;
-};
-
-const projectDeleteFormConfirm = async () => {
-    if (formState.modalLoading) return;
-
-    formState.modalLoading = true;
-    try {
-        await SpaceConnector.clientV2.identity.project.delete<ProjectDeleteParameters>({
-            project_id: projectDetailPageState.projectId as string,
-        });
-        await recentStore.deleteRecent({
-            type: RECENT_TYPE.PROJECT,
-            itemId: projectDetailPageState.projectId as string,
-        });
-        showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_DELETE_PROJECT'), '');
-        router.push({ name: PROJECT_ROUTE._NAME });
-        const isFavoriteItem = favoriteGetters.projectItems.find((item) => item.itemId === projectDetailPageState.projectId);
-        if (isFavoriteItem) {
-            await favoriteStore.deleteFavorite({
-                itemType: FAVORITE_TYPE.PROJECT,
-                workspaceId: storeState.currentWorkspaceId || '',
-                itemId: projectDetailPageState.projectId as string,
-            });
-        }
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_DELETE_PROJECT'));
-    } finally {
-        formState.modalLoading = false;
-        formState.projectDeleteFormVisible = false;
-    }
-};
-
-const handleConfirmProjectForm = (data: ProjectModel) => {
-    projectDetailPageStore.setProject(data);
-};
-
-const handleConfirmProjectGroupMoveModal = () => {
-    projectDetailPageStore.getProject();
-};
-const handleGoBackProjectLanding = () => {
-    router.push(getProperRouteLocation({ name: PROJECT_ROUTE._NAME, params: { projectGroupId: state.projectGroupId } }));
-};
-
-/* Watchers */
-watch(() => projectDetailPageState.projectId, async (projectId) => {
-    if (projectId) {
-        await Promise.allSettled([
-            projectDetailPageStore.getProject(projectId),
-            projectDetailPageStore.getAlertCounts(projectId),
-        ]);
-    }
-});
-
-
-watch([
-    () => props.id,
-    () => appContextStore.getters.globalGrantLoading,
-], ([id, globalGrantLoading]) => {
-    if (!globalGrantLoading) projectDetailPageStore.setProjectId(id);
-}, { immediate: true });
-
-watch(() => projectDetailPageState.projectId, (projectId) => {
-    gnbStore.setId(projectId);
-}, { immediate: true });
-watch(() => state.favoriteOptions, (favoriteOptions) => {
-    gnbStore.setFavoriteItemId(favoriteOptions);
-}, { immediate: true });
-
-onUnmounted(() => {
-    projectDetailPageStore.reset();
-});
-</script>
-
-<template>
-    <div class="project-detail-page">
-        <div v-if="state.isHeaderVisible"
-             class="top-wrapper"
-        >
-            <p-icon-button class="back-button"
-                           name="ic_arrow-left"
-                           @click="handleGoBackProjectLanding"
-            />
-            <p-pane-layout class="flex-grow">
-                <div class="header-container">
-                    <div class="title-wrapper">
-                        <p-i name="ic_document-filled"
-                             :color="peacock[600]"
-                             width="1.25rem"
-                             height="1.25rem"
-                        /><span class="title-text">{{ state.item?.name }}</span>
-                        <favorite-button :item-id="projectDetailPageState.projectId"
-                                         :favorite-type="FAVORITE_TYPE.PROJECT"
-                                         scale="0.8"
-                        />
-                    </div>
-                    <div class="button-wrapper">
-                        <template v-if="projectPageState.isWorkspaceOwner">
-                            <p-icon-button name="ic_settings"
-                                           class="edit-btn"
-                                           size="sm"
-                                           @click="projectPageStore.openProjectFormModal()"
-                            />
-                            <p-icon-button name="ic_move"
-                                           size="sm"
-                                           style-type="transparent"
-                                           @click="handleOpenProjectGroupMoveModal"
-                            />
-                            <p-icon-button name="ic_delete"
-                                           class="delete-btn"
-                                           size="sm"
-                                           @click="openProjectDeleteForm"
-                            />
-                        </template>
-                        <p-badge v-if="projectDetailPageGetters.projectType === 'PRIVATE'"
-                                 class="ml-4 flex-shrink-0"
-                                 style-type="gray100"
-                                 badge-type="subtle"
-                        >
-                            <div class="badge-content-wrapper">
-                                <p-i name="ic_lock-filled"
-                                     width="0.75rem"
-                                     height="0.75rem"
-                                     color="inherit"
-                                />
-                                <span class="truncate">{{ $t('PROJECT.DETAIL.INVITE_ONLY') }}</span>
-                            </div>
-                        </p-badge>
-                    </div>
-                </div>
-            </p-pane-layout>
-        </div>
-        <router-view />
-        <p-button-modal :header-title="formState.headerTitle"
-                        :centered="true"
-                        size="sm"
-                        :fade="true"
-                        :backdrop="true"
-                        :visible.sync="formState.projectDeleteFormVisible"
-                        :theme-color="formState.themeColor"
-                        :loading="formState.modalLoading"
-                        @confirm="projectDeleteFormConfirm"
-        >
-            <template #body>
-                <p class="delete-modal-content">
-                    {{ formState.modalContent }}
-                </p>
-            </template>
-        </p-button-modal>
-
-        <project-form-modal
-            v-if="projectPageState.projectFormModalVisible"
-            :visible="projectPageState.projectFormModalVisible"
-            :project-group-id="state.projectGroupId"
-            :project="state.item"
-            @confirm="handleConfirmProjectForm"
-            @update:visible="projectPageStore.setProjectFormModalVisible"
-        />
-        <project-main-project-group-move-modal v-if="state.projectGroupMoveModalVisible"
-                                               :visible.sync="state.projectGroupMoveModalVisible"
-                                               is-project
-                                               :target-id="projectDetailPageState.projectId"
-                                               @confirm="handleConfirmProjectGroupMoveModal"
-        />
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.project-detail-page {
-    height: 100%;
-    margin-top: -0.25rem;
-}
-.top-wrapper {
-    max-width: 85.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    .header-container {
-        @apply flex gap-4 items-center;
-        padding: 0.75rem 1rem;
-        .title-wrapper {
-            @apply text-label-lg font-bold text-peacock-800 truncate;
-            display: flex;
-            align-items: center;
-
-            .title-text {
-                margin-left: 0.375rem;
-                line-height: 1.25rem;
-                padding-right: 0.375rem;
-            }
-        }
-
-        .button-wrapper {
-            @apply inline-flex items-center;
-            .badge-content-wrapper {
-                @apply text-gray-700;
-                display: flex;
-                align-content: center;
-                gap: 0.25rem;
-            }
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/pages/ProjectDetailTabPage.vue b/apps/web/src/services/project/pages/ProjectDetailTabPage.vue
deleted file mode 100644
index 5cec41f51b..0000000000
--- a/apps/web/src/services/project/pages/ProjectDetailTabPage.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<script setup lang="ts">
-import {
-    computed, onMounted, onUnmounted, reactive, watch,
-} from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { isEmpty } from 'lodash';
-
-import {
-    PDataLoader,
-} from '@cloudforet/mirinae';
-import type { Route } from '@cloudforet/mirinae/types/navigation/breadcrumbs/type';
-import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
-
-import type { ProjectModel } from '@/schema/identity/project/model';
-import { i18n } from '@/translations';
-
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceItem, ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import { useUserStore } from '@/store/user/user-store';
-
-import { referenceRouter } from '@/lib/reference/referenceRouter';
-
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-
-import { BACKGROUND_COLOR } from '@/styles/colorsets';
-
-import ProjectDetailTab from '@/services/project/components/ProjectDetailTab.vue';
-import ProjectDetailTabHeader from '@/services/project/components/ProjectDetailTabHeader.vue';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-import { useProjectDetailPageStore } from '@/services/project/stores/project-detail-page-store';
-import type { WebhookType } from '@/services/project/types/project-alert-type';
-
-interface Props {
-    id?: string;
-}
-const props = defineProps<Props>();
-const route = useRoute();
-
-const gnbStore = useGnbStore();
-const appContextStore = useAppContextStore();
-const allReferenceStore = useAllReferenceStore();
-const projectDetailPageStore = useProjectDetailPageStore();
-const projectDetailPageState = projectDetailPageStore.state;
-const userWorkspaceStore = useUserWorkspaceStore();
-const dashboardStore = useDashboardStore();
-const userStore = useUserStore();
-
-const storeState = reactive({
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
-    language: computed(() => userStore.state.language),
-    dashboardList: computed(() => dashboardStore.state.publicDashboardItems),
-    folderList: computed(() => dashboardStore.state.publicFolderItems),
-});
-const state = reactive({
-    item: computed<ProjectModel|undefined>(() => projectDetailPageState.currentProject),
-    projectGroupId: computed<string|undefined>(() => state.item?.project_group_id),
-    projectGroupInfo: computed<ProjectGroupReferenceItem>(() => storeState.projectGroups?.[state.projectGroupId] ?? {}),
-    pageNavigation: computed<Route[]>(() => {
-        const results: Route[] = [
-            { name: i18n.t('MENU.PROJECT') as string, to: { name: PROJECT_ROUTE._NAME } },
-        ];
-        if (!isEmpty(state.projectGroupInfo)) {
-            results.push({
-                name: state.projectGroupInfo.name,
-                to: referenceRouter(state.projectGroupId, { resource_type: 'identity.ProjectGroup' }),
-            });
-        }
-        results.push({ name: state.item?.name });
-        return results;
-    }),
-    projectGroupMoveModalVisible: false,
-    favoriteOptions: computed<FavoriteOptions>(() => ({
-        type: FAVORITE_TYPE.PROJECT,
-        id: projectDetailPageState.projectId,
-    })),
-    webhookTypeList: [] as WebhookType[],
-});
-const singleItemTabState = reactive({
-    tabs: computed<TabItem[]>(() => [
-        {
-            name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-            label: i18n.t('PROJECT.DETAIL.TAB_SUMMARY'),
-        },
-        ...(singleItemTabState.dashboardTabs.length
-            ? [
-                {
-                    name: 'divider',
-                    tabType: 'divider',
-                },
-                ...singleItemTabState.dashboardTabs,
-            ]
-            : []),
-    ]),
-    dashboardTabs: computed(() => {
-        const projectDashboardItems = storeState.dashboardList.filter((dashboard) => dashboard.project_id === '*' && dashboard.version !== '1.0');
-        const projectFolderItems = storeState.folderList.filter((folder) => folder.project_id === '*');
-
-        const folderTabs = projectFolderItems.map((folder) => ({
-            name: folder.folder_id,
-            label: folder.name,
-            tabType: 'folder',
-            icon: 'ic_folder',
-            subItems: projectDashboardItems.filter((dashboard) => dashboard.folder_id === folder.folder_id).map((dashboard) => ({
-                name: dashboard.dashboard_id,
-                label: dashboard.name,
-                icon: 'ic_service_dashboard',
-            })),
-        }));
-        const dashboardTabs = projectDashboardItems.filter((dashboard) => !dashboard.folder_id).map((dashboard) => ({
-            name: dashboard.dashboard_id,
-            label: dashboard.name,
-            icon: 'ic_service_dashboard',
-        }));
-        return [
-            ...folderTabs,
-            ...dashboardTabs,
-        ];
-    }),
-    activeTab: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-});
-
-const listProjectDashboard = async () => {
-    await dashboardStore.load();
-};
-
-/* Watchers */
-watch(() => projectDetailPageState.projectId, async (projectId) => {
-    if (projectId) {
-        await Promise.allSettled([
-            projectDetailPageStore.getProject(projectId),
-            projectDetailPageStore.getAlertCounts(projectId),
-        ]);
-    }
-});
-watch(() => route.name, (routeName) => {
-    const flattenTabs = singleItemTabState.tabs.reduce((acc, tab) => {
-        if (tab?.subItems) {
-            acc.push(...tab.subItems);
-        } else {
-            acc.push(tab);
-        }
-        return acc;
-    }, [] as TabItem[]);
-    const exactRoute = route.matched.find((d) => flattenTabs.find((tab) => tab.name === d.name));
-    if (routeName === PROJECT_ROUTE.DETAIL.TAB.DASHBOARD._NAME) {
-        singleItemTabState.activeTab = route.params.dashboardId;
-    } else {
-        singleItemTabState.activeTab = exactRoute?.name || PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME;
-    }
-}, { immediate: true });
-watch([
-    () => props.id,
-    () => appContextStore.getters.globalGrantLoading,
-], ([id, globalGrantLoading]) => {
-    if (!globalGrantLoading) projectDetailPageStore.setProjectId(id);
-}, { immediate: true });
-watch([() => singleItemTabState.activeTab, () => state.item], () => {
-    gnbStore.setBreadcrumbs(state.pageNavigation);
-});
-watch(() => projectDetailPageState.projectId, (projectId) => {
-    gnbStore.setId(projectId);
-}, { immediate: true });
-watch(() => state.favoriteOptions, (favoriteOptions) => {
-    gnbStore.setFavoriteItemId(favoriteOptions);
-}, { immediate: true });
-
-onMounted(async () => {
-    state.webhookTypeList = await projectDetailPageStore.getListWebhookType();
-    await listProjectDashboard();
-});
-onUnmounted(() => {
-    projectDetailPageStore.reset();
-    dashboardStore.reset();
-});
-</script>
-
-<template>
-    <div class="project-detail-tab-page">
-        <project-detail-tab-header :id="props.id"
-                                   :key="`project-detail-tab-header-${props.id}`"
-        />
-        <p-data-loader class="detail-tab-content"
-                       :loading="projectDetailPageState.loading"
-                       :loader-backdrop-color="BACKGROUND_COLOR"
-        >
-            <div>
-                <project-detail-tab :id="props.id"
-                                    :item="state.item"
-                                    :tabs="singleItemTabState.tabs"
-                                    :active-tab.sync="singleItemTabState.activeTab"
-                />
-            </div>
-        </p-data-loader>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.project-detail-tab-page {
-    height: 100%;
-    .detail-tab-content {
-        margin-top: 1rem;
-    }
-}
-
-/* custom design-system component - p-data-loader */
-:deep(.p-data-loader) {
-    .data-wrapper {
-        overflow-y: unset;
-    }
-    .col-type {
-        display: inline-flex;
-        align-items: center;
-        .name {
-            margin-top: -0.125rem;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/pages/ProjectMainPage.vue b/apps/web/src/services/project/pages/ProjectMainPage.vue
deleted file mode 100644
index ba92119ac9..0000000000
--- a/apps/web/src/services/project/pages/ProjectMainPage.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
-import {
-    computed, onUnmounted, reactive, ref, watch,
-} from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import {
-    PHeading, PButton, PContextMenu, PIconButton, PHeadingLayout,
-} from '@cloudforet/mirinae';
-import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
-
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-import { useUserStore } from '@/store/user/user-store';
-
-import { MENU_ID } from '@/lib/menu/config';
-
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-
-import { indigo, peacock } from '@/styles/colors';
-
-import ProjectGroupMemberManagementModal from '@/services/project/components/ProjectGroupMemberManagementModal.vue';
-import ProjectMain from '@/services/project/components/ProjectMain.vue';
-import ProjectMainDeleteModal from '@/services/project/components/ProjectMainDeleteModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/components/ProjectMainProjectGroupMoveModal.vue';
-import { useProjectPageStore } from '@/services/project/stores/project-page-store';
-import { useProjectTreeStore } from '@/services/project/stores/project-tree-store';
-
-
-const gnbStore = useGnbStore();
-// const gnbGetters = gnbStore.getters;
-const allReferenceStore = useAllReferenceStore();
-const projectTreeStore = useProjectTreeStore();
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
-
-const menuRef = ref<any|null>(null);
-const targetRef = ref<HTMLElement | null>(null);
-const route = useRoute();
-const userStore = useUserStore();
-
-const storeState = reactive({
-    userId: computed(() => userStore.state.userId),
-    groupName: computed(() => storeState.projectGroups[state.currentProjectGroupId]?.name),
-    projects: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-});
-
-const state = reactive({
-    currentProjectGroupId: computed(() => route.params.projectGroupId),
-    createMenuVisible: false,
-    createDropdownMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
-        {
-            name: 'project',
-            label: i18n.t('PROJECT.LANDING.PROJECT') as string,
-            icon: 'ic_document-filled',
-            iconColor: peacock[600],
-        },
-        {
-            name: 'projectGroup',
-            label: i18n.t('PROJECT.LANDING.PROJECT_GROUP') as string,
-            icon: 'ic_folder-filled',
-            iconColor: indigo[500],
-        },
-    ])),
-    projectGroupModalVisible: false,
-    favoriteOptions: computed<FavoriteOptions>(() => ({
-        type: route.params.projectGroupId ? FAVORITE_TYPE.PROJECT_GROUP : FAVORITE_TYPE.MENU,
-        id: route.params.projectGroupId ? state.currentProjectGroupId : MENU_ID.PROJECT,
-    })),
-    projectGroupMemberManagementModalVisible: false,
-    projectGroupMemberCount: computed<number|undefined>(() => storeState.projectGroups?.[state.currentProjectGroupIds]?.data.users?.length),
-});
-
-onClickOutside(menuRef, () => {
-    state.createMenuVisible = false;
-});
-
-/* Event */
-const handleClickProjectGroupEditButton = () => {
-    projectPageStore.setProjectGroupFormUpdateMode(true);
-    projectPageStore.setProjectGroupFormVisible(true);
-};
-const handleClickProjectGroupDeleteButton = () => {
-    projectPageStore.setProjectDeleteModalVisible(true);
-};
-const handleOpenProjectGroupMoveModal = () => {
-    projectPageStore.setProjectGroupMoveModalVisible(true);
-};
-
-/* Handling Forms */
-const handleClickAddProjectGroupMember = () => {
-    state.projectGroupMemberManagementModalVisible = true;
-};
-const handleClickCreateButton = () => {
-    state.createMenuVisible = !state.createMenuVisible;
-};
-const handleSelectCreateMenu = (item: SelectDropdownMenuItem) => {
-    projectPageStore.setCurrentSelectedProjectGroupId(state.currentProjectGroupId);
-    if (item.name === 'project') {
-        projectPageStore.setProjectFormModalVisible(true);
-    } else if (item.name === 'projectGroup') {
-        projectPageStore.setProjectGroupFormUpdateMode(false);
-        projectPageStore.setProjectGroupFormVisible(true);
-    }
-};
-const handleUpdateProjectGroupMoveModal = (visible: boolean) => {
-    projectPageStore.setProjectGroupMoveModalVisible(visible);
-    if (projectPageState.currentSelectedProjectGroupId && !visible) {
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-    }
-    if (projectPageState.currentSelectedProjectId && !visible) {
-        projectPageStore.setCurrentSelectedProjectId(undefined);
-    }
-};
-const handleUpdateDeleteModalVisible = (visible: boolean) => {
-    projectPageStore.setProjectDeleteModalVisible(visible);
-    if (projectPageState.currentSelectedProjectGroupId && !visible) {
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-    }
-    if (projectPageState.currentSelectedProjectId && !visible) {
-        projectPageStore.setCurrentSelectedProjectId(undefined);
-    }
-};
-
-const handleRefreshTree = () => {
-    projectTreeStore.refreshProjectTree();
-};
-
-watch(() => state.favoriteOptions, (favoriteOptions) => {
-    gnbStore.setFavoriteItemId(favoriteOptions);
-    if (!route.params.projectGroupId) {
-        gnbStore.setBreadcrumbs([]);
-    }
-}, { immediate: true });
-
-onUnmounted(() => {
-    projectTreeStore.disposeProjectTree();
-});
-</script>
-
-<template>
-    <div class="page-wrapper">
-        <p-heading-layout class="mb-6">
-            <template #heading>
-                <p-heading :title="state.currentProjectGroupId ? storeState.projectGroups[state.currentProjectGroupId]?.name : $t('PROJECT.LANDING.ALL_PROJECTS')">
-                    <template #title-right-extra>
-                        <div v-if="state.currentProjectGroupId"
-                             class="title-right-button-wrapper"
-                        >
-                            <template v-if="projectPageState.isWorkspaceOwner">
-                                <p-icon-button name="ic_edit-text"
-                                               style-type="transparent"
-                                               @click="handleClickProjectGroupEditButton"
-                                />
-                                <p-icon-button name="ic_move"
-                                               style-type="transparent"
-                                               @click="handleOpenProjectGroupMoveModal"
-                                />
-                                <p-icon-button name="ic_delete"
-                                               style-type="transparent"
-                                               @click="handleClickProjectGroupDeleteButton"
-                                />
-                            </template>
-                        </div>
-                    </template>
-                </p-heading>
-            </template>
-            <template #extra>
-                <p-button v-if="state.currentProjectGroupId"
-                          style-type="tertiary"
-                          icon-left="ic_member"
-                          @click="handleClickAddProjectGroupMember"
-                >
-                    <span>{{ $t('PROJECT.LANDING.GROUP_MEMBER') }}</span>
-                    <span v-if="state.projectGroupMemberCount"
-                          class="pl-1"
-                    >({{ state.projectGroupMemberCount }})</span>
-                </p-button>
-                <div v-if="projectPageState.isWorkspaceOwner"
-                     class="create-button-wrapper"
-                >
-                    <p-button ref="targetRef"
-                              icon-left="ic_plus_bold"
-                              @click="handleClickCreateButton"
-                    >
-                        {{ $t('PROJECT.LANDING.CREATE') }}
-                    </p-button>
-                    <p-context-menu v-show="state.createMenuVisible"
-                                    ref="menuRef"
-                                    class="create-context-menu"
-                                    no-select-indication
-                                    :menu="state.createDropdownMenuItems"
-                                    @select="handleSelectCreateMenu"
-                    />
-                </div>
-            </template>
-        </p-heading-layout>
-        <project-main />
-        <project-group-member-management-modal v-if="state.projectGroupMemberManagementModalVisible"
-                                               :visible.sync="state.projectGroupMemberManagementModalVisible"
-                                               :project-group-id="state.currentProjectGroupId"
-        />
-        <project-main-delete-modal v-if="projectPageState.projectDeleteModalVisible"
-                                   :visible="projectPageState.projectDeleteModalVisible"
-                                   :is-project="!!projectPageState.currentSelectedProjectId"
-                                   :target-id="projectPageState.currentSelectedProjectId || projectPageState.currentSelectedProjectGroupId || state.currentProjectGroupId"
-                                   :skip-redirect="!!projectPageState.currentSelectedProjectId || !!projectPageState.currentSelectedProjectGroupId"
-                                   @update:visible="handleUpdateDeleteModalVisible"
-                                   @confirm="handleRefreshTree"
-        />
-        <project-main-project-group-move-modal v-if="projectPageState.projectGroupMoveModalVisible"
-                                               :visible="projectPageState.projectGroupMoveModalVisible"
-                                               :is-project="!!projectPageState.currentSelectedProjectId"
-                                               :target-id="projectPageState.currentSelectedProjectId || projectPageState.currentSelectedProjectGroupId || state.currentProjectGroupId"
-                                               @update:visible="handleUpdateProjectGroupMoveModal"
-                                               @confirm="handleRefreshTree"
-        />
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-/* right contents */
-.page-wrapper {
-    @apply flex flex-col w-full h-full;
-}
-
-.title-right-button-wrapper {
-    display: inline-flex;
-    align-items: center;
-}
-.create-context-menu {
-    @apply absolute;
-    top: 100%;
-    right: 0;
-    z-index: 10;
-    width: max-content;
-}
-.create-button-wrapper {
-    @apply relative inline-block;
-    height: 2rem;
-}
-
-.parents-info {
-    @apply flex items-center text-gray-900;
-    min-height: 1rem;
-    margin-bottom: 0.25rem;
-    .group-name {
-        @apply inline-flex items-center text-xs;
-    }
-    .text {
-        @apply opacity-50;
-        &.link {
-            @apply cursor-pointer;
-            &:hover {
-                @apply opacity-100;
-            }
-        }
-    }
-}
-
-.card-container {
-    @apply flex-grow;
-}
-
-/* custom design-system component - p-heading */
-:deep(.p-heading) {
-    @apply border-none;
-    padding-bottom: 0;
-}
-</style>
diff --git a/apps/web/src/services/project/pages/ProjectSummaryPage.vue b/apps/web/src/services/project/pages/ProjectSummaryPage.vue
deleted file mode 100644
index 9d0227b49a..0000000000
--- a/apps/web/src/services/project/pages/ProjectSummaryPage.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<script lang="ts" setup>
-import {
-    reactive,
-} from 'vue';
-
-import { PI, PIconButton } from '@cloudforet/mirinae';
-
-import DailyUpdates from '@/common/modules/widgets/DailyUpdates.vue';
-
-import { gray, indigo } from '@/styles/colors';
-
-import CloudServices from '@/services/asset-inventory-v1/components/CloudServices.vue';
-import ProjectSummaryAllSummaryWidget from '@/services/project/components/ProjectSummaryAllSummaryWidget.vue';
-import ProjectSummaryBillingWidget from '@/services/project/components/ProjectSummaryBillingWidget.vue';
-import ProjectSummaryPersonalHealthDashboardWidget from '@/services/project/components/ProjectSummaryPersonalHealthDashboardWidget.vue';
-import ProjectSummaryServiceAccountsWidget from '@/services/project/components/ProjectSummaryServiceAccountsWidget.vue';
-import ProjectSummaryTrustedAdvisorWidget from '@/services/project/components/ProjectSummaryTrustedAdvisorWidget.vue';
-
-
-
-interface Props {
-    id: string;
-}
-const props = defineProps<Props>();
-const state = reactive({
-    deprecatedNotiVisible: true,
-});
-
-const handleClickNotiClose = () => {
-    state.deprecatedNotiVisible = false;
-};
-</script>
-
-<template>
-    <div class="project-summary-page">
-        <div v-if="state.deprecatedNotiVisible"
-             class="deprecated-notification"
-        >
-            <div class="contents-wrapper">
-                <p-i name="ic_info-circle"
-                     width="1.25rem"
-                     height="1.25rem"
-                     :color="indigo[500]"
-                />
-                <div>
-                    <p class="title">
-                        {{ $t('PROJECT.DETAIL.SUMMARY.DEPRECATED_TITLE') }}
-                    </p>
-                    <p class="description">
-                        {{ $t('PROJECT.DETAIL.SUMMARY.DEPRECATED_DESC') }}
-                    </p>
-                </div>
-            </div>
-            <p-icon-button name="ic_close"
-                           size="sm"
-                           width="1.5rem"
-                           height="1.5rem"
-                           :color="gray[400]"
-                           @click="handleClickNotiClose"
-            />
-        </div>
-        <project-summary-all-summary-widget
-            :key="`project-summary-all-summary-widget-${props.id}`"
-            class="col-span-12"
-            :project-id="props.id"
-        />
-        <div class="col-span-12 lg:col-span-9 grid grid-cols-12 left-part">
-            <!--            <project-v1-summary-billing-widget-->
-            <!--                class="col-span-12"-->
-            <!--                :project-v1-id="props.id"-->
-            <!--            />-->
-            <project-summary-billing-widget
-                :key="`project-summary-billing-widget-${props.id}`"
-                class="col-span-12"
-                :project-id="props.id"
-            />
-            <project-summary-personal-health-dashboard-widget
-                :key="`project-summary-personal-health-dashboard-widget-${props.id}`"
-                class="col-span-12"
-                :project-id="props.id"
-            />
-            <project-summary-service-accounts-widget
-                :key="`project-summary-service-accounts-widget-${props.id}`"
-                class="col-span-12 service-accounts-table"
-                :project-id="props.id"
-            />
-        </div>
-        <div class="col-span-12 lg:col-span-3 grid grid-cols-12 right-part">
-            <daily-updates :key="`daily-updates-${props.id}`"
-                           class="col-span-12 daily-updates"
-                           :project-id="props.id"
-            />
-            <cloud-services :key="`cloud-services-${props.id}`"
-                            class="col-span-12 cloud-services"
-                            :more-info="true"
-                            :project-id="props.id"
-            />
-            <project-summary-trusted-advisor-widget
-                :key="`project-summary-trusted-advisor-widget-${props.id}`"
-                class="col-span-12 trusted-advisor"
-                :project-id="props.id"
-            />
-        </div>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-/* custom widget-layout */
-:deep(.widget-layout) {
-    .title {
-        font-size: 1rem;
-        font-weight: bold;
-        line-height: 1.6;
-    }
-}
-
-.project-summary-page {
-    grid-gap: 1rem;
-    padding: 2rem 1rem 0;
-
-    .deprecated-notification {
-        @apply bg-indigo-100 rounded-md flex w-full justify-between;
-        padding: 1rem 0.5rem;
-        margin-bottom: 1.5rem;
-
-        .contents-wrapper {
-            @apply flex gap-1;
-
-            .title {
-                @apply text-label-lg font-bold text-indigo-600;
-            }
-            .description {
-                @apply text-paragraph-md text-gray-900;
-            }
-        }
-    }
-
-    .left-part, .right-part {
-        display: grid;
-        grid-auto-rows: max-content;
-        row-gap: 1rem;
-    }
-
-    .cloud-services {
-        @apply border border-gray-200 rounded-md;
-        min-height: 25rem;
-        max-height: 35rem;
-
-        @screen tablet {
-            height: 26rem;
-        }
-    }
-
-    .trusted-advisor {
-        @apply border border-gray-200 rounded-md;
-    }
-
-    .service-accounts-table {
-        @apply border border-gray-200 rounded-md;
-    }
-
-    .daily-updates {
-        @apply border border-gray-200 rounded-md;
-        max-height: 35rem;
-    }
-}
-</style>
-
diff --git a/apps/web/src/services/project/pages/ProjectTagPage.vue b/apps/web/src/services/project/pages/ProjectTagPage.vue
deleted file mode 100644
index 2b28695151..0000000000
--- a/apps/web/src/services/project/pages/ProjectTagPage.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import TagsPanel from '@/common/modules/tags/tags-panel/TagsPanel.vue';
-
-
-interface Props {
-    id?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-    id: '',
-});
-</script>
-
-<template>
-    <tags-panel :resource-id="props.id"
-                resource-key="project_id"
-                resource-type="identity.Project"
-                class="tab-bg"
-    />
-</template>
-
-<style lang="postcss" scoped>
-.tab-bg {
-    @apply pb-0 border-none;
-}
-</style>
diff --git a/apps/web/src/services/project/routes/route-constant.ts b/apps/web/src/services/project/routes/route-constant.ts
deleted file mode 100644
index 53b433af52..0000000000
--- a/apps/web/src/services/project/routes/route-constant.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { MENU_ID } from '@/lib/menu/config';
-
-export const PROJECT_ROUTE = Object.freeze({
-    _NAME: MENU_ID.PROJECT,
-    DETAIL: {
-        _NAME: `${MENU_ID.PROJECT}.detail`,
-        TAB: {
-            _NAME: `${MENU_ID.PROJECT}.detail.tab`,
-            SUMMARY: { _NAME: `${MENU_ID.PROJECT}.detail.tab.summary` },
-            DASHBOARD: { _NAME: `${MENU_ID.PROJECT}.detail.tab.dashboard` },
-        },
-    },
-});
diff --git a/apps/web/src/services/project/routes/routes.ts b/apps/web/src/services/project/routes/routes.ts
deleted file mode 100644
index 73ef365b32..0000000000
--- a/apps/web/src/services/project/routes/routes.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import type { RouteConfig } from 'vue-router';
-
-import { MENU_ID } from '@/lib/menu/config';
-import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
-
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-
-const ProjectContainer = () => import('@/services/project/ProjectContainer.vue');
-
-const ProjectMainPage = () => import('@/services/project/pages/ProjectMainPage.vue');
-const ProjectDetailPage = () => import('@/services/project/pages/ProjectDetailPage.vue');
-const ProjectDetailTabPage = () => import('@/services/project/pages/ProjectDetailTabPage.vue');
-const ProjectDashboardPage = () => import('@/services/project/pages/ProjectDashboardPage.vue');
-const ProjectSummaryPage = () => import('@/services/project/pages/ProjectSummaryPage.vue');
-
-const projectRoute: RouteConfig = {
-    path: 'project',
-    meta: {
-        menuId: MENU_ID.PROJECT,
-        translationId: MENU_INFO_MAP[MENU_ID.PROJECT].translationId,
-    },
-    component: ProjectContainer,
-    children: [
-        {
-            path: ':projectGroupId?',
-            name: PROJECT_ROUTE._NAME,
-            meta: {
-                menuId: MENU_ID.PROJECT,
-                lsbVisible: true,
-            },
-            props: true,
-            component: ProjectMainPage,
-        },
-        {
-            path: 'detail/:id',
-            name: PROJECT_ROUTE.DETAIL._NAME,
-            redirect: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-            props: true,
-            component: ProjectDetailPage,
-            children: [
-                {
-                    path: '/',
-                    name: PROJECT_ROUTE.DETAIL.TAB._NAME,
-                    redirect: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-                    props: true,
-                    component: ProjectDetailTabPage,
-                    children: [
-                        {
-                            path: 'summary',
-                            name: PROJECT_ROUTE.DETAIL.TAB.SUMMARY._NAME,
-                            meta: { lsbVisible: true },
-                            props: true,
-                            component: ProjectSummaryPage,
-                        },
-                        {
-                            path: '*',
-                            redirect: 'summary',
-                        },
-                        {
-                            path: 'dashboard/:dashboardId',
-                            name: PROJECT_ROUTE.DETAIL.TAB.DASHBOARD._NAME,
-                            meta: { lsbVisible: true },
-                            props: true,
-                            component: ProjectDashboardPage,
-                        },
-                    ],
-                },
-            ],
-        },
-    ],
-};
-
-export default projectRoute;
diff --git a/apps/web/src/services/project/stores/project-detail-page-store.ts b/apps/web/src/services/project/stores/project-detail-page-store.ts
deleted file mode 100644
index 4d20ef6599..0000000000
--- a/apps/web/src/services/project/stores/project-detail-page-store.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { computed, reactive } from 'vue';
-
-import { defineStore } from 'pinia';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { ProjectGetParameters } from '@/schema/identity/project/api-verbs/get';
-import type { ProjectModel } from '@/schema/identity/project/model';
-import type { ProjectType } from '@/schema/identity/project/type';
-import type { AlertState } from '@/schema/monitoring/alert/type';
-import type { WebhookModel } from '@/schema/monitoring/webhook/model';
-import type { PluginListParameters } from '@/schema/repository/plugin/api-verbs/list';
-import type { PluginModel } from '@/schema/repository/plugin/model';
-import type { RepositoryListParameters } from '@/schema/repository/repository/api-verbs/list';
-import type { RepositoryModel } from '@/schema/repository/repository/model';
-
-import { NoResourceError } from '@/common/composables/error/error';
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
-
-export interface AlertCount {
-    state: AlertState;
-    total: number;
-}
-
-interface ProjectDetailPageState {
-    loading: boolean,
-    projectId?: string,
-    currentProject?: ProjectModel,
-    alertCounts: AlertCount[],
-    webhookList?: WebhookModel[],
-    selectedWebhookItemIdx: number[],
-}
-export const useProjectDetailPageStore = defineStore('page-project-v1-detail', () => {
-    const state = reactive<ProjectDetailPageState>({
-        loading: false,
-        projectId: undefined,
-        currentProject: undefined,
-        alertCounts: [],
-        webhookList: undefined,
-        selectedWebhookItemIdx: [],
-    });
-    const getters = reactive({
-        projectType: computed<ProjectType|undefined>(() => state.currentProject?.project_type),
-        selectedWebhookItem: computed<WebhookModel|undefined>(() => {
-            if (state.selectedWebhookItemIdx.length === 0) return undefined;
-            const idx = state.selectedWebhookItemIdx[0];
-            return state.webhookList?.[idx];
-        }),
-    });
-
-    /* mutations */
-    const setProjectId = (projectId?: string) => {
-        state.projectId = projectId;
-    };
-    const setProject = (project: ProjectModel|undefined) => {
-        state.currentProject = project;
-    };
-    const setWebhookList = (webhookList: WebhookModel[]|undefined) => {
-        state.webhookList = webhookList;
-    };
-    const setWebhookItemIdx = (idx: number[]) => {
-        state.selectedWebhookItemIdx = idx;
-    };
-
-    /* actions */
-    const getProject = async (projectId?: string) => {
-        try {
-            state.loading = true;
-            const _projectId = projectId || state.projectId;
-            if (!_projectId) throw new Error('projectId is required');
-            state.currentProject = await SpaceConnector.clientV2.identity.project.get<ProjectGetParameters, ProjectModel>({
-                project_id: _projectId,
-            });
-        } catch (e) {
-            state.currentProject = undefined;
-            ErrorHandler.handleError(new NoResourceError({ name: PROJECT_ROUTE._NAME }));
-        } finally {
-            state.loading = false;
-        }
-    };
-    const getAlertCounts = async (projectId?: string) => {
-        try {
-            const { results } = await SpaceConnector.client.monitoring.dashboard.alertCountByState({
-                project_id: projectId || state.projectId,
-            });
-            state.alertCounts = results;
-        } catch (e) {
-            state.alertCounts = [];
-            console.error(e);
-        }
-    };
-
-    const getRepositoryID = async () => {
-        const res = await SpaceConnector.clientV2.repository.repository.list<RepositoryListParameters, ListResponse<RepositoryModel>>({
-            repository_type: 'remote',
-        });
-        return res.results ? res.results[0].repository_id : '';
-    };
-    const getListWebhookType = async () => {
-        try {
-            const repositoryId = await getRepositoryID();
-            const { results } = await SpaceConnector.clientV2.repository.plugin.list<PluginListParameters, ListResponse<PluginModel>>({
-                repository_id: repositoryId,
-                resource_type: 'monitoring.Webhook',
-            });
-            return results ?? [];
-        } catch (e) {
-            ErrorHandler.handleError(e);
-            return [];
-        }
-    };
-
-    const reset = () => {
-        state.projectId = '';
-        state.currentProject = undefined;
-        state.alertCounts = [];
-    };
-
-    const mutations = {
-        setProjectId,
-        setProject,
-        setWebhookList,
-        setWebhookItemIdx,
-    };
-    const actions = {
-        getProject,
-        getAlertCounts,
-        reset,
-        getListWebhookType,
-    };
-
-    return {
-        state,
-        getters,
-        ...mutations,
-        ...actions,
-    };
-});
diff --git a/apps/web/src/services/project/stores/project-page-store.ts b/apps/web/src/services/project/stores/project-page-store.ts
deleted file mode 100644
index f1448e4979..0000000000
--- a/apps/web/src/services/project/stores/project-page-store.ts
+++ /dev/null
@@ -1,326 +0,0 @@
-import { computed, reactive } from 'vue';
-
-import { defineStore } from 'pinia';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import type { TreeNode } from '@cloudforet/mirinae/types/data-display/tree/type';
-
-import type { ProjectGroupCreateParameters } from '@/schema/identity/project-group/api-verbs/create';
-import type { ProjectGroupDeleteParameters } from '@/schema/identity/project-group/api-verbs/delete';
-import type { ProjectGroupUpdateParameters } from '@/schema/identity/project-group/api-verbs/update';
-import type { ProjectGroupModel } from '@/schema/identity/project-group/model';
-import type { ProjectCreateParameters } from '@/schema/identity/project/api-verbs/create';
-import type { ProjectUpdateParameters } from '@/schema/identity/project/api-verbs/udpate';
-import type { ProjectUpdateProjectTypeParameters } from '@/schema/identity/project/api-verbs/update-project-type';
-import type { ProjectModel } from '@/schema/identity/project/model';
-
-import { useUserStore } from '@/store/user/user-store';
-
-import getRandomId from '@/lib/random-id-generator';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { useProjectTree } from '@/services/project-v1/composables/use-project-tree';
-import type {
-    ProjectGroupTreeItem, ProjectGroupTreeNodeData, ProjectTreeNodeData, ProjectTreeRoot,
-} from '@/services/project-v1/types/project-tree-type';
-
-
-const projectTreeHelper = useProjectTree();
-export const useProjectPageStore = defineStore('page-project-v1', () => {
-    const userStore = useUserStore();
-
-    const _state = reactive({
-        currentRoleType: computed(() => userStore.state.currentRoleInfo?.roleType),
-    });
-    const state = reactive({
-        projectTreeKey: getRandomId(),
-        isInitiated: false as boolean,
-        searchText: undefined as string|undefined,
-        rootNode: null as ProjectTreeRoot|null,
-        selectedItem: {} as ProjectGroupTreeItem,
-        treeEditMode: false as boolean,
-        hasProjectGroup: undefined as boolean|undefined,
-        projectCount: undefined as number|undefined,
-        actionTargetItem: {} as ProjectGroupTreeItem,
-        //
-        projectGroupFormVisible: false as boolean,
-        projectGroupFormUpdateMode: false as boolean,
-        projectDeleteModalVisible: false as boolean,
-        projectFormModalVisible: false as boolean,
-        projectGroupMoveModalVisible: false as boolean,
-        shouldUpdateProjectList: false as boolean,
-        // form
-        currentSelectedProjectId: undefined as string|undefined,
-        currentSelectedProjectGroupId: undefined as string|undefined,
-        //
-        isWorkspaceOwner: computed<boolean>(() => _state.currentRoleType === 'WORKSPACE_OWNER'),
-    });
-
-    const getters = reactive({
-        selectedNodeData: computed<ProjectTreeNodeData|undefined>(() => (state.selectedItem.node ? { ...state.selectedItem.node.data } : undefined)),
-        selectedNodePath: computed<number[]|undefined>(() => (state.selectedItem.path ? state.selectedItem.path : undefined)),
-        groupId: computed<string|undefined>(() => getters.selectedNodeData?.id),
-        groupName: computed<string|undefined>(() => (getters.selectedNodeData ? getters.selectedNodeData.name : undefined)),
-        actionTargetNodeData: computed<ProjectTreeNodeData|undefined>(() => (state.actionTargetItem.node ? state.actionTargetItem.node.data : undefined)),
-        actionTargetNodePath: computed<number[]|undefined>(() => (state.actionTargetItem.path ? state.actionTargetItem.path : undefined)),
-        parentGroups: computed<ProjectGroupTreeNodeData[]>(() => {
-            const tree = state.rootNode;
-            const path = getters.selectedNodePath;
-            if (tree && path) {
-                const parentItems = path.reduce((parents, d, i) => {
-                    if (i + 1 === path.length) return parents;
-
-                    const parentPath = path.slice(0, i + 1);
-                    try {
-                        const parent = tree.getNodeByPath(parentPath);
-
-                        if (parent) parents.push(parent.data);
-                    } catch (e) {}
-
-                    return parents;
-                }, []);
-                return parentItems;
-            }
-            return [];
-        }),
-    });
-
-    /* mutation */
-    const setShouldUpdateProjectList = (val?: boolean) => {
-        state.shouldUpdateProjectList = !!val;
-    };
-    const setProjectFormModalVisible = (val?: boolean) => {
-        state.projectFormModalVisible = !!val;
-    };
-    const setProjectGroupMoveModalVisible = (val?: boolean) => {
-        state.projectGroupMoveModalVisible = !!val;
-    };
-    const setProjectDeleteModalVisible = (val?: boolean) => {
-        state.projectDeleteModalVisible = !!val;
-    };
-    const setProjectGroupFormVisible = (val?: boolean) => {
-        state.projectGroupFormVisible = !!val;
-    };
-    const setProjectGroupFormUpdateMode = (val?: boolean) => {
-        state.projectGroupFormUpdateMode = !!val;
-    };
-    const setTreeEditMode = (val?: boolean) => {
-        state.treeEditMode = !!val;
-    };
-    const setIsInitiated = (val?: boolean) => {
-        state.isInitiated = !!val;
-    };
-    const setSelectedItem = (item?: ProjectGroupTreeItem) => {
-        state.selectedItem = item || {};
-    };
-    const setProjectCount = (count?: number) => {
-        state.projectCount = count || 0;
-    };
-    const setRootNode = (root?: ProjectTreeRoot) => {
-        state.rootNode = root || null;
-    };
-    const setCurrentSelectedProjectId = (projectId?: string) => {
-        state.currentSelectedProjectId = projectId;
-    };
-    const setCurrentSelectedProjectGroupId = (groupId?: string) => {
-        state.currentSelectedProjectGroupId = groupId;
-    };
-
-    /* action */
-    const selectNode = async (groupId?: string): Promise<TreeNode<ProjectTreeNodeData>|null> => {
-        if (!groupId) {
-            if (state.rootNode) {
-                state.rootNode.resetSelect();
-            }
-            return null;
-        }
-
-        try {
-            const res = await projectTreeHelper.getProjectTreeSearchPath({
-                item_id: groupId,
-                item_type: 'PROJECT_GROUP',
-            });
-            const paths = res.open_path || [];
-
-            if (state.rootNode && paths.length) {
-                const { node } = await state.rootNode.fetchAndFindNode(paths.map((d) => ((data) => data.id === d)));
-                return node;
-            }
-        } catch (e) {
-            ErrorHandler.handleError(e);
-        }
-
-        return null;
-    };
-
-    const openProjectFormModal = (target: ProjectGroupTreeItem = {}) => {
-        state.actionTargetItem = target;
-        state.projectFormModalVisible = true;
-    };
-    const reset = () => {
-        state.isInitiated = false;
-        state.searchText = undefined;
-        state.rootNode = null;
-        state.selectedItem = {};
-        state.treeEditMode = false;
-        state.hasProjectGroup = undefined;
-        state.projectCount = undefined;
-        state.actionTargetItem = {};
-        state.projectGroupFormVisible = false;
-        state.projectGroupFormUpdateMode = false;
-        state.projectDeleteModalVisible = false;
-        state.projectFormModalVisible = false;
-        state.shouldUpdateProjectList = false;
-    };
-
-    /* Project Group */
-    const createProjectGroup = async (params: ProjectGroupCreateParameters) => {
-        try {
-            const _params: ProjectGroupCreateParameters = {
-                ...params,
-            };
-            if (getters.actionTargetNodeData) {
-                _params.parent_group_id = getters.actionTargetNodeData.id;
-            }
-            const res: ProjectGroupModel = await SpaceConnector.clientV2.identity.projectGroup.create(_params);
-
-            const newData: ProjectTreeNodeData = {
-                ...params,
-                id: res.project_group_id,
-                item_type: 'PROJECT_GROUP',
-                has_child: false,
-            };
-            if (state.rootNode) {
-                if (getters.actionTargetNodeData) {
-                    const targetNode = state.rootNode.getNodeByPath(getters.actionTargetNodePath);
-                    // fetch child data to show children nodes
-                    await state.rootNode.fetchData(targetNode);
-                    state.rootNode.unfold(targetNode);
-                    // update target node's has_children to show toggle even after toggle is folded
-                    state.rootNode.updateNodeByPath(getters.actionTargetNodePath, { ...targetNode.data, has_child: true });
-                    // update selected item to prevent the case that selected node is updated by fetchData
-                    const selectedNode = state.rootNode.getNodeByPath(getters.selectedNodePath);
-                    state.rootNode.changeSelectState(selectedNode, getters.selectedNodePath);
-                } else {
-                    state.rootNode.addNode(newData);
-                }
-            }
-            state.hasProjectGroup = true;
-        } catch (e: any) {
-            ErrorHandler.handleError(e);
-            throw new Error(e);
-        } finally {
-            state.actionTargetItem = {};
-        }
-    };
-    const updateProjectGroup = async (params: Partial<ProjectGroupUpdateParameters>) => {
-        if (!state.rootNode || !getters.actionTargetNodeData) return;
-
-        try {
-            await SpaceConnector.clientV2.identity.projectGroup.update<ProjectGroupUpdateParameters>({
-                project_group_id: getters.actionTargetNodeData.id,
-                ...params,
-            });
-
-            state.rootNode.updateNodeByPath(
-                getters.actionTargetNodePath,
-                { ...getters.actionTargetNodeData, ...params },
-            );
-        } catch (e: any) {
-            ErrorHandler.handleError(e);
-            throw e;
-        } finally {
-            state.actionTargetItem = {};
-        }
-    };
-    const deleteProjectGroup = async () => {
-        if (!state.rootNode || !getters.actionTargetNodeData) {
-            throw new Error('No Target for deletion');
-        }
-
-        await SpaceConnector.clientV2.identity.projectGroup.delete<ProjectGroupDeleteParameters>({
-            project_group_id: getters.actionTargetNodeData.id,
-        });
-        state.rootNode.deleteNodeByPath(getters.actionTargetNodePath);
-        // fetch data to update has child info
-        // HACK: disable below code because it causes error when getNodeByPath
-        // const targetNode = state.rootNode.getNodeByPath(getters.actionTargetNodePath);
-        // await state.rootNode.fetchData(targetNode);
-        state.actionTargetItem = {};
-    };
-
-    /* Project */
-    const createProject = async (params: ProjectCreateParameters): Promise<ProjectModel> => {
-        const res = await SpaceConnector.clientV2.identity.project.create<ProjectCreateParameters, ProjectModel>({
-            ...params,
-        });
-        state.shouldUpdateProjectList = true;
-
-        if (state.treeEditMode) {
-            const newData: ProjectTreeNodeData = {
-                name: params.name,
-                id: res.project_id,
-                item_type: 'PROJECT',
-                has_child: false,
-            };
-            if (state.rootNode) {
-                if (getters.selectedNodeData) {
-                    state.rootNode.addChildNodeByPath(getters.selectedNodePath, newData);
-                }
-            }
-        }
-        return res;
-    };
-    const updateProject = async (params: ProjectUpdateParameters): Promise<ProjectModel> => {
-        const res = await SpaceConnector.clientV2.identity.project.update<ProjectUpdateParameters, ProjectModel>({
-            ...params,
-        });
-        return res;
-    };
-    const updateProjectType = async (params: ProjectUpdateProjectTypeParameters): Promise<ProjectModel> => {
-        const res = await SpaceConnector.clientV2.identity.project.updateProjectType<ProjectUpdateProjectTypeParameters, ProjectModel>({
-            ...params,
-        });
-        return res;
-    };
-
-    const refreshProjectTreeKey = () => {
-        state.projectTreeKey = getRandomId();
-    };
-
-    const mutations = {
-        setShouldUpdateProjectList,
-        setProjectFormModalVisible,
-        setProjectGroupMoveModalVisible,
-        setProjectDeleteModalVisible,
-        setProjectGroupFormVisible,
-        setTreeEditMode,
-        setIsInitiated,
-        setSelectedItem,
-        setProjectCount,
-        setRootNode,
-        setCurrentSelectedProjectId,
-        setCurrentSelectedProjectGroupId,
-        setProjectGroupFormUpdateMode,
-    };
-    const actions = {
-        reset,
-        selectNode,
-        createProjectGroup,
-        updateProjectGroup,
-        deleteProjectGroup,
-        createProject,
-        updateProject,
-        updateProjectType,
-        openProjectFormModal,
-        refreshProjectTreeKey,
-    };
-
-    return {
-        state,
-        getters,
-        ...mutations,
-        ...actions,
-    };
-});
diff --git a/apps/web/src/services/project/stores/project-tree-store.ts b/apps/web/src/services/project/stores/project-tree-store.ts
deleted file mode 100644
index 79379a2bc5..0000000000
--- a/apps/web/src/services/project/stores/project-tree-store.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { nextTick, reactive } from 'vue';
-
-import { cloneDeep } from 'lodash';
-import { defineStore } from 'pinia';
-
-import type { TreeDisplayMap } from '@/services/project/tree/type';
-
-export const useProjectTreeStore = defineStore('project-v1-tree', () => {
-    const state = reactive({
-        treeDisplayMap: {} as TreeDisplayMap,
-    });
-
-    const mutations = {
-        setTreeDisplayMap(treeDisplayMap: TreeDisplayMap) {
-            state.treeDisplayMap = treeDisplayMap;
-        },
-    };
-
-    const actions = {
-        async refreshProjectTree() {
-            const copiedMap = cloneDeep(state.treeDisplayMap);
-            state.treeDisplayMap = {};
-            await nextTick();
-            state.treeDisplayMap = copiedMap;
-        },
-        disposeProjectTree() {
-            state.treeDisplayMap = {};
-        },
-    };
-
-    return {
-        state,
-        ...mutations,
-        ...actions,
-    };
-});
diff --git a/apps/web/src/services/project/tree/TreeItem.vue b/apps/web/src/services/project/tree/TreeItem.vue
deleted file mode 100644
index bdd36e3678..0000000000
--- a/apps/web/src/services/project/tree/TreeItem.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<script setup lang="ts">
-
-import {
-    computed, onMounted, reactive, useSlots, watch,
-} from 'vue';
-import type { SetupContext } from 'vue/types/v3-setup-context';
-
-import { PI, PSpinner } from '@cloudforet/mirinae';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import type { TreeNode } from '@/services/project/tree/type';
-
-interface Props {
-    node: TreeNode;
-    selectedId?: string;
-    isOpen?: boolean;
-}
-
-const props = defineProps<Props>();
-const slots = useSlots();
-const isExpandable = (_slots: SetupContext['slots']) => _slots['child-content'] !== undefined;
-
-const emit = defineEmits<{(e: 'click-toggle', node: TreeNode): Promise<void>|void;
-    (e: 'click-item', node: TreeNode): void;
-    (e: 'update:is-open', value: boolean): void;
-}>();
-
-const state = reactive({
-    toggleIcon: computed(() => (state.proxyIsOpen ? 'ic_caret-down-filled-alt' : 'ic_caret-right')),
-    fetchLoading: false,
-    isSelected: computed(() => props.selectedId === props.node.id),
-    proxyIsOpen: useProxyValue('isOpen', props, emit),
-});
-
-const openToggle = () => {
-    state.proxyIsOpen = true;
-};
-const closeToggle = () => {
-    state.proxyIsOpen = false;
-};
-
-const handleClickToggle = async () => {
-    if (state.proxyIsOpen) {
-        closeToggle();
-    } else {
-        openToggle();
-    }
-};
-
-const handleClickItem = () => {
-    emit('click-item', props.node);
-};
-
-
-watch(() => state.proxyIsOpen, async (isOpen) => {
-    if (!props.node.id) return;
-    if (isOpen) {
-        await emit('click-toggle', props.node);
-    } else state.proxyIsOpen = false;
-}, { immediate: true });
-
-onMounted(() => {
-    if (state.proxyIsOpen) {
-        openToggle();
-    }
-});
-
-</script>
-
-<template>
-    <div class="tree-item">
-        <component :is="props.node.data.to ? 'router-link' : 'div'"
-                   :to="props.node.data.to"
-                   class="content-wrapper"
-                   :class="{ selected: props.node.id === props.selectedId }"
-                   :style="{ 'padding-left': `${0.125 + (props.node.depth || 0) * 1}rem`}"
-                   @click.native="handleClickItem"
-        >
-            <div v-if="isExpandable(slots)"
-                 class="toggle-icon"
-            >
-                <p-spinner v-if="props.node.loading"
-                           size="sm"
-                />
-                <p-i v-else
-                     :name="state.toggleIcon"
-                     width="1rem"
-                     height="1rem"
-                     @click.prevent="handleClickToggle"
-                />
-            </div>
-            <div :class="{'content-text': true, 'expandable': isExpandable(slots)}">
-                <slot name="content"
-                      v-bind="{ node: props.node }"
-                />
-            </div>
-        </component>
-        <div v-if="slots && state.proxyIsOpen"
-             class="child-group"
-        >
-            <slot name="child-content" />
-        </div>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.tree-item {
-    @apply w-full;
-
-    .content-wrapper {
-        @apply flex items-center rounded w-full;
-        padding-left: 0.125rem;
-        padding-right: 0.5rem;
-
-        &:hover {
-            @apply bg-blue-100 cursor-pointer;
-        }
-
-        &.selected {
-            @apply bg-blue-200;
-        }
-
-        .content-text {
-            @apply w-full;
-
-            &.expandable {
-                width: calc(100% - 1rem);
-            }
-        }
-    }
-
-    .child-group {
-        @apply flex items-center;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/tree/TreeView.vue b/apps/web/src/services/project/tree/TreeView.vue
deleted file mode 100644
index 2a21237829..0000000000
--- a/apps/web/src/services/project/tree/TreeView.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-// eslint-disable-next-line import/order,import/no-duplicates
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-    name: 'TreeView',
-});
-</script>
-<script setup lang="ts">
-/* eslint-disable import/first */
-// eslint-disable-next-line import/no-duplicates
-import { reactive } from 'vue';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import type { TreeNode, TreeDisplayMap } from '@/services/project/tree/type';
-
-import TreeItem from './TreeItem.vue';
-
-interface Props {
-    treeData: TreeNode[];
-    treeDisplayMap?: TreeDisplayMap;
-    selectedId?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    treeDisplayMap: () => ({}),
-    selectedId: undefined,
-});
-const emit = defineEmits<{(event: 'click-toggle', node: TreeNode): Promise<void>|void;
-    (e: 'click-item', node: TreeNode): void;
-    (e: 'update:tree-display-map', value: TreeDisplayMap): void;
-}>();
-
-const state = reactive({
-    proxyTreeDisplayMap: useProxyValue('treeDisplayMap', props, emit),
-});
-
-const handleClickToggle = async (item: TreeNode) => {
-    await emit('click-toggle', item);
-};
-const handleClickItem = (item: TreeNode) => {
-    emit('click-item', item);
-};
-
-const handleUpdateTreeDisplayMap = (id: string|undefined, isOpen: boolean) => {
-    if (!id) return;
-    state.proxyTreeDisplayMap = {
-        ...state.proxyTreeDisplayMap,
-        [id]: {
-            isOpen,
-        },
-    };
-};
-
-</script>
-<template>
-    <div class="tree-view">
-        <tree-item v-for="item in treeData"
-                   :key="item.id"
-                   :node="item"
-                   :selected-id="selectedId"
-                   :is-open="state.proxyTreeDisplayMap[item.id]?.isOpen"
-                   @click-toggle="handleClickToggle"
-                   @click-item="handleClickItem"
-                   @update:is-open="handleUpdateTreeDisplayMap(item.id, $event)"
-        >
-            <template #content="{ node }">
-                <slot name="content"
-                      v-bind="{ node }"
-                />
-            </template>
-            <template v-if="Array.isArray(item.children)"
-                      #child-content
-            >
-                <tree-view :tree-data="item.children"
-                           :tree-display-map.sync="state.proxyTreeDisplayMap"
-                           :selected-id="selectedId"
-                           @click-toggle="handleClickToggle"
-                           @click-item="handleClickItem"
-                >
-                    <template #content="{ node }">
-                        <slot name="content"
-                              v-bind="{ node }"
-                        />
-                    </template>
-                </tree-view>
-            </template>
-        </tree-item>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.tree-view {
-    width: 100%;
-}
-</style>
-
diff --git a/apps/web/src/services/project/tree/type.ts b/apps/web/src/services/project/tree/type.ts
deleted file mode 100644
index db298847a2..0000000000
--- a/apps/web/src/services/project/tree/type.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export interface TreeNode<T extends TreeData = any> {
-    id: string;
-    depth: number;
-    isOpen?: boolean;
-    data: T;
-    loading?: boolean;
-    children?: TreeNode<T>[];
-}
-
-export interface TreeData {
-    to?: Location;
-}
-export interface TreeDisplayMap {
-    [id: string]: {
-        isOpen: boolean;
-    }
-}
diff --git a/apps/web/src/services/project/types/project-alert-type.ts b/apps/web/src/services/project/types/project-alert-type.ts
deleted file mode 100644
index 5b2a54890d..0000000000
--- a/apps/web/src/services/project/types/project-alert-type.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { PluginModel } from '@/schema/repository/plugin/model';
-
-export interface WebhookType extends PluginModel {
-    long_description?: string
-}
diff --git a/apps/web/src/services/project/types/project-member-type.ts b/apps/web/src/services/project/types/project-member-type.ts
deleted file mode 100644
index d85c7398a0..0000000000
--- a/apps/web/src/services/project/types/project-member-type.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-
-import type { ProjectGroupModel } from '@/schema/identity/project-group/model';
-import type { ProjectModel } from '@/schema/identity/project/model';
-import type { RoleModel } from '@/schema/identity/role/model';
-
-
-export interface ProjectMemberItem {
-    resource_id: string;
-    project_info?: ProjectModel;
-    project_group_info?: ProjectGroupModel;
-    role_info?: RoleModel;
-    labels?: string[];
-}
diff --git a/apps/web/src/services/project/types/project-notification-add-page-url-query-type.ts b/apps/web/src/services/project/types/project-notification-add-page-url-query-type.ts
deleted file mode 100644
index 4bcfcece23..0000000000
--- a/apps/web/src/services/project/types/project-notification-add-page-url-query-type.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { RouteQueryString } from '@/lib/router-query-string';
-
-export interface ProjectNotificationAddPageUrlQuery {
-    protocolLabel?: RouteQueryString;
-    protocolType?: RouteQueryString;
-}
-
-export interface ProjectNotificationAddPageUrlQueryValue {
-    protocolLabel?: string;
-    protocolType?: string;
-}
diff --git a/apps/web/src/services/project/types/project-summary-type.ts b/apps/web/src/services/project/types/project-summary-type.ts
deleted file mode 100644
index d6dabf83fc..0000000000
--- a/apps/web/src/services/project/types/project-summary-type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { SERVICE_CATEGORY } from '@/services/project/constants/project-summary-constant';
-
-
-export type ServiceCategory = typeof SERVICE_CATEGORY[keyof typeof SERVICE_CATEGORY];
-
-export type DateType = 'DAILY' | 'MONTHLY';
diff --git a/apps/web/src/services/project/types/project-tree-type.ts b/apps/web/src/services/project/types/project-tree-type.ts
deleted file mode 100644
index 1c6e02e86e..0000000000
--- a/apps/web/src/services/project/types/project-tree-type.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { TreeNode } from '@cloudforet/mirinae/src/data-display/tree/type';
-import type { TreeItem, Tree } from '@cloudforet/mirinae/types/data-display/tree/type';
-
-
-export type ProjectTreeItemType = 'PROJECT_GROUP'|'PROJECT'|'ROOT';
-
-export interface ProjectTreeNodeData {
-    id: string;
-    name: string;
-    item_type: ProjectTreeItemType;
-    has_child?: boolean|null;
-}
-
-export interface ProjectGroupTreeNodeData {
-    id: string;
-    name: string;
-}
-
-export type ProjectTreeItem = TreeItem<ProjectTreeNodeData>;
-
-export type ProjectTreeRoot = Tree<ProjectTreeNodeData>;
-
-export type ProjectGroupTreeItem = Partial<ProjectTreeItem>;
-
-export type ProjectTreeNode = TreeNode<ProjectTreeNodeData>;
diff --git a/apps/web/src/services/project/types/project-type.ts b/apps/web/src/services/project/types/project-type.ts
deleted file mode 100644
index eac47dd668..0000000000
--- a/apps/web/src/services/project/types/project-type.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { ProjectType } from '@/schema/identity/project/type';
-
-export interface ProjectCardItemType {
-    type: 'project' | 'projectGroup';
-    id: string;
-    name: string;
-    parentId?: string;
-    projectType?: ProjectType;
-}
diff --git a/apps/web/src/services/workspace-home/components/AccountSummary.vue b/apps/web/src/services/workspace-home/components/AccountSummary.vue
index 1ccd0e8840..a5b548a0c4 100644
--- a/apps/web/src/services/workspace-home/components/AccountSummary.vue
+++ b/apps/web/src/services/workspace-home/components/AccountSummary.vue
@@ -14,7 +14,7 @@ import {
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import type { ServiceAccountModel } from '@/schema/identity/service-account/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/services/workspace-home/components/CostSummary.vue b/apps/web/src/services/workspace-home/components/CostSummary.vue
index 96f8b0f1bb..23f8707456 100644
--- a/apps/web/src/services/workspace-home/components/CostSummary.vue
+++ b/apps/web/src/services/workspace-home/components/CostSummary.vue
@@ -10,11 +10,11 @@ import {
     PDivider, PFieldTitle, PLink, PSpinner, PStatus, screens,
 } from '@cloudforet/mirinae';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
+import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
+import type { UnifiedCostAnalyzeParameters } from '@/api-clients/cost-analysis/unified-cost/schema/api-verbs/analyze';
 import type { UserConfigModel } from '@/schema/config/user-config/model';
-import type { CostReportConfigModel } from '@/schema/cost-analysis/cost-report-config/model';
-import type { CostDataSourceModel } from '@/schema/cost-analysis/data-source/model';
-import type { UnifiedCostAnalyzeParameters } from '@/schema/cost-analysis/unified-cost/api-verbs/analyze';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 import { i18n } from '@/translations';
 
@@ -44,6 +44,7 @@ import { COST_SUMMARY_STATE_TYPE, SUMMARY_DATA_TYPE } from '@/services/workspace
 import { useWorkspaceHomePageStore } from '@/services/workspace-home/store/workspace-home-page-store';
 import type { EmptyData } from '@/services/workspace-home/types/workspace-home-type';
 
+
 const { getProperRouteLocation } = useProperRouteLocation();
 const workspaceHomePageStore = useWorkspaceHomePageStore();
 const workspaceHomePageState = workspaceHomePageStore.state;
diff --git a/apps/web/src/services/workspace-home/components/UserConfigRecent.vue b/apps/web/src/services/workspace-home/components/UserConfigRecent.vue
index 6c3cf1cca2..3d93d0a9d9 100644
--- a/apps/web/src/services/workspace-home/components/UserConfigRecent.vue
+++ b/apps/web/src/services/workspace-home/components/UserConfigRecent.vue
@@ -4,11 +4,10 @@ import { useRoute } from 'vue-router/composables';
 
 import { PFieldTitle } from '@cloudforet/mirinae';
 
+import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
 import type { UserConfigModel } from '@/schema/config/user-config/model';
-import type { CostQuerySetModel } from '@/schema/cost-analysis/cost-query-set/model';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
 import { useDisplayStore } from '@/store/display/display-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CloudServiceTypeReferenceMap } from '@/store/reference/cloud-service-type-reference-store';
@@ -31,6 +30,7 @@ import {
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import UserConfigsItem from '@/services/workspace-home/components/UserConfigsItem.vue';
 import { useWorkspaceHomePageStore } from '@/services/workspace-home/store/workspace-home-page-store';
 
@@ -42,12 +42,16 @@ const gnbStore = useGnbStore();
 const gnbStoreGetters = gnbStore.getters;
 const allReferenceStore = useAllReferenceStore();
 const allReferenceGetters = allReferenceStore.getters;
-const dashboardStore = useDashboardStore();
-const dashboardState = dashboardStore.state;
 const workspaceHomePageStore = useWorkspaceHomePageStore();
 const workspaceHomePageState = workspaceHomePageStore.state;
 const displayStore = useDisplayStore();
 
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+} = useDashboardQuery();
+
 const storeState = reactive({
     currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStoreGetters.currentWorkspaceId),
     costQuerySets: computed<CostQuerySetModel[]>(() => gnbStoreGetters.costQuerySets),
@@ -72,7 +76,7 @@ const state = reactive({
 const convertRecentToReferenceData = (recentConfig: ConfigData): ReferenceData => {
     const { itemType } = recentConfig;
     if (itemType === RECENT_TYPE.DASHBOARD) {
-        return convertDashboardConfigToReferenceData([recentConfig], [...dashboardState.publicDashboardItems, ...dashboardState.privateDashboardItems])[0];
+        return convertDashboardConfigToReferenceData([recentConfig], [...publicDashboardList.value, ...privateDashboardList.value])[0];
     }
     if (itemType === RECENT_TYPE.PROJECT) {
         return convertProjectConfigToReferenceData([recentConfig], storeState.projects)[0];
diff --git a/apps/web/src/services/workspace-home/constants/workspace-home-constant.ts b/apps/web/src/services/workspace-home/constants/workspace-home-constant.ts
index 54d05b98d7..66ee1aefe7 100644
--- a/apps/web/src/services/workspace-home/constants/workspace-home-constant.ts
+++ b/apps/web/src/services/workspace-home/constants/workspace-home-constant.ts
@@ -6,7 +6,7 @@ import { ALERT_MANAGER_ROUTE } from '@/services/alert-manager/routes/route-const
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
+import { PROJECT_ROUTE } from '@/services/project-v1/routes/route-constant';
 import type { StarredServiceItem } from '@/services/workspace-home/types/workspace-home-type';
 
 // Bookmark
diff --git a/apps/web/src/services/workspace-home/pages/WorkspaceHomePage.vue b/apps/web/src/services/workspace-home/pages/WorkspaceHomePage.vue
index d34d3f7004..aff3d3ff76 100644
--- a/apps/web/src/services/workspace-home/pages/WorkspaceHomePage.vue
+++ b/apps/web/src/services/workspace-home/pages/WorkspaceHomePage.vue
@@ -5,8 +5,8 @@ import {
 
 import { isEmpty } from 'lodash';
 
+import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
 import type { UserConfigModel } from '@/schema/config/user-config/model';
-import type { CostDataSourceModel } from '@/schema/cost-analysis/data-source/model';
 import { ROLE_TYPE } from '@/schema/identity/role/constant';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
diff --git a/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts b/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts
index dd885a0baa..640986b2c7 100644
--- a/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts
+++ b/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts
@@ -9,13 +9,13 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import type { AnalyzeResponse } from '@/schema/_common/api-verbs/analyze';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostReportConfigListParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
+import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
 import type { UserConfigListParameters } from '@/schema/config/user-config/api-verbs/list';
 import type { UserConfigModel } from '@/schema/config/user-config/model';
-import type { CostReportConfigListParameters } from '@/schema/cost-analysis/cost-report-config/api-verbs/list';
-import type { CostReportConfigModel } from '@/schema/cost-analysis/cost-report-config/model';
-import type { CostDataSourceModel } from '@/schema/cost-analysis/data-source/model';
 import type { AppListParameters } from '@/schema/identity/app/api-verbs/list';
 import type { AppModel } from '@/schema/identity/app/model';
 import type { WorkspaceUserListParameters } from '@/schema/identity/workspace-user/api-verbs/list';
@@ -44,6 +44,7 @@ import type {
     BookmarkType,
 } from '@/services/workspace-home/types/workspace-home-type';
 
+
 interface WorkspaceHomeState {
     // info
     workspaceUserTotalCount: number|undefined;
diff --git a/apps/web/src/store/app-context/workspace/user-workspace-store.ts b/apps/web/src/store/app-context/workspace/user-workspace-store.ts
index 379edc9b81..459cad6e78 100644
--- a/apps/web/src/store/app-context/workspace/user-workspace-store.ts
+++ b/apps/web/src/store/app-context/workspace/user-workspace-store.ts
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 
 interface UserWorkspaceStoreState {
diff --git a/apps/web/src/store/config/domain-config-store.ts b/apps/web/src/store/config/domain-config-store.ts
index b02f2c279b..1e3fb8e6da 100644
--- a/apps/web/src/store/config/domain-config-store.ts
+++ b/apps/web/src/store/config/domain-config-store.ts
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { DomainConfigCreateParameters } from '@/schema/config/domain-config/api-verbs/create';
 import type { DomainConfigListParameters } from '@/schema/config/domain-config/api-verbs/list';
 import type { DomainConfigUpdateParameters } from '@/schema/config/domain-config/api-verbs/update';
diff --git a/apps/web/src/store/dashboard/dashboard-store.ts b/apps/web/src/store/dashboard/dashboard-store.ts
index 0ea458083d..b4420384f7 100644
--- a/apps/web/src/store/dashboard/dashboard-store.ts
+++ b/apps/web/src/store/dashboard/dashboard-store.ts
@@ -1,32 +1,25 @@
 import { computed, reactive } from 'vue';
 
-import { cloneDeep, sortBy } from 'lodash';
+import { cloneDeep } from 'lodash';
 import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
-import { getClonedName } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import { RESOURCE_GROUP } from '@/schema/_common/constant';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type {
     DashboardType,
     DashboardFolderType,
     DashboardModel,
-    DashboardCreateParams,
     DashboardListParams,
     DashboardUpdateParams,
-    DashboardDeleteParams,
-} from '@/schema/dashboard/_types/dashboard-type';
-import type { FolderCreateParams, FolderModel } from '@/schema/dashboard/_types/folder-type';
-import type { WidgetListParams, WidgetModel } from '@/schema/dashboard/_types/widget-type';
-import type { PrivateDashboardModel } from '@/schema/dashboard/private-dashboard/model';
-import type { PrivateFolderModel } from '@/schema/dashboard/private-folder/model';
-import type { PublicDashboardCreateParameters } from '@/schema/dashboard/public-dashboard/api-verbs/create';
-import type { PublicDashboardModel } from '@/schema/dashboard/public-dashboard/model';
-import type { PublicFolderCreateParameters } from '@/schema/dashboard/public-folder/api-verbs/create';
-import type { PublicFolderModel } from '@/schema/dashboard/public-folder/model';
+} from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
@@ -35,33 +28,11 @@ import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-sou
 import { useUserStore } from '@/store/user/user-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
-import { getSharedDashboardLayouts } from '@/services/dashboards/helpers/dashboard-share-helper';
 
-
-
-const listDashboardWidgets = async (dashboardId: string): Promise<WidgetModel[]> => {
-    try {
-        const isPrivate = dashboardId.startsWith('private');
-        const fetcher = isPrivate
-            ? SpaceConnector.clientV2.dashboard.privateWidget.list
-            : SpaceConnector.clientV2.dashboard.publicWidget.list;
-        const { results } = await fetcher<WidgetListParams, ListResponse<WidgetModel>>({
-            dashboard_id: dashboardId,
-        });
-        return results || [];
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        return [];
-    }
-};
 export const useDashboardStore = defineStore('dashboard', () => {
     const appContextStore = useAppContextStore();
     const userWorkspaceStore = useUserWorkspaceStore();
-    const favoriteStore = useFavoriteStore();
-    const favoriteGetters = favoriteStore.getters;
     const allReferenceStore = useAllReferenceStore();
     const userStore = useUserStore();
 
@@ -181,20 +152,6 @@ export const useDashboardStore = defineStore('dashboard', () => {
     };
 
     // dashboard
-    const createDashboard = async (dashboardType: DashboardType, params: DashboardCreateParams): Promise<DashboardModel> => {
-        const fetcher = dashboardType === 'PRIVATE'
-            ? SpaceConnector.clientV2.dashboard.privateDashboard.create
-            : SpaceConnector.clientV2.dashboard.publicDashboard.create;
-        const result = await fetcher<DashboardCreateParams, DashboardModel>(params);
-        if (dashboardType === 'PRIVATE') {
-            const newDashboardItems = [...state.privateDashboardItems, result as PrivateDashboardModel];
-            state.privateDashboardItems = sortBy(newDashboardItems, 'name');
-        } else {
-            const newDashboardItems = [...state.publicDashboardItems, result as PublicDashboardModel];
-            state.publicDashboardItems = sortBy(newDashboardItems, 'name');
-        }
-        return result;
-    };
     const updateDashboard = async (dashboardId: string, params: DashboardUpdateParams): Promise<DashboardModel> => {
         const isPrivate = dashboardId?.startsWith('private');
         const fetcher = isPrivate
@@ -220,123 +177,12 @@ export const useDashboardStore = defineStore('dashboard', () => {
             throw e;
         }
     };
-    const deleteDashboard = async (dashboardId: string) => {
-        const isPrivate = dashboardId?.startsWith('private');
-        const fetcher = isPrivate
-            ? SpaceConnector.clientV2.dashboard.privateDashboard.delete
-            : SpaceConnector.clientV2.dashboard.publicDashboard.delete;
-        const params: DashboardDeleteParams = { dashboard_id: dashboardId };
-        try {
-            await fetcher<DashboardDeleteParams>(params);
-            if (isPrivate) {
-                const targetIndex = state.privateDashboardItems.findIndex((item) => item.dashboard_id === dashboardId);
-                if (targetIndex !== -1) state.privateDashboardItems.splice(targetIndex, 1);
-                state.privateDashboardItems = cloneDeep(state.privateDashboardItems);
-            } else {
-                const targetIndex = state.publicDashboardItems.findIndex((item) => item.dashboard_id === dashboardId);
-                if (targetIndex !== -1) state.publicDashboardItems.splice(targetIndex, 1);
-                state.publicDashboardItems = cloneDeep(state.publicDashboardItems);
-            }
 
-            const isFavoriteItem = favoriteGetters.dashboardItems.find((item) => item.itemId === dashboardId);
-            if (isFavoriteItem) {
-                await favoriteStore.deleteFavorite({
-                    itemType: FAVORITE_TYPE.DASHBOARD,
-                    workspaceId: _state.currentWorkspaceId || '',
-                    itemId: dashboardId,
-                });
-            }
-        } catch (e) {
-            ErrorHandler.handleError(e);
-            throw e;
-        }
-    };
-    const getDashboardNameList = (dashboardType: DashboardType) => {
-        if (dashboardType === 'PRIVATE') {
-            return (state.privateDashboardItems.filter((i) => i.version !== '1.0')).map((item) => item.name);
-        }
-        return state.publicDashboardItems.filter((i) => i.version !== '1.0').map((item) => item.name);
-    };
-    const cloneDashboard = async (dashboardId: string, isPrivate?: boolean, folderId?: string): Promise<DashboardModel> => {
-        const _dashboardType = isPrivate ? 'PRIVATE' : 'PUBLIC';
-        const _allDashboardItems = [...state.privateDashboardItems, ...state.publicDashboardItems];
-        const _dashboard = _allDashboardItems.find((item) => item.dashboard_id === dashboardId);
-        if (!_dashboard) throw new Error('Dashboard not found');
-
-        const _dashboardNameList = getDashboardNameList(_dashboardType);
-        const _dashboardWidgets = await listDashboardWidgets(_dashboard.dashboard_id);
-        const _createdLayouts = await getSharedDashboardLayouts(_dashboard.layouts, _dashboardWidgets, _state.costDataSource);
-        const _createdDashboardParams: DashboardCreateParams = {
-            name: getClonedName(_dashboardNameList, _dashboard.name),
-            layouts: _createdLayouts,
-            options: _dashboard.options || {},
-            labels: _dashboard.labels || [],
-            tags: { created_by: _state.userId },
-            folder_id: folderId,
-            vars: _dashboard.vars,
-            vars_schema: _dashboard.vars_schema,
-        };
-        if (_state.isAdminMode) {
-            (_createdDashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
-        } else if (!isPrivate) {
-            (_createdDashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
-        }
-        const createdDashboard = await createDashboard(_dashboardType, _createdDashboardParams);
-        return createdDashboard;
-    };
-    const addWidgetToDashboard = async (dashboardId: string, widgetId: string) => {
-        const _allDashboardItems = [...state.privateDashboardItems, ...state.publicDashboardItems];
-        const _dashboard = _allDashboardItems.find((item) => item.dashboard_id === dashboardId);
-        const _layouts = cloneDeep(_dashboard?.layouts || []);
-        if (_layouts.length) {
-            const _targetLayout = _layouts[0];
-            if (_targetLayout.widgets) {
-                _targetLayout.widgets.push(widgetId);
-            } else {
-                _targetLayout.widgets = [widgetId];
-            }
-            _layouts[0] = _targetLayout;
-        } else {
-            _layouts.push({
-                widgets: [widgetId],
-            });
-        }
-
-        await updateDashboard(dashboardId, {
-            dashboard_id: dashboardId,
-            layouts: _layouts,
-        });
-    };
-
-    // folder
-    const createFolder = async (name: string, isPrivate: boolean): Promise<string|undefined> => {
-        try {
-            const fetcher = isPrivate ? SpaceConnector.clientV2.dashboard.privateFolder.create : SpaceConnector.clientV2.dashboard.publicFolder.create;
-            const _existingFolderNameList = isPrivate ? state.privateFolderItems.map((d) => d.name) : state.publicFolderItems.map((d) => d.name);
-            const params: FolderCreateParams = {
-                name: getClonedName(_existingFolderNameList, name),
-                tags: { created_by: _state.userId },
-            };
-            if (!isPrivate) {
-                (params as PublicFolderCreateParameters).resource_group = _state.isAdminMode ? RESOURCE_GROUP.DOMAIN : RESOURCE_GROUP.WORKSPACE;
-            }
-            const createdFolder = await fetcher(params);
-            return createdFolder.folder_id;
-        } catch (e) {
-            return undefined;
-        }
-    };
 
     const actions = {
         load,
-        createDashboard,
         updateDashboard,
-        deleteDashboard,
-        getDashboardNameList,
         reset,
-        createFolder,
-        cloneDashboard,
-        addWidgetToDashboard,
     };
 
     return {
diff --git a/apps/web/src/store/display/display-store.ts b/apps/web/src/store/display/display-store.ts
index ecc6398c57..5e41bf3de3 100644
--- a/apps/web/src/store/display/display-store.ts
+++ b/apps/web/src/store/display/display-store.ts
@@ -13,8 +13,8 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import { SpaceRouter } from '@/router';
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { NotificationListParameters } from '@/schema/notification/notification/api-verbs/list';
 import type { NotificationModel } from '@/schema/notification/notification/model';
 import { i18n } from '@/translations';
diff --git a/apps/web/src/store/notice/index.ts b/apps/web/src/store/notice/index.ts
index 020d5f258f..ef5628008e 100644
--- a/apps/web/src/store/notice/index.ts
+++ b/apps/web/src/store/notice/index.ts
@@ -7,7 +7,7 @@ import { defineStore } from 'pinia';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { PostListParameters } from '@/schema/board/post/api-verbs/list';
 import { POST_BOARD_TYPE } from '@/schema/board/post/constant';
 import type { PostModel } from '@/schema/board/post/model';
diff --git a/apps/web/src/store/reference/app-reference-store.ts b/apps/web/src/store/reference/app-reference-store.ts
index 828e612ad5..00c25cba9a 100644
--- a/apps/web/src/store/reference/app-reference-store.ts
+++ b/apps/web/src/store/reference/app-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { AppListParameters } from '@/schema/identity/app/api-verbs/list';
 import type { AppModel } from '@/schema/identity/app/model';
 
diff --git a/apps/web/src/store/reference/cloud-service-type-reference-store.ts b/apps/web/src/store/reference/cloud-service-type-reference-store.ts
index 7035cc6198..1d8a3345c5 100644
--- a/apps/web/src/store/reference/cloud-service-type-reference-store.ts
+++ b/apps/web/src/store/reference/cloud-service-type-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceTypeListParameters } from '@/schema/inventory/cloud-service-type/api-verbs/list';
 import type { CloudServiceTypeModel } from '@/schema/inventory/cloud-service-type/model';
 
diff --git a/apps/web/src/store/reference/cloue-service-query-set-reference-store.ts b/apps/web/src/store/reference/cloue-service-query-set-reference-store.ts
index fae5bb0436..1d5524a0ae 100644
--- a/apps/web/src/store/reference/cloue-service-query-set-reference-store.ts
+++ b/apps/web/src/store/reference/cloue-service-query-set-reference-store.ts
@@ -7,7 +7,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CloudServiceQuerySetListParameters } from '@/schema/inventory/cloud-service-query-set/api-verbs/list';
 import type { CloudServiceQuerySetModel } from '@/schema/inventory/cloud-service-query-set/model';
 
diff --git a/apps/web/src/store/reference/collector-reference-store.ts b/apps/web/src/store/reference/collector-reference-store.ts
index 5e3d6d471d..05cfd877bb 100644
--- a/apps/web/src/store/reference/collector-reference-store.ts
+++ b/apps/web/src/store/reference/collector-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { CollectorListParameters } from '@/schema/inventory/collector/api-verbs/list';
 import type { CollectorModel } from '@/schema/inventory/collector/model';
 
diff --git a/apps/web/src/store/reference/cost-data-source-reference-store.ts b/apps/web/src/store/reference/cost-data-source-reference-store.ts
index 4f353d565c..f2bc7fb3c4 100644
--- a/apps/web/src/store/reference/cost-data-source-reference-store.ts
+++ b/apps/web/src/store/reference/cost-data-source-reference-store.ts
@@ -7,9 +7,9 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { CostDataSourceListParameters } from '@/schema/cost-analysis/data-source/api-verbs/list';
-import type { CostDataSourceModel } from '@/schema/cost-analysis/data-source/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostDataSourceListParameters } from '@/api-clients/cost-analysis/data-source/schema/api-verbs/list';
+import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import type {
diff --git a/apps/web/src/store/reference/escalation-policy-reference-store.ts b/apps/web/src/store/reference/escalation-policy-reference-store.ts
index 51c54cc316..ab71eb3361 100644
--- a/apps/web/src/store/reference/escalation-policy-reference-store.ts
+++ b/apps/web/src/store/reference/escalation-policy-reference-store.ts
@@ -5,19 +5,19 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { EscalationPolicyListParameters } from '@/schema/alert-manager/escalation-policy/api-verbs/list';
 import type { EscalationPolicyModel } from '@/schema/alert-manager/escalation-policy/model';
 import type { EscalationPolicyListParameters as EscalationPolicyListParametersV1 } from '@/schema/monitoring/escalation-policy/api-verbs/list';
 import type { EscalationPolicyModel as EscalationPolicyModelV1 } from '@/schema/monitoring/escalation-policy/model';
 
-import { useDomainStore } from '@/store/domain/domain-store';
 import type {
     ReferenceLoadOptions, ReferenceItem, ReferenceMap, ReferenceTypeInfo,
 } from '@/store/reference/type';
 import { useUserStore } from '@/store/user/user-store';
 
-import config from '@/lib/config';
+
+import { useIsAlertManagerV2Enabled } from '@/lib/config/composables/use-is-alert-manager-v2-enabled';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
@@ -30,10 +30,10 @@ let lastLoadedTime = 0;
 
 export const useEscalationPolicyReferenceStore = defineStore('reference-escalation-policy', () => {
     const userStore = useUserStore();
-    const domainStore = useDomainStore();
     const state = reactive({
         items: null as EscalationPolicyReferenceMap | null,
     });
+    const isAlertManagerV2Enabled = useIsAlertManagerV2Enabled();
 
     const getters = reactive({
         escalationPolicyItems: asyncComputed<EscalationPolicyReferenceMap>(async () => {
@@ -60,8 +60,7 @@ export const useEscalationPolicyReferenceStore = defineStore('reference-escalati
 
         const referenceMap: EscalationPolicyReferenceMap = {};
         try {
-            const isAlertManagerVersionV2 = (config.get('ADVANCED_SERVICE')?.alert_manager_v2 ?? []).includes(domainStore.state.domainId);
-            const fetcher = isAlertManagerVersionV2
+            const fetcher = isAlertManagerV2Enabled
                 ? SpaceConnector.clientV2.alertManager.escalationPolicy.list<EscalationPolicyListParameters, ListResponse<EscalationPolicyModel>>({
                     query: {
                         only: ['escalation_policy_id', 'name', 'service_id'],
diff --git a/apps/web/src/store/reference/metric-reference-store.ts b/apps/web/src/store/reference/metric-reference-store.ts
index 09b1be648d..4a881bfefe 100644
--- a/apps/web/src/store/reference/metric-reference-store.ts
+++ b/apps/web/src/store/reference/metric-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { MetricListParameters } from '@/schema/inventory/metric/api-verbs/list';
 import type { MetricModel } from '@/schema/inventory/metric/model';
 
diff --git a/apps/web/src/store/reference/namespace-reference-store.ts b/apps/web/src/store/reference/namespace-reference-store.ts
index 62b17b5c5a..ddc98294fe 100644
--- a/apps/web/src/store/reference/namespace-reference-store.ts
+++ b/apps/web/src/store/reference/namespace-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { NamespaceListParameters } from '@/schema/inventory/namespace/api-verbs/list';
 import type { NamespaceModel } from '@/schema/inventory/namespace/model';
 
diff --git a/apps/web/src/store/reference/plugin-reference-store.ts b/apps/web/src/store/reference/plugin-reference-store.ts
index 368c1716dc..168f9b4396 100644
--- a/apps/web/src/store/reference/plugin-reference-store.ts
+++ b/apps/web/src/store/reference/plugin-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { PluginListParameters } from '@/schema/repository/plugin/api-verbs/list';
 import type { PluginModel } from '@/schema/repository/plugin/model';
 
diff --git a/apps/web/src/store/reference/project-group-reference-store.ts b/apps/web/src/store/reference/project-group-reference-store.ts
index 32aef6db40..750a5064b5 100644
--- a/apps/web/src/store/reference/project-group-reference-store.ts
+++ b/apps/web/src/store/reference/project-group-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectGroupListParameters } from '@/schema/identity/project-group/api-verbs/list';
 import type { ProjectGroupModel } from '@/schema/identity/project-group/model';
 
diff --git a/apps/web/src/store/reference/project-reference-store.ts b/apps/web/src/store/reference/project-reference-store.ts
index 15adcd924a..f49908ada1 100644
--- a/apps/web/src/store/reference/project-reference-store.ts
+++ b/apps/web/src/store/reference/project-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectListParameters } from '@/schema/identity/project/api-verbs/list';
 import type { ProjectModel } from '@/schema/identity/project/model';
 import type { ProjectType } from '@/schema/identity/project/type';
diff --git a/apps/web/src/store/reference/protocol-reference-store.ts b/apps/web/src/store/reference/protocol-reference-store.ts
index f492df8343..ef3453ab5c 100644
--- a/apps/web/src/store/reference/protocol-reference-store.ts
+++ b/apps/web/src/store/reference/protocol-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProtocolListParameters } from '@/schema/notification/protocol/api-verbs/list';
 import type { ProtocolModel } from '@/schema/notification/protocol/model';
 
diff --git a/apps/web/src/store/reference/provider-reference-store.ts b/apps/web/src/store/reference/provider-reference-store.ts
index 5f195f076d..dfc249f9c0 100644
--- a/apps/web/src/store/reference/provider-reference-store.ts
+++ b/apps/web/src/store/reference/provider-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProviderListParameters } from '@/schema/identity/provider/api-verbs/list';
 import type { ProviderModel } from '@/schema/identity/provider/model';
 
diff --git a/apps/web/src/store/reference/public-dashboard-reference-store.ts b/apps/web/src/store/reference/public-dashboard-reference-store.ts
index 49ffbf5cab..a6fa4c16f5 100644
--- a/apps/web/src/store/reference/public-dashboard-reference-store.ts
+++ b/apps/web/src/store/reference/public-dashboard-reference-store.ts
@@ -5,9 +5,9 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { PublicDashboardListParameters } from '@/schema/dashboard/public-dashboard/api-verbs/list';
-import type { PublicDashboardModel } from '@/schema/dashboard/public-dashboard/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 
 import type {
     ReferenceItem, ReferenceLoadOptions, ReferenceMap,
diff --git a/apps/web/src/store/reference/public-folder-reference-store.ts b/apps/web/src/store/reference/public-folder-reference-store.ts
index 95e4b11cd4..6b850d5b5e 100644
--- a/apps/web/src/store/reference/public-folder-reference-store.ts
+++ b/apps/web/src/store/reference/public-folder-reference-store.ts
@@ -5,9 +5,9 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import type { PublicFolderListParameters } from '@/schema/dashboard/public-folder/api-verbs/list';
-import type { PublicFolderModel } from '@/schema/dashboard/public-folder/model';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { PublicFolderListParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/list';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 
 import type {
     ReferenceItem, ReferenceLoadOptions, ReferenceMap,
diff --git a/apps/web/src/store/reference/region-reference-store.ts b/apps/web/src/store/reference/region-reference-store.ts
index c728f0c2e0..bfc61b386a 100644
--- a/apps/web/src/store/reference/region-reference-store.ts
+++ b/apps/web/src/store/reference/region-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RegionListParameters } from '@/schema/inventory/region/api-verbs/list';
 import type { RegionModel } from '@/schema/inventory/region/model';
 
diff --git a/apps/web/src/store/reference/role-reference-store.ts b/apps/web/src/store/reference/role-reference-store.ts
index dca708f93b..8d1a27a7fd 100644
--- a/apps/web/src/store/reference/role-reference-store.ts
+++ b/apps/web/src/store/reference/role-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import type { RoleListBasicRoleParameters } from '@/schema/identity/role/api-verbs/list-basic-role';
 import type { BasicRoleModel, RoleModel } from '@/schema/identity/role/model';
diff --git a/apps/web/src/store/reference/secret-reference-store.ts b/apps/web/src/store/reference/secret-reference-store.ts
index 3eddeb1d34..d595de5168 100644
--- a/apps/web/src/store/reference/secret-reference-store.ts
+++ b/apps/web/src/store/reference/secret-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { SecretListParameters } from '@/schema/secret/secret/api-verbs/list';
 import type { SecretModel } from '@/schema/secret/secret/model';
 
diff --git a/apps/web/src/store/reference/service-account-reference-store.ts b/apps/web/src/store/reference/service-account-reference-store.ts
index d555290127..fee57cfdd2 100644
--- a/apps/web/src/store/reference/service-account-reference-store.ts
+++ b/apps/web/src/store/reference/service-account-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceAccountListParameters } from '@/schema/identity/service-account/api-verbs/list';
 import type { ServiceAccountModel } from '@/schema/identity/service-account/model';
 
diff --git a/apps/web/src/store/reference/service-reference-store.ts b/apps/web/src/store/reference/service-reference-store.ts
index 90e5b48e9b..c88d568c2a 100644
--- a/apps/web/src/store/reference/service-reference-store.ts
+++ b/apps/web/src/store/reference/service-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ServiceListParameters } from '@/schema/alert-manager/service/api-verbs/list';
 import type { ServiceModel } from '@/schema/alert-manager/service/model';
 
@@ -17,6 +17,7 @@ import type {
 import { useUserStore } from '@/store/user/user-store';
 
 import config from '@/lib/config';
+import { useIsAlertManagerV2Enabled } from '@/lib/config/composables/use-is-alert-manager-v2-enabled';
 import { MANAGED_VARIABLE_MODELS } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
@@ -30,6 +31,7 @@ let lastLoadedTime = 0;
 export const useServiceReferenceStore = defineStore('reference-service', () => {
     const userStore = useUserStore();
     const domainStore = useDomainStore();
+    const isAlertManagerV2Enabled = useIsAlertManagerV2Enabled();
 
     const state = reactive({
         items: null as ServiceReferenceMap | null,
@@ -67,6 +69,7 @@ export const useServiceReferenceStore = defineStore('reference-service', () => {
             },
         };
 
+        if (!isAlertManagerV2Enabled) return;
         try {
             const { results } = await SpaceConnector.clientV2.alertManager.service.list<ServiceListParameters, ListResponse<ServiceModel>>(params);
 
diff --git a/apps/web/src/store/reference/trusted-account-reference-store.ts b/apps/web/src/store/reference/trusted-account-reference-store.ts
index d7e04f6f2b..7832889a72 100644
--- a/apps/web/src/store/reference/trusted-account-reference-store.ts
+++ b/apps/web/src/store/reference/trusted-account-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { TrustedAccountListParameters } from '@/schema/identity/trusted-account/api-verbs/list';
 import type { TrustedAccountModel } from '@/schema/identity/trusted-account/model';
 
diff --git a/apps/web/src/store/reference/user-group-reference-store.ts b/apps/web/src/store/reference/user-group-reference-store.ts
index cc25d738c6..dd35b49b41 100644
--- a/apps/web/src/store/reference/user-group-reference-store.ts
+++ b/apps/web/src/store/reference/user-group-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserGroupListParameters } from '@/schema/identity/user-group/api-verbs/list';
 import type { UserGroupModel } from '@/schema/identity/user-group/model';
 
diff --git a/apps/web/src/store/reference/user-reference-store.ts b/apps/web/src/store/reference/user-reference-store.ts
index 6c8ad65df2..0b7b0f41a0 100644
--- a/apps/web/src/store/reference/user-reference-store.ts
+++ b/apps/web/src/store/reference/user-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { RoleBindingModel } from '@/schema/identity/role-binding/model';
 import type { RoleListParameters } from '@/schema/identity/role/api-verbs/list';
 import { ROLE_STATE } from '@/schema/identity/role/constant';
diff --git a/apps/web/src/store/reference/webhook-reference-store.ts b/apps/web/src/store/reference/webhook-reference-store.ts
index e29a8b9f97..2814e5106e 100644
--- a/apps/web/src/store/reference/webhook-reference-store.ts
+++ b/apps/web/src/store/reference/webhook-reference-store.ts
@@ -5,19 +5,18 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WebhookListParameters } from '@/schema/alert-manager/webhook/api-verbs/list';
 import type { WebhookModel } from '@/schema/alert-manager/webhook/model';
 import type { WebhookListParameters as WebhookListParametersV1 } from '@/schema/monitoring/webhook/api-verbs/list';
 import type { WebhookModel as WebhookModelV1 } from '@/schema/monitoring/webhook/model';
 
-import { useDomainStore } from '@/store/domain/domain-store';
 import type {
     ReferenceItem, ReferenceLoadOptions, ReferenceMap, ReferenceTypeInfo,
 } from '@/store/reference/type';
 import { useUserStore } from '@/store/user/user-store';
 
-import config from '@/lib/config';
+import { useIsAlertManagerV2Enabled } from '@/lib/config/composables/use-is-alert-manager-v2-enabled';
 import { MANAGED_VARIABLE_MODELS } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
@@ -30,11 +29,12 @@ let lastLoadedTime = 0;
 
 export const useWebhookReferenceStore = defineStore('reference-webhook', () => {
     const userStore = useUserStore();
-    const domainStore = useDomainStore();
     const state = reactive({
         items: null as WebhookReferenceMap | null,
     });
 
+    const isAlertManagerV2Enabled = useIsAlertManagerV2Enabled();
+
     const getters = reactive({
         webhookItems: asyncComputed<WebhookReferenceMap>(async () => {
             if (!userStore.state.currentGrantInfo?.scope || userStore.state.currentGrantInfo?.scope === 'USER') return {};
@@ -60,8 +60,7 @@ export const useWebhookReferenceStore = defineStore('reference-webhook', () => {
 
         const referenceMap: WebhookReferenceMap = {};
         try {
-            const isAlertManagerVersionV2 = (config.get('ADVANCED_SERVICE')?.alert_manager_v2 ?? []).includes(domainStore.state.domainId);
-            const fetcher = isAlertManagerVersionV2
+            const fetcher = isAlertManagerV2Enabled
                 ? SpaceConnector.clientV2.alertManager.webhook.list<WebhookListParameters, ListResponse<WebhookModel>>
                 : SpaceConnector.clientV2.monitoring.webhook.list<WebhookListParametersV1, ListResponse<WebhookModelV1>>;
 
diff --git a/apps/web/src/store/reference/workspace-group-reference-store.ts b/apps/web/src/store/reference/workspace-group-reference-store.ts
index 2d0510358b..22a82c5b02 100644
--- a/apps/web/src/store/reference/workspace-group-reference-store.ts
+++ b/apps/web/src/store/reference/workspace-group-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceGroupListParameters } from '@/schema/identity/workspace-group/api-verbs/list';
 import type { WorkspaceGroupModel } from '@/schema/identity/workspace-group/model';
 
diff --git a/apps/web/src/store/reference/workspace-reference-store.ts b/apps/web/src/store/reference/workspace-reference-store.ts
index 77093c10ba..1ce2a3d970 100644
--- a/apps/web/src/store/reference/workspace-reference-store.ts
+++ b/apps/web/src/store/reference/workspace-reference-store.ts
@@ -5,7 +5,7 @@ import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
-import type { ListResponse } from '@/schema/_common/api-verbs/list';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { WorkspaceListParameters } from '@/schema/identity/workspace/api-verbs/list';
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';