From 3211ef94c9505c377f5cf95de78095d648dcef6d Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 18:46:07 +0900
Subject: [PATCH 1/9] feat(project-folder): create project-dashboard form modal
 (create, update)

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../ProjectDashboardFolderFormModal.vue       | 188 ++++++++++++++++++
 .../v2/components/ProjectDetailTab.vue        |   5 +-
 .../use-project-dashboard-folder-query.ts     |  23 ++-
 .../project/v2/pages/ProjectMainPage.vue      |   9 +-
 .../v2/stores/project-page-modal-store.ts     |  13 ++
 5 files changed, 234 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/src/services/project/v2/components/ProjectDashboardFolderFormModal.vue

diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardFolderFormModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardFolderFormModal.vue
new file mode 100644
index 0000000000..5562d1ea42
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardFolderFormModal.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import {
+    computed, watch,
+} from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import {
+    PButtonModal, PFieldGroup, PTextInput,
+} from '@cloudforet/mirinae';
+
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { FolderCreateParams, FolderUpdateParams } from '@/api-clients/dashboard/_types/folder-type';
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import type { PublicFolderCreateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/create';
+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 { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+import type { ProjectPageContextType } from '@/services/project/v2/types/project-page-context-type';
+
+interface Props {
+    projectGroupOrProjectId?: string;
+}
+const props = defineProps<Props>();
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.folderFormModalVisible);
+const targetFolderId = computed(() => projectPageModalStore.state.targetId);
+const projectGroupOrProjectId = computed(() => props.projectGroupOrProjectId);
+const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectId);
+const userStore = useUserStore();
+const { publicFolderAPI } = usePublicFolderApi();
+
+/* Query */
+const {
+    dashboardFolderList,
+    setQueryData,
+    invalidateAllQueries,
+} = useProjectDashboardFolderQuery({
+    projectId,
+    projectGroupId,
+});
+
+const projectContext = computed<ProjectPageContextType>(() => {
+    if (projectGroupId.value) return 'PROJECT_GROUP';
+    if (projectId.value) return 'PROJECT';
+    return undefined;
+});
+
+const existingNameList = computed<string[]>(() => dashboardFolderList.value.map((d) => d.name));
+const headerTitle = computed(() => {
+    if (targetFolderId.value) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.EDIT_FOLDER_NAME');
+    return i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.CREATE_FOLDER');
+});
+const {
+    forms: { name },
+    setForm,
+    invalidState,
+    invalidTexts,
+    isAllValid,
+    initForm,
+} = useFormValidator({
+    name: undefined as string|undefined,
+}, {
+    name(value) {
+        if (!value) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.NAME_REQUIRED');
+        if (existingNameList.value.find((d) => d === value)) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.NAME_DUPLICATED');
+        return true;
+    },
+});
+
+/* Event */
+const handleFormConfirm = async () => {
+    if (!isAllValid) return;
+    if (targetFolderId.value) {
+        const params: FolderUpdateParams = {
+            folder_id: targetFolderId.value,
+            name: name.value as string,
+        };
+        updateFolder(params);
+    } else {
+        const params: FolderCreateParams = {
+            name: name.value as string,
+            tags: { created_by: userStore.state.userId },
+            resource_group: projectContext.value === 'PROJECT_GROUP' ? RESOURCE_GROUP.WORKSPACE : RESOURCE_GROUP.PROJECT,
+        };
+        if (projectContext.value === 'PROJECT_GROUP') {
+            params.project_group_id = projectGroupId.value;
+        } else {
+            params.project_id = projectId.value;
+        }
+        createFolder(params);
+    }
+};
+
+const { mutate: createFolder } = useMutation(
+    {
+        mutationFn: (params: PublicFolderCreateParameters) => publicFolderAPI.create(params as PublicFolderCreateParameters),
+        onSuccess: (folder: PublicFolderModel) => {
+            showSuccessMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_S_CREATE_FOLDER'), '');
+            projectPageModalStore.closeFolderFormModal();
+            setQueryData([folder]);
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_E_CREATE_FOLDER'));
+        },
+    },
+);
+
+const { mutate: updateFolder } = useMutation(
+    {
+        mutationFn: (params: PublicFolderUpdateParameters) => publicFolderAPI.update(params as PublicFolderUpdateParameters),
+        onSuccess: () => {
+            showSuccessMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_S_UPDATE_FOLDER'), '');
+            projectPageModalStore.closeFolderFormModal();
+            invalidateAllQueries();
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_E_UPDATE_FOLDER'));
+        },
+    },
+);
+
+/* Watcher */
+watch(visible, (_visible) => {
+    if (!_visible) return;
+    if (!targetFolderId.value) {
+        initForm();
+
+        return;
+    }
+    const folder = dashboardFolderList.value.find((d) => d.folder_id === targetFolderId.value);
+    if (folder) {
+        setForm('name', folder.name);
+    }
+});
+
+</script>
+
+<template>
+    <p-button-modal
+        :header-title="headerTitle"
+        size="sm"
+        fade
+        backdrop
+        :visible.sync="visible"
+        :disabled="!isAllValid"
+        @confirm="handleFormConfirm"
+        @closed="projectPageModalStore.resetTarget"
+        @cancel="projectPageModalStore.closeFolderFormModal"
+        @close="projectPageModalStore.closeFolderFormModal"
+    >
+        <template #body>
+            <p-field-group class="folder-name-input-wrapper"
+                           :label="$t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.NAME')"
+                           :invalid="invalidState.name"
+                           :invalid-text="invalidTexts.name"
+                           required
+            >
+                <template #default="{invalid}">
+                    <p-text-input :value="name"
+                                  class="block w-full"
+                                  :placeholder="$t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.NAME')"
+                                  :invalid="invalid"
+                                  @update:value="setForm('name', $event)"
+                    />
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.folder-name-input-wrapper {
+    margin-bottom: 2rem;
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectDetailTab.vue b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
index c5965840ca..1a5cc15a0a 100644
--- a/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
@@ -14,7 +14,7 @@ import ProjectOverview from '@/services/project/v2/components/ProjectOverview.vu
 import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
 import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 const props = defineProps<{
     projectId?: string,
@@ -23,6 +23,7 @@ const props = defineProps<{
 }>();
 const emit = defineEmits<{(e: 'update:dashboard-id', value?: string): void;}>();
 const router = useRouter();
+const projectPageModalStore = useProjectPageModalStore();
 
 const activeTab = ref('overview');
 watch(() => props.dashboardId, (did) => {
@@ -120,7 +121,7 @@ const handleCreateProjectDashboard = (item: string) => {
             },
         });
     } else if (item === 'folder') {
-        console.log('create folder');
+        projectPageModalStore.openCreateFolderFormModal();
     }
 };
 
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
index a59fccabee..5489c5ed78 100644
--- a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
@@ -2,6 +2,8 @@ import {
     computed, type ComputedRef,
 } from 'vue';
 
+import { useQueryClient } from '@tanstack/vue-query';
+
 import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
 import type { PublicFolderListParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/list';
@@ -17,10 +19,11 @@ const GC_TIME = 1000 * 60 * 5;
 
 
 export const useProjectDashboardFolderQuery = (options: {
-    projectId: ComputedRef<string|undefined>,
+    projectId?: ComputedRef<string|undefined>,
     projectGroupId?: ComputedRef<string|undefined>,
 }) => {
     const { publicFolderAPI } = usePublicFolderApi();
+    const queryClient = useQueryClient();
 
     const projectPageContext = computed<ProjectPageContextType>(() => {
         if (options.projectGroupId?.value) {
@@ -52,6 +55,11 @@ export const useProjectDashboardFolderQuery = (options: {
         params: computed<PublicFolderListParameters>(() => ({
             project_id: options.projectId?.value,
             project_group_id: options.projectGroupId?.value,
+            query: {
+                filter: [
+                    { k: 'resource_group', v: 'PROJECT', o: 'eq' },
+                ],
+            },
         })),
     });
 
@@ -77,10 +85,23 @@ export const useProjectDashboardFolderQuery = (options: {
 
     const isLoading = computed<boolean>(() => dashboardFolderSharedListQuery.isFetching.value || dashboardFolderListQuery.isFetching.value);
 
+    const setQueryData = (newData: PublicFolderModel[]) => {
+        console.debug('setQueryData', newData);
+        queryClient.setQueryData(dashboardFolderListQueryKey.value, {
+            results: [...(dashboardFolderListQuery.data.value ?? []), ...newData],
+        });
+    };
+
+    const invalidateAllQueries = () => {
+        queryClient.invalidateQueries({ queryKey: dashboardFolderListQueryKey.value });
+    };
+
     return {
         dashboardFolderSharedList: computed<PublicFolderModel[]>(() => dashboardFolderSharedListQuery.data.value ?? []),
         dashboardFolderList: computed<PublicFolderModel[]>(() => dashboardFolderListQuery.data.value ?? []),
         isLoading,
+        setQueryData,
+        invalidateAllQueries,
     };
 };
 
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index 3c534c0629..feea1017fc 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -32,6 +32,7 @@ const ProjectMemberInviteModal = () => import('@/services/project/v2/components/
 const ProjectTagsModal = () => import('@/services/project/v2/components/ProjectTagsModal.vue');
 const ProjectFormModal = () => import('@/services/project/v2/components/ProjectFormModal.vue');
 const ProjectGroupFormModal = () => import('@/services/project/v2/components/ProjectGroupFormModal.vue');
+const ProjectDashboardFolderFormModal = () => import('@/services/project/v2/components/ProjectDashboardFolderFormModal.vue');
 
 const props = defineProps<{
     projectGroupOrProjectId?: string;
@@ -125,7 +126,7 @@ const handleUpdateDashboardId = (id?: string) => {
                                           :target-type="props.projectGroupOrProjectId ? (projectId ? 'project' : 'projectGroup') : undefined"
             />
         </keep-alive>
-        <project-detail-tab v-if="mounted && projectId"
+        <project-detail-tab v-if="mounted && props.projectGroupOrProjectId"
                             class="mt-6"
                             :project-id="projectId"
                             :project-group-id="projectGroupId"
@@ -150,6 +151,12 @@ const handleUpdateDashboardId = (id?: string) => {
                                       :target-parent-group-id="targetParentGroupId"
                                       @created="handleCreated"
             />
+            <project-dashboard-folder-form-modal v-if="projectPageModelStore.state.folderFormModalVisible"
+                                                 :project-group-or-project-id="props.projectGroupOrProjectId"
+            />
+            <!-- dashboard name edit modal -->
+            <!-- change folder modal -->
+            <!-- dashboard delete modal -->
         </template>
     </div>
 </template>
diff --git a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
index 278cce665d..a5e52fc05f 100644
--- a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
+++ b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
@@ -12,6 +12,8 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         projectFormModalVisible: false,
         targetId: '' as string|undefined,
         targetType: undefined as 'project'|'projectGroup'|undefined,
+
+        folderFormModalVisible: false,
     });
 
     const actions = {
@@ -109,6 +111,17 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         closeFormModal() {
             state.projectFormModalVisible = false;
         },
+        openCreateFolderFormModal() {
+            state.targetId = undefined;
+            state.folderFormModalVisible = true;
+        },
+        openEditFolderFormModal(targetFolderId: string) {
+            state.targetId = targetFolderId;
+            state.folderFormModalVisible = true;
+        },
+        closeFolderFormModal() {
+            state.folderFormModalVisible = false;
+        },
         // overal
         resetTarget() {
             state.targetId = undefined;

From ff58b519ca3dd457b0693c43bbf414a9ed670d11 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 19:56:10 +0900
Subject: [PATCH 2/9] feat(project-dashboard): create project-dashboard action
 modals

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../v2/components/ProjectDashboard.vue        |   9 +-
 .../ProjectDashboardChangeFolderModal.vue     | 156 ++++++++++++++++++
 .../ProjectDashboardDeleteModal.vue           |  75 +++++++++
 .../ProjectDashboardNameEditModal.vue         | 128 ++++++++++++++
 4 files changed, 367 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/services/project/v2/components/ProjectDashboardChangeFolderModal.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectDashboardDeleteModal.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectDashboardNameEditModal.vue

diff --git a/apps/web/src/services/project/v2/components/ProjectDashboard.vue b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
index 6320f018ac..42e4cec999 100644
--- a/apps/web/src/services/project/v2/components/ProjectDashboard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
@@ -11,6 +11,7 @@ import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboa
 import DashboardDetailBody from '@/services/dashboard-shared/dashboard-detail/DashboardDetailBody.vue';
 import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
 import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 interface Props {
     projectId?: string;
@@ -19,7 +20,7 @@ interface Props {
 }
 const props = defineProps<Props>();
 
-
+const projectPageModalStore = useProjectPageModalStore();
 /* Query */
 const {
     dashboardList,
@@ -40,6 +41,11 @@ const {
 const dashboardItems = computed<Array<DashboardModel>>(() => [...dashboardSharedList.value, ...dashboardList.value]);
 const dashboardFolderItems = computed<Array<DashboardFolderModel>>(() => [...dashboardFolderSharedList.value, ...dashboardFolderList.value]);
 
+const handleSelectToolset = (toolsetId: string|undefined) => {
+    if (toolsetId === 'edit') projectPageModalStore.openDashboardNameEditModal(props.dashboardId);
+    if (toolsetId === 'move') projectPageModalStore.openDashboardChangeFolderModal(props.dashboardId);
+    if (toolsetId === 'delete') projectPageModalStore.openDashboardDeleteModal(props.dashboardId);
+};
 </script>
 
 <template>
@@ -47,6 +53,7 @@ const dashboardFolderItems = computed<Array<DashboardFolderModel>>(() => [...das
         <dashboard-detail-body :dashboard-id="props.dashboardId"
                                :dashboard-items="dashboardItems"
                                :folder-items="dashboardFolderItems"
+                               @select-toolset="handleSelectToolset"
         />
     </div>
 </template>
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardChangeFolderModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardChangeFolderModal.vue
new file mode 100644
index 0000000000..2a7cf0e710
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardChangeFolderModal.vue
@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import {
+    computed, reactive, watch,
+} from 'vue';
+
+
+import {
+    PButtonModal, PFieldGroup, PI, PSelectDropdown,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { DashboardChangeFolderParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { i18n } from '@/translations';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import { useDashboardChangeFolderAction } from '@/services/dashboard-shared/core/actions/use-dashboard-change-folder-action';
+import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+interface Props {
+    projectGroupOrProjectId?: string;
+}
+const props = defineProps<Props>();
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.dashboardChangeFolderModalVisible);
+const dashboardId = computed(() => projectPageModalStore.state.targetId);
+const projectGroupOrProjectId = computed(() => props.projectGroupOrProjectId);
+const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectId);
+
+
+/* Query */
+const {
+    dashboardFolderList,
+    invalidateAllQueries: invalidateDashboardFolderList,
+} = useProjectDashboardFolderQuery({
+    projectId,
+    projectGroupId,
+});
+const {
+    dashboardList,
+} = useProjectDashboardQuery({
+    projectId,
+    projectGroupId,
+});
+
+const currentDashboard = computed<DashboardModel|undefined>(() => dashboardList.value.find((d) => d.dashboard_id === dashboardId.value));
+
+
+const state = reactive({
+    menuItems: computed<SelectDropdownMenuItem[]>(() => {
+        const defaultItem = {
+            label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.NO_PARENT_FOLDER'),
+            name: '',
+        };
+        return [
+            defaultItem,
+            ...dashboardFolderList.value.map((folder) => ({
+                label: folder.name,
+                name: folder.folder_id,
+            })),
+        ];
+    }),
+    selectedFolderId: '' as string,
+});
+
+/* Api */
+const { mutate: changeFolder } = useDashboardChangeFolderAction({
+    dashboardId,
+    onSuccess: () => {
+        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_MOVE_DASHBOARD'), '');
+        invalidateDashboardFolderList();
+    },
+    onError: (e) => {
+        showErrorMessage(i18n.t('DASHBOARDS.DETAIL.ALT_E_MOVE_DASHBOARD'), e);
+    },
+    onSettled: () => {
+        projectPageModalStore.closeDashboardChangeFolderModal();
+    },
+});
+
+/* Event */
+const handleFormConfirm = async () => {
+    if (!dashboardId.value) {
+        console.error('dashboardId is required');
+        return;
+    }
+    if (state.selectedFolderId === currentDashboard.value?.folder_id) {
+        projectPageModalStore.closeDashboardChangeFolderModal();
+        return;
+    }
+    const params: DashboardChangeFolderParams = {
+        dashboard_id: dashboardId.value,
+    };
+    if (state.selectedFolderId) {
+        params.folder_id = state.selectedFolderId;
+    }
+    changeFolder(params);
+};
+
+/* Watcher */
+watch(visible, (_visible) => {
+    if (!_visible) {
+        state.selectedFolderId = '';
+        projectPageModalStore.resetTarget();
+    } else {
+        const _folderId = dashboardFolderList.value.find((d) => d.folder_id === currentDashboard.value?.folder_id)?.folder_id;
+        if (_folderId) state.selectedFolderId = _folderId;
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal
+        :header-title="$t('DASHBOARDS.DETAIL.MOVE_DASHBOARDS')"
+        size="sm"
+        fade
+        backdrop
+        :visible="visible"
+        @confirm="handleFormConfirm"
+        @closed="projectPageModalStore.resetTarget"
+        @cancel="projectPageModalStore.closeDashboardChangeFolderModal"
+        @close="projectPageModalStore.closeDashboardChangeFolderModal"
+    >
+        <template #body>
+            <p-field-group :label="$t('DASHBOARDS.ALL_DASHBOARDS.LOCATION')"
+                           required
+            >
+                <p-select-dropdown :selected.sync="state.selectedFolderId"
+                                   :menu="state.menuItems"
+                                   block
+                                   show-select-marker
+                                   use-fixed-menu-style
+                                   class="location-dropdown"
+                >
+                    <template #menu-item--format="{item}">
+                        <p-i v-if="item.name"
+                             name="ic_folder"
+                             width="1rem"
+                             height="1rem"
+                        />
+                        {{ item.label }}
+                    </template>
+                </p-select-dropdown>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.location-dropdown {
+    width: 100%;
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardDeleteModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardDeleteModal.vue
new file mode 100644
index 0000000000..d72829e99d
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardDeleteModal.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router/composables';
+
+
+import { i18n } from '@/translations';
+
+
+import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useDashboardDeleteAction } from '@/services/dashboard-shared/core/actions/use-dashboard-delete-action';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+import { PROJECT_ROUTE_V2 } from '../routes/route-constant';
+
+interface Props {
+    projectGroupOrProjectId: string;
+}
+const props = defineProps<Props>();
+const router = useRouter();
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.dashboardDeleteModalVisible);
+const dashboardId = computed(() => projectPageModalStore.state.targetId);
+const projectGroupOrProjectId = computed(() => props.projectGroupOrProjectId);
+const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectId);
+/* Query */
+const {
+    invalidateAllQueries: invalidateDashboardList,
+} = useProjectDashboardQuery({
+    projectId,
+    projectGroupId,
+});
+
+const handleDeleteDashboardConfirm = async () => {
+    if (!dashboardId.value) {
+        throw new Error('Dashboard ID is not provided');
+    }
+    deleteDashboard({
+        dashboard_id: dashboardId.value,
+    });
+};
+
+/* Api */
+const { mutate: deleteDashboard, isPending: loading } = useDashboardDeleteAction({
+    dashboardId,
+    onSuccess: async () => {
+        invalidateDashboardList();
+        projectPageModalStore.closeDashboardDeleteModal();
+        await router.replace({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value,
+            },
+        }).catch(() => {});
+    },
+    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="visible"
+                  :loading="loading"
+                  @confirm="handleDeleteDashboardConfirm"
+                  @closed="projectPageModalStore.resetTarget"
+                  @cancel="projectPageModalStore.closeDashboardDeleteModal"
+                  @close="projectPageModalStore.closeDashboardDeleteModal"
+    />
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardNameEditModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardNameEditModal.vue
new file mode 100644
index 0000000000..4224ee274d
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardNameEditModal.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import {
+    computed, watch,
+} from 'vue';
+
+import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
+
+import { i18n } from '@/translations';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useDashboardUpdateAction } from '@/services/dashboard-shared/core/actions/use-dashboard-update-action';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+interface Props {
+    projectGroupOrProjectId?: string;
+}
+const props = defineProps<Props>();
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.dashboardNameEditModalVisible);
+const dashboardId = computed(() => projectPageModalStore.state.targetId);
+const projectGroupOrProjectId = computed(() => props.projectGroupOrProjectId);
+const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectId);
+
+/* Query */
+const {
+    dashboardList,
+    invalidateAllQueries: invalidateDashboardList,
+} = useProjectDashboardQuery({
+    projectId,
+    projectGroupId,
+});
+const existingNameList = computed<string[]>(() => dashboardList.value.map((d) => d.name));
+const originName = computed<string>(() => {
+    const dashboard = dashboardList.value.find((d) => d.dashboard_id === dashboardId.value);
+    return dashboard?.name || '';
+});
+
+const {
+    forms: {
+        name,
+    },
+    setForm,
+    invalidState,
+    invalidTexts,
+    isAllValid,
+} = useFormValidator({
+    name: '',
+}, {
+    name(value: string) {
+        if (loading.value) return '';
+        if (value === originName.value) 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');
+        if (existingNameList.value.find((d) => d === value)) return i18n.t('DASHBOARDS.FORM.VALIDATION_DASHBOARD_NAME_UNIQUE');
+        return '';
+    },
+});
+
+const { mutate, isPending: loading } = useDashboardUpdateAction({
+    dashboardId,
+    onSuccess: () => {
+        invalidateDashboardList();
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.FORM.ALT_E_EDIT_NAME'));
+    },
+    onSettled() {
+        projectPageModalStore.closeDashboardNameEditModal();
+    },
+});
+
+const handleConfirm = async () => {
+    if (!dashboardId.value) {
+        console.error('dashboardId is required');
+        return;
+    }
+    mutate({
+        dashboard_id: dashboardId.value,
+        name: name.value,
+    });
+};
+
+/* Watcher */
+watch(visible, (_visible) => {
+    if (!_visible) return;
+    setForm('name', originName.value || '');
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal :visible="visible"
+                    :header-title="$t('DASHBOARDS.FORM.UPDATE_TITLE')"
+                    :disabled="!isAllValid"
+                    size="sm"
+                    class="dashboard-name-edit-modal"
+                    @confirm="handleConfirm"
+                    @closed="projectPageModalStore.resetTarget"
+                    @cancel="projectPageModalStore.closeDashboardNameEditModal"
+                    @close="projectPageModalStore.closeDashboardNameEditModal"
+    >
+        <template #body>
+            <p-field-group :label="$t('DASHBOARDS.FORM.LABEL_DASHBOARD_NAME')"
+                           :invalid="!loading && invalidState.name"
+                           :invalid-text="loading ? '' : invalidTexts.name"
+                           required
+            >
+                <template #default="{invalid}">
+                    <p-text-input :value="name"
+                                  :invalid="invalid"
+                                  @update:value="setForm('name', $event)"
+                    />
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.dashboard-name-edit-modal {
+    .p-text-input {
+        @apply w-full;
+    }
+}
+</style>

From 61e9e182b5d9e959493dea6bb0112fc2754dccc8 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 19:56:44 +0900
Subject: [PATCH 3/9] feat(project-dashboard): apply action modal

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../project/v2/pages/ProjectMainPage.vue         | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index feea1017fc..44900d160a 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -33,7 +33,9 @@ const ProjectTagsModal = () => import('@/services/project/v2/components/ProjectT
 const ProjectFormModal = () => import('@/services/project/v2/components/ProjectFormModal.vue');
 const ProjectGroupFormModal = () => import('@/services/project/v2/components/ProjectGroupFormModal.vue');
 const ProjectDashboardFolderFormModal = () => import('@/services/project/v2/components/ProjectDashboardFolderFormModal.vue');
-
+const ProjectDashboardNameEditModal = () => import('@/services/project/v2/components/ProjectDashboardNameEditModal.vue');
+const ProjectDashboardChangeFolderModal = () => import('@/services/project/v2/components/ProjectDashboardChangeFolderModal.vue');
+const ProjectDashboardDeleteModal = () => import('@/services/project/v2/components/ProjectDashboardDeleteModal.vue');
 const props = defineProps<{
     projectGroupOrProjectId?: string;
     dashboardId?: string;
@@ -154,9 +156,15 @@ const handleUpdateDashboardId = (id?: string) => {
             <project-dashboard-folder-form-modal v-if="projectPageModelStore.state.folderFormModalVisible"
                                                  :project-group-or-project-id="props.projectGroupOrProjectId"
             />
-            <!-- dashboard name edit modal -->
-            <!-- change folder modal -->
-            <!-- dashboard delete modal -->
+            <project-dashboard-name-edit-modal v-if="projectPageModelStore.state.dashboardNameEditModalVisible"
+                                               :project-group-or-project-id="props.projectGroupOrProjectId"
+            />
+            <project-dashboard-change-folder-modal v-if="projectPageModelStore.state.dashboardChangeFolderModalVisible"
+                                                   :project-group-or-project-id="props.projectGroupOrProjectId"
+            />
+            <project-dashboard-delete-modal v-if="projectPageModelStore.state.dashboardDeleteModalVisible"
+                                            :project-group-or-project-id="props.projectGroupOrProjectId"
+            />
         </template>
     </div>
 </template>

From 0e2110b590189402d8ca43973823293a10692bec Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 19:57:35 +0900
Subject: [PATCH 4/9] feat(project-dashboard): create project-dashboard action
 client state

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../actions/use-dashboard-delete-action.ts    |  4 +--
 .../queries/use-project-dashboard-query.ts    | 16 +++++++++-
 .../v2/stores/project-page-modal-store.ts     | 30 +++++++++++++++++--
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-delete-action.ts b/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-delete-action.ts
index 6c94ab2e84..c02bf92fc8 100644
--- a/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-delete-action.ts
+++ b/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-delete-action.ts
@@ -41,8 +41,8 @@ export const useDashboardDeleteAction = (options: UseDashboardDeleteActionOption
         onSuccess: async (data, variables) => {
             const _dashboardId = variables.dashboard_id;
             const _isPrivate = _dashboardId.startsWith('private');
-            const dashboardListQueryKey = _isPrivate ? privateDashboardGetQueryKey(_dashboardId) : publicDashboardGetQueryKey(_dashboardId);
-            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey });
+            const dashboardGetQueryKey = _isPrivate ? privateDashboardGetQueryKey(_dashboardId) : publicDashboardGetQueryKey(_dashboardId);
+            queryClient.invalidateQueries({ queryKey: dashboardGetQueryKey });
             if (onSuccess) await onSuccess(data, variables);
         },
         onError: (error, variables) => {
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
index ca766a2463..507860c9d8 100644
--- a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
@@ -2,6 +2,8 @@ import {
     computed, type ComputedRef,
 } from 'vue';
 
+import { useQueryClient } from '@tanstack/vue-query';
+
 import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
 import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
@@ -21,7 +23,7 @@ export const useProjectDashboardQuery = (options: {
     projectGroupId?: ComputedRef<string|undefined>,
 }) => {
     const { publicDashboardAPI } = usePublicDashboardApi();
-
+    const queryClient = useQueryClient();
     const projectPageContext = computed<ProjectPageContextType>(() => {
         if (options.projectGroupId?.value) {
             return 'PROJECT_GROUP';
@@ -83,10 +85,22 @@ export const useProjectDashboardQuery = (options: {
 
     const isLoading = computed<boolean>(() => dashboardSharedListQuery.isFetching.value || dashboardListQuery.isFetching.value);
 
+    const setQueryData = (newData: PublicDashboardModel[]) => {
+        queryClient.setQueryData(dashboardListQueryKey.value, {
+            results: [...(dashboardListQuery.data.value ?? []), ...newData],
+        });
+    };
+
+    const invalidateAllQueries = () => {
+        queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
+    };
+
     return {
         dashboardSharedList: computed<PublicDashboardModel[]>(() => dashboardSharedListQuery.data.value ?? []),
         dashboardList: computed<PublicDashboardModel[]>(() => dashboardListQuery.data.value ?? []),
         isLoading,
+        setQueryData,
+        invalidateAllQueries,
     };
 };
 
diff --git a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
index a5e52fc05f..8d82b6649f 100644
--- a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
+++ b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
@@ -4,16 +4,20 @@ import { defineStore } from 'pinia';
 
 export const useProjectPageModalStore = defineStore('project-page-modal', () => {
     const state = reactive({
+        targetId: '' as string|undefined,
+        targetType: undefined as 'project'|'projectGroup'|undefined,
+
         manageMemberModalVisible: false,
         deleteModalVisible: false,
         moveModalVisible: false,
         inviteMemberModalVisible: false,
         manageTagsModalVisible: false,
         projectFormModalVisible: false,
-        targetId: '' as string|undefined,
-        targetType: undefined as 'project'|'projectGroup'|undefined,
 
         folderFormModalVisible: false,
+        dashboardNameEditModalVisible: false,
+        dashboardChangeFolderModalVisible: false,
+        dashboardDeleteModalVisible: false,
     });
 
     const actions = {
@@ -122,7 +126,27 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         closeFolderFormModal() {
             state.folderFormModalVisible = false;
         },
-        // overal
+        openDashboardNameEditModal(targetDashboardId: string) {
+            state.targetId = targetDashboardId;
+            state.dashboardNameEditModalVisible = true;
+        },
+        closeDashboardNameEditModal() {
+            state.dashboardNameEditModalVisible = false;
+        },
+        openDashboardChangeFolderModal(targetDashboardId: string) {
+            state.targetId = targetDashboardId;
+            state.dashboardChangeFolderModalVisible = true;
+        },
+        closeDashboardChangeFolderModal() {
+            state.dashboardChangeFolderModalVisible = false;
+        },
+        openDashboardDeleteModal(targetDashboardId: string) {
+            state.targetId = targetDashboardId;
+            state.dashboardDeleteModalVisible = true;
+        },
+        closeDashboardDeleteModal() {
+            state.dashboardDeleteModalVisible = false;
+        },
         resetTarget() {
             state.targetId = undefined;
             state.targetType = undefined;

From 741c4d9f07b02b9dbe8f09f301caaa4c8383e3c4 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 19:57:51 +0900
Subject: [PATCH 5/9] chore: small fix

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../dashboard-shared/dashboard-detail/DashboardDetailBody.vue  | 3 ++-
 .../components/dashboard-detail/DashboardDetailHeader.vue      | 2 +-
 .../composables/queries/use-project-dashboard-folder-query.ts  | 1 -
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/services/dashboard-shared/dashboard-detail/DashboardDetailBody.vue b/apps/web/src/services/dashboard-shared/dashboard-detail/DashboardDetailBody.vue
index 9cdb4f9616..fa0cfb23a4 100644
--- a/apps/web/src/services/dashboard-shared/dashboard-detail/DashboardDetailBody.vue
+++ b/apps/web/src/services/dashboard-shared/dashboard-detail/DashboardDetailBody.vue
@@ -42,7 +42,7 @@ import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 interface Props {
     dashboardId: string;
     dashboardItems?: Array<DashboardModel>;
-    folderItems?: Array<DashboardFolderModel>;
+    folderItems: Array<DashboardFolderModel>;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -194,6 +194,7 @@ onUnmounted(() => {
 <template>
     <div class="dashboard-detail-body">
         <dashboard-detail-header :dashboard-id="props.dashboardId"
+                                 :folder-items="props.folderItems"
                                  @select-toolset="handleSelectToolset"
         />
         <p-divider v-if="entryPoint !== 'PROJECT'"
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 bad14b2b08..4c9f6cee20 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
@@ -23,7 +23,7 @@ import { useDashboardGetQuery } from '@/services/dashboard-shared/dashboard-deta
 
 interface Props {
     dashboardId: string;
-    folderItems?: Array<FolderModel>;
+    folderItems: Array<FolderModel>;
 }
 const props = withDefaults(defineProps<Props>(), {
     folderItems: () => [],
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
index 5489c5ed78..88efc11c10 100644
--- a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
@@ -86,7 +86,6 @@ export const useProjectDashboardFolderQuery = (options: {
     const isLoading = computed<boolean>(() => dashboardFolderSharedListQuery.isFetching.value || dashboardFolderListQuery.isFetching.value);
 
     const setQueryData = (newData: PublicFolderModel[]) => {
-        console.debug('setQueryData', newData);
         queryClient.setQueryData(dashboardFolderListQueryKey.value, {
             results: [...(dashboardFolderListQuery.data.value ?? []), ...newData],
         });

From 6d7f1d3e2e037765c410615caffbea74db65cd5a Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 19:59:40 +0900
Subject: [PATCH 6/9] refactor(dashboard-tree-data): optimize dashboard tree
 data generation helper

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../helpers/dashboard-tree-data-helper.ts     | 72 +++++++++----------
 1 file changed, 33 insertions(+), 39 deletions(-)

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 ba2ad5ef9d..ab978a4592 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
@@ -8,64 +8,58 @@ import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
 import type { DashboardTreeDataType, DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
 
 
-export const getDashboardTreeData = (folderList: FolderModel[], dashboardList: DashboardModel[], newIdList?: string[]): TreeNode<DashboardTreeDataType>[] => {
-    const nodes: Record<string, TreeNode<DashboardTreeDataType>> = {};
-    folderList.forEach((d) => {
-        nodes[d.folder_id] = {
-            id: d.folder_id,
+export const getDashboardTreeData = (
+    folderList: FolderModel[],
+    dashboardList: DashboardModel[],
+    newIdList?: string[],
+): TreeNode<DashboardTreeDataType>[] => {
+    const folderNodeMap: Record<string, TreeNode<DashboardTreeDataType>> = {};
+    const rootNodes: TreeNode<DashboardTreeDataType>[] = [];
+
+    folderList.forEach((folder) => {
+        const folderNode: TreeNode<DashboardTreeDataType> = {
+            id: folder.folder_id,
             depth: 0,
             data: {
-                name: d.name,
+                id: folder.folder_id,
+                name: folder.name,
                 type: 'FOLDER',
-                id: d.folder_id,
-                createdBy: d.tags?.created_by,
-                isNew: newIdList?.includes(d.folder_id),
-                ...d,
+                createdBy: folder.tags?.created_by,
+                isNew: newIdList?.includes(folder.folder_id),
+                ...folder,
             },
             children: [],
         };
+        folderNodeMap[folder.folder_id] = folderNode;
+        rootNodes.push(folderNode);
     });
-    dashboardList.forEach((d) => {
-        nodes[d.dashboard_id] = {
-            id: d.dashboard_id,
+
+    dashboardList.forEach((dashboard) => {
+        const dashboardNode: TreeNode<DashboardTreeDataType> = {
+            id: dashboard.dashboard_id,
             depth: 0,
             data: {
-                name: d.name,
-                id: d.dashboard_id,
+                id: dashboard.dashboard_id,
+                name: dashboard.name,
                 type: 'DASHBOARD',
-                createdBy: d.tags?.created_by,
-                isNew: newIdList?.includes(d.dashboard_id),
-                ...d,
+                createdBy: dashboard.tags?.created_by,
+                isNew: newIdList?.includes(dashboard.dashboard_id),
+                ...dashboard,
             },
         };
-    });
 
-    const rootNodes: TreeNode<DashboardTreeDataType>[] = [];
-    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 folderId = node.data?.folderId;
-        if (!folderId) {
-            rootNodes.push(node);
-            setDepth(node, 0);
+        const folderNode = dashboard.folder_id ? folderNodeMap[dashboard.folder_id] : undefined;
+
+        if (folderNode) {
+            dashboardNode.depth = 1;
+            folderNode.children.push(dashboardNode);
         } else {
-            const parentNode = nodes[folderId];
-            if (parentNode) {
-                parentNode.children = parentNode.children || [];
-                parentNode.children.push(node);
-                setDepth(node, parentNode.depth + 1);
-            }
+            rootNodes.push(dashboardNode);
         }
     });
 
     return rootNodes;
 };
-
 export const getSelectedDataTableItems = (folderItems: FolderModel[], dashboardItems: DashboardModel[], selectedIdMap: Record<string, boolean>): DashboardDataTableItem[] => {
     const _results: DashboardDataTableItem[] = [];
     const _selectedIdList: string[] = Object.keys(selectedIdMap).filter((key) => selectedIdMap[key]);

From 36e1991173a1a9f0c81e93c40848c52bb7a83d20 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 20:00:02 +0900
Subject: [PATCH 7/9] feat(folder-delete): create folder delete actions

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../use-dashboard-folder-delete-action.ts     | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 apps/web/src/services/dashboard-shared/core/actions/use-dashboard-folder-delete-action.ts

diff --git a/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-folder-delete-action.ts b/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-folder-delete-action.ts
new file mode 100644
index 0000000000..d2b203b14b
--- /dev/null
+++ b/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-folder-delete-action.ts
@@ -0,0 +1,90 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-query';
+
+import type { DashboardDeleteParams, DashboardListParams } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderDeleteParams } from '@/api-clients/dashboard/_types/folder-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import { usePrivateFolderApi } from '@/api-clients/dashboard/private-folder/composables/use-private-folder-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardFolderDeleteActionOptions {
+    folderId: ComputedRef<string|undefined>;
+    onSuccess?: (data: unknown, variables: FolderDeleteParams) => void|Promise<void>;
+    onError?: (error: Error, variables: FolderDeleteParams) => void|Promise<void>;
+    onSettled?: (data: unknown|undefined, error: Error|null, variables: FolderDeleteParams) => void|Promise<void>;
+}
+
+export const useDashboardFolderDeleteAction = (options: UseDashboardFolderDeleteActionOptions) => {
+    const { publicFolderAPI } = usePublicFolderApi();
+    const { privateFolderAPI } = usePrivateFolderApi();
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicFolderGetQueryKey } = useServiceQueryKey('dashboard', 'public-folder', 'get');
+    const { withSuffix: privateFolderGetQueryKey } = useServiceQueryKey('dashboard', 'private-folder', 'get');
+    const { withSuffix: publicDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+    const { withSuffix: privateDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'get');
+
+    const {
+        folderId, onSuccess, onError, onSettled,
+    } = options;
+
+    const isPrivate = computed(() => folderId.value?.startsWith('private'));
+
+    const listDashboardFn = (params: DashboardListParams) => {
+        if (!folderId.value) throw new Error('Folder ID is not provided');
+        const fetcher = isPrivate.value ? privateDashboardAPI.list : publicDashboardAPI.list;
+        return fetcher(params);
+    };
+    const deleteDashboardFn = (params: DashboardDeleteParams) => {
+        if (!params.dashboard_id) throw new Error('Dashboard ID is not provided');
+        const fetcher = isPrivate.value ? privateDashboardAPI.delete : publicDashboardAPI.delete;
+        return fetcher(params);
+    };
+
+    const deleteDashboardListByFolderId = async (_folderId: string) => {
+        const _dashboardList = await listDashboardFn({
+            folder_id: _folderId,
+        });
+        const _dashboardIds = _dashboardList.results?.map((d) => d.dashboard_id);
+        if (!_dashboardIds) return;
+        const _dashboardDeletePromises = _dashboardIds.map(async (id) => {
+            const _isPrivate = id.startsWith('private');
+            await deleteDashboardFn({ dashboard_id: id });
+            queryClient.invalidateQueries({ queryKey: _isPrivate ? privateDashboardGetQueryKey(id) : publicDashboardGetQueryKey(id) });
+        });
+        await Promise.all(_dashboardDeletePromises);
+    };
+
+    const deleteFolderFn = (params: FolderDeleteParams) => {
+        if (!folderId.value) throw new Error('Folder ID is not provided');
+        const fetcher = isPrivate.value ? privateFolderAPI.delete : publicFolderAPI.delete;
+        return fetcher(params);
+    };
+
+    return useMutation({
+        mutationFn: deleteFolderFn,
+        onSuccess: async (data, variables) => {
+            const _folderId = variables.folder_id;
+            const _isPrivate = _folderId.startsWith('private');
+            const folderListQueryKey = _isPrivate ? privateFolderGetQueryKey(_folderId) : publicFolderGetQueryKey(_folderId);
+            queryClient.invalidateQueries({ queryKey: folderListQueryKey });
+
+            await deleteDashboardListByFolderId(_folderId);
+
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};

From 47e67327160ae8fe40f9676bdde67613e16eb55c Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 20:26:02 +0900
Subject: [PATCH 8/9] feat(project-dashboard-clone): create project-dashboard
 clone action

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../actions/use-dashboard-clone-action.ts     |  16 +-
 .../dashboard-detail/DashboardCloneModal.vue  |  15 +-
 .../v2/components/ProjectDashboard.vue        |   1 +
 .../components/ProjectDashboardCloneModal.vue | 155 ++++++++++++++++++
 .../project/v2/pages/ProjectMainPage.vue      |   4 +
 .../v2/stores/project-page-modal-store.ts     |   8 +
 6 files changed, 180 insertions(+), 19 deletions(-)
 create mode 100644 apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue

diff --git a/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-clone-action.ts b/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-clone-action.ts
index ce2442c18c..08a8c09ca3 100644
--- a/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-clone-action.ts
+++ b/apps/web/src/services/dashboard-shared/core/actions/use-dashboard-clone-action.ts
@@ -3,7 +3,6 @@ import type { ComputedRef } from 'vue';
 import { useMutation } from '@tanstack/vue-query';
 
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
-import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { DashboardCreateParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
 import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
@@ -16,7 +15,6 @@ import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/compos
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import { useDashboardRouteContext } from '@/services/dashboard-shared/core/composables/use-dashboard-route-context';
 import { getSharedDashboardLayouts } from '@/services/dashboard-shared/core/helpers/dashboard-share-helper';
 
 
@@ -35,9 +33,6 @@ export const useDashboardCloneAction = (options: UseDashboardCloneActionOptions)
     const { publicWidgetAPI } = usePublicWidgetApi();
     const allReferenceStore = useAllReferenceStore();
     const userStore = useUserStore();
-    const {
-        entryPoint,
-    } = useDashboardRouteContext();
 
     const {
         dashboardId, isPrivate, onSuccess, onError, onSettled,
@@ -78,7 +73,7 @@ export const useDashboardCloneAction = (options: UseDashboardCloneActionOptions)
         const _sharedLayouts = await getSharedDashboardLayouts(dashboard.layouts, widgetList.results || [], allReferenceStore.getters.costDataSource);
 
         const _sharedDashboard: DashboardCreateParams = {
-            name: params.name,
+            ...params,
             layouts: _sharedLayouts,
             options: dashboard.options || {},
             labels: dashboard.labels || [],
@@ -86,15 +81,6 @@ export const useDashboardCloneAction = (options: UseDashboardCloneActionOptions)
             vars: dashboard.vars,
             vars_schema: dashboard.vars_schema,
         };
-        if (entryPoint.value === 'ADMIN') {
-            (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
-        } else if (entryPoint.value === 'WORKSPACE') {
-            if (!isPrivate?.value) {
-                (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
-            }
-        } else if (entryPoint.value === 'PROJECT') {
-            (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.PROJECT;
-        }
 
 
         if (isPrivate?.value) {
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 de91b8140f..b07ea085e7 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardCloneModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardCloneModal.vue
@@ -9,13 +9,13 @@ 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 { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 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 { useUserStore } from '@/store/user/user-store';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
@@ -51,7 +51,6 @@ const queryClient = useQueryClient();
 
 const router = useRouter();
 const appContextStore = useAppContextStore();
-const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
 const {
     forms: {
@@ -77,7 +76,6 @@ const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceOwner: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
     isWorkspaceMember: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
 });
 const state = reactive({
     proxyVisible: useProxyValue('visible', props, emit),
@@ -121,6 +119,15 @@ const handleConfirm = async () => {
     } else if (storeState.isAdminMode) {
         state.isPrivate = false;
     }
+
+    if (!state.isPrivate) {
+        if (storeState.isAdminMode) {
+            (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
+        } else {
+            (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
+        }
+    }
+
     mutate(_sharedDashboard as DashboardCreateParams);
 };
 
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboard.vue b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
index 42e4cec999..f4601524c7 100644
--- a/apps/web/src/services/project/v2/components/ProjectDashboard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
@@ -45,6 +45,7 @@ const handleSelectToolset = (toolsetId: string|undefined) => {
     if (toolsetId === 'edit') projectPageModalStore.openDashboardNameEditModal(props.dashboardId);
     if (toolsetId === 'move') projectPageModalStore.openDashboardChangeFolderModal(props.dashboardId);
     if (toolsetId === 'delete') projectPageModalStore.openDashboardDeleteModal(props.dashboardId);
+    if (toolsetId === 'clone') projectPageModalStore.openDashboardCloneModal(props.dashboardId);
 };
 </script>
 
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue
new file mode 100644
index 0000000000..93f23d53c3
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue
@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import { useRouter } from 'vue-router/composables';
+
+import {
+    PButtonModal, PFieldGroup, PTextInput,
+} from '@cloudforet/mirinae';
+import { getClonedName } from '@cloudforet/utils';
+
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { DashboardCreateParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { i18n } from '@/translations';
+
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
+
+import { useFormValidator } from '@/common/composables/form-validator';
+
+
+import { useDashboardCloneAction } from '@/services/dashboard-shared/core/actions/use-dashboard-clone-action';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+import type { ProjectPageContextType } from '@/services/project/v2/types/project-page-context-type';
+
+interface Props {
+    projectGroupOrProjectId: string;
+}
+const props = defineProps<Props>();
+const router = useRouter();
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.dashboardCloneModalVisible);
+const dashboardId = computed(() => projectPageModalStore.state.targetId);
+const projectGroupOrProjectId = computed(() => props.projectGroupOrProjectId);
+const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectId);
+
+/* Query */
+const {
+    dashboardList,
+    dashboardSharedList,
+    invalidateAllQueries: invalidateDashboardList,
+} = useProjectDashboardQuery({
+    projectId,
+    projectGroupId,
+});
+
+const projectContext = computed<ProjectPageContextType>(() => {
+    if (projectGroupId.value) return 'PROJECT_GROUP';
+    if (projectId.value) return 'PROJECT';
+    return undefined;
+});
+const existingNameList = computed<string[]>(() => dashboardList.value.map((d) => d.name));
+const currentDashboard = computed<DashboardModel|undefined>(() => [...dashboardList.value, ...dashboardSharedList.value].find((d) => d.dashboard_id === dashboardId.value));
+
+const {
+    forms: {
+        name,
+    },
+    setForm,
+    invalidState,
+    invalidTexts,
+    isAllValid,
+} = useFormValidator({
+    name: '',
+}, {
+    name(value: string) {
+        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');
+        if (existingNameList.value.find((d) => d === value)) {
+            return i18n.t('DASHBOARDS.FORM.VALIDATION_DASHBOARD_NAME_UNIQUE');
+        }
+        return '';
+    },
+});
+
+/* Event */
+const handleConfirm = async () => {
+    if (!isAllValid) return;
+
+    const _sharedDashboard: DashboardCreateParams = {
+        name: name.value,
+        resource_group: projectContext.value === 'PROJECT_GROUP' ? RESOURCE_GROUP.WORKSPACE : RESOURCE_GROUP.PROJECT,
+    };
+
+    if (projectContext.value === 'PROJECT_GROUP') {
+        _sharedDashboard.project_group_id = projectGroupId.value;
+    } else if (projectContext.value === 'PROJECT') {
+        _sharedDashboard.project_id = projectId.value;
+    }
+
+    mutate(_sharedDashboard as DashboardCreateParams);
+};
+
+const { mutate, isPending: dashboardCloneLoading } = useDashboardCloneAction({
+    dashboardId,
+    onSuccess: async (data: DashboardModel) => {
+        invalidateDashboardList();
+        projectPageModalStore.closeDashboardCloneModal();
+        await router.replace({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value,
+                dashboardId: data.dashboard_id,
+            },
+        }).catch(() => {});
+    },
+    onError: (e) => {
+        showErrorMessage(i18n.t('DASHBOARDS.FORM.ALT_E_CLONE_DASHBOARD'), e);
+    },
+});
+
+watch(visible, (_visible) => {
+    if (_visible) {
+        const _clonedName = getClonedName(existingNameList.value, currentDashboard.value?.name ?? '');
+        setForm('name', _clonedName);
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal :visible="visible"
+                    :header-title="$t('DASHBOARDS.FORM.CLONE_TITLE')"
+                    size="sm"
+                    :disabled="!isAllValid"
+                    :loading="dashboardCloneLoading"
+                    class="dashboard-clone-modal"
+                    @confirm="handleConfirm"
+                    @close="projectPageModalStore.closeDashboardCloneModal"
+                    @cancel="projectPageModalStore.closeDashboardCloneModal"
+                    @closed="projectPageModalStore.resetTarget"
+    >
+        <template #body>
+            <p-field-group :label="$t('DASHBOARDS.FORM.LABEL_DASHBOARD_NAME')"
+                           :invalid="invalidState.name"
+                           :invalid-text="invalidTexts.name"
+                           required
+            >
+                <template #default="{ invalid }">
+                    <p-text-input :value="name"
+                                  :invalid="invalid"
+                                  @update:value="setForm('name', $event)"
+                    />
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.dashboard-clone-modal {
+    .p-text-input {
+        @apply w-full;
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index 44900d160a..2a5028f884 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -36,6 +36,7 @@ const ProjectDashboardFolderFormModal = () => import('@/services/project/v2/comp
 const ProjectDashboardNameEditModal = () => import('@/services/project/v2/components/ProjectDashboardNameEditModal.vue');
 const ProjectDashboardChangeFolderModal = () => import('@/services/project/v2/components/ProjectDashboardChangeFolderModal.vue');
 const ProjectDashboardDeleteModal = () => import('@/services/project/v2/components/ProjectDashboardDeleteModal.vue');
+const ProjectDashboardCloneModal = () => import('@/services/project/v2/components/ProjectDashboardCloneModal.vue');
 const props = defineProps<{
     projectGroupOrProjectId?: string;
     dashboardId?: string;
@@ -165,6 +166,9 @@ const handleUpdateDashboardId = (id?: string) => {
             <project-dashboard-delete-modal v-if="projectPageModelStore.state.dashboardDeleteModalVisible"
                                             :project-group-or-project-id="props.projectGroupOrProjectId"
             />
+            <project-dashboard-clone-modal v-if="projectPageModelStore.state.dashboardCloneModalVisible"
+                                           :project-group-or-project-id="props.projectGroupOrProjectId"
+            />
         </template>
     </div>
 </template>
diff --git a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
index 8d82b6649f..77a951105f 100644
--- a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
+++ b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
@@ -18,6 +18,7 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         dashboardNameEditModalVisible: false,
         dashboardChangeFolderModalVisible: false,
         dashboardDeleteModalVisible: false,
+        dashboardCloneModalVisible: false,
     });
 
     const actions = {
@@ -147,6 +148,13 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         closeDashboardDeleteModal() {
             state.dashboardDeleteModalVisible = false;
         },
+        openDashboardCloneModal(targetDashboardId: string) {
+            state.targetId = targetDashboardId;
+            state.dashboardCloneModalVisible = true;
+        },
+        closeDashboardCloneModal() {
+            state.dashboardCloneModalVisible = false;
+        },
         resetTarget() {
             state.targetId = undefined;
             state.targetType = undefined;

From e423160d37e0429be73e9b82179679893b84b675 Mon Sep 17 00:00:00 2001
From: Yongtae Park <samuel.park@megazone.com>
Date: Thu, 10 Apr 2025 20:30:59 +0900
Subject: [PATCH 9/9] chore: small fix

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../project/v2/components/ProjectDashboardCloneModal.vue     | 5 +++--
 .../v2/composables/queries/use-project-dashboard-query.ts    | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue
index 93f23d53c3..ec5f06f97f 100644
--- a/apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue
@@ -9,6 +9,7 @@ import { getClonedName } from '@cloudforet/utils';
 
 import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { DashboardCreateParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { i18n } from '@/translations';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
@@ -38,7 +39,7 @@ const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectI
 const {
     dashboardList,
     dashboardSharedList,
-    invalidateAllQueries: invalidateDashboardList,
+    setQueryData,
 } = useProjectDashboardQuery({
     projectId,
     projectGroupId,
@@ -94,7 +95,7 @@ const handleConfirm = async () => {
 const { mutate, isPending: dashboardCloneLoading } = useDashboardCloneAction({
     dashboardId,
     onSuccess: async (data: DashboardModel) => {
-        invalidateDashboardList();
+        setQueryData([data as PublicDashboardModel]);
         projectPageModalStore.closeDashboardCloneModal();
         await router.replace({
             name: PROJECT_ROUTE_V2._NAME,
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
index 507860c9d8..ad04cf35cb 100644
--- a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
@@ -47,6 +47,7 @@ export const useProjectDashboardQuery = (options: {
                     { k: 'scope', v: 'PROJECT', o: 'eq' },
                     { k: 'shared', v: true, o: 'eq' },
                 ],
+                sort: [{ key: 'created_at', desc: false }],
             },
         })),
     });
@@ -59,6 +60,7 @@ export const useProjectDashboardQuery = (options: {
                 filter: [
                     { k: 'version', v: '1.0', o: 'not' },
                 ],
+                sort: [{ key: 'created_at', desc: false }],
             },
         })),
     });