From f6adea337f846002d2e3851f51daf16b3dd94efb Mon Sep 17 00:00:00 2001
From: seungyeoneeee <sylee1274@mz.co.kr>
Date: Thu, 24 Apr 2025 13:06:18 +0900
Subject: [PATCH 1/8] fix: fix major bug about monthly chart

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../cost-explorer/components/BudgetUsageTrendMonthly.vue  | 2 +-
 .../components/BudgetUsageTrendMonthlyChart.vue           | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthly.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthly.vue
index 02f3dcdd62..dcc3c780cb 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthly.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthly.vue
@@ -51,7 +51,7 @@ watch(() => state.budgetData, async () => {
 
 <template>
     <div>
-        <budget-usage-trend-monthly-chart />
+        <budget-usage-trend-monthly-chart :data="state.data" />
         <budget-usage-trend-monthly-table :data="state.data" />
     </div>
 </template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue
index d0a78d923c..648c984ef1 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyChart.vue
@@ -26,8 +26,14 @@ const budgetData = computed(() => budgetPageStore.$state.budgetData);
 
 const chartContext = ref<HTMLElement|null>(null);
 
+interface Props {
+    data: any;
+}
+
+const props = defineProps<Props>();
+
 const state = reactive({
-    data: [],
+    data: props.data,
     xAxisData: computed(() => state.data.map((d) => dayjs.utc(d.date).format('MMM YYYY'))),
     yAxisData: computed(() => [0, 25, 50, 75, 100]),
     chart: null as EChartsType | null,

From 95fde92f3737b9321355927b1e830e1c0b8dcc63 Mon Sep 17 00:00:00 2001
From: seungyeoneeee <sylee1274@mz.co.kr>
Date: Thu, 24 Apr 2025 13:13:27 +0900
Subject: [PATCH 2/8] fix: fix minor bug about threshold setting

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../components/BudgetCreateStep3.vue          | 30 +++++++------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue
index 399938a680..6c987a4093 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateStep3.vue
@@ -30,28 +30,18 @@ const userReferenceStore = useUserReferenceStore();
 
 const router = useRouter();
 
-const invalidThreshold = ref<boolean>(false);
+const invalidThreshold = ref<boolean[]>([]);
 
 const isAlertRecipientsSelected = ref<boolean>(false);
 
 watch(() => budgetCreatePageState.thresholds, () => {
-    const filteredThresholdInvalidState = budgetCreatePageState.thresholds.filter((threshold) => {
-        if (threshold.value) {
-            if (Number(threshold.value) > 0 && Number(threshold.value) < 101) {
-                return false;
-            } if (Number(threshold.value) <= 0 || typeof threshold.value !== 'number') {
-                return true;
-            }
-            return true;
-        }
-        return true;
+    const values = budgetCreatePageState.thresholds.map((t) => Number(t.value));
+    invalidThreshold.value = budgetCreatePageState.thresholds.map((threshold, idx) => {
+        const val = values[idx];
+        const isValidNumber = val > 0 && val < 101;
+        const isDuplicate = values.indexOf(val) !== idx;
+        return !(isValidNumber && !isDuplicate);
     });
-
-    if (filteredThresholdInvalidState.length === 0) {
-        invalidThreshold.value = true;
-    } else {
-        invalidThreshold.value = false;
-    }
 }, { deep: true, immediate: true });
 
 watch(() => budgetCreatePageState.recipients.users, () => {
@@ -140,7 +130,7 @@ const createBudget = async (type: 'skip' | 'set') => {
                        :help-text="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.EXCEEDS_AMOUNT_DESCRIPTION')"
                        required
                        :invalid-text="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.THRESHOLD_INVALID_TEXT')"
-                       :invalid="!invalidThreshold"
+                       :invalid="invalidThreshold.some(v => v)"
         >
             <div class="flex flex-col gap-2">
                 <div v-for="(threshold, idx) in budgetCreatePageState.thresholds"
@@ -149,7 +139,7 @@ const createBudget = async (type: 'skip' | 'set') => {
                 >
                     <p-text-input
                         :value="threshold.value"
-                        :invalid="!invalidThreshold"
+                        :invalid="invalidThreshold[idx]"
                         @update:value="(value) => handleUpdateThreshold(value, idx)"
                     >
                         <template #input-right>
@@ -199,7 +189,7 @@ const createBudget = async (type: 'skip' | 'set') => {
                 {{ $t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SKIP_FOR_LATER') }}
             </p-button>
             <p-button class="substitutive"
-                      :disabled="!invalidThreshold || !isAlertRecipientsSelected"
+                      :disabled="invalidThreshold.includes(true) || !isAlertRecipientsSelected"
                       :loading="budgetCreatePageState.loading"
                       @click="createBudget('set')"
             >

From 4c556055e32e395f808b075637e1ef9a73428c0c Mon Sep 17 00:00:00 2001
From: seungyeoneeee <sylee1274@mz.co.kr>
Date: Thu, 24 Apr 2025 13:36:32 +0900
Subject: [PATCH 3/8] feat: update search filter of project select dropdown

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../cost-explorer/components/BudgetMainToolset.vue     | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue b/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
index 4192500f48..3620aaa040 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
@@ -128,11 +128,13 @@ watch(() => state, () => {
                            appearance-type="badge"
                            use-fixed-menu-style
                            show-select-marker
+                           is-filterable
                            multi-selectable
                            show-clear-selection
                            show-delete-all-button
                            selection-highlight
                            :page-size="15"
+                           class="project-select-dropdown"
         >
             <template #dropdown-left-area>
                 <p-i name="ic_project"
@@ -186,11 +188,17 @@ watch(() => state, () => {
 
 <style scoped lang="postcss">
 .budget-main-toolset {
-    @apply mt-3 flex gap-2 items-center;
+    @apply mt-3 flex items-center gap-2;
+
     .p-select-dropdown {
         min-width: unset;
     }
 }
+
+.project-select-dropdown {
+    max-width: 6.625rem;
+}
+
 .divider {
     height: 1rem;
     width: 0.0625rem;

From ce628ad002b002948ef113152b0a6867d4302b68 Mon Sep 17 00:00:00 2001
From: seungyeoneeee <sylee1274@mz.co.kr>
Date: Thu, 24 Apr 2025 14:45:37 +0900
Subject: [PATCH 4/8] fix: fix major feedback about budget main list filtering

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../components/BudgetMainList.vue             |  8 ++++
 .../components/BudgetMainToolset.vue          | 37 +++++++++++++++++--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetMainList.vue b/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
index 86d57d5e3e..60316c0f12 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetMainList.vue
@@ -282,6 +282,14 @@ const getBudgetFilters = (): ApiFilter[] => {
         });
     }
 
+    if (state.query?.workspaceList && state.query.workspaceList.length > 0) {
+        filters.push({
+            k: 'workspace_id',
+            v: state.query.workspaceList,
+            o: 'contain_in',
+        });
+    }
+
     if (state.query?.projectList && state.query?.projectList?.length) {
         filters.push({
             k: 'project_id',
diff --git a/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue b/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
index 3620aaa040..f7f2455026 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-import { computed, reactive, watch } from 'vue';
+import type { ComputedRef } from 'vue';
+import {
+    computed, reactive, watch,
+} from 'vue';
 
 import dayjs from 'dayjs';
 
@@ -8,6 +11,7 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 
 import { i18n } from '@/translations';
 
+import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
@@ -16,6 +20,7 @@ const emit = defineEmits<{(e: 'update:select-month-modal-visible', value: boolea
 
 const allReferenceStore = useAllReferenceStore();
 const allReferenceGetters = allReferenceStore.getters;
+const appContextStore = useAppContextStore();
 
 interface BudgetMainToolsetState {
     targetList: SelectDropdownMenuItem[];
@@ -30,11 +35,15 @@ interface BudgetMainToolsetState {
     selectedServiceAccountList: SelectDropdownMenuItem[];
     utilizationList: SelectDropdownMenuItem[];
     selectedUtilization: string;
+    workspaceList: ComputedRef<SelectDropdownMenuItem[]>;
+    selectedWorkspaceList: SelectDropdownMenuItem[];
 }
 
 const storeState = reactive({
     serviceAccount: computed(() => allReferenceGetters.serviceAccount),
     project: computed<ProjectReferenceMap>(() => allReferenceGetters.project),
+    isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
+    workspace: computed(() => allReferenceGetters.workspace),
 });
 
 const state = reactive<BudgetMainToolsetState>({
@@ -78,6 +87,11 @@ const state = reactive<BudgetMainToolsetState>({
         { name: 'overTenPercentSpent', label: i18n.t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.BUDGET_SPENT_USAGE', { percent: 10 }) },
     ],
     selectedUtilization: 'all',
+    workspaceList: computed(() => Object.values(storeState.workspace).map((c: any) => ({
+        name: c.key,
+        label: c.label,
+    }))),
+    selectedWorkspaceList: [],
 });
 
 watch(() => storeState.serviceAccount, () => {
@@ -97,6 +111,7 @@ watch(() => storeState.project, () => {
 watch(() => state, () => {
     emit('update:query', {
         target: state.selectedTarget,
+        workspaceList: state.selectedWorkspaceList.map((w) => w.name) ?? [],
         projectList: state.selectedProjectList.map((p) => p.name) ?? [],
         serviceAccountList: state.selectedServiceAccountList.map((s) => s.name),
         year: state.selectedYear,
@@ -121,6 +136,18 @@ watch(() => state, () => {
             />
             <span class="font-bold text-sm">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.FILTER') }}:</span>
         </div>
+        <p-select-dropdown selection-label="Workspace"
+                           style-type="rounded"
+                           show-select-marker
+                           multi-selectable
+                           show-clear-selection
+                           appearance-type="badge"
+                           is-filterable
+                           selection-highlight
+                           :menu="state.workspaceList"
+                           :selected.sync="state.selectedWorkspaceList"
+                           class="filterable-select-dropdown"
+        />
         <p-select-dropdown style-type="rounded"
                            :menu="state.projectList"
                            :selected.sync="state.selectedProjectList"
@@ -134,7 +161,7 @@ watch(() => state, () => {
                            show-delete-all-button
                            selection-highlight
                            :page-size="15"
-                           class="project-select-dropdown"
+                           class="filterable-select-dropdown"
         >
             <template #dropdown-left-area>
                 <p-i name="ic_project"
@@ -151,11 +178,13 @@ watch(() => state, () => {
                            appearance-type="badge"
                            use-fixed-menu-style
                            show-select-marker
+                           is-filterable
                            multi-selectable
                            show-clear-selection
                            show-delete-all-button
                            selection-highlight
                            :page-size="15"
+                           class="filterable-select-dropdown"
         >
             <template #dropdown-left-area>
                 <p-i name="ic_service_service-account"
@@ -195,8 +224,8 @@ watch(() => state, () => {
     }
 }
 
-.project-select-dropdown {
-    max-width: 6.625rem;
+.filterable-select-dropdown {
+    width: initial;
 }
 
 .divider {

From 7c51f890d57c3877e84fa732c503cb880184af80 Mon Sep 17 00:00:00 2001
From: seungyeoneeee <sylee1274@mz.co.kr>
Date: Thu, 24 Apr 2025 23:19:17 +0900
Subject: [PATCH 5/8] fix: fix minor change about admin mode

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../services/cost-explorer/components/BudgetMainToolset.vue    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue b/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
index f7f2455026..420193a118 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetMainToolset.vue
@@ -136,7 +136,8 @@ watch(() => state, () => {
             />
             <span class="font-bold text-sm">{{ $t('BILLING.COST_MANAGEMENT.BUDGET.MAIN.FILTER') }}:</span>
         </div>
-        <p-select-dropdown selection-label="Workspace"
+        <p-select-dropdown v-if="storeState.isAdminMode"
+                           selection-label="Workspace"
                            style-type="rounded"
                            show-select-marker
                            multi-selectable

From b439ab633736f33e425ce9300745ff8e77829895 Mon Sep 17 00:00:00 2001
From: seungyeoneeee <sylee1274@mz.co.kr>
Date: Mon, 28 Apr 2025 16:12:55 +0900
Subject: [PATCH 6/8] fix: fix major bug about budget create step2

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../components/BudgetCreateStep2.vue          | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
index 4ea3ba7fe6..93edbea78c 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateStep2.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-    computed, reactive, watch,
+    computed, reactive, watch, ref,
 } from 'vue';
 
 import dayjs from 'dayjs';
@@ -30,8 +30,15 @@ import { DEFAULT_UNIFIED_COST_CURRENCY, YAHOO_FINANCE_ID } from '@/services/cost
 import { useBudgetCreatePageStore } from '@/services/cost-explorer/stores/budget-create-page-store';
 
 
+
 const budgetCreatePageStore = useBudgetCreatePageStore();
 const budgetCreatePageState = budgetCreatePageStore.state;
+
+const isStartMonthManuallyChanged = ref(false);
+
+const handleStartMonthPickerClosed = () => {
+    isStartMonthManuallyChanged.value = true;
+};
 const domainStore = useDomainStore();
 const domainState = domainStore.state;
 const allReferenceStore = useAllReferenceStore();
@@ -71,8 +78,8 @@ const state = reactive({
 
 
 const isCycleEnabled = computed(() => budgetCreatePageState.startMonth.length > 0
-           && budgetCreatePageState.endMonth.length > 0
-           && state.existingBudgetUsageList.length === 0);
+    && budgetCreatePageState.endMonth.length > 0
+    && state.existingBudgetUsageList.length === 0);
 
 const emit = defineEmits<{(e: 'click-next'): void}>();
 
@@ -193,7 +200,7 @@ watch(() => [budgetCreatePageState.startMonth, budgetCreatePageState.endMonth],
         );
         budgetCreatePageState.budgetEachDate = Array(12).fill('');
     }
-}, { immediate: true });
+}, { deep: true, immediate: true });
 
 watch(() => budgetCreatePageState.selectedMonthlyBudgetAllocation, (nv, ov) => {
     if (nv !== ov) {
@@ -212,7 +219,7 @@ watch(() => budgetCreatePageState.selectedMonthlyBudgetAllocation, (nv, ov) => {
 
         budgetCreatePageStore.setPlannedLimits([]);
     }
-}, { immediate: true });
+}, { deep: true, immediate: true });
 
 watch(() => [
     budgetCreatePageState.selectedMonthlyBudgetAllocation,
@@ -340,7 +347,7 @@ watch(() => [
                     if (isDateInRange(idx)) {
                         return isValidPositiveNumber(v);
                     }
-                    return true; // skip validation for disabled months
+                    return true;
                 });
 
             if (allValuesFilled) {
@@ -358,7 +365,7 @@ watch(() => budgetCreatePageState.selectedMonthlyBudgetAllocation, (nv, ov) => {
     if (nv !== ov) {
         budgetCreatePageStore.setPlannedLimits([]);
     }
-}, { immediate: true });
+}, { deep: true, immediate: true });
 
 watch([() => budgetCreatePageState.startMonth, () => budgetCreatePageState.endMonth], () => {
     if (budgetCreatePageState.startMonth.length > 0 || budgetCreatePageState.endMonth.length > 0) {
@@ -392,19 +399,28 @@ watch([
             budgetCreatePageStore.setBudgetYear(endYear);
         }
     }
-}, { immediate: true });
+}, { deep: true, immediate: true });
 
 watch(() => budgetCreatePageState.limit, () => {
     if (budgetCreatePageState.limit === null) {
         budgetCreatePageState.limit = undefined;
     }
-}, { immediate: true });
+}, { deep: true, immediate: true });
 
 watch(() => budgetCreatePageState.startMonth[0], (newVal, oldVal) => {
     if (newVal !== oldVal && budgetCreatePageState.currentStep === 2) {
-        const isValidationReturn = budgetCreatePageState.time_unit !== '' || budgetCreatePageState.endMonth.length > 0;
-        if (!isValidationReturn) {
-            budgetCreatePageState.endMonth = [];
+        if (isStartMonthManuallyChanged.value) {
+            budgetCreatePageStore.setEnd([]);
+            budgetCreatePageState.selectedMonthlyBudgetAllocation = '';
+            budgetCreatePageState.budgetAppliedSameAmount = undefined;
+            budgetCreatePageState.initialAmount = undefined;
+            budgetCreatePageState.monthlyGrowthRate = undefined;
+            budgetCreatePageState.budgetEachDate = Array(12).fill('');
+            isStartMonthManuallyChanged.value = false;
+        }
+        if (budgetCreatePageState.startMonth.length === 0
+            || budgetCreatePageState.endMonth.length === 0
+            || state.existingBudgetUsageList.length > 0) {
             budgetCreatePageState.time_unit = '';
         }
     }
@@ -460,6 +476,7 @@ watch(() => budgetCreatePageState.startMonth[0], (newVal, oldVal) => {
                                            :selected-dates.sync="budgetCreatePageState.startMonth"
                                            :placeholder="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.SELECT_MONTH')"
                                            :invalid="state.existingBudgetUsageList.length > 0"
+                                           @close="handleStartMonthPickerClosed"
                         />
                     </p-field-group>
                     <p-field-group :label="$t('BILLING.COST_MANAGEMENT.BUDGET.FORM.CREATE.END_MONTH')"

From 813003f97f8bd7094c175bd3a6f7b0e90944f85c Mon Sep 17 00:00:00 2001
From: seungyeoneeee <sylee1274@mz.co.kr>
Date: Wed, 30 Apr 2025 16:44:07 +0900
Subject: [PATCH 7/8] fix: fix major bug about external link to cost analysis

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../BudgetUsageTrendMonthlyTable.vue          | 30 ++++++++++++------
 .../components/BudgetUsageTrendTotalTable.vue | 31 +++++++++++++------
 .../components/CostAnalysisContent.vue        | 26 +---------------
 .../components/CostAnalysisFiltersPopper.vue  | 22 +++----------
 4 files changed, 48 insertions(+), 61 deletions(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue
index e3137edbe9..212c4087d9 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendMonthlyTable.vue
@@ -11,12 +11,14 @@ import { i18n } from '@/translations';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { CURRENCY_SYMBOL } from '@/store/display/constant';
 
+import { arrayToQueryString, primitiveToQueryString } from '@/lib/router-query-string';
+
+import { UNIFIED_COST_KEY } from '@/services/cost-explorer/constants/cost-explorer-constant';
+import { DYNAMIC_COST_QUERY_SET_PARAMS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
 import { ADMIN_COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/admin/route-constant';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
-import { useCostQuerySetStore } from '@/services/cost-explorer/stores/cost-query-set-store';
 
-import { MANAGED_COST_QUERY_SET_IDS } from '../constants/managed-cost-analysis-query-sets';
 
 interface Props {
     data: any;
@@ -27,7 +29,6 @@ const props = defineProps<Props>();
 const budgetPageStore = useBudgetDetailPageStore();
 const budgetPageState = budgetPageStore.$state;
 const appContextStore = useAppContextStore();
-const costQuerySetStore = useCostQuerySetStore();
 
 const budgetData = computed(() => budgetPageState.budgetData);
 const isAdminMode = computed<boolean>(() => appContextStore.getters.isAdminMode);
@@ -181,15 +182,26 @@ const handleToggleOriginalData = (value: boolean) => {
             </template>
         </p-data-table>
         <p-link :to="{
-                    name: isAdminMode ? ADMIN_COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME : COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME,
+                    name: isAdminMode ? ADMIN_COST_EXPLORER_ROUTE.COST_ANALYSIS.QUERY_SET._NAME : COST_EXPLORER_ROUTE.COST_ANALYSIS.QUERY_SET._NAME,
                     params: {
-                        costQuerySetId: costQuerySetStore.state.costQuerySetList
-                            .filter(c => c.name === MANAGED_COST_QUERY_SET_IDS.MONTHLY_PROJECT)
-                            .map(c => c.cost_query_set_id)[0]
+                        dataSourceId: UNIFIED_COST_KEY,
+                        costQuerySetId: DYNAMIC_COST_QUERY_SET_PARAMS,
                     },
                     query: {
-                        project_id: budgetPageState.budgetData?.project_id,
-                        service_account_id: budgetPageState.budgetData?.service_account_id,
+                        granularity: primitiveToQueryString('MONTHLY'),
+                        group_by: arrayToQueryString(['project_id']),
+                        filters: arrayToQueryString([
+                            {
+                                k: 'project_id',
+                                v: [budgetPageState.budgetData?.project_id],
+                                o: '',
+                            },
+                            {
+                                k: 'service_account_id',
+                                v: [budgetPageState.budgetData?.service_account_id],
+                                o: '',
+                            },
+                        ]),
                     }
                 }"
                 highlight
diff --git a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue
index 32d0a768f8..4405b55b37 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetUsageTrendTotalTable.vue
@@ -12,11 +12,14 @@ import { i18n } from '@/translations';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { CURRENCY_SYMBOL } from '@/store/display/constant';
 
-import { MANAGED_COST_QUERY_SET_IDS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
+import { arrayToQueryString, primitiveToQueryString } from '@/lib/router-query-string';
+
+import { UNIFIED_COST_KEY } from '@/services/cost-explorer/constants/cost-explorer-constant';
+import { DYNAMIC_COST_QUERY_SET_PARAMS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
 import { ADMIN_COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/admin/route-constant';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
-import { useCostQuerySetStore } from '@/services/cost-explorer/stores/cost-query-set-store';
+
 
 interface Props {
     data: any;
@@ -36,7 +39,6 @@ const props = defineProps<Props>();
 const budgetPageStore = useBudgetDetailPageStore();
 const budgetPageState = budgetPageStore.$state;
 const appContextStore = useAppContextStore();
-const costQuerySetStore = useCostQuerySetStore();
 
 const budgetData = computed(() => budgetPageStore.$state.budgetData);
 const isAdminMode = computed<boolean>(() => appContextStore.getters.isAdminMode);
@@ -253,15 +255,26 @@ const handleToggleOriginalData = (value: boolean) => {
         </p-data-table>
 
         <p-link :to="{
-                    name: isAdminMode ? ADMIN_COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME : COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME,
+                    name: isAdminMode ? ADMIN_COST_EXPLORER_ROUTE.COST_ANALYSIS.QUERY_SET._NAME : COST_EXPLORER_ROUTE.COST_ANALYSIS.QUERY_SET._NAME,
                     params: {
-                        costQuerySetId: costQuerySetStore.state.costQuerySetList
-                            .filter(c => c.name === MANAGED_COST_QUERY_SET_IDS.MONTHLY_PROJECT)
-                            .map(c => c.cost_query_set_id)[0]
+                        dataSourceId: UNIFIED_COST_KEY,
+                        costQuerySetId: DYNAMIC_COST_QUERY_SET_PARAMS,
                     },
                     query: {
-                        project_id: budgetPageState.budgetData?.project_id,
-                        service_account_id: budgetPageState.budgetData?.service_account_id,
+                        granularity: primitiveToQueryString('MONTHLY'),
+                        group_by: arrayToQueryString(['project_id']),
+                        filters: arrayToQueryString([
+                            {
+                                k: 'project_id',
+                                v: [budgetPageState.budgetData?.project_id],
+                                o: '',
+                            },
+                            {
+                                k: 'service_account_id',
+                                v: [budgetPageState.budgetData?.service_account_id],
+                                o: '',
+                            },
+                        ]),
                     }
                 }"
                 highlight
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
index 229d6edeb6..f86b969357 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-    onUnmounted, watch, watchEffect,
+    onUnmounted, watch,
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
 
@@ -43,30 +43,6 @@ onUnmounted(() => {
     costAnalysisPageStore.reset();
 });
 
-
-watchEffect(() => {
-    const { project_id, service_account_id } = route.query;
-    if (project_id || service_account_id) {
-        const filters: Record<string, string[]> = {
-            ...costAnalysisPageStore.state.filters,
-        };
-
-        if (project_id) {
-            filters.project_id = Array.isArray(project_id)
-                ? project_id.filter((id): id is string => id !== null)
-                : [project_id as string];
-        }
-
-        if (service_account_id) {
-            filters.service_account_id = Array.isArray(service_account_id)
-                ? service_account_id.filter((id): id is string => id !== null)
-                : [service_account_id as string];
-        }
-
-        costAnalysisPageStore.setFilters(filters);
-    }
-});
-
 watch(() => costAnalysisPageGetters.selectedQuerySet, async (selectedQuerySet) => {
     if (selectedQuerySet) {
         costAnalysisPageStore.setQueryOptions(selectedQuerySet.options);
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue
index 715366e400..c26431fb66 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue
@@ -2,7 +2,6 @@
 import {
     computed, reactive, watch,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
 
 import { cloneDeep } from 'lodash';
 
@@ -13,7 +12,6 @@ import {
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
 
-import type { WorkspaceModel } from '@/api-clients/identity/workspace/schema/model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
@@ -47,6 +45,8 @@ import CostAnalysisFiltersAddMoreButton
 import { GROUP_BY } from '@/services/cost-explorer/constants/cost-explorer-constant';
 import { useCostAnalysisPageStore } from '@/services/cost-explorer/stores/cost-analysis-page-store';
 
+import type { WorkspaceModel } from '@/schema/identity/workspace/model';
+
 
 const costAnalysisPageStore = useCostAnalysisPageStore();
 const costAnalysisPageGetters = costAnalysisPageStore.getters;
@@ -61,9 +61,6 @@ interface VariableOption {
     dataKey?: string;
 }
 
-const route = useRoute();
-const router = useRouter();
-
 const GROUP_BY_TO_VAR_MODELS: Record<string, VariableOption> = {
     [GROUP_BY.WORKSPACE]: { key: MANAGED_VARIABLE_MODEL_KEY_MAP.workspace },
     [GROUP_BY.PROJECT]: { key: MANAGED_VARIABLE_MODEL_KEY_MAP.project },
@@ -203,21 +200,10 @@ const handleUpdateFiltersDropdown = (groupBy: string, selectedItems: MenuItem[])
     selectedItemsMap[groupBy] = selectedItems;
     state.selectedItemsMap = selectedItemsMap;
 
-    const newFilters = {
+    costAnalysisPageStore.setFilters({
         ...costAnalysisPageState.filters,
         [groupBy]: selectedItems.map((d) => d.name as string),
-    };
-    costAnalysisPageStore.setFilters(newFilters);
-
-    const currentQuery = { ...route.query };
-    if (groupBy === GROUP_BY.PROJECT || groupBy === GROUP_BY.SERVICE_ACCOUNT) {
-        if (selectedItems.length > 0) {
-            currentQuery[groupBy === GROUP_BY.PROJECT ? 'project' : 'service_account_id'] = selectedItems.map((d) => d.name)[0];
-        } else {
-            delete currentQuery[groupBy === GROUP_BY.PROJECT ? 'project' : 'service_account_id'];
-        }
-        router.replace({ query: currentQuery });
-    }
+    });
 };
 const handleDisabledFilters = (all?: boolean, disabledFilter?: string) => {
     if (all) {

From f2661f688812371986f0b77e1883f7d4622661e0 Mon Sep 17 00:00:00 2001
From: seungyeoneeee <sylee1274@mz.co.kr>
Date: Wed, 30 Apr 2025 16:47:15 +0900
Subject: [PATCH 8/8] fix: fix minor bug about create

Signed-off-by: seungyeoneeee <sylee1274@mz.co.kr>
---
 .../services/cost-explorer/components/BudgetCreateStep1.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/services/cost-explorer/components/BudgetCreateStep1.vue b/apps/web/src/services/cost-explorer/components/BudgetCreateStep1.vue
index 3b91cc8050..5e77ab71eb 100644
--- a/apps/web/src/services/cost-explorer/components/BudgetCreateStep1.vue
+++ b/apps/web/src/services/cost-explorer/components/BudgetCreateStep1.vue
@@ -72,10 +72,10 @@ const emit = defineEmits<{(e: 'click-next'): void, (e: 'click-cancel'): void }>(
 
 
 watch(() => budgetCreatePageState, () => {
-    if (budgetCreatePageState.name && budgetCreatePageState.project && budgetCreatePageState.scope.type === 'project' && budgetCreatePageState.budgetManager) {
+    if (budgetCreatePageState.name && budgetCreatePageState.project && budgetCreatePageState.scope.type === 'project') {
         state.isContinueAble = true;
     } else if (budgetCreatePageState.name && budgetCreatePageState.project && budgetCreatePageState.scope.type === 'serviceAccount'
-    && budgetCreatePageState.scope.serviceAccount && budgetCreatePageState.scope.serviceAccount.length > 0 && budgetCreatePageState.budgetManager
+    && budgetCreatePageState.scope.serviceAccount && budgetCreatePageState.scope.serviceAccount.length > 0
     ) {
         state.isContinueAble = true;
     } else {