From 6b0a0309ea9168de4be89ced31db02c98c34ed11 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:49 +0900
Subject: [PATCH 01/22] fix: update function parameters to support optional
 values and improve null checks

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../src/services/project/v2/ProjectContainer.vue   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/services/project/v2/ProjectContainer.vue b/apps/web/src/services/project/v2/ProjectContainer.vue
index 34675203ec..162f40bb57 100644
--- a/apps/web/src/services/project/v2/ProjectContainer.vue
+++ b/apps/web/src/services/project/v2/ProjectContainer.vue
@@ -33,7 +33,7 @@ const state = reactive({
 });
 
 /* Event */
-const handleUpdateProjectFormModalVisible = (visible: boolean) => {
+const handleUpdateProjectFormModalVisible = (visible?: boolean) => {
     projectPageStore.setProjectFormModalVisible(visible);
     if (projectPageState.currentSelectedProjectId && !visible) {
         projectPageStore.setCurrentSelectedProjectId(undefined);
@@ -51,16 +51,16 @@ const refreshProejctTree = () => {
     projectTreeStore.refreshProjectTree();
 };
 
-const handleConfirmProjectFormModal = (isCreating: boolean, result: ProjectModel) => {
+const handleConfirmProjectFormModal = (isCreating: boolean, result?: ProjectModel) => {
     refreshProejctTree();
-    if (isCreating && !result.project_group_id && !state.isProjectRootPage) {
+    if (isCreating && !result?.project_group_id && !state.isProjectRootPage) {
         // TODO: check route
         router.push({ name: PROJECT_ROUTE_V2._NAME });
     }
 };
-const handleConfirmProjectGroupFormModal = (isCreating: boolean, result: ProjectGroupModel) => {
+const handleConfirmProjectGroupFormModal = (isCreating: boolean, result?: ProjectGroupModel) => {
     refreshProejctTree();
-    if (isCreating && !result.parent_group_id && !state.isProjectRootPage) {
+    if (isCreating && !result?.parent_group_id && !state.isProjectRootPage) {
         // TODO: check route
         router.push({ name: PROJECT_ROUTE_V2._NAME });
     }
@@ -75,7 +75,7 @@ onUnmounted(() => {
 
 <template>
     <fragment>
-        <vertical-page-layout v-if="$route.meta.lsbVisible">
+        <vertical-page-layout v-if="route.meta?.lsbVisible">
             <template #sidebar>
                 <project-l-s-b />
             </template>
@@ -83,7 +83,7 @@ onUnmounted(() => {
                 <router-view />
             </template>
         </vertical-page-layout>
-        <centered-page-layout v-else-if="$route.meta.centeredLayout"
+        <centered-page-layout v-else-if="route.meta?.centeredLayout"
                               has-nav-bar
         >
             <router-view />

From 16972f8761080675adc3fd32215a42e7243c82fb Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:50 +0900
Subject: [PATCH 02/22] feat: add composables for project group queries and
 update ProjectMainProjectGroupFormModal

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../ProjectMainProjectGroupFormModal.vue      | 56 ++++++++++---------
 .../queries/use-project-group-query.ts        | 29 ++++++++++
 .../queries/use-project-groups-query.ts       | 28 ++++++++++
 .../composables/use-project-group-names.ts    | 23 ++++++++
 4 files changed, 110 insertions(+), 26 deletions(-)
 create mode 100644 apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
 create mode 100644 apps/web/src/services/project/v-shared/composables/queries/use-project-groups-query.ts
 create mode 100644 apps/web/src/services/project/v-shared/composables/use-project-group-names.ts

diff --git a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue b/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue
index 171a9e3cb1..c0e1bf6cf7 100644
--- a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue
+++ b/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue
@@ -1,21 +1,18 @@
 <script lang="ts" setup>
 import {
-    computed, reactive, watch,
+    computed, onMounted, onUnmounted, reactive, ref, toRef, watch,
 } from 'vue';
 
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { ProjectGroupCreateParameters } from '@/api-clients/identity/project-group/schema/api-verbs/create';
-import type { ProjectGroupListParameters } from '@/api-clients/identity/project-group/schema/api-verbs/list';
 import type { ProjectGroupUpdateParameters } from '@/api-clients/identity/project-group/schema/api-verbs/update';
 import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
 import { i18n } from '@/translations';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import { useProjectGroupReferenceStore } from '@/store/reference/project-group-reference-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
@@ -23,6 +20,9 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import { useProjectGroupNames } from '@/services/project/v-shared/composables/use-project-group-names';
+
 interface Props {
     visible: boolean;
     projectGroupId?: string;
@@ -35,17 +35,36 @@ const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
     (e: 'confirm', isCreating: boolean, projectGroup?: ProjectGroupModel): void;
 }>();
 
-const allReferenceStore = useAllReferenceStore();
 
+const projectGroupReferenceStore = useProjectGroupReferenceStore();
 const storeState = reactive({
-    projectGroups: computed(() => allReferenceStore.getters.projectGroup),
+    projectGroups: computed(() => projectGroupReferenceStore.getters.projectGroupItems),
+});
+const { data: projectGroup } = useProjectGroupQuery({
+    projectGroupId: toRef(props, 'projectGroupId'),
 });
 
 const state = reactive({
     proxyVisible: useProxyValue('visible', props, emit),
-    projectGroupNames: [] as string[],
     loading: false,
 });
+
+/* hasMounted */
+const hasMounted = ref(false);
+onMounted(() => {
+    hasMounted.value = true;
+});
+onUnmounted(() => {
+    hasMounted.value = false;
+});
+
+/* project group names */
+const projectGroupNames = useProjectGroupNames({
+    projectGroupId: computed(() => (props.updateMode ? undefined : props.projectGroupId)),
+    enabled: computed(() => props.visible && hasMounted.value),
+});
+
+/* form */
 const {
     forms: { projectGroupName },
     invalidState,
@@ -58,24 +77,13 @@ const {
     projectGroupName: (val?: string) => {
         if (!val?.length) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_REQUIRED');
         if (val.length > 40) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_LENGTH');
-        if (state.projectGroupNames.includes(val)) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_DUPLICATED');
+        if (projectGroupNames.value.includes(val)) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_DUPLICATED');
         return true;
     },
 });
 
-/* Api */
-const projectGroupNameApiQuery = new ApiQueryHelper().setOnly('name', 'project_group_id');
-const getProjectGroupNames = async () => {
-    const res = await SpaceConnector.clientV2.identity.projectGroup.list<ProjectGroupListParameters, ListResponse<ProjectGroupModel>>({
-        query: projectGroupNameApiQuery.data,
-    });
-    if (props.updateMode) {
-        state.projectGroupNames = (res.results || []).filter((projectGroup) => projectGroup.project_group_id !== props.projectGroupId).map((item) => item.name);
-    } else {
-        state.projectGroupNames = (res.results || []).map((item) => item.name);
-    }
-};
 
+/* Api */
 const createProjectGroup = async (params: ProjectGroupCreateParameters): Promise<ProjectGroupModel|undefined> => {
     try {
         const result = await SpaceConnector.clientV2.identity.projectGroup.create<ProjectGroupCreateParameters, ProjectGroupModel>(params);
@@ -133,10 +141,6 @@ watch(() => props.projectGroupId, async (after) => {
 }, { immediate: true });
 
 
-/* Init */
-(async () => {
-    await getProjectGroupNames();
-})();
 </script>
 
 <template>
@@ -146,7 +150,7 @@ watch(() => props.projectGroupId, async (after) => {
                     fade
                     backdrop
                     :visible.sync="state.proxyVisible"
-                    :disabled="state.loading || !isAllValid || storeState.projectGroups[props.projectGroupId]?.name === projectGroupName"
+                    :disabled="state.loading || !isAllValid || projectGroup?.name === projectGroupName"
                     @confirm="confirm"
     >
         <template #body>
diff --git a/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts b/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
new file mode 100644
index 0000000000..185fa596a7
--- /dev/null
+++ b/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
@@ -0,0 +1,29 @@
+import { computed, type Ref } from 'vue';
+
+import { useQuery } from '@tanstack/vue-query';
+
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+
+export const useProjectGroupQuery = ({
+    projectGroupId,
+    enabled,
+}: {
+  projectGroupId: Ref<string|undefined>;
+  enabled?: Ref<boolean>;
+}) => {
+    const { projectGroupAPI, projectGroupQueryKey } = useProjectGroupApi();
+    const { data, isLoading, error } = useQuery({
+        queryKey: computed(() => [...projectGroupQueryKey.value, projectGroupId.value]),
+        queryFn: () => projectGroupAPI.get({ project_group_id: projectGroupId.value as string }),
+        enabled: computed(() => {
+            if (!projectGroupId.value) return false;
+            return enabled ? enabled.value : true;
+        }),
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        gcTime: 1000 * 60 * 1, // 1 minutes
+    });
+
+    return {
+        data, isLoading, error,
+    };
+};
diff --git a/apps/web/src/services/project/v-shared/composables/queries/use-project-groups-query.ts b/apps/web/src/services/project/v-shared/composables/queries/use-project-groups-query.ts
new file mode 100644
index 0000000000..bc601faf77
--- /dev/null
+++ b/apps/web/src/services/project/v-shared/composables/queries/use-project-groups-query.ts
@@ -0,0 +1,28 @@
+import type { Ref } from 'vue';
+
+import { useQuery } from '@tanstack/vue-query';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+
+export const useProjectGroupsQuery = (ops?: { enabled: Ref<boolean> }) => {
+    const { projectGroupAPI, projectGroupListQueryKey } = useProjectGroupApi();
+    const projectGroupsApiQuery = new ApiQueryHelper().setOnly('name', 'project_group_id');
+    const { data, isLoading, error } = useQuery({
+        queryKey: projectGroupListQueryKey,
+        queryFn: async () => {
+            const res = await projectGroupAPI.list({
+                query: projectGroupsApiQuery.data,
+            });
+            return res.results ?? [];
+        },
+        enabled: ops?.enabled,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        gcTime: 1000 * 60 * 1, // 1 minutes
+    });
+
+    return {
+        data, isLoading, error,
+    };
+};
diff --git a/apps/web/src/services/project/v-shared/composables/use-project-group-names.ts b/apps/web/src/services/project/v-shared/composables/use-project-group-names.ts
new file mode 100644
index 0000000000..ee09904c12
--- /dev/null
+++ b/apps/web/src/services/project/v-shared/composables/use-project-group-names.ts
@@ -0,0 +1,23 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import { useProjectGroupsQuery } from '@/services/project/v-shared/composables/queries/use-project-groups-query';
+
+export const useProjectGroupNames = ({
+    projectGroupId, enabled,
+}: {
+  projectGroupId: Ref<string|undefined>;
+  enabled: Ref<boolean>;
+}) => {
+    const { data } = useProjectGroupsQuery({ enabled });
+
+    const projectGroupNames = computed<string[]>(() => {
+        if (!data.value) return [];
+        if (projectGroupId.value) {
+            return data.value.filter((pg) => pg.project_group_id !== projectGroupId.value).map((item) => item.name);
+        }
+        return data.value.map((item) => item.name);
+    });
+
+    return projectGroupNames;
+};

From c46aa7f8078db00e92ef56237c66190f41ed196a Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:50 +0900
Subject: [PATCH 03/22] refactor: integrate project group mutations into
 ProjectMainProjectGroupFormModal

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../ProjectMainProjectGroupFormModal.vue      | 93 ++++++-------------
 .../mutations/use-project-group-mutations.ts  | 44 +++++++++
 2 files changed, 74 insertions(+), 63 deletions(-)
 create mode 100644 apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts

diff --git a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue b/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue
index c0e1bf6cf7..674ef69259 100644
--- a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue
+++ b/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue
@@ -3,23 +3,16 @@ import {
     computed, onMounted, onUnmounted, reactive, ref, toRef, watch,
 } from 'vue';
 
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
-import type { ProjectGroupCreateParameters } from '@/api-clients/identity/project-group/schema/api-verbs/create';
-import type { ProjectGroupUpdateParameters } from '@/api-clients/identity/project-group/schema/api-verbs/update';
 import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
 import { i18n } from '@/translations';
 
-import { useProjectGroupReferenceStore } from '@/store/reference/project-group-reference-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useProjectGroupMutations } from '@/services/project/v-shared/composables/mutations/use-project-group-mutations';
 import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
 import { useProjectGroupNames } from '@/services/project/v-shared/composables/use-project-group-names';
 
@@ -29,27 +22,20 @@ interface Props {
     updateMode: boolean;
     parentGroupId?: string;
 }
-
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
     (e: 'confirm', isCreating: boolean, projectGroup?: ProjectGroupModel): void;
 }>();
 
-
-const projectGroupReferenceStore = useProjectGroupReferenceStore();
-const storeState = reactive({
-    projectGroups: computed(() => projectGroupReferenceStore.getters.projectGroupItems),
-});
+/* project group */
 const { data: projectGroup } = useProjectGroupQuery({
     projectGroupId: toRef(props, 'projectGroupId'),
 });
 
+/* modal active state */
 const state = reactive({
     proxyVisible: useProxyValue('visible', props, emit),
-    loading: false,
 });
-
-/* hasMounted */
 const hasMounted = ref(false);
 onMounted(() => {
     hasMounted.value = true;
@@ -81,66 +67,47 @@ const {
         return true;
     },
 });
+watch(() => props.projectGroupId, async (after) => {
+    if (after && props.updateMode) {
+        setForm('projectGroupName', projectGroup.value?.name);
+    } else {
+        initForm();
+    }
+}, { immediate: true });
 
 
-/* Api */
-const createProjectGroup = async (params: ProjectGroupCreateParameters): Promise<ProjectGroupModel|undefined> => {
-    try {
-        const result = await SpaceConnector.clientV2.identity.projectGroup.create<ProjectGroupCreateParameters, ProjectGroupModel>(params);
-        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT_GROUP'), '');
-        return result;
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT_GROUP'));
-        return undefined;
-    }
-};
-const updateProjectGroup = async (params: ProjectGroupUpdateParameters): Promise<ProjectGroupModel|undefined> => {
-    try {
-        const result = await SpaceConnector.clientV2.identity.projectGroup.update<ProjectGroupUpdateParameters, ProjectGroupModel>(params);
-        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
-        return result;
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
-        return undefined;
-    }
-};
+/* mutations */
+const { createProjectGroup, updateProjectGroup, isProcessing } = useProjectGroupMutations();
 
 /* Event */
 const confirm = async () => {
-    if (state.loading) return;
+    if (isProcessing.value) return;
     if (!projectGroupName.value) return;
     if (!isAllValid.value) return;
 
-    state.loading = true;
-    const updateParams: ProjectGroupUpdateParameters = {
-        name: projectGroupName.value,
-        project_group_id: props.projectGroupId as string,
-    };
-
-    const createParams: ProjectGroupCreateParameters = {
-        name: projectGroupName.value,
-        parent_group_id: props.parentGroupId,
-    };
-
     let result: ProjectGroupModel|undefined;
 
-    if (!props.updateMode) result = await createProjectGroup({ ...createParams } as ProjectGroupCreateParameters);
-    else result = await updateProjectGroup({ ...updateParams });
+    if (props.updateMode) {
+        if (!props.projectGroupId) {
+            ErrorHandler.handleRequestError(new Error('projectGroupId is required'), 'projectGroupId is required', true);
+            return;
+        }
+        const hasChanged = projectGroup.value?.name !== projectGroupName.value;
+        result = hasChanged ? await updateProjectGroup({
+            name: projectGroupName.value,
+            project_group_id: props.projectGroupId,
+        }) : projectGroup.value;
+    } else {
+        result = await createProjectGroup({
+            name: projectGroupName.value,
+            parent_group_id: props.parentGroupId,
+        });
+    }
 
     emit('confirm', !props.updateMode, result);
-    state.loading = false;
     state.proxyVisible = false;
 };
 
-watch(() => props.projectGroupId, async (after) => {
-    if (after && props.updateMode) {
-        setForm('projectGroupName', storeState.projectGroups[after].name);
-    } else {
-        initForm();
-    }
-}, { immediate: true });
-
-
 </script>
 
 <template>
@@ -150,7 +117,7 @@ watch(() => props.projectGroupId, async (after) => {
                     fade
                     backdrop
                     :visible.sync="state.proxyVisible"
-                    :disabled="state.loading || !isAllValid || projectGroup?.name === projectGroupName"
+                    :disabled="isProcessing || !isAllValid || projectGroup?.name === projectGroupName"
                     @confirm="confirm"
     >
         <template #body>
diff --git a/apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts b/apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts
new file mode 100644
index 0000000000..08f9fb8d6f
--- /dev/null
+++ b/apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts
@@ -0,0 +1,44 @@
+import { computed } from 'vue';
+
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import { i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+export const useProjectGroupMutations = () => {
+    const { projectGroupAPI, projectGroupQueryKey, projectGroupListQueryKey } = useProjectGroupApi();
+    const queryClient = useQueryClient();
+
+    const { mutateAsync: createProjectGroup, isPending: isCreating } = useMutation({
+        mutationFn: projectGroupAPI.create,
+        onSuccess: () => {
+            showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT_GROUP'), '');
+            queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT_GROUP'));
+        },
+    });
+
+    const { mutateAsync: updateProjectGroup, isPending: isUpdating } = useMutation({
+        mutationFn: projectGroupAPI.update,
+        onSuccess: (data) => {
+            showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
+            queryClient.invalidateQueries({ queryKey: [...projectGroupQueryKey.value, data.project_group_id] });
+            queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
+        },
+    });
+
+    const isProcessing = computed(() => isCreating.value || isUpdating.value);
+
+    return {
+        createProjectGroup, updateProjectGroup, isProcessing,
+    };
+};

From 0b9c778ff43a4d863ec6bd78ed5e566841cdea0e Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:51 +0900
Subject: [PATCH 04/22] feat: add CREATE action translations for English,
 Japanese, and Korean

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../console-translation-2.8.babel             | 21 +++++++++++++++++++
 packages/language-pack/en.json                |  1 +
 packages/language-pack/ja.json                |  1 +
 packages/language-pack/ko.json                |  1 +
 4 files changed, 24 insertions(+)

diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index e396c18fd8..dd356d1b3e 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -20278,6 +20278,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>CREATE</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>DELETE</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index c1cc4efc14..b34c2d3ab0 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -1066,6 +1066,7 @@
 			"ADD": "Add",
 			"CANCEL": "Cancel",
 			"CONFIRM": "Confirm",
+			"CREATE": "Create",
 			"DELETE": "Delete",
 			"DONE": "Done",
 			"DOWNLOAD": "Download",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 516545a913..316648c55c 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -1066,6 +1066,7 @@
 			"ADD": "追加",
 			"CANCEL": "キャンセル",
 			"CONFIRM": "確認",
+			"CREATE": "生成",
 			"DELETE": "削除",
 			"DONE": "完了",
 			"DOWNLOAD": "ダウンロード",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 417bb6e3f8..2a0db0104d 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -1066,6 +1066,7 @@
 			"ADD": "추가",
 			"CANCEL": "취소",
 			"CONFIRM": "확인",
+			"CREATE": "생성",
 			"DELETE": "삭제",
 			"DONE": "완료",
 			"DOWNLOAD": "다운로드",

From fbb10dd51cb2070439429b2c0cc4c51da3dfa5da Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:51 +0900
Subject: [PATCH 05/22] feat: add new LSB components and refactor navigation
 structure

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../navigations/new-lsb/LSBDivider.vue        |   2 +-
 .../modules/navigations/new-lsb/LSBItem.vue   |  62 +++++
 .../navigations/new-lsb/LSBRouterButton.vue   |  84 ------
 .../navigations/new-lsb/LSBRouterItem.vue     | 152 ----------
 .../navigations/new-lsb/LSBStarredTree.vue    |  41 +++
 .../modules/navigations/new-lsb/LSBTitle.vue  |  48 ++++
 .../navigations/new-lsb/LSBTopTitle.vue       |  41 ---
 .../composables/use-lsb-router-item-state.ts  |  55 ----
 .../modules/navigations/new-lsb/type.ts       |  17 +-
 .../services/ops-flow/components/BoardLSB.vue |  56 ++--
 packages/mirinae/src/components.ts            |   1 +
 .../mirinae/src/data-display/empty/PEmpty.vue |   6 +-
 .../data-display/field-title/PFieldTitle.vue  |   3 +-
 .../src/data-display/tooltips/PTooltip.vue    |  23 ++
 .../data-display/tree/new-tree/PTreeNode.vue  | 261 ++++++++++++++++++
 .../composables/use-tree-node-icon.ts         |  26 ++
 .../composables/use-tree-node-select.ts       |  57 ++++
 .../use-tree-node-text-ellipsis.ts            |  19 ++
 .../composables/use-tree-node-toggle.ts       |  38 +++
 .../src/data-display/tree/new-tree/type.ts    |  32 +++
 .../icons/icon-assets/ic_project-filled.svg   |   7 +
 .../icons/p-icons/ic_project-filled.js        |  12 +
 .../src/foundation/icons/p-icons/index.js     |   1 +
 23 files changed, 680 insertions(+), 364 deletions(-)
 create mode 100644 apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue
 delete mode 100644 apps/web/src/common/modules/navigations/new-lsb/LSBRouterButton.vue
 delete mode 100644 apps/web/src/common/modules/navigations/new-lsb/LSBRouterItem.vue
 create mode 100644 apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
 create mode 100644 apps/web/src/common/modules/navigations/new-lsb/LSBTitle.vue
 delete mode 100644 apps/web/src/common/modules/navigations/new-lsb/LSBTopTitle.vue
 delete mode 100644 apps/web/src/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state.ts
 create mode 100644 packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
 create mode 100644 packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-icon.ts
 create mode 100644 packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-select.ts
 create mode 100644 packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-text-ellipsis.ts
 create mode 100644 packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-toggle.ts
 create mode 100644 packages/mirinae/src/data-display/tree/new-tree/type.ts
 create mode 100644 packages/mirinae/src/foundation/icons/icon-assets/ic_project-filled.svg
 create mode 100644 packages/mirinae/src/foundation/icons/p-icons/ic_project-filled.js

diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBDivider.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBDivider.vue
index 540d770c75..d51c4a7215 100644
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBDivider.vue
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBDivider.vue
@@ -3,7 +3,7 @@ import { PDivider } from '@cloudforet/mirinae';
 </script>
 
 <template>
-    <div class="pt-1 pb-3 px-2 my-2">
+    <div class="pt-2 pb-2">
         <p-divider />
     </div>
 </template>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue
new file mode 100644
index 0000000000..60d913cb39
--- /dev/null
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { PTreeNode } from '@cloudforet/mirinae';
+
+import BetaMark from '@/common/components/marks/BetaMark.vue';
+import NewMark from '@/common/components/marks/NewMark.vue';
+import UpdateMark from '@/common/components/marks/UpdateMark.vue';
+import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
+
+const props = withDefaults(defineProps<LSBItemProps>(), {
+    icon: undefined,
+    displayType: 'list',
+    highlightTag: undefined,
+    favoriteOptions: undefined,
+    favoriteVisibility: 'always',
+});
+
+</script>
+
+<template>
+    <p-tree-node :id="props.id"
+                 :name="props.name"
+                 :icon="props.icon"
+                 :display-type="props.displayType"
+                 selectable
+                 :link="props.link"
+    >
+        <template #outer-left>
+            <slot name="outer-left" />
+        </template>
+        <template #inner-left>
+            <slot name="inner-left" />
+        </template>
+        <template #default>
+            <slot />
+        </template>
+        <template #inner-right>
+            <slot name="inner-right" />
+            <div v-if="props.highlightTag"
+                 class="h-full mt-[-0.25rem]"
+            >
+                <new-mark v-if="props.highlightTag === 'new'" />
+                <update-mark v-else-if="props.highlightTag === 'update'" />
+                <beta-mark v-else-if="props.highlightTag === 'beta'" />
+            </div>
+        </template>
+        <template #outer-right>
+            <slot name="outer-right" />
+        </template>
+        <template #action="{isHovered}">
+            <favorite-button v-if="props.favoriteVisibility !== 'none'"
+                             v-show="props.favoriteVisibility === 'hovered-only' ? isHovered : true"
+                             :item-id="props.favoriteOptions?.id ?? props.id"
+                             :favorite-type="props.favoriteOptions?.type ?? FAVORITE_TYPE.MENU"
+                             :visible-active-case-only="props.favoriteVisibility === 'active-only'"
+                             scale="0.8"
+            />
+        </template>
+    </p-tree-node>
+</template>
+
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBRouterButton.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBRouterButton.vue
deleted file mode 100644
index 66e1926335..0000000000
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBRouterButton.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import type { TranslateResult } from 'vue-i18n';
-import type { Location } from 'vue-router';
-
-import { PLazyImg, PI } from '@cloudforet/mirinae';
-
-import { useLsbRouterItemState } from '@/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state';
-import type { LSBIcon, LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/type';
-
-const props = defineProps<{
-    label?: TranslateResult;
-    icon?: LSBIcon;
-    imgIcon?: string;
-    to?: Location;
-    currentPath?: string;
-    predicate: LSBRouterPredicate;
-    openNewTab?: boolean;
-}>();
-
-const {
-    isSelected,
-    iconName,
-    iconColor,
-    imgIconUrl,
-} = useLsbRouterItemState(props);
-</script>
-
-<template>
-    <router-link ref="itemEl"
-                 class="lsb-router-button inline-flex items-center w-full h-8 justify-between px-2 border border-transparent outline-none rounded-md text-gray-800"
-                 :class="[{'selected': isSelected}]"
-                 :target="props.openNewTab ? '_blank' : '_self'"
-                 :to="props.to ? props.to : {}"
-                 @click.native="$event.stopImmediatePropagation()"
-    >
-        <slot name="before-text"
-              v-bind="props"
-        />
-        <div ref="textEl"
-             class="inline-flex items-center gap-1 overflow-hidden whitespace-no-wrap"
-        >
-            <p-i v-if="props.icon"
-                 :name="iconName"
-                 :color="iconColor"
-                 width="1rem"
-                 height="1rem"
-                 class="flex-shrink-0"
-            />
-            <p-lazy-img
-                v-if="props.imgIcon"
-                :src="imgIconUrl"
-                width="1rem"
-                height="1rem"
-                class="flex-shrink-0"
-            />
-            <span class="text-label-md">
-                <slot>
-                    {{ props.label }}
-                </slot>
-            </span>
-            <slot name="after-text"
-                  v-bind="props"
-            />
-        </div>
-        <slot name="right-extra"
-              v-bind="props"
-        />
-    </router-link>
-</template>
-
-<style scoped lang="postcss">
-.lsb-router-button {
-    &:focus, &:focus-within, &:active {
-        @apply bg-white border-secondary1;
-        box-shadow: 0 0 0 2px rgba(theme('colors.secondary1'), 0.2);
-    }
-    &.selected {
-        @apply bg-blue-200;
-    }
-    &:hover:not(.selected) {
-        @apply bg-blue-100 cursor-pointer;
-    }
-}
-</style>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBRouterItem.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBRouterItem.vue
deleted file mode 100644
index d0c0e8f5c8..0000000000
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBRouterItem.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<script setup lang="ts">
-import { useElementSize } from '@vueuse/core';
-import type { Ref } from 'vue';
-import {
-    computed, reactive, ref,
-} from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-import type { Location } from 'vue-router';
-
-import { PI, PLazyImg, PTooltip } from '@cloudforet/mirinae';
-
-import type { MenuId } from '@/lib/menu/config';
-
-import BetaMark from '@/common/components/marks/BetaMark.vue';
-import NewMark from '@/common/components/marks/NewMark.vue';
-import UpdateMark from '@/common/components/marks/UpdateMark.vue';
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE, type FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { useLsbRouterItemState } from '@/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state';
-import type { HighlightTagType, LSBIcon, LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/type';
-
-interface Props {
-    id: string;
-    label?: TranslateResult;
-    icon?: LSBIcon;
-    imgIcon?: string;
-    to?: Location;
-    currentPath?: string;
-    predicate?: LSBRouterPredicate;
-    openNewTab?: boolean;
-    highlightTag?: HighlightTagType;
-    favoriteOptions?: FavoriteOptions;
-    hideFavorite?: boolean;
-    isAdminMode?: boolean;
-    index?: number | string;
-}
-
-const props = defineProps<Props>();
-
-const itemEl = ref<HTMLElement | null>(null);
-const textEl = ref<HTMLElement | null>(null);
-
-const state = reactive({
-    itemWidth: computed<Ref<number>>(() => useElementSize(itemEl.value).width),
-    textWidth: computed<Ref<number>>(() => useElementSize(textEl.value).width),
-    hoveredItem: '' as MenuId | string,
-    isEllipsis: computed<boolean>(() => state.hoveredItem === props.id && (state.itemWidth.value - 20 === state.textWidth.value)),
-});
-
-const getIsHovered = (itemId?: MenuId | string) => state.hoveredItem && state.hoveredItem === itemId;
-const {
-    isSelected,
-    iconName,
-    iconColor,
-    imgIconUrl,
-} = useLsbRouterItemState(props);
-</script>
-
-<template>
-    <router-link ref="itemEl"
-                 class="lsb-router-item inline-flex items-center w-full h-8 justify-between px-2 border border-transparent outline-none rounded-md text-label-md text-gray-800"
-                 :class="[{'selected': isSelected, 'is-hide-favorite': props.hideFavorite}]"
-                 :target="props.openNewTab ? '_blank' : '_self'"
-                 :to="props.to ? props.to : {}"
-                 @click.native="$event.stopImmediatePropagation()"
-                 @mouseenter.native="state.hoveredItem = props.id"
-                 @mouseleave.native="state.hoveredItem = ''"
-    >
-        <slot name="before-text"
-              v-bind="props"
-        />
-        <div ref="textEl"
-             class="inline-flex items-center overflow-hidden whitespace-no-wrap"
-        >
-            <p-i v-if="props.icon"
-                 :name="iconName"
-                 :color="iconColor"
-                 width="1rem"
-                 height="1rem"
-                 class="flex-shrink-0 ml-1"
-            />
-            <p-lazy-img
-                v-if="props.imgIcon"
-                :src="imgIconUrl"
-                width="1rem"
-                height="1rem"
-                class="flex-shrink-0 ml-1"
-            />
-            <slot>
-                <div class="item-text overflow-hidden whitespace-no-wrap">
-                    <p-tooltip v-if="state.isEllipsis"
-                               position="bottom-start"
-                               :contents="props.label"
-                    >
-                        {{ props.label }}
-                    </p-tooltip>
-                    <span v-else>{{ props.label }}</span>
-                </div>
-            </slot>
-            <slot name="after-text"
-                  v-bind="props"
-            />
-            <span class="mark-wrapper h-full">
-                <new-mark v-if="props.highlightTag === 'new'" />
-                <update-mark v-else-if="props.highlightTag === 'update'" />
-                <beta-mark v-else-if="props.highlightTag === 'beta'" />
-            </span>
-        </div>
-        <slot name="right-extra"
-              v-bind="props"
-        />
-        <favorite-button
-            v-if="!hideFavorite && !isAdminMode"
-            :item-id="props.favoriteOptions?.id ? props.favoriteOptions.id : props.id"
-            :favorite-type="props.favoriteOptions?.type ? props.favoriteOptions.type : FAVORITE_TYPE.MENU"
-            :visible-active-case-only="!getIsHovered(props.id)"
-            scale="0.8"
-            class="flex-shrink-0 ml-1"
-        />
-    </router-link>
-</template>
-
-<style lang="postcss" scoped>
-.lsb-router-item {
-    &:focus, &:focus-within, &:active {
-        @apply bg-white border-secondary1;
-        box-shadow: 0 0 0 2px rgba(theme('colors.secondary1'), 0.2);
-    }
-    &.selected {
-        @apply bg-blue-200;
-    }
-    &.is-hide-favorite {
-        .favorite-button {
-            @apply hidden;
-        }
-        &:hover {
-            .favorite-button {
-                @apply block;
-            }
-        }
-    }
-    &:hover:not(.selected) {
-        @apply bg-blue-100 cursor-pointer;
-    }
-    .item-text {
-        text-overflow: ellipsis;
-    }
-    .mark-wrapper {
-        margin-top: -0.25rem;
-    }
-}
-</style>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
new file mode 100644
index 0000000000..390cc247dd
--- /dev/null
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { PTreeNode } from '@cloudforet/mirinae';
+
+import LSBItem from '@/common/modules/navigations/new-lsb/LSBItem.vue';
+import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
+
+const props = defineProps<{
+    expanded?: boolean;
+    items: LSBItemProps[];
+}>();
+</script>
+
+<template>
+    <p-tree-node id="starred"
+                 icon="ic_multi-favorite"
+                 display-type="tree"
+                 :expanded="props.expanded"
+                 has-children
+    >
+        <template v-for="(_, slot) of $scopedSlots"
+                  #[slot]="scope"
+        >
+            <slot :name="slot"
+                  v-bind="scope"
+            />
+        </template>
+        <span class="font-bold">{{ $t('COMMON.STARRED') }}</span>
+        <template #children>
+            <l-s-b-item v-for="item in props.items"
+                        :id="item.id"
+                        :key="item.id"
+                        :name="item.name"
+                        display-type="tree"
+                        :icon="item.icon"
+                        :link="item.link"
+                        :favorite-options="item.favoriteOptions"
+                        favorite-visibility="hovered-only"
+            />
+        </template>
+    </p-tree-node>
+</template>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBTitle.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBTitle.vue
new file mode 100644
index 0000000000..11e7a51d50
--- /dev/null
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBTitle.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PTreeNode,
+} from '@cloudforet/mirinae';
+import type { TreeNodeIcon, TreeNodeLink } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+const props = withDefaults(defineProps<{
+    id: string;
+    name?: TranslateResult;
+    icon?: TreeNodeIcon;
+    selectable?: boolean;
+    link?: TreeNodeLink;
+}>(), {
+    name: undefined,
+    icon: undefined,
+    selectable: false,
+    link: undefined,
+});
+
+
+</script>
+
+<template>
+    <p-tree-node :id="props.id"
+                 :name="props.name"
+                 :icon="props.icon"
+                 display-type="list"
+                 :selectable="props.selectable"
+                 :link="props.link"
+    >
+        <template v-for="(_, slot) of $scopedSlots"
+                  #[slot]="scope"
+        >
+            <slot :name="slot"
+                  v-bind="scope"
+            />
+        </template>
+        <template #default>
+            <span class="font-bold">
+                <slot>
+                    {{ props.name }}
+                </slot>
+            </span>
+        </template>
+    </p-tree-node>
+</template>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBTopTitle.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBTopTitle.vue
deleted file mode 100644
index 4fcc1fc8c0..0000000000
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBTopTitle.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { Location } from 'vue-router';
-
-import {
-    PLazyImg,
-} from '@cloudforet/mirinae';
-
-import { assetUrlConverter } from '@/lib/helper/asset-helper';
-
-
-const props = defineProps<{
-    label?: string;
-    icon?: string;
-    subText?: string;
-    visibleAddButton?: boolean;
-    addButtonLink?: Location;
-}>();
-</script>
-
-<template>
-    <div class=" flex items-center gap-1 h-8 mt-1 pb-2 px-2 text-gray-800 font-bold text-label-md">
-        <div class="flex items-center h-6 w-full">
-            <p-lazy-img
-                v-if="props.icon"
-                :src="assetUrlConverter(props.icon)"
-                width="1.5rem"
-                height="1.5rem"
-                class="icon rounded flex-shrink-0"
-            />
-            <div class="flex-grow">
-                <slot>{{ props.label }}</slot>
-                <span v-if="props.subText"
-                      class="font-normal"
-                >{{ props.subText }}</span>
-            </div>
-            <div class="flex-shrink-0 inline-flex">
-                <slot name="right-end" />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/apps/web/src/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state.ts b/apps/web/src/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state.ts
deleted file mode 100644
index 53bd568175..0000000000
--- a/apps/web/src/common/modules/navigations/new-lsb/composables/use-lsb-router-item-state.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { UnwrapRef, Ref } from 'vue';
-import { computed } from 'vue';
-import type { Location } from 'vue-router';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { assetUrlConverter } from '@/lib/helper/asset-helper';
-
-import type { LSBIcon, LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/type';
-
-interface UseLsbRouterItemProps {
-    to?: Ref<Readonly<Location>>;
-    icon?: Ref<Readonly<LSBIcon>>;
-    imgIcon?: Ref<Readonly<string>>;
-    predicate?: LSBRouterPredicate;
-}
-export const useLsbRouterItemState = (props: UnwrapRef<UseLsbRouterItemProps>) => {
-    const router = useRouter();
-    const route = useRoute();
-
-    const isSelected = computed<boolean>(() => {
-        if (!props.to) return false;
-
-        if (props.predicate) {
-            return props.predicate(props.to, route);
-        }
-
-        const resolved = router.resolve(props.to);
-        if (!resolved) return false;
-
-        let currentPath = route.fullPath;
-        if (currentPath.indexOf('?') > 0) {
-            currentPath = currentPath.slice(0, currentPath.indexOf('?'));
-        }
-        const resolvedHref = resolved.href;
-        return currentPath === resolvedHref;
-    });
-    const iconName = computed<string>(() => {
-        if (!props.icon) return '';
-        if (typeof props.icon === 'string') return props.icon;
-        return props.icon.name;
-    });
-    const iconColor = computed<string>(() => {
-        if (!props.icon) return 'inherit';
-        if (typeof props.icon === 'string') return 'inherit';
-        return props.icon.color || 'inherit';
-    });
-    const imgIconUrl = computed<string>(() => (props.imgIcon ? assetUrlConverter(props.imgIcon) : ''));
-
-    return {
-        isSelected,
-        iconName,
-        iconColor,
-        imgIconUrl,
-    };
-};
diff --git a/apps/web/src/common/modules/navigations/new-lsb/type.ts b/apps/web/src/common/modules/navigations/new-lsb/type.ts
index 39f4908eb1..e05ca944e4 100644
--- a/apps/web/src/common/modules/navigations/new-lsb/type.ts
+++ b/apps/web/src/common/modules/navigations/new-lsb/type.ts
@@ -1,6 +1,21 @@
+import type { TranslateResult } from 'vue-i18n';
 import type { Location, Route } from 'vue-router';
 
+import type { TreeNodeDisplayType, TreeNodeIcon, TreeNodeLink } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 
-export type LSBIcon = string | { name: string; color?: string; };
 export type HighlightTagType = 'new' | 'beta' | 'update';
 export type LSBRouterPredicate = (to: Location, currentRoute: Route) => boolean;
+export type LSBItemFavoriteVisibility = 'always' | 'active-only' | 'hovered-only' | 'none';
+
+export interface LSBItemProps {
+  id: string;
+  name: TranslateResult;
+  icon?: TreeNodeIcon;
+  link: TreeNodeLink;
+  displayType?: TreeNodeDisplayType;
+  highlightTag?: HighlightTagType;
+  favoriteOptions?: FavoriteOptions;
+  favoriteVisibility?: LSBItemFavoriteVisibility;
+}
diff --git a/apps/web/src/services/ops-flow/components/BoardLSB.vue b/apps/web/src/services/ops-flow/components/BoardLSB.vue
index 98bb8d98c5..a55962ba56 100644
--- a/apps/web/src/services/ops-flow/components/BoardLSB.vue
+++ b/apps/web/src/services/ops-flow/components/BoardLSB.vue
@@ -3,10 +3,9 @@ import { PIconButton } from '@cloudforet/mirinae';
 
 import LSBContainer from '@/common/modules/navigations/new-lsb/LSBContainer.vue';
 import LSBDivider from '@/common/modules/navigations/new-lsb/LSBDivider.vue';
+import LSBItem from '@/common/modules/navigations/new-lsb/LSBItem.vue';
 import LSBLoadingSpinner from '@/common/modules/navigations/new-lsb/LSBLoadingSpinner.vue';
-import LSBRouterButton from '@/common/modules/navigations/new-lsb/LSBRouterButton.vue';
-import LSBRouterItem from '@/common/modules/navigations/new-lsb/LSBRouterItem.vue';
-import LSBTopTitle from '@/common/modules/navigations/new-lsb/LSBTopTitle.vue';
+import LSBTitle from '@/common/modules/navigations/new-lsb/LSBTitle.vue';
 import type { LSBRouterPredicate } from '@/common/modules/navigations/new-lsb/type';
 
 import { useAvailableCategories } from '@/services/ops-flow/composables/use-available-categories';
@@ -24,40 +23,43 @@ const { availableCategories, isLoading, refetch } = useAvailableCategories();
 
 <template>
     <l-s-b-container>
-        <l-s-b-router-button id="all-categories"
-                             icon="ic_dots-4-square"
-                             :to="{
-                                 name: OPS_FLOW_ROUTE.BOARD._NAME
-                             }"
-                             :predicate="predicate"
+        <l-s-b-title id="all-tasks"
+                     icon="ic_dots-4-square"
+                     selectable
+                     :link="{
+                         to: {
+                             name: OPS_FLOW_ROUTE.BOARD._NAME
+                         },
+                         predicate,
+                     }"
         >
-            <span class="capitalize">{{ $t('OPSFLOW.ALL_TASKS', {
+            <span class="capitalize font-normal">{{ $t('OPSFLOW.ALL_TASKS', {
                 tasks: taskManagementTemplateStore.templates.tasks
             }) }}</span>
-        </l-s-b-router-button>
+        </l-s-b-title>
         <l-s-b-divider />
-        <l-s-b-top-title>
-            {{ taskManagementTemplateStore.templates.TaskCategory }}
-            <template #right-end>
+        <l-s-b-title id="categories">
+            <span class="capitalize">{{ taskManagementTemplateStore.templates.TaskCategory }}</span>
+            <template #outer-right>
                 <p-icon-button name="ic_refresh"
                                size="sm"
                                shape="square"
                                @click="refetch"
                 />
             </template>
-        </l-s-b-top-title>
+        </l-s-b-title>
         <l-s-b-loading-spinner :loading="isLoading" />
-        <l-s-b-router-item v-for="(category, idx) in availableCategories"
-                           :id="`${category.category_id}-${idx}`"
-                           :key="`${category.category_id}-${idx}`"
-                           :index="idx"
-                           :to="{
-                               name: OPS_FLOW_ROUTE.BOARD._NAME,
-                               query: { categoryId: category.category_id }
-                           }"
-                           :predicate="predicate"
-        >
-            {{ category.name }}
-        </l-s-b-router-item>
+        <l-s-b-item v-for="(category, idx) in availableCategories"
+                    :id="`${category.category_id}-${idx}`"
+                    :key="`${category.category_id}-${idx}`"
+                    :name="category.name"
+                    :link="{
+                        to: {
+                            name: OPS_FLOW_ROUTE.BOARD._NAME,
+                            query: { categoryId: category.category_id }
+                        },
+                        predicate,
+                    }"
+        />
     </l-s-b-container>
 </template>
diff --git a/packages/mirinae/src/components.ts b/packages/mirinae/src/components.ts
index 30dc6104b0..28f52ae19c 100644
--- a/packages/mirinae/src/components.ts
+++ b/packages/mirinae/src/components.ts
@@ -29,6 +29,7 @@ export { default as PTooltip } from './data-display/tooltips/PTooltip.vue';
 export { default as PTree } from './data-display/tree/PTree.vue';
 export { default as PTreeView } from './data-display/tree/tree-view/PTreeView.vue';
 export { default as PTreeItem } from './data-display/tree/tree-view/PTreeItem.vue';
+export { default as PTreeNode } from './data-display/tree/new-tree/PTreeNode.vue';
 export { default as PAvatar } from './data-display/avatar/PAvatar.vue';
 
 /* Feedbacks */
diff --git a/packages/mirinae/src/data-display/empty/PEmpty.vue b/packages/mirinae/src/data-display/empty/PEmpty.vue
index 28615bbaae..23aa2c13e1 100644
--- a/packages/mirinae/src/data-display/empty/PEmpty.vue
+++ b/packages/mirinae/src/data-display/empty/PEmpty.vue
@@ -39,6 +39,8 @@
 
 <script setup lang="ts">
 
+import type { TranslateResult } from 'vue-i18n';
+
 import PButton from '@/controls/buttons/button/PButton.vue';
 import type { ButtonStyle } from '@/controls/buttons/button/type';
 import { BUTTON_STYLE } from '@/controls/buttons/button/type';
@@ -50,10 +52,10 @@ import { EmptyImageSize } from '@/data-display/empty/type';
 interface EmptyProps {
     showImage?: boolean;
     imageSize?: EmptyImageSize;
-    title?: string;
+    title?: TranslateResult;
     showButton?: boolean;
     buttonStyleType?: ButtonStyle;
-    buttonTitle?: string;
+    buttonTitle?: TranslateResult;
 }
 
 const props = withDefaults(defineProps<EmptyProps>(), {
diff --git a/packages/mirinae/src/data-display/field-title/PFieldTitle.vue b/packages/mirinae/src/data-display/field-title/PFieldTitle.vue
index 4288cf0df8..2cbd81af95 100644
--- a/packages/mirinae/src/data-display/field-title/PFieldTitle.vue
+++ b/packages/mirinae/src/data-display/field-title/PFieldTitle.vue
@@ -28,9 +28,10 @@
 </template>
 
 <script lang="ts" setup>
+import type { TranslateResult } from 'vue-i18n';
 
 interface FieldTitleProps {
-    label?: string;
+    label?: TranslateResult;
     description?: string;
     size?: 'sm' | 'md' | 'lg';
     fontWeight?: 'regular' | 'bold';
diff --git a/packages/mirinae/src/data-display/tooltips/PTooltip.vue b/packages/mirinae/src/data-display/tooltips/PTooltip.vue
index 481b3dcf2d..1ede62403d 100644
--- a/packages/mirinae/src/data-display/tooltips/PTooltip.vue
+++ b/packages/mirinae/src/data-display/tooltips/PTooltip.vue
@@ -19,6 +19,29 @@ import type { TranslateResult } from 'vue-i18n';
 
 import type { TooltipPosition } from '@/data-display/tooltips/type';
 
+/*
+Tooltip Options are as follows:
+content - HTML text to be displayed in the tooltip. Can also be a function that returns the content or a Promise.
+classes
+targetClasses - CSS classes added to the target element of the tooltip.
+html - Boolean: allow HTML tooltip content.
+delay - Show/Hide delay, or object: { show: 500, hide: 100 } (ms).
+placement
+trigger - Events triggering the tooltip separated with spaces: 'hover', 'click', 'focus' or 'manual' ('manual' can't be combined with any other event).
+show - Boolean to manually open or hide the tooltip.
+offset - Offset of the position (px).
+container - Selector: Container where the tooltip will be appended (e.g. 'body'). Set it to false to append popover on target parent node.
+boundariesElement - DOM element for the tooltip boundaries.
+template - HTML template of the tooltip.
+arrowSelector - CSS selector to get the arrow element in the tooltip template.
+innerSelector - CSS selector to get the inner content element in the tooltip template.
+autoHide - Boolean: automatically close the tooltip on mouseover.
+hideOnTargetClick - Boolean: automatically close the tooltip on target click.
+loadingClass - CSS classes added to the tooltip when content is loading.
+loadingContent - Same as content, used when the actual tooltip content is loading.
+popperOptions - Other Popper.js options.
+*/
+
 export default defineComponent({
     name: 'PTooltip',
     directives: { tooltip: VTooltip },
diff --git a/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue b/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
new file mode 100644
index 0000000000..027dc7eb5e
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue';
+
+import type { TranslateResult } from 'vue-i18n';
+
+import PTooltip from '@/data-display/tooltips/PTooltip.vue';
+import { useTreeNodeIcon } from '@/data-display/tree/new-tree/composables/use-tree-node-icon';
+import { useTreeNodeSelect } from '@/data-display/tree/new-tree/composables/use-tree-node-select';
+import { useTreeNodeTextEllipsis } from '@/data-display/tree/new-tree/composables/use-tree-node-text-ellipsis';
+import { useTreeNodeToggle } from '@/data-display/tree/new-tree/composables/use-tree-node-toggle';
+import type {
+    TreeNodeDisplayType, TreeNodeIcon, TreeNodeLink,
+} from '@/data-display/tree/new-tree/type';
+import PLazyImg from '@/feedbacks/loading/lazy-img/PLazyImg.vue';
+import PI from '@/foundation/icons/PI.vue';
+
+// CAUTION: Props should be defined here due to the limitation of `script setup` of Vue 2.7.
+const props = withDefaults(defineProps<{
+  id: string;
+  name?: TranslateResult;
+  icon?: TreeNodeIcon;
+  displayType?: TreeNodeDisplayType;
+  selectable?: boolean;
+  draggable?: boolean;
+  // work only when displayType is 'tree'
+  depth?: number;
+  expanded?: boolean; // toggle state
+  loading?: boolean; // loading state for children
+  hasChildren?: boolean;
+  // select and link
+  link?: TreeNodeLink; // for router link. work only when selectable is true
+  selected?: boolean; // for manual selection without link. work only when selectable is true
+}>(), {
+    name: undefined,
+    icon: undefined,
+    displayType: 'tree',
+    selectable: false,
+    draggable: false,
+    depth: 0,
+    expanded: false,
+    loading: false,
+    hasChildren: false,
+    link: undefined,
+    selected: false,
+});
+// CAUTION: Emit should be defined here due to the limitation of `script setup` of Vue 2.7.
+const emit = defineEmits<{(e: 'update:selected', value: boolean): void;
+  (e: 'update:expanded', value: boolean): void;
+}>();
+
+/* hover */
+const hoveredItem = ref<string>('');
+const isHovered = computed(() => hoveredItem.value && hoveredItem.value === props.id);
+
+/* text ellipsis */
+const textEl = ref<HTMLElement | null>(null);
+const { isEllipsis } = useTreeNodeTextEllipsis({ textEl });
+
+/* route */
+const {
+    isSelected,
+    target,
+    to,
+} = useTreeNodeSelect({
+    selectable: toRef(props, 'selectable'),
+    link: toRef(props, 'link'),
+    selected: toRef(props, 'selected'),
+}, emit);
+
+/* icon */
+const {
+    iconName,
+    iconColor,
+    imgUrl,
+} = useTreeNodeIcon(toRef(props, 'icon'));
+
+/* toggle */
+const {
+    enableToggle, showToggle, isExpanded,
+} = useTreeNodeToggle({
+    loading: toRef(props, 'loading'),
+    expanded: toRef(props, 'expanded'),
+    hasChildren: toRef(props, 'hasChildren'),
+    displayType: toRef(props, 'displayType'),
+}, emit);
+
+
+/* depth */
+const depthArray = computed(() => Array.from({ length: props.depth }, (_, i) => `${i}`));
+
+/* component */
+const component = computed(() => (props.link ? 'router-link' : 'div'));
+
+/* slot props */
+const slotProps = computed(() => ({
+    ...props,
+    isHovered,
+    enableToggle,
+    showToggle,
+    isExpanded,
+    isSelected,
+    isEllipsis,
+}));
+</script>
+
+<template>
+    <div class="p-tree-node">
+        <div class="tree-node-wrapper"
+             :class="{'selected': isSelected, 'selectable': props.selectable }"
+             @mouseenter="hoveredItem = props.id"
+             @mouseleave="hoveredItem = ''"
+        >
+            <component :is="component"
+                       class="node-outer-container"
+                       :target="target"
+                       :to="to"
+                       @click.native="$event.stopImmediatePropagation()"
+            >
+                <div v-for="dep in depthArray"
+                     :key="`depth-${dep}`"
+                     class="depth-spacer"
+                />
+                <slot name="outer-left"
+                      v-bind="slotProps"
+                />
+                <div v-if="props.draggable"
+                     class="drag-handle"
+                >
+                    <p-i name="ic_drag-handle"
+                         width="1rem"
+                         height="1rem"
+                    />
+                </div>
+                <div v-if="enableToggle"
+                     class="toggle-container"
+                >
+                    <p-i v-if="showToggle"
+                         name="ic_chevron-down"
+                         width="1rem"
+                         height="1rem"
+                         color="inherit transparent"
+                         class="toggle-button"
+                         :class="{ 'is-collapsed': !isExpanded }"
+                         @click="isExpanded = !isExpanded"
+                    />
+                </div>
+                <div class="node-inner-container">
+                    <p-i v-if="iconName"
+                         :name="iconName"
+                         :color="iconColor"
+                         width="1rem"
+                         height="1rem"
+                         class="icon"
+                    />
+                    <p-lazy-img v-else-if="imgUrl"
+                                :src="imgUrl"
+                                width="1rem"
+                                height="1rem"
+                                class="icon"
+                    />
+                    <slot name="inner-left"
+                          v-bind="slotProps"
+                    />
+                    <div ref="textEl"
+                         class="text-container"
+                    >
+                        <p-tooltip :key="`${props.id}-tooltip-${isEllipsis}`"
+                                   position="bottom-start"
+                                   :contents="props.name"
+                                   :options="{
+                                       trigger: 'manual',
+                                       show: isHovered && isEllipsis,
+                                   }"
+                        >
+                            <slot v-bind="slotProps">
+                                {{ props.name }}
+                            </slot>
+                        </p-tooltip>
+                    </div>
+                    <slot name="inner-right"
+                          v-bind="slotProps"
+                    />
+                </div>
+                <slot name="outer-right"
+                      v-bind="slotProps"
+                />
+            </component>
+            <div v-show="isHovered"
+                 class="node-action-container"
+            >
+                <slot name="action"
+                      v-bind="slotProps"
+                />
+            </div>
+        </div>
+        <div v-if="showToggle && isExpanded"
+             class="children-wrapper"
+        >
+            <slot name="children"
+                  v-bind="slotProps"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="postcss">
+.p-tree-node {
+    > .tree-node-wrapper {
+        @apply relative cursor-move border border-transparent outline-none rounded-md text-label-md;
+        &.selectable {
+            &:focus {
+                @apply bg-white border-secondary1;
+                box-shadow: 0 0 0 2px rgba(theme('colors.secondary1'), 0.2);
+            }
+            &:active {
+                box-shadow: none;
+            }
+        }
+        &.selected {
+            @apply bg-blue-200;
+        }
+        &.selectable:hover {
+            @apply cursor-pointer;
+            &:not(.selected) {
+                @apply bg-blue-100;
+            }
+        }
+        > .node-outer-container {
+            @apply inline-flex items-center w-full h-8 justify-between px-1 text-gray-800;
+            > .depth-spacer {
+                @apply w-4 flex-shrink-0;
+            }
+            > .drag-handle {
+                @apply w-6 flex-shrink-0 cursor-grab inline-flex items-center justify-center;
+            }
+            > .toggle-container {
+                @apply w-4 flex-shrink-0;
+                > .toggle-button {
+                    cursor: pointer;
+                    transition: transform 0.3s ease-in-out;
+                    &.is-collapsed {
+                        transform: rotate(-90deg);
+                    }
+                }
+            }
+            > .node-inner-container {
+                @apply inline-flex items-center flex-grow overflow-hidden gap-1;
+                > .icon {
+                    @apply flex-shrink-0;
+                }
+                > .text-container {
+                    @apply overflow-hidden whitespace-nowrap text-ellipsis;
+                }
+            }
+        }
+        > .node-action-container {
+            @apply absolute right-1 top-1/2 -translate-y-1/2;
+        }
+    }
+}
+</style>
diff --git a/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-icon.ts b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-icon.ts
new file mode 100644
index 0000000000..df89e93834
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-icon.ts
@@ -0,0 +1,26 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import type { TreeNodeIcon } from '@/data-display/tree/new-tree/type';
+
+export const useTreeNodeIcon = (icon: Ref<TreeNodeIcon|undefined>) => {
+    const iconName = computed<string>(() => {
+        if (!icon.value) return '';
+        if (typeof icon.value === 'string') return icon.value;
+        return icon.value.iconName || '';
+    });
+    const iconColor = computed<string|undefined>(() => {
+        if (!icon.value) return undefined;
+        return typeof icon.value === 'string' ? undefined : icon.value.iconColor;
+    });
+    const imgUrl = computed<string>(() => {
+        if (!icon.value) return '';
+        return typeof icon.value === 'string' ? '' : icon.value.imgUrl || '';
+    });
+
+    return {
+        iconName,
+        iconColor,
+        imgUrl,
+    };
+};
diff --git a/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-select.ts b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-select.ts
new file mode 100644
index 0000000000..169349c5fe
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-select.ts
@@ -0,0 +1,57 @@
+import type { Ref } from 'vue';
+import { computed, ref, watch } from 'vue';
+
+import { useRoute, useRouter } from 'vue-router/composables';
+
+import type { TreeNodeEmit, TreeNodeLink } from '@/data-display/tree/new-tree/type';
+
+export const useTreeNodeSelect = ({
+    selectable, link, selected,
+}: {
+    selectable: Ref<boolean>;
+    link: Ref<TreeNodeLink|undefined>;
+    selected: Ref<boolean>;
+}, emit: TreeNodeEmit) => {
+    const router = useRouter();
+    const route = useRoute();
+
+    const isLinkMatched = computed<boolean>(() => {
+        if (!selectable.value) return false;
+        if (!link.value?.to) return false;
+
+        if (link.value?.predicate) {
+            return link.value.predicate(link.value.to, route);
+        }
+
+        const resolved = router.resolve(link.value.to);
+        if (!resolved) return false;
+
+        let currentPath = route.fullPath;
+        if (currentPath.indexOf('?') > 0) {
+            currentPath = currentPath.slice(0, currentPath.indexOf('?'));
+        }
+        const resolvedHref = resolved.href;
+        return currentPath === resolvedHref;
+    });
+
+    const target = computed<string>(() => (link.value?.openNewTab ? '_blank' : '_self'));
+
+    const to = computed(() => link.value?.to);
+
+    const isSelected = ref(selected.value || isLinkMatched.value);
+    watch(selected, (value) => {
+        isSelected.value = value;
+    });
+    watch(isLinkMatched, (value) => {
+        isSelected.value = value;
+    });
+    watch(isSelected, (value) => {
+        emit('update:selected', value);
+    });
+
+    return {
+        isSelected,
+        target,
+        to,
+    };
+};
diff --git a/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-text-ellipsis.ts b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-text-ellipsis.ts
new file mode 100644
index 0000000000..58b9f0761a
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-text-ellipsis.ts
@@ -0,0 +1,19 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import { useElementSize } from '@vueuse/core';
+
+interface UseTreeNodeTextEllipsisOptions {
+  textEl: Ref<HTMLElement | null>;
+}
+export const useTreeNodeTextEllipsis = ({ textEl }: UseTreeNodeTextEllipsisOptions) => {
+    const textElSize = useElementSize(textEl);
+    const isEllipsis = computed(() => {
+        const scrollWidth = textEl.value?.scrollWidth;
+        const textWidth = Math.ceil(textElSize.width.value);
+        return scrollWidth && scrollWidth > textWidth;
+    });
+    return {
+        isEllipsis,
+    };
+};
diff --git a/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-toggle.ts b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-toggle.ts
new file mode 100644
index 0000000000..2f05cf5ce8
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-toggle.ts
@@ -0,0 +1,38 @@
+import type { Ref } from 'vue';
+import { computed, ref, watch } from 'vue';
+
+import type {
+    TreeNodeDisplayType, TreeNodeEmit,
+} from '@/data-display/tree/new-tree/type';
+
+export const useTreeNodeToggle = ({
+    expanded, hasChildren, loading, displayType,
+}:{
+  expanded: Ref<boolean>;
+  hasChildren: Ref<boolean>;
+  loading: Ref<boolean>;
+  displayType: Ref<TreeNodeDisplayType>;
+}, emit: TreeNodeEmit) => {
+    const enableToggle = computed(() => displayType.value === 'tree');
+    const isExpanded = ref(expanded.value);
+    watch(expanded, (value) => {
+        isExpanded.value = value;
+    });
+    watch(isExpanded, (value) => {
+        emit('update:expanded', value);
+    });
+
+    // whether to show toggle button. only show when it is leaf node.
+    const showToggle = computed(() => {
+        if (!enableToggle.value) return false;
+        if (loading.value) return true;
+        return hasChildren.value;
+    });
+    const isLoading = ref(loading.value);
+    watch(loading, (value) => {
+        isLoading.value = value;
+    });
+    return {
+        enableToggle, showToggle, isExpanded,
+    };
+};
diff --git a/packages/mirinae/src/data-display/tree/new-tree/type.ts b/packages/mirinae/src/data-display/tree/new-tree/type.ts
new file mode 100644
index 0000000000..e7e5432d71
--- /dev/null
+++ b/packages/mirinae/src/data-display/tree/new-tree/type.ts
@@ -0,0 +1,32 @@
+import type { TranslateResult } from 'vue-i18n';
+import type { Location, Route } from 'vue-router';
+
+export type TreeNodeIcon = string | { iconName?: string; iconColor?: string; imgUrl?: string; };
+export type TreeNodeRoutePredicate = (to: Location, currentRoute: Route) => boolean;
+export interface TreeNodeLink {
+  to: Location;
+  predicate?: TreeNodeRoutePredicate;
+  openNewTab?: boolean;
+}
+export type TreeNodeDisplayType = 'tree' | 'list';
+export type TreeNodeToggle = 'expanded' | 'collapsed' | 'hidden' | 'loading';
+export interface TreeNodeProps {
+  id: string;
+  name?: TranslateResult;
+  icon?: TreeNodeIcon;
+  displayType?: TreeNodeDisplayType;
+  selectable?: boolean;
+  draggable?: boolean;
+  // work only when displayType is 'tree'
+  depth?: number;
+  expanded?: boolean; // toggle state
+  loading?: boolean; // loading state for children
+  hasChildren?: boolean;
+  // select and link
+  link?: TreeNodeLink; // for router link. work only when selectable is true
+  selected?: boolean; // for manual selection without link. work only when selectable is true
+}
+export interface TreeNodeEmit {
+  (e: 'update:selected', value: boolean): void;
+  (e: 'update:expanded', value: boolean): void;
+}
diff --git a/packages/mirinae/src/foundation/icons/icon-assets/ic_project-filled.svg b/packages/mirinae/src/foundation/icons/icon-assets/ic_project-filled.svg
new file mode 100644
index 0000000000..43d14460df
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/icon-assets/ic_project-filled.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.2" x="3" y="1.3335" width="10" height="13.3333" fill="#898995"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.3999 1.95455V14.0455H12.5999V1.95455H3.3999ZM3.1999 1C2.75807 1 2.3999 1.36162 2.3999 1.80769V14.1923C2.3999 14.6384 2.75807 15 3.1999 15H12.7999C13.2417 15 13.5999 14.6384 13.5999 14.1923V1.80769C13.5999 1.36162 13.2417 1 12.7999 1H3.1999Z" fill="#898995"/>
+<path d="M7.06644 4.88157V14.427H6.13311L6.13311 4.88157H7.06644Z" fill="#898995"/>
+<path d="M6.39977 9.33611H3.06644L3.06644 8.44521L6.39977 8.44521V9.33611Z" fill="#898995"/>
+<path d="M2.73311 4.88157H13.3998V5.77248H2.73311V4.88157Z" fill="#898995"/>
+</svg>
diff --git a/packages/mirinae/src/foundation/icons/p-icons/ic_project-filled.js b/packages/mirinae/src/foundation/icons/p-icons/ic_project-filled.js
new file mode 100644
index 0000000000..1f797c8a30
--- /dev/null
+++ b/packages/mirinae/src/foundation/icons/p-icons/ic_project-filled.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'ic_project-filled': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 16',
+    data: '<path pid="0" opacity=".2" _fill="#898995" d="M3 1.333h10v13.333H3z"/><path pid="1" fill-rule="evenodd" clip-rule="evenodd" d="M3.4 1.955v12.09h9.2V1.956H3.4zM3.2 1c-.442 0-.8.362-.8.808v12.384c0 .446.358.808.8.808h9.6c.442 0 .8-.362.8-.808V1.808A.804.804 0 0012.8 1H3.2z" _fill="#898995"/><path pid="2" d="M7.066 4.882v9.545h-.933V4.882h.933z" _fill="#898995"/><path pid="3" d="M6.4 9.336H3.066v-.89H6.4v.89zM2.733 4.882H13.4v.89H2.733v-.89z" _fill="#898995"/>'
+  }
+})
diff --git a/packages/mirinae/src/foundation/icons/p-icons/index.js b/packages/mirinae/src/foundation/icons/p-icons/index.js
index 34e7d06d13..9a7a9f0452 100644
--- a/packages/mirinae/src/foundation/icons/p-icons/index.js
+++ b/packages/mirinae/src/foundation/icons/p-icons/index.js
@@ -193,6 +193,7 @@ import './ic_plus-circle'
 import './ic_plus'
 import './ic_print'
 import './ic_private-repository'
+import './ic_project-filled'
 import './ic_provider-aws'
 import './ic_provider-gcp'
 import './ic_prowler'

From 0196c7bd9eedb03949beb56c07d0c8bf0e817a3d Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:52 +0900
Subject: [PATCH 06/22] refactor: reorganize project structure and update
 imports for project tree components

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../src/common/modules/page-layouts/type.ts   |   2 +-
 .../modules/project/ProjectSelectDropdown.vue |  13 +-
 .../modules/project}/project-tree-type.ts     |   0
 .../modules/project}/use-project-tree.ts      |   2 +-
 .../components/AlertMainAlertCreateModal.vue  |   2 +-
 .../v1/components/EscalationPolicyForm.vue    |   2 +-
 .../iam/components/AppManagementFormModal.vue |   2 +-
 .../project/v-shared/tree/TreeItem.vue        | 137 ------------------
 .../project/v-shared/tree/TreeView.vue        |  98 -------------
 .../services/project/v-shared/tree/type.ts    |  19 ---
 .../services/project/v1/ProjectContainer.vue  |   8 +-
 .../src/services/project/v1/ProjectLSB.vue    |   2 +-
 .../v1/components/ProjectDetailTabHeader.vue  |  10 +-
 .../components/ProjectFormModal.vue           |   0
 .../ProjectGroupMemberManagementModal.vue     |   2 +-
 .../v1/components/ProjectMainProjectCard.vue  |   2 +-
 .../ProjectMainProjectGroupCard.vue           |   2 +-
 .../ProjectMainProjectGroupFormModal.vue      |   0
 .../ProjectMainProjectGroupMoveModal.vue      |   2 +-
 .../project/v1/components/ProjectMainTree.vue |   4 +-
 .../components/ProjectMemberInviteModal.vue   |   0
 .../components/ProjectTagsModal.vue           |   0
 .../v1/composables/use-project-favorite.ts    |   2 +-
 .../v1/composables/use-project-tree-data.ts   |   5 +-
 .../v1/pages/ProjectDetailPageLegacy.vue      |   6 +-
 .../project/v1/pages/ProjectMainPage.vue      |   8 +-
 .../stores/project-page-store.ts              |   5 +-
 .../stores/project-tree-store.ts              |   3 +-
 28 files changed, 43 insertions(+), 295 deletions(-)
 rename apps/web/src/{services/project/v-shared/types => common/modules/project}/project-tree-type.ts (100%)
 rename apps/web/src/{services/project/v-shared/composables => common/modules/project}/use-project-tree.ts (99%)
 delete mode 100644 apps/web/src/services/project/v-shared/tree/TreeItem.vue
 delete mode 100644 apps/web/src/services/project/v-shared/tree/TreeView.vue
 delete mode 100644 apps/web/src/services/project/v-shared/tree/type.ts
 rename apps/web/src/services/project/{v-shared => v1}/components/ProjectFormModal.vue (100%)
 rename apps/web/src/services/project/{v-shared => v1}/components/ProjectGroupMemberManagementModal.vue (99%)
 rename apps/web/src/services/project/{v-shared => v1}/components/ProjectMainProjectGroupFormModal.vue (100%)
 rename apps/web/src/services/project/{v-shared => v1}/components/ProjectMainProjectGroupMoveModal.vue (98%)
 rename apps/web/src/services/project/{v-shared => v1}/components/ProjectMemberInviteModal.vue (100%)
 rename apps/web/src/services/project/{v-shared => v1}/components/ProjectTagsModal.vue (100%)
 rename apps/web/src/services/project/{v-shared => v1}/stores/project-page-store.ts (98%)
 rename apps/web/src/services/project/{v-shared => v1}/stores/project-tree-store.ts (89%)

diff --git a/apps/web/src/common/modules/page-layouts/type.ts b/apps/web/src/common/modules/page-layouts/type.ts
index 4343f25bac..9d3acd34e0 100644
--- a/apps/web/src/common/modules/page-layouts/type.ts
+++ b/apps/web/src/common/modules/page-layouts/type.ts
@@ -1,7 +1,7 @@
 import type { TranslateResult } from 'vue-i18n';
 import type { Location } from 'vue-router';
 
-import type { ProjectGroupTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
+import type { ProjectGroupTreeNodeData } from '@/common/modules/project/project-tree-type';
 
 export interface Breadcrumb {
     name: TranslateResult|string;
diff --git a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
index 85eb705042..f0d5e3d4d8 100644
--- a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
+++ b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
@@ -17,15 +17,16 @@ import type { ReferenceMap } from '@/store/reference/type';
 import getRandomId from '@/lib/random-id-generator';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { indigo, peacock } from '@/styles/colors';
-
-import type { ProjectTreeOptions } from '@/services/project/v-shared/composables/use-project-tree';
-import { useProjectTree } from '@/services/project/v-shared/composables/use-project-tree';
 import type {
     ProjectTreeItem, ProjectTreeNodeData, ProjectTreeRoot, ProjectTreeItemType,
     ProjectTreeNode,
-} from '@/services/project/v-shared/types/project-tree-type';
+} from '@/common/modules/project/project-tree-type';
+import type { ProjectTreeOptions } from '@/common/modules/project/use-project-tree';
+import { useProjectTree } from '@/common/modules/project/use-project-tree';
+
+import { indigo, peacock } from '@/styles/colors';
+
+
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 
 interface ProjectGroupSelectOptions {
diff --git a/apps/web/src/services/project/v-shared/types/project-tree-type.ts b/apps/web/src/common/modules/project/project-tree-type.ts
similarity index 100%
rename from apps/web/src/services/project/v-shared/types/project-tree-type.ts
rename to apps/web/src/common/modules/project/project-tree-type.ts
diff --git a/apps/web/src/services/project/v-shared/composables/use-project-tree.ts b/apps/web/src/common/modules/project/use-project-tree.ts
similarity index 99%
rename from apps/web/src/services/project/v-shared/composables/use-project-tree.ts
rename to apps/web/src/common/modules/project/use-project-tree.ts
index 00b833a92b..5c7867039c 100644
--- a/apps/web/src/services/project/v-shared/composables/use-project-tree.ts
+++ b/apps/web/src/common/modules/project/use-project-tree.ts
@@ -11,7 +11,7 @@ import type { ProjectGroupModel } from '@/api-clients/identity/project-group/sch
 import type { ProjectListParameters } from '@/api-clients/identity/project/schema/api-verbs/list';
 import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
 
-import type { ProjectTreeItemType, ProjectTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
+import type { ProjectTreeItemType, ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 
 
 type ProjectGroupListResponse = ListResponse<ProjectGroupModel>;
diff --git a/apps/web/src/services/alert-manager/v1/components/AlertMainAlertCreateModal.vue b/apps/web/src/services/alert-manager/v1/components/AlertMainAlertCreateModal.vue
index 2c55b7b58b..2038e5a3ed 100644
--- a/apps/web/src/services/alert-manager/v1/components/AlertMainAlertCreateModal.vue
+++ b/apps/web/src/services/alert-manager/v1/components/AlertMainAlertCreateModal.vue
@@ -21,9 +21,9 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
+import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
-import type { ProjectTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
 
 const props = defineProps<{
     visible: boolean;
diff --git a/apps/web/src/services/alert-manager/v1/components/EscalationPolicyForm.vue b/apps/web/src/services/alert-manager/v1/components/EscalationPolicyForm.vue
index 550a34591b..4595574386 100644
--- a/apps/web/src/services/alert-manager/v1/components/EscalationPolicyForm.vue
+++ b/apps/web/src/services/alert-manager/v1/components/EscalationPolicyForm.vue
@@ -22,13 +22,13 @@ import { useUserStore } from '@/store/user/user-store';
 import { referenceRouter } from '@/lib/reference/referenceRouter';
 
 import { useFormValidator } from '@/common/composables/form-validator';
+import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
 import EscalationPolicyFormRulesInput from '@/services/alert-manager/v1/components/EscalationPolicyFormRulesInput.vue';
 import { ACTION } from '@/services/alert-manager/v1/constants/alert-constant';
 import { useEscalationPolicyFormStore } from '@/services/alert-manager/v1/stores/escalation-policy-form-store';
 import type { ActionMode } from '@/services/alert-manager/v1/types/alert-type';
-import type { ProjectTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 
 const props = withDefaults(defineProps<{
diff --git a/apps/web/src/services/iam/components/AppManagementFormModal.vue b/apps/web/src/services/iam/components/AppManagementFormModal.vue
index 4d9017db5d..a44e91cdbc 100644
--- a/apps/web/src/services/iam/components/AppManagementFormModal.vue
+++ b/apps/web/src/services/iam/components/AppManagementFormModal.vue
@@ -26,13 +26,13 @@ import { i18n } from '@/translations';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
 import { useRoleFormatter } from '@/services/iam/composables/refined-table-data';
 import { getInputItemsFromTagKeys } from '@/services/iam/composables/tag-data';
 import { APP_DROPDOWN_MODAL_TYPE } from '@/services/iam/constants/app-constant';
 import { useAppPageStore } from '@/services/iam/store/app-page-store';
-import type { ProjectTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
 
 
 interface AppDropdownMenuItem extends SelectDropdownMenuItem {
diff --git a/apps/web/src/services/project/v-shared/tree/TreeItem.vue b/apps/web/src/services/project/v-shared/tree/TreeItem.vue
deleted file mode 100644
index e0eb6175f3..0000000000
--- a/apps/web/src/services/project/v-shared/tree/TreeItem.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<script setup lang="ts">
-
-import {
-    computed, onMounted, reactive, useSlots, watch,
-} from 'vue';
-import type { SetupContext } from 'vue/types/v3-setup-context';
-
-import { PI, PSpinner } from '@cloudforet/mirinae';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import type { TreeNode } from '@/services/project/v-shared/tree/type';
-
-interface Props {
-    node: TreeNode;
-    selectedId?: string;
-    isOpen?: boolean;
-}
-
-const props = defineProps<Props>();
-const slots = useSlots();
-const isExpandable = (_slots: SetupContext['slots']) => _slots['child-content'] !== undefined;
-
-const emit = defineEmits<{(e: 'click-toggle', node: TreeNode): Promise<void>|void;
-    (e: 'click-item', node: TreeNode): void;
-    (e: 'update:is-open', value: boolean): void;
-}>();
-
-const state = reactive({
-    toggleIcon: computed(() => (state.proxyIsOpen ? 'ic_caret-down-filled-alt' : 'ic_caret-right')),
-    fetchLoading: false,
-    isSelected: computed(() => props.selectedId === props.node.id),
-    proxyIsOpen: useProxyValue('isOpen', props, emit),
-});
-
-const openToggle = () => {
-    state.proxyIsOpen = true;
-};
-const closeToggle = () => {
-    state.proxyIsOpen = false;
-};
-
-const handleClickToggle = async () => {
-    if (state.proxyIsOpen) {
-        closeToggle();
-    } else {
-        openToggle();
-    }
-};
-
-const handleClickItem = () => {
-    emit('click-item', props.node);
-};
-
-
-watch(() => state.proxyIsOpen, async (isOpen) => {
-    if (!props.node.id) return;
-    if (isOpen) {
-        await emit('click-toggle', props.node);
-    } else state.proxyIsOpen = false;
-}, { immediate: true });
-
-onMounted(() => {
-    if (state.proxyIsOpen) {
-        openToggle();
-    }
-});
-
-</script>
-
-<template>
-    <div class="tree-item">
-        <component :is="props.node.data.to ? 'router-link' : 'div'"
-                   :to="props.node.data.to"
-                   class="content-wrapper"
-                   :class="{ selected: props.node.id === props.selectedId }"
-                   :style="{ 'padding-left': `${0.125 + (props.node.depth || 0) * 1}rem`}"
-                   @click.native="handleClickItem"
-        >
-            <div v-if="isExpandable(slots)"
-                 class="toggle-icon"
-            >
-                <p-spinner v-if="props.node.loading"
-                           size="sm"
-                />
-                <p-i v-else
-                     :name="state.toggleIcon"
-                     width="1rem"
-                     height="1rem"
-                     @click.prevent="handleClickToggle"
-                />
-            </div>
-            <div :class="{'content-text': true, 'expandable': isExpandable(slots)}">
-                <slot name="content"
-                      v-bind="{ node: props.node }"
-                />
-            </div>
-        </component>
-        <div v-if="slots && state.proxyIsOpen"
-             class="child-group"
-        >
-            <slot name="child-content" />
-        </div>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.tree-item {
-    @apply w-full;
-
-    .content-wrapper {
-        @apply flex items-center rounded w-full;
-        padding-left: 0.125rem;
-        padding-right: 0.5rem;
-
-        &:hover {
-            @apply bg-blue-100 cursor-pointer;
-        }
-
-        &.selected {
-            @apply bg-blue-200;
-        }
-
-        .content-text {
-            @apply w-full;
-
-            &.expandable {
-                width: calc(100% - 1rem);
-            }
-        }
-    }
-
-    .child-group {
-        @apply flex items-center;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v-shared/tree/TreeView.vue b/apps/web/src/services/project/v-shared/tree/TreeView.vue
deleted file mode 100644
index d4df77e367..0000000000
--- a/apps/web/src/services/project/v-shared/tree/TreeView.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-// eslint-disable-next-line import/order,import/no-duplicates
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-    name: 'TreeView',
-});
-</script>
-<script setup lang="ts">
-/* eslint-disable import/first */
-// eslint-disable-next-line import/no-duplicates
-import { reactive } from 'vue';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import type { TreeNode, TreeDisplayMap } from '@/services/project/v-shared/tree/type';
-
-import TreeItem from './TreeItem.vue';
-
-interface Props {
-    treeData: TreeNode[];
-    treeDisplayMap?: TreeDisplayMap;
-    selectedId?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    treeDisplayMap: () => ({}),
-    selectedId: undefined,
-});
-const emit = defineEmits<{(event: 'click-toggle', node: TreeNode): Promise<void>|void;
-    (e: 'click-item', node: TreeNode): void;
-    (e: 'update:tree-display-map', value: TreeDisplayMap): void;
-}>();
-
-const state = reactive({
-    proxyTreeDisplayMap: useProxyValue('treeDisplayMap', props, emit),
-});
-
-const handleClickToggle = async (item: TreeNode) => {
-    await emit('click-toggle', item);
-};
-const handleClickItem = (item: TreeNode) => {
-    emit('click-item', item);
-};
-
-const handleUpdateTreeDisplayMap = (id: string|undefined, isOpen: boolean) => {
-    if (!id) return;
-    state.proxyTreeDisplayMap = {
-        ...state.proxyTreeDisplayMap,
-        [id]: {
-            isOpen,
-        },
-    };
-};
-
-</script>
-<template>
-    <div class="tree-view">
-        <tree-item v-for="item in treeData"
-                   :key="item.id"
-                   :node="item"
-                   :selected-id="selectedId"
-                   :is-open="state.proxyTreeDisplayMap[item.id]?.isOpen"
-                   @click-toggle="handleClickToggle"
-                   @click-item="handleClickItem"
-                   @update:is-open="handleUpdateTreeDisplayMap(item.id, $event)"
-        >
-            <template #content="{ node }">
-                <slot name="content"
-                      v-bind="{ node }"
-                />
-            </template>
-            <template v-if="Array.isArray(item.children)"
-                      #child-content
-            >
-                <tree-view :tree-data="item.children"
-                           :tree-display-map.sync="state.proxyTreeDisplayMap"
-                           :selected-id="selectedId"
-                           @click-toggle="handleClickToggle"
-                           @click-item="handleClickItem"
-                >
-                    <template #content="{ node }">
-                        <slot name="content"
-                              v-bind="{ node }"
-                        />
-                    </template>
-                </tree-view>
-            </template>
-        </tree-item>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.tree-view {
-    width: 100%;
-}
-</style>
-
diff --git a/apps/web/src/services/project/v-shared/tree/type.ts b/apps/web/src/services/project/v-shared/tree/type.ts
deleted file mode 100644
index ebfccbb339..0000000000
--- a/apps/web/src/services/project/v-shared/tree/type.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Location } from 'vue-router/types/router';
-
-export interface TreeNode<T extends TreeData = any> {
-    id: string;
-    depth: number;
-    isOpen?: boolean;
-    data: T;
-    loading?: boolean;
-    children?: TreeNode<T>[];
-}
-
-export interface TreeData {
-    to?: Location;
-}
-export interface TreeDisplayMap {
-    [id: string]: {
-        isOpen: boolean;
-    }
-}
diff --git a/apps/web/src/services/project/v1/ProjectContainer.vue b/apps/web/src/services/project/v1/ProjectContainer.vue
index 8470bdb3c8..0f588e5560 100644
--- a/apps/web/src/services/project/v1/ProjectContainer.vue
+++ b/apps/web/src/services/project/v1/ProjectContainer.vue
@@ -10,12 +10,12 @@ import CenteredPageLayout from '@/common/modules/page-layouts/CenteredPageLayout
 import GeneralPageLayout from '@/common/modules/page-layouts/GeneralPageLayout.vue';
 import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout.vue';
 
-import ProjectFormModal from '@/services/project/v-shared/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupFormModal from '@/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
+import ProjectFormModal from '@/services/project/v1/components/ProjectFormModal.vue';
+import ProjectMainProjectGroupFormModal from '@/services/project/v1/components/ProjectMainProjectGroupFormModal.vue';
 import ProjectLSB from '@/services/project/v1/ProjectLSB.vue';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
+import { useProjectTreeStore } from '@/services/project/v1/stores/project-tree-store';
 
 
 
diff --git a/apps/web/src/services/project/v1/ProjectLSB.vue b/apps/web/src/services/project/v1/ProjectLSB.vue
index cca43a4483..37963f1d2a 100644
--- a/apps/web/src/services/project/v1/ProjectLSB.vue
+++ b/apps/web/src/services/project/v1/ProjectLSB.vue
@@ -29,10 +29,10 @@ import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
 
 import { indigo, peacock } from '@/styles/colors';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
 import ProjectMainTree from '@/services/project/v1/components/ProjectMainTree.vue';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project/v1/stores/project-detail-page-store';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
 const route = useRoute();
 const allReferenceStore = useAllReferenceStore();
diff --git a/apps/web/src/services/project/v1/components/ProjectDetailTabHeader.vue b/apps/web/src/services/project/v1/components/ProjectDetailTabHeader.vue
index a0e5257b0a..a2537ee869 100644
--- a/apps/web/src/services/project/v1/components/ProjectDetailTabHeader.vue
+++ b/apps/web/src/services/project/v1/components/ProjectDetailTabHeader.vue
@@ -51,14 +51,14 @@ import { gray, peacock } from '@/styles/colors';
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { DYNAMIC_COST_QUERY_SET_PARAMS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-import ProjectFormModal from '@/services/project/v-shared/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue';
-import ProjectMemberInviteModal from '@/services/project/v-shared/components/ProjectMemberInviteModal.vue';
-import ProjectTagsModal from '@/services/project/v-shared/components/ProjectTagsModal.vue';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
+import ProjectFormModal from '@/services/project/v1/components/ProjectFormModal.vue';
 import ProjectMainDeleteModal from '@/services/project/v1/components/ProjectMainDeleteModal.vue';
+import ProjectMainProjectGroupMoveModal from '@/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue';
+import ProjectMemberInviteModal from '@/services/project/v1/components/ProjectMemberInviteModal.vue';
+import ProjectTagsModal from '@/services/project/v1/components/ProjectTagsModal.vue';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project/v1/stores/project-detail-page-store';
+import { useProjectTreeStore } from '@/services/project/v1/stores/project-tree-store';
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
 
 
diff --git a/apps/web/src/services/project/v-shared/components/ProjectFormModal.vue b/apps/web/src/services/project/v1/components/ProjectFormModal.vue
similarity index 100%
rename from apps/web/src/services/project/v-shared/components/ProjectFormModal.vue
rename to apps/web/src/services/project/v1/components/ProjectFormModal.vue
diff --git a/apps/web/src/services/project/v-shared/components/ProjectGroupMemberManagementModal.vue b/apps/web/src/services/project/v1/components/ProjectGroupMemberManagementModal.vue
similarity index 99%
rename from apps/web/src/services/project/v-shared/components/ProjectGroupMemberManagementModal.vue
rename to apps/web/src/services/project/v1/components/ProjectGroupMemberManagementModal.vue
index a460bafd7c..da282e066b 100644
--- a/apps/web/src/services/project/v-shared/components/ProjectGroupMemberManagementModal.vue
+++ b/apps/web/src/services/project/v1/components/ProjectGroupMemberManagementModal.vue
@@ -28,7 +28,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { useRoleFormatter } from '@/services/iam/composables/refined-table-data';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
 
 interface Props {
diff --git a/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue
index a4aebb2bd5..cf3261b267 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainProjectCard.vue
@@ -19,9 +19,9 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { peacock } from '@/styles/colors';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
 import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
 
 interface Props {
diff --git a/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue
index 1411badfd1..09e45126a9 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupCard.vue
@@ -14,9 +14,9 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { indigo } from '@/styles/colors';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
 import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
 interface Props {
     item: ProjectCardItemType;
diff --git a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupFormModal.vue
similarity index 100%
rename from apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue
rename to apps/web/src/services/project/v1/components/ProjectMainProjectGroupFormModal.vue
diff --git a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue
similarity index 98%
rename from apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue
rename to apps/web/src/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue
index 10e973fbe0..8f066fe304 100644
--- a/apps/web/src/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue
@@ -17,9 +17,9 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
+import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
-import type { ProjectTreeNodeData } from '@/services/project/v-shared/types/project-tree-type';
 
 
 interface Props {
diff --git a/apps/web/src/services/project/v1/components/ProjectMainTree.vue b/apps/web/src/services/project/v1/components/ProjectMainTree.vue
index 084cd23dfb..c78b4b006a 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainTree.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainTree.vue
@@ -8,6 +8,7 @@ import { useRoute } from 'vue-router/composables';
 import { isEqual } from 'lodash';
 
 import { PI, PTreeView } from '@cloudforet/mirinae';
+import type { TreeData, TreeDisplayMap, TreeNode } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
 
 import { i18n } from '@/translations';
 
@@ -22,9 +23,8 @@ import type { Breadcrumb } from '@/common/modules/page-layouts/type';
 
 import { indigo, peacock } from '@/styles/colors';
 
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
-import type { TreeNode, TreeDisplayMap, TreeData } from '@/services/project/v-shared/tree/type';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectTreeStore } from '@/services/project/v1/stores/project-tree-store';
 
 interface ProjectDataType extends TreeData {
     name: string;
diff --git a/apps/web/src/services/project/v-shared/components/ProjectMemberInviteModal.vue b/apps/web/src/services/project/v1/components/ProjectMemberInviteModal.vue
similarity index 100%
rename from apps/web/src/services/project/v-shared/components/ProjectMemberInviteModal.vue
rename to apps/web/src/services/project/v1/components/ProjectMemberInviteModal.vue
diff --git a/apps/web/src/services/project/v-shared/components/ProjectTagsModal.vue b/apps/web/src/services/project/v1/components/ProjectTagsModal.vue
similarity index 100%
rename from apps/web/src/services/project/v-shared/components/ProjectTagsModal.vue
rename to apps/web/src/services/project/v1/components/ProjectTagsModal.vue
diff --git a/apps/web/src/services/project/v1/composables/use-project-favorite.ts b/apps/web/src/services/project/v1/composables/use-project-favorite.ts
index a477bf6e94..e30a82cb6b 100644
--- a/apps/web/src/services/project/v1/composables/use-project-favorite.ts
+++ b/apps/web/src/services/project/v1/composables/use-project-favorite.ts
@@ -16,7 +16,7 @@ import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/sto
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
 
 export const useProjectFavorite = () => {
diff --git a/apps/web/src/services/project/v1/composables/use-project-tree-data.ts b/apps/web/src/services/project/v1/composables/use-project-tree-data.ts
index 7c3f982ed0..791dfb7699 100644
--- a/apps/web/src/services/project/v1/composables/use-project-tree-data.ts
+++ b/apps/web/src/services/project/v1/composables/use-project-tree-data.ts
@@ -7,13 +7,14 @@ import type { Location } from 'vue-router';
 
 import { get } from 'lodash';
 
+import type { TreeDisplayMap, TreeNode } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
+
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
 import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
-import type { TreeNode, TreeDisplayMap } from '@/services/project/v-shared/tree/type';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
+import { useProjectTreeStore } from '@/services/project/v1/stores/project-tree-store';
 
 interface ParentGroupItem {
     name: string;
diff --git a/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue b/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue
index c74b484d78..8b6507a616 100644
--- a/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectDetailPageLegacy.vue
@@ -39,11 +39,11 @@ import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
 import { peacock } from '@/styles/colors';
 
-import ProjectFormModal from '@/services/project/v-shared/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
+import ProjectFormModal from '@/services/project/v1/components/ProjectFormModal.vue';
+import ProjectMainProjectGroupMoveModal from '@/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 import { useProjectDetailPageStore } from '@/services/project/v1/stores/project-detail-page-store';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
 
 
 interface Props {
diff --git a/apps/web/src/services/project/v1/pages/ProjectMainPage.vue b/apps/web/src/services/project/v1/pages/ProjectMainPage.vue
index 9d1bd868a5..e5fd8050f1 100644
--- a/apps/web/src/services/project/v1/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectMainPage.vue
@@ -25,12 +25,12 @@ import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
 import { indigo, peacock } from '@/styles/colors';
 
-import ProjectGroupMemberManagementModal from '@/services/project/v-shared/components/ProjectGroupMemberManagementModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
+import ProjectGroupMemberManagementModal from '@/services/project/v1/components/ProjectGroupMemberManagementModal.vue';
 import ProjectMain from '@/services/project/v1/components/ProjectMain.vue';
 import ProjectMainDeleteModal from '@/services/project/v1/components/ProjectMainDeleteModal.vue';
+import ProjectMainProjectGroupMoveModal from '@/services/project/v1/components/ProjectMainProjectGroupMoveModal.vue';
+import { useProjectPageStore } from '@/services/project/v1/stores/project-page-store';
+import { useProjectTreeStore } from '@/services/project/v1/stores/project-tree-store';
 
 
 const gnbStore = useGnbStore();
diff --git a/apps/web/src/services/project/v-shared/stores/project-page-store.ts b/apps/web/src/services/project/v1/stores/project-page-store.ts
similarity index 98%
rename from apps/web/src/services/project/v-shared/stores/project-page-store.ts
rename to apps/web/src/services/project/v1/stores/project-page-store.ts
index e0419725b6..e9315e43f7 100644
--- a/apps/web/src/services/project/v-shared/stores/project-page-store.ts
+++ b/apps/web/src/services/project/v1/stores/project-page-store.ts
@@ -19,11 +19,10 @@ import { useUserStore } from '@/store/user/user-store';
 import getRandomId from '@/lib/random-id-generator';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { useProjectTree } from '@/services/project/v-shared/composables/use-project-tree';
 import type {
     ProjectGroupTreeItem, ProjectGroupTreeNodeData, ProjectTreeNodeData, ProjectTreeRoot,
-} from '@/services/project/v-shared/types/project-tree-type';
+} from '@/common/modules/project/project-tree-type';
+import { useProjectTree } from '@/common/modules/project/use-project-tree';
 
 
 const projectTreeHelper = useProjectTree();
diff --git a/apps/web/src/services/project/v-shared/stores/project-tree-store.ts b/apps/web/src/services/project/v1/stores/project-tree-store.ts
similarity index 89%
rename from apps/web/src/services/project/v-shared/stores/project-tree-store.ts
rename to apps/web/src/services/project/v1/stores/project-tree-store.ts
index ceff69d543..a70f413df6 100644
--- a/apps/web/src/services/project/v-shared/stores/project-tree-store.ts
+++ b/apps/web/src/services/project/v1/stores/project-tree-store.ts
@@ -3,7 +3,8 @@ import { nextTick, reactive } from 'vue';
 import { cloneDeep } from 'lodash';
 import { defineStore } from 'pinia';
 
-import type { TreeDisplayMap } from '@/services/project/v-shared/tree/type';
+import type { TreeDisplayMap } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
+
 
 export const useProjectTreeStore = defineStore('project-tree', () => {
     const state = reactive({

From aaff39b65a4174be97a7329a29fe347f5705fe7c Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:53 +0900
Subject: [PATCH 07/22] feat: implement new project management modals and
 refactor project components

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../services/project/v2/ProjectContainer.vue  | 144 ++---
 .../src/services/project/v2/ProjectLSB.vue    | 287 +++-------
 .../ProjectActionDropdownButton.vue           |  67 +++
 ...tMain.vue => ProjectAndGroupListPanel.vue} |   0
 ...DeleteModal.vue => ProjectDeleteModal.vue} |  59 +-
 .../project/v2/components/ProjectHeader.vue   | 518 +++---------------
 .../v2/components/ProjectLSBSearch.vue        |  57 ++
 .../project/v2/components/ProjectLSBTree.vue  | 161 ++++++
 .../v2/components/ProjectMainProjectCard.vue  |  25 +-
 .../ProjectMainProjectGroupCard.vue           |  27 +-
 .../project/v2/components/ProjectMainTree.vue | 267 ---------
 .../components/ProjectMemberInviteModal.vue   | 187 +++++++
 .../ProjectMemberManagementModal.vue          | 188 +++++++
 .../v2/components/ProjectMoveModal.vue        | 154 ++++++
 .../v2/components/ProjectTagsModal.vue        | 101 ++++
 .../composables/queries/use-project-query.ts  |  41 ++
 .../queries/use-workspace-users-query.ts      |  29 +
 .../v2/composables/use-project-or-group-id.ts |  20 +
 .../composables/use-project-starred-tree.ts   |  39 ++
 .../project/v2/composables/use-user-info.ts   |  39 ++
 .../project/v2/pages/ProjectDetailPage.vue    |  43 +-
 .../project/v2/pages/ProjectMainPage.vue      | 213 ++-----
 .../v2/stores/project-page-modal-store.ts     | 103 ++++
 23 files changed, 1541 insertions(+), 1228 deletions(-)
 create mode 100644 apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
 rename apps/web/src/services/project/v2/components/{ProjectMain.vue => ProjectAndGroupListPanel.vue} (100%)
 rename apps/web/src/services/project/v2/components/{ProjectMainDeleteModal.vue => ProjectDeleteModal.vue} (62%)
 create mode 100644 apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectLSBTree.vue
 delete mode 100644 apps/web/src/services/project/v2/components/ProjectMainTree.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectMoveModal.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectTagsModal.vue
 create mode 100644 apps/web/src/services/project/v2/composables/queries/use-project-query.ts
 create mode 100644 apps/web/src/services/project/v2/composables/queries/use-workspace-users-query.ts
 create mode 100644 apps/web/src/services/project/v2/composables/use-project-or-group-id.ts
 create mode 100644 apps/web/src/services/project/v2/composables/use-project-starred-tree.ts
 create mode 100644 apps/web/src/services/project/v2/composables/use-user-info.ts
 create mode 100644 apps/web/src/services/project/v2/stores/project-page-modal-store.ts

diff --git a/apps/web/src/services/project/v2/ProjectContainer.vue b/apps/web/src/services/project/v2/ProjectContainer.vue
index 162f40bb57..555e8b5e69 100644
--- a/apps/web/src/services/project/v2/ProjectContainer.vue
+++ b/apps/web/src/services/project/v2/ProjectContainer.vue
@@ -1,75 +1,100 @@
 <script setup lang="ts">
-import { computed, onUnmounted, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { computed, onUnmounted, watch } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
-import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
-import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
 
+import { i18n } from '@/translations';
+
+import { useProjectGroupReferenceStore, type ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
+import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
+
+import { MENU_ID } from '@/lib/menu/config';
+
+import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import CenteredPageLayout from '@/common/modules/page-layouts/CenteredPageLayout.vue';
 import GeneralPageLayout from '@/common/modules/page-layouts/GeneralPageLayout.vue';
+import type { Breadcrumb } from '@/common/modules/page-layouts/type';
 import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout.vue';
 
-import ProjectFormModal from '@/services/project/v-shared/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupFormModal from '@/services/project/v-shared/components/ProjectMainProjectGroupFormModal.vue';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
 import ProjectLSB from '@/services/project/v2/ProjectLSB.vue';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
+/* project and project group */
+const projectReferenceStore = useProjectReferenceStore();
+const projectMap = computed(() => projectReferenceStore.getters.projectItems);
+const projectGroupReferenceStore = useProjectGroupReferenceStore();
+const projectGroupMap = computed<ProjectGroupReferenceMap>(() => projectGroupReferenceStore.getters.projectGroupItems);
 
-
+/* routed project or project group */
 const route = useRoute();
-const router = useRouter();
-const gnbStore = useGnbStore();
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
-const projectTreeStore = useProjectTreeStore();
-
-const state = reactive({
-    currentProjectGroupId: computed(() => route.params.projectGroupId),
-    // TODO: check route
-    isProjectRootPage: computed(() => route.name === PROJECT_ROUTE_V2._NAME && !state.currentProjectGroupId),
-});
+const { projectGroupId, projectId } = useProjectOrGroupId(computed(() => route.params.projectGroupOrProjectId));
 
-/* Event */
-const handleUpdateProjectFormModalVisible = (visible?: boolean) => {
-    projectPageStore.setProjectFormModalVisible(visible);
-    if (projectPageState.currentSelectedProjectId && !visible) {
-        projectPageStore.setCurrentSelectedProjectId(undefined);
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
+/* breadcrumbs */
+const gnbStore = useGnbStore();
+const parentIds = computed<string[]>(() => {
+    const pids: string[] = [];
+    let currentGroupId: string|undefined;
+    if (projectId.value) currentGroupId = projectMap.value[projectId.value]?.data.groupInfo?.id;
+    else currentGroupId = projectGroupId.value;
+    while (currentGroupId) {
+        pids.unshift(currentGroupId);
+        currentGroupId = projectGroupMap.value[currentGroupId]?.data.parentGroupInfo?.id;
     }
-};
-const handleUpdateProjectGroupFormModalVisible = (visible: boolean) => {
-    projectPageStore.setProjectGroupFormVisible(visible);
-    if (projectPageState.currentSelectedProjectGroupId && !visible) {
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-        projectPageStore.setProjectGroupFormUpdateMode(false);
+    return pids;
+});
+const projectGroupBreadcrumbs = computed<Breadcrumb[]>(() => {
+    const breadcrumbs: Breadcrumb[] = [
+        { name: i18n.t('MENU.PROJECT'), to: { name: PROJECT_ROUTE_V2._NAME } },
+    ];
+    breadcrumbs.push(...parentIds.value.map((id) => ({
+        name: projectGroupMap.value[id]?.name ?? id,
+        to: {
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: id,
+            },
+        },
+    })));
+    if (projectId.value) {
+        breadcrumbs.push({
+            name: projectMap.value[projectId.value]?.name ?? projectId.value,
+            to: {
+                name: PROJECT_ROUTE_V2._NAME,
+                params: {
+                    projectGroupOrProjectId: projectId.value,
+                },
+            },
+        });
     }
-};
-const refreshProejctTree = () => {
-    projectTreeStore.refreshProjectTree();
-};
-
-const handleConfirmProjectFormModal = (isCreating: boolean, result?: ProjectModel) => {
-    refreshProejctTree();
-    if (isCreating && !result?.project_group_id && !state.isProjectRootPage) {
-        // TODO: check route
-        router.push({ name: PROJECT_ROUTE_V2._NAME });
+    return breadcrumbs;
+});
+const favoriteOptions = computed<FavoriteOptions>(() => {
+    if (projectId.value) {
+        return {
+            type: FAVORITE_TYPE.PROJECT,
+            id: projectId.value,
+        };
     }
-};
-const handleConfirmProjectGroupFormModal = (isCreating: boolean, result?: ProjectGroupModel) => {
-    refreshProejctTree();
-    if (isCreating && !result?.parent_group_id && !state.isProjectRootPage) {
-        // TODO: check route
-        router.push({ name: PROJECT_ROUTE_V2._NAME });
+    if (projectGroupId.value) {
+        return {
+            type: FAVORITE_TYPE.PROJECT_GROUP,
+            id: projectGroupId.value,
+        };
     }
-};
-
-/* Lifecycle */
+    return {
+        type: FAVORITE_TYPE.MENU,
+        id: MENU_ID.PROJECT,
+    };
+});
+watch(projectGroupBreadcrumbs, (bc) => {
+    gnbStore.setBreadcrumbs(bc);
+    gnbStore.setFavoriteItemId(favoriteOptions.value);
+});
 onUnmounted(() => {
     gnbStore.initState();
-    projectPageStore.reset();
 });
 </script>
 
@@ -91,20 +116,5 @@ onUnmounted(() => {
         <general-page-layout v-else>
             <router-view />
         </general-page-layout>
-        <project-form-modal v-if="projectPageState.projectFormModalVisible"
-                            :visible="projectPageState.projectFormModalVisible"
-                            :project-id="projectPageState.currentSelectedProjectId"
-                            :project-group-id="projectPageState.currentSelectedProjectGroupId"
-                            @update:visible="handleUpdateProjectFormModalVisible"
-                            @confirm="handleConfirmProjectFormModal"
-        />
-        <project-main-project-group-form-modal v-if="projectPageState.projectGroupFormVisible"
-                                               :visible="projectPageState.projectGroupFormVisible"
-                                               :update-mode="projectPageState.projectGroupFormUpdateMode"
-                                               :parent-group-id="projectPageState.currentSelectedProjectGroupId"
-                                               :project-group-id="projectPageState.currentSelectedProjectGroupId || state.currentProjectGroupId"
-                                               @update:visible="handleUpdateProjectGroupFormModalVisible"
-                                               @confirm="handleConfirmProjectGroupFormModal"
-        />
     </fragment>
 </template>
diff --git a/apps/web/src/services/project/v2/ProjectLSB.vue b/apps/web/src/services/project/v2/ProjectLSB.vue
index eaeee51e11..23b4368ac9 100644
--- a/apps/web/src/services/project/v2/ProjectLSB.vue
+++ b/apps/web/src/services/project/v2/ProjectLSB.vue
@@ -1,232 +1,127 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core/index';
-import { computed, reactive, ref } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-
+import { vOnClickOutside } from '@vueuse/components';
+import { computed, ref } from 'vue';
 
 import {
-    PTextInput, PTextHighlighting, PEmpty, PContextMenu, PIconButton,
+    PButton, PContextMenu, useContextMenuController,
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+import type { TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
 
 import { i18n } from '@/translations';
 
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectReferenceItem } from '@/store/reference/project-reference-store';
-
-import { MENU_ID } from '@/lib/menu/config';
-
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import LSB from '@/common/modules/navigations/lsb/LSB.vue';
-import LSBRouterMenuItem from '@/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue';
-import type { LSBItem, LSBMenu } from '@/common/modules/navigations/lsb/type';
-import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
+import { type FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
+import LSBContainer from '@/common/modules/navigations/new-lsb/LSBContainer.vue';
+import LSBDivider from '@/common/modules/navigations/new-lsb/LSBDivider.vue';
+import LSBStarredTree from '@/common/modules/navigations/new-lsb/LSBStarredTree.vue';
+import LSBTitle from '@/common/modules/navigations/new-lsb/LSBTitle.vue';
 
 import { indigo, peacock } from '@/styles/colors';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import ProjectMainTree from '@/services/project/v2/components/ProjectMainTree.vue';
+import ProjectLSBSearch from '@/services/project/v2/components/ProjectLSBSearch.vue';
+import ProjectLSBTree from '@/services/project/v2/components/ProjectLSBTree.vue';
+import { useProjectStarredTree } from '@/services/project/v2/composables/use-project-starred-tree';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
-const route = useRoute();
-const allReferenceStore = useAllReferenceStore();
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const userWorkspaceStore = useUserWorkspaceStore();
-const workspaceStoreGetters = userWorkspaceStore.getters;
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
-const menuRef = ref<any|null>(null);
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 
-const storeState = reactive({
-    projectItems: computed<ProjectReferenceItem[]>(() => Object.values(allReferenceStore.getters.project)),
-    favoriteItems: computed(() => favoriteGetters.favoriteMenuList.filter((favoriteMenu) => {
-        if (favoriteMenu.itemType === FAVORITE_TYPE.PROJECT) return true;
-        if (favoriteMenu.itemType === FAVORITE_TYPE.PROJECT_GROUP) return true;
-        return false;
-    })),
-    currentWorkspaceId: computed(() => workspaceStoreGetters.currentWorkspaceId as string),
+/* starred */
+const favoriteStore = useFavoriteStore();
+const { starredItems } = useProjectStarredTree({
+    favoriteItems: computed(() => favoriteStore.getters.favoriteMenuList as FavoriteItem[]),
 });
 
-const state = reactive({
-    projectKeyword: '',
-    currentPath: computed(() => route.fullPath),
-    starredMenuItems: computed<LSBItem[]>(() => storeState.favoriteItems.map((d) => {
-        if (d.itemType === FAVORITE_TYPE.PROJECT_GROUP) {
-            return {
-                type: MENU_ITEM_TYPE.ITEM,
-                label: d.label,
-                id: d.name,
-                icon: { name: 'ic_folder-filled', color: indigo[500] },
-                to: {
-                    // TODO: check route
-                    name: PROJECT_ROUTE_V2._NAME,
-                    params: { projectGroupId: d.itemId },
-                },
-                favoriteOptions: { type: FAVORITE_TYPE.PROJECT_GROUP, id: d.name },
-            };
-        }
-        return {
-            type: MENU_ITEM_TYPE.ITEM,
-            label: d.label,
-            id: d.name,
-            icon: { name: 'ic_document-filled', color: peacock[600] },
-            to: {
-                // TODO: check route
-                name: PROJECT_ROUTE_V2._NAME,
-                params: { id: d.itemId },
-            },
-            favoriteOptions: { type: FAVORITE_TYPE.PROJECT, id: d.name },
-        };
-    })),
-    // TODO: check route
-    isProjectLandingPage: computed(() => route.name === PROJECT_ROUTE_V2._NAME),
-    projectLandingMenuSet: computed(() => [
-        {
-            type: MENU_ITEM_TYPE.SLOT,
-            label: i18n.t('PROJECT.LANDING.ALL_PROJECTS'),
-            id: MENU_ID.PROJECT,
-            icon: 'ic_dots-4-square',
-            // TODO: check route
-            to: { name: PROJECT_ROUTE_V2._NAME },
-            hideFavorite: true,
-        },
-        {
-            type: MENU_ITEM_TYPE.DIVIDER,
-        },
-        {
-            type: MENU_ITEM_TYPE.COLLAPSIBLE,
-            label: i18n.t('PROJECT.LANDING.PROJECT'),
-            id: 'project',
-        },
-    ]),
-    menuSet: computed<LSBMenu[]>(() => {
-        const baseMenuSet = [
-            {
-                type: MENU_ITEM_TYPE.STARRED,
-                childItems: state.starredMenuItems,
-                currentPath: state.currentPath,
-            },
-            { type: MENU_ITEM_TYPE.DIVIDER },
-        ];
-        return [
-            ...baseMenuSet,
-            ...state.projectLandingMenuSet,
-        ];
-    }),
-    projectFilteredByKeyword: computed<LSBItem[]>(() => storeState.projectItems.filter((project) => project.name?.toLowerCase()?.includes(state.projectKeyword?.toLowerCase()))
-        .map((project) => ({
-            type: MENU_ITEM_TYPE.ITEM,
-            label: project.name,
-            id: project.key,
-            icon: { name: 'ic_document-filled', color: peacock[600] },
-            to: {
-                name: PROJECT_ROUTE_V2._NAME,
-                params: { id: project.key, workspaceId: storeState.currentWorkspaceId },
-            },
-            favoriteOptions: { type: FAVORITE_TYPE.PROJECT, id: project.key },
-        }))),
-    createDropdownMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
-        {
-            name: 'project',
-            label: i18n.t('PROJECT.LANDING.PROJECT') as string,
-            icon: 'ic_document-filled',
-            iconColor: peacock[600],
-        },
-        {
-            name: 'projectGroup',
-            label: i18n.t('PROJECT.LANDING.PROJECT_GROUP') as string,
-            icon: 'ic_folder-filled',
-            iconColor: indigo[500],
-        },
-    ])),
-    createMenuVisible: false,
+/* create button */
+const projectPageModalStore = useProjectPageModalStore();
+const createDropdownMenuItems = computed<SelectDropdownMenuItem[]>(() => ([
+    {
+        name: 'project',
+        label: i18n.t('PROJECT.LANDING.PROJECT'),
+        icon: 'ic_document-filled',
+        iconColor: peacock[600],
+    },
+    {
+        name: 'projectGroup',
+        label: i18n.t('PROJECT.LANDING.PROJECT_GROUP'),
+        icon: 'ic_folder-filled',
+        iconColor: indigo[500],
+    },
+]));
+const buttonRef = ref<any|null>(null);
+const contextMenuRef = ref<any|null>(null);
+const { visibleMenu, toggleContextMenu, hideContextMenu } = useContextMenuController({
+    targetRef: buttonRef,
+    contextMenuRef,
+    position: 'right',
+    menuWidth: 'max-content',
 });
-
-const handleClickAddButton = () => {
-    state.createMenuVisible = !state.createMenuVisible;
-};
 const handleSelectCreateMenu = (item: SelectDropdownMenuItem) => {
     if (item.name === 'project') {
-        projectPageStore.setProjectFormModalVisible(true);
+        projectPageModalStore.openCreateProjectFormModal('project');
     } else if (item.name === 'projectGroup') {
-        projectPageStore.setProjectGroupFormVisible(true);
+        projectPageModalStore.openCreateProjectFormModal('projectGroup');
     }
+    hideContextMenu();
 };
 
-onClickOutside(menuRef, () => {
-    state.createMenuVisible = false;
-});
+/* all projects */
+const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupOrProjectId === curr.params.projectGroupOrProjectId;
+
+/* search */
+const projectKeyword = ref<string>('');
+
 </script>
 
 <template>
-    <l-s-b class="project-l-s-b"
-           :menu-set="state.menuSet"
-    >
-        <template #slot-project="item">
-            <l-s-b-router-menu-item :current-path="state.currentPath"
-                                    :item="item"
-            >
-                <template #right-extra>
-                    <div v-if="projectPageState.isWorkspaceOwner"
-                         ref="menuRef"
-                         class="create-button-wrapper"
-                    >
-                        <p-icon-button name="ic_plus"
-                                       size="sm"
-                                       style-type="tertiary"
-                                       shape="square"
-                                       class="dashboard-create-button"
-                                       @click.prevent="handleClickAddButton"
-                        />
-                        <p-context-menu v-show="state.createMenuVisible"
-                                        class="create-context-menu"
-                                        no-select-indication
-                                        :menu="state.createDropdownMenuItems"
-                                        @select="handleSelectCreateMenu"
-                        />
-                    </div>
-                </template>
-            </l-s-b-router-menu-item>
-        </template>
-        <template #collapsible-contents-project>
-            <p-text-input v-model="state.projectKeyword"
-                          class="project-search"
-                          placeholder="Search project"
-            />
-            <template v-if="state.projectKeyword">
-                <l-s-b-router-menu-item v-for="(_item, idx) of state.projectFilteredByKeyword"
-                                        :key="idx"
-                                        :item="_item"
-                                        :idx="`search-${idx}`"
-                                        :current-path="state.currentPath"
-                                        is-hide-favorite
-                >
-                    <p-text-highlighting class="search-result-text"
-                                         :term="state.projectKeyword"
-                                         :text="_item.label"
-                    />
-                </l-s-b-router-menu-item>
-                <p-empty v-if="state.projectKeyword && !state.projectFilteredByKeyword.length"
-                         class="search-empty"
+    <l-s-b-container>
+        <l-s-b-starred-tree expanded
+                            :items="starredItems"
+        />
+        <l-s-b-divider />
+        <l-s-b-title id="all-projects"
+                     icon="ic_dots-4-square"
+                     selectable
+                     :link="{
+                         to: {
+                             name: PROJECT_ROUTE_V2._NAME,
+                         },
+                         predicate,
+                     }"
+        >
+            <span class="font-normal">{{ $t('PROJECT.LANDING.ALL_PROJECTS') }}</span>
+            <template #outer-right>
+                <p-button ref="buttonRef"
+                          name="ic_plus"
+                          size="sm"
+                          style-type="tertiary"
+                          class="cursor-pointer"
+                          @click="toggleContextMenu"
                 >
-                    <span>
-                        {{ $t('PROJECT.LANDING.SEARCH_EMPTY_TEXT') }}
-                    </span>
-                </p-empty>
+                    {{ $t('COMMON.BUTTONS.CREATE') }}
+                </p-button>
+                <p-context-menu v-show="visibleMenu"
+                                ref="contextMenuRef"
+                                v-on-click-outside="hideContextMenu"
+                                no-select-indication
+                                :menu="createDropdownMenuItems"
+                                @select="handleSelectCreateMenu"
+                />
             </template>
-            <project-main-tree v-else />
-        </template>
-    </l-s-b>
+        </l-s-b-title>
+        <l-s-b-divider />
+        <l-s-b-title id="project-search"
+                     :name="i18n.t('PROJECT.LANDING.PROJECT')"
+        />
+        <project-l-s-b-search :keyword="projectKeyword"
+                              @update:keyword="projectKeyword = $event"
+        />
+        <project-l-s-b-tree v-if="!projectKeyword.length" />
+    </l-s-b-container>
 </template>
 
 <style scoped lang="postcss">
 .project-l-s-b {
-
     .create-button-wrapper {
         @apply relative inline-block;
 
diff --git a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
new file mode 100644
index 0000000000..9334098e84
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { PSelectDropdown } from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { i18n } from '@/translations';
+
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const props = defineProps<{
+    projectId?: string;
+    projectGroupId?: string;
+}>();
+
+const actionItems = computed<SelectDropdownMenuItem[]>(() => [
+    {
+        name: 'update',
+        label: i18n.t('PROJECT.DETAIL.UPDATE'),
+        icon: 'ic_settings',
+    },
+    {
+        name: 'move',
+        label: i18n.t('PROJECT.DETAIL.MOVE'),
+        icon: 'ic_move',
+    },
+    { type: 'divider', name: 'divider' },
+    {
+        name: 'delete',
+        label: i18n.t('PROJECT.DETAIL.DELETE'),
+        icon: 'ic_delete',
+    },
+]);
+
+const projectPageModalStore = useProjectPageModalStore();
+
+const handleSelectItem = (selected: SelectDropdownMenuItem|string|number) => {
+    if (typeof selected === 'string' || typeof selected === 'number') return;
+    const id = props.projectId || props.projectGroupId;
+    if (!id) return;
+    if (selected.name === 'update') projectPageModalStore.openEditProjectFormModal(id);
+    else if (selected.name === 'move') projectPageModalStore.openProjectMoveModal(id);
+    else if (selected.name === 'delete') projectPageModalStore.openProjectDeleteModal(id);
+};
+</script>
+
+<template>
+    <p-select-dropdown style-type="tertiary-icon-button"
+                       button-icon="ic_ellipsis-horizontal"
+                       size="sm"
+                       :menu="actionItems"
+                       @select="handleSelectItem"
+    />
+</template>
+
+<style scoped lang="postcss">
+/* custom design-system component - p-select-dropdown */
+:deep(.p-select-dropdown) {
+    .dropdown-button-component {
+        @apply rounded-full;
+
+        &.opened {
+            @apply rounded-full;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMain.vue b/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
similarity index 100%
rename from apps/web/src/services/project/v2/components/ProjectMain.vue
rename to apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
diff --git a/apps/web/src/services/project/v2/components/ProjectMainDeleteModal.vue b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
similarity index 62%
rename from apps/web/src/services/project/v2/components/ProjectMainDeleteModal.vue
rename to apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
index 648c36b598..9904b73f15 100644
--- a/apps/web/src/services/project/v2/components/ProjectMainDeleteModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
@@ -16,27 +16,25 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useProxyValue } from '@/common/composables/proxy-state';
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 
 interface Props {
-    visible: boolean;
-    targetId: string;
-    isProject?: boolean;
     skipRedirect?: boolean;
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
-    (e: 'confirm'): void;
+const emit = defineEmits<{(e: 'confirm'): void;
 }>();
 
+const projectPageModelStore = useProjectPageModalStore();
+
 const router = useRouter();
 const userWorkspaceStore = useUserWorkspaceStore();
 const favoriteStore = useFavoriteStore();
@@ -44,10 +42,9 @@ const favoriteGetters = favoriteStore.getters;
 const recentStore = useRecentStore();
 
 const state = reactive({
-    proxyVisible: useProxyValue('visible', props, emit),
     currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
-    title: computed(() => (props.isProject ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_TITLE') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE'))),
-    content: computed(() => (props.isProject ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_CONTENT') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.CONTENT'))),
+    title: computed(() => (projectPageModelStore.state.targetProjectId ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_TITLE') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE'))),
+    content: computed(() => (projectPageModelStore.state.targetProjectId ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_CONTENT') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.CONTENT'))),
     loading: false,
 });
 
@@ -55,20 +52,25 @@ const handleConfirmDelete = async () => {
     if (state.loading) return;
     state.loading = true;
     try {
-        if (props.isProject) {
-            await deleteProject();
+        if (projectPageModelStore.state.targetProjectId) {
+            await deleteProject(projectPageModelStore.state.targetProjectId);
+        } else if (projectPageModelStore.state.targetProjectGroupId) {
+            await deleteProjectGroup(projectPageModelStore.state.targetProjectGroupId);
         } else {
-            await deleteProjectGroup();
+            throw new Error('No project or project group id');
         }
         emit('confirm');
     } catch (e) {
-        if (props.isProject) ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.DETAIL.ALT_E_DELETE_PROJECT'));
-        else ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.LANDING.ALT_E_DELETE_PROJECT_GROUP', { action: _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE') }));
+        if (projectPageModelStore.state.targetProjectId) ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.DETAIL.ALT_E_DELETE_PROJECT'));
+        else if (projectPageModelStore.state.targetProjectGroupId) {
+            ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.LANDING.ALT_E_DELETE_PROJECT_GROUP', { action: _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE') }));
+        } else {
+            ErrorHandler.handleRequestError(e, 'Failed to delete project or project group', true);
+        }
     } finally {
         state.loading = false;
-        state.proxyVisible = false;
+        projectPageModelStore.closeDeleteModal();
         if (!props.skipRedirect) {
-            // TODO: Check route
             await router.replace({
                 name: PROJECT_ROUTE_V2._NAME,
             });
@@ -76,36 +78,36 @@ const handleConfirmDelete = async () => {
     }
 };
 
-const deleteProject = async () => {
+const deleteProject = async (projectId: string) => {
     await SpaceConnector.clientV2.identity.project.delete<ProjectDeleteParameters>({
-        project_id: props.targetId as string,
+        project_id: projectId,
     });
     await recentStore.deleteRecent({
         type: RECENT_TYPE.PROJECT,
-        itemId: props.targetId,
+        itemId: projectId,
     });
     showSuccessMessage(_i18n.t('PROJECT.DETAIL.ALT_S_DELETE_PROJECT'), '');
-    const isFavoriteItem = favoriteGetters.projectItems.find((item) => item.itemId === props.targetId);
+    const isFavoriteItem = favoriteGetters.projectItems.find((item) => item.itemId === projectId);
     if (isFavoriteItem) {
         await favoriteStore.deleteFavorite({
             itemType: FAVORITE_TYPE.PROJECT,
             workspaceId: state.currentWorkspaceId || '',
-            itemId: props.targetId as string,
+            itemId: projectId,
         });
     }
 };
 
-const deleteProjectGroup = async () => {
+const deleteProjectGroup = async (projectGroupId: string) => {
     await SpaceConnector.clientV2.identity.projectGroup.delete<ProjectGroupDeleteParameters>({
-        project_group_id: props.targetId,
+        project_group_id: projectGroupId,
     });
     showSuccessMessage(_i18n.t('PROJECT.LANDING.ALT_S_DELETE_PROJECT_GROUP'), '');
-    const isFavoriteItem = favoriteGetters.projectGroupItems.find((item) => item.itemId === props.targetId);
+    const isFavoriteItem = favoriteGetters.projectGroupItems.find((item) => item.itemId === projectGroupId);
     if (isFavoriteItem) {
         await favoriteStore.deleteFavorite({
             itemType: FAVORITE_TYPE.PROJECT_GROUP,
             workspaceId: state.currentWorkspaceId || '',
-            itemId: props.targetId,
+            itemId: projectGroupId,
         });
     }
 };
@@ -114,14 +116,17 @@ const deleteProjectGroup = async () => {
 
 <template>
     <delete-modal :header-title="state.title"
-                  :visible.sync="state.proxyVisible"
+                  :visible="projectPageModelStore.state.deleteModalVisible"
                   :loading="state.loading"
+                  @close="projectPageModelStore.closeDeleteModal"
+                  @cancel="projectPageModelStore.closeDeleteModal"
+                  @closed="projectPageModelStore.resetTarget"
                   @confirm="handleConfirmDelete"
     >
         <p>
             {{ state.content }}
         </p>
-        <i18n v-if="!props.isProject"
+        <i18n v-if="!projectPageModelStore.state.targetProjectId"
               path="PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.DESC"
               tag="p"
               class="desc"
diff --git a/apps/web/src/services/project/v2/components/ProjectHeader.vue b/apps/web/src/services/project/v2/components/ProjectHeader.vue
index ca465c60a6..5485a3bdb9 100644
--- a/apps/web/src/services/project/v2/components/ProjectHeader.vue
+++ b/apps/web/src/services/project/v2/components/ProjectHeader.vue
@@ -1,324 +1,105 @@
 <script setup lang="ts">
 import {
-    computed, reactive, ref, watch,
+    computed, toRef, watch,
 } from 'vue';
-import { useRouter } from 'vue-router/composables';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PI, PIconButton, PSelectDropdown, PButtonModal, PButton, PEmpty, PLazyImg,
-} from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
+import { PI, PSkeleton } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
-import type { ProjectGetParameters } from '@/api-clients/identity/project/schema/api-verbs/get';
-import type { ProjectRemoveUsersParameters } from '@/api-clients/identity/project/schema/api-verbs/remove-users';
-import type { ProjectUpdateParameters } from '@/api-clients/identity/project/schema/api-verbs/udpate';
-import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
 import type { ProjectType } from '@/api-clients/identity/project/schema/type';
-import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
-import type { WorkspaceUserListParameters } from '@/api-clients/identity/workspace-user/schema/api-verbs/list';
-import type { WorkspaceUserModel } from '@/api-clients/identity/workspace-user/schema/model';
-import DomainAdminImage from '@/assets/images/role/img_avatar_admin.png';
-import UserImage from '@/assets/images/role/img_avatar_no-role.png';
-import SystemAdminImage from '@/assets/images/role/img_avatar_system-admin.png';
-import WorkspaceMemberImage from '@/assets/images/role/img_avatar_workspace-member.png';
-import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner.png';
-import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import type { UserReferenceMap } from '@/store/reference/user-reference-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import { NoResourceError } from '@/common/composables/error/error';
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
 import { gray, peacock } from '@/styles/colors';
 
-import ProjectFormModal from '@/services/project/v-shared/components/ProjectFormModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue';
-import ProjectMemberInviteModal from '@/services/project/v-shared/components/ProjectMemberInviteModal.vue';
-import ProjectTagsModal from '@/services/project/v-shared/components/ProjectTagsModal.vue';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
-import ProjectMainDeleteModal from '@/services/project/v2/components/ProjectMainDeleteModal.vue';
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import ProjectActionDropdownButton from '@/services/project/v2/components/ProjectActionDropdownButton.vue';
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useWorkspaceUsersQuery } from '@/services/project/v2/composables/queries/use-workspace-users-query';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 
-const ROLE_INFO_MAP = {
-    [ROLE_TYPE.SYSTEM_ADMIN]: { icon: SystemAdminImage, label: 'System Admin' },
-    [ROLE_TYPE.DOMAIN_ADMIN]: { icon: DomainAdminImage, label: 'Domain Admin' },
-    [ROLE_TYPE.WORKSPACE_OWNER]: { icon: WorkspaceOwnerImage, label: 'Workspace Owner' },
-    [ROLE_TYPE.WORKSPACE_MEMBER]: { icon: WorkspaceMemberImage, label: 'Workspace Member' },
-    [ROLE_TYPE.USER]: { icon: UserImage, label: 'User' },
-} as const;
-interface Props {
-    id: string;
-}
-const props = defineProps<Props>();
-// const route = useRoute();
-const router = useRouter();
+const props = defineProps<{
+    projectId?: string;
+    projectGroupId?: string;
+}>();
 
-const projectTreeStore = useProjectTreeStore();
-
-const allReferenceStore = useAllReferenceStore();
 const appContextStore = useAppContextStore();
-const gnbStore = useGnbStore();
+const projectPageModalStore = useProjectPageModalStore();
 
 /* project */
-// TODO: change it with real data
-const project = ref<ProjectModel|undefined>();
-const projectId = computed(() => project.value?.project_id);
-const projectType = computed<ProjectType|undefined>(() => project.value?.project_type);
-const setProject = (p: ProjectModel|undefined) => {
-    project.value = p;
-};
-const getProject = async (pid: string) => {
-    try {
-        const _projectId = pid;
-        if (!_projectId) throw new Error('projectId is required');
-        state.currentProject = await SpaceConnector.clientV2.identity.project.get<ProjectGetParameters, ProjectModel>({
-            project_id: _projectId,
-        });
-    } catch (e) {
-        state.currentProject = undefined;
-        ErrorHandler.handleError(new NoResourceError({ name: PROJECT_ROUTE_V2._NAME }));
-    }
-};
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const setProjectId = (pid: string) => {
-// TODO: implement
-};
-
-const storeState = reactive({
-    users: computed<UserReferenceMap>(() => allReferenceStore.getters.user),
-    projects: computed(() => allReferenceStore.getters.project),
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
+const { data: project, error: projectError, isLoading: loadingProject } = useProjectQuery({
+    projectId: toRef(props, 'projectId'),
+    enabled: computed(() => !appContextStore.getters.globalGrantLoading),
 });
-const state = reactive({
-    menuItems: computed(() => [
-        {
-            type: 'item',
-            name: 'update',
-            label: i18n.t('PROJECT.DETAIL.UPDATE'),
-            icon: 'ic_settings',
-        },
-        {
-            type: 'item',
-            name: 'move',
-            label: i18n.t('PROJECT.DETAIL.MOVE'),
-            icon: 'ic_move',
-        },
-        { type: 'divider', name: 'divider' },
-        {
-            type: 'item',
-            name: 'delete',
-            label: i18n.t('PROJECT.DETAIL.DELETE'),
-            icon: 'ic_delete',
-        },
-    ]),
-    currentProject: computed<ProjectModel|undefined>(() => project.value),
-    parentGroupId: computed(() => storeState.projects[props.id]?.data?.groupInfo?.id),
-    projectGroupMoveModalVisible: false,
-    projectDeleteModalVisible: false,
-    projectEditModalVisible: false,
-    isHeaderIconHovered: false,
+watch(projectError, () => {
+    ErrorHandler.handleError(new NoResourceError({ name: PROJECT_ROUTE_V2._NAME }));
 });
+const projectType = computed<ProjectType|undefined>(() => project.value?.project_type);
 
-const memberState = reactive({
-    loading: false,
-    memberModalVisible: false,
-    memberInviteModalVisible: false,
-    projectUserIdList: [] as string[],
-    totalCount: 0,
-    userIcon: computed<Record<string, any>>(() => ({
-        [ROLE_TYPE.SYSTEM_ADMIN]: SystemAdminImage,
-        [ROLE_TYPE.DOMAIN_ADMIN]: DomainAdminImage,
-        [ROLE_TYPE.WORKSPACE_OWNER]: WorkspaceOwnerImage,
-        [ROLE_TYPE.WORKSPACE_MEMBER]: WorkspaceMemberImage,
-        [ROLE_TYPE.USER]: UserImage,
-    })),
+/* project group */
+const { data: projectGroup, error: projectGroupError, isLoading: loadingProjectGroup } = useProjectGroupQuery({
+    projectGroupId: toRef(props, 'projectGroupId'),
+    enabled: computed(() => !appContextStore.getters.globalGrantLoading),
 });
 
-const tagsState = reactive({
-    loading: false,
-    tagsModalVisible: false,
-    tags: computed(() => state.currentProject?.tags ?? {}),
+
+/* members */
+const { data: workspaceUsers } = useWorkspaceUsersQuery();
+const memberCount = computed(() => {
+    if (project.value && projectType.value === 'PRIVATE') {
+        return project.value.users?.length ?? 0;
+    }
+    // if(projectGroup.value) return projectGroup.value.users?.length ?? 0;
+    return workspaceUsers.value?.length ?? 0;
 });
 
+/* tags */
+const tagsCount = computed(() => {
+    if (project.value?.tags) return Object.keys(project.value.tags).length ?? 0;
+    if (projectGroup.value?.tags) return Object.keys(projectGroup.value.tags).length ?? 0;
+    return 0;
+});
 
 /* Event */
-const handleSelectItem = (selected: MenuItem) => {
-    if (selected.name === 'update') state.projectEditModalVisible = true;
-    if (selected.name === 'move') state.projectGroupMoveModalVisible = true;
-    if (selected.name === 'delete') state.projectDeleteModalVisible = true;
-};
-
-const handleOpenMemberModal = () => {
-    memberState.memberModalVisible = true;
-};
-const handleCloseMemberModal = () => {
-    memberState.memberModalVisible = false;
-};
-const handleClickInvite = () => {
-    memberState.memberModalVisible = false;
-    memberState.memberInviteModalVisible = true;
-};
-const handleConfirmInvite = () => {
-    fetchUserList();
-};
-const handleOpenTagsModal = () => {
-    tagsState.tagsModalVisible = true;
-};
-const handleTagUpdate = async (newTags) => {
-    try {
-        tagsState.loading = true;
-        const result = await SpaceConnector.client.identity.project.update<ProjectUpdateParameters, ProjectModel>({
-            project_id: props.id,
-            tags: newTags,
-        });
-        setProject(result);
-        showSuccessMessage(i18n.t('COMMON.TAGS.ALT_S_UPDATE'), '');
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, i18n.t('COMMON.TAGS.ALT_E_UPDATE'));
-    } finally {
-        tagsState.loading = false;
-        tagsState.tagsModalVisible = false;
-    }
-};
-const handleConfirmProjectForm = (_, data: ProjectModel) => {
-    setProject(data);
-};
+// const handleConfirmInvite = () => {
+//     fetchUserList();
+// };
 
-const handleConfirmProjectGroupMoveModal = () => {
-    if (projectId.value) getProject(projectId.value);
-};
+// const handleConfirmProjectForm = (_, data: ProjectModel) => {
+//     setProjectQueryData(data);
+// };
 
-const handleRefreshTree = () => {
-    projectTreeStore.refreshProjectTree();
-};
 
-const handleHeaderIconHover = (isHovered: boolean) => {
-    state.isHeaderIconHovered = isHovered;
-};
-const handleClickBackButton = () => {
-    if (state.parentGroupId) {
-        router.push({
-            // TODO: check route
-            name: PROJECT_ROUTE_V2._NAME,
-            params: { projectGroupId: state.parentGroupId },
-        });
-        return;
-    }
-    // TODO: check route
-    router.push({ name: PROJECT_ROUTE_V2._NAME });
-};
-
-const handleRemoveProjectUser = async (userId: string) => {
-    try {
-        const params: ProjectRemoveUsersParameters = {
-            project_id: props.id,
-            users: [userId],
-        };
-        await SpaceConnector.clientV2.identity.project.removeUsers<ProjectRemoveUsersParameters, ProjectModel>(params);
-        await fetchUserList();
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    }
-};
+// const handleRefreshTree = () => {
+//     projectTreeStore.refreshProjectTree();
+// };
 
 
-/* API */
-const fetchWorkspaceUserList = async () => {
-    memberState.loading = true;
-    try {
-        const res = await SpaceConnector.clientV2.identity.workspaceUser.list<WorkspaceUserListParameters, ListResponse<WorkspaceUserModel>>();
-        memberState.projectUserIdList = res.results?.map((d) => d.user_id) ?? [];
-        memberState.totalCount = res.total_count ?? 0;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        memberState.projectUserIdList = [];
-        memberState.totalCount = 0;
-    } finally {
-        memberState.loading = false;
-    }
-};
-const fetchProjectUsers = async () => {
-    memberState.loading = true;
-    // state.selectIndex = [];
-    try {
-        const res = await SpaceConnector.clientV2.identity.project.get<ProjectGetParameters, ProjectModel>({
-            project_id: props.id,
-        });
-        memberState.projectUserIdList = res.users ?? [];
-        memberState.totalCount = res.users?.length ?? 0;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        memberState.projectUserIdList = [];
-        memberState.totalCount = 0;
-    } finally {
-        memberState.loading = false;
-    }
+/* Watchers */
+// watch(projectId, (pid) => {
+//     gnbStore.setId(pid);
+// }, { immediate: true });
+
+/* Event Handlers */
+const handleClickMember = () => {
+    if (!props.projectId) return;
+    projectPageModalStore.openProjectManageMemberModal(props.projectId);
 };
-const fetchUserList = async () => {
-    if (projectType.value === 'PUBLIC') {
-        await fetchWorkspaceUserList();
-    } else {
-        await fetchProjectUsers();
-    }
+const handleClickTags = () => {
+    if (!props.projectId) return;
+    projectPageModalStore.openProjectManageTagsModal(props.projectId);
 };
 
-
-/* Watchers */
-watch(projectType, async () => {
-    await fetchUserList();
-});
-
-watch(projectId, (pid) => {
-    if (pid) {
-        getProject(pid);
-    }
-});
-
-
-watch([
-    () => props.id,
-    () => appContextStore.getters.globalGrantLoading,
-], ([id, globalGrantLoading]) => {
-    if (!globalGrantLoading) setProjectId(id);
-}, { immediate: true });
-
-watch(projectId, (pid) => {
-    gnbStore.setId(pid);
-}, { immediate: true });
-
 </script>
 
 <template>
-    <div class="project-detail-tab-header">
+    <div class="project-header">
         <div class="header-container">
-            <div class="header-icon-wrapper tablet"
-                 @mouseover="handleHeaderIconHover(true)"
-                 @mouseleave="handleHeaderIconHover(false)"
-            >
-                <p-i :name="state.isHeaderIconHovered ? 'ic_arrow-left' : 'ic_document-filled'"
-                     width="1.5rem"
-                     height="1.5rem"
-                     :color="state.isHeaderIconHovered ? gray[900] : peacock[600]"
-                     @click="handleClickBackButton"
-                />
-            </div>
-            <div class="header-icon-wrapper mobile">
-                <p-i name="ic_arrow-left"
-                     width="1.5rem"
-                     height="1.5rem"
-                     :color="gray[900]"
-                     class="cursor-pointer mr-2"
-                     @click="handleClickBackButton"
-                />
+            <div class="header-icon-wrapper tablet">
                 <p-i name="ic_document-filled"
                      width="1.5rem"
                      height="1.5rem"
@@ -327,17 +108,24 @@ watch(projectId, (pid) => {
             </div>
             <div class="header-contents">
                 <div class="title-wrapper">
-                    <span class="title">
-                        {{ state.currentProject?.name ?? '' }}
+                    <p-skeleton v-if="loadingProject || loadingProjectGroup"
+                                class="skeleton"
+                                width="200px"
+                                height="24px"
+                    />
+                    <span v-else-if="projectError || projectGroupError"
+                          class="error"
+                    >
+                        Failed to load project
                     </span>
-                    <p-select-dropdown style-type="tertiary-icon-button"
-                                       button-icon="ic_ellipsis-horizontal"
-                                       size="sm"
-                                       :menu="state.menuItems"
-                                       :selected="[]"
-                                       use-fixed-menu-style
-                                       reset-selection-on-menu-close
-                                       @select="handleSelectItem"
+                    <span v-else-if="project || projectGroup"
+                          class="title"
+                    >
+                        {{ project ? project.name : projectGroup?.name }}
+                    </span>
+                    <project-action-dropdown-button v-if="props.projectId || props.projectGroupId"
+                                                    :project-id="props.projectId"
+                                                    :project-group-id="props.projectGroupId"
                     />
                 </div>
                 <div class="header-sub-contents">
@@ -357,9 +145,9 @@ watch(projectId, (pid) => {
                                  :color="gray[400]"
                             />
                             <div class="info-item"
-                                 @click="handleOpenMemberModal"
+                                 @click="handleClickMember"
                             >
-                                <template v-if="projectType === 'PRIVATE' && memberState.totalCount === 0">
+                                <template v-if="projectType === 'PRIVATE' && memberCount === 0">
                                     <p-i class="info-icon"
                                          name="ic_plus"
                                          width="0.75rem"
@@ -375,7 +163,7 @@ watch(projectId, (pid) => {
                                          height="0.75rem"
                                          color="inherit"
                                     />
-                                    <span>{{ memberState.totalCount }}{{ $t('PROJECT.DETAIL.MEMBERS') }}</span>
+                                    <span>{{ memberCount }}{{ $t('PROJECT.DETAIL.MEMBERS') }}</span>
                                 </template>
                             </div>
                             <p-i name="ic_dot"
@@ -390,7 +178,7 @@ watch(projectId, (pid) => {
                              :color="gray[400]"
                         />
                         <div class="info-item"
-                             @click="handleOpenTagsModal"
+                             @click="handleClickTags"
                         >
                             <p-i class="info-icon"
                                  name="ic_label"
@@ -398,106 +186,17 @@ watch(projectId, (pid) => {
                                  height="0.75rem"
                                  color="inherit"
                             />
-                            <span>{{ Object.keys(tagsState.tags).length }}{{ $t('PROJECT.DETAIL.TAGS') }}</span>
+                            <span>{{ tagsCount }}{{ $t('PROJECT.DETAIL.TAGS') }}</span>
                         </div>
                     </div>
                 </div>
             </div>
-            <p-button-modal :header-title="$t('PROJECT.DETAIL.MEMBER_TITLE')"
-                            :visible.sync="memberState.memberModalVisible"
-                            size="md"
-                            hide-footer-close-button
-                            @confirm="handleCloseMemberModal"
-            >
-                <template #body>
-                    <div class="member-contents-wrapper">
-                        <div class="member-contents">
-                            <div class="contents-header">
-                                <span>{{ $t('PROJECT.DETAIL.INVITE_MEMBER_DESC') }}</span>
-                                <p-button v-if="projectType === 'PRIVATE'"
-                                          icon-left="ic_plus_bold"
-                                          style-type="tertiary"
-                                          @click="handleClickInvite"
-                                >
-                                    {{ $t('PROJECT.DETAIL.MEMBER.INVITE') }}
-                                </p-button>
-                            </div>
-                            <div class="main-contents">
-                                <div v-if="memberState.projectUserIdList.length">
-                                    <div v-for="(userId) in memberState.projectUserIdList"
-                                         :key="userId"
-                                         class="member-item"
-                                    >
-                                        <div class="left-contents">
-                                            <p-lazy-img :src="ROLE_INFO_MAP[storeState.users[userId]?.data.roleInfo.role_type]?.icon"
-                                                        class="menu-icon"
-                                                        width="1.75rem"
-                                                        height="1.75rem"
-                                            />
-                                            <span>{{ userId }} <span v-if="!!storeState.users[userId]?.name">({{ storeState.users[userId]?.name }})</span></span>
-                                        </div>
-                                        <div class="right-contents">
-                                            <span>{{ ROLE_INFO_MAP[storeState.users[userId]?.data.roleInfo.role_type]?.label }}</span>
-                                            <p-icon-button name="ic_delete"
-                                                           size="sm"
-                                                           @click="handleRemoveProjectUser(userId)"
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
-                                <p-empty v-else
-                                         class="project-member-empty"
-                                         show-image
-                                         :title="$t('PROJECT.DETAIL.MEMBER.NO_PROJECT_MEMBER')"
-                                >
-                                    <template #image>
-                                        <img alt="illust_astronaut_radio"
-                                             src="@/assets/images/img_ghost.png"
-                                        >
-                                    </template>
-                                </p-empty>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-                <template #confirm-button>
-                    {{ $t('PROJECT.DETAIL.MEMBER.DONE') }}
-                </template>
-            </p-button-modal>
-            <project-member-invite-modal v-if="memberState.memberInviteModalVisible"
-                                         :visible.sync="memberState.memberInviteModalVisible"
-                                         :project-id="props.id"
-                                         @confirm="handleConfirmInvite"
-            />
-            <project-tags-modal v-if="tagsState.tagsModalVisible"
-                                :visible.sync="tagsState.tagsModalVisible"
-                                :tags="tagsState.tags"
-                                :project-id="props.id"
-                                @update="handleTagUpdate"
-            />
-            <project-form-modal v-if="state.projectEditModalVisible"
-                                :visible.sync="state.projectEditModalVisible"
-                                :project-id="props.id"
-                                @confirm="handleConfirmProjectForm"
-            />
-            <project-main-project-group-move-modal v-if="state.projectGroupMoveModalVisible"
-                                                   :visible.sync="state.projectGroupMoveModalVisible"
-                                                   is-project
-                                                   :target-id="projectId"
-                                                   @confirm="handleConfirmProjectGroupMoveModal"
-            />
-            <project-main-delete-modal v-if="state.projectDeleteModalVisible"
-                                       :visible.sync="state.projectDeleteModalVisible"
-                                       is-project
-                                       :target-id="props.id"
-                                       @confirm="handleRefreshTree"
-            />
         </div>
     </div>
 </template>
 
 <style scoped lang="postcss">
-.project-detail-tab-header {
+.project-header {
 
     .header-container {
         @apply flex gap-3;
@@ -539,44 +238,6 @@ watch(projectId, (pid) => {
                 }
             }
         }
-
-        .member-contents-wrapper {
-            @apply bg-violet-100;
-            padding: 1rem;
-            width: 100%;
-            height: 25rem;
-            .member-contents {
-                @apply rounded-lg border border-violet-200 bg-white;
-                padding: 0.75rem;
-                height: 100%;
-
-                .contents-header {
-                    @apply flex items-center justify-between text-label-md font-bold text-gray-900;
-                    padding-bottom: 0.5rem;
-                    height: 2.5rem;
-                }
-                .main-contents {
-                    @apply overflow-scroll;
-                    height: calc(100% - 2.5rem);
-                    .member-item {
-                        @apply flex items-center justify-between;
-                        padding: 0.5rem 0.25rem 0.5rem 0.5rem;
-                        .left-contents {
-                            @apply flex items-center gap-2 text-label-md text-gray-900;
-                            .menu-icon {
-                                @apply rounded-full;
-                            }
-                        }
-                        .right-contents {
-                            @apply text-label-md text-gray-500 flex items-center gap-2;
-                        }
-                    }
-                    .project-member-empty {
-                        margin-top: 3rem;
-                    }
-                }
-            }
-        }
     }
 
     .quick-link-wrapper {
@@ -593,7 +254,7 @@ watch(projectId, (pid) => {
 }
 
 @screen mobile {
-    .project-detail-tab-header {
+    .project-header {
         .header-container {
             .header-icon-wrapper {
                 @apply bg-transparent;
@@ -611,15 +272,4 @@ watch(projectId, (pid) => {
         }
     }
 }
-
-/* custom design-system component - p-select-dropdown */
-:deep(.p-select-dropdown) {
-    .dropdown-button-component {
-        @apply rounded-full;
-
-        &.opened {
-            @apply rounded-full;
-        }
-    }
-}
 </style>
diff --git a/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue b/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
new file mode 100644
index 0000000000..441df9beac
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getTextHighlightRegex, PTextInput, PEmpty } from '@cloudforet/mirinae';
+
+import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
+
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import LSBItem from '@/common/modules/navigations/new-lsb/LSBItem.vue';
+
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+const props = defineProps<{
+    keyword?: string;
+}>();
+const emit = defineEmits<{(e: 'update:keyword', value: string): void;
+}>();
+
+const projectReferenceStore = useProjectReferenceStore();
+const projectFilteredByKeyword = computed(() => {
+    const projectItems = Object.values(projectReferenceStore.getters.projectItems);
+    return projectItems.filter((project) => getTextHighlightRegex(props.keyword).test(project.name));
+});
+</script>
+
+<template>
+    <div>
+        <p-text-input :value="props.keyword"
+                      class="!w-full mb-2"
+                      placeholder="Search project"
+                      @update:value="emit('update:keyword', $event)"
+        />
+        <template v-if="props.keyword">
+            <template v-if="projectFilteredByKeyword.length">
+                <l-s-b-item v-for="project in projectFilteredByKeyword"
+                            :id="project.key"
+                            :key="project.key"
+                            :name="project.name"
+                            :link="{
+                                to: {
+                                    name: PROJECT_ROUTE_V2._NAME,
+                                    params: { projectGroupOrProjectId: project.key }
+                                }
+                            }"
+                            :favorite-options="{ type: FAVORITE_TYPE.PROJECT, id: project.key }"
+                            display-type="list"
+                            icon="ic_project-filled"
+                />
+            </template>
+            <p-empty v-else
+                     class="text-paragraph-md whitespace-pre mt-3"
+            >
+                {{ $t('PROJECT.LANDING.SEARCH_EMPTY_TEXT') }}
+            </p-empty>
+        </template>
+    </div>
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectLSBTree.vue b/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
new file mode 100644
index 0000000000..fdb53af49c
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
@@ -0,0 +1,161 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'ProjectLSBTree',
+});
+</script>
+<script setup lang="ts">
+/* eslint-disable import/first */
+import {
+    computed,
+// eslint-disable-next-line import/no-duplicates
+} from 'vue';
+
+import { PTreeNode } from '@cloudforet/mirinae';
+import type { TreeNodeIcon, TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+import type { ProjectGroupReferenceItem } from '@/store/reference/project-group-reference-store';
+import { useProjectGroupReferenceStore, type ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
+import type { ProjectReferenceItem } from '@/store/reference/project-reference-store';
+import { useProjectReferenceStore, type ProjectReferenceMap } from '@/store/reference/project-reference-store';
+
+import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+
+import { indigo } from '@/styles/colors';
+
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+
+interface ProjectData extends ProjectReferenceItem {
+    type: 'PROJECT';
+}
+interface ProjectGroupData extends ProjectGroupReferenceItem {
+    type: 'PROJECT_GROUP';
+}
+
+const props = withDefaults(defineProps<{
+    parentGroupId?: string;
+    depth?: number;
+    // selectedId?: string;
+}>(), {
+    parentGroupId: undefined,
+    depth: 0,
+    // selectedId: undefined,
+});
+
+
+/* items */
+const projectGroupReferenceStore = useProjectGroupReferenceStore();
+const projectReferenceStore = useProjectReferenceStore();
+const projectGroupMap = computed<ProjectGroupReferenceMap>(() => projectGroupReferenceStore.getters.projectGroupItems);
+const projectGroups = computed<ProjectGroupReferenceItem[]>(() => Object.values(projectGroupMap.value));
+const projectMap = computed<ProjectReferenceMap>(() => projectReferenceStore.getters.projectItems);
+const projects = computed<ProjectReferenceItem[]>(() => Object.values(projectMap.value));
+const items = computed<Array<ProjectData|ProjectGroupData>>(() => {
+    const _items: Array<ProjectData|ProjectGroupData> = [];
+    projectGroups.value.forEach((group) => {
+        const parentId = group.data.parentGroupInfo?.id;
+        if (parentId !== props.parentGroupId) return;
+        _items.push({
+            ...group,
+            type: 'PROJECT_GROUP',
+        });
+    });
+    projects.value.forEach((project) => {
+        const groupId = project.data.groupInfo?.id;
+        if (groupId !== props.parentGroupId) return;
+        _items.push({
+            ...project,
+            type: 'PROJECT',
+        });
+    });
+    return _items;
+});
+
+/* icons */
+const projectGroupIcon: TreeNodeIcon = { iconName: 'ic_folder-filled', iconColor: indigo[500] };
+const projectIcon: TreeNodeIcon = 'ic_project-filled';
+
+/* link */
+const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupOrProjectId === curr.params.projectGroupOrProjectId;
+
+</script>
+
+<template>
+    <div class="project-main-tree">
+        <p-tree-node v-for="item in items"
+                     :id="item.key"
+                     :key="item.key"
+                     :name="item.name"
+                     :depth="props.depth"
+                     :selectable="true"
+                     :link="{
+                         to: {
+                             name: PROJECT_ROUTE_V2._NAME,
+                             params: {
+                                 projectGroupOrProjectId: item.key,
+                             },
+                         },
+                         predicate,
+                     }"
+                     :icon="item.type === 'PROJECT_GROUP' ? projectGroupIcon : projectIcon"
+                     display-type="tree"
+                     :has-children="item.type === 'PROJECT_GROUP'"
+        >
+            <template #action="{ id, hasChildren }">
+                <favorite-button :item-id="id"
+                                 :favorite-type="hasChildren ? FAVORITE_TYPE.PROJECT_GROUP : FAVORITE_TYPE.PROJECT"
+                                 scale="0.8"
+                                 class="favorite-button"
+                />
+            </template>
+            <template #children="node">
+                <project-l-s-b-tree :parent-group-id="node.id"
+                                    :depth="node.depth + 1"
+                />
+            </template>
+        </p-tree-node>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.project-main-tree {
+    width: 100%;
+    .project-menu-item-content {
+        @apply flex items-center justify-between w-full;
+        height: 2rem;
+        .contents-wrapper {
+            @apply flex items-center gap-1 w-full;
+
+            .project-icon {
+                min-width: 0.875rem;
+            }
+            .text {
+                @apply text-label-md text-gray-900;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .favorite-button {
+            display: none;
+            min-width: 1.5rem;
+            height: 1rem;
+            padding-left: 0.5rem;
+        }
+
+        &:hover {
+            .contents-wrapper {
+                width: calc(100% - 1.5rem);
+            }
+            .favorite-button {
+                display: block;
+            }
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMainProjectCard.vue b/apps/web/src/services/project/v2/components/ProjectMainProjectCard.vue
index 9c9cfd0403..20adf59d92 100644
--- a/apps/web/src/services/project/v2/components/ProjectMainProjectCard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectMainProjectCard.vue
@@ -5,7 +5,6 @@ import { useRouter } from 'vue-router/composables';
 import {
     PI, PTextHighlighting, PSelectDropdown,
 } from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import { i18n } from '@/translations';
 
@@ -19,7 +18,6 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { peacock } from '@/styles/colors';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
 import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
@@ -35,7 +33,6 @@ const props = defineProps<Props>();
 const allReferenceStore = useAllReferenceStore();
 const favoriteStore = useFavoriteStore();
 const favoriteGetters = favoriteStore.getters;
-const projectPageStore = useProjectPageStore();
 
 
 const router = useRouter();
@@ -88,17 +85,17 @@ const handleSelectProject = () => {
     }).catch(() => {});
 };
 
-const handleSelectItem = (selected: MenuItem) => {
-    projectPageStore.setCurrentSelectedProjectId(props.item.id);
-    if (selected.name === 'update') {
-        projectPageStore.setProjectFormModalVisible(true);
-    }
-    if (selected.name === 'move') {
-        projectPageStore.setProjectGroupMoveModalVisible(true);
-    }
-    if (selected.name === 'delete') {
-        projectPageStore.setProjectDeleteModalVisible(true);
-    }
+const handleSelectItem = () => {
+    // projectPageStore.setCurrentSelectedProjectId(props.item.id);
+    // if (selected.name === 'update') {
+    //     projectPageStore.setProjectFormModalVisible(true);
+    // }
+    // if (selected.name === 'move') {
+    //     projectPageStore.setProjectGroupMoveModalVisible(true);
+    // }
+    // if (selected.name === 'delete') {
+    //     projectPageStore.setProjectDeleteModalVisible(true);
+    // }
 };
 
 </script>
diff --git a/apps/web/src/services/project/v2/components/ProjectMainProjectGroupCard.vue b/apps/web/src/services/project/v2/components/ProjectMainProjectGroupCard.vue
index 1cd50cc1f3..64cea90f36 100644
--- a/apps/web/src/services/project/v2/components/ProjectMainProjectGroupCard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectMainProjectGroupCard.vue
@@ -4,7 +4,6 @@ import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
 import { PI, PTextHighlighting, PSelectDropdown } from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import { i18n } from '@/translations';
 
@@ -14,7 +13,6 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { indigo } from '@/styles/colors';
 
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
 import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
@@ -28,7 +26,6 @@ const router = useRouter();
 
 const favoriteStore = useFavoriteStore();
 const favoriteGetters = favoriteStore.getters;
-const projectPageStore = useProjectPageStore();
 
 const storeState = reactive({
     favoriteItems: computed(() => favoriteGetters.projectGroupItems),
@@ -70,18 +67,18 @@ const handleSelectProjectGroup = () => {
     }).catch(() => {});
 };
 
-const handleSelectItem = (selected: MenuItem) => {
-    projectPageStore.setCurrentSelectedProjectGroupId(props.item.id);
-    if (selected.name === 'rename') {
-        projectPageStore.setProjectGroupFormUpdateMode(true);
-        projectPageStore.setProjectGroupFormVisible(true);
-    }
-    if (selected.name === 'move') {
-        projectPageStore.setProjectGroupMoveModalVisible(true);
-    }
-    if (selected.name === 'delete') {
-        projectPageStore.setProjectDeleteModalVisible(true);
-    }
+const handleSelectItem = () => {
+    // projectPageStore.setCurrentSelectedProjectGroupId(props.item.id);
+    // if (selected.name === 'rename') {
+    //     projectPageStore.setProjectGroupFormUpdateMode(true);
+    //     projectPageStore.setProjectGroupFormVisible(true);
+    // }
+    // if (selected.name === 'move') {
+    //     projectPageStore.setProjectGroupMoveModalVisible(true);
+    // }
+    // if (selected.name === 'delete') {
+    //     projectPageStore.setProjectDeleteModalVisible(true);
+    // }
 };
 
 
diff --git a/apps/web/src/services/project/v2/components/ProjectMainTree.vue b/apps/web/src/services/project/v2/components/ProjectMainTree.vue
deleted file mode 100644
index c45a2c8b26..0000000000
--- a/apps/web/src/services/project/v2/components/ProjectMainTree.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script setup lang="ts">
-
-import {
-    computed, onMounted, reactive, watch,
-} from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import { isEqual } from 'lodash';
-
-import { PI, PTreeView } from '@cloudforet/mirinae';
-
-import { i18n } from '@/translations';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-
-import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-import type { Breadcrumb } from '@/common/modules/page-layouts/type';
-
-import { indigo, peacock } from '@/styles/colors';
-
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
-import type { TreeNode, TreeDisplayMap, TreeData } from '@/services/project/v-shared/tree/type';
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
-interface ProjectDataType extends TreeData {
-    name: string;
-    type: 'PROJECT'|'PROJECT_GROUP';
-    id: string;
-    parentGroupId?: string;
-}
-
-const route = useRoute();
-const gnbStore = useGnbStore();
-
-const allReferenceStore = useAllReferenceStore();
-const projectTreeStore = useProjectTreeStore();
-const projectTreeState = projectTreeStore.state;
-
-const storeState = reactive({
-    projectGroup: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    treeDisplayMap: computed(() => projectTreeState.treeDisplayMap),
-});
-
-const state = reactive({
-    currentParentPathIds: [] as string[],
-    projectGroupNavigation: computed<Breadcrumb[]>(() => {
-        const allPaths = state.currentParentPathIds.map((id) => ({
-            name: storeState.projectGroup[id].name,
-            to: {
-                // TODO: check route
-                name: PROJECT_ROUTE_V2._NAME,
-                params: {
-                    projectGroupId: id,
-                },
-            },
-        }));
-        // TODO: check route
-        return [{ name: i18n.t('MENU.PROJECT'), to: { name: PROJECT_ROUTE_V2._NAME } }, ...allPaths];
-    }),
-    selectedTreeId: undefined as string|undefined,
-    projectTreeData: computed<TreeNode<ProjectDataType>[]>(() => {
-        const nodes: Record<string, TreeNode<ProjectDataType>> = {};
-        Object.keys(storeState.projectGroup).forEach((key) => {
-            const projectGroup = storeState.projectGroup[key];
-            nodes[key] = {
-                id: key,
-                depth: 0,
-                data: {
-                    name: projectGroup.name,
-                    type: 'PROJECT_GROUP',
-                    id: key,
-                    parentGroupId: projectGroup.data.parentGroupInfo?.id,
-                    to: {
-                        // TODO: check route
-                        name: PROJECT_ROUTE_V2._NAME,
-                        params: {
-                            projectGroupId: key,
-                        },
-                    },
-                },
-                children: [],
-            };
-        });
-        Object.keys(storeState.project).forEach((key) => {
-            const project = storeState.project[key];
-            nodes[key] = {
-                id: key,
-                depth: 0,
-                data: {
-                    name: project.name,
-                    type: 'PROJECT',
-                    id: key,
-                    parentGroupId: project.data.groupInfo?.id,
-                    to: {
-                        // TODO: check route
-                        name: PROJECT_ROUTE_V2._NAME,
-                        params: {
-                            id: key,
-                        },
-                    },
-                },
-            };
-        });
-
-        const rootNodes: TreeNode<ProjectDataType>[] = [];
-        const setDepth = (node, depth) => {
-            node.depth = depth;
-            if (!node.children) return;
-            node.children.forEach((child) => {
-                setDepth(child, depth + 1);
-            });
-        };
-        Object.values(nodes).forEach((node) => {
-            const parentGroupId = node.data?.parentGroupId;
-            if (!parentGroupId) {
-                rootNodes.push(node);
-                setDepth(node, 0);
-            } else {
-                const parentNode = nodes[parentGroupId];
-                if (parentNode) {
-                    parentNode.children = parentNode.children || [];
-                    parentNode.children.push(node);
-                    setDepth(node, parentNode.depth + 1);
-                }
-            }
-        });
-
-        return rootNodes;
-    }),
-});
-
-/* Event */
-const handleUpdateTreeDisplayMap = (treeDisplayMap: TreeDisplayMap) => {
-    if (isEqual(treeDisplayMap, storeState.treeDisplayMap)) return;
-    projectTreeStore.setTreeDisplayMap(treeDisplayMap);
-};
-
-/* Helper */
-const updateTreeDisplayMap = (selectedTreeId: string) => {
-    const displayMap = { ...storeState.treeDisplayMap };
-    const parentPathIds: string[] = [];
-    let currentId = selectedTreeId;
-
-    while (currentId) {
-        displayMap[currentId] = { isOpen: true };
-        parentPathIds.unshift(currentId);
-        const currentNode = storeState.projectGroup[currentId] || storeState.project[currentId];
-        if (currentNode?.data?.parentGroupInfo?.id) {
-            currentId = currentNode.data.parentGroupInfo.id;
-        } else if (currentNode?.data?.groupInfo?.id) {
-            currentId = currentNode.data?.groupInfo.id;
-        } else {
-            break;
-        }
-    }
-
-    state.currentParentPathIds = parentPathIds;
-    projectTreeStore.setTreeDisplayMap(displayMap);
-};
-
-
-
-onMounted(() => {
-    const selectedProjectGroupId = route.params.projectGroupId as string|undefined;
-    const selectedProjectId = route.params.id as string|undefined;
-    if (selectedProjectGroupId) {
-        state.selectedTreeId = selectedProjectGroupId as string;
-        updateTreeDisplayMap(selectedProjectGroupId);
-    }
-    if (selectedProjectId) {
-        state.selectedTreeId = selectedProjectId as string;
-        const parentGroupId = storeState.project[selectedProjectId]?.data.groupInfo?.id;
-        if (parentGroupId) updateTreeDisplayMap(parentGroupId);
-    }
-});
-
-watch(() => route.params, ({ id, projectGroupId }) => {
-    if (projectGroupId) {
-        state.selectedTreeId = projectGroupId as string;
-        updateTreeDisplayMap(projectGroupId);
-    }
-    if (id) {
-        state.selectedTreeId = id as string;
-        const parentGroupId = storeState.project[id]?.data.groupInfo?.id;
-        if (parentGroupId) updateTreeDisplayMap(parentGroupId);
-    }
-});
-watch(() => state.projectGroupNavigation, async (projectGroupNavigation) => {
-    gnbStore.setBreadcrumbs(projectGroupNavigation);
-});
-
-
-</script>
-
-<template>
-    <div class="project-main-tree">
-        <p-tree-view :tree-data="state.projectTreeData"
-                     :tree-display-map="storeState.treeDisplayMap"
-                     :selected-id="state.selectedTreeId"
-                     use-default-indent
-                     @update:tree-display-map="handleUpdateTreeDisplayMap"
-        >
-            <template #content="{ node }">
-                <div class="project-menu-item-content">
-                    <div class="contents-wrapper">
-                        <p-i class="project-icon"
-                             :name="Array.isArray(node.children) ? 'ic_folder-filled' : 'ic_document-filled'"
-                             :color="Array.isArray(node.children) ? indigo[500] : peacock[600]"
-                             width="0.875rem"
-                             height="0.875rem"
-                        />
-                        <span class="text">{{ node.data.name }}</span>
-                    </div>
-                    <favorite-button :item-id="node.id"
-                                     :favorite-type="Array.isArray(node.children) ? FAVORITE_TYPE.PROJECT_GROUP : FAVORITE_TYPE.PROJECT"
-                                     scale="0.8"
-                                     class="favorite-button"
-                    />
-                </div>
-            </template>
-        </p-tree-view>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.project-main-tree {
-    width: 100%;
-    .project-menu-item-content {
-        @apply flex items-center justify-between w-full;
-        height: 2rem;
-        .contents-wrapper {
-            @apply flex items-center gap-1 w-full;
-
-            .project-icon {
-                min-width: 0.875rem;
-            }
-            .text {
-                @apply text-label-md text-gray-900;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        .favorite-button {
-            display: none;
-            min-width: 1.5rem;
-            height: 1rem;
-            padding-left: 0.5rem;
-        }
-
-        &:hover {
-            .contents-wrapper {
-                width: calc(100% - 1.5rem);
-            }
-            .favorite-button {
-                display: block;
-            }
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue b/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
new file mode 100644
index 0000000000..909dc397b6
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import {
+    reactive, computed,
+} from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import {
+    PButtonModal, PFieldGroup, PSelectDropdown, PLazyImg,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import { i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useWorkspaceUsersQuery } from '@/services/project/v2/composables/queries/use-workspace-users-query';
+import { useUserInfo } from '@/services/project/v2/composables/use-user-info';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+
+const projectPageModalStore = useProjectPageModalStore();
+
+
+const state = reactive({
+    searchText: '',
+});
+const {
+    forms: {
+        selectedUserItems,
+    },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+} = useFormValidator({
+    selectedUserItems: [] as SelectDropdownMenuItem[],
+}, {
+    selectedUserItems: (val: SelectDropdownMenuItem[]) => {
+        if (!val.length) return i18n.t('PROJECT.DETAIL.MEMBER.MODAL_VALIDATION_REQUIRED');
+        return true;
+    },
+});
+
+/* workspace users */
+const { data: workspaceUsers } = useWorkspaceUsersQuery({
+    enabled: computed(() => projectPageModalStore.state.inviteMemberModalVisible),
+});
+const workspaceUserList = computed(() => workspaceUsers.value || []);
+
+/* project users */
+const { data: project } = useProjectQuery({
+    projectId: computed(() => projectPageModalStore.state.targetProjectId),
+    enabled: computed(() => projectPageModalStore.state.inviteMemberModalVisible),
+});
+const projectUserList = computed(() => project.value?.users || []);
+
+/* user list */
+const userMenuItems = computed<SelectDropdownMenuItem[]>(() => {
+    const items: SelectDropdownMenuItem[] = [];
+    workspaceUserList.value.forEach((user) => {
+        const singleItem = {
+            name: user.user_id,
+            label: user.name ? `${user.user_id} (${user.name})` : user.user_id,
+            disabled: false,
+        };
+        if (projectUserList.value.includes(user.user_id)) {
+            singleItem.disabled = true;
+        }
+        items.push(singleItem);
+    });
+    return items;
+});
+
+/* users info */
+const {
+    getUserIcon, getUserLabel,
+} = useUserInfo();
+
+/* Api */
+const { projectAPI } = useProjectApi();
+const { mutateAsync: addMember } = useMutation({
+    mutationFn: () => {
+        const projectId = projectPageModalStore.state.targetProjectId;
+        if (!projectId) throw new Error('Project ID is not defined');
+        return projectAPI.addUsers({
+            project_id: projectId,
+            users: selectedUserItems.value.map((d) => d.name),
+        });
+    },
+    onSuccess: () => showSuccessMessage(i18n.t('PROJECT.DETAIL.MEMBER.ALS_S_ADD_MEMBER'), ''),
+    onError: (e) => ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.MEMBER.ALT_E_ADD_MEMBER'), true),
+});
+
+/* Event */
+const handleConfirm = async () => {
+    await addMember();
+    projectPageModalStore.closeInviteMemberModal();
+};
+
+</script>
+
+<template>
+    <p-button-modal
+        class="project-member-invite-modal"
+        modal-body-id="project-member-invite"
+        :header-title="$t('PROJECT.DETAIL.MEMBER.INVITE_MEMBER')"
+        :fade="true"
+        :backdrop="true"
+        size="sm"
+        :visible="projectPageModalStore.state.inviteMemberModalVisible"
+        :disabled="!isAllValid"
+        @close="projectPageModalStore.closeInviteMemberModal()"
+        @cancel="projectPageModalStore.closeInviteMemberModal()"
+        @confirm="handleConfirm"
+    >
+        <template #body>
+            <div class="form-wrapper">
+                <p-field-group :label="$t('PROJECT.DETAIL.MEMBER.MEMBER')"
+                               required
+                               :invalid="invalidState.selectedUserItems"
+                               :invalid-text="invalidTexts.selectedUserItems"
+                >
+                    <template #default="{invalid}">
+                        <p-select-dropdown
+                            :menu="userMenuItems"
+                            :selected="selectedUserItems"
+                            :search-text.sync="state.searchText"
+                            parent-id="project-member-invite"
+                            multi-selectable
+                            appearance-type="stack"
+                            show-select-marker
+                            is-filterable
+                            show-delete-all-button
+                            use-fixed-menu-style
+                            :invalid="invalid"
+                            @update:selected="setForm('selectedUserItems', $event)"
+                        >
+                            <template #menu-item--format="{item}">
+                                <p-lazy-img :src="getUserIcon(item.name)"
+                                            class="menu-icon"
+                                            width="1rem"
+                                            height="1rem"
+                                />
+                                <span>
+                                    {{ getUserLabel(item.name) || item.label }}
+                                </span>
+                            </template>
+                        </p-select-dropdown>
+                    </template>
+                </p-field-group>
+            </div>
+        </template>
+        <template #confirm-button>
+            <span>{{ $t('PROJECT.DETAIL.MEMBER.INVITE') }}</span>
+            <span v-if="selectedUserItems.length"
+                  class="ml-1"
+            >{{ selectedUserItems.length }}</span>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.project-member-invite-modal {
+    /* custom design-system component - p-box-tab */
+    :deep(.p-box-tab) {
+        .tab-pane {
+            padding: 0;
+        }
+    }
+    .form-wrapper {
+        .title {
+            @apply text-gray-900;
+            font-size: 1.375rem;
+            line-height: 1.25;
+            padding-bottom: 1rem;
+        }
+    }
+    .menu-icon {
+        @apply rounded-full overflow-hidden;
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue b/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
new file mode 100644
index 0000000000..b07c8f1089
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import {
+    PButtonModal, PEmpty, PLazyImg, PIconButton, PButton,
+} from '@cloudforet/mirinae';
+
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import type { ProjectType } from '@/api-clients/identity/project/schema/type';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useWorkspaceUsersQuery } from '@/services/project/v2/composables/queries/use-workspace-users-query';
+import { useUserInfo } from '@/services/project/v2/composables/use-user-info';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+
+const projectPageModalStore = useProjectPageModalStore();
+
+/* project */
+const { data: project, setQueryData } = useProjectQuery({
+    projectId: computed(() => projectPageModalStore.state.targetProjectId),
+    enabled: computed(() => !!projectPageModalStore.state.manageMemberModalVisible),
+});
+const projectType = computed<ProjectType|undefined>(() => project.value?.project_type);
+
+/* members */
+const { data: workspaceUsers, error } = useWorkspaceUsersQuery({
+    enabled: computed(() => projectType.value === 'PUBLIC' && projectPageModalStore.state.manageMemberModalVisible),
+});
+const possibleUserIds = computed<string[]>(() => {
+    if (projectType.value === 'PUBLIC') {
+        if (!workspaceUsers.value) return [];
+        return workspaceUsers.value?.map((user) => user.user_id) || [];
+    }
+    return project.value?.users || [];
+});
+watch(error, (e) => {
+    if (e) ErrorHandler.handleError(e);
+});
+
+
+/* users info */
+const {
+    getUserIcon,
+    getUserName,
+    getUserRole,
+} = useUserInfo();
+
+
+/* remove project user */
+const { projectAPI } = useProjectApi();
+const { mutateAsync: removeProjectUsers } = useMutation({
+    mutationFn: projectAPI.removeUsers,
+});
+const handleRemoveProjectUser = async (userId: string) => {
+    try {
+        if (!projectPageModalStore.state.targetProjectId) throw new Error('Project ID is not defined');
+        const updated = await removeProjectUsers({
+            project_id: projectPageModalStore.state.targetProjectId,
+            users: [userId],
+        });
+        setQueryData(updated);
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, 'Project ID is not defined', true);
+    }
+};
+
+/* modal handling */
+const handleCloseMemberModal = () => {
+    projectPageModalStore.closeManageMemberModal();
+};
+const handleClickInvite = () => {
+    const projectId = projectPageModalStore.state.targetProjectId as string;
+    projectPageModalStore.closeManageMemberModal();
+    projectPageModalStore.openProjectInviteMemberModal(projectId);
+};
+</script>
+
+<template>
+    <p-button-modal :header-title="$t('PROJECT.DETAIL.MEMBER_TITLE')"
+                    :visible="projectPageModalStore.state.manageMemberModalVisible && !!projectPageModalStore.state.targetProjectId"
+                    size="md"
+                    hide-footer-close-button
+                    @close="projectPageModalStore.closeManageMemberModal()"
+                    @cancel="projectPageModalStore.closeManageMemberModal()"
+                    @confirm="handleCloseMemberModal"
+    >
+        <template #body>
+            <div class="member-contents-wrapper">
+                <div class="member-contents">
+                    <div class="contents-header">
+                        <span>{{ $t('PROJECT.DETAIL.INVITE_MEMBER_DESC') }}</span>
+                        <p-button v-if="projectType === 'PRIVATE'"
+                                  icon-left="ic_plus_bold"
+                                  style-type="tertiary"
+                                  @click="handleClickInvite"
+                        >
+                            {{ $t('PROJECT.DETAIL.MEMBER.INVITE') }}
+                        </p-button>
+                    </div>
+                    <div class="main-contents">
+                        <div v-if="possibleUserIds.length">
+                            <div v-for="(userId) in possibleUserIds"
+                                 :key="userId"
+                                 class="member-item"
+                            >
+                                <div class="left-contents">
+                                    <p-lazy-img :src="getUserIcon(userId)"
+                                                alt="user-icon"
+                                                class="menu-icon"
+                                                width="1.75rem"
+                                                height="1.75rem"
+                                    />
+                                    <span>{{ userId }} <span v-if="!!getUserName(userId)">({{ getUserName(userId) }})</span></span>
+                                </div>
+                                <div class="right-contents">
+                                    <span>{{ getUserRole(userId) }}</span>
+                                    <p-icon-button name="ic_delete"
+                                                   size="sm"
+                                                   @click="handleRemoveProjectUser(userId)"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <p-empty v-else
+                                 class="project-member-empty"
+                                 show-image
+                                 :title="$t('PROJECT.DETAIL.MEMBER.NO_PROJECT_MEMBER')"
+                        >
+                            <template #image>
+                                <img alt="illust_astronaut_radio"
+                                     src="@/assets/images/img_ghost.png"
+                                >
+                            </template>
+                        </p-empty>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #confirm-button>
+            {{ $t('PROJECT.DETAIL.MEMBER.DONE') }}
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.member-contents-wrapper {
+    @apply bg-violet-100;
+    padding: 1rem;
+    width: 100%;
+    height: 25rem;
+    .member-contents {
+        @apply rounded-lg border border-violet-200 bg-white;
+        padding: 0.75rem;
+        height: 100%;
+
+        .contents-header {
+            @apply flex items-center justify-between text-label-md font-bold text-gray-900;
+            padding-bottom: 0.5rem;
+            height: 2.5rem;
+        }
+        .main-contents {
+            @apply overflow-scroll;
+            height: calc(100% - 2.5rem);
+            .member-item {
+                @apply flex items-center justify-between;
+                padding: 0.5rem 0.25rem 0.5rem 0.5rem;
+                .left-contents {
+                    @apply flex items-center gap-2 text-label-md text-gray-900;
+                    .menu-icon {
+                        @apply rounded-full;
+                    }
+                }
+                .right-contents {
+                    @apply text-label-md text-gray-500 flex items-center gap-2;
+                }
+            }
+            .project-member-empty {
+                margin-top: 3rem;
+            }
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMoveModal.vue b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
new file mode 100644
index 0000000000..f5c467e2a3
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { computed, reactive, watch } from 'vue';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { PButtonModal, PRadio, PRadioGroup } from '@cloudforet/mirinae';
+
+
+import type { ProjectGroupChangeParentGroupParameters } from '@/api-clients/identity/project-group/schema/api-verbs/change-parent-group';
+import type { ProjectChangeProjectGroupParameters } from '@/api-clients/identity/project/schema/api-verbs/change-project-group';
+import { i18n } from '@/translations';
+
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
+import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
+import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
+
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const emit = defineEmits(['moved']);
+
+const projectPageModalStore = useProjectPageModalStore();
+const isProject = computed(() => !!projectPageModalStore.state.targetProjectId);
+const targetId = computed(() => projectPageModalStore.state.targetProjectId || projectPageModalStore.state.targetProjectGroupId);
+
+const allReferenceStore = useAllReferenceStore();
+const storeState = reactive({
+    projects: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
+    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
+});
+const state = reactive({
+    originParentGroupId: computed<string|undefined>(() => {
+        if (!targetId.value) return undefined;
+        if (isProject.value) return storeState.projects[targetId.value]?.data.groupInfo?.id;
+        return storeState.projectGroups[targetId.value]?.data.parentGroupInfo?.id;
+    }),
+    selectedProjectGroupIdList: [] as string[],
+    selectProjectGroup: true as boolean,
+    isValid: computed<boolean>(() => getIsValid(isProject.value, state.selectProjectGroup, state.selectedProjectGroupIdList, state.originParentGroupId)),
+    targetName: computed<string>(() => {
+        if (!targetId.value) return '';
+        if (isProject.value) return storeState.projects[targetId.value]?.name;
+        return storeState.projectGroups[targetId.value]?.name;
+    }),
+    projectGroupSelectOptions: computed(() => ({
+        id: targetId.value,
+        type: isProject.value ? 'PROJECT' : 'PROJECT_GROUP',
+        currentProjectGroupId: state.originParentGroupId,
+    })),
+});
+
+/* Util */
+const getIsValid = (_isProject: boolean, selectProjectGroup: boolean, selectedProjectGroupIdList: string[], originParentGroupId?: string) => {
+    if (_isProject) return true;
+    if (!selectProjectGroup) { // no project group
+        if (!originParentGroupId) return false;
+    } else {
+        if (!selectedProjectGroupIdList.length) return false;
+        if (originParentGroupId === selectedProjectGroupIdList[0]) return false;
+    }
+    return true;
+};
+
+/* Api */
+const changeProjectGroup = async () => {
+    try {
+        if (!targetId.value) throw new Error('No target id');
+        const _projectGroupId = state.selectProjectGroup ? state.selectedProjectGroupIdList[0] : null;
+        if (isProject.value) {
+            await SpaceConnector.clientV2.identity.project.changeProjectGroup<ProjectChangeProjectGroupParameters>({
+                project_id: targetId.value,
+                project_group_id: _projectGroupId,
+            });
+        } else {
+            await SpaceConnector.clientV2.identity.projectGroup.changeParentGroup<ProjectGroupChangeParentGroupParameters>({
+                project_group_id: targetId.value,
+                parent_group_id: _projectGroupId,
+            });
+        }
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
+        emit('moved');
+    } catch (e) {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
+    }
+};
+
+/* Event */
+const handleChangeSelectProjectGroup = (value: boolean) => {
+    state.selectProjectGroup = value;
+};
+const handleSelectProjectGroup = (projectGroupTreeNodeData: ProjectTreeNodeData[]) => {
+    state.selectedProjectGroupIdList = projectGroupTreeNodeData.map((item) => item.id);
+};
+const handleConfirm = async () => {
+    await changeProjectGroup();
+};
+
+/* Watch */
+watch(() => state.originParentGroupId, (_id?: string) => {
+    if (_id) state.selectedProjectGroupIdList = [_id];
+    else state.selectProjectGroup = false;
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal :header-title="$t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.MODAL_MOVE_PROJECT_TITLE', { name: state.targetName })"
+                    centered
+                    size="sm"
+                    fade
+                    backdrop
+                    :disabled="!state.isValid"
+                    :visible="projectPageModalStore.state.moveModalVisible"
+                    @close="projectPageModalStore.closeMoveModal()"
+                    @cancel="projectPageModalStore.closeMoveModal()"
+                    @confirm="handleConfirm"
+    >
+        <template #body>
+            <p-radio-group direction="vertical">
+                <p-radio :value="true"
+                         :selected="state.selectProjectGroup"
+                         @change="handleChangeSelectProjectGroup"
+                >
+                    {{ $t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.SELECT_A_PROJECT_GROUP_TO_MOVE_TO') }}
+                </p-radio>
+                <project-select-dropdown v-if="state.projectGroupSelectOptions.id"
+                                         :project-selectable="false"
+                                         class="project-select-dropdown"
+                                         project-group-selectable
+                                         :selected-project-ids="state.selectedProjectGroupIdList"
+                                         :disabled="!state.selectProjectGroup"
+                                         :project-group-select-options="state.projectGroupSelectOptions"
+                                         @select="handleSelectProjectGroup"
+                />
+                <p-radio :value="false"
+                         :selected="state.selectProjectGroup"
+                         @change="state.selectProjectGroup = $event"
+                >
+                    {{ isProject ? $t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.NO_PROJECT_GROUP')
+                        : $t('PROJECT.LANDING.MODAL_MOVE_PROJECT_GROUP.NO_PARENT_GROUP') }}
+                </p-radio>
+            </p-radio-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.project-select-dropdown {
+    padding-left: 1.25rem;
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectTagsModal.vue b/apps/web/src/services/project/v2/components/ProjectTagsModal.vue
new file mode 100644
index 0000000000..bb309e80a5
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectTagsModal.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import {
+    computed, onMounted, ref,
+} from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import {
+    PButtonModal,
+} from '@cloudforet/mirinae';
+
+
+import type { Tags } from '@/api-clients/_common/schema/model';
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import { i18n } from '@/translations';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import type { Tag } from '@/common/modules/tags/type';
+
+import ProjectTagsInputGroup from '@/services/project/v-shared/components/ProjectTagsInputGroup.vue';
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+
+const projectPageModalStore = useProjectPageModalStore();
+
+/* project */
+const { data: project, isLoading, setQueryData: setProjectQueryData } = useProjectQuery({
+    projectId: computed(() => projectPageModalStore.state.targetProjectId),
+    enabled: computed(() => projectPageModalStore.state.manageTagsModalVisible),
+});
+const tags = computed(() => project.value?.tags || {});
+
+
+/* Form */
+const newTags = ref<Tags>({});
+const isTagsValid = ref(false);
+onMounted(() => {
+    newTags.value = { ...tags.value };
+});
+
+/* Mutation */
+const { projectAPI } = useProjectApi();
+const { mutate: updateTags, isPending: isUpdating } = useMutation({
+    mutationFn: (_newTags: Tag) => {
+        if (!projectPageModalStore.state.targetProjectId) throw new Error('Project ID is not defined');
+        return projectAPI.update({
+            project_id: projectPageModalStore.state.targetProjectId,
+            tags: _newTags,
+        });
+    },
+    onSuccess: (data) => {
+        setProjectQueryData(data);
+        showSuccessMessage(i18n.t('COMMON.TAGS.ALT_S_UPDATE'), '');
+        projectPageModalStore.closeManageTagsModal();
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('COMMON.TAGS.ALT_E_UPDATE'));
+    },
+});
+
+/* Event Handler */
+const handleUpdateTags = (_tags: Tags) => {
+    newTags.value = _tags;
+};
+const handleSaveTags = () => {
+    if (!isTagsValid.value) return;
+    updateTags(newTags.value);
+};
+</script>
+
+<template>
+    <p-button-modal
+        class="project-tags-modal"
+        modal-body-id="project-tags"
+        :header-title="$t('PROJECT.DETAIL.UPDATE_TAG')"
+        :fade="true"
+        :backdrop="true"
+        size="sm"
+        :visible="projectPageModalStore.state.manageTagsModalVisible"
+        :disabled="!isTagsValid"
+        :loading="isUpdating"
+        @close="projectPageModalStore.closeManageTagsModal()"
+        @cancel="projectPageModalStore.closeManageTagsModal()"
+        @confirm="handleSaveTags"
+    >
+        <template #body>
+            <p class="text-paragraph-md text-gray-900 whitespace-pre-wrap">
+                {{ $t('PROJECT.DETAIL.UPDATE_TAG_DESC') }}
+            </p>
+            <project-tags-input-group :tags="newTags"
+                                      :disabled="isLoading"
+                                      show-validation
+                                      :is-valid.sync="isTagsValid"
+                                      @update-tags="handleUpdateTags"
+            />
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-query.ts
new file mode 100644
index 0000000000..209b4a24eb
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-query.ts
@@ -0,0 +1,41 @@
+import type { Ref } from 'vue';
+import { computed, isRef } from 'vue';
+
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+
+export const useProjectQuery = ({
+    projectId,
+    enabled,
+}: {
+  projectId: Ref<string|undefined>;
+enabled?: Ref<boolean>|boolean;
+}) => {
+    const { projectAPI, projectQueryKey } = useProjectApi();
+    const { data, isLoading, error } = useQuery({
+        queryKey: computed(() => [...projectQueryKey.value, projectId.value]),
+        queryFn: () => projectAPI.get({ project_id: projectId.value as string }),
+        enabled: computed(() => {
+            if (!projectId.value) return false;
+            if (enabled === undefined) return true;
+            return isRef(enabled) ? enabled.value : enabled;
+        }),
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        gcTime: 1000 * 60 * 1, // 1 minutes
+    });
+
+    const queryClient = useQueryClient();
+    const invalidateQuery = () => {
+        if (projectId.value) {
+            queryClient.invalidateQueries({ queryKey: [...projectQueryKey.value, projectId.value] });
+        }
+    };
+    const setQueryData = (newData: any) => {
+        queryClient.setQueryData([...projectQueryKey.value, projectId.value], newData);
+    };
+
+    return {
+        data, isLoading, error, invalidateQuery, setQueryData,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/queries/use-workspace-users-query.ts b/apps/web/src/services/project/v2/composables/queries/use-workspace-users-query.ts
new file mode 100644
index 0000000000..20009ca76b
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/queries/use-workspace-users-query.ts
@@ -0,0 +1,29 @@
+import type { Ref } from 'vue';
+
+import { useQuery } from '@tanstack/vue-query';
+
+import { useWorkspaceUserApi } from '@/api-clients/identity/workspace-user/composables/use-workspace-user-api';
+
+
+export const useWorkspaceUsersQuery = (ops?: {
+  enabled?: Ref<boolean>|boolean
+ }) => {
+    const { enabled } = ops ?? {};
+    const { workspaceUserAPI, workspaceUserListQueryKey } = useWorkspaceUserApi();
+    const { data, error } = useQuery({
+        queryKey: workspaceUserListQueryKey,
+        queryFn: async () => {
+            const res = await workspaceUserAPI.list({});
+            return res.results ?? [];
+        },
+        enabled,
+        staleTime: 1000 * 60 * 20, // 10 minutes
+        gcTime: 1000 * 60 * 10, // 10 minutes
+    });
+
+
+    return {
+        data,
+        error,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/use-project-or-group-id.ts b/apps/web/src/services/project/v2/composables/use-project-or-group-id.ts
new file mode 100644
index 0000000000..ce2026f890
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-project-or-group-id.ts
@@ -0,0 +1,20 @@
+import { computed, type Ref } from 'vue';
+
+export const useProjectOrGroupId = (projectGroupOrProjectId: Ref<string|undefined>) => {
+    const projectGroupId = computed(() => {
+        if (projectGroupOrProjectId.value && projectGroupOrProjectId.value.startsWith('pg-')) {
+            return projectGroupOrProjectId.value;
+        }
+        return undefined;
+    });
+    const projectId = computed(() => {
+        if (projectGroupOrProjectId.value && projectGroupOrProjectId.value.startsWith('project-')) {
+            return projectGroupOrProjectId.value;
+        }
+        return undefined;
+    });
+    return {
+        projectGroupId,
+        projectId,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/use-project-starred-tree.ts b/apps/web/src/services/project/v2/composables/use-project-starred-tree.ts
new file mode 100644
index 0000000000..e588abe8af
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-project-starred-tree.ts
@@ -0,0 +1,39 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import type { TreeNodeIcon, TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
+
+import { indigo } from '@/styles/colors';
+
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+export const useProjectStarredTree = ({ favoriteItems }: { favoriteItems: Ref<FavoriteItem[]>}) => {
+    const projectFavoriteItems = computed(() => favoriteItems.value.filter((favoriteMenu) => {
+        if (favoriteMenu.itemType === FAVORITE_TYPE.PROJECT) return true;
+        if (favoriteMenu.itemType === FAVORITE_TYPE.PROJECT_GROUP) return true;
+        return false;
+    }));
+    const projectIcon: TreeNodeIcon = 'ic_project-filled';
+    const projectGroupIcon: TreeNodeIcon = { iconName: 'ic_folder-filled', iconColor: indigo[500] };
+    const predicate: TreeNodeRoutePredicate = () => false;
+    const starredItems = computed<LSBItemProps[]>(() => projectFavoriteItems.value.map((item) => ({
+        id: item.itemId,
+        name: item.label || item.name || '',
+        icon: item.itemType === FAVORITE_TYPE.PROJECT ? projectIcon : projectGroupIcon,
+        link: {
+            to: {
+                name: PROJECT_ROUTE_V2._NAME,
+                params: { projectGroupOrProjectId: item.itemId },
+            },
+            predicate,
+        },
+        favoriteOptions: { type: item.itemType, id: item.itemId },
+    })));
+    return {
+        starredItems,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/use-user-info.ts b/apps/web/src/services/project/v2/composables/use-user-info.ts
new file mode 100644
index 0000000000..1fb363f77b
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-user-info.ts
@@ -0,0 +1,39 @@
+import { computed } from 'vue';
+
+import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
+import DomainAdminImage from '@/assets/images/role/img_avatar_admin.png';
+import UserImage from '@/assets/images/role/img_avatar_no-role.png';
+import SystemAdminImage from '@/assets/images/role/img_avatar_system-admin.png';
+import WorkspaceMemberImage from '@/assets/images/role/img_avatar_workspace-member.png';
+import WorkspaceOwnerImage from '@/assets/images/role/img_avatar_workspace-owner.png';
+
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+
+export const useUserInfo = () => {
+    const userReferenceStore = useUserReferenceStore();
+    const userItems = computed(() => userReferenceStore.getters.userItems);
+    const ROLE_INFO_MAP = {
+        [ROLE_TYPE.SYSTEM_ADMIN]: { icon: SystemAdminImage, label: 'System Admin' },
+        [ROLE_TYPE.DOMAIN_ADMIN]: { icon: DomainAdminImage, label: 'Domain Admin' },
+        [ROLE_TYPE.WORKSPACE_OWNER]: { icon: WorkspaceOwnerImage, label: 'Workspace Owner' },
+        [ROLE_TYPE.WORKSPACE_MEMBER]: { icon: WorkspaceMemberImage, label: 'Workspace Member' },
+        [ROLE_TYPE.USER]: { icon: UserImage, label: 'User' },
+    } as const;
+    const getUserIcon = (userId: string): string => {
+        const roleType = userItems[userId]?.data.roleInfo.role_type;
+        return ROLE_INFO_MAP[roleType]?.icon;
+    };
+    const getUserName = (userId: string): string|undefined => userItems[userId]?.name;
+    const getUserLabel = (userId: string): string|undefined => userItems[userId]?.label;
+    const getUserRole = (userId: string): string|undefined => {
+        const roleType = userItems[userId]?.data.roleInfo.role_type;
+        return ROLE_INFO_MAP[roleType]?.label;
+    };
+
+    return {
+        getUserIcon,
+        getUserName,
+        getUserLabel,
+        getUserRole,
+    };
+};
diff --git a/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue b/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue
index 847cec57ff..e6b477afbc 100644
--- a/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue
@@ -4,24 +4,15 @@ import {
 } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
-import { isEmpty } from 'lodash';
-
 import {
     PDataLoader,
 } from '@cloudforet/mirinae';
-import type { Route } from '@cloudforet/mirinae/types/navigation/breadcrumbs/type';
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
 import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
 import { i18n } from '@/translations';
 
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 import { useDashboardStore } from '@/store/dashboard/dashboard-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceItem, ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import { useUserStore } from '@/store/user/user-store';
-
-import { referenceRouter } from '@/lib/reference/referenceRouter';
 
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
@@ -36,16 +27,17 @@ import ProjectTabs from '@/services/project/v2/components/ProjectTabs.vue';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 interface Props {
-    id?: string;
+    projectGroupId?: string;
+    projectId?: string;
 }
 const props = defineProps<Props>();
+
+
+
 const route = useRoute();
 
 const gnbStore = useGnbStore();
-const allReferenceStore = useAllReferenceStore();
-const userWorkspaceStore = useUserWorkspaceStore();
 const dashboardStore = useDashboardStore();
-const userStore = useUserStore();
 
 /* Query */
 const {
@@ -55,34 +47,14 @@ const {
     publicFolderList,
 } = useDashboardFolderQuery();
 
-const storeState = reactive({
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
-    language: computed<string|undefined>(() => userStore.state.language),
-});
 const state = reactive({
     // TODO: need to be updated by real data
     item: computed<ProjectModel|undefined>(() => undefined),
-    projectGroupId: computed<string|undefined>(() => state.item?.project_group_id),
-    projectGroupInfo: computed<ProjectGroupReferenceItem>(() => storeState.projectGroups?.[state.projectGroupId] ?? {}),
-    pageNavigation: computed<Route[]>(() => {
-        const results: Route[] = [
-            { name: i18n.t('MENU.PROJECT') as string, to: { name: PROJECT_ROUTE_V2._NAME } },
-        ];
-        if (!isEmpty(state.projectGroupInfo)) {
-            results.push({
-                name: state.projectGroupInfo.name,
-                to: referenceRouter(state.projectGroupId, { resource_type: 'identity.ProjectGroup' }),
-            });
-        }
-        results.push({ name: state.item?.name });
-        return results;
-    }),
     projectGroupMoveModalVisible: false,
     favoriteOptions: computed<FavoriteOptions>(() => ({
         type: FAVORITE_TYPE.PROJECT,
         // TODO: need to be updated by real data
-        id: '',
+        projectId: '',
     })),
 });
 const singleItemTabState = reactive({
@@ -165,9 +137,6 @@ watch(() => route.name, (routeName) => {
 // ], ([id, globalGrantLoading]) => {
 //     if (!globalGrantLoading) projectDetailPageStore.setProjectId(id);
 // }, { immediate: true });
-watch([() => singleItemTabState.activeTab, () => state.item], () => {
-    gnbStore.setBreadcrumbs(state.pageNavigation);
-});
 // TODO: check if it is needed
 // watch(() => projectDetailPageState.projectId, (projectId) => {
 //     gnbStore.setId(projectId);
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index 692183a69f..08a7487616 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -1,227 +1,98 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core';
 import {
-    computed, onUnmounted, reactive, ref, watch,
+    computed, onUnmounted, reactive, ref, toRef,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
-import {
-    PHeading, PButton, PContextMenu, PIconButton, PHeadingLayout,
-} from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import { i18n } from '@/translations';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-import { useUserStore } from '@/store/user/user-store';
-
-import { MENU_ID } from '@/lib/menu/config';
-
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-
 import { indigo, peacock } from '@/styles/colors';
 
-import ProjectGroupMemberManagementModal from '@/services/project/v-shared/components/ProjectGroupMemberManagementModal.vue';
-import ProjectMainProjectGroupMoveModal from '@/services/project/v-shared/components/ProjectMainProjectGroupMoveModal.vue';
-import { useProjectPageStore } from '@/services/project/v-shared/stores/project-page-store';
-import { useProjectTreeStore } from '@/services/project/v-shared/stores/project-tree-store';
-import ProjectMain from '@/services/project/v2/components/ProjectMain.vue';
-import ProjectMainDeleteModal from '@/services/project/v2/components/ProjectMainDeleteModal.vue';
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import ProjectGroupMemberManagementModal from '@/services/project/v1/components/ProjectGroupMemberManagementModal.vue';
+import ProjectAndGroupListPanel from '@/services/project/v2/components/ProjectAndGroupListPanel.vue';
+import ProjectDeleteModal from '@/services/project/v2/components/ProjectDeleteModal.vue';
+import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue';
+import ProjectMemberInviteModal from '@/services/project/v2/components/ProjectMemberInviteModal.vue';
+import ProjectMoveModal from '@/services/project/v2/components/ProjectMoveModal.vue';
+import ProjectTagsModal from '@/services/project/v2/components/ProjectTagsModal.vue';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const props = defineProps<{
+    projectGroupOrProjectId?: string;
+}>();
+
+/* project or group */
+const { projectGroupId, projectId } = useProjectOrGroupId(toRef(props, 'projectGroupOrProjectId'));
+const { data: projectGroup } = useProjectGroupQuery({
+    projectGroupId,
+});
 
 
-const gnbStore = useGnbStore();
-// const gnbGetters = gnbStore.getters;
-const allReferenceStore = useAllReferenceStore();
-const userStore = useUserStore();
-const projectTreeStore = useProjectTreeStore();
-const projectPageStore = useProjectPageStore();
-const projectPageState = projectPageStore.state;
+/* modals */
+const projectPageModelStore = useProjectPageModalStore();
 
 const menuRef = ref<any|null>(null);
-const targetRef = ref<HTMLElement | null>(null);
-const route = useRoute();
-
-const storeState = reactive({
-    userId: computed<string|undefined>(() => userStore.state.userId),
-    groupName: computed(() => storeState.projectGroups[state.currentProjectGroupId]?.name),
-    projects: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-});
 
 const state = reactive({
-    currentProjectGroupId: computed(() => route.params.projectGroupId),
     createMenuVisible: false,
     createDropdownMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
         {
             name: 'project',
-            label: i18n.t('PROJECT.LANDING.PROJECT') as string,
+            label: i18n.t('PROJECT.LANDING.PROJECT'),
             icon: 'ic_document-filled',
             iconColor: peacock[600],
         },
         {
             name: 'projectGroup',
-            label: i18n.t('PROJECT.LANDING.PROJECT_GROUP') as string,
+            label: i18n.t('PROJECT.LANDING.PROJECT_GROUP'),
             icon: 'ic_folder-filled',
             iconColor: indigo[500],
         },
     ])),
     projectGroupModalVisible: false,
-    favoriteOptions: computed<FavoriteOptions>(() => ({
-        type: route.params.projectGroupId ? FAVORITE_TYPE.PROJECT_GROUP : FAVORITE_TYPE.MENU,
-        id: route.params.projectGroupId ? state.currentProjectGroupId : MENU_ID.PROJECT,
-    })),
     projectGroupMemberManagementModalVisible: false,
-    projectGroupMemberCount: computed<number|undefined>(() => storeState.projectGroups?.[state.currentProjectGroupIds]?.data.users?.length),
+    projectGroupMemberCount: computed<number|undefined>(() => projectGroup.value?.users?.length),
 });
 
 onClickOutside(menuRef, () => {
     state.createMenuVisible = false;
 });
 
-/* Event */
-const handleClickProjectGroupEditButton = () => {
-    projectPageStore.setProjectGroupFormUpdateMode(true);
-    projectPageStore.setProjectGroupFormVisible(true);
-};
-const handleClickProjectGroupDeleteButton = () => {
-    projectPageStore.setProjectDeleteModalVisible(true);
-};
-const handleOpenProjectGroupMoveModal = () => {
-    projectPageStore.setProjectGroupMoveModalVisible(true);
-};
-
-/* Handling Forms */
-const handleClickAddProjectGroupMember = () => {
-    state.projectGroupMemberManagementModalVisible = true;
-};
-const handleClickCreateButton = () => {
-    state.createMenuVisible = !state.createMenuVisible;
-};
-const handleSelectCreateMenu = (item: SelectDropdownMenuItem) => {
-    projectPageStore.setCurrentSelectedProjectGroupId(state.currentProjectGroupId);
-    if (item.name === 'project') {
-        projectPageStore.setProjectFormModalVisible(true);
-    } else if (item.name === 'projectGroup') {
-        projectPageStore.setProjectGroupFormUpdateMode(false);
-        projectPageStore.setProjectGroupFormVisible(true);
-    }
-};
-const handleUpdateProjectGroupMoveModal = (visible: boolean) => {
-    projectPageStore.setProjectGroupMoveModalVisible(visible);
-    if (projectPageState.currentSelectedProjectGroupId && !visible) {
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-    }
-    if (projectPageState.currentSelectedProjectId && !visible) {
-        projectPageStore.setCurrentSelectedProjectId(undefined);
-    }
-};
-const handleUpdateDeleteModalVisible = (visible: boolean) => {
-    projectPageStore.setProjectDeleteModalVisible(visible);
-    if (projectPageState.currentSelectedProjectGroupId && !visible) {
-        projectPageStore.setCurrentSelectedProjectGroupId(undefined);
-    }
-    if (projectPageState.currentSelectedProjectId && !visible) {
-        projectPageStore.setCurrentSelectedProjectId(undefined);
-    }
+const handleMoved = () => {
+    // projectTreeStore.refreshProjectTree();
 };
 
 const handleRefreshTree = () => {
-    projectTreeStore.refreshProjectTree();
+    // projectTreeStore.refreshProjectTree();
 };
 
-watch(() => state.favoriteOptions, (favoriteOptions) => {
-    gnbStore.setFavoriteItemId(favoriteOptions);
-    if (!route.params.projectGroupId) {
-        gnbStore.setBreadcrumbs([]);
-    }
-}, { immediate: true });
 
 onUnmounted(() => {
-    projectTreeStore.disposeProjectTree();
+    // projectTreeStore.disposeProjectTree();
 });
 </script>
 
 <template>
     <div class="page-wrapper">
-        <p-heading-layout class="mb-6">
-            <template #heading>
-                <p-heading :title="state.currentProjectGroupId ? storeState.projectGroups[state.currentProjectGroupId]?.name : $t('PROJECT.LANDING.ALL_PROJECTS')">
-                    <template #title-right-extra>
-                        <div v-if="state.currentProjectGroupId"
-                             class="title-right-button-wrapper"
-                        >
-                            <template v-if="projectPageState.isWorkspaceOwner">
-                                <p-icon-button name="ic_edit-text"
-                                               style-type="transparent"
-                                               @click="handleClickProjectGroupEditButton"
-                                />
-                                <p-icon-button name="ic_move"
-                                               style-type="transparent"
-                                               @click="handleOpenProjectGroupMoveModal"
-                                />
-                                <p-icon-button name="ic_delete"
-                                               style-type="transparent"
-                                               @click="handleClickProjectGroupDeleteButton"
-                                />
-                            </template>
-                        </div>
-                    </template>
-                </p-heading>
-            </template>
-            <template #extra>
-                <p-button v-if="state.currentProjectGroupId"
-                          style-type="tertiary"
-                          icon-left="ic_member"
-                          @click="handleClickAddProjectGroupMember"
-                >
-                    <span>{{ $t('PROJECT.LANDING.GROUP_MEMBER') }}</span>
-                    <span v-if="state.projectGroupMemberCount"
-                          class="pl-1"
-                    >({{ state.projectGroupMemberCount }})</span>
-                </p-button>
-                <div v-if="projectPageState.isWorkspaceOwner"
-                     class="create-button-wrapper"
-                >
-                    <p-button ref="targetRef"
-                              icon-left="ic_plus_bold"
-                              @click="handleClickCreateButton"
-                    >
-                        {{ $t('PROJECT.LANDING.CREATE') }}
-                    </p-button>
-                    <p-context-menu v-show="state.createMenuVisible"
-                                    ref="menuRef"
-                                    class="create-context-menu"
-                                    no-select-indication
-                                    :menu="state.createDropdownMenuItems"
-                                    @select="handleSelectCreateMenu"
-                    />
-                </div>
-            </template>
-        </p-heading-layout>
-        <project-main />
-        <project-group-member-management-modal v-if="state.projectGroupMemberManagementModalVisible"
-                                               :visible.sync="state.projectGroupMemberManagementModalVisible"
-                                               :project-group-id="state.currentProjectGroupId"
+        <project-header :project-id="projectId"
+                        :project-group-id="projectId"
         />
-        <project-main-delete-modal v-if="projectPageState.projectDeleteModalVisible"
-                                   :visible="projectPageState.projectDeleteModalVisible"
-                                   :is-project="!!projectPageState.currentSelectedProjectId"
-                                   :target-id="projectPageState.currentSelectedProjectId || projectPageState.currentSelectedProjectGroupId || state.currentProjectGroupId"
-                                   :skip-redirect="!!projectPageState.currentSelectedProjectId || !!projectPageState.currentSelectedProjectGroupId"
-                                   @update:visible="handleUpdateDeleteModalVisible"
-                                   @confirm="handleRefreshTree"
+        <project-and-group-list-panel />
+        <project-group-member-management-modal v-if="projectGroupId && state.projectGroupMemberManagementModalVisible"
+                                               :visible.sync="state.projectGroupMemberManagementModalVisible"
+                                               :project-group-id="projectGroupId"
         />
-        <project-main-project-group-move-modal v-if="projectPageState.projectGroupMoveModalVisible"
-                                               :visible="projectPageState.projectGroupMoveModalVisible"
-                                               :is-project="!!projectPageState.currentSelectedProjectId"
-                                               :target-id="projectPageState.currentSelectedProjectId || projectPageState.currentSelectedProjectGroupId || state.currentProjectGroupId"
-                                               @update:visible="handleUpdateProjectGroupMoveModal"
-                                               @confirm="handleRefreshTree"
+        <project-delete-modal :skip-redirect="!!(projectPageModelStore.state.targetProjectGroupId && projectPageModelStore.state.targetProjectGroupId === projectGroupId)
+                                  || !!(projectPageModelStore.state.targetProjectId && projectPageModelStore.state.targetProjectId === projectId)"
+                              @confirm="handleRefreshTree"
         />
+        <project-move-modal @moved="handleMoved" />
+        <project-member-invite-modal :project-id="projectId" />
+        <project-tags-modal />
     </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
new file mode 100644
index 0000000000..1dc353dd58
--- /dev/null
+++ b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
@@ -0,0 +1,103 @@
+import { reactive } from 'vue';
+
+import { defineStore } from 'pinia';
+
+export const useProjectPageModalStore = defineStore('project-page-modal', () => {
+    const state = reactive({
+        manageMemberModalVisible: false,
+        deleteModalVisible: false,
+        moveModalVisible: false,
+        inviteMemberModalVisible: false,
+        manageTagsModalVisible: false,
+        projectFormModalVisible: false,
+        targetProjectId: '' as string|undefined,
+        targetProjectGroupId: '' as string|undefined,
+        targetType: undefined as 'project'|'projectGroup'|undefined,
+    });
+
+    const actions = {
+        // manage member
+        openProjectGroupManageMemberModal(targetProjectGroupId: string) {
+            state.targetProjectGroupId = targetProjectGroupId;
+            state.manageMemberModalVisible = true;
+        },
+        openProjectManageMemberModal(targetProjectId: string) {
+            state.targetProjectId = targetProjectId;
+            state.manageMemberModalVisible = true;
+        },
+        closeManageMemberModal() {
+            state.manageMemberModalVisible = false;
+        },
+        // delete project
+        openProjectGroupDeleteModal(targetProjectGroupId: string) {
+            state.targetProjectGroupId = targetProjectGroupId;
+            state.deleteModalVisible = true;
+        },
+        openProjectDeleteModal(targetProjectId: string) {
+            state.targetProjectId = targetProjectId;
+            state.deleteModalVisible = true;
+        },
+        closeDeleteModal() {
+            state.deleteModalVisible = false;
+        },
+        // move project
+        openProjectGroupMoveModal(targetProjectGroupId: string) {
+            state.targetProjectGroupId = targetProjectGroupId;
+            state.moveModalVisible = true;
+        },
+        openProjectMoveModal(targetProjectId: string) {
+            state.targetProjectId = targetProjectId;
+            state.moveModalVisible = true;
+        },
+        closeMoveModal() {
+            state.moveModalVisible = false;
+        },
+        // invite member
+        openProjectGroupInviteMemberModal(targetProjectGroupId: string) {
+            state.targetProjectGroupId = targetProjectGroupId;
+            state.inviteMemberModalVisible = true;
+        },
+        openProjectInviteMemberModal(targetProjectId: string) {
+            state.targetProjectId = targetProjectId;
+            state.inviteMemberModalVisible = true;
+        },
+        closeInviteMemberModal() {
+            state.inviteMemberModalVisible = false;
+        },
+        // manage tags
+        openProjectGroupManageTagsModal(targetProjectGroupId: string) {
+            state.targetProjectGroupId = targetProjectGroupId;
+            state.manageTagsModalVisible = true;
+        },
+        openProjectManageTagsModal(targetProjectId: string) {
+            state.targetProjectId = targetProjectId;
+            state.manageTagsModalVisible = true;
+        },
+        closeManageTagsModal() {
+            state.manageTagsModalVisible = false;
+        },
+        // form
+        openCreateProjectFormModal(targetType: 'project'|'projectGroup', targetProjectGroupId?: string) {
+            state.targetType = targetType;
+            state.targetProjectGroupId = targetProjectGroupId;
+            state.projectFormModalVisible = true;
+        },
+        openEditProjectFormModal(targetProjectId: string) {
+            state.targetProjectId = targetProjectId;
+            state.projectFormModalVisible = true;
+        },
+        closeProjectFormModal() {
+            state.projectFormModalVisible = false;
+        },
+        // overal
+        resetTarget() {
+            state.targetProjectId = '';
+            state.targetProjectGroupId = '';
+        },
+    };
+
+    return {
+        state,
+        ...actions,
+    };
+});

From c668ba28c8651045ec69f9c1e430d0034fbdd830 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:54 +0900
Subject: [PATCH 08/22] feat: add V2 feature schema for project menu visibility

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 apps/web/src/lib/config/global-config/feature-schema.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/web/src/lib/config/global-config/feature-schema.ts b/apps/web/src/lib/config/global-config/feature-schema.ts
index 2ddd0251b7..15999061e8 100644
--- a/apps/web/src/lib/config/global-config/feature-schema.ts
+++ b/apps/web/src/lib/config/global-config/feature-schema.ts
@@ -17,6 +17,9 @@ export const initialFeatureSchema: FeatureSchemaType = {
                 visibleAlertTabAtDetail: true,
             },
         },
+        V2: {
+            menu: { [MENU_ID.PROJECT]: true },
+        },
     },
     [FEATURES.SERVICE_ACCOUNT]: {
         currentVersion: 'V1',

From 78a24ae34d91737348d51ea95cb1cc4fab9044d0 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:55 +0900
Subject: [PATCH 09/22] feat: add empty state handling in LSBStarredTree
 component

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../navigations/new-lsb/LSBStarredTree.vue    | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
index 390cc247dd..416a7a8ac2 100644
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PTreeNode } from '@cloudforet/mirinae';
+import { PTreeNode, PEmpty } from '@cloudforet/mirinae';
 
 import LSBItem from '@/common/modules/navigations/new-lsb/LSBItem.vue';
 import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
@@ -26,16 +26,21 @@ const props = defineProps<{
         </template>
         <span class="font-bold">{{ $t('COMMON.STARRED') }}</span>
         <template #children>
-            <l-s-b-item v-for="item in props.items"
-                        :id="item.id"
-                        :key="item.id"
-                        :name="item.name"
-                        display-type="tree"
-                        :icon="item.icon"
-                        :link="item.link"
-                        :favorite-options="item.favoriteOptions"
-                        favorite-visibility="hovered-only"
-            />
+            <template v-if="props.items.length > 0">
+                <l-s-b-item v-for="item in props.items"
+                            :id="item.id"
+                            :key="item.id"
+                            :name="item.name"
+                            display-type="tree"
+                            :icon="item.icon"
+                            :link="item.link"
+                            :favorite-options="item.favoriteOptions"
+                            favorite-visibility="hovered-only"
+                />
+            </template>
+            <p-empty v-else>
+                {{ $t('COMMON.STARRED_NO_DATA') }}
+            </p-empty>
         </template>
     </p-tree-node>
 </template>

From 43adc702302e9fc799cd5e09d68cc18f98585e08 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:56 +0900
Subject: [PATCH 10/22] feat: add selected paths functionality and improve
 project tree navigation

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../services/project/v2/ProjectContainer.vue  | 14 +++-
 .../src/services/project/v2/ProjectLSB.vue    | 67 ++++++++++---------
 .../v2/components/ProjectLSBSearch.vue        | 15 ++++-
 .../project/v2/components/ProjectLSBTree.vue  | 29 +++++++-
 .../project/v2/pages/ProjectMainPage.vue      |  2 +-
 5 files changed, 87 insertions(+), 40 deletions(-)

diff --git a/apps/web/src/services/project/v2/ProjectContainer.vue b/apps/web/src/services/project/v2/ProjectContainer.vue
index 555e8b5e69..ceb2cae8c4 100644
--- a/apps/web/src/services/project/v2/ProjectContainer.vue
+++ b/apps/web/src/services/project/v2/ProjectContainer.vue
@@ -32,8 +32,8 @@ const projectGroupMap = computed<ProjectGroupReferenceMap>(() => projectGroupRef
 const route = useRoute();
 const { projectGroupId, projectId } = useProjectOrGroupId(computed(() => route.params.projectGroupOrProjectId));
 
-/* breadcrumbs */
-const gnbStore = useGnbStore();
+
+/* selected paths */
 const parentIds = computed<string[]>(() => {
     const pids: string[] = [];
     let currentGroupId: string|undefined;
@@ -45,6 +45,14 @@ const parentIds = computed<string[]>(() => {
     }
     return pids;
 });
+const selectedPaths = computed<string[]>(() => {
+    const paths = parentIds.value.slice();
+    if (projectId.value) paths.push(projectId.value);
+    return paths;
+});
+
+/* breadcrumbs */
+const gnbStore = useGnbStore();
 const projectGroupBreadcrumbs = computed<Breadcrumb[]>(() => {
     const breadcrumbs: Breadcrumb[] = [
         { name: i18n.t('MENU.PROJECT'), to: { name: PROJECT_ROUTE_V2._NAME } },
@@ -102,7 +110,7 @@ onUnmounted(() => {
     <fragment>
         <vertical-page-layout v-if="route.meta?.lsbVisible">
             <template #sidebar>
-                <project-l-s-b />
+                <project-l-s-b :selected-paths="selectedPaths" />
             </template>
             <template #default>
                 <router-view />
diff --git a/apps/web/src/services/project/v2/ProjectLSB.vue b/apps/web/src/services/project/v2/ProjectLSB.vue
index 23b4368ac9..6a397a2354 100644
--- a/apps/web/src/services/project/v2/ProjectLSB.vue
+++ b/apps/web/src/services/project/v2/ProjectLSB.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components';
-import { computed, ref } from 'vue';
+import type Vue from 'vue';
+import {
+    computed, nextTick, ref, watch,
+} from 'vue';
 
 import {
     PButton, PContextMenu, useContextMenuController,
@@ -25,6 +28,9 @@ import { useProjectStarredTree } from '@/services/project/v2/composables/use-pro
 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<{
+    selectedPaths?: string[];
+}>();
 
 /* starred */
 const favoriteStore = useFavoriteStore();
@@ -71,6 +77,31 @@ const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupO
 /* search */
 const projectKeyword = ref<string>('');
 
+/* auto scroll */
+const treeRef = ref<Vue | null>(null);
+
+watch([() => props.selectedPaths, treeRef], ([paths, treeComponent]) => {
+    if (!paths?.length || !treeComponent?.$el) return;
+
+    nextTick(() => {
+        const selectedNode = treeComponent.$el.querySelector(`[data-node-id="${paths[paths.length - 1]}"]`);
+        if (selectedNode) {
+            const rect = selectedNode.getBoundingClientRect();
+            const isVisible = (
+                rect.top >= 0
+                && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+            );
+
+            if (!isVisible) {
+                selectedNode.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center',
+                });
+            }
+        }
+    });
+});
+
 </script>
 
 <template>
@@ -116,36 +147,10 @@ const projectKeyword = ref<string>('');
         <project-l-s-b-search :keyword="projectKeyword"
                               @update:keyword="projectKeyword = $event"
         />
-        <project-l-s-b-tree v-if="!projectKeyword.length" />
+        <project-l-s-b-tree v-if="!projectKeyword.length"
+                            ref="treeRef"
+                            :selected-paths="props.selectedPaths"
+        />
     </l-s-b-container>
 </template>
 
-<style scoped lang="postcss">
-.project-l-s-b {
-    .create-button-wrapper {
-        @apply relative inline-block;
-
-        .create-context-menu {
-            @apply absolute;
-            top: 100%;
-            right: 0;
-            z-index: 10;
-            width: max-content;
-        }
-    }
-
-    .project-search {
-        @apply w-full;
-        margin-bottom: 0.5rem;
-    }
-    .search-result-text {
-        @apply overflow-hidden whitespace-nowrap;
-        text-overflow: ellipsis;
-    }
-    .search-empty {
-        @apply text-paragraph-md;
-        white-space: pre;
-        margin-top: 0.75rem;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue b/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
index 441df9beac..2a2f5cdccf 100644
--- a/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
+++ b/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { getTextHighlightRegex, PTextInput, PEmpty } from '@cloudforet/mirinae';
+import {
+    getTextHighlightRegex, PTextInput, PEmpty, PTextHighlighting,
+} from '@cloudforet/mirinae';
+import type { TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
 
 import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
 
@@ -21,6 +24,7 @@ const projectFilteredByKeyword = computed(() => {
     const projectItems = Object.values(projectReferenceStore.getters.projectItems);
     return projectItems.filter((project) => getTextHighlightRegex(props.keyword).test(project.name));
 });
+const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupOrProjectId === curr.params.projectGroupOrProjectId;
 </script>
 
 <template>
@@ -40,12 +44,17 @@ const projectFilteredByKeyword = computed(() => {
                                 to: {
                                     name: PROJECT_ROUTE_V2._NAME,
                                     params: { projectGroupOrProjectId: project.key }
-                                }
+                                },
+                                predicate
                             }"
                             :favorite-options="{ type: FAVORITE_TYPE.PROJECT, id: project.key }"
                             display-type="list"
                             icon="ic_project-filled"
-                />
+                >
+                    <p-text-highlighting :text="project.name"
+                                         :term="props.keyword"
+                    />
+                </l-s-b-item>
             </template>
             <p-empty v-else
                      class="text-paragraph-md whitespace-pre mt-3"
diff --git a/apps/web/src/services/project/v2/components/ProjectLSBTree.vue b/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
index fdb53af49c..86c115fed9 100644
--- a/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
+++ b/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
@@ -10,6 +10,8 @@ export default defineComponent({
 /* eslint-disable import/first */
 import {
     computed,
+    ref,
+    watch,
 // eslint-disable-next-line import/no-duplicates
 } from 'vue';
 
@@ -39,11 +41,11 @@ interface ProjectGroupData extends ProjectGroupReferenceItem {
 const props = withDefaults(defineProps<{
     parentGroupId?: string;
     depth?: number;
-    // selectedId?: string;
+    selectedPaths?: string[];
 }>(), {
     parentGroupId: undefined,
     depth: 0,
-    // selectedId: undefined,
+    selectedPaths: () => [],
 });
 
 
@@ -82,6 +84,25 @@ const projectIcon: TreeNodeIcon = 'ic_project-filled';
 /* link */
 const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupOrProjectId === curr.params.projectGroupOrProjectId;
 
+/* expanded */
+const expandedMap = ref<Record<string, boolean>>({});
+const getExpanded = (key: string) => props.selectedPaths.includes(key) && props.depth < props.selectedPaths.length - 1;
+watch(items, (nodes) => {
+    const map = {};
+    nodes.forEach((node) => {
+        map[node.key] = expandedMap.value[node.key] ?? getExpanded(node.key);
+    });
+    expandedMap.value = map;
+});
+watch(() => props.selectedPaths, (paths) => {
+    const map = { ...expandedMap.value };
+    paths.forEach((path, index) => {
+        if (index < paths.length - 1) {
+            map[path] = true;
+        }
+    });
+    expandedMap.value = map;
+}, { immediate: true });
 </script>
 
 <template>
@@ -89,6 +110,7 @@ const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupO
         <p-tree-node v-for="item in items"
                      :id="item.key"
                      :key="item.key"
+                     :data-node-id="item.key"
                      :name="item.name"
                      :depth="props.depth"
                      :selectable="true"
@@ -104,6 +126,8 @@ const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupO
                      :icon="item.type === 'PROJECT_GROUP' ? projectGroupIcon : projectIcon"
                      display-type="tree"
                      :has-children="item.type === 'PROJECT_GROUP'"
+                     :expanded="expandedMap[item.key]"
+                     @update:expanded="expandedMap[item.key] = $event"
         >
             <template #action="{ id, hasChildren }">
                 <favorite-button :item-id="id"
@@ -115,6 +139,7 @@ const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupO
             <template #children="node">
                 <project-l-s-b-tree :parent-group-id="node.id"
                                     :depth="node.depth + 1"
+                                    :selected-paths="props.selectedPaths"
                 />
             </template>
         </p-tree-node>
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index 08a7487616..56de9ef782 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -79,7 +79,7 @@ onUnmounted(() => {
 <template>
     <div class="page-wrapper">
         <project-header :project-id="projectId"
-                        :project-group-id="projectId"
+                        :project-group-id="projectGroupId"
         />
         <project-and-group-list-panel />
         <project-group-member-management-modal v-if="projectGroupId && state.projectGroupMemberManagementModalVisible"

From fdddaf67ef20c7852a7c25d2fcede995e8c96e04 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:57 +0900
Subject: [PATCH 11/22] feat: refactor project management modals and queries

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../queries/use-project-group-query.ts        |  20 +-
 .../src/services/project/v2/ProjectLSB.vue    |   7 +-
 .../v2/components/ProjectDeleteModal.vue      |  22 +-
 .../ProjectGroupMemberManagementModal.vue     | 267 +++++++++++++++
 .../project/v2/components/ProjectHeader.vue   | 315 +++++-------------
 .../components/ProjectMemberInviteModal.vue   |   4 +-
 .../ProjectMemberManagementModal.vue          |  20 +-
 .../v2/components/ProjectMoveModal.vue        |   4 +-
 .../v2/components/ProjectTagsModal.vue        |   6 +-
 .../composables/queries/use-project-query.ts  |   4 +-
 .../v2/composables/use-project-icons.ts       |  12 +
 .../v2/composables/use-role-formatters.ts     |  23 ++
 .../project/v2/pages/ProjectMainPage.vue      |  13 +-
 .../v2/stores/project-page-modal-store.ts     |  58 ++--
 14 files changed, 489 insertions(+), 286 deletions(-)
 create mode 100644 apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue
 create mode 100644 apps/web/src/services/project/v2/composables/use-project-icons.ts
 create mode 100644 apps/web/src/services/project/v2/composables/use-role-formatters.ts

diff --git a/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts b/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
index 185fa596a7..2c782fb4d3 100644
--- a/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
+++ b/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
@@ -1,8 +1,9 @@
 import { computed, type Ref } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
 
 import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
 
 export const useProjectGroupQuery = ({
     projectGroupId,
@@ -12,8 +13,9 @@ export const useProjectGroupQuery = ({
   enabled?: Ref<boolean>;
 }) => {
     const { projectGroupAPI, projectGroupQueryKey } = useProjectGroupApi();
-    const { data, isLoading, error } = useQuery({
-        queryKey: computed(() => [...projectGroupQueryKey.value, projectGroupId.value]),
+    const queryKey = computed(() => [...projectGroupQueryKey.value, projectGroupId.value]);
+    const projectGroupQuery = useQuery({
+        queryKey,
         queryFn: () => projectGroupAPI.get({ project_group_id: projectGroupId.value as string }),
         enabled: computed(() => {
             if (!projectGroupId.value) return false;
@@ -23,7 +25,17 @@ export const useProjectGroupQuery = ({
         gcTime: 1000 * 60 * 1, // 1 minutes
     });
 
+    const queryClient = useQueryClient();
+    const setQueryData = (newData: ProjectGroupModel) => {
+        queryClient.setQueryData(queryKey.value, newData);
+    };
+    const invalidateQuery = () => {
+        queryClient.invalidateQueries({ queryKey: queryKey.value });
+    };
+
     return {
-        data, isLoading, error,
+        ...projectGroupQuery,
+        setQueryData,
+        invalidateQuery,
     };
 };
diff --git a/apps/web/src/services/project/v2/ProjectLSB.vue b/apps/web/src/services/project/v2/ProjectLSB.vue
index 6a397a2354..1496ad5adb 100644
--- a/apps/web/src/services/project/v2/ProjectLSB.vue
+++ b/apps/web/src/services/project/v2/ProjectLSB.vue
@@ -64,9 +64,9 @@ const { visibleMenu, toggleContextMenu, hideContextMenu } = useContextMenuContro
 });
 const handleSelectCreateMenu = (item: SelectDropdownMenuItem) => {
     if (item.name === 'project') {
-        projectPageModalStore.openCreateProjectFormModal('project');
+        projectPageModalStore.openCreateProjectFormModal();
     } else if (item.name === 'projectGroup') {
-        projectPageModalStore.openCreateProjectFormModal('projectGroup');
+        projectPageModalStore.openCreateProjectGroupFormModal();
     }
     hideContextMenu();
 };
@@ -127,13 +127,14 @@ watch([() => props.selectedPaths, treeRef], ([paths, treeComponent]) => {
                           size="sm"
                           style-type="tertiary"
                           class="cursor-pointer"
-                          @click="toggleContextMenu"
+                          @click.stop.prevent="toggleContextMenu"
                 >
                     {{ $t('COMMON.BUTTONS.CREATE') }}
                 </p-button>
                 <p-context-menu v-show="visibleMenu"
                                 ref="contextMenuRef"
                                 v-on-click-outside="hideContextMenu"
+                                class="z-10"
                                 no-select-indication
                                 :menu="createDropdownMenuItems"
                                 @select="handleSelectCreateMenu"
diff --git a/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
index 9904b73f15..88d7c46d26 100644
--- a/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
@@ -43,8 +43,8 @@ const recentStore = useRecentStore();
 
 const state = reactive({
     currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
-    title: computed(() => (projectPageModelStore.state.targetProjectId ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_TITLE') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE'))),
-    content: computed(() => (projectPageModelStore.state.targetProjectId ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_CONTENT') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.CONTENT'))),
+    title: computed(() => (projectPageModelStore.state.targetId ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_TITLE') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE'))),
+    content: computed(() => (projectPageModelStore.state.targetId ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_CONTENT') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.CONTENT'))),
     loading: false,
 });
 
@@ -52,20 +52,18 @@ const handleConfirmDelete = async () => {
     if (state.loading) return;
     state.loading = true;
     try {
-        if (projectPageModelStore.state.targetProjectId) {
-            await deleteProject(projectPageModelStore.state.targetProjectId);
-        } else if (projectPageModelStore.state.targetProjectGroupId) {
-            await deleteProjectGroup(projectPageModelStore.state.targetProjectGroupId);
+        if (!projectPageModelStore.state.targetId) throw new Error('No project or project group id');
+        if (projectPageModelStore.state.targetType === 'project') {
+            await deleteProject(projectPageModelStore.state.targetId);
         } else {
-            throw new Error('No project or project group id');
+            await deleteProjectGroup(projectPageModelStore.state.targetId);
         }
         emit('confirm');
     } catch (e) {
-        if (projectPageModelStore.state.targetProjectId) ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.DETAIL.ALT_E_DELETE_PROJECT'));
-        else if (projectPageModelStore.state.targetProjectGroupId) {
-            ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.LANDING.ALT_E_DELETE_PROJECT_GROUP', { action: _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE') }));
+        if (projectPageModelStore.state.targetType === 'projectGroup') {
+            ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.LANDING.ALT_E_DELETE_PROJECT_GROUP', { action: _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE') }), true);
         } else {
-            ErrorHandler.handleRequestError(e, 'Failed to delete project or project group', true);
+            ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.DETAIL.ALT_E_DELETE_PROJECT'), true);
         }
     } finally {
         state.loading = false;
@@ -126,7 +124,7 @@ const deleteProjectGroup = async (projectGroupId: string) => {
         <p>
             {{ state.content }}
         </p>
-        <i18n v-if="!projectPageModelStore.state.targetProjectId"
+        <i18n v-if="!projectPageModelStore.state.targetId"
               path="PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.DESC"
               tag="p"
               class="desc"
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue b/apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue
new file mode 100644
index 0000000000..2bf62793b5
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue
@@ -0,0 +1,267 @@
+<script lang="ts" setup>
+import {
+    computed, watch, ref,
+} from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+import { cloneDeep, difference } from 'lodash';
+
+import {
+    PButtonModal, PDataLoader, PEmpty, PFieldGroup, PTextInput, PIconButton,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import type { ProjectGroupAddUsersParameters } from '@/api-clients/identity/project-group/schema/api-verbs/add-users';
+import type { ProjectGroupRemoveUsersParameters } from '@/api-clients/identity/project-group/schema/api-verbs/remove-users';
+import { i18n } from '@/translations';
+
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+import { useUserStore } from '@/store/user/user-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import { useRoleFormatters } from '@/services/project/v2/composables/use-role-formatters';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => !!projectPageModalStore.state.manageMemberModalVisible
+    && projectPageModalStore.state.targetType === 'projectGroup'
+    && !!projectPageModalStore.state.targetId);
+
+/* mode */
+const userStore = useUserStore();
+const readonlyMode = computed<boolean>(() => userStore.state.currentRoleInfo?.roleType !== 'WORKSPACE_OWNER');
+
+/* project group users */
+const { projectGroupAPI } = useProjectGroupApi();
+const { data: projectGroup, isLoading, invalidateQuery: invalidateProjectGroupQuery } = useProjectGroupQuery({
+    projectGroupId: computed(() => projectPageModalStore.state.targetId),
+    enabled: computed(() => projectPageModalStore.state.manageMemberModalVisible
+    && projectPageModalStore.state.targetType === 'projectGroup'
+    && !!projectPageModalStore.state.targetId),
+});
+const projectGroupUserIdList = computed<string[]>(() => projectGroup.value?.users ?? []);
+
+/* dropdown - all users */
+const userReferenceStore = useUserReferenceStore();
+const searchText = ref<string>('');
+const userMenuItems = computed<SelectDropdownMenuItem[]>(() => {
+    const _items: SelectDropdownMenuItem[] = [];
+    Object.values(userReferenceStore.getters.userItems).forEach((user) => {
+        const singleItem = {
+            name: user.key,
+            label: user.label,
+            disabled: false,
+        };
+        if (selectedUserIdList.value.includes(user.key)) {
+            singleItem.disabled = true;
+        }
+        _items.push(singleItem);
+    });
+    return _items;
+});
+
+/* dropdown - user selection */
+const selectedUserIdList = ref<string[]>([]);
+watch([visible, projectGroupUserIdList], async ([v, list]) => {
+    if (v && list) {
+        selectedUserIdList.value = cloneDeep(list);
+    }
+});
+const handleUpdateSelected = (items?: SelectDropdownMenuItem[]) => {
+    if (!items?.length) return;
+    const _selected = items[0];
+    if (userReferenceStore.getters.userItems[_selected.name]) {
+        selectedUserIdList.value.unshift(_selected.name);
+        searchText.value = '';
+    }
+};
+const handleRemoveProjectGroupMember = (idx: number) => {
+    const _selectedUserItems = cloneDeep(selectedUserIdList.value);
+    _selectedUserItems.splice(idx, 1);
+    selectedUserIdList.value = _selectedUserItems;
+};
+
+/* role */
+const { getRoleImage, getRoleName } = useRoleFormatters();
+
+/* member mutations */
+const addMember = async (userIds: string[]) => {
+    if (!projectPageModalStore.state.targetId) throw new Error('Project Group ID is not defined');
+    const params: ProjectGroupAddUsersParameters = {
+        project_group_id: projectPageModalStore.state.targetId,
+        users: userIds,
+    };
+    await projectGroupAPI.addUsers(params);
+};
+const removeMember = async (userIds: string[]) => {
+    if (!projectPageModalStore.state.targetId) throw new Error('Project Group ID is not defined');
+    const params: ProjectGroupRemoveUsersParameters = {
+        project_group_id: projectPageModalStore.state.targetId,
+        users: userIds,
+    };
+    await projectGroupAPI.removeUsers(params);
+};
+const { mutate: addAndRemoveMember } = useMutation({
+    mutationFn: () => {
+        const _addedUserIds = difference(selectedUserIdList.value, projectGroupUserIdList.value ?? []);
+        const _removedUserIds = difference(projectGroupUserIdList.value, selectedUserIdList.value);
+        const promises: Promise<void>[] = [];
+        if (_addedUserIds.length) promises.push(addMember(_addedUserIds));
+        if (_removedUserIds.length) promises.push(removeMember(_removedUserIds));
+        return Promise.all(promises);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP_MEMBER'), true);
+    },
+    onSuccess: (d) => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP_MEMBER'), '');
+        if (d.length > 0) invalidateProjectGroupQuery();
+    },
+});
+
+
+/* Event */
+const handleConfirm = async () => {
+    if (!readonlyMode.value) {
+        await addAndRemoveMember();
+    }
+    projectPageModalStore.closeManageMemberModal();
+};
+
+
+
+</script>
+
+<template>
+    <p-button-modal
+        :header-title="$t('PROJECT.LANDING.PROJECT_GROUP_MEMBER')"
+        :fade="true"
+        :backdrop="true"
+        size="md"
+        :visible="visible"
+        :hide-footer-close-button="readonlyMode"
+        @close="projectPageModalStore.closeManageMemberModal"
+        @cancel="projectPageModalStore.closeManageMemberModal"
+        @closed="projectPageModalStore.resetTarget"
+        @confirm="handleConfirm"
+    >
+        <template #body>
+            <div class="project-group-management-box">
+                <div class="project-group-management-wrapper">
+                    <p-field-group v-if="!readonlyMode"
+                                   :label="$t('PROJECT.LANDING.GROUP_MEMBERS_WITH_ACCESS_TO_ALL_SUB_PROJECTS')"
+                                   required
+                    >
+                        <p-text-input :menu="userMenuItems"
+                                      :value.sync="searchText"
+                                      :selected="[]"
+                                      block
+                                      use-auto-complete
+                                      use-fixed-menu-style
+                                      :placeholder="$t('PROJECT.LANDING.ADD_GROUP_MEMBER')"
+                                      :page-size="5"
+                                      @update="handleUpdateSelected"
+                        />
+                    </p-field-group>
+                    <p-data-loader :loading="isLoading"
+                                   :data="selectedUserIdList"
+                                   class="data-loader"
+                    >
+                        <template #no-data>
+                            <p-empty show-image
+                                     :title="$t('PROJECT.LANDING.NO_GROUP_MEMBER')"
+                            />
+                        </template>
+                        <template v-for="(userId, idx) in selectedUserIdList">
+                            <div :key="`selected-member-${userId}`"
+                                 class="selected-member-wrapper"
+                            >
+                                <div class="left-part">
+                                    <img :src="getRoleImage(userId)"
+                                         alt="role-type-icon"
+                                         class="role-type-icon"
+                                    >
+                                    <div class="inline-flex">
+                                        <span>{{ userReferenceStore.getters.userItems[userId]?.label || userId }}</span>
+                                        <span v-if="projectGroupUserIdList && !projectGroupUserIdList.includes(userId)"
+                                              class="new-text"
+                                        >new</span>
+                                    </div>
+                                </div>
+                                <div class="right-part">
+                                    <span class="role-type-text">
+                                        {{ getRoleName(userId) }}
+                                    </span>
+                                    <p-icon-button v-if="!readonlyMode"
+                                                   name="ic_delete"
+                                                   size="sm"
+                                                   @click="handleRemoveProjectGroupMember(idx)"
+                                    />
+                                </div>
+                            </div>
+                        </template>
+                    </p-data-loader>
+                </div>
+            </div>
+        </template>
+        <template v-if="readonlyMode"
+                  #confirm-button
+        >
+            Done
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.project-group-management-box {
+    @apply bg-primary4 rounded-md;
+    min-height: 25rem;
+    padding: 1rem;
+    .project-group-management-wrapper {
+        @apply bg-white border border-primary3 rounded-md;
+        min-height: 23rem;
+        padding: 0.75rem;
+    }
+
+    .p-data-loader {
+        height: 15rem;
+    }
+
+    .selected-member-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0;
+        .left-part {
+            @apply text-label-md;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            .role-type-icon {
+                @apply rounded-full;
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+            .new-text {
+                @apply text-label-xs text-coral-500;
+                display: inline-flex;
+                align-items: flex-start;
+                padding-left: 0.25rem;
+            }
+        }
+        .right-part {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            .role-type-text {
+                @apply text-label-md text-gray-500;
+            }
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectHeader.vue b/apps/web/src/services/project/v2/components/ProjectHeader.vue
index 5485a3bdb9..b299280a78 100644
--- a/apps/web/src/services/project/v2/components/ProjectHeader.vue
+++ b/apps/web/src/services/project/v2/components/ProjectHeader.vue
@@ -1,23 +1,24 @@
 <script setup lang="ts">
 import {
-    computed, toRef, watch,
+    computed, ref, toRef, watch,
 } from 'vue';
+import type { TranslateResult } from 'vue-i18n';
 
-import { PI, PSkeleton } from '@cloudforet/mirinae';
+import {
+    PI, PSkeleton, PHeading, PHeadingLayout, PButton,
+} from '@cloudforet/mirinae';
 
-import type { ProjectType } from '@/api-clients/identity/project/schema/type';
+import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
 import { NoResourceError } from '@/common/composables/error/error';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import { gray, peacock } from '@/styles/colors';
-
 import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
 import ProjectActionDropdownButton from '@/services/project/v2/components/ProjectActionDropdownButton.vue';
 import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
-import { useWorkspaceUsersQuery } from '@/services/project/v2/composables/queries/use-workspace-users-query';
+import { useProjectIcons } from '@/services/project/v2/composables/use-project-icons';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
@@ -27,249 +28,115 @@ const props = defineProps<{
     projectGroupId?: string;
 }>();
 
-const appContextStore = useAppContextStore();
+
 const projectPageModalStore = useProjectPageModalStore();
 
+/* project and project group query control */
+const appContextStore = useAppContextStore();
+const enabled = computed(() => !appContextStore.getters.globalGrantLoading);
+
 /* project */
 const { data: project, error: projectError, isLoading: loadingProject } = useProjectQuery({
     projectId: toRef(props, 'projectId'),
-    enabled: computed(() => !appContextStore.getters.globalGrantLoading),
+    enabled,
 });
-watch(projectError, () => {
-    ErrorHandler.handleError(new NoResourceError({ name: PROJECT_ROUTE_V2._NAME }));
-});
-const projectType = computed<ProjectType|undefined>(() => project.value?.project_type);
 
 /* project group */
 const { data: projectGroup, error: projectGroupError, isLoading: loadingProjectGroup } = useProjectGroupQuery({
     projectGroupId: toRef(props, 'projectGroupId'),
-    enabled: computed(() => !appContextStore.getters.globalGrantLoading),
-});
-
-
-/* members */
-const { data: workspaceUsers } = useWorkspaceUsersQuery();
-const memberCount = computed(() => {
-    if (project.value && projectType.value === 'PRIVATE') {
-        return project.value.users?.length ?? 0;
-    }
-    // if(projectGroup.value) return projectGroup.value.users?.length ?? 0;
-    return workspaceUsers.value?.length ?? 0;
+    enabled,
 });
 
-/* tags */
-const tagsCount = computed(() => {
-    if (project.value?.tags) return Object.keys(project.value.tags).length ?? 0;
-    if (projectGroup.value?.tags) return Object.keys(projectGroup.value.tags).length ?? 0;
-    return 0;
+/* errors */
+watch([projectError, projectGroupError], ([prjErr, pgErr]) => {
+    if (prjErr || pgErr) ErrorHandler.handleError(new NoResourceError({ name: PROJECT_ROUTE_V2._NAME }));
 });
 
-/* Event */
-// const handleConfirmInvite = () => {
-//     fetchUserList();
-// };
-
-// const handleConfirmProjectForm = (_, data: ProjectModel) => {
-//     setProjectQueryData(data);
-// };
-
-
-// const handleRefreshTree = () => {
-//     projectTreeStore.refreshProjectTree();
-// };
-
-
-/* Watchers */
-// watch(projectId, (pid) => {
-//     gnbStore.setId(pid);
-// }, { immediate: true });
+/* title and members count */
+const hasProjectOrGroupId = computed(() => !!(props.projectId || props.projectGroupId));
+// Using ref instead of computed for title and membersCount to show the previously selected value in the UI while loading new data.
+// This prevents UI flickering during data loading.
+const title = ref<TranslateResult|undefined>(undefined);
+const membersCount = ref<number|undefined>(undefined);
+watch([project, projectGroup, hasProjectOrGroupId], ([prj, pg, exist]) => {
+    if (!exist) {
+        title.value = i18n.t('PROJECT.LANDING.ALL_PROJECTS');
+        membersCount.value = undefined;
+        return;
+    }
+    if (prj && !pg) {
+        title.value = prj.name;
+        if (prj.project_type === 'PRIVATE') {
+            membersCount.value = prj.users?.length ?? 0;
+        } else {
+            membersCount.value = undefined;
+        }
+        return;
+    }
+    if (!prj && pg) {
+        title.value = pg.name;
+        membersCount.value = pg.users?.length ?? 0;
+    }
+}, { immediate: true });
 
 /* Event Handlers */
-const handleClickMember = () => {
-    if (!props.projectId) return;
-    projectPageModalStore.openProjectManageMemberModal(props.projectId);
-};
-const handleClickTags = () => {
-    if (!props.projectId) return;
-    projectPageModalStore.openProjectManageTagsModal(props.projectId);
+const handleClickMembers = () => {
+    if (props.projectId) projectPageModalStore.openProjectManageMemberModal(props.projectId);
+    else if (props.projectGroupId) projectPageModalStore.openProjectGroupManageMemberModal(props.projectGroupId);
 };
 
+/* icon */
+const { projectGroupIcon, projectIcon } = useProjectIcons();
+const showIcon = computed(() => loadingProject || loadingProjectGroup || projectError || projectGroupError || project || projectGroup);
+const iconName = computed(() => (project.value ? projectIcon : projectGroupIcon.iconName));
+const iconColor = computed(() => (project ? undefined : projectGroupIcon.iconColor));
+
 </script>
 
 <template>
-    <div class="project-header">
-        <div class="header-container">
-            <div class="header-icon-wrapper tablet">
-                <p-i name="ic_document-filled"
-                     width="1.5rem"
-                     height="1.5rem"
-                     :color="peacock[600]"
-                />
-            </div>
-            <div class="header-contents">
-                <div class="title-wrapper">
-                    <p-skeleton v-if="loadingProject || loadingProjectGroup"
-                                class="skeleton"
+    <p-heading-layout>
+        <template #heading>
+            <p-heading>
+                <template #title-left-extra>
+                    <div v-show="showIcon"
+                         class="inline-flex items-center justify-center border-2 border-white w-14 h-14 rounded-2xl bg-white/50 cursor-pointer"
+                    >
+                        <p-i :name="iconName"
+                             width="1.5rem"
+                             height="1.5rem"
+                             :color="iconColor"
+                        />
+                    </div>
+                </template>
+                <template #default>
+                    <template v-if="projectError || projectGroupError">
+                        No Project
+                    </template>
+                    <template v-else-if="title">
+                        {{ title }}
+                    </template>
+                    <p-skeleton v-else
                                 width="200px"
                                 height="24px"
                     />
-                    <span v-else-if="projectError || projectGroupError"
-                          class="error"
-                    >
-                        Failed to load project
-                    </span>
-                    <span v-else-if="project || projectGroup"
-                          class="title"
+                </template>
+                <template #title-right-extra>
+                    <div v-if="hasProjectOrGroupId"
+                         class="inline-flex flex-wrap gap-2"
                     >
-                        {{ project ? project.name : projectGroup?.name }}
-                    </span>
-                    <project-action-dropdown-button v-if="props.projectId || props.projectGroupId"
-                                                    :project-id="props.projectId"
-                                                    :project-group-id="props.projectGroupId"
-                    />
-                </div>
-                <div class="header-sub-contents">
-                    <div class="description">
-                        <template v-if="projectType === 'PRIVATE'">
-                            <div class="info-item invite-only">
-                                <p-i name="ic_lock-filled"
-                                     width="0.625rem"
-                                     height="0.625rem"
-                                     color="inherit"
-                                />
-                                <span>{{ $t('PROJECT.DETAIL.INVITE_ONLY') }}</span>
-                            </div>
-                            <p-i name="ic_dot"
-                                 width="0.125rem"
-                                 height="0.125rem"
-                                 :color="gray[400]"
-                            />
-                            <div class="info-item"
-                                 @click="handleClickMember"
-                            >
-                                <template v-if="projectType === 'PRIVATE' && memberCount === 0">
-                                    <p-i class="info-icon"
-                                         name="ic_plus"
-                                         width="0.75rem"
-                                         height="0.75rem"
-                                         color="inherit"
-                                    />
-                                    <span>{{ $t('PROJECT.DETAIL.ADD_MEMBERS') }}</span>
-                                </template>
-                                <template v-else>
-                                    <p-i class="info-icon"
-                                         name="ic_member"
-                                         width="0.75rem"
-                                         height="0.75rem"
-                                         color="inherit"
-                                    />
-                                    <span>{{ memberCount }}{{ $t('PROJECT.DETAIL.MEMBERS') }}</span>
-                                </template>
-                            </div>
-                            <p-i name="ic_dot"
-                                 width="0.125rem"
-                                 height="0.125rem"
-                                 :color="gray[400]"
-                            />
-                        </template>
-                        <p-i name="ic_dot"
-                             width="0.125rem"
-                             height="0.125rem"
-                             :color="gray[400]"
-                        />
-                        <div class="info-item"
-                             @click="handleClickTags"
+                        <p-button v-if="membersCount !== undefined"
+                                  style-type="tertiary"
+                                  size="sm"
+                                  @click="handleClickMembers"
                         >
-                            <p-i class="info-icon"
-                                 name="ic_label"
-                                 width="0.75rem"
-                                 height="0.75rem"
-                                 color="inherit"
-                            />
-                            <span>{{ tagsCount }}{{ $t('PROJECT.DETAIL.TAGS') }}</span>
-                        </div>
+                            {{ $t('PROJECT.DETAIL.MEMBERS') }} ({{ membersCount }})
+                        </p-button>
+                        <project-action-dropdown-button :project-id="props.projectId"
+                                                        :project-group-id="props.projectGroupId"
+                        />
                     </div>
-                </div>
-            </div>
-        </div>
-    </div>
+                </template>
+            </p-heading>
+        </template>
+    </p-heading-layout>
 </template>
-
-<style scoped lang="postcss">
-.project-header {
-
-    .header-container {
-        @apply flex gap-3;
-        .header-icon-wrapper {
-            @apply flex items-center justify-center border-2 border-white;
-            width: 3.5rem;
-            height: 3.5rem;
-            border-radius: 0.75rem;
-            background-color: rgba(255, 255, 255, 0.5);
-            cursor: pointer;
-            &.tablet {
-                display: flex;
-            }
-            &.mobile {
-                display: none;
-            }
-        }
-        .header-contents {
-            .title-wrapper {
-                @apply flex items-center gap-2;
-                padding-bottom: 0.375rem;
-                .title {
-                    @apply text-display-md font-bold text-gray-900;
-                }
-            }
-            .header-sub-contents {
-                .description {
-                    @apply flex items-center gap-2;
-                    .info-item {
-                        @apply flex items-center text-label-sm text-gray-700 cursor-pointer;
-                        gap: 0.15625rem;
-                        .info-icon {
-                            min-width: 0.75rem;
-                        }
-                        &.invite-only {
-                            @apply text-gray-900 cursor-auto;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .quick-link-wrapper {
-        @apply flex items-center gap-4 bg-white border border-gray-200 rounded-lg;
-        width: 100%;
-        height: 2.75rem;
-        padding: 0.75rem 1rem;
-        margin-top: 1.5rem;
-
-        .field-title {
-            @apply text-label-md font-bold text-gray-600;
-        }
-    }
-}
-
-@screen mobile {
-    .project-header {
-        .header-container {
-            .header-icon-wrapper {
-                @apply bg-transparent;
-                align-items: flex-start;
-                cursor: default;
-                border: none;
-                padding-top: 0.25rem;
-                &.tablet {
-                    display: none;
-                }
-                &.mobile {
-                    display: flex;
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue b/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
index 909dc397b6..d201278621 100644
--- a/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
@@ -54,7 +54,7 @@ const workspaceUserList = computed(() => workspaceUsers.value || []);
 
 /* project users */
 const { data: project } = useProjectQuery({
-    projectId: computed(() => projectPageModalStore.state.targetProjectId),
+    projectId: computed(() => projectPageModalStore.state.targetId),
     enabled: computed(() => projectPageModalStore.state.inviteMemberModalVisible),
 });
 const projectUserList = computed(() => project.value?.users || []);
@@ -85,7 +85,7 @@ const {
 const { projectAPI } = useProjectApi();
 const { mutateAsync: addMember } = useMutation({
     mutationFn: () => {
-        const projectId = projectPageModalStore.state.targetProjectId;
+        const projectId = projectPageModalStore.state.targetId;
         if (!projectId) throw new Error('Project ID is not defined');
         return projectAPI.addUsers({
             project_id: projectId,
diff --git a/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue b/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
index b07c8f1089..6cc4af77d8 100644
--- a/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
@@ -19,11 +19,14 @@ import { useProjectPageModalStore } from '@/services/project/v2/stores/project-p
 
 
 const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => !!projectPageModalStore.state.manageMemberModalVisible
+    && projectPageModalStore.state.targetType === 'project'
+    && !!projectPageModalStore.state.targetId);
 
 /* project */
 const { data: project, setQueryData } = useProjectQuery({
-    projectId: computed(() => projectPageModalStore.state.targetProjectId),
-    enabled: computed(() => !!projectPageModalStore.state.manageMemberModalVisible),
+    projectId: computed(() => projectPageModalStore.state.targetId),
+    enabled: visible,
 });
 const projectType = computed<ProjectType|undefined>(() => project.value?.project_type);
 
@@ -58,9 +61,9 @@ const { mutateAsync: removeProjectUsers } = useMutation({
 });
 const handleRemoveProjectUser = async (userId: string) => {
     try {
-        if (!projectPageModalStore.state.targetProjectId) throw new Error('Project ID is not defined');
+        if (!projectPageModalStore.state.targetId) throw new Error('Project ID is not defined');
         const updated = await removeProjectUsers({
-            project_id: projectPageModalStore.state.targetProjectId,
+            project_id: projectPageModalStore.state.targetId,
             users: [userId],
         });
         setQueryData(updated);
@@ -74,7 +77,7 @@ const handleCloseMemberModal = () => {
     projectPageModalStore.closeManageMemberModal();
 };
 const handleClickInvite = () => {
-    const projectId = projectPageModalStore.state.targetProjectId as string;
+    const projectId = projectPageModalStore.state.targetId as string;
     projectPageModalStore.closeManageMemberModal();
     projectPageModalStore.openProjectInviteMemberModal(projectId);
 };
@@ -82,11 +85,12 @@ const handleClickInvite = () => {
 
 <template>
     <p-button-modal :header-title="$t('PROJECT.DETAIL.MEMBER_TITLE')"
-                    :visible="projectPageModalStore.state.manageMemberModalVisible && !!projectPageModalStore.state.targetProjectId"
+                    :visible="visible"
                     size="md"
                     hide-footer-close-button
-                    @close="projectPageModalStore.closeManageMemberModal()"
-                    @cancel="projectPageModalStore.closeManageMemberModal()"
+                    @close="projectPageModalStore.closeManageMemberModal"
+                    @cancel="projectPageModalStore.closeManageMemberModal"
+                    @closed="projectPageModalStore.resetTarget"
                     @confirm="handleCloseMemberModal"
     >
         <template #body>
diff --git a/apps/web/src/services/project/v2/components/ProjectMoveModal.vue b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
index f5c467e2a3..3e384bf981 100644
--- a/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
@@ -24,8 +24,8 @@ import { useProjectPageModalStore } from '@/services/project/v2/stores/project-p
 const emit = defineEmits(['moved']);
 
 const projectPageModalStore = useProjectPageModalStore();
-const isProject = computed(() => !!projectPageModalStore.state.targetProjectId);
-const targetId = computed(() => projectPageModalStore.state.targetProjectId || projectPageModalStore.state.targetProjectGroupId);
+const isProject = computed(() => !!projectPageModalStore.state.targetId);
+const targetId = computed(() => projectPageModalStore.state.targetId || projectPageModalStore.state.targetId);
 
 const allReferenceStore = useAllReferenceStore();
 const storeState = reactive({
diff --git a/apps/web/src/services/project/v2/components/ProjectTagsModal.vue b/apps/web/src/services/project/v2/components/ProjectTagsModal.vue
index bb309e80a5..1a16a5fb2c 100644
--- a/apps/web/src/services/project/v2/components/ProjectTagsModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectTagsModal.vue
@@ -28,7 +28,7 @@ const projectPageModalStore = useProjectPageModalStore();
 
 /* project */
 const { data: project, isLoading, setQueryData: setProjectQueryData } = useProjectQuery({
-    projectId: computed(() => projectPageModalStore.state.targetProjectId),
+    projectId: computed(() => projectPageModalStore.state.targetId),
     enabled: computed(() => projectPageModalStore.state.manageTagsModalVisible),
 });
 const tags = computed(() => project.value?.tags || {});
@@ -45,9 +45,9 @@ onMounted(() => {
 const { projectAPI } = useProjectApi();
 const { mutate: updateTags, isPending: isUpdating } = useMutation({
     mutationFn: (_newTags: Tag) => {
-        if (!projectPageModalStore.state.targetProjectId) throw new Error('Project ID is not defined');
+        if (!projectPageModalStore.state.targetId) throw new Error('Project ID is not defined');
         return projectAPI.update({
-            project_id: projectPageModalStore.state.targetProjectId,
+            project_id: projectPageModalStore.state.targetId,
             tags: _newTags,
         });
     },
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-query.ts
index 209b4a24eb..5c13039744 100644
--- a/apps/web/src/services/project/v2/composables/queries/use-project-query.ts
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-query.ts
@@ -13,7 +13,7 @@ export const useProjectQuery = ({
 enabled?: Ref<boolean>|boolean;
 }) => {
     const { projectAPI, projectQueryKey } = useProjectApi();
-    const { data, isLoading, error } = useQuery({
+    const projectQuery = useQuery({
         queryKey: computed(() => [...projectQueryKey.value, projectId.value]),
         queryFn: () => projectAPI.get({ project_id: projectId.value as string }),
         enabled: computed(() => {
@@ -36,6 +36,6 @@ enabled?: Ref<boolean>|boolean;
     };
 
     return {
-        data, isLoading, error, invalidateQuery, setQueryData,
+        ...projectQuery, invalidateQuery, setQueryData,
     };
 };
diff --git a/apps/web/src/services/project/v2/composables/use-project-icons.ts b/apps/web/src/services/project/v2/composables/use-project-icons.ts
new file mode 100644
index 0000000000..bc80479455
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-project-icons.ts
@@ -0,0 +1,12 @@
+import type { TreeNodeIcon } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
+
+import { indigo } from '@/styles/colors';
+
+export const useProjectIcons = () => {
+    const projectGroupIcon: TreeNodeIcon = { iconName: 'ic_folder-filled', iconColor: indigo[500] };
+    const projectIcon: TreeNodeIcon = 'ic_project-filled';
+    return {
+        projectGroupIcon,
+        projectIcon,
+    };
+};
diff --git a/apps/web/src/services/project/v2/composables/use-role-formatters.ts b/apps/web/src/services/project/v2/composables/use-role-formatters.ts
new file mode 100644
index 0000000000..f1838944a9
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-role-formatters.ts
@@ -0,0 +1,23 @@
+import type { TranslateResult } from 'vue-i18n';
+
+import { useUserReferenceStore } from '@/store/reference/user-reference-store';
+
+import { useRoleFormatter } from '@/services/advanced/composables/refined-table-data';
+
+export const useRoleFormatters = () => {
+    const userReferenceStore = useUserReferenceStore();
+    const getRoleImage = (userId: string): string => {
+        const _roleType = userReferenceStore.getters.userItems[userId]?.data?.roleInfo?.role_type;
+        const _roleInfo = _roleType ? useRoleFormatter(_roleType) : undefined;
+        return _roleInfo?.image ?? '';
+    };
+    const getRoleName = (userId: string): TranslateResult => {
+        const _roleType = userReferenceStore.getters.userItems[userId]?.data?.roleInfo?.role_type;
+        const _roleInfo = _roleType ? useRoleFormatter(_roleType) : undefined;
+        return _roleInfo?.name ?? '';
+    };
+
+    return {
+        getRoleImage, getRoleName,
+    };
+};
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index 56de9ef782..e8aceea430 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -11,11 +11,12 @@ import { i18n } from '@/translations';
 import { indigo, peacock } from '@/styles/colors';
 
 import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
-import ProjectGroupMemberManagementModal from '@/services/project/v1/components/ProjectGroupMemberManagementModal.vue';
 import ProjectAndGroupListPanel from '@/services/project/v2/components/ProjectAndGroupListPanel.vue';
 import ProjectDeleteModal from '@/services/project/v2/components/ProjectDeleteModal.vue';
+import ProjectGroupMemberManagementModal from '@/services/project/v2/components/ProjectGroupMemberManagementModal.vue';
 import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue';
 import ProjectMemberInviteModal from '@/services/project/v2/components/ProjectMemberInviteModal.vue';
+import ProjectMemberManagementModal from '@/services/project/v2/components/ProjectMemberManagementModal.vue';
 import ProjectMoveModal from '@/services/project/v2/components/ProjectMoveModal.vue';
 import ProjectTagsModal from '@/services/project/v2/components/ProjectTagsModal.vue';
 import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
@@ -82,12 +83,10 @@ onUnmounted(() => {
                         :project-group-id="projectGroupId"
         />
         <project-and-group-list-panel />
-        <project-group-member-management-modal v-if="projectGroupId && state.projectGroupMemberManagementModalVisible"
-                                               :visible.sync="state.projectGroupMemberManagementModalVisible"
-                                               :project-group-id="projectGroupId"
-        />
-        <project-delete-modal :skip-redirect="!!(projectPageModelStore.state.targetProjectGroupId && projectPageModelStore.state.targetProjectGroupId === projectGroupId)
-                                  || !!(projectPageModelStore.state.targetProjectId && projectPageModelStore.state.targetProjectId === projectId)"
+        <project-group-member-management-modal />
+        <project-member-management-modal />
+        <project-delete-modal :skip-redirect="!!projectPageModelStore.state.targetId &&
+                                  (projectPageModelStore.state.targetId === projectGroupId || projectPageModelStore.state.targetId === projectId)"
                               @confirm="handleRefreshTree"
         />
         <project-move-modal @moved="handleMoved" />
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 1dc353dd58..278cce665d 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
@@ -10,19 +10,20 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         inviteMemberModalVisible: false,
         manageTagsModalVisible: false,
         projectFormModalVisible: false,
-        targetProjectId: '' as string|undefined,
-        targetProjectGroupId: '' as string|undefined,
+        targetId: '' as string|undefined,
         targetType: undefined as 'project'|'projectGroup'|undefined,
     });
 
     const actions = {
         // manage member
         openProjectGroupManageMemberModal(targetProjectGroupId: string) {
-            state.targetProjectGroupId = targetProjectGroupId;
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
             state.manageMemberModalVisible = true;
         },
         openProjectManageMemberModal(targetProjectId: string) {
-            state.targetProjectId = targetProjectId;
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
             state.manageMemberModalVisible = true;
         },
         closeManageMemberModal() {
@@ -30,11 +31,13 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         },
         // delete project
         openProjectGroupDeleteModal(targetProjectGroupId: string) {
-            state.targetProjectGroupId = targetProjectGroupId;
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
             state.deleteModalVisible = true;
         },
         openProjectDeleteModal(targetProjectId: string) {
-            state.targetProjectId = targetProjectId;
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
             state.deleteModalVisible = true;
         },
         closeDeleteModal() {
@@ -42,11 +45,13 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         },
         // move project
         openProjectGroupMoveModal(targetProjectGroupId: string) {
-            state.targetProjectGroupId = targetProjectGroupId;
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
             state.moveModalVisible = true;
         },
         openProjectMoveModal(targetProjectId: string) {
-            state.targetProjectId = targetProjectId;
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
             state.moveModalVisible = true;
         },
         closeMoveModal() {
@@ -54,11 +59,13 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         },
         // invite member
         openProjectGroupInviteMemberModal(targetProjectGroupId: string) {
-            state.targetProjectGroupId = targetProjectGroupId;
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
             state.inviteMemberModalVisible = true;
         },
         openProjectInviteMemberModal(targetProjectId: string) {
-            state.targetProjectId = targetProjectId;
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
             state.inviteMemberModalVisible = true;
         },
         closeInviteMemberModal() {
@@ -66,33 +73,46 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         },
         // manage tags
         openProjectGroupManageTagsModal(targetProjectGroupId: string) {
-            state.targetProjectGroupId = targetProjectGroupId;
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
             state.manageTagsModalVisible = true;
         },
         openProjectManageTagsModal(targetProjectId: string) {
-            state.targetProjectId = targetProjectId;
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
             state.manageTagsModalVisible = true;
         },
         closeManageTagsModal() {
             state.manageTagsModalVisible = false;
         },
         // form
-        openCreateProjectFormModal(targetType: 'project'|'projectGroup', targetProjectGroupId?: string) {
-            state.targetType = targetType;
-            state.targetProjectGroupId = targetProjectGroupId;
+        openCreateProjectGroupFormModal() {
+            state.targetId = undefined;
+            state.targetType = 'projectGroup';
+            state.projectFormModalVisible = true;
+        },
+        openCreateProjectFormModal() {
+            state.targetId = undefined;
+            state.targetType = 'project';
+            state.projectFormModalVisible = true;
+        },
+        openEditProjectGroupFormModal(targetProjectGroupId: string) {
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
             state.projectFormModalVisible = true;
         },
         openEditProjectFormModal(targetProjectId: string) {
-            state.targetProjectId = targetProjectId;
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
             state.projectFormModalVisible = true;
         },
-        closeProjectFormModal() {
+        closeFormModal() {
             state.projectFormModalVisible = false;
         },
         // overal
         resetTarget() {
-            state.targetProjectId = '';
-            state.targetProjectGroupId = '';
+            state.targetId = undefined;
+            state.targetType = undefined;
         },
     };
 

From a7ccc39b6024e53696f836e89e1b5b04ed6acd6f Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:57 +0900
Subject: [PATCH 12/22] refactor: improve state management and user
 interactions

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../components/ProjectMemberInviteModal.vue   | 42 ++++++++-------
 .../ProjectMemberManagementModal.vue          | 54 ++++++++++++-------
 2 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue b/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
index d201278621..5fe0f94b7d 100644
--- a/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectMemberInviteModal.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import {
-    reactive, computed,
-} from 'vue';
+import { computed } from 'vue';
 
 import { useMutation } from '@tanstack/vue-query';
 
@@ -25,11 +23,11 @@ import { useProjectPageModalStore } from '@/services/project/v2/stores/project-p
 
 
 const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => !!projectPageModalStore.state.inviteMemberModalVisible
+        && projectPageModalStore.state.targetType === 'project'
+        && !!projectPageModalStore.state.targetId);
 
-
-const state = reactive({
-    searchText: '',
-});
+/* selected users */
 const {
     forms: {
         selectedUserItems,
@@ -45,17 +43,20 @@ const {
         return true;
     },
 });
+const handleUpdateSelected = (selected: number|string|SelectDropdownMenuItem[]) => {
+    setForm('selectedUserItems', selected as SelectDropdownMenuItem[]);
+};
 
 /* workspace users */
 const { data: workspaceUsers } = useWorkspaceUsersQuery({
-    enabled: computed(() => projectPageModalStore.state.inviteMemberModalVisible),
+    enabled: visible,
 });
 const workspaceUserList = computed(() => workspaceUsers.value || []);
 
 /* project users */
-const { data: project } = useProjectQuery({
+const { data: project, setQueryData: setProjectQueryData } = useProjectQuery({
     projectId: computed(() => projectPageModalStore.state.targetId),
-    enabled: computed(() => projectPageModalStore.state.inviteMemberModalVisible),
+    enabled: visible,
 });
 const projectUserList = computed(() => project.value?.users || []);
 
@@ -81,24 +82,29 @@ const {
     getUserIcon, getUserLabel,
 } = useUserInfo();
 
-/* Api */
+/* mutation */
 const { projectAPI } = useProjectApi();
 const { mutateAsync: addMember } = useMutation({
-    mutationFn: () => {
-        const projectId = projectPageModalStore.state.targetId;
+    mutationFn: ({ projectId, users }: {projectId: string; users: string[]}) => {
         if (!projectId) throw new Error('Project ID is not defined');
         return projectAPI.addUsers({
             project_id: projectId,
-            users: selectedUserItems.value.map((d) => d.name),
+            users,
         });
     },
-    onSuccess: () => showSuccessMessage(i18n.t('PROJECT.DETAIL.MEMBER.ALS_S_ADD_MEMBER'), ''),
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.DETAIL.MEMBER.ALS_S_ADD_MEMBER'), '');
+        setProjectQueryData(data);
+    },
     onError: (e) => ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.MEMBER.ALT_E_ADD_MEMBER'), true),
 });
 
 /* Event */
 const handleConfirm = async () => {
-    await addMember();
+    await addMember({
+        projectId: projectPageModalStore.state.targetId as string,
+        users: selectedUserItems.value.map((d) => d.name),
+    });
     projectPageModalStore.closeInviteMemberModal();
 };
 
@@ -116,6 +122,7 @@ const handleConfirm = async () => {
         :disabled="!isAllValid"
         @close="projectPageModalStore.closeInviteMemberModal()"
         @cancel="projectPageModalStore.closeInviteMemberModal()"
+        @closed="projectPageModalStore.resetTarget()"
         @confirm="handleConfirm"
     >
         <template #body>
@@ -129,7 +136,6 @@ const handleConfirm = async () => {
                         <p-select-dropdown
                             :menu="userMenuItems"
                             :selected="selectedUserItems"
-                            :search-text.sync="state.searchText"
                             parent-id="project-member-invite"
                             multi-selectable
                             appearance-type="stack"
@@ -138,7 +144,7 @@ const handleConfirm = async () => {
                             show-delete-all-button
                             use-fixed-menu-style
                             :invalid="invalid"
-                            @update:selected="setForm('selectedUserItems', $event)"
+                            @update:selected="handleUpdateSelected"
                         >
                             <template #menu-item--format="{item}">
                                 <p-lazy-img :src="getUserIcon(item.name)"
diff --git a/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue b/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
index 6cc4af77d8..678b018a03 100644
--- a/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectMemberManagementModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { useMutation } from '@tanstack/vue-query';
 
@@ -9,6 +9,7 @@ import {
 
 import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
 import type { ProjectType } from '@/api-clients/identity/project/schema/type';
+import { i18n } from '@/translations';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
@@ -32,7 +33,7 @@ const projectType = computed<ProjectType|undefined>(() => project.value?.project
 
 /* members */
 const { data: workspaceUsers, error } = useWorkspaceUsersQuery({
-    enabled: computed(() => projectType.value === 'PUBLIC' && projectPageModalStore.state.manageMemberModalVisible),
+    enabled: computed(() => visible.value && projectType.value === 'PUBLIC'),
 });
 const possibleUserIds = computed<string[]>(() => {
     if (projectType.value === 'PUBLIC') {
@@ -56,31 +57,46 @@ const {
 
 /* remove project user */
 const { projectAPI } = useProjectApi();
-const { mutateAsync: removeProjectUsers } = useMutation({
-    mutationFn: projectAPI.removeUsers,
+const { mutateAsync: removeProjectUser } = useMutation({
+    mutationFn: ({ projectId, userId }: {projectId: string; userId: string}) => projectAPI.removeUsers({
+        project_id: projectId,
+        users: [userId],
+    }),
+    onSuccess: (data) => {
+        setQueryData(data);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_UPDATE_MEMBER'), true);
+    },
 });
-const handleRemoveProjectUser = async (userId: string) => {
-    try {
-        if (!projectPageModalStore.state.targetId) throw new Error('Project ID is not defined');
-        const updated = await removeProjectUsers({
-            project_id: projectPageModalStore.state.targetId,
-            users: [userId],
-        });
-        setQueryData(updated);
-    } catch (e) {
-        ErrorHandler.handleRequestError(e, 'Project ID is not defined', true);
-    }
+const handleRemoveProjectUser = async (projectId: string, userId: string) => {
+    removeProjectUser({
+        projectId,
+        userId,
+    });
 };
 
 /* modal handling */
 const handleCloseMemberModal = () => {
     projectPageModalStore.closeManageMemberModal();
 };
+const triggerInvite = ref(false);
 const handleClickInvite = () => {
     const projectId = projectPageModalStore.state.targetId as string;
+    triggerInvite.value = true;
     projectPageModalStore.closeManageMemberModal();
     projectPageModalStore.openProjectInviteMemberModal(projectId);
 };
+const handleClosedMemberModal = () => {
+    if (!triggerInvite.value) {
+        projectPageModalStore.resetTarget();
+    }
+};
+watch(visible, () => (v) => {
+    if (v) {
+        triggerInvite.value = false;
+    }
+});
 </script>
 
 <template>
@@ -90,11 +106,13 @@ const handleClickInvite = () => {
                     hide-footer-close-button
                     @close="projectPageModalStore.closeManageMemberModal"
                     @cancel="projectPageModalStore.closeManageMemberModal"
-                    @closed="projectPageModalStore.resetTarget"
+                    @closed="handleClosedMemberModal"
                     @confirm="handleCloseMemberModal"
     >
         <template #body>
-            <div class="member-contents-wrapper">
+            <div v-if="projectPageModalStore.state.targetId"
+                 class="member-contents-wrapper"
+            >
                 <div class="member-contents">
                     <div class="contents-header">
                         <span>{{ $t('PROJECT.DETAIL.INVITE_MEMBER_DESC') }}</span>
@@ -125,7 +143,7 @@ const handleClickInvite = () => {
                                     <span>{{ getUserRole(userId) }}</span>
                                     <p-icon-button name="ic_delete"
                                                    size="sm"
-                                                   @click="handleRemoveProjectUser(userId)"
+                                                   @click="handleRemoveProjectUser(projectPageModalStore.state.targetId, userId)"
                                     />
                                 </div>
                             </div>

From 128996af18b67d052ac240e18b409c9d0b0f863d Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:58 +0900
Subject: [PATCH 13/22] feat: add project and project group management modals,
 enhance state handling and user interactions

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../components/buttons/ActionMenuButton.vue   |  12 +-
 .../mutations/use-project-group-mutations.ts  |  18 +-
 .../queries/use-project-group-query.ts        |   6 +-
 .../ProjectActionDropdownButton.vue           |  59 ++--
 .../v2/components/ProjectDeleteModal.vue      |  52 ++--
 .../v2/components/ProjectFormModal.vue        | 254 ++++++++++++++++++
 .../v2/components/ProjectGroupFormModal.vue   | 131 +++++++++
 .../v2/components/ProjectGroupRenameModal.vue | 140 ++++++++++
 .../v2/components/ProjectMoveModal.vue        |  50 ++--
 .../v2/components/ProjectTagsModal.vue        |  65 +++--
 .../composables/queries/use-project-query.ts  |   8 +-
 .../project/v2/pages/ProjectMainPage.vue      | 126 ++-------
 .../v2/stores/project-page-modal-store.ts     |  15 ++
 .../console-translation-2.8.babel             |  21 ++
 packages/language-pack/en.json                |   1 +
 packages/language-pack/ja.json                |   1 +
 packages/language-pack/ko.json                |   1 +
 17 files changed, 770 insertions(+), 190 deletions(-)
 create mode 100644 apps/web/src/services/project/v2/components/ProjectFormModal.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue

diff --git a/apps/web/src/common/components/buttons/ActionMenuButton.vue b/apps/web/src/common/components/buttons/ActionMenuButton.vue
index 8a6d6a3226..f46507e21c 100644
--- a/apps/web/src/common/components/buttons/ActionMenuButton.vue
+++ b/apps/web/src/common/components/buttons/ActionMenuButton.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core';
-import { ref, computed } from 'vue';
+import { ref, computed, toRef } from 'vue';
 
 import { PIconButton, PContextMenu, useContextMenuStyle } from '@cloudforet/mirinae';
+import type { IconButtonSize, IconButtonStyleType } from '@cloudforet/mirinae/types/controls/buttons/icon-button/type';
+import type { ContextMenuPosition } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import { i18n } from '@/translations';
 
@@ -12,12 +14,14 @@ import type { ActionMenuItem } from './type';
 type SupportMenu = 'edit' | 'delete';
 const props = withDefaults(defineProps<{
     menu?: Array<SupportMenu|ActionMenuItem>;
-    styleType?: string;
-    size?: string;
+    styleType?: IconButtonStyleType;
+    size?: IconButtonSize;
+    position?: ContextMenuPosition;
 }>(), {
     menu: undefined,
     styleType: 'transparent',
     size: 'md',
+    position: 'right',
 });
 const emit = defineEmits<{(event: 'edit'): void;
     (event: 'delete'): void;
@@ -33,7 +37,7 @@ useContextMenuStyle({
     menuRef,
     visibleMenu,
     useFixedMenuStyle: true,
-    position: 'right',
+    position: toRef(props, 'position'),
     menuWidth: props.size === 'sm' ? '113px' : '192px',
 });
 const menuMap = computed<Record<SupportMenu, ActionMenuItem>>(() => ({
diff --git a/apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts b/apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts
index 08f9fb8d6f..49ae2bbe56 100644
--- a/apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts
+++ b/apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts
@@ -1,23 +1,36 @@
 import { computed } from 'vue';
+import { useRouter } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
 import { i18n } from '@/translations';
 
+import { useProjectGroupReferenceStore } from '@/store/reference/project-group-reference-store';
+
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
 export const useProjectGroupMutations = () => {
     const { projectGroupAPI, projectGroupQueryKey, projectGroupListQueryKey } = useProjectGroupApi();
     const queryClient = useQueryClient();
-
+    const projectGroupStore = useProjectGroupReferenceStore();
+    const router = useRouter();
     const { mutateAsync: createProjectGroup, isPending: isCreating } = useMutation({
         mutationFn: projectGroupAPI.create,
-        onSuccess: () => {
+        onSuccess: (data) => {
             showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT_GROUP'), '');
+            projectGroupStore.sync(data);
             queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+            router.replace({
+                name: PROJECT_ROUTE_V2._NAME,
+                params: {
+                    projectGroupOrProjectId: data.project_group_id,
+                },
+            });
         },
         onError: (e) => {
             ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT_GROUP'));
@@ -28,6 +41,7 @@ export const useProjectGroupMutations = () => {
         mutationFn: projectGroupAPI.update,
         onSuccess: (data) => {
             showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
+            projectGroupStore.sync(data);
             queryClient.invalidateQueries({ queryKey: [...projectGroupQueryKey.value, data.project_group_id] });
             queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
         },
diff --git a/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts b/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
index 2c782fb4d3..ace2516c32 100644
--- a/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
+++ b/apps/web/src/services/project/v-shared/composables/queries/use-project-group-query.ts
@@ -12,7 +12,7 @@ export const useProjectGroupQuery = ({
   projectGroupId: Ref<string|undefined>;
   enabled?: Ref<boolean>;
 }) => {
-    const { projectGroupAPI, projectGroupQueryKey } = useProjectGroupApi();
+    const { projectGroupAPI, projectGroupListQueryKey, projectGroupQueryKey } = useProjectGroupApi();
     const queryKey = computed(() => [...projectGroupQueryKey.value, projectGroupId.value]);
     const projectGroupQuery = useQuery({
         queryKey,
@@ -32,10 +32,14 @@ export const useProjectGroupQuery = ({
     const invalidateQuery = () => {
         queryClient.invalidateQueries({ queryKey: queryKey.value });
     };
+    const invalidateAllQueries = () => {
+        queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+    };
 
     return {
         ...projectGroupQuery,
         setQueryData,
         invalidateQuery,
+        invalidateAllQueries,
     };
 };
diff --git a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
index 9334098e84..a2e2f390d6 100644
--- a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
+++ b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
@@ -15,15 +15,20 @@ const props = defineProps<{
 
 const actionItems = computed<SelectDropdownMenuItem[]>(() => [
     {
-        name: 'update',
-        label: i18n.t('PROJECT.DETAIL.UPDATE'),
-        icon: 'ic_settings',
+        name: 'rename',
+        label: i18n.t('PROJECT.DETAIL.RENAME'),
+        icon: 'ic_edit-text',
     },
     {
         name: 'move',
         label: i18n.t('PROJECT.DETAIL.MOVE'),
         icon: 'ic_move',
     },
+    {
+        name: 'tags',
+        label: i18n.t('PROJECT.DETAIL.TAGS'),
+        icon: 'ic_label',
+    },
     { type: 'divider', name: 'divider' },
     {
         name: 'delete',
@@ -34,13 +39,34 @@ const actionItems = computed<SelectDropdownMenuItem[]>(() => [
 
 const projectPageModalStore = useProjectPageModalStore();
 
-const handleSelectItem = (selected: SelectDropdownMenuItem|string|number) => {
-    if (typeof selected === 'string' || typeof selected === 'number') return;
-    const id = props.projectId || props.projectGroupId;
-    if (!id) return;
-    if (selected.name === 'update') projectPageModalStore.openEditProjectFormModal(id);
-    else if (selected.name === 'move') projectPageModalStore.openProjectMoveModal(id);
-    else if (selected.name === 'delete') projectPageModalStore.openProjectDeleteModal(id);
+const handleSelectItem = (selectedItem: SelectDropdownMenuItem|string|number) => {
+    let selected: string = selectedItem as string;
+    if (typeof selected === 'object') selected = (selectedItem as SelectDropdownMenuItem).name;
+    if (selected === 'rename') {
+        if (props.projectId) {
+            projectPageModalStore.openProjectRenameModal(props.projectId);
+        } else if (props.projectGroupId) {
+            projectPageModalStore.openProjectGroupRenameModal(props.projectGroupId);
+        }
+    } else if (selected === 'move') {
+        if (props.projectId) {
+            projectPageModalStore.openProjectMoveModal(props.projectId);
+        } else if (props.projectGroupId) {
+            projectPageModalStore.openProjectGroupMoveModal(props.projectGroupId);
+        }
+    } else if (selected === 'tags') {
+        if (props.projectId) {
+            projectPageModalStore.openProjectManageTagsModal(props.projectId);
+        } else if (props.projectGroupId) {
+            projectPageModalStore.openProjectGroupManageTagsModal(props.projectGroupId);
+        }
+    } else if (selected === 'delete') {
+        if (props.projectId) {
+            projectPageModalStore.openProjectDeleteModal(props.projectId);
+        } else if (props.projectGroupId) {
+            projectPageModalStore.openProjectGroupDeleteModal(props.projectGroupId);
+        }
+    }
 };
 </script>
 
@@ -52,16 +78,3 @@ const handleSelectItem = (selected: SelectDropdownMenuItem|string|number) => {
                        @select="handleSelectItem"
     />
 </template>
-
-<style scoped lang="postcss">
-/* custom design-system component - p-select-dropdown */
-:deep(.p-select-dropdown) {
-    .dropdown-button-component {
-        @apply rounded-full;
-
-        &.opened {
-            @apply rounded-full;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
index 88d7c46d26..84dea7b316 100644
--- a/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
@@ -4,10 +4,10 @@ import {
 } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import { useQueryClient } from '@tanstack/vue-query';
 
-import type { ProjectGroupDeleteParameters } from '@/api-clients/identity/project-group/schema/api-verbs/delete';
-import type { ProjectDeleteParameters } from '@/api-clients/identity/project/schema/api-verbs/delete';
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
 import { i18n as _i18n } from '@/translations';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
@@ -30,10 +30,10 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'confirm'): void;
-}>();
 
-const projectPageModelStore = useProjectPageModalStore();
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.deleteModalVisible && !!projectPageModalStore.state.targetId);
+const isProject = computed(() => projectPageModalStore.state.targetType === 'project');
 
 const router = useRouter();
 const userWorkspaceStore = useUserWorkspaceStore();
@@ -43,8 +43,8 @@ const recentStore = useRecentStore();
 
 const state = reactive({
     currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
-    title: computed(() => (projectPageModelStore.state.targetId ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_TITLE') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE'))),
-    content: computed(() => (projectPageModelStore.state.targetId ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_CONTENT') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.CONTENT'))),
+    title: computed(() => (isProject.value ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_TITLE') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE'))),
+    content: computed(() => (isProject.value ? _i18n.t('PROJECT.DETAIL.MODAL_DELETE_PROJECT_CONTENT') : _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.CONTENT'))),
     loading: false,
 });
 
@@ -52,22 +52,22 @@ const handleConfirmDelete = async () => {
     if (state.loading) return;
     state.loading = true;
     try {
-        if (!projectPageModelStore.state.targetId) throw new Error('No project or project group id');
-        if (projectPageModelStore.state.targetType === 'project') {
-            await deleteProject(projectPageModelStore.state.targetId);
+        if (!projectPageModalStore.state.targetId) throw new Error('No project or project group id');
+        if (projectPageModalStore.state.targetType === 'project') {
+            await deleteProject(projectPageModalStore.state.targetId);
         } else {
-            await deleteProjectGroup(projectPageModelStore.state.targetId);
+            await deleteProjectGroup(projectPageModalStore.state.targetId);
         }
-        emit('confirm');
     } catch (e) {
-        if (projectPageModelStore.state.targetType === 'projectGroup') {
+        if (projectPageModalStore.state.targetType === 'projectGroup') {
             ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.LANDING.ALT_E_DELETE_PROJECT_GROUP', { action: _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE') }), true);
         } else {
             ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.DETAIL.ALT_E_DELETE_PROJECT'), true);
         }
     } finally {
         state.loading = false;
-        projectPageModelStore.closeDeleteModal();
+        projectPageModalStore.closeDeleteModal();
+        console.debug('skipRedirect', props.skipRedirect);
         if (!props.skipRedirect) {
             await router.replace({
                 name: PROJECT_ROUTE_V2._NAME,
@@ -76,10 +76,14 @@ const handleConfirmDelete = async () => {
     }
 };
 
+const queryClient = useQueryClient();
+const { projectAPI, projectListQueryKey, projectQueryKey } = useProjectApi();
 const deleteProject = async (projectId: string) => {
-    await SpaceConnector.clientV2.identity.project.delete<ProjectDeleteParameters>({
+    await projectAPI.delete({
         project_id: projectId,
     });
+    queryClient.invalidateQueries({ queryKey: projectListQueryKey.value });
+    queryClient.removeQueries({ queryKey: [...projectQueryKey.value, projectId] });
     await recentStore.deleteRecent({
         type: RECENT_TYPE.PROJECT,
         itemId: projectId,
@@ -94,11 +98,13 @@ const deleteProject = async (projectId: string) => {
         });
     }
 };
-
+const { projectGroupAPI, projectGroupListQueryKey, projectGroupQueryKey } = useProjectGroupApi();
 const deleteProjectGroup = async (projectGroupId: string) => {
-    await SpaceConnector.clientV2.identity.projectGroup.delete<ProjectGroupDeleteParameters>({
+    await projectGroupAPI.delete({
         project_group_id: projectGroupId,
     });
+    queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+    queryClient.removeQueries({ queryKey: [...projectGroupQueryKey.value, projectGroupId] });
     showSuccessMessage(_i18n.t('PROJECT.LANDING.ALT_S_DELETE_PROJECT_GROUP'), '');
     const isFavoriteItem = favoriteGetters.projectGroupItems.find((item) => item.itemId === projectGroupId);
     if (isFavoriteItem) {
@@ -114,17 +120,17 @@ const deleteProjectGroup = async (projectGroupId: string) => {
 
 <template>
     <delete-modal :header-title="state.title"
-                  :visible="projectPageModelStore.state.deleteModalVisible"
+                  :visible="visible"
                   :loading="state.loading"
-                  @close="projectPageModelStore.closeDeleteModal"
-                  @cancel="projectPageModelStore.closeDeleteModal"
-                  @closed="projectPageModelStore.resetTarget"
+                  @close="projectPageModalStore.closeDeleteModal"
+                  @cancel="projectPageModalStore.closeDeleteModal"
+                  @closed="projectPageModalStore.resetTarget"
                   @confirm="handleConfirmDelete"
     >
         <p>
             {{ state.content }}
         </p>
-        <i18n v-if="!projectPageModelStore.state.targetId"
+        <i18n v-if="!isProject"
               path="PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.DESC"
               tag="p"
               class="desc"
diff --git a/apps/web/src/services/project/v2/components/ProjectFormModal.vue b/apps/web/src/services/project/v2/components/ProjectFormModal.vue
new file mode 100644
index 0000000000..f5751c108f
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectFormModal.vue
@@ -0,0 +1,254 @@
+<script lang="ts" setup>
+import { computed, reactive, watch } from 'vue';
+import { useRouter } from 'vue-router/composables';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import {
+    PButtonModal, PFieldGroup, PI, PSelectDropdown, PTextInput,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import type { ProjectType } from '@/api-clients/identity/project/schema/type';
+import { i18n } from '@/translations';
+
+import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { gray, indigo } from '@/styles/colors';
+
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.projectFormModalVisible
+&& projectPageModalStore.state.targetType === 'project');
+const targetId = computed(() => projectPageModalStore.state.targetId);
+
+
+const props = defineProps<{
+    targetParentGroupId?: string;
+}>();
+const projectStore = useProjectReferenceStore();
+const state = reactive({
+    projectNames: computed(() => Object.values(projectStore.getters.projectItems).filter((item) => item.key !== targetId.value).map((p) => p.name)),
+    accessMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
+        {
+            name: 'PRIVATE',
+            label: i18n.t('PROJECT.LANDING.ONLY_PEOPLE_INVITED'),
+            icon: 'ic_lock-filled',
+            iconColor: gray[800],
+        },
+        {
+            name: 'PUBLIC',
+            label: i18n.t('PROJECT.LANDING.EVERYONE_AT_THIS_WORKSPACE'),
+            icon: 'ic_globe-filled',
+            iconColor: indigo[600],
+        },
+    ])),
+    selectedAccess: 'PRIVATE' as ProjectType,
+});
+
+/* form */
+const {
+    forms: { projectName },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    initForm,
+} = useFormValidator({
+    projectName: undefined as string|undefined,
+}, {
+    projectName: (val?: string) => {
+        if (!val?.length) return i18n.t('PROJECT.DETAIL.MODAL_VALIDATION_REQUIRED');
+        if (val.length > 40) return i18n.t('PROJECT.DETAIL.MODAL_VALIDATION_LENGTH');
+        if (state.projectNames.includes(val)) return i18n.t('PROJECT.DETAIL.MODAL_VALIDATION_DUPLICATED');
+        return true;
+    },
+});
+const { data: project, setQueryData: setProjectQueryData, invalidateAllQueries } = useProjectQuery({
+    projectId: targetId,
+    enabled: visible,
+});
+watch([visible, project], ([v, prj]) => {
+    if (!v) return;
+    if (!prj) {
+        initForm();
+        return;
+    }
+    if (prj) {
+        setForm('projectName', prj.name);
+        state.selectedAccess = prj.project_type ?? 'PRIVATE';
+    }
+});
+
+/* mutations */
+const router = useRouter();
+const { projectAPI } = useProjectApi();
+const { mutate: createProject, isPending: isCreatingProject } = useMutation({
+    mutationFn: ({ projectType, groupId, name }: { projectType: ProjectType, groupId?: string; name: string }) => projectAPI.create({
+        name,
+        project_type: projectType,
+        project_group_id: groupId,
+    }),
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT'), '');
+        projectStore.sync(data);
+        invalidateAllQueries();
+        router.replace({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: data.project_id,
+            },
+        });
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT'));
+    },
+});
+
+
+const { mutate: updateProject, isPending: isUpdatingProject } = useMutation({
+    mutationFn: ({ projectId, name }: { projectId: string; name: string }) => projectAPI.update({
+        project_id: projectId,
+        name,
+    }),
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_UPDATE_PROJECT'), '');
+        setProjectQueryData(data);
+        projectStore.sync(data);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_UPDATE_PROJECT'));
+    },
+});
+
+const { mutate: updateProjectType, isPending: isUpdatingProjectType } = useMutation({
+    mutationFn: ({ projectId, projectType }: { projectId: string; projectType: ProjectType }) => projectAPI.updateProjectType({
+        project_id: projectId,
+        project_type: projectType,
+    }),
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_UPDATE_PROJECT_TYPE'), '');
+        setProjectQueryData(data);
+        projectStore.sync(data);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_UPDATE_PROJECT_TYPE'));
+    },
+});
+const isProcessing = computed(() => isCreatingProject.value || isUpdatingProject.value || isUpdatingProjectType.value);
+
+/* Event */
+const confirm = async () => {
+    if (isProcessing.value) return;
+    if (!isAllValid.value) return;
+
+    const name = projectName.value?.trim() as string; // always exist
+    if (targetId.value) { // update project
+        updateProject({
+            projectId: targetId.value,
+            name,
+        });
+        updateProjectType({
+            projectId: targetId.value,
+            projectType: state.selectedAccess,
+        });
+    } else { // create project
+        createProject({
+            name,
+            projectType: state.selectedAccess,
+            groupId: props.targetParentGroupId,
+        });
+    }
+    projectPageModalStore.closeFormModal();
+};
+const handleSelectAccess = (selectedAccess: ProjectType) => {
+    state.selectedAccess = selectedAccess;
+};
+
+
+</script>
+
+<template>
+    <p-button-modal class="project-form-modal"
+                    :header-title="targetId ? $t('PROJECT.DETAIL.MODAL_UPDATE_PROJECT_TITLE') : $t('PROJECT.DETAIL.MODAL_CREATE_PROJECT_TITLE')"
+                    centered
+                    size="sm"
+                    fade
+                    backdrop
+                    :visible="visible"
+                    :disabled="isProcessing || !isAllValid"
+                    @close="projectPageModalStore.closeFormModal"
+                    @cancel="projectPageModalStore.closeFormModal"
+                    @closed="projectPageModalStore.resetTarget"
+                    @confirm="confirm"
+    >
+        <template #body>
+            <p-field-group :label="$t('PROJECT.DETAIL.MODAL_CREATE_PROJECT_LABEL')"
+                           :invalid-text="invalidTexts.projectName"
+                           :invalid="invalidState.projectName"
+                           required
+            >
+                <template #default="{invalid}">
+                    <p-text-input :value="projectName"
+                                  class="block w-full"
+                                  :invalid="invalid"
+                                  :placeholder="$t('PROJECT.DETAIL.MODAL_CREATE_PROJECT_PLACEHOLDER')"
+                                  @update:value="setForm('projectName', $event)"
+                    />
+                </template>
+            </p-field-group>
+            <p-field-group :label="$t('PROJECT.DETAIL.ACCESS')"
+                           required
+            >
+                <template #default>
+                    <p-select-dropdown class="access-dropdown"
+                                       :menu="state.accessMenuItems"
+                                       :selected="state.selectedAccess"
+                                       use-fixed-menu-style
+                                       @select="handleSelectAccess"
+                    >
+                        <template #dropdown-button>
+                            <div class="text-wrapper">
+                                <p-i :name="state.selectedAccess === 'PRIVATE' ? 'ic_lock-filled' : 'ic_globe-filled'"
+                                     width="1rem"
+                                     height="1rem"
+                                     :color="state.selectedAccess === 'PRIVATE' ? gray[900] : indigo[600]"
+                                />
+                                <span>{{ state.selectedAccess === 'PRIVATE' ? $t('PROJECT.LANDING.ONLY_PEOPLE_INVITED') : $t('PROJECT.LANDING.EVERYONE_AT_THIS_WORKSPACE') }}</span>
+                                <span class="sub-text">
+                                    {{ $t('PROJECT.LANDING.CAN_ACCESS_TO_THIS_PROJECT') }}
+                                </span>
+                            </div>
+                        </template>
+                    </p-select-dropdown>
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.project-form-modal {
+    .access-dropdown {
+        width: 100%;
+        .text-wrapper {
+            @apply text-gray-800 text-label-md;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+        .sub-text {
+            @apply text-gray-500;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue b/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
new file mode 100644
index 0000000000..205dacd07b
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
@@ -0,0 +1,131 @@
+<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 { useProjectGroupMutations } from '@/services/project/v-shared/composables/mutations/use-project-group-mutations';
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import { useProjectGroupNames } from '@/services/project/v-shared/composables/use-project-group-names';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const props = defineProps<{
+    targetParentGroupId?: string;
+}>();
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.projectFormModalVisible
+&& projectPageModalStore.state.targetType === 'projectGroup');
+const targetId = computed(() => projectPageModalStore.state.targetId);
+const updateMode = computed(() => projectPageModalStore.state.targetId !== undefined);
+
+/* project group */
+const { data: projectGroup } = useProjectGroupQuery({
+    projectGroupId: targetId,
+    enabled: visible,
+});
+
+
+/* project group names */
+const projectGroupNames = useProjectGroupNames({
+    projectGroupId: targetId,
+    enabled: visible,
+});
+
+/* form */
+const {
+    forms: { projectGroupName },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    initForm,
+} = useFormValidator({
+    projectGroupName: undefined as string|undefined,
+}, {
+    projectGroupName: (val?: string) => {
+        if (!val?.length) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_REQUIRED');
+        if (val.length > 40) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_LENGTH');
+        if (projectGroupNames.value.includes(val)) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_DUPLICATED');
+        return true;
+    },
+});
+watch([visible, projectGroup], async ([v, pg]) => {
+    if (!v) return;
+    if (updateMode.value) {
+        setForm('projectGroupName', pg?.name);
+    } else {
+        initForm();
+    }
+}, { immediate: true });
+
+
+/* mutations */
+const { createProjectGroup, updateProjectGroup, isProcessing } = useProjectGroupMutations();
+
+/* Event */
+const confirm = async () => {
+    if (isProcessing.value) return;
+    if (!projectGroupName.value) return;
+    if (!isAllValid.value) return;
+
+    if (updateMode.value) {
+        if (!targetId.value) {
+            ErrorHandler.handleRequestError(new Error('projectGroupId is required'), 'projectGroupId is required', true);
+            return;
+        }
+        const hasChanged = projectGroup.value?.name !== projectGroupName.value;
+        if (hasChanged) {
+            updateProjectGroup({
+                name: projectGroupName.value,
+                project_group_id: targetId.value,
+            });
+        }
+    } else {
+        createProjectGroup({
+            name: projectGroupName.value,
+            parent_group_id: props.targetParentGroupId,
+        });
+    }
+    projectPageModalStore.closeFormModal();
+};
+
+</script>
+
+<template>
+    <p-button-modal :header-title="updateMode ? $t('PROJECT.LANDING.MODAL_UPDATE_PROJECT_GROUP_TITLE') : $t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_TITLE')"
+                    centered
+                    size="sm"
+                    fade
+                    backdrop
+                    :visible="visible"
+                    :disabled="isProcessing || !isAllValid || projectGroup?.name === projectGroupName"
+                    @close="projectPageModalStore.closeFormModal"
+                    @cancel="projectPageModalStore.closeFormModal"
+                    @closed="projectPageModalStore.resetTarget"
+                    @confirm="confirm"
+    >
+        <template #body>
+            <p-field-group :label="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_LABEL')"
+                           :invalid-text="invalidTexts.projectGroupName"
+                           :invalid="invalidState.projectGroupName"
+                           required
+            >
+                <template #default="{invalid}">
+                    <p-text-input :value="projectGroupName"
+                                  class="block w-full"
+                                  :invalid="invalid"
+                                  :placeholder="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_PLACEHOLDER')"
+                                  @keydown.enter="confirm"
+                                  @update:value="setForm('projectGroupName', $event)"
+                    />
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue b/apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue
new file mode 100644
index 0000000000..243f696fa3
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue
@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import {
+    computed, onMounted, onUnmounted, ref, watch,
+} from 'vue';
+
+import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
+
+import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
+import { i18n } from '@/translations';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useProjectGroupMutations } from '@/services/project/v-shared/composables/mutations/use-project-group-mutations';
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
+import { useProjectGroupNames } from '@/services/project/v-shared/composables/use-project-group-names';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => !!projectPageModalStore.state.renameModalVisible && projectPageModalStore.state.targetType === 'projectGroup');
+const updateMode = computed(() => projectPageModalStore.state.targetId !== undefined);
+
+/* project group */
+const projectGroupId = computed(() => (projectPageModalStore.state.targetType === 'projectGroup'
+    ? projectPageModalStore.state.targetId
+    : undefined));
+const { data: projectGroup, setQueryData, invalidateAllQueries } = useProjectGroupQuery({
+    projectGroupId,
+});
+const parentGroupId = computed(() => (projectGroup.value?.parent_group_id ? projectGroup.value.parent_group_id : undefined));
+
+/* modal active state */
+const hasMounted = ref(false);
+onMounted(() => {
+    hasMounted.value = true;
+});
+onUnmounted(() => {
+    hasMounted.value = false;
+});
+
+/* project group names */
+const projectGroupNames = useProjectGroupNames({
+    projectGroupId: computed(() => (updateMode.value ? undefined : projectGroupId.value)),
+    enabled: visible,
+});
+
+/* form */
+const {
+    forms: { projectGroupName },
+    invalidState,
+    invalidTexts,
+    setForm, isAllValid,
+    initForm, resetValidations,
+} = useFormValidator({
+    projectGroupName: undefined as string|undefined,
+}, {
+    projectGroupName: (val?: string) => {
+        if (!val?.length) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_REQUIRED');
+        if (val.length > 40) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_LENGTH');
+        if (projectGroupNames.value.includes(val)) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_DUPLICATED');
+        return true;
+    },
+});
+watch(visible, async (v) => {
+    if (!v) return;
+    if (updateMode.value) {
+        setForm('projectGroupName', projectGroup.value?.name);
+        resetValidations();
+    } else {
+        initForm();
+    }
+}, { immediate: true });
+
+
+/* mutations */
+const { createProjectGroup, updateProjectGroup, isProcessing } = useProjectGroupMutations();
+
+/* Event */
+const confirm = async () => {
+    if (isProcessing.value) return;
+    if (!projectGroupName.value) return;
+    if (!isAllValid.value) return;
+
+    let result: ProjectGroupModel|undefined;
+
+    if (updateMode.value) {
+        if (!projectGroupId.value) {
+            ErrorHandler.handleRequestError(new Error('projectGroupId is required'), 'projectGroupId is required', true);
+            return;
+        }
+        const hasChanged = projectGroup.value?.name !== projectGroupName.value;
+        result = hasChanged ? await updateProjectGroup({
+            name: projectGroupName.value,
+            project_group_id: projectGroupId.value,
+        }) : projectGroup.value;
+        if (result) setQueryData(result);
+    } else {
+        result = await createProjectGroup({
+            name: projectGroupName.value,
+            parent_group_id: parentGroupId.value,
+        });
+        invalidateAllQueries();
+    }
+    projectPageModalStore.closeRenameModal();
+};
+
+</script>
+
+<template>
+    <p-button-modal :header-title="updateMode ? $t('PROJECT.LANDING.MODAL_UPDATE_PROJECT_GROUP_TITLE') : $t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_TITLE')"
+                    centered
+                    size="sm"
+                    fade
+                    backdrop
+                    :visible="visible"
+                    :disabled="isProcessing || !isAllValid || projectGroup?.name === projectGroupName"
+                    @close="projectPageModalStore.closeRenameModal()"
+                    @cancel="projectPageModalStore.closeRenameModal()"
+                    @closed="projectPageModalStore.resetTarget()"
+                    @confirm="confirm"
+    >
+        <template #body>
+            <p-field-group :label="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_LABEL')"
+                           :invalid-text="invalidTexts.projectGroupName"
+                           :invalid="invalidState.projectGroupName"
+                           required
+            >
+                <template #default="{invalid}">
+                    <p-text-input :value="projectGroupName"
+                                  class="block w-full"
+                                  :invalid="invalid"
+                                  :placeholder="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_PLACEHOLDER')"
+                                  @keydown.enter="confirm"
+                                  @update:value="setForm('projectGroupName', $event)"
+                    />
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectMoveModal.vue b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
index 3e384bf981..9c44e22b52 100644
--- a/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { PButtonModal, PRadio, PRadioGroup } from '@cloudforet/mirinae';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
+import { PButtonModal, PRadio, PRadioGroup } from '@cloudforet/mirinae';
 
-import type { ProjectGroupChangeParentGroupParameters } from '@/api-clients/identity/project-group/schema/api-verbs/change-parent-group';
-import type { ProjectChangeProjectGroupParameters } from '@/api-clients/identity/project/schema/api-verbs/change-project-group';
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
 import { i18n } from '@/translations';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
@@ -21,11 +21,10 @@ import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdow
 
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
-const emit = defineEmits(['moved']);
-
 const projectPageModalStore = useProjectPageModalStore();
-const isProject = computed(() => !!projectPageModalStore.state.targetId);
-const targetId = computed(() => projectPageModalStore.state.targetId || projectPageModalStore.state.targetId);
+const visible = computed(() => projectPageModalStore.state.moveModalVisible && !!projectPageModalStore.state.targetId);
+const isProject = computed(() => projectPageModalStore.state.targetType === 'project');
+const targetId = computed(() => projectPageModalStore.state.targetId);
 
 const allReferenceStore = useAllReferenceStore();
 const storeState = reactive({
@@ -65,28 +64,41 @@ const getIsValid = (_isProject: boolean, selectProjectGroup: boolean, selectedPr
     return true;
 };
 
-/* Api */
-const changeProjectGroup = async () => {
-    try {
+/* mutations */
+const { projectAPI, projectListQueryKey, projectQueryKey } = useProjectApi();
+const { projectGroupAPI, projectGroupListQueryKey, projectGroupQueryKey } = useProjectGroupApi();
+const queryClient = useQueryClient();
+
+const { mutateAsync: changeProjectGroup } = useMutation({
+    mutationFn: async () => {
         if (!targetId.value) throw new Error('No target id');
         const _projectGroupId = state.selectProjectGroup ? state.selectedProjectGroupIdList[0] : null;
         if (isProject.value) {
-            await SpaceConnector.clientV2.identity.project.changeProjectGroup<ProjectChangeProjectGroupParameters>({
+            await projectAPI.changeProjectGroup({
                 project_id: targetId.value,
                 project_group_id: _projectGroupId,
             });
         } else {
-            await SpaceConnector.clientV2.identity.projectGroup.changeParentGroup<ProjectGroupChangeParentGroupParameters>({
+            await projectGroupAPI.changeParentGroup({
                 project_group_id: targetId.value,
                 parent_group_id: _projectGroupId,
             });
         }
+    },
+    onSuccess: () => {
         showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
-        emit('moved');
-    } catch (e) {
+        if (isProject.value) {
+            queryClient.invalidateQueries({ queryKey: projectListQueryKey.value });
+            queryClient.invalidateQueries({ queryKey: [...projectQueryKey.value, targetId.value] });
+        } else {
+            queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+            queryClient.invalidateQueries({ queryKey: [...projectGroupQueryKey.value, targetId.value] });
+        }
+    },
+    onError: (e) => {
         ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
-    }
-};
+    },
+});
 
 /* Event */
 const handleChangeSelectProjectGroup = (value: boolean) => {
@@ -97,6 +109,7 @@ const handleSelectProjectGroup = (projectGroupTreeNodeData: ProjectTreeNodeData[
 };
 const handleConfirm = async () => {
     await changeProjectGroup();
+    projectPageModalStore.closeMoveModal();
 };
 
 /* Watch */
@@ -113,9 +126,10 @@ watch(() => state.originParentGroupId, (_id?: string) => {
                     fade
                     backdrop
                     :disabled="!state.isValid"
-                    :visible="projectPageModalStore.state.moveModalVisible"
+                    :visible="visible"
                     @close="projectPageModalStore.closeMoveModal()"
                     @cancel="projectPageModalStore.closeMoveModal()"
+                    @closed="projectPageModalStore.resetTarget()"
                     @confirm="handleConfirm"
     >
         <template #body>
diff --git a/apps/web/src/services/project/v2/components/ProjectTagsModal.vue b/apps/web/src/services/project/v2/components/ProjectTagsModal.vue
index 1a16a5fb2c..e69b40ed57 100644
--- a/apps/web/src/services/project/v2/components/ProjectTagsModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectTagsModal.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import {
-    computed, onMounted, ref,
+    computed, ref, watch,
 } from 'vue';
 
 import { useMutation } from '@tanstack/vue-query';
+import { cloneDeep } from 'lodash';
 
 import {
     PButtonModal,
@@ -11,7 +12,10 @@ import {
 
 
 import type { Tags } from '@/api-clients/_common/schema/model';
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
+import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
 import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
 import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -20,41 +24,70 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import type { Tag } from '@/common/modules/tags/type';
 
 import ProjectTagsInputGroup from '@/services/project/v-shared/components/ProjectTagsInputGroup.vue';
+import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
 import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 
 const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.manageTagsModalVisible && !!projectPageModalStore.state.targetId);
+const isProject = computed(() => projectPageModalStore.state.targetType === 'project');
+const targetId = computed(() => projectPageModalStore.state.targetId);
 
 /* project */
-const { data: project, isLoading, setQueryData: setProjectQueryData } = useProjectQuery({
-    projectId: computed(() => projectPageModalStore.state.targetId),
-    enabled: computed(() => projectPageModalStore.state.manageTagsModalVisible),
+const { data: project, isLoading: projectLoading, setQueryData: setProjectQueryData } = useProjectQuery({
+    projectId: targetId,
+    enabled: computed(() => visible.value && isProject.value),
+});
+
+/* project group */
+const { data: projectGroup, isLoading: projectGroupLoading, setQueryData: setProjectGroupQueryData } = useProjectGroupQuery({
+    projectGroupId: targetId,
+    enabled: computed(() => visible.value && !isProject.value),
+});
+
+/* merged states */
+const isLoading = computed(() => {
+    if (isProject.value) return projectLoading.value;
+    return projectGroupLoading.value;
+});
+const tags = computed(() => {
+    if (isProject.value) {
+        return project.value?.tags ?? {};
+    }
+    return projectGroup.value?.tags ?? {};
 });
-const tags = computed(() => project.value?.tags || {});
 
 
 /* Form */
 const newTags = ref<Tags>({});
 const isTagsValid = ref(false);
-onMounted(() => {
-    newTags.value = { ...tags.value };
+watch([visible, tags], ([v, t]) => {
+    if (!v) return;
+    newTags.value = cloneDeep(t);
 });
 
 /* Mutation */
 const { projectAPI } = useProjectApi();
+const { projectGroupAPI } = useProjectGroupApi();
 const { mutate: updateTags, isPending: isUpdating } = useMutation({
-    mutationFn: (_newTags: Tag) => {
+    mutationFn: (_newTags: Tag): Promise<ProjectGroupModel|ProjectModel> => {
         if (!projectPageModalStore.state.targetId) throw new Error('Project ID is not defined');
-        return projectAPI.update({
-            project_id: projectPageModalStore.state.targetId,
+        if (isProject.value) {
+            return projectAPI.update({
+                project_id: projectPageModalStore.state.targetId,
+                tags: _newTags,
+            });
+        }
+        return projectGroupAPI.update({
+            project_group_id: projectPageModalStore.state.targetId,
             tags: _newTags,
         });
     },
     onSuccess: (data) => {
-        setProjectQueryData(data);
+        if (isProject.value) setProjectQueryData(data);
+        else setProjectGroupQueryData(data as ProjectGroupModel);
         showSuccessMessage(i18n.t('COMMON.TAGS.ALT_S_UPDATE'), '');
-        projectPageModalStore.closeManageTagsModal();
     },
     onError: (e) => {
         ErrorHandler.handleRequestError(e, i18n.t('COMMON.TAGS.ALT_E_UPDATE'));
@@ -65,9 +98,10 @@ const { mutate: updateTags, isPending: isUpdating } = useMutation({
 const handleUpdateTags = (_tags: Tags) => {
     newTags.value = _tags;
 };
-const handleSaveTags = () => {
+const handleSaveTags = async () => {
     if (!isTagsValid.value) return;
-    updateTags(newTags.value);
+    await updateTags(newTags.value);
+    projectPageModalStore.closeManageTagsModal();
 };
 </script>
 
@@ -79,11 +113,12 @@ const handleSaveTags = () => {
         :fade="true"
         :backdrop="true"
         size="sm"
-        :visible="projectPageModalStore.state.manageTagsModalVisible"
+        :visible="visible"
         :disabled="!isTagsValid"
         :loading="isUpdating"
         @close="projectPageModalStore.closeManageTagsModal()"
         @cancel="projectPageModalStore.closeManageTagsModal()"
+        @closed="projectPageModalStore.resetTarget()"
         @confirm="handleSaveTags"
     >
         <template #body>
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-query.ts
index 5c13039744..5e50653df4 100644
--- a/apps/web/src/services/project/v2/composables/queries/use-project-query.ts
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-query.ts
@@ -12,7 +12,7 @@ export const useProjectQuery = ({
   projectId: Ref<string|undefined>;
 enabled?: Ref<boolean>|boolean;
 }) => {
-    const { projectAPI, projectQueryKey } = useProjectApi();
+    const { projectAPI, projectQueryKey, projectListQueryKey } = useProjectApi();
     const projectQuery = useQuery({
         queryKey: computed(() => [...projectQueryKey.value, projectId.value]),
         queryFn: () => projectAPI.get({ project_id: projectId.value as string }),
@@ -35,7 +35,11 @@ enabled?: Ref<boolean>|boolean;
         queryClient.setQueryData([...projectQueryKey.value, projectId.value], newData);
     };
 
+    const invalidateAllQueries = () => {
+        queryClient.invalidateQueries({ queryKey: projectListQueryKey.value });
+    };
+
     return {
-        ...projectQuery, invalidateQuery, setQueryData,
+        ...projectQuery, invalidateQuery, 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 e8aceea430..a28ff45716 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core';
 import {
-    computed, onUnmounted, reactive, ref, toRef,
+    computed,
+    toRef,
 } from 'vue';
 
-import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
-
-import { i18n } from '@/translations';
-
-import { indigo, peacock } from '@/styles/colors';
-
 import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
 import ProjectAndGroupListPanel from '@/services/project/v2/components/ProjectAndGroupListPanel.vue';
 import ProjectDeleteModal from '@/services/project/v2/components/ProjectDeleteModal.vue';
+import ProjectFormModal from '@/services/project/v2/components/ProjectFormModal.vue';
+import ProjectGroupFormModal from '@/services/project/v2/components/ProjectGroupFormModal.vue';
 import ProjectGroupMemberManagementModal from '@/services/project/v2/components/ProjectGroupMemberManagementModal.vue';
+import ProjectGroupRenameModal from '@/services/project/v2/components/ProjectGroupRenameModal.vue';
 import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue';
 import ProjectMemberInviteModal from '@/services/project/v2/components/ProjectMemberInviteModal.vue';
 import ProjectMemberManagementModal from '@/services/project/v2/components/ProjectMemberManagementModal.vue';
 import ProjectMoveModal from '@/services/project/v2/components/ProjectMoveModal.vue';
 import ProjectTagsModal from '@/services/project/v2/components/ProjectTagsModal.vue';
+import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
 import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
@@ -28,57 +26,30 @@ const props = defineProps<{
 
 /* project or group */
 const { projectGroupId, projectId } = useProjectOrGroupId(toRef(props, 'projectGroupOrProjectId'));
-const { data: projectGroup } = useProjectGroupQuery({
-    projectGroupId,
-});
 
 
 /* modals */
 const projectPageModelStore = useProjectPageModalStore();
 
-const menuRef = ref<any|null>(null);
-
-const state = reactive({
-    createMenuVisible: false,
-    createDropdownMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
-        {
-            name: 'project',
-            label: i18n.t('PROJECT.LANDING.PROJECT'),
-            icon: 'ic_document-filled',
-            iconColor: peacock[600],
-        },
-        {
-            name: 'projectGroup',
-            label: i18n.t('PROJECT.LANDING.PROJECT_GROUP'),
-            icon: 'ic_folder-filled',
-            iconColor: indigo[500],
-        },
-    ])),
-    projectGroupModalVisible: false,
-    projectGroupMemberManagementModalVisible: false,
-    projectGroupMemberCount: computed<number|undefined>(() => projectGroup.value?.users?.length),
+/* target parent group id */
+const { data: project } = useProjectQuery({
+    projectId,
+    enabled: computed(() => !!projectId),
 });
-
-onClickOutside(menuRef, () => {
-    state.createMenuVisible = false;
+const { data: projectGroup } = useProjectGroupQuery({
+    projectGroupId,
+    enabled: computed(() => !!projectGroupId),
 });
-
-const handleMoved = () => {
-    // projectTreeStore.refreshProjectTree();
-};
-
-const handleRefreshTree = () => {
-    // projectTreeStore.refreshProjectTree();
-};
-
-
-onUnmounted(() => {
-    // projectTreeStore.disposeProjectTree();
+const targetParentGroupId = computed<string|undefined>(() => {
+    if (project.value) return project.value.project_group_id;
+    if (projectGroup.value) return projectGroup.value.project_group_id;
+    return undefined;
 });
+
 </script>
 
 <template>
-    <div class="page-wrapper">
+    <div class="flex flex-col w-full h-full">
         <project-header :project-id="projectId"
                         :project-group-id="projectGroupId"
         />
@@ -86,62 +57,13 @@ onUnmounted(() => {
         <project-group-member-management-modal />
         <project-member-management-modal />
         <project-delete-modal :skip-redirect="!!projectPageModelStore.state.targetId &&
-                                  (projectPageModelStore.state.targetId === projectGroupId || projectPageModelStore.state.targetId === projectId)"
-                              @confirm="handleRefreshTree"
+            (projectPageModelStore.state.targetId === projectGroupId || projectPageModelStore.state.targetId === projectId)"
         />
-        <project-move-modal @moved="handleMoved" />
+        <project-move-modal />
         <project-member-invite-modal :project-id="projectId" />
         <project-tags-modal />
+        <project-form-modal :target-parent-group-id="targetParentGroupId" />
+        <project-group-form-modal :target-parent-group-id="targetParentGroupId" />
+        <project-group-rename-modal />
     </div>
 </template>
-
-<style lang="postcss" scoped>
-/* right contents */
-.page-wrapper {
-    @apply flex flex-col w-full h-full;
-}
-
-.title-right-button-wrapper {
-    display: inline-flex;
-    align-items: center;
-}
-.create-context-menu {
-    @apply absolute;
-    top: 100%;
-    right: 0;
-    z-index: 10;
-    width: max-content;
-}
-.create-button-wrapper {
-    @apply relative inline-block;
-    height: 2rem;
-}
-
-.parents-info {
-    @apply flex items-center text-gray-900;
-    min-height: 1rem;
-    margin-bottom: 0.25rem;
-    .group-name {
-        @apply inline-flex items-center text-xs;
-    }
-    .text {
-        @apply opacity-50;
-        &.link {
-            @apply cursor-pointer;
-            &:hover {
-                @apply opacity-100;
-            }
-        }
-    }
-}
-
-.card-container {
-    @apply flex-grow;
-}
-
-/* custom design-system component - p-heading */
-:deep(.p-heading) {
-    @apply border-none;
-    padding-bottom: 0;
-}
-</style>
diff --git a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
index 278cce665d..74c7830015 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
@@ -9,6 +9,7 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         moveModalVisible: false,
         inviteMemberModalVisible: false,
         manageTagsModalVisible: false,
+        renameModalVisible: false,
         projectFormModalVisible: false,
         targetId: '' as string|undefined,
         targetType: undefined as 'project'|'projectGroup'|undefined,
@@ -85,6 +86,20 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         closeManageTagsModal() {
             state.manageTagsModalVisible = false;
         },
+        // rename
+        openProjectRenameModal(targetProjectId: string) {
+            state.targetId = targetProjectId;
+            state.targetType = 'project';
+            state.renameModalVisible = true;
+        },
+        openProjectGroupRenameModal(targetProjectGroupId: string) {
+            state.targetId = targetProjectGroupId;
+            state.targetType = 'projectGroup';
+            state.renameModalVisible = true;
+        },
+        closeRenameModal() {
+            state.renameModalVisible = false;
+        },
         // form
         openCreateProjectGroupFormModal() {
             state.targetId = undefined;
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index dd356d1b3e..98f641da38 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -97329,6 +97329,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>RENAME</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>REPORT_CANCEL</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index b34c2d3ab0..0601f0fa5d 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -5276,6 +5276,7 @@
 			"PROJECT_ALERT_ACTIVATION_DESC_2": "Click ‘Activate Alert’ to receive integrated external events or manage of this project.",
 			"PROJECT_ID": "Project ID:",
 			"PROJECT_MEMBER_LABEL": "Labels",
+			"RENAME": "Rename",
 			"REPORT_CANCEL": "Cancel",
 			"REPORT_DESC": "SpaceONE offers monthly report based on this project. We will update more content soon.",
 			"REPORT_DOWNLOAD_FILE_DESC": "* Only PDF, PPTX formats are avilable.",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 316648c55c..9104e4fad0 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -5276,6 +5276,7 @@
 			"PROJECT_ALERT_ACTIVATION_DESC_2": "統合された外部イベントを受信するかこのプロジェクトを管理のためには「通知有効化」をクリックしてください。",
 			"PROJECT_ID": "プロジェクトID：",
 			"PROJECT_MEMBER_LABEL": "ラベル",
+			"RENAME": "",
 			"REPORT_CANCEL": "キャンセル",
 			"REPORT_DESC": "SpaceONEは、プロジェクトベースの月次レポートを提供します。今後提供するコンテンツを追加する予定です",
 			"REPORT_DOWNLOAD_FILE_DESC": "*提供するファイル形式（PDF、PPTX、CSV）",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 2a0db0104d..ee069a166a 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -5276,6 +5276,7 @@
 			"PROJECT_ALERT_ACTIVATION_DESC_2": "통합된 외부 이벤트를 수신하거나 이 프로젝트를 관리하려면 '얼럿 활성화' 버튼을 클릭하세요.",
 			"PROJECT_ID": "프로젝트 아이디: ",
 			"PROJECT_MEMBER_LABEL": "레이블",
+			"RENAME": "이름 수정",
 			"REPORT_CANCEL": "취소",
 			"REPORT_DESC": "SpaceONE은 프로젝트를 바탕으로 한 월간 보고서를 제공합니다. 곧 더 많은 콘텐츠를 제공할 예정입니다. ",
 			"REPORT_DOWNLOAD_FILE_DESC": "*제공하는 파일 형식 (PDF, PPTX, CSV)",

From a345e80e63ec31313d1b459003097e16c613cdf9 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:58 +0900
Subject: [PATCH 14/22] feat: enhance ProjectActionDropdownButton and
 ProjectMoveModal components

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../v2/components/ProjectActionDropdownButton.vue    |  1 +
 .../project/v2/components/ProjectMoveModal.vue       | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
index a2e2f390d6..86dbe3aec8 100644
--- a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
+++ b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
@@ -75,6 +75,7 @@ const handleSelectItem = (selectedItem: SelectDropdownMenuItem|string|number) =>
                        button-icon="ic_ellipsis-horizontal"
                        size="sm"
                        :menu="actionItems"
+                       reset-selection-on-menu-close
                        @select="handleSelectItem"
     />
 </template>
diff --git a/apps/web/src/services/project/v2/components/ProjectMoveModal.vue b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
index 9c44e22b52..ce78af2b74 100644
--- a/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
@@ -113,9 +113,15 @@ const handleConfirm = async () => {
 };
 
 /* Watch */
-watch(() => state.originParentGroupId, (_id?: string) => {
-    if (_id) state.selectedProjectGroupIdList = [_id];
-    else state.selectProjectGroup = false;
+watch([visible, () => state.originParentGroupId], ([v, _id]) => {
+    if (!v) return;
+    if (_id) {
+        state.selectedProjectGroupIdList = [_id];
+        state.selectProjectGroup = true;
+    } else {
+        state.selectedProjectGroupIdList = [];
+        state.selectProjectGroup = false;
+    }
 }, { immediate: true });
 </script>
 

From ce44a774340578f6c4121cddb1d3b8d88ed3bab8 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:34:59 +0900
Subject: [PATCH 15/22] feat: refactor project group mutations and integrate
 them into modals

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../mutations/use-project-group-mutations.ts  | 58 -------------
 .../ProjectMainProjectGroupFormModal.vue      | 43 +++++++++-
 .../ProjectActionDropdownButton.vue           |  8 +-
 .../v2/components/ProjectDeleteModal.vue      | 16 +---
 .../v2/components/ProjectFormModal.vue        | 62 +++++++-------
 .../v2/components/ProjectGroupFormModal.vue   | 51 ++++++++++--
 .../v2/components/ProjectGroupRenameModal.vue | 53 ++++++------
 .../project/v2/pages/ProjectMainPage.vue      | 81 ++++++++++++++-----
 8 files changed, 211 insertions(+), 161 deletions(-)
 delete mode 100644 apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts

diff --git a/apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts b/apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts
deleted file mode 100644
index 49ae2bbe56..0000000000
--- a/apps/web/src/services/project/v-shared/composables/mutations/use-project-group-mutations.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { computed } from 'vue';
-import { useRouter } from 'vue-router/composables';
-
-import { useMutation, useQueryClient } from '@tanstack/vue-query';
-
-import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
-import { i18n } from '@/translations';
-
-import { useProjectGroupReferenceStore } from '@/store/reference/project-group-reference-store';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
-export const useProjectGroupMutations = () => {
-    const { projectGroupAPI, projectGroupQueryKey, projectGroupListQueryKey } = useProjectGroupApi();
-    const queryClient = useQueryClient();
-    const projectGroupStore = useProjectGroupReferenceStore();
-    const router = useRouter();
-    const { mutateAsync: createProjectGroup, isPending: isCreating } = useMutation({
-        mutationFn: projectGroupAPI.create,
-        onSuccess: (data) => {
-            showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT_GROUP'), '');
-            projectGroupStore.sync(data);
-            queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
-            router.replace({
-                name: PROJECT_ROUTE_V2._NAME,
-                params: {
-                    projectGroupOrProjectId: data.project_group_id,
-                },
-            });
-        },
-        onError: (e) => {
-            ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT_GROUP'));
-        },
-    });
-
-    const { mutateAsync: updateProjectGroup, isPending: isUpdating } = useMutation({
-        mutationFn: projectGroupAPI.update,
-        onSuccess: (data) => {
-            showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
-            projectGroupStore.sync(data);
-            queryClient.invalidateQueries({ queryKey: [...projectGroupQueryKey.value, data.project_group_id] });
-            queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
-        },
-        onError: (e) => {
-            ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
-        },
-    });
-
-    const isProcessing = computed(() => isCreating.value || isUpdating.value);
-
-    return {
-        createProjectGroup, updateProjectGroup, isProcessing,
-    };
-};
diff --git a/apps/web/src/services/project/v1/components/ProjectMainProjectGroupFormModal.vue b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupFormModal.vue
index 674ef69259..62fd0f1b4f 100644
--- a/apps/web/src/services/project/v1/components/ProjectMainProjectGroupFormModal.vue
+++ b/apps/web/src/services/project/v1/components/ProjectMainProjectGroupFormModal.vue
@@ -1,21 +1,31 @@
 <script lang="ts" setup>
 import {
-    computed, onMounted, onUnmounted, reactive, ref, toRef, watch,
+    onMounted, onUnmounted, reactive, ref, toRef, watch, computed,
 } from 'vue';
 
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
 import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
 import { i18n } from '@/translations';
 
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useProjectGroupMutations } from '@/services/project/v-shared/composables/mutations/use-project-group-mutations';
 import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
 import { useProjectGroupNames } from '@/services/project/v-shared/composables/use-project-group-names';
 
+
+/* mutations */
+
+
+
+
 interface Props {
     visible: boolean;
     projectGroupId?: string;
@@ -76,8 +86,33 @@ watch(() => props.projectGroupId, async (after) => {
 }, { immediate: true });
 
 
-/* mutations */
-const { createProjectGroup, updateProjectGroup, isProcessing } = useProjectGroupMutations();
+const { projectGroupAPI, projectGroupQueryKey, projectGroupListQueryKey } = useProjectGroupApi();
+const queryClient = useQueryClient();
+const { mutateAsync: createProjectGroup, isPending: isCreating } = useMutation({
+    mutationFn: projectGroupAPI.create,
+    onSuccess: () => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT_GROUP'), '');
+        queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT_GROUP'));
+    },
+});
+
+const { mutateAsync: updateProjectGroup, isPending: isUpdating } = useMutation({
+    mutationFn: projectGroupAPI.update,
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
+        queryClient.invalidateQueries({ queryKey: [...projectGroupQueryKey.value, data.project_group_id] });
+        queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
+    },
+});
+const isProcessing = computed(() => isCreating.value || isUpdating.value);
+
+
 
 /* Event */
 const confirm = async () => {
diff --git a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
index 86dbe3aec8..af945c039a 100644
--- a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
+++ b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
@@ -24,11 +24,11 @@ const actionItems = computed<SelectDropdownMenuItem[]>(() => [
         label: i18n.t('PROJECT.DETAIL.MOVE'),
         icon: 'ic_move',
     },
-    {
+    ...(props.projectId ? [{
         name: 'tags',
         label: i18n.t('PROJECT.DETAIL.TAGS'),
         icon: 'ic_label',
-    },
+    }] : []),
     { type: 'divider', name: 'divider' },
     {
         name: 'delete',
@@ -44,9 +44,9 @@ const handleSelectItem = (selectedItem: SelectDropdownMenuItem|string|number) =>
     if (typeof selected === 'object') selected = (selectedItem as SelectDropdownMenuItem).name;
     if (selected === 'rename') {
         if (props.projectId) {
-            projectPageModalStore.openProjectRenameModal(props.projectId);
+            projectPageModalStore.openEditProjectFormModal(props.projectId);
         } else if (props.projectGroupId) {
-            projectPageModalStore.openProjectGroupRenameModal(props.projectGroupId);
+            projectPageModalStore.openEditProjectGroupFormModal(props.projectGroupId);
         }
     } else if (selected === 'move') {
         if (props.projectId) {
diff --git a/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
index 84dea7b316..a8fd0e7130 100644
--- a/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDeleteModal.vue
@@ -2,7 +2,6 @@
 import {
     computed, reactive,
 } from 'vue';
-import { useRouter } from 'vue-router/composables';
 
 import { useQueryClient } from '@tanstack/vue-query';
 
@@ -21,21 +20,15 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 
-interface Props {
-    skipRedirect?: boolean;
-}
-
-const props = defineProps<Props>();
+const emit = defineEmits(['deleted']);
 
 const projectPageModalStore = useProjectPageModalStore();
 const visible = computed(() => projectPageModalStore.state.deleteModalVisible && !!projectPageModalStore.state.targetId);
 const isProject = computed(() => projectPageModalStore.state.targetType === 'project');
 
-const router = useRouter();
 const userWorkspaceStore = useUserWorkspaceStore();
 const favoriteStore = useFavoriteStore();
 const favoriteGetters = favoriteStore.getters;
@@ -58,6 +51,7 @@ const handleConfirmDelete = async () => {
         } else {
             await deleteProjectGroup(projectPageModalStore.state.targetId);
         }
+        emit('deleted');
     } catch (e) {
         if (projectPageModalStore.state.targetType === 'projectGroup') {
             ErrorHandler.handleRequestError(e, _i18n.t('PROJECT.LANDING.ALT_E_DELETE_PROJECT_GROUP', { action: _i18n.t('PROJECT.LANDING.MODAL_DELETE_PROJECT_GROUP.TITLE') }), true);
@@ -67,12 +61,6 @@ const handleConfirmDelete = async () => {
     } finally {
         state.loading = false;
         projectPageModalStore.closeDeleteModal();
-        console.debug('skipRedirect', props.skipRedirect);
-        if (!props.skipRedirect) {
-            await router.replace({
-                name: PROJECT_ROUTE_V2._NAME,
-            });
-        }
     }
 };
 
diff --git a/apps/web/src/services/project/v2/components/ProjectFormModal.vue b/apps/web/src/services/project/v2/components/ProjectFormModal.vue
index f5751c108f..5cf54913ba 100644
--- a/apps/web/src/services/project/v2/components/ProjectFormModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectFormModal.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
-import { useRouter } from 'vue-router/composables';
 
 import { useMutation } from '@tanstack/vue-query';
 
@@ -10,6 +9,7 @@ import {
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
+import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
 import type { ProjectType } from '@/api-clients/identity/project/schema/type';
 import { i18n } from '@/translations';
 
@@ -23,7 +23,6 @@ import { useFormValidator } from '@/common/composables/form-validator';
 import { gray, indigo } from '@/styles/colors';
 
 import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 
@@ -36,6 +35,9 @@ const targetId = computed(() => projectPageModalStore.state.targetId);
 const props = defineProps<{
     targetParentGroupId?: string;
 }>();
+const emit = defineEmits<{(e: 'created', projectGroupId: string): void;
+}>();
+
 const projectStore = useProjectReferenceStore();
 const state = reactive({
     projectNames: computed(() => Object.values(projectStore.getters.projectItems).filter((item) => item.key !== targetId.value).map((p) => p.name)),
@@ -62,7 +64,7 @@ const {
     invalidState,
     invalidTexts,
     setForm, isAllValid,
-    initForm,
+    initForm, resetValidations,
 } = useFormValidator({
     projectName: undefined as string|undefined,
 }, {
@@ -73,7 +75,7 @@ const {
         return true;
     },
 });
-const { data: project, setQueryData: setProjectQueryData, invalidateAllQueries } = useProjectQuery({
+const { data: project, setQueryData, invalidateAllQueries } = useProjectQuery({
     projectId: targetId,
     enabled: visible,
 });
@@ -86,11 +88,11 @@ watch([visible, project], ([v, prj]) => {
     if (prj) {
         setForm('projectName', prj.name);
         state.selectedAccess = prj.project_type ?? 'PRIVATE';
+        resetValidations();
     }
-});
+}, { immediate: true });
 
 /* mutations */
-const router = useRouter();
 const { projectAPI } = useProjectApi();
 const { mutate: createProject, isPending: isCreatingProject } = useMutation({
     mutationFn: ({ projectType, groupId, name }: { projectType: ProjectType, groupId?: string; name: string }) => projectAPI.create({
@@ -100,14 +102,8 @@ const { mutate: createProject, isPending: isCreatingProject } = useMutation({
     }),
     onSuccess: (data) => {
         showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT'), '');
-        projectStore.sync(data);
         invalidateAllQueries();
-        router.replace({
-            name: PROJECT_ROUTE_V2._NAME,
-            params: {
-                projectGroupOrProjectId: data.project_id,
-            },
-        });
+        emit('created', data.project_id);
     },
     onError: (e) => {
         ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT'));
@@ -115,14 +111,14 @@ const { mutate: createProject, isPending: isCreatingProject } = useMutation({
 });
 
 
-const { mutate: updateProject, isPending: isUpdatingProject } = useMutation({
+const { mutateAsync: updateProject, isPending: isUpdatingProject } = useMutation({
     mutationFn: ({ projectId, name }: { projectId: string; name: string }) => projectAPI.update({
         project_id: projectId,
         name,
     }),
     onSuccess: (data) => {
         showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_UPDATE_PROJECT'), '');
-        setProjectQueryData(data);
+        setQueryData(data);
         projectStore.sync(data);
     },
     onError: (e) => {
@@ -130,14 +126,14 @@ const { mutate: updateProject, isPending: isUpdatingProject } = useMutation({
     },
 });
 
-const { mutate: updateProjectType, isPending: isUpdatingProjectType } = useMutation({
+const { mutateAsync: updateProjectType, isPending: isUpdatingProjectType } = useMutation({
     mutationFn: ({ projectId, projectType }: { projectId: string; projectType: ProjectType }) => projectAPI.updateProjectType({
         project_id: projectId,
         project_type: projectType,
     }),
     onSuccess: (data) => {
         showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_UPDATE_PROJECT_TYPE'), '');
-        setProjectQueryData(data);
+        setQueryData(data);
         projectStore.sync(data);
     },
     onError: (e) => {
@@ -152,17 +148,23 @@ const confirm = async () => {
     if (!isAllValid.value) return;
 
     const name = projectName.value?.trim() as string; // always exist
-    if (targetId.value) { // update project
-        updateProject({
-            projectId: targetId.value,
-            name,
-        });
-        updateProjectType({
-            projectId: targetId.value,
-            projectType: state.selectedAccess,
-        });
-    } else { // create project
-        createProject({
+    if (targetId.value) {
+        const promises: Promise<ProjectModel>[] = [];
+        if (name !== project.value?.name) {
+            promises.push(updateProject({
+                projectId: targetId.value,
+                name,
+            }));
+        }
+        if (state.selectedAccess !== project.value?.project_type) {
+            promises.push(updateProjectType({
+                projectId: targetId.value,
+                projectType: state.selectedAccess,
+            }));
+        }
+        await Promise.allSettled(promises);
+    } else {
+        await createProject({
             name,
             projectType: state.selectedAccess,
             groupId: props.targetParentGroupId,
@@ -170,8 +172,8 @@ const confirm = async () => {
     }
     projectPageModalStore.closeFormModal();
 };
-const handleSelectAccess = (selectedAccess: ProjectType) => {
-    state.selectedAccess = selectedAccess;
+const handleSelectAccess = (selectedAccess) => {
+    state.selectedAccess = selectedAccess as ProjectType;
 };
 
 
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue b/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
index 205dacd07b..d87cee6ce2 100644
--- a/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
@@ -3,14 +3,18 @@ import {
     computed, watch,
 } from 'vue';
 
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
 import { i18n } from '@/translations';
 
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 
-import { useProjectGroupMutations } from '@/services/project/v-shared/composables/mutations/use-project-group-mutations';
 import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
 import { useProjectGroupNames } from '@/services/project/v-shared/composables/use-project-group-names';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
@@ -18,6 +22,8 @@ import { useProjectPageModalStore } from '@/services/project/v2/stores/project-p
 const props = defineProps<{
     targetParentGroupId?: string;
 }>();
+const emit = defineEmits<{(e: 'created', projectGroupId: string): void;
+}>();
 
 const projectPageModalStore = useProjectPageModalStore();
 const visible = computed(() => projectPageModalStore.state.projectFormModalVisible
@@ -26,7 +32,7 @@ const targetId = computed(() => projectPageModalStore.state.targetId);
 const updateMode = computed(() => projectPageModalStore.state.targetId !== undefined);
 
 /* project group */
-const { data: projectGroup } = useProjectGroupQuery({
+const { data: projectGroup, setQueryData } = useProjectGroupQuery({
     projectGroupId: targetId,
     enabled: visible,
 });
@@ -66,10 +72,38 @@ watch([visible, projectGroup], async ([v, pg]) => {
 
 
 /* mutations */
-const { createProjectGroup, updateProjectGroup, isProcessing } = useProjectGroupMutations();
+const { projectGroupAPI, projectGroupListQueryKey } = useProjectGroupApi();
+const queryClient = useQueryClient();
+
+const { mutateAsync: createProjectGroup, isPending: isCreating } = useMutation({
+    mutationFn: projectGroupAPI.create,
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_CREATE_PROJECT_GROUP'), '');
+        queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+        emit('created', data.project_group_id);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_CREATE_PROJECT_GROUP'));
+    },
+});
+
+const { mutateAsync: updateProjectGroup, isPending: isUpdating } = useMutation({
+    mutationFn: projectGroupAPI.update,
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
+        setQueryData(data);
+        queryClient.invalidateQueries({ queryKey: projectGroupListQueryKey.value });
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
+    },
+});
+
+const isProcessing = computed(() => isCreating.value || isUpdating.value);
+
 
 /* Event */
-const confirm = async () => {
+const handleConfirm = async () => {
     if (isProcessing.value) return;
     if (!projectGroupName.value) return;
     if (!isAllValid.value) return;
@@ -81,13 +115,13 @@ const confirm = async () => {
         }
         const hasChanged = projectGroup.value?.name !== projectGroupName.value;
         if (hasChanged) {
-            updateProjectGroup({
+            await updateProjectGroup({
                 name: projectGroupName.value,
                 project_group_id: targetId.value,
             });
         }
     } else {
-        createProjectGroup({
+        await createProjectGroup({
             name: projectGroupName.value,
             parent_group_id: props.targetParentGroupId,
         });
@@ -104,11 +138,12 @@ const confirm = async () => {
                     fade
                     backdrop
                     :visible="visible"
+                    :loading="isProcessing"
                     :disabled="isProcessing || !isAllValid || projectGroup?.name === projectGroupName"
                     @close="projectPageModalStore.closeFormModal"
                     @cancel="projectPageModalStore.closeFormModal"
                     @closed="projectPageModalStore.resetTarget"
-                    @confirm="confirm"
+                    @confirm="handleConfirm"
     >
         <template #body>
             <p-field-group :label="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_LABEL')"
@@ -121,7 +156,7 @@ const confirm = async () => {
                                   class="block w-full"
                                   :invalid="invalid"
                                   :placeholder="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_PLACEHOLDER')"
-                                  @keydown.enter="confirm"
+                                  @keydown.enter="handleConfirm"
                                   @update:value="setForm('projectGroupName', $event)"
                     />
                 </template>
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue b/apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue
index 243f696fa3..abeb1747d4 100644
--- a/apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue
@@ -3,19 +3,23 @@ import {
     computed, onMounted, onUnmounted, ref, watch,
 } from 'vue';
 
+import { useMutation } from '@tanstack/vue-query';
+
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
-import type { ProjectGroupModel } from '@/api-clients/identity/project-group/schema/model';
+import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
 import { i18n } from '@/translations';
 
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 
-import { useProjectGroupMutations } from '@/services/project/v-shared/composables/mutations/use-project-group-mutations';
 import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
 import { useProjectGroupNames } from '@/services/project/v-shared/composables/use-project-group-names';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
+
 const projectPageModalStore = useProjectPageModalStore();
 const visible = computed(() => !!projectPageModalStore.state.renameModalVisible && projectPageModalStore.state.targetType === 'projectGroup');
 const updateMode = computed(() => projectPageModalStore.state.targetId !== undefined);
@@ -24,10 +28,9 @@ const updateMode = computed(() => projectPageModalStore.state.targetId !== undef
 const projectGroupId = computed(() => (projectPageModalStore.state.targetType === 'projectGroup'
     ? projectPageModalStore.state.targetId
     : undefined));
-const { data: projectGroup, setQueryData, invalidateAllQueries } = useProjectGroupQuery({
+const { data: projectGroup, setQueryData } = useProjectGroupQuery({
     projectGroupId,
 });
-const parentGroupId = computed(() => (projectGroup.value?.parent_group_id ? projectGroup.value.parent_group_id : undefined));
 
 /* modal active state */
 const hasMounted = ref(false);
@@ -73,33 +76,37 @@ watch(visible, async (v) => {
 
 
 /* mutations */
-const { createProjectGroup, updateProjectGroup, isProcessing } = useProjectGroupMutations();
+const { projectGroupAPI } = useProjectGroupApi();
+
+
+const { mutateAsync: updateProjectGroup, isPending } = useMutation({
+    mutationFn: projectGroupAPI.update,
+    onSuccess: (data) => {
+        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
+        setQueryData(data);
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
+    },
+});
+
 
 /* Event */
 const confirm = async () => {
-    if (isProcessing.value) return;
+    if (isPending.value) return;
     if (!projectGroupName.value) return;
     if (!isAllValid.value) return;
 
-    let result: ProjectGroupModel|undefined;
-
-    if (updateMode.value) {
-        if (!projectGroupId.value) {
-            ErrorHandler.handleRequestError(new Error('projectGroupId is required'), 'projectGroupId is required', true);
-            return;
-        }
-        const hasChanged = projectGroup.value?.name !== projectGroupName.value;
-        result = hasChanged ? await updateProjectGroup({
+    if (!projectGroupId.value) {
+        ErrorHandler.handleRequestError(new Error('projectGroupId is required'), 'projectGroupId is required', true);
+        return;
+    }
+    const hasChanged = projectGroup.value?.name !== projectGroupName.value;
+    if (hasChanged) {
+        updateProjectGroup({
             name: projectGroupName.value,
             project_group_id: projectGroupId.value,
-        }) : projectGroup.value;
-        if (result) setQueryData(result);
-    } else {
-        result = await createProjectGroup({
-            name: projectGroupName.value,
-            parent_group_id: parentGroupId.value,
         });
-        invalidateAllQueries();
     }
     projectPageModalStore.closeRenameModal();
 };
@@ -113,7 +120,7 @@ const confirm = async () => {
                     fade
                     backdrop
                     :visible="visible"
-                    :disabled="isProcessing || !isAllValid || projectGroup?.name === projectGroupName"
+                    :disabled="isPending || !isAllValid || projectGroup?.name === projectGroupName"
                     @close="projectPageModalStore.closeRenameModal()"
                     @cancel="projectPageModalStore.closeRenameModal()"
                     @closed="projectPageModalStore.resetTarget()"
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index a28ff45716..91b680839d 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -2,24 +2,34 @@
 import {
     computed,
     toRef,
+    onMounted,
+    ref,
 } from 'vue';
+import { useRouter } from 'vue-router/composables';
 
 import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
 import ProjectAndGroupListPanel from '@/services/project/v2/components/ProjectAndGroupListPanel.vue';
-import ProjectDeleteModal from '@/services/project/v2/components/ProjectDeleteModal.vue';
-import ProjectFormModal from '@/services/project/v2/components/ProjectFormModal.vue';
-import ProjectGroupFormModal from '@/services/project/v2/components/ProjectGroupFormModal.vue';
-import ProjectGroupMemberManagementModal from '@/services/project/v2/components/ProjectGroupMemberManagementModal.vue';
-import ProjectGroupRenameModal from '@/services/project/v2/components/ProjectGroupRenameModal.vue';
 import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue';
-import ProjectMemberInviteModal from '@/services/project/v2/components/ProjectMemberInviteModal.vue';
-import ProjectMemberManagementModal from '@/services/project/v2/components/ProjectMemberManagementModal.vue';
-import ProjectMoveModal from '@/services/project/v2/components/ProjectMoveModal.vue';
-import ProjectTagsModal from '@/services/project/v2/components/ProjectTagsModal.vue';
 import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-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';
 
+
+/* modals */
+const isModalLoadReady = ref(false);
+onMounted(() => {
+    isModalLoadReady.value = true;
+});
+const ProjectGroupMemberManagementModal = () => import('@/services/project/v2/components/ProjectGroupMemberManagementModal.vue');
+const ProjectMemberManagementModal = () => import('@/services/project/v2/components/ProjectMemberManagementModal.vue');
+const ProjectDeleteModal = () => import('@/services/project/v2/components/ProjectDeleteModal.vue');
+const ProjectMoveModal = () => import('@/services/project/v2/components/ProjectMoveModal.vue');
+const ProjectMemberInviteModal = () => import('@/services/project/v2/components/ProjectMemberInviteModal.vue');
+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 props = defineProps<{
     projectGroupOrProjectId?: string;
 }>();
@@ -46,6 +56,27 @@ const targetParentGroupId = computed<string|undefined>(() => {
     return undefined;
 });
 
+/* after deleted */
+const router = useRouter();
+const handleDeleted = () => {
+    const id = projectPageModelStore.state.targetId;
+    if (id && (id === projectGroupId.value || id === projectId.value)) {
+        router.replace({
+            name: PROJECT_ROUTE_V2._NAME,
+        });
+    }
+};
+
+/* after created */
+const handleCreated = (id: string) => {
+    router.replace({
+        name: PROJECT_ROUTE_V2._NAME,
+        params: {
+            projectGroupOrProjectId: id,
+        },
+    });
+};
+
 </script>
 
 <template>
@@ -54,16 +85,26 @@ const targetParentGroupId = computed<string|undefined>(() => {
                         :project-group-id="projectGroupId"
         />
         <project-and-group-list-panel />
-        <project-group-member-management-modal />
-        <project-member-management-modal />
-        <project-delete-modal :skip-redirect="!!projectPageModelStore.state.targetId &&
-            (projectPageModelStore.state.targetId === projectGroupId || projectPageModelStore.state.targetId === projectId)"
-        />
-        <project-move-modal />
-        <project-member-invite-modal :project-id="projectId" />
-        <project-tags-modal />
-        <project-form-modal :target-parent-group-id="targetParentGroupId" />
-        <project-group-form-modal :target-parent-group-id="targetParentGroupId" />
-        <project-group-rename-modal />
+
+        <template v-if="isModalLoadReady">
+            <keep-alive>
+                <project-group-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'projectGroup'" />
+                <project-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'project'" />
+                <project-delete-modal v-if="projectPageModelStore.state.deleteModalVisible"
+                                      @deleted="handleDeleted"
+                />
+                <project-move-modal v-if="projectPageModelStore.state.moveModalVisible" />
+                <project-member-invite-modal v-if="projectPageModelStore.state.inviteMemberModalVisible" />
+                <project-tags-modal v-if="projectPageModelStore.state.manageTagsModalVisible" />
+                <project-form-modal v-if="projectPageModelStore.state.projectFormModalVisible && projectPageModelStore.state.targetType === 'project'"
+                                    :target-parent-group-id="targetParentGroupId"
+                                    @created="handleCreated"
+                />
+                <project-group-form-modal v-if="projectPageModelStore.state.projectFormModalVisible && projectPageModelStore.state.targetType === 'projectGroup'"
+                                          :target-parent-group-id="targetParentGroupId"
+                                          @created="handleCreated"
+                />
+            </keep-alive>
+        </template>
     </div>
 </template>

From 37dac89d46294276cc58fbcf7d5ec8f58c550d78 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:35:00 +0900
Subject: [PATCH 16/22] feat: update LSBStarredTree component layout

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../navigations/new-lsb/LSBStarredTree.vue    |   6 +-
 .../ProjectGroupMemberManagementModal.vue     |  20 +--
 .../v2/components/ProjectGroupRenameModal.vue | 147 ------------------
 .../v2/stores/project-page-modal-store.ts     |  15 --
 .../data-display/tree/new-tree/PTreeNode.vue  |   2 +-
 5 files changed, 13 insertions(+), 177 deletions(-)
 delete mode 100644 apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue

diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
index 416a7a8ac2..b0a061fe9f 100644
--- a/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
+++ b/apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue
@@ -26,7 +26,9 @@ const props = defineProps<{
         </template>
         <span class="font-bold">{{ $t('COMMON.STARRED') }}</span>
         <template #children>
-            <template v-if="props.items.length > 0">
+            <div v-if="props.items.length > 0"
+                 class="max-h-[21rem] overflow-x-auto"
+            >
                 <l-s-b-item v-for="item in props.items"
                             :id="item.id"
                             :key="item.id"
@@ -37,7 +39,7 @@ const props = defineProps<{
                             :favorite-options="item.favoriteOptions"
                             favorite-visibility="hovered-only"
                 />
-            </template>
+            </div>
             <p-empty v-else>
                 {{ $t('COMMON.STARRED_NO_DATA') }}
             </p-empty>
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue b/apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue
index 2bf62793b5..feebdfc712 100644
--- a/apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectGroupMemberManagementModal.vue
@@ -12,7 +12,6 @@ import {
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
-import type { ProjectGroupAddUsersParameters } from '@/api-clients/identity/project-group/schema/api-verbs/add-users';
 import type { ProjectGroupRemoveUsersParameters } from '@/api-clients/identity/project-group/schema/api-verbs/remove-users';
 import { i18n } from '@/translations';
 
@@ -38,11 +37,9 @@ const readonlyMode = computed<boolean>(() => userStore.state.currentRoleInfo?.ro
 
 /* project group users */
 const { projectGroupAPI } = useProjectGroupApi();
-const { data: projectGroup, isLoading, invalidateQuery: invalidateProjectGroupQuery } = useProjectGroupQuery({
+const { data: projectGroup, isLoading, invalidateQuery } = useProjectGroupQuery({
     projectGroupId: computed(() => projectPageModalStore.state.targetId),
-    enabled: computed(() => projectPageModalStore.state.manageMemberModalVisible
-    && projectPageModalStore.state.targetType === 'projectGroup'
-    && !!projectPageModalStore.state.targetId),
+    enabled: visible,
 });
 const projectGroupUserIdList = computed<string[]>(() => projectGroup.value?.users ?? []);
 
@@ -71,7 +68,7 @@ watch([visible, projectGroupUserIdList], async ([v, list]) => {
     if (v && list) {
         selectedUserIdList.value = cloneDeep(list);
     }
-});
+}, { immediate: true });
 const handleUpdateSelected = (items?: SelectDropdownMenuItem[]) => {
     if (!items?.length) return;
     const _selected = items[0];
@@ -92,11 +89,10 @@ const { getRoleImage, getRoleName } = useRoleFormatters();
 /* member mutations */
 const addMember = async (userIds: string[]) => {
     if (!projectPageModalStore.state.targetId) throw new Error('Project Group ID is not defined');
-    const params: ProjectGroupAddUsersParameters = {
+    await projectGroupAPI.addUsers({
         project_group_id: projectPageModalStore.state.targetId,
         users: userIds,
-    };
-    await projectGroupAPI.addUsers(params);
+    });
 };
 const removeMember = async (userIds: string[]) => {
     if (!projectPageModalStore.state.targetId) throw new Error('Project Group ID is not defined');
@@ -106,21 +102,21 @@ const removeMember = async (userIds: string[]) => {
     };
     await projectGroupAPI.removeUsers(params);
 };
-const { mutate: addAndRemoveMember } = useMutation({
+const { mutateAsync: addAndRemoveMember } = useMutation({
     mutationFn: () => {
         const _addedUserIds = difference(selectedUserIdList.value, projectGroupUserIdList.value ?? []);
         const _removedUserIds = difference(projectGroupUserIdList.value, selectedUserIdList.value);
         const promises: Promise<void>[] = [];
         if (_addedUserIds.length) promises.push(addMember(_addedUserIds));
         if (_removedUserIds.length) promises.push(removeMember(_removedUserIds));
-        return Promise.all(promises);
+        return Promise.allSettled(promises);
     },
     onError: (e) => {
         ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP_MEMBER'), true);
     },
     onSuccess: (d) => {
         showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP_MEMBER'), '');
-        if (d.length > 0) invalidateProjectGroupQuery();
+        if (d.length > 0) invalidateQuery();
     },
 });
 
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue b/apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue
deleted file mode 100644
index abeb1747d4..0000000000
--- a/apps/web/src/services/project/v2/components/ProjectGroupRenameModal.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script lang="ts" setup>
-import {
-    computed, onMounted, onUnmounted, ref, watch,
-} from 'vue';
-
-import { useMutation } from '@tanstack/vue-query';
-
-import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
-
-import { useProjectGroupApi } from '@/api-clients/identity/project-group/composables/use-project-group-api';
-import { i18n } from '@/translations';
-
-import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useFormValidator } from '@/common/composables/form-validator';
-
-import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
-import { useProjectGroupNames } from '@/services/project/v-shared/composables/use-project-group-names';
-import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
-
-
-const projectPageModalStore = useProjectPageModalStore();
-const visible = computed(() => !!projectPageModalStore.state.renameModalVisible && projectPageModalStore.state.targetType === 'projectGroup');
-const updateMode = computed(() => projectPageModalStore.state.targetId !== undefined);
-
-/* project group */
-const projectGroupId = computed(() => (projectPageModalStore.state.targetType === 'projectGroup'
-    ? projectPageModalStore.state.targetId
-    : undefined));
-const { data: projectGroup, setQueryData } = useProjectGroupQuery({
-    projectGroupId,
-});
-
-/* modal active state */
-const hasMounted = ref(false);
-onMounted(() => {
-    hasMounted.value = true;
-});
-onUnmounted(() => {
-    hasMounted.value = false;
-});
-
-/* project group names */
-const projectGroupNames = useProjectGroupNames({
-    projectGroupId: computed(() => (updateMode.value ? undefined : projectGroupId.value)),
-    enabled: visible,
-});
-
-/* form */
-const {
-    forms: { projectGroupName },
-    invalidState,
-    invalidTexts,
-    setForm, isAllValid,
-    initForm, resetValidations,
-} = useFormValidator({
-    projectGroupName: undefined as string|undefined,
-}, {
-    projectGroupName: (val?: string) => {
-        if (!val?.length) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_REQUIRED');
-        if (val.length > 40) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_LENGTH');
-        if (projectGroupNames.value.includes(val)) return i18n.t('PROJECT.LANDING.MODAL_PROJECT_CREATE.MODAL_VALIDATION_DUPLICATED');
-        return true;
-    },
-});
-watch(visible, async (v) => {
-    if (!v) return;
-    if (updateMode.value) {
-        setForm('projectGroupName', projectGroup.value?.name);
-        resetValidations();
-    } else {
-        initForm();
-    }
-}, { immediate: true });
-
-
-/* mutations */
-const { projectGroupAPI } = useProjectGroupApi();
-
-
-const { mutateAsync: updateProjectGroup, isPending } = useMutation({
-    mutationFn: projectGroupAPI.update,
-    onSuccess: (data) => {
-        showSuccessMessage(i18n.t('PROJECT.LANDING.ALT_S_UPDATE_PROJECT_GROUP'), '');
-        setQueryData(data);
-    },
-    onError: (e) => {
-        ErrorHandler.handleRequestError(e, i18n.t('PROJECT.LANDING.ALT_E_UPDATE_PROJECT_GROUP'));
-    },
-});
-
-
-/* Event */
-const confirm = async () => {
-    if (isPending.value) return;
-    if (!projectGroupName.value) return;
-    if (!isAllValid.value) return;
-
-    if (!projectGroupId.value) {
-        ErrorHandler.handleRequestError(new Error('projectGroupId is required'), 'projectGroupId is required', true);
-        return;
-    }
-    const hasChanged = projectGroup.value?.name !== projectGroupName.value;
-    if (hasChanged) {
-        updateProjectGroup({
-            name: projectGroupName.value,
-            project_group_id: projectGroupId.value,
-        });
-    }
-    projectPageModalStore.closeRenameModal();
-};
-
-</script>
-
-<template>
-    <p-button-modal :header-title="updateMode ? $t('PROJECT.LANDING.MODAL_UPDATE_PROJECT_GROUP_TITLE') : $t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_TITLE')"
-                    centered
-                    size="sm"
-                    fade
-                    backdrop
-                    :visible="visible"
-                    :disabled="isPending || !isAllValid || projectGroup?.name === projectGroupName"
-                    @close="projectPageModalStore.closeRenameModal()"
-                    @cancel="projectPageModalStore.closeRenameModal()"
-                    @closed="projectPageModalStore.resetTarget()"
-                    @confirm="confirm"
-    >
-        <template #body>
-            <p-field-group :label="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_LABEL')"
-                           :invalid-text="invalidTexts.projectGroupName"
-                           :invalid="invalidState.projectGroupName"
-                           required
-            >
-                <template #default="{invalid}">
-                    <p-text-input :value="projectGroupName"
-                                  class="block w-full"
-                                  :invalid="invalid"
-                                  :placeholder="$t('PROJECT.LANDING.MODAL_CREATE_PROJECT_GROUP_PLACEHOLDER')"
-                                  @keydown.enter="confirm"
-                                  @update:value="setForm('projectGroupName', $event)"
-                    />
-                </template>
-            </p-field-group>
-        </template>
-    </p-button-modal>
-</template>
diff --git a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
index 74c7830015..278cce665d 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
@@ -9,7 +9,6 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         moveModalVisible: false,
         inviteMemberModalVisible: false,
         manageTagsModalVisible: false,
-        renameModalVisible: false,
         projectFormModalVisible: false,
         targetId: '' as string|undefined,
         targetType: undefined as 'project'|'projectGroup'|undefined,
@@ -86,20 +85,6 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         closeManageTagsModal() {
             state.manageTagsModalVisible = false;
         },
-        // rename
-        openProjectRenameModal(targetProjectId: string) {
-            state.targetId = targetProjectId;
-            state.targetType = 'project';
-            state.renameModalVisible = true;
-        },
-        openProjectGroupRenameModal(targetProjectGroupId: string) {
-            state.targetId = targetProjectGroupId;
-            state.targetType = 'projectGroup';
-            state.renameModalVisible = true;
-        },
-        closeRenameModal() {
-            state.renameModalVisible = false;
-        },
         // form
         openCreateProjectGroupFormModal() {
             state.targetId = undefined;
diff --git a/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue b/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
index 027dc7eb5e..19b4baec06 100644
--- a/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
+++ b/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
@@ -141,7 +141,7 @@ const slotProps = computed(() => ({
                          color="inherit transparent"
                          class="toggle-button"
                          :class="{ 'is-collapsed': !isExpanded }"
-                         @click="isExpanded = !isExpanded"
+                         @click.prevent="isExpanded = !isExpanded"
                     />
                 </div>
                 <div class="node-inner-container">

From b8b666ffde23046d0c8d32317204deb3072351bf Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:35:00 +0900
Subject: [PATCH 17/22] feat: refactor ProjectAndGroupListPanel component and
 update project card structure

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../components/ProjectAndGroupListPanel.vue   | 106 +++++++++++-------
 ...ectMainProjectCard.vue => ProjectCard.vue} |   0
 ...jectGroupCard.vue => ProjectGroupCard.vue} |   0
 .../project/v2/pages/ProjectMainPage.vue      |   2 +-
 .../console-translation-2.8.babel             |  26 +++++
 packages/language-pack/en.json                |   3 +
 packages/language-pack/ja.json                |   3 +
 packages/language-pack/ko.json                |   3 +
 8 files changed, 101 insertions(+), 42 deletions(-)
 rename apps/web/src/services/project/v2/components/{ProjectMainProjectCard.vue => ProjectCard.vue} (100%)
 rename apps/web/src/services/project/v2/components/{ProjectMainProjectGroupCard.vue => ProjectGroupCard.vue} (100%)

diff --git a/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue b/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
index 8674a20dd0..1478b6cbf1 100644
--- a/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
+++ b/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 
-import { computed, onMounted, reactive } from 'vue';
+import {
+    computed, onMounted, reactive, ref,
+} from 'vue';
 import { useRoute } from 'vue-router/composables';
 
 import { uniq } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
-    PFieldTitle, PEmpty, PPaneLayout,
+    PFieldTitle, PEmpty, PPaneLayout, PI, PButton,
 } from '@cloudforet/mirinae';
 
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
@@ -21,9 +23,14 @@ import type { ProjectReferenceMap } from '@/store/reference/project-reference-st
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
-import ProjectMainProjectCard from '@/services/project/v2/components/ProjectMainProjectCard.vue';
-import ProjectMainProjectGroupCard from '@/services/project/v2/components/ProjectMainProjectGroupCard.vue';
+import ProjectCard from '@/services/project/v2/components/ProjectCard.vue';
+import ProjectGroupCard from '@/services/project/v2/components/ProjectGroupCard.vue';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
 
+const isCollapsed = ref(false);
+
+const projectPageModalStore = useProjectPageModalStore();
 
 const route = useRoute();
 const allReferenceStore = useAllReferenceStore();
@@ -87,33 +94,60 @@ onMounted(async () => {
 </script>
 
 <template>
-    <p-pane-layout class="project-main">
-        <div class="project-contents">
+    <p-pane-layout class="p-4">
+        <div class="flex justify-between items-center flex-wrap">
+            <div class="flex items-center gap-[2px]">
+                <p-i :name="isCollapsed ? 'ic_chevron-right' : 'ic_chevron-down'"
+                     width="1.5rem"
+                     height="1.5rem"
+                     class="cursor-pointer"
+                     @click="isCollapsed = !isCollapsed"
+                />
+                <div class="text-label-lg font-medium">
+                    {{ $t('PROJECT.LADING.GROUPS_AND_PROJECTS') }}
+                </div>
+            </div>
+            <div class="flex items-center gap-2">
+                <p-button icon-left="ic_plus"
+                          style-type="tertiary"
+                          size="md"
+                          @click="projectPageModalStore.openCreateProjectGroupFormModal()"
+                >
+                    {{ $t('PROJECT.LANDING.CREATE_GROUP') }}
+                </p-button>
+                <p-button icon-left="ic_plus"
+                          style-type="primary"
+                          size="md"
+                          @click="projectPageModalStore.openCreateProjectFormModal()"
+                >
+                    {{ $t('PROJECT.LANDING.CREATE_PROJECT') }}
+                </p-button>
+            </div>
+        </div>
+        <div v-show="!isCollapsed">
             <div v-if="state.paginatedCardList.projectGroup.length"
-                 class="contents-wrapper"
+                 class="pt-6 pb-10"
             >
-                <p-field-title class="content-title"
+                <p-field-title class="title"
                                :label="$t('PROJECT.LANDING.PROJECT_GROUP')"
                 />
                 <div class="card-contents">
-                    <project-main-project-group-card v-for="(projectGroup, idx) in state.paginatedCardList.projectGroup"
-                                                     :key="`project-group-${idx}`"
-                                                     :item="projectGroup"
+                    <project-group-card v-for="(projectGroup, idx) in state.paginatedCardList.projectGroup"
+                                        :key="`project-group-${idx}`"
+                                        :item="projectGroup"
                     />
                 </div>
             </div>
 
-            <div v-if="state.paginatedCardList.project.length"
-                 class="contents-wrapper"
-            >
-                <p-field-title class="content-title"
+            <div v-if="state.paginatedCardList.project.length">
+                <p-field-title class="title"
                                :label="$t('PROJECT.LANDING.PROJECT')"
                 />
                 <div class="card-contents">
-                    <project-main-project-card v-for="(project, idx) in state.paginatedCardList.project"
-                                               :key="`project-${idx}`"
-                                               :item="project"
-                                               :service-account-provider-list="getDistinctProviders(project.id)"
+                    <project-card v-for="(project, idx) in state.paginatedCardList.project"
+                                  :key="`project-${idx}`"
+                                  :item="project"
+                                  :service-account-provider-list="getDistinctProviders(project.id)"
                     />
                 </div>
             </div>
@@ -131,28 +165,18 @@ onMounted(async () => {
 </template>
 
 <style scoped lang="postcss">
-.project-main {
-    padding: 1.5rem 1rem 2.5rem;
-
-    .project-contents {
-        .contents-wrapper {
-            margin-bottom: 1.5rem;
-
-            .content-title {
-                margin-bottom: 0.5rem;
-            }
-        }
-    }
-    .card-contents {
-        @apply grid;
-        gap: 1rem;
-        grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
-    }
-    .empty-contents {
-        margin-top: 4rem;
-        .empty-text {
-            width: 20rem;
-        }
+.title {
+    @apply mb-3;
+}
+.card-contents {
+    @apply grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
+}
+.empty-contents {
+    margin-top: 4rem;
+    .empty-text {
+        width: 20rem;
     }
 }
 </style>
diff --git a/apps/web/src/services/project/v2/components/ProjectMainProjectCard.vue b/apps/web/src/services/project/v2/components/ProjectCard.vue
similarity index 100%
rename from apps/web/src/services/project/v2/components/ProjectMainProjectCard.vue
rename to apps/web/src/services/project/v2/components/ProjectCard.vue
diff --git a/apps/web/src/services/project/v2/components/ProjectMainProjectGroupCard.vue b/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
similarity index 100%
rename from apps/web/src/services/project/v2/components/ProjectMainProjectGroupCard.vue
rename to apps/web/src/services/project/v2/components/ProjectGroupCard.vue
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index 91b680839d..0ae1ab70ea 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -84,7 +84,7 @@ const handleCreated = (id: string) => {
         <project-header :project-id="projectId"
                         :project-group-id="projectGroupId"
         />
-        <project-and-group-list-panel />
+        <project-and-group-list-panel class="mt-4" />
 
         <template v-if="isModalLoadReady">
             <keep-alive>
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index 98f641da38..52e4cc26ba 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -99189,6 +99189,32 @@
                             </concept_node>
                         </children>
                     </folder_node>
+                    <folder_node>
+                        <name>LADING</name>
+                        <children>
+                            <concept_node>
+                                <name>GROUPS_AND_PROJECTS</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
+                        </children>
+                    </folder_node>
                     <folder_node>
                         <name>LANDING</name>
                         <children>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index 0601f0fa5d..21eeda7a5f 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -5369,6 +5369,9 @@
 			"TITLE_INFO_MESSAGE": "Event rules are executed in ascending order.",
 			"URGENCY": "Urgency"
 		},
+		"LADING": {
+			"GROUPS_AND_PROJECTS": "Project Groups and Projects"
+		},
 		"LANDING": {
 			"ACTION_DELETE_THIS_GROUP": "Delete selected group",
 			"ACTION_EDIT_GROUP_NAME": "Edit group name",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 9104e4fad0..69e2c4303e 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -5369,6 +5369,9 @@
 			"TITLE_INFO_MESSAGE": "イベントルールは昇順で実行されます。",
 			"URGENCY": "緊急度"
 		},
+		"LADING": {
+			"GROUPS_AND_PROJECTS": ""
+		},
 		"LANDING": {
 			"ACTION_DELETE_THIS_GROUP": "選択したグループ削除",
 			"ACTION_EDIT_GROUP_NAME": "選択したグループ編集",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index ee069a166a..7358e4ae23 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -5369,6 +5369,9 @@
 			"TITLE_INFO_MESSAGE": "이벤트 규칙은 오름차순으로 실행됩니다.",
 			"URGENCY": "긴급도"
 		},
+		"LADING": {
+			"GROUPS_AND_PROJECTS": "프로젝트 그룹과 프로젝트"
+		},
 		"LANDING": {
 			"ACTION_DELETE_THIS_GROUP": "선택한 그룹 삭제 ",
 			"ACTION_EDIT_GROUP_NAME": "선택한 그룹 편집 ",

From 3682d10a057aceb93e64b3e106a4b03996448d7b Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:35:01 +0900
Subject: [PATCH 18/22] feat: enhance ProjectCard and
 ProjectActionDropdownButton

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../ProjectActionDropdownButton.vue           |   4 +
 .../components/ProjectAndGroupListPanel.vue   |  55 +++-
 .../project/v2/components/ProjectCard.vue     | 282 ++++--------------
 .../v2/components/ProjectGroupCard.vue        | 107 ++-----
 .../project/v2/pages/ProjectMainPage.vue      |   5 +-
 5 files changed, 122 insertions(+), 331 deletions(-)

diff --git a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
index af945c039a..7d142474da 100644
--- a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
+++ b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
@@ -13,6 +13,9 @@ const props = defineProps<{
     projectGroupId?: string;
 }>();
 
+const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
+}>();
+
 const actionItems = computed<SelectDropdownMenuItem[]>(() => [
     {
         name: 'rename',
@@ -76,6 +79,7 @@ const handleSelectItem = (selectedItem: SelectDropdownMenuItem|string|number) =>
                        size="sm"
                        :menu="actionItems"
                        reset-selection-on-menu-close
+                       @update:visible-menu="emit('update:visible', $event)"
                        @select="handleSelectItem"
     />
 </template>
diff --git a/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue b/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
index 1478b6cbf1..3fc06d21dd 100644
--- a/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
+++ b/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
@@ -17,8 +17,8 @@ import type { ServiceAccountListParameters } from '@/api-clients/identity/servic
 import type { ServiceAccountModel } from '@/api-clients/identity/service-account/schema/model';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
+import { useProjectGroupReferenceStore, type ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
+import { useProjectReferenceStore, type ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
@@ -27,11 +27,40 @@ import ProjectCard from '@/services/project/v2/components/ProjectCard.vue';
 import ProjectGroupCard from '@/services/project/v2/components/ProjectGroupCard.vue';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
+const props = defineProps<{
+    targetId?: string;
+    targetType?: 'project' | 'projectGroup';
+}>();
 
+/* ui */
 const isCollapsed = ref(false);
 
+/* modal */
 const projectPageModalStore = useProjectPageModalStore();
 
+/* project */
+const projectReferenceStore = useProjectReferenceStore();
+const allProjects = computed(() => Object.values(projectReferenceStore.getters.projectItems));
+const projects = computed(() => {
+    if (props.targetType === 'projectGroup') {
+        if (props.targetId) return allProjects.value.filter((d) => d.data.groupInfo?.id === props.targetId);
+        return allProjects.value;
+    }
+    return [];
+});
+
+
+/* project group */
+const projectGroupReferenceStore = useProjectGroupReferenceStore();
+const allProjectGroups = computed(() => Object.values(projectGroupReferenceStore.getters.projectGroupItems));
+const projectGroups = computed(() => {
+    if (props.targetType === 'projectGroup') {
+        if (props.targetId) return allProjectGroups.value.filter((d) => d.data.parentGroupInfo?.id === props.targetId);
+        return allProjectGroups.value;
+    }
+    return [];
+});
+
 const route = useRoute();
 const allReferenceStore = useAllReferenceStore();
 
@@ -63,10 +92,6 @@ const state = reactive({
         return allProjectList.filter((project) => project.parentId === state.currentProjectGroupId);
     }),
     filteredCardList: computed<ProjectCardItemType[]>(() => [...state.currentProjectGroupList, ...state.currentProjectList]),
-    paginatedCardList: computed(() => ({
-        projectGroup: state.filteredCardList.filter((item) => item.type === 'projectGroup'),
-        project: state.filteredCardList.filter((item) => item.type === 'project'),
-    })),
 });
 
 /* Util */
@@ -125,29 +150,33 @@ onMounted(async () => {
             </div>
         </div>
         <div v-show="!isCollapsed">
-            <div v-if="state.paginatedCardList.projectGroup.length"
+            <div v-if="projectGroups.length"
                  class="pt-6 pb-10"
             >
                 <p-field-title class="title"
                                :label="$t('PROJECT.LANDING.PROJECT_GROUP')"
                 />
                 <div class="card-contents">
-                    <project-group-card v-for="(projectGroup, idx) in state.paginatedCardList.projectGroup"
+                    <project-group-card v-for="(pg, idx) in projectGroups"
                                         :key="`project-group-${idx}`"
-                                        :item="projectGroup"
+                                        :project-group-id="pg.key"
+                                        :name="pg.name"
                     />
                 </div>
             </div>
 
-            <div v-if="state.paginatedCardList.project.length">
+            <div v-if="projects.length">
                 <p-field-title class="title"
                                :label="$t('PROJECT.LANDING.PROJECT')"
                 />
                 <div class="card-contents">
-                    <project-card v-for="(project, idx) in state.paginatedCardList.project"
+                    <project-card v-for="(p, idx) in projects"
                                   :key="`project-${idx}`"
-                                  :item="project"
-                                  :service-account-provider-list="getDistinctProviders(project.id)"
+                                  :project-id="p.key"
+                                  :group-name="p.data.groupInfo?.name"
+                                  :name="p.name"
+                                  :project-type="p.data.projectType"
+                                  :service-account-provider-list="getDistinctProviders(p.key)"
                     />
                 </div>
             </div>
diff --git a/apps/web/src/services/project/v2/components/ProjectCard.vue b/apps/web/src/services/project/v2/components/ProjectCard.vue
index 20adf59d92..a139d595d9 100644
--- a/apps/web/src/services/project/v2/components/ProjectCard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectCard.vue
@@ -1,167 +1,108 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
 import {
-    PI, PTextHighlighting, PSelectDropdown,
+    PI, PTextHighlighting,
 } from '@cloudforet/mirinae';
 
-import { i18n } from '@/translations';
+import type { ProjectType } from '@/api-clients/identity/project/schema/type';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProviderItem, ProviderReferenceMap } from '@/store/reference/provider-reference-store';
+import { useProviderReferenceStore, type ProviderItem } from '@/store/reference/provider-reference-store';
 
 import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
-import { peacock } from '@/styles/colors';
-
-import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
+import ProjectActionDropdownButton from '@/services/project/v2/components/ProjectActionDropdownButton.vue';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
 
-interface Props {
-    item: ProjectCardItemType;
+const props = defineProps<{
     serviceAccountProviderList: string[];
     searchKeyword?: string;
-}
-
-const props = defineProps<Props>();
+    projectId: string;
+    groupName?: string;
+    name: string;
+    projectType: ProjectType;
+}>();
 
-const allReferenceStore = useAllReferenceStore();
+/* favorite */
 const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
+const isStarred = computed(() => favoriteStore.getters.projectItems.some((item) => item.itemId === props.projectId));
 
+/* provider */
+const providerReferenceStore = useProviderReferenceStore();
+const getProvider = (name: string): ProviderItem => providerReferenceStore.getters.providerItems[name] || {};
 
+/* project select */
 const router = useRouter();
-
-const storeState = reactive({
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-    projectGroup: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-    favoriteItems: computed(() => favoriteGetters.projectItems),
-});
-
-const state = reactive({
-    projectGroupName: computed<string>(() => {
-        if (!props.item.parentId) return '';
-        return storeState.projectGroup[props.item.parentId].name;
-    }),
-    isStarred: computed(() => storeState.favoriteItems.some((item) => item.itemId === props.item.id)),
-    toolsetMenuItems: computed(() => [
-        {
-            type: 'item',
-            name: 'update',
-            label: i18n.t('PROJECT.DETAIL.UPDATE'),
-            icon: 'ic_settings',
-        },
-        {
-            type: 'item',
-            name: 'move',
-            label: i18n.t('PROJECT.DETAIL.MOVE'),
-            icon: 'ic_move',
-        },
-        { type: 'divider', name: 'divider' },
-        {
-            type: 'item',
-            name: 'delete',
-            label: i18n.t('PROJECT.DETAIL.DELETE'),
-            icon: 'ic_delete',
-        },
-    ]),
-    toolsetMenuVisible: false,
-});
-
-const getProvider = (name: string): ProviderItem => storeState.providers[name] || {};
-
-// TODO: change the route
 const handleSelectProject = () => {
-    router.push({
+    router.replace({
         name: PROJECT_ROUTE_V2._NAME,
         params: {
-            id: props.item.id as string,
+            projectGroupOrProjectId: props.projectId,
         },
-    }).catch(() => {});
-};
-
-const handleSelectItem = () => {
-    // projectPageStore.setCurrentSelectedProjectId(props.item.id);
-    // if (selected.name === 'update') {
-    //     projectPageStore.setProjectFormModalVisible(true);
-    // }
-    // if (selected.name === 'move') {
-    //     projectPageStore.setProjectGroupMoveModalVisible(true);
-    // }
-    // if (selected.name === 'delete') {
-    //     projectPageStore.setProjectDeleteModalVisible(true);
-    // }
+    }).catch(() => {
+        // ignore error
+    });
 };
 
+/* action menu */
+const visibleActionMenu = ref(false);
 </script>
 
 <template>
-    <div :class="{'project-main-project-card': true, 'toolset-active': state.toolsetMenuVisible }"
+    <div class="flex flex-col justify-between rounded-lg cursor-pointer h-26 pt-3 px-3 pb-4 group/card"
+         :class="[visibleActionMenu ? 'bg-blue-200' : 'bg-gray-100 hover:bg-gray-150']"
          @click="handleSelectProject"
     >
-        <div class="main-contents">
-            <div class="title-wrapper">
-                <div class="title">
-                    <p-i name="ic_document-filled"
-                         :color="peacock[600]"
+        <div>
+            <div class="flex items-center justify-between">
+                <div class="flex gap-1 items-center text-paragraph-md text-gray-900 mb-1 group-hover/card:font-medium">
+                    <p-i name="ic_project-filled"
                          width="1rem"
                          height="1rem"
                     />
-                    <p-text-highlighting class="text"
-                                         :text="props.item.name"
+                    <p-text-highlighting :text="props.name"
                                          :term="props.searchKeyword"
                     />
                 </div>
 
-                <div class="toolset-group">
-                    <p-select-dropdown class="toolset-button"
-                                       style-type="tertiary-icon-button"
-                                       button-icon="ic_ellipsis-horizontal"
-                                       size="sm"
-                                       :visible-menu.sync="state.toolsetMenuVisible"
-                                       :menu="state.toolsetMenuItems"
-                                       :selected="[]"
-                                       use-fixed-menu-style
-                                       reset-selection-on-menu-close
-                                       @select="handleSelectItem"
-                    />
-                    <favorite-button :class="{'favorite-button': true, 'starred': state.isStarred }"
-                                     :item-id="props.item.id"
-                                     :favorite-type="FAVORITE_TYPE.PROJECT"
+                <div class="flex gap-1 items-center">
+                    <project-action-dropdown-button :project-id="props.projectId"
+                                                    @update:visible="visibleActionMenu = $event"
                     />
+                    <div :class="['hidden', (isStarred || visibleActionMenu) ? '!block' : 'group-hover/card:block']">
+                        <favorite-button :item-id="props.projectId"
+                                         :favorite-type="FAVORITE_TYPE.PROJECT"
+                        />
+                    </div>
                 </div>
             </div>
-            <span class="project-group">
-                {{ state.projectGroupName }}
-            </span>
         </div>
-        <div class="sub-contents">
+        <div class="flex justify-between items-center">
             <div v-if="props.serviceAccountProviderList.length > 0"
-                 class="provider-icon-wrapper"
+                 class="flex-shrink inline-flex items-center truncate hover:text-secondary hover:font-bold"
             >
-                <div class="provider">
+                <div class="truncate min-w-0 h-5">
                     <template v-for="(provider, index) in props.serviceAccountProviderList">
                         <router-link v-if="index < 5"
                                      :key="index"
                                      :to="{name: SERVICE_ACCOUNT_ROUTE._NAME,query: { provider: getProvider(provider) ? provider : null },}"
-                                     class="icon-link"
+                                     class="flex-shrink-0 inline-block w-5 h-5 bg-no-repeat bg-[length:100%] bg-center hover:opacity-50 mr-[0.37rem]"
                                      :style="{backgroundImage: `url('${getProvider(provider).icon || require('@/assets/images/ic_cloud-filled.svg')}')`}"
                                      @click.native.stop.prevent
                         />
                     </template>
                 </div>
                 <span v-if="props.serviceAccountProviderList.length > 5"
-                      class="provider-more-text"
+                      class="text-label-sm text-gray-500 cursor-default font-normal pr-2"
                 >
                     ...
                 </span>
                 <router-link v-if="props.serviceAccountProviderList.length !== 0"
-                             class="icon-wrapper"
+                             class="rounded-full inline-flex justify-center items-center h-5 w-5 hover:bg-blue-300"
                              :to="{ name: SERVICE_ACCOUNT_ROUTE._NAME }"
                              @click.native.stop.prevent
                 >
@@ -172,7 +113,7 @@ const handleSelectItem = () => {
                 </router-link>
             </div>
             <div v-else
-                 class="account-add"
+                 class="flex-shrink-0 inline-flex text-gray-700 group/account"
             >
                 <router-link :to="{ name: SERVICE_ACCOUNT_ROUTE._NAME }"
                              @click.native.stop.prevent
@@ -185,16 +126,16 @@ const handleSelectItem = () => {
                 <router-link :to="{ name: SERVICE_ACCOUNT_ROUTE._NAME }"
                              @click.native.stop.prevent
                 >
-                    <span class="add-label"> {{ $t('PROJECT.LANDING.ADD_SERVICE_ACCOUNT') }}</span>
+                    <span class="text-xs group-hover/account:underline"> {{ $t('PROJECT.LANDING.ADD_SERVICE_ACCOUNT') }}</span>
                 </router-link>
             </div>
-            <div v-if="item.projectType === 'PRIVATE'"
-                 class="private-badge"
+            <div v-if="props.projectType === 'PRIVATE'"
+                 class="text-gray-500 flex items-center text-label-sm gap-[0.125rem]"
             >
                 <p-i name="ic_lock-filled"
                      scale="0.8"
                      color="inherit"
-                     class="badge-icon"
+                     class="mr-[0.125rem]"
                 />
                 {{ $t('PROJECT.LANDING.INVITE_ONLY') }}
             </div>
@@ -202,126 +143,3 @@ const handleSelectItem = () => {
     </div>
 </template>
 
-<style scoped lang="postcss">
-.project-main-project-card {
-    @apply flex flex-col justify-between bg-gray-100 rounded-lg cursor-pointer;
-    height: 6.5rem;
-    padding: 0.75rem 0.75rem 1rem;
-
-    .main-contents {
-        .title-wrapper {
-            @apply flex items-center justify-between;
-            .title {
-                @apply flex gap-1 items-center text-paragraph-md text-gray-900;
-                margin-bottom: 0.25rem;
-            }
-        }
-        .project-group {
-            @apply text-label-md text-gray-600;
-        }
-    }
-
-    .sub-contents {
-        @apply flex justify-between items-center;
-
-        .provider-icon-wrapper {
-            @apply flex-shrink inline-flex items-center truncate;
-            .provider {
-                @apply truncate;
-                min-width: 0;
-                height: 1.25rem;
-            }
-            .icon-wrapper {
-                @apply rounded-full inline-flex justify-center items-center;
-                height: 1.25rem;
-                width: 1.25rem;
-                &:hover {
-                    @apply bg-blue-300;
-                }
-            }
-            .provider-more-text {
-                @apply text-label-sm text-gray-500;
-                cursor: default;
-                font-weight: normal;
-                padding-right: 0.5rem;
-            }
-            &:hover {
-                @apply text-secondary font-bold;
-            }
-            .icon-link {
-                @apply flex-shrink-0 inline-block;
-                height: 1.25rem;
-                width: 1.25rem;
-                background-repeat: no-repeat;
-                background-size: 100%;
-                background-position: center;
-                line-height: 1.25rem;
-                margin-right: 0.37rem;
-                &:hover {
-                    opacity: 50%;
-                }
-            }
-        }
-        .account-add {
-            @apply flex-shrink-0 inline-flex text-gray-700;
-            .add-label {
-                @apply text-xs;
-                line-height: 1.2;
-            }
-            &:hover {
-                .add-label {
-                    text-decoration: underline;
-                }
-            }
-        }
-        .private-badge {
-            @apply text-gray-500 flex items-center text-label-sm;
-            gap: 0.125rem;
-            .badge-icon {
-                margin-right: 0.125rem;
-            }
-        }
-    }
-
-    .favorite-button {
-        display: none;
-
-        &.starred {
-            display: block;
-        }
-    }
-    .toolset-button {
-        display: none;
-    }
-
-    .toolset-group {
-        @apply flex gap-1 items-center;
-    }
-
-    &:hover {
-        @apply bg-gray-150;
-
-        .toolset-button {
-            display: block;
-        }
-        .favorite-button {
-            display: block;
-        }
-    }
-    &.toolset-active {
-        @apply bg-blue-200;
-    }
-}
-
-/* custom design-system component - p-select-dropdown */
-:deep(.p-select-dropdown) {
-    .dropdown-button-component {
-        @apply rounded-full;
-
-        &.opened {
-            @apply rounded-full;
-        }
-    }
-}
-
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupCard.vue b/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
index 64cea90f36..b9c9639d4b 100644
--- a/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 
-import { computed, reactive } from 'vue';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
-import { PI, PTextHighlighting, PSelectDropdown } from '@cloudforet/mirinae';
-
-import { i18n } from '@/translations';
+import { PI, PTextHighlighting } from '@cloudforet/mirinae';
 
 import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
@@ -13,79 +11,39 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { indigo } from '@/styles/colors';
 
-import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
+import ProjectActionDropdownButton from '@/services/project/v2/components/ProjectActionDropdownButton.vue';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
-interface Props {
-    item: ProjectCardItemType;
+
+const props = defineProps<{
     searchKeyword?: string;
-}
+    projectGroupId: string;
+    name: string;
+}>();
 
-const props = defineProps<Props>();
-const router = useRouter();
 
+/* favorite */
 const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-
-const storeState = reactive({
-    favoriteItems: computed(() => favoriteGetters.projectGroupItems),
-});
-
-const state = reactive({
-    isStarred: computed(() => storeState.favoriteItems.some((item) => item.itemId === props.item.id)),
-    toolsetMenuItems: [
-        {
-            type: 'item',
-            name: 'rename',
-            label: i18n.t('Rename'),
-            icon: 'ic_settings',
-        },
-        {
-            type: 'item',
-            name: 'move',
-            label: i18n.t('Move'),
-            icon: 'ic_move',
-        },
-        { type: 'divider', name: 'divider' },
-        {
-            type: 'item',
-            name: 'delete',
-            label: i18n.t('Delete'),
-            icon: 'ic_delete',
-        },
-    ],
-    toolsetMenuVisible: false,
-});
+const isStarred = computed(() => favoriteStore.getters.projectGroupItems.some((item) => item.itemId === props.projectGroupId));
 
-// TODO: change the route
+/* project group select */
+const router = useRouter();
 const handleSelectProjectGroup = () => {
-    router.push({
+    router.replace({
         name: PROJECT_ROUTE_V2._NAME,
         params: {
-            projectGroupId: props.item.id as string,
+            projectGroupOrProjectId: props.projectGroupId,
         },
     }).catch(() => {});
 };
 
-const handleSelectItem = () => {
-    // projectPageStore.setCurrentSelectedProjectGroupId(props.item.id);
-    // if (selected.name === 'rename') {
-    //     projectPageStore.setProjectGroupFormUpdateMode(true);
-    //     projectPageStore.setProjectGroupFormVisible(true);
-    // }
-    // if (selected.name === 'move') {
-    //     projectPageStore.setProjectGroupMoveModalVisible(true);
-    // }
-    // if (selected.name === 'delete') {
-    //     projectPageStore.setProjectDeleteModalVisible(true);
-    // }
-};
-
+/* action menu */
+const visibleActionMenu = ref(false);
 
 </script>
 
 <template>
-    <div class="project-main-project-group-card"
+    <div class="flex items-center justify-between bg-gray-100 rounded-lg cursor-pointer project-main-project-group-card"
          @click="handleSelectProjectGroup"
     >
         <div class="project-group-item">
@@ -95,25 +53,17 @@ const handleSelectItem = () => {
                  height="1rem"
             />
             <p-text-highlighting class="project-group-name"
-                                 :text="props.item.name"
+                                 :text="props.name"
                                  :term="props.searchKeyword"
             />
         </div>
         <div class="toolset-group">
-            <p-select-dropdown class="toolset-button"
-                               style-type="tertiary-icon-button"
-                               button-icon="ic_ellipsis-horizontal"
-                               size="sm"
-                               :visible-menu.sync="state.toolsetMenuVisible"
-                               :menu="state.toolsetMenuItems"
-                               :selected="[]"
-                               use-fixed-menu-style
-                               reset-selection-on-menu-close
-                               @select="handleSelectItem"
+            <project-action-dropdown-button :project-group-id="props.projectGroupId"
+                                            @update:visible="visibleActionMenu = $event"
             />
-            <favorite-button :item-id="props.item.id"
+            <favorite-button :item-id="props.projectGroupId"
                              :favorite-type="FAVORITE_TYPE.PROJECT_GROUP"
-                             :class="{'favorite-button': true, 'starred': state.isStarred }"
+                             :class="{'favorite-button': true, 'starred': isStarred }"
             />
         </div>
     </div>
@@ -121,7 +71,6 @@ const handleSelectItem = () => {
 
 <style scoped lang="postcss">
 .project-main-project-group-card {
-    @apply flex items-center justify-between bg-gray-100 rounded-lg cursor-pointer;
     height: 3rem;
     padding: 0.75rem;
 
@@ -162,16 +111,4 @@ const handleSelectItem = () => {
         @apply bg-blue-200;
     }
 }
-
-/* custom design-system component - p-select-dropdown */
-:deep(.p-select-dropdown) {
-    .dropdown-button-component {
-        @apply rounded-full;
-
-        &.opened {
-            @apply rounded-full;
-        }
-    }
-}
-
 </style>
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index 0ae1ab70ea..f3cc908b39 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -84,7 +84,10 @@ const handleCreated = (id: string) => {
         <project-header :project-id="projectId"
                         :project-group-id="projectGroupId"
         />
-        <project-and-group-list-panel class="mt-4" />
+        <project-and-group-list-panel class="mt-4"
+                                      :target-id="props.projectGroupOrProjectId"
+                                      :target-type="projectGroupId ? 'projectGroup' : 'project'"
+        />
 
         <template v-if="isModalLoadReady">
             <keep-alive>

From cc19aab7440a6b325d091617a9906781953959c4 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:35:01 +0900
Subject: [PATCH 19/22] feat: implement useTextEllipsis hook for text overflow
 detection

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue | 4 ++--
 .../{use-tree-node-text-ellipsis.ts => use-text-ellipsis.ts}  | 2 +-
 .../hooks/use-context-menu-attach/use-context-menu-attach.ts  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/mirinae/src/data-display/tree/new-tree/composables/{use-tree-node-text-ellipsis.ts => use-text-ellipsis.ts} (84%)

diff --git a/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue b/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
index 19b4baec06..6a9850a331 100644
--- a/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
+++ b/packages/mirinae/src/data-display/tree/new-tree/PTreeNode.vue
@@ -6,13 +6,13 @@ import type { TranslateResult } from 'vue-i18n';
 import PTooltip from '@/data-display/tooltips/PTooltip.vue';
 import { useTreeNodeIcon } from '@/data-display/tree/new-tree/composables/use-tree-node-icon';
 import { useTreeNodeSelect } from '@/data-display/tree/new-tree/composables/use-tree-node-select';
-import { useTreeNodeTextEllipsis } from '@/data-display/tree/new-tree/composables/use-tree-node-text-ellipsis';
 import { useTreeNodeToggle } from '@/data-display/tree/new-tree/composables/use-tree-node-toggle';
 import type {
     TreeNodeDisplayType, TreeNodeIcon, TreeNodeLink,
 } from '@/data-display/tree/new-tree/type';
 import PLazyImg from '@/feedbacks/loading/lazy-img/PLazyImg.vue';
 import PI from '@/foundation/icons/PI.vue';
+import { useTextEllipsis } from '@/hooks/use-text-ellipsis/use-text-ellipsis';
 
 // CAUTION: Props should be defined here due to the limitation of `script setup` of Vue 2.7.
 const props = withDefaults(defineProps<{
@@ -54,7 +54,7 @@ const isHovered = computed(() => hoveredItem.value && hoveredItem.value === prop
 
 /* text ellipsis */
 const textEl = ref<HTMLElement | null>(null);
-const { isEllipsis } = useTreeNodeTextEllipsis({ textEl });
+const { isEllipsis } = useTextEllipsis({ textEl });
 
 /* route */
 const {
diff --git a/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-text-ellipsis.ts b/packages/mirinae/src/data-display/tree/new-tree/composables/use-text-ellipsis.ts
similarity index 84%
rename from packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-text-ellipsis.ts
rename to packages/mirinae/src/data-display/tree/new-tree/composables/use-text-ellipsis.ts
index 58b9f0761a..3846507c67 100644
--- a/packages/mirinae/src/data-display/tree/new-tree/composables/use-tree-node-text-ellipsis.ts
+++ b/packages/mirinae/src/data-display/tree/new-tree/composables/use-text-ellipsis.ts
@@ -6,7 +6,7 @@ import { useElementSize } from '@vueuse/core';
 interface UseTreeNodeTextEllipsisOptions {
   textEl: Ref<HTMLElement | null>;
 }
-export const useTreeNodeTextEllipsis = ({ textEl }: UseTreeNodeTextEllipsisOptions) => {
+export const useTextEllipsis = ({ textEl }: UseTreeNodeTextEllipsisOptions) => {
     const textElSize = useElementSize(textEl);
     const isEllipsis = computed(() => {
         const scrollWidth = textEl.value?.scrollWidth;
diff --git a/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts b/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts
index f344f46599..f3fff7562f 100644
--- a/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts
+++ b/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts
@@ -44,7 +44,7 @@ export const useContextMenuAttach = <Item extends MenuItem = MenuItem>({
 }: UseContextMenuAttachOptions<Item>): UseContextMenuAttachReturns<Item> => {
     const defaultAttachHandler: MenuAttachHandler<Item> = (inputText, _pageStart, _pageLimit) => {
         const allItems = isRef(menu) ? menu.value ?? [] : menu ?? [];
-        const filtered = allItems.filter((item) => getTextHighlightRegex(inputText).test(item.label as string|undefined ?? item.name ?? ''));
+        const filtered = inputText ? allItems.filter((item) => getTextHighlightRegex(inputText).test(item.label as string|undefined ?? item.name ?? '')) : allItems;
         if (_pageStart === undefined || _pageLimit === undefined) { // do not need to slice items
             return {
                 results: allItems,

From 0edcdc05ee53939efff0793b81219feb48831e19 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:35:02 +0900
Subject: [PATCH 20/22] feat: add PROJECTS concept and translations for
 multiple languages

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../console-translation-2.8.babel             | 21 +++++++++++++++++++
 packages/language-pack/en.json                |  1 +
 packages/language-pack/ja.json                |  1 +
 packages/language-pack/ko.json                |  1 +
 4 files changed, 24 insertions(+)

diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index 52e4cc26ba..035ca171eb 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -100561,6 +100561,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>PROJECTS</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>true</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>PROJECT_GROUP</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index 21eeda7a5f..6b1116d7fb 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -5444,6 +5444,7 @@
 			"PLACE_HOLDER_PROJECT": "Project",
 			"PLACE_HOLDER_SHOW_MORE": "more",
 			"PROJECT": "Project",
+			"PROJECTS": "Projects",
 			"PROJECT_GROUP": "Project Group",
 			"PROJECT_GROUPS": "Project Groups",
 			"PROJECT_GROUP_MEMBER": "Project Group Member",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index 69e2c4303e..f0c394bbc7 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -5444,6 +5444,7 @@
 			"PLACE_HOLDER_PROJECT": "プロジェクト",
 			"PLACE_HOLDER_SHOW_MORE": "もっと見る",
 			"PROJECT": "プロジェクト",
+			"PROJECTS": "プロジェクト",
 			"PROJECT_GROUP": "プロジェクトグループ",
 			"PROJECT_GROUPS": "プロジェクトグループ",
 			"PROJECT_GROUP_MEMBER": "プロジェクトグループメンバー",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 7358e4ae23..ce64ffa14b 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -5444,6 +5444,7 @@
 			"PLACE_HOLDER_PROJECT": "프로젝트 ",
 			"PLACE_HOLDER_SHOW_MORE": "더보기",
 			"PROJECT": "프로젝트",
+			"PROJECTS": "프로젝트",
 			"PROJECT_GROUP": "프로젝트 그룹 ",
 			"PROJECT_GROUPS": "프로젝트 그룹 ",
 			"PROJECT_GROUP_MEMBER": "프로젝트 그룹 멤버",

From b85967cde77c7ebac126d389e79e89ce67367fef Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:35:03 +0900
Subject: [PATCH 21/22] feat: refactor project management components to use
 centralized project list store

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../services/project/v2/ProjectContainer.vue  |  15 +-
 .../src/services/project/v2/ProjectLSB.vue    |  12 +-
 .../ProjectActionDropdownButton.vue           |  34 +++-
 .../components/ProjectAndGroupListPanel.vue   | 153 ++++++------------
 .../project/v2/components/ProjectCard.vue     |  50 ++++--
 .../v2/components/ProjectFormModal.vue        |  13 +-
 .../v2/components/ProjectGroupCard.vue        | 118 +++++++-------
 .../v2/components/ProjectGroupFormModal.vue   |   6 +-
 .../v2/components/ProjectLSBSearch.vue        |  10 +-
 .../project/v2/components/ProjectLSBTree.vue  |  43 +----
 .../v2/components/ProjectMoveModal.vue        |  18 +--
 .../project/v2/pages/ProjectMainPage.vue      |  56 ++++---
 .../project/v2/stores/project-list-store.ts   |  88 ++++++++++
 13 files changed, 328 insertions(+), 288 deletions(-)
 create mode 100644 apps/web/src/services/project/v2/stores/project-list-store.ts

diff --git a/apps/web/src/services/project/v2/ProjectContainer.vue b/apps/web/src/services/project/v2/ProjectContainer.vue
index ceb2cae8c4..fe8bde8aac 100644
--- a/apps/web/src/services/project/v2/ProjectContainer.vue
+++ b/apps/web/src/services/project/v2/ProjectContainer.vue
@@ -2,12 +2,8 @@
 import { computed, onUnmounted, watch } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
-
 import { i18n } from '@/translations';
 
-import { useProjectGroupReferenceStore, type ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
-
 import { MENU_ID } from '@/lib/menu/config';
 
 import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
@@ -21,18 +17,17 @@ import VerticalPageLayout from '@/common/modules/page-layouts/VerticalPageLayout
 import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
 import ProjectLSB from '@/services/project/v2/ProjectLSB.vue';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
 
-/* project and project group */
-const projectReferenceStore = useProjectReferenceStore();
-const projectMap = computed(() => projectReferenceStore.getters.projectItems);
-const projectGroupReferenceStore = useProjectGroupReferenceStore();
-const projectGroupMap = computed<ProjectGroupReferenceMap>(() => projectGroupReferenceStore.getters.projectGroupItems);
+/* project list store */
+const projectListStore = useProjectListStore();
+const projectMap = computed(() => projectListStore.projectMap);
+const projectGroupMap = computed(() => projectListStore.projectGroupMap);
 
 /* routed project or project group */
 const route = useRoute();
 const { projectGroupId, projectId } = useProjectOrGroupId(computed(() => route.params.projectGroupOrProjectId));
 
-
 /* selected paths */
 const parentIds = computed<string[]>(() => {
     const pids: string[] = [];
diff --git a/apps/web/src/services/project/v2/ProjectLSB.vue b/apps/web/src/services/project/v2/ProjectLSB.vue
index 1496ad5adb..63833fe08c 100644
--- a/apps/web/src/services/project/v2/ProjectLSB.vue
+++ b/apps/web/src/services/project/v2/ProjectLSB.vue
@@ -2,7 +2,7 @@
 import { vOnClickOutside } from '@vueuse/components';
 import type Vue from 'vue';
 import {
-    computed, nextTick, ref, watch,
+    computed, nextTick, onMounted, ref, watch,
 } from 'vue';
 
 import {
@@ -102,6 +102,14 @@ watch([() => props.selectedPaths, treeRef], ([paths, treeComponent]) => {
     });
 });
 
+/* init */
+const mounted = ref(false);
+onMounted(() => {
+    nextTick(() => {
+        mounted.value = true;
+    });
+});
+
 </script>
 
 <template>
@@ -148,7 +156,7 @@ watch([() => props.selectedPaths, treeRef], ([paths, treeComponent]) => {
         <project-l-s-b-search :keyword="projectKeyword"
                               @update:keyword="projectKeyword = $event"
         />
-        <project-l-s-b-tree v-if="!projectKeyword.length"
+        <project-l-s-b-tree v-if="mounted && !projectKeyword.length"
                             ref="treeRef"
                             :selected-paths="props.selectedPaths"
         />
diff --git a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
index 7d142474da..80b88a933e 100644
--- a/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
+++ b/apps/web/src/services/project/v2/components/ProjectActionDropdownButton.vue
@@ -1,20 +1,30 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
-import { PSelectDropdown } from '@cloudforet/mirinae';
+import { PSelectDropdown, PIconButton } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import { i18n } from '@/translations';
 
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     projectId?: string;
     projectGroupId?: string;
-}>();
+    usageType?: 'header'|'list';
+}>(), {
+    projectId: undefined,
+    projectGroupId: undefined,
+    usageType: 'header',
+});
 
 const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
 }>();
+const visibleMenu = ref(false);
+const handleUpdateVisibleMenu = (visible: boolean) => {
+    visibleMenu.value = visible;
+    emit('update:visible', visible);
+};
 
 const actionItems = computed<SelectDropdownMenuItem[]>(() => [
     {
@@ -79,7 +89,19 @@ const handleSelectItem = (selectedItem: SelectDropdownMenuItem|string|number) =>
                        size="sm"
                        :menu="actionItems"
                        reset-selection-on-menu-close
-                       @update:visible-menu="emit('update:visible', $event)"
+                       menu-width="max-content"
+                       menu-position="right"
+                       @update:visible-menu="handleUpdateVisibleMenu"
                        @select="handleSelectItem"
-    />
+    >
+        <template v-if="props.usageType === 'list'"
+                  #dropdown-icon-button
+        >
+            <p-icon-button name="ic_ellipsis-horizontal"
+                           :activated="visibleMenu"
+                           size="sm"
+                           style-type="tertiary"
+            />
+        </template>
+    </p-select-dropdown>
 </template>
diff --git a/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue b/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
index 3fc06d21dd..49ad1971d5 100644
--- a/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
+++ b/apps/web/src/services/project/v2/components/ProjectAndGroupListPanel.vue
@@ -1,30 +1,22 @@
 <script setup lang="ts">
 
 import {
-    computed, onMounted, reactive, ref,
+    computed, ref,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
+import { useQuery } from '@tanstack/vue-query';
 import { uniq } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PFieldTitle, PEmpty, PPaneLayout, PI, PButton,
 } from '@cloudforet/mirinae';
 
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { useServiceAccountApi } from '@/api-clients/identity/service-account/composables/use-service-account-api';
 import type { ServiceAccountListParameters } from '@/api-clients/identity/service-account/schema/api-verbs/list';
-import type { ServiceAccountModel } from '@/api-clients/identity/service-account/schema/model';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import { useProjectGroupReferenceStore, type ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import { useProjectReferenceStore, type ProjectReferenceMap } from '@/store/reference/project-reference-store';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import type { ProjectCardItemType } from '@/services/project/v-shared/types/project-type';
 import ProjectCard from '@/services/project/v2/components/ProjectCard.vue';
 import ProjectGroupCard from '@/services/project/v2/components/ProjectGroupCard.vue';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 const props = defineProps<{
@@ -38,83 +30,43 @@ const isCollapsed = ref(false);
 /* modal */
 const projectPageModalStore = useProjectPageModalStore();
 
-/* project */
-const projectReferenceStore = useProjectReferenceStore();
-const allProjects = computed(() => Object.values(projectReferenceStore.getters.projectItems));
+/* project list store */
+const projectListStore = useProjectListStore();
+
+/* filtered data */
 const projects = computed(() => {
-    if (props.targetType === 'projectGroup') {
-        if (props.targetId) return allProjects.value.filter((d) => d.data.groupInfo?.id === props.targetId);
-        return allProjects.value;
+    if (props.targetType === 'projectGroup' && props.targetId) {
+        return projectListStore.getProjectsByGroupId(props.targetId);
+    }
+    if (!props.targetType && !props.targetId) {
+        return projectListStore.projects;
     }
     return [];
 });
 
-
-/* project group */
-const projectGroupReferenceStore = useProjectGroupReferenceStore();
-const allProjectGroups = computed(() => Object.values(projectGroupReferenceStore.getters.projectGroupItems));
 const projectGroups = computed(() => {
-    if (props.targetType === 'projectGroup') {
-        if (props.targetId) return allProjectGroups.value.filter((d) => d.data.parentGroupInfo?.id === props.targetId);
-        return allProjectGroups.value;
+    if (props.targetType === 'projectGroup' && props.targetId) {
+        return projectListStore.getProjectGroupsByParentId(props.targetId);
+    }
+    if (!props.targetType && !props.targetId) {
+        return projectListStore.projectGroups;
     }
     return [];
 });
 
-const route = useRoute();
-const allReferenceStore = useAllReferenceStore();
-
-const storeState = reactive({
-    project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    projectGroup: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-});
-
-const state = reactive({
-    currentProjectGroupId: computed(() => route.params.projectGroupId),
-    serviceAccountList: [] as ServiceAccountModel[],
-    currentProjectGroupList: computed<ProjectCardItemType[]>(() => {
-        const allProjectGroupList: ProjectCardItemType[] = Object.values(storeState.projectGroup).map((d) => ({
-            type: 'projectGroup',
-            id: d.key,
-            name: d.name,
-            parentId: d.data.parentGroupInfo?.id as string|undefined,
-        }));
-        return allProjectGroupList.filter((projectGroup) => projectGroup.parentId === state.currentProjectGroupId);
-    }),
-    currentProjectList: computed<ProjectCardItemType[]>(() => {
-        const allProjectList: ProjectCardItemType[] = Object.values(storeState.project).map((d) => ({
-            type: 'project',
-            id: d.key,
-            name: d.name,
-            parentId: d.data.groupInfo?.id,
-            projectType: d.data.projectType,
-        }));
-        return allProjectList.filter((project) => project.parentId === state.currentProjectGroupId);
-    }),
-    filteredCardList: computed<ProjectCardItemType[]>(() => [...state.currentProjectGroupList, ...state.currentProjectList]),
-});
-
-/* Util */
-const getDistinctProviders = (projectId: string): string[] => uniq(state.serviceAccountList.filter((d) => d.project_id === projectId).map((d) => d.provider));
-
-const listServiceAccount = async () => {
-    try {
-        const params: ServiceAccountListParameters = {
-            query: {
-                only: ['provider', 'project_id'],
-            },
-        };
-        const response = await SpaceConnector.clientV2.identity.serviceAccount.list<ServiceAccountListParameters, ListResponse<ServiceAccountModel>>(params);
-        state.serviceAccountList = response.results || [];
-    } catch (e) {
-        state.serviceAccountList = [];
-        ErrorHandler.handleError(e);
-    }
+/* service accounts */
+const { serviceAccountAPI, serviceAccountListQueryKey } = useServiceAccountApi();
+const serviceAccountListParams: ServiceAccountListParameters = {
+    query: {
+        only: ['provider', 'project_id'],
+    },
 };
-
-onMounted(async () => {
-    await listServiceAccount();
+const { data: serviceAccountList } = useQuery({
+    queryKey: computed(() => [...serviceAccountListQueryKey.value, serviceAccountListParams]),
+    queryFn: () => serviceAccountAPI.list(serviceAccountListParams),
+    select: (data) => data.results ?? [],
 });
+const getDistinctProviders = (projectId: string): string[] => uniq(serviceAccountList.value?.filter((d) => d.project_id === projectId).map((d) => d.provider));
 
 </script>
 
@@ -149,29 +101,38 @@ onMounted(async () => {
                 </p-button>
             </div>
         </div>
-        <div v-show="!isCollapsed">
+        <div v-show="!isCollapsed"
+             class="pt-6"
+        >
             <div v-if="projectGroups.length"
-                 class="pt-6 pb-10"
+                 :class="{ 'pb-10' : !!projects.length }"
             >
-                <p-field-title class="title"
+                <p-field-title class="mb-3"
                                :label="$t('PROJECT.LANDING.PROJECT_GROUP')"
-                />
+                >
+                    <template #right>
+                        ({{ projectGroups.length }})
+                    </template>
+                </p-field-title>
                 <div class="card-contents">
-                    <project-group-card v-for="(pg, idx) in projectGroups"
-                                        :key="`project-group-${idx}`"
+                    <project-group-card v-for="(pg) in projectGroups"
+                                        :key="pg.key"
                                         :project-group-id="pg.key"
                                         :name="pg.name"
                     />
                 </div>
             </div>
-
             <div v-if="projects.length">
-                <p-field-title class="title"
+                <p-field-title class="mb-3"
                                :label="$t('PROJECT.LANDING.PROJECT')"
-                />
+                >
+                    <template #right>
+                        ({{ projects.length }})
+                    </template>
+                </p-field-title>
                 <div class="card-contents">
-                    <project-card v-for="(p, idx) in projects"
-                                  :key="`project-${idx}`"
+                    <project-card v-for="(p) in projects"
+                                  :key="p.key"
                                   :project-id="p.key"
                                   :group-name="p.data.groupInfo?.name"
                                   :name="p.name"
@@ -180,12 +141,11 @@ onMounted(async () => {
                     />
                 </div>
             </div>
-
-            <p-empty v-if="!state.filteredCardList.length"
+            <p-empty v-if="!projects.length && !projectGroups.length"
                      show-image
-                     class="empty-contents"
+                     class="my-16"
             >
-                <div class="empty-text">
+                <div>
                     <p>{{ $t('PROJECT.LANDING.EMPTY_TEXT') }}</p>
                 </div>
             </p-empty>
@@ -194,18 +154,9 @@ onMounted(async () => {
 </template>
 
 <style scoped lang="postcss">
-.title {
-    @apply mb-3;
-}
 .card-contents {
     @apply grid;
     gap: 1rem;
     grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
 }
-.empty-contents {
-    margin-top: 4rem;
-    .empty-text {
-        width: 20rem;
-    }
-}
 </style>
diff --git a/apps/web/src/services/project/v2/components/ProjectCard.vue b/apps/web/src/services/project/v2/components/ProjectCard.vue
index a139d595d9..a9234fe57d 100644
--- a/apps/web/src/services/project/v2/components/ProjectCard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectCard.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
 import {
-    PI, PTextHighlighting,
+    PI, PTextHighlighting, PTooltip, useTextEllipsis,
 } from '@cloudforet/mirinae';
 
 import type { ProjectType } from '@/api-clients/identity/project/schema/type';
@@ -50,47 +50,65 @@ const handleSelectProject = () => {
 
 /* action menu */
 const visibleActionMenu = ref(false);
+
+/* text ellipsis */
+const textEl = ref<HTMLElement|null>(null);
+const { isEllipsis } = useTextEllipsis({ textEl });
 </script>
 
 <template>
-    <div class="flex flex-col justify-between rounded-lg cursor-pointer h-26 pt-3 px-3 pb-4 group/card"
-         :class="[visibleActionMenu ? 'bg-blue-200' : 'bg-gray-100 hover:bg-gray-150']"
+    <div class="flex flex-col justify-between rounded-lg cursor-pointer p-3 group/prj-card bg-gray-100 hover:bg-gray-150"
+         :class="{ '!bg-blue-200': visibleActionMenu }"
          @click="handleSelectProject"
     >
-        <div>
-            <div class="flex items-center justify-between">
-                <div class="flex gap-1 items-center text-paragraph-md text-gray-900 mb-1 group-hover/card:font-medium">
+        <div class="h-6 mb-2 flex items-center justify-between">
+            <p-tooltip :contents="isEllipsis ? props.name : ''"
+                       class="flex overflow-hidden"
+                       position="bottom"
+            >
+                <div ref="textEl"
+                     class=" overflow-hidden whitespace-nowrap text-ellipsis"
+                >
                     <p-i name="ic_project-filled"
+                         class="mr-1"
                          width="1rem"
                          height="1rem"
                     />
-                    <p-text-highlighting :text="props.name"
+                    <p-text-highlighting class="!text-paragraph-md !font-medium"
+                                         :text="props.name"
                                          :term="props.searchKeyword"
                     />
                 </div>
+            </p-tooltip>
 
-                <div class="flex gap-1 items-center">
+            <div class="flex gap-1 items-center">
+                <div class="hidden group-hover/prj-card:block"
+                     :class="{'!block': visibleActionMenu || isStarred }"
+                >
                     <project-action-dropdown-button :project-id="props.projectId"
+                                                    usage-type="list"
                                                     @update:visible="visibleActionMenu = $event"
                     />
-                    <div :class="['hidden', (isStarred || visibleActionMenu) ? '!block' : 'group-hover/card:block']">
-                        <favorite-button :item-id="props.projectId"
-                                         :favorite-type="FAVORITE_TYPE.PROJECT"
-                        />
-                    </div>
+                </div>
+                <div class="hidden group-hover/prj-card:block"
+                     :class="{'!block': visibleActionMenu || isStarred }"
+                >
+                    <favorite-button :item-id="props.projectId"
+                                     :favorite-type="FAVORITE_TYPE.PROJECT"
+                    />
                 </div>
             </div>
         </div>
-        <div class="flex justify-between items-center">
+        <div class="h-6 flex justify-between items-center">
             <div v-if="props.serviceAccountProviderList.length > 0"
                  class="flex-shrink inline-flex items-center truncate hover:text-secondary hover:font-bold"
             >
-                <div class="truncate min-w-0 h-5">
+                <div class="truncate min-w-0 h-4">
                     <template v-for="(provider, index) in props.serviceAccountProviderList">
                         <router-link v-if="index < 5"
                                      :key="index"
                                      :to="{name: SERVICE_ACCOUNT_ROUTE._NAME,query: { provider: getProvider(provider) ? provider : null },}"
-                                     class="flex-shrink-0 inline-block w-5 h-5 bg-no-repeat bg-[length:100%] bg-center hover:opacity-50 mr-[0.37rem]"
+                                     class="flex-shrink-0 inline-block w-4 h-4 bg-no-repeat bg-[length:100%] bg-center hover:opacity-50 mr-[0.37rem]"
                                      :style="{backgroundImage: `url('${getProvider(provider).icon || require('@/assets/images/ic_cloud-filled.svg')}')`}"
                                      @click.native.stop.prevent
                         />
diff --git a/apps/web/src/services/project/v2/components/ProjectFormModal.vue b/apps/web/src/services/project/v2/components/ProjectFormModal.vue
index 5cf54913ba..e152e23376 100644
--- a/apps/web/src/services/project/v2/components/ProjectFormModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectFormModal.vue
@@ -13,7 +13,6 @@ import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
 import type { ProjectType } from '@/api-clients/identity/project/schema/type';
 import { i18n } from '@/translations';
 
-import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
@@ -23,6 +22,7 @@ import { useFormValidator } from '@/common/composables/form-validator';
 import { gray, indigo } from '@/styles/colors';
 
 import { useProjectQuery } from '@/services/project/v2/composables/queries/use-project-query';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 
@@ -38,9 +38,9 @@ const props = defineProps<{
 const emit = defineEmits<{(e: 'created', projectGroupId: string): void;
 }>();
 
-const projectStore = useProjectReferenceStore();
+const projectListStore = useProjectListStore();
 const state = reactive({
-    projectNames: computed(() => Object.values(projectStore.getters.projectItems).filter((item) => item.key !== targetId.value).map((p) => p.name)),
+    projectNames: computed(() => projectListStore.projects.filter((item) => item.key !== targetId.value).map((p) => p.name)),
     accessMenuItems: computed<SelectDropdownMenuItem[]>(() => ([
         {
             name: 'PRIVATE',
@@ -75,7 +75,9 @@ const {
         return true;
     },
 });
-const { data: project, setQueryData, invalidateAllQueries } = useProjectQuery({
+const {
+    data: project, isLoading, setQueryData, invalidateAllQueries,
+} = useProjectQuery({
     projectId: targetId,
     enabled: visible,
 });
@@ -119,7 +121,6 @@ const { mutateAsync: updateProject, isPending: isUpdatingProject } = useMutation
     onSuccess: (data) => {
         showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_UPDATE_PROJECT'), '');
         setQueryData(data);
-        projectStore.sync(data);
     },
     onError: (e) => {
         ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_UPDATE_PROJECT'));
@@ -134,7 +135,6 @@ const { mutateAsync: updateProjectType, isPending: isUpdatingProjectType } = use
     onSuccess: (data) => {
         showSuccessMessage(i18n.t('PROJECT.DETAIL.ALT_S_UPDATE_PROJECT_TYPE'), '');
         setQueryData(data);
-        projectStore.sync(data);
     },
     onError: (e) => {
         ErrorHandler.handleRequestError(e, i18n.t('PROJECT.DETAIL.ALT_E_UPDATE_PROJECT_TYPE'));
@@ -186,6 +186,7 @@ const handleSelectAccess = (selectedAccess) => {
                     size="sm"
                     fade
                     backdrop
+                    :loading-backdrop="isLoading"
                     :visible="visible"
                     :disabled="isProcessing || !isAllValid"
                     @close="projectPageModalStore.closeFormModal"
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupCard.vue b/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
index b9c9639d4b..72c52a21b1 100644
--- a/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectGroupCard.vue
@@ -3,7 +3,10 @@
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
-import { PI, PTextHighlighting } from '@cloudforet/mirinae';
+import {
+    PI, PTextHighlighting, PTooltip, useTextEllipsis,
+} from '@cloudforet/mirinae';
+
 
 import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
 import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
@@ -13,6 +16,7 @@ import { indigo } from '@/styles/colors';
 
 import ProjectActionDropdownButton from '@/services/project/v2/components/ProjectActionDropdownButton.vue';
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
 
 
 const props = defineProps<{
@@ -21,6 +25,10 @@ const props = defineProps<{
     name: string;
 }>();
 
+/* projects and groups */
+const projectListStore = useProjectListStore();
+const projects = computed(() => projectListStore.getProjectsByGroupId(props.projectGroupId));
+const projectGroups = computed(() => projectListStore.getProjectGroupsByParentId(props.projectGroupId));
 
 /* favorite */
 const favoriteStore = useFavoriteStore();
@@ -40,75 +48,57 @@ const handleSelectProjectGroup = () => {
 /* action menu */
 const visibleActionMenu = ref(false);
 
+/* text ellipsis */
+const textEl = ref<HTMLElement|null>(null);
+const { isEllipsis } = useTextEllipsis({ textEl });
 </script>
 
 <template>
-    <div class="flex items-center justify-between bg-gray-100 rounded-lg cursor-pointer project-main-project-group-card"
+    <div class="bg-gray-100 cursor-pointer p-3 hover:bg-gray-150 rounded-lg group/pg-card"
+         :class="{ '!bg-blue-200': visibleActionMenu }"
          @click="handleSelectProjectGroup"
     >
-        <div class="project-group-item">
-            <p-i name="ic_folder-filled"
-                 :color="indigo[500]"
-                 width="1rem"
-                 height="1rem"
-            />
-            <p-text-highlighting class="project-group-name"
-                                 :text="props.name"
-                                 :term="props.searchKeyword"
-            />
+        <div class="flex items-center justify-between rounded-t-lg h-6">
+            <p-tooltip :contents="isEllipsis ? props.name : ''"
+                       class="flex overflow-hidden"
+                       position="bottom"
+            >
+                <div ref="textEl"
+                     class="overflow-hidden whitespace-nowrap text-ellipsis"
+                >
+                    <p-i name="ic_folder-filled"
+                         :color="indigo[500]"
+                         class="mr-1"
+                         width="1rem"
+                         height="1rem"
+                    />
+                    <p-text-highlighting class="!text-label-md !font-medium"
+                                         :text="props.name"
+                                         :term="props.searchKeyword"
+                    />
+                </div>
+            </p-tooltip>
+            <div class="flex gap-1 items-center">
+                <div class="hidden group-hover/pg-card:block"
+                     :class="{'!block': visibleActionMenu }"
+                >
+                    <project-action-dropdown-button :project-group-id="props.projectGroupId"
+                                                    usage-type="list"
+                                                    @update:visible="visibleActionMenu = $event"
+                    />
+                </div>
+                <div class="hidden group-hover/pg-card:block"
+                     :class="{'!block': visibleActionMenu || isStarred }"
+                >
+                    <favorite-button :item-id="props.projectGroupId"
+                                     :favorite-type="FAVORITE_TYPE.PROJECT_GROUP"
+                    />
+                </div>
+            </div>
         </div>
-        <div class="toolset-group">
-            <project-action-dropdown-button :project-group-id="props.projectGroupId"
-                                            @update:visible="visibleActionMenu = $event"
-            />
-            <favorite-button :item-id="props.projectGroupId"
-                             :favorite-type="FAVORITE_TYPE.PROJECT_GROUP"
-                             :class="{'favorite-button': true, 'starred': isStarred }"
-            />
+        <div class="mt-2 rounded-b-lg text-label-sm text-gray-600">
+            {{ projectGroups.length }} {{ $t('PROJECT.LANDING.PROJECT_GROUPS') }} ⋅
+            {{ projects.length }} {{ $t('PROJECT.LANDING.PROJECTS') }}
         </div>
     </div>
 </template>
-
-<style scoped lang="postcss">
-.project-main-project-group-card {
-    height: 3rem;
-    padding: 0.75rem;
-
-    .project-group-item {
-        @apply flex gap-1;
-
-        .project-group-name {
-            @apply text-label-md text-gray-900;
-        }
-    }
-
-    .favorite-button {
-        display: none;
-
-        &.starred {
-            display: block;
-        }
-    }
-    .toolset-button {
-        display: none;
-    }
-
-    .toolset-group {
-        @apply flex gap-1 items-center;
-    }
-
-    &:hover {
-        @apply bg-gray-150;
-
-        .toolset-button {
-            display: block;
-        }
-        .favorite-button {
-            display: block;
-        }
-    }
-    &.toolset-active {
-        @apply bg-blue-200;
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue b/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
index d87cee6ce2..991f36192c 100644
--- a/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectGroupFormModal.vue
@@ -32,7 +32,7 @@ const targetId = computed(() => projectPageModalStore.state.targetId);
 const updateMode = computed(() => projectPageModalStore.state.targetId !== undefined);
 
 /* project group */
-const { data: projectGroup, setQueryData } = useProjectGroupQuery({
+const { data: projectGroup, isLoading, setQueryData } = useProjectGroupQuery({
     projectGroupId: targetId,
     enabled: visible,
 });
@@ -50,7 +50,7 @@ const {
     invalidState,
     invalidTexts,
     setForm, isAllValid,
-    initForm,
+    initForm, resetValidations,
 } = useFormValidator({
     projectGroupName: undefined as string|undefined,
 }, {
@@ -65,6 +65,7 @@ watch([visible, projectGroup], async ([v, pg]) => {
     if (!v) return;
     if (updateMode.value) {
         setForm('projectGroupName', pg?.name);
+        resetValidations();
     } else {
         initForm();
     }
@@ -137,6 +138,7 @@ const handleConfirm = async () => {
                     size="sm"
                     fade
                     backdrop
+                    :loading-backdrop="isLoading"
                     :visible="visible"
                     :loading="isProcessing"
                     :disabled="isProcessing || !isAllValid || projectGroup?.name === projectGroupName"
diff --git a/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue b/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
index 2a2f5cdccf..25c2ec4835 100644
--- a/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
+++ b/apps/web/src/services/project/v2/components/ProjectLSBSearch.vue
@@ -6,12 +6,11 @@ import {
 } from '@cloudforet/mirinae';
 import type { TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
 
-import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
-
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import LSBItem from '@/common/modules/navigations/new-lsb/LSBItem.vue';
 
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
 
 const props = defineProps<{
     keyword?: string;
@@ -19,11 +18,8 @@ const props = defineProps<{
 const emit = defineEmits<{(e: 'update:keyword', value: string): void;
 }>();
 
-const projectReferenceStore = useProjectReferenceStore();
-const projectFilteredByKeyword = computed(() => {
-    const projectItems = Object.values(projectReferenceStore.getters.projectItems);
-    return projectItems.filter((project) => getTextHighlightRegex(props.keyword).test(project.name));
-});
+const projectListStore = useProjectListStore();
+const projectFilteredByKeyword = computed(() => projectListStore.projects.filter((project) => getTextHighlightRegex(props.keyword).test(project.name)));
 const predicate: TreeNodeRoutePredicate = (to, curr) => to.params?.projectGroupOrProjectId === curr.params.projectGroupOrProjectId;
 </script>
 
diff --git a/apps/web/src/services/project/v2/components/ProjectLSBTree.vue b/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
index 86c115fed9..11542d33c1 100644
--- a/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
+++ b/apps/web/src/services/project/v2/components/ProjectLSBTree.vue
@@ -18,25 +18,13 @@ import {
 import { PTreeNode } from '@cloudforet/mirinae';
 import type { TreeNodeIcon, TreeNodeRoutePredicate } from '@cloudforet/mirinae/types/data-display/tree/new-tree/type';
 
-import type { ProjectGroupReferenceItem } from '@/store/reference/project-group-reference-store';
-import { useProjectGroupReferenceStore, type ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceItem } from '@/store/reference/project-reference-store';
-import { useProjectReferenceStore, type ProjectReferenceMap } from '@/store/reference/project-reference-store';
-
 import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { indigo } from '@/styles/colors';
 
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
-
-interface ProjectData extends ProjectReferenceItem {
-    type: 'PROJECT';
-}
-interface ProjectGroupData extends ProjectGroupReferenceItem {
-    type: 'PROJECT_GROUP';
-}
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
 
 const props = withDefaults(defineProps<{
     parentGroupId?: string;
@@ -48,34 +36,9 @@ const props = withDefaults(defineProps<{
     selectedPaths: () => [],
 });
 
-
 /* items */
-const projectGroupReferenceStore = useProjectGroupReferenceStore();
-const projectReferenceStore = useProjectReferenceStore();
-const projectGroupMap = computed<ProjectGroupReferenceMap>(() => projectGroupReferenceStore.getters.projectGroupItems);
-const projectGroups = computed<ProjectGroupReferenceItem[]>(() => Object.values(projectGroupMap.value));
-const projectMap = computed<ProjectReferenceMap>(() => projectReferenceStore.getters.projectItems);
-const projects = computed<ProjectReferenceItem[]>(() => Object.values(projectMap.value));
-const items = computed<Array<ProjectData|ProjectGroupData>>(() => {
-    const _items: Array<ProjectData|ProjectGroupData> = [];
-    projectGroups.value.forEach((group) => {
-        const parentId = group.data.parentGroupInfo?.id;
-        if (parentId !== props.parentGroupId) return;
-        _items.push({
-            ...group,
-            type: 'PROJECT_GROUP',
-        });
-    });
-    projects.value.forEach((project) => {
-        const groupId = project.data.groupInfo?.id;
-        if (groupId !== props.parentGroupId) return;
-        _items.push({
-            ...project,
-            type: 'PROJECT',
-        });
-    });
-    return _items;
-});
+const projectListStore = useProjectListStore();
+const items = computed(() => projectListStore.getItemsByParentGroupId(props.parentGroupId));
 
 /* icons */
 const projectGroupIcon: TreeNodeIcon = { iconName: 'ic_folder-filled', iconColor: indigo[500] };
diff --git a/apps/web/src/services/project/v2/components/ProjectMoveModal.vue b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
index ce78af2b74..4306693a51 100644
--- a/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
+++ b/apps/web/src/services/project/v2/components/ProjectMoveModal.vue
@@ -9,9 +9,6 @@ import { useProjectGroupApi } from '@/api-clients/identity/project-group/composa
 import { useProjectApi } from '@/api-clients/identity/project/composables/use-project-api';
 import { i18n } from '@/translations';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectGroupReferenceMap } from '@/store/reference/project-group-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
@@ -19,6 +16,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import type { ProjectTreeNodeData } from '@/common/modules/project/project-tree-type';
 import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
 
+import { useProjectListStore } from '@/services/project/v2/stores/project-list-store';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 const projectPageModalStore = useProjectPageModalStore();
@@ -26,24 +24,20 @@ const visible = computed(() => projectPageModalStore.state.moveModalVisible && !
 const isProject = computed(() => projectPageModalStore.state.targetType === 'project');
 const targetId = computed(() => projectPageModalStore.state.targetId);
 
-const allReferenceStore = useAllReferenceStore();
-const storeState = reactive({
-    projects: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),
-});
+const projectListStore = useProjectListStore();
 const state = reactive({
     originParentGroupId: computed<string|undefined>(() => {
         if (!targetId.value) return undefined;
-        if (isProject.value) return storeState.projects[targetId.value]?.data.groupInfo?.id;
-        return storeState.projectGroups[targetId.value]?.data.parentGroupInfo?.id;
+        if (isProject.value) return projectListStore.projectMap[targetId.value]?.data.groupInfo?.id;
+        return projectListStore.projectGroupMap[targetId.value]?.data.parentGroupInfo?.id;
     }),
     selectedProjectGroupIdList: [] as string[],
     selectProjectGroup: true as boolean,
     isValid: computed<boolean>(() => getIsValid(isProject.value, state.selectProjectGroup, state.selectedProjectGroupIdList, state.originParentGroupId)),
     targetName: computed<string>(() => {
         if (!targetId.value) return '';
-        if (isProject.value) return storeState.projects[targetId.value]?.name;
-        return storeState.projectGroups[targetId.value]?.name;
+        if (isProject.value) return projectListStore.projectMap[targetId.value]?.name;
+        return projectListStore.projectGroupMap[targetId.value]?.name;
     }),
     projectGroupSelectOptions: computed(() => ({
         id: targetId.value,
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index f3cc908b39..d2d3e137df 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -7,6 +7,8 @@ import {
 } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
+import { nextTick } from 'process';
+
 import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
 import ProjectAndGroupListPanel from '@/services/project/v2/components/ProjectAndGroupListPanel.vue';
 import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue';
@@ -77,6 +79,14 @@ const handleCreated = (id: string) => {
     });
 };
 
+/* mounted */
+const mounted = ref(false);
+onMounted(() => {
+    nextTick(() => {
+        mounted.value = true;
+    });
+});
+
 </script>
 
 <template>
@@ -84,30 +94,32 @@ const handleCreated = (id: string) => {
         <project-header :project-id="projectId"
                         :project-group-id="projectGroupId"
         />
-        <project-and-group-list-panel class="mt-4"
-                                      :target-id="props.projectGroupOrProjectId"
-                                      :target-type="projectGroupId ? 'projectGroup' : 'project'"
-        />
+        <keep-alive>
+            <project-and-group-list-panel v-if="mounted"
+                                          :key="props.projectGroupOrProjectId ?? 'all'"
+                                          class="mt-4"
+                                          :target-id="props.projectGroupOrProjectId"
+                                          :target-type="props.projectGroupOrProjectId ? (projectId ? 'project' : 'projectGroup') : undefined"
+            />
+        </keep-alive>
 
         <template v-if="isModalLoadReady">
-            <keep-alive>
-                <project-group-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'projectGroup'" />
-                <project-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'project'" />
-                <project-delete-modal v-if="projectPageModelStore.state.deleteModalVisible"
-                                      @deleted="handleDeleted"
-                />
-                <project-move-modal v-if="projectPageModelStore.state.moveModalVisible" />
-                <project-member-invite-modal v-if="projectPageModelStore.state.inviteMemberModalVisible" />
-                <project-tags-modal v-if="projectPageModelStore.state.manageTagsModalVisible" />
-                <project-form-modal v-if="projectPageModelStore.state.projectFormModalVisible && projectPageModelStore.state.targetType === 'project'"
-                                    :target-parent-group-id="targetParentGroupId"
-                                    @created="handleCreated"
-                />
-                <project-group-form-modal v-if="projectPageModelStore.state.projectFormModalVisible && projectPageModelStore.state.targetType === 'projectGroup'"
-                                          :target-parent-group-id="targetParentGroupId"
-                                          @created="handleCreated"
-                />
-            </keep-alive>
+            <project-group-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'projectGroup'" />
+            <project-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'project'" />
+            <project-delete-modal v-if="projectPageModelStore.state.deleteModalVisible"
+                                  @deleted="handleDeleted"
+            />
+            <project-move-modal v-if="projectPageModelStore.state.moveModalVisible" />
+            <project-member-invite-modal v-if="projectPageModelStore.state.inviteMemberModalVisible" />
+            <project-tags-modal v-if="projectPageModelStore.state.manageTagsModalVisible" />
+            <project-form-modal v-if="projectPageModelStore.state.projectFormModalVisible && projectPageModelStore.state.targetType === 'project'"
+                                :target-parent-group-id="targetParentGroupId"
+                                @created="handleCreated"
+            />
+            <project-group-form-modal v-if="projectPageModelStore.state.projectFormModalVisible && projectPageModelStore.state.targetType === 'projectGroup'"
+                                      :target-parent-group-id="targetParentGroupId"
+                                      @created="handleCreated"
+            />
         </template>
     </div>
 </template>
diff --git a/apps/web/src/services/project/v2/stores/project-list-store.ts b/apps/web/src/services/project/v2/stores/project-list-store.ts
new file mode 100644
index 0000000000..6254829010
--- /dev/null
+++ b/apps/web/src/services/project/v2/stores/project-list-store.ts
@@ -0,0 +1,88 @@
+import { computed } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { ProjectGroupReferenceItem } from '@/store/reference/project-group-reference-store';
+import { useProjectGroupReferenceStore } from '@/store/reference/project-group-reference-store';
+import type { ProjectReferenceItem } from '@/store/reference/project-reference-store';
+import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
+
+export interface ProjectData extends ProjectReferenceItem {
+    type: 'PROJECT';
+}
+
+export interface ProjectGroupData extends ProjectGroupReferenceItem {
+    type: 'PROJECT_GROUP';
+}
+
+export const useProjectListStore = defineStore('project-list', () => {
+    const projectGroupReferenceStore = useProjectGroupReferenceStore();
+    const projectReferenceStore = useProjectReferenceStore();
+
+    /* loading state */
+    const isLoading = computed(() => !projectGroupReferenceStore.state.items || !projectReferenceStore.state.items);
+
+    /* cached data */
+    const projectGroupMap = computed(() => projectGroupReferenceStore.getters.projectGroupItems);
+    const projectGroups = computed<ProjectGroupReferenceItem[]>(() => Object.values(projectGroupMap.value));
+    const projectMap = computed(() => projectReferenceStore.getters.projectItems);
+    const projects = computed<ProjectReferenceItem[]>(() => Object.values(projectMap.value));
+
+    /* filtered data by parent group */
+    const getItemsByParentGroupId = computed(() => {
+        const pgList = projectGroups.value;
+        const prjList = projects.value;
+        return (parentGroupId?: string) => {
+            const items: Array<ProjectData|ProjectGroupData> = [];
+
+            pgList.forEach((group) => {
+                const parentId = group.data.parentGroupInfo?.id;
+                if (parentId !== parentGroupId) return;
+                items.push({
+                    ...group,
+                    type: 'PROJECT_GROUP',
+                });
+            });
+
+            prjList.forEach((project) => {
+                const groupId = project.data.groupInfo?.id;
+                if (groupId !== parentGroupId) return;
+                items.push({
+                    ...project,
+                    type: 'PROJECT',
+                });
+            });
+
+            return items;
+        };
+    });
+
+    /* filtered projects by group */
+    const getProjectsByGroupId = computed(() => {
+        const prjList = projects.value;
+        return (groupId?: string) => {
+            if (!groupId) return prjList;
+            return prjList.filter((project) => project.data.groupInfo?.id === groupId);
+        };
+    });
+
+    /* filtered project groups by parent */
+    const getProjectGroupsByParentId = computed(() => {
+        const pgList = projectGroups.value;
+        return (parentId?: string) => {
+            if (!parentId) return pgList;
+            return pgList.filter((group) => group.data.parentGroupInfo?.id === parentId);
+        };
+    });
+
+    return {
+        isLoading,
+        projectGroups,
+        projects,
+        projectMap,
+        projectGroupMap,
+        getItemsByParentGroupId,
+        getProjectsByGroupId,
+        getProjectGroupsByParentId,
+    };
+});

From 9d0676e0142b416bf6ebcc0dd2311372efe48cd4 Mon Sep 17 00:00:00 2001
From: Wanjin Noh <wanjin@megazone.com>
Date: Mon, 7 Apr 2025 16:35:04 +0900
Subject: [PATCH 22/22] feat: add ProjectDashboard, ProjectDetailTab, and
 ProjectOverview components

Signed-off-by: Wanjin Noh <wanjin@megazone.com>
---
 .../v2/components/ProjectDashboard.vue        | 183 ++++++++++++++
 .../v2/components/ProjectDetailTab.vue        | 125 ++++++++++
 .../project/v2/components/ProjectOverview.vue |   7 +
 .../project/v2/components/ProjectTabs.vue     |  67 -----
 .../project/v2/pages/ProjectDetailPage.vue    | 232 ------------------
 .../project/v2/pages/ProjectMainPage.vue      |   7 +
 .../project/v2/routes/route-constant.ts       |   1 +
 .../src/services/project/v2/routes/routes.ts  |   3 +-
 8 files changed, 325 insertions(+), 300 deletions(-)
 create mode 100644 apps/web/src/services/project/v2/components/ProjectDashboard.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectDetailTab.vue
 create mode 100644 apps/web/src/services/project/v2/components/ProjectOverview.vue
 delete mode 100644 apps/web/src/services/project/v2/components/ProjectTabs.vue
 delete mode 100644 apps/web/src/services/project/v2/pages/ProjectDetailPage.vue

diff --git a/apps/web/src/services/project/v2/components/ProjectDashboard.vue b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
new file mode 100644
index 0000000000..694697630c
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import {
+    computed,
+    onUnmounted,
+    ref, watch,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router/composables';
+
+import { useQueryClient } from '@tanstack/vue-query';
+
+import { PSkeleton } from '@cloudforet/mirinae';
+
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import DashboardLabelsButton from '@/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue';
+import DashboardRefreshDropdown from '@/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue';
+import DashboardToolsetDateDropdown
+    from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue';
+import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue';
+import DashboardWidgetContainerV2
+    from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue';
+import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';
+import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+
+
+interface Props {
+    id: string;
+    dashboardId: string;
+}
+const props = defineProps<Props>();
+
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
+const widgetContainerRef = ref<typeof DashboardWidgetContainer|null>(null);
+const route = useRoute();
+const router = useRouter();
+
+/* Query */
+const {
+    dashboard,
+    isError: dashboardError,
+    isLoading: dashboardLoading,
+} = useDashboardGetQuery({
+    dashboardId: computed(() => route.params.dashboardId),
+});
+const {
+    widgetList,
+    isLoading: widgetLoading,
+    isError: widgetError,
+    keys: widgetListKeys,
+} = useDashboardWidgetListQuery({
+    dashboardId: computed(() => route.params.dashboardId),
+});
+const queryClient = useQueryClient();
+
+const handleRefresh = async () => {
+    await queryClient.invalidateQueries({ queryKey: widgetListKeys.publicWidgetListQueryKey.value });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
+};
+watch([dashboard, () => route.params], ([_dashboard]) => {
+    if (_dashboard) {
+        dashboardDetailStore.reset();
+        dashboardDetailStore.setDashboardInfoStoreStateV2({
+            ..._dashboard,
+            project_id: route.params.id,
+        });
+    }
+}, { immediate: true });
+watch(widgetList, (_widgetList) => {
+    if (_widgetList.length) {
+        dashboardDetailStore.setDashboardWidgets(_widgetList);
+    }
+});
+watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => {
+    if (_dashboardError || _widgetError) {
+        ErrorHandler.handleError(_dashboardError || _widgetError);
+        router.push({ name: PROJECT_ROUTE_V2._NAME });
+    }
+});
+
+onUnmounted(() => {
+    dashboardDetailStore.reset();
+});
+</script>
+
+<template>
+    <div class="project-dashboard-page">
+        <div class="dashboard-wrapper">
+            <div class="title-wrapper">
+                <p-skeleton v-if="!dashboard?.name"
+                            width="20rem"
+                            height="1.5rem"
+                />
+                <div v-else
+                     class="dashboard-title"
+                >
+                    <p class="title">
+                        {{ dashboard?.name }}
+                    </p>
+                    <span class="beta-mark">beta</span>
+                </div>
+                <dashboard-labels-button class="ml-4"
+                                         dashboard-id="props.dashboardId"
+                />
+            </div>
+            <div class="contents-wrapper">
+                <div class="toolset">
+                    <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
+                    <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
+                                                :loading="dashboardLoading || widgetLoading"
+                                                disable-interval
+                                                @refresh="handleRefresh"
+                    />
+                </div>
+                <div v-if="!dashboardLoading && !widgetLoading"
+                     class="selectors"
+                >
+                    <dashboard-variables-v2 class="variable-selector-wrapper"
+                                            is-project-dashboard
+                                            disable-save-button
+                                            :loading="dashboardLoading || widgetLoading"
+                    />
+                </div>
+                <dashboard-widget-container-v2 ref="widgetContainerRef" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.project-dashboard-page {
+    .dashboard-wrapper {
+        .title-wrapper {
+            @apply flex items-center;
+            padding: 1.5rem 1rem;
+            .dashboard-title {
+                @apply flex;
+                .title {
+                    @apply text-label-xl font-bold text-gray-800;
+                }
+                .beta-mark {
+                    @apply text-coral-default;
+                    font-size: 0.625rem;
+                    cursor: default;
+                    margin-left: 0.125rem;
+                    height: 1.5rem;
+                }
+            }
+        }
+
+        .contents-wrapper {
+            @apply bg-gray-100 rounded-lg;
+            padding: 1rem 0.5rem 0.5rem;
+            margin: 0 1rem;
+            .toolset {
+                @apply flex justify-between items-center;
+            }
+            .selectors {
+                .variable-selector-wrapper {
+                    @apply flex flex-wrap gap-2;
+                    padding: 1rem 0 1.5rem;
+                    background-color: unset;
+                }
+            }
+        }
+    }
+
+    /* custom design-system component - p-heading */
+    :deep(.p-heading) {
+        .heading-wrapper {
+            line-height: unset;
+        }
+    }
+}
+</style>
+
diff --git a/apps/web/src/services/project/v2/components/ProjectDetailTab.vue b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
new file mode 100644
index 0000000000..7adb277281
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { PTab } from '@cloudforet/mirinae';
+import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
+
+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';
+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';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import ProjectDashboard from '@/services/project/v2/components/ProjectDashboard.vue';
+
+
+const props = defineProps<{
+    projectId: string,
+    dashboardId?: string,
+}>();
+const emit = defineEmits<{(e: 'update:dashboard-id', value?: string): void;}>();
+
+
+const activeTab = ref('overview');
+watch(() => props.dashboardId, (did) => {
+    activeTab.value = did ?? 'overview';
+}, { immediate: true });
+watch(() => props.projectId, () => {
+    activeTab.value = 'overview';
+});
+
+/* dashboard tabs */
+const { publicDashboardAPI } = usePublicDashboardApi();
+const { publicFolderAPI } = usePublicFolderApi();
+const { key: dashboardListQueryKey, params: dashboardListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
+    params: computed<PublicDashboardListParameters>(() => ({
+        // project_id: props.id,
+        query: {
+            filter: [
+                { k: 'shared', v: true, o: 'eq' },
+                { k: 'version', v: '1.0', o: 'not' },
+                { k: 'scope', v: 'PROJECT', o: 'eq' },
+            ],
+        },
+    })),
+});
+const { data: dashboardList } = useScopedQuery({
+    queryKey: dashboardListQueryKey,
+    queryFn: () => publicDashboardAPI.list(dashboardListParams.value),
+    select: (data) => data?.results ?? [],
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    gcTime: 1000 * 60 * 5, // 5 minutes
+});
+const { key: dashboardFolderListQueryKey, params: dashboardFolderListParams } = useServiceQueryKey('dashboard', 'public-folder', 'list', {
+    params: computed<PublicFolderListParameters>(() => ({
+        // project_id: props.id,
+        query: {
+            filter: [
+                { k: 'shared', v: true, o: 'eq' },
+                { k: 'scope', v: 'PROJECT', o: 'eq' },
+            ],
+        },
+    })),
+});
+const { data: dashboardFolderList } = useScopedQuery({
+    queryKey: dashboardFolderListQueryKey,
+    queryFn: () => publicFolderAPI.list(dashboardFolderListParams.value),
+    select: (data) => data?.results || [],
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    gcTime: 1000 * 60 * 5, // 5 minutes
+});
+
+const tabs = computed<TabItem[]>(() => {
+    const folderTabs = dashboardFolderList.value?.map((folder) => ({
+        name: folder.folder_id,
+        label: folder.name,
+        tabType: 'folder',
+        icon: 'ic_folder',
+        subItems: dashboardList.value?.filter((dashboard) => dashboard.folder_id === folder.folder_id).map((dashboard) => ({
+            name: dashboard.dashboard_id,
+            label: dashboard.name,
+            icon: 'ic_service_dashboard',
+        })),
+    })) ?? [];
+    const dashboardTabs = dashboardList.value?.filter((dashboard) => !dashboard.folder_id).map((dashboard) => ({
+        name: dashboard.dashboard_id,
+        label: dashboard.name,
+        icon: 'ic_service_dashboard',
+    })) ?? [];
+    return [
+        { name: 'overview', label: 'Overview' }, // TODO: i18n
+        ...folderTabs,
+        ...dashboardTabs,
+    ];
+});
+
+const onChangeTab = (tab: string) => {
+    activeTab.value = tab;
+    emit('update:dashboard-id', tab === 'overview' ? undefined : tab);
+};
+</script>
+
+<template>
+    <div>
+        <p-tab :tabs="tabs"
+               :active-tab="activeTab"
+               @change="onChangeTab"
+        >
+            <template #default="tab">
+                <keep-alive v-if="tab.name === 'overview'">
+                    <div v-if="activeTab === 'overview'">
+                        Overview will be implemented later.
+                    </div>
+                </keep-alive>
+                <keep-alive v-else-if="tab.name">
+                    <project-dashboard :id="props.projectId"
+                                       :key="`${tab.name}-${props.projectId}`"
+                                       :dashboard-id="tab.name"
+                    />
+                </keep-alive>
+            </template>
+        </p-tab>
+    </div>
+</template>
+
diff --git a/apps/web/src/services/project/v2/components/ProjectOverview.vue b/apps/web/src/services/project/v2/components/ProjectOverview.vue
new file mode 100644
index 0000000000..323d467a48
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectOverview.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div>overview</div>
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectTabs.vue b/apps/web/src/services/project/v2/components/ProjectTabs.vue
deleted file mode 100644
index eae75c492f..0000000000
--- a/apps/web/src/services/project/v2/components/ProjectTabs.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
-
-import { PTab } from '@cloudforet/mirinae';
-import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
-
-import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
-
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
-interface Props {
-    id?: string,
-    item?: ProjectModel,
-    tabs: TabItem[],
-    activeTab: string,
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    id: undefined,
-    item: undefined,
-    tabs: () => [],
-    // TODO: check routes
-    activeTab: PROJECT_ROUTE_V2._NAME,
-});
-
-const route = useRoute();
-const router = useRouter();
-
-const emit = defineEmits<{(e: 'update:active-tab', value: string): void;}>();
-
-const state = reactive({
-    proxyActiveTab: useProxyValue('activeTab', props, emit),
-});
-
-const onChangeTab = (activeTab: string) => {
-    if (activeTab === route.name) return;
-    const isDashboardTab = activeTab.startsWith('public-dash-');
-    const dashboardTabRoute = {
-        // TODO: check route
-        name: PROJECT_ROUTE_V2._NAME,
-        params: {
-            id: props.id as string,
-            dashboardId: activeTab,
-        },
-    };
-    router.replace(isDashboardTab ? dashboardTabRoute : { name: activeTab }).catch(() => {});
-};
-</script>
-
-<template>
-    <p-tab v-if="props.item"
-           :tabs="props.tabs"
-           :active-tab.sync="state.proxyActiveTab"
-           @change="onChangeTab"
-    >
-        <router-view />
-    </p-tab>
-</template>
-
-<style scoped lang="postcss">
-.edit-button {
-    margin-right: 0.5rem;
-}
-</style>
diff --git a/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue b/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue
deleted file mode 100644
index e6b477afbc..0000000000
--- a/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<script setup lang="ts">
-import {
-    computed, onUnmounted, reactive, watch,
-} from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-import {
-    PDataLoader,
-} from '@cloudforet/mirinae';
-import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
-
-import type { ProjectModel } from '@/api-clients/identity/project/schema/model';
-import { i18n } from '@/translations';
-
-import { useDashboardStore } from '@/store/dashboard/dashboard-store';
-
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
-import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-
-import { BACKGROUND_COLOR } from '@/styles/colorsets';
-
-import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
-import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
-import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue';
-import ProjectTabs from '@/services/project/v2/components/ProjectTabs.vue';
-import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
-
-interface Props {
-    projectGroupId?: string;
-    projectId?: string;
-}
-const props = defineProps<Props>();
-
-
-
-const route = useRoute();
-
-const gnbStore = useGnbStore();
-const dashboardStore = useDashboardStore();
-
-/* Query */
-const {
-    publicDashboardList,
-} = useDashboardQuery();
-const {
-    publicFolderList,
-} = useDashboardFolderQuery();
-
-const state = reactive({
-    // TODO: need to be updated by real data
-    item: computed<ProjectModel|undefined>(() => undefined),
-    projectGroupMoveModalVisible: false,
-    favoriteOptions: computed<FavoriteOptions>(() => ({
-        type: FAVORITE_TYPE.PROJECT,
-        // TODO: need to be updated by real data
-        projectId: '',
-    })),
-});
-const singleItemTabState = reactive({
-    tabs: computed<TabItem[]>(() => [
-        {
-            // TODO: check route
-            name: PROJECT_ROUTE_V2._NAME,
-            label: i18n.t('PROJECT.DETAIL.TAB_SUMMARY'),
-        },
-        ...(singleItemTabState.dashboardTabs.length
-            ? [
-                {
-                    name: 'divider',
-                    tabType: 'divider',
-                },
-                ...singleItemTabState.dashboardTabs,
-            ]
-            : []),
-    ]),
-    dashboardTabs: computed(() => {
-        const projectDashboardItems = publicDashboardList.value
-            .filter((d) => d.version !== '1.0' && d.shared && d.scope === 'PROJECT');
-        const projectFolderItems = publicFolderList.value
-            .filter((d) => d.shared && d.scope === 'PROJECT');
-
-        const folderTabs = projectFolderItems.map((folder) => ({
-            name: folder.folder_id,
-            label: folder.name,
-            tabType: 'folder',
-            icon: 'ic_folder',
-            subItems: projectDashboardItems.filter((dashboard) => dashboard.folder_id === folder.folder_id).map((dashboard) => ({
-                name: dashboard.dashboard_id,
-                label: dashboard.name,
-                icon: 'ic_service_dashboard',
-            })),
-        }));
-        const dashboardTabs = projectDashboardItems.filter((dashboard) => !dashboard.folder_id).map((dashboard) => ({
-            name: dashboard.dashboard_id,
-            label: dashboard.name,
-            icon: 'ic_service_dashboard',
-        }));
-        return [
-            ...folderTabs,
-            ...dashboardTabs,
-        ];
-    }),
-    // TODO: check route
-    activeTab: PROJECT_ROUTE_V2._NAME,
-});
-
-/* Watchers */
-// TODO: check if it is needed
-// watch(() => projectDetailPageState.projectId, async (projectId) => {
-//     if (projectId) {
-//         await projectDetailPageStore.getProject(projectId);
-//     }
-// });
-watch(() => route.name, (routeName) => {
-    const flattenTabs = singleItemTabState.tabs.reduce((acc, tab) => {
-        if (tab?.subItems) {
-            acc.push(...tab.subItems);
-        } else {
-            acc.push(tab);
-        }
-        return acc;
-    }, [] as TabItem[]);
-    const exactRoute = route.matched.find((d) => flattenTabs.find((tab) => tab.name === d.name));
-    // TODO: check route
-    if (routeName === PROJECT_ROUTE_V2._NAME) {
-        singleItemTabState.activeTab = route.params.dashboardId;
-    } else {
-        // TODO: check route
-        singleItemTabState.activeTab = exactRoute?.name || PROJECT_ROUTE_V2._NAME;
-    }
-}, { immediate: true });
-// TODO: check if it is needed
-// watch([
-//     () => props.id,
-//     () => appContextStore.getters.globalGrantLoading,
-// ], ([id, globalGrantLoading]) => {
-//     if (!globalGrantLoading) projectDetailPageStore.setProjectId(id);
-// }, { immediate: true });
-// TODO: check if it is needed
-// watch(() => projectDetailPageState.projectId, (projectId) => {
-//     gnbStore.setId(projectId);
-// }, { immediate: true });
-watch(() => state.favoriteOptions, (favoriteOptions) => {
-    gnbStore.setFavoriteItemId(favoriteOptions);
-}, { immediate: true });
-
-onUnmounted(() => {
-    dashboardStore.reset();
-});
-</script>
-
-<template>
-    <div class="project-detail-page">
-        <project-header :id="props.id" />
-        <!-- TODO: bind loading with the real state -->
-        <p-data-loader class="detail-tab-content"
-                       :loading="false"
-                       :loader-backdrop-color="BACKGROUND_COLOR"
-        >
-            <project-tabs :id="props.id"
-                          :item="state.item"
-                          :tabs="singleItemTabState.tabs"
-                          :active-tab.sync="singleItemTabState.activeTab"
-            />
-        </p-data-loader>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.project-detail-page {
-    height: 100%;
-    .detail-tab-content {
-
-        margin-top: 1rem;
-        .page-inner {
-            height: 100%;
-            max-width: 85.5rem;
-        }
-        .help-tap {
-            padding-top: 2rem;
-            padding-right: 1rem;
-            padding-left: 1rem;
-            .plugin-wrapper {
-                @apply flex;
-                gap: 1rem;
-                .plugin-info-wrapper {
-                    flex: 1;
-                    .plugin-info {
-                        @apply flex items-center;
-                        gap: 0.125rem;
-                        .name {
-                            @apply text-label-xl font-bold;
-                        }
-                    }
-                    .desc {
-                        @apply text-label-sm text-gray-600;
-                    }
-                }
-            }
-            .docs-wrapper {
-                margin-top: 1.125rem;
-                .empty {
-                    @apply bg-violet-100;
-                    padding-top: 4.125rem;
-                    padding-bottom: 4.125rem;
-                    border-radius: 0.375rem;
-                }
-            }
-            .markdown {
-                @apply bg-violet-100;
-                padding: 1rem;
-                border-radius: 0.375rem;
-            }
-        }
-    }
-}
-
-/* custom design-system component - p-data-loader */
-:deep(.p-data-loader) {
-    .data-wrapper {
-        overflow-y: unset;
-    }
-    .col-type {
-        display: inline-flex;
-        align-items: center;
-        .name {
-            margin-top: -0.125rem;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index d2d3e137df..3108da0033 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -23,6 +23,7 @@ const isModalLoadReady = ref(false);
 onMounted(() => {
     isModalLoadReady.value = true;
 });
+const ProjectDetailTab = () => import('@/services/project/v2/components/ProjectDetailTab.vue');
 const ProjectGroupMemberManagementModal = () => import('@/services/project/v2/components/ProjectGroupMemberManagementModal.vue');
 const ProjectMemberManagementModal = () => import('@/services/project/v2/components/ProjectMemberManagementModal.vue');
 const ProjectDeleteModal = () => import('@/services/project/v2/components/ProjectDeleteModal.vue');
@@ -34,6 +35,7 @@ const ProjectGroupFormModal = () => import('@/services/project/v2/components/Pro
 
 const props = defineProps<{
     projectGroupOrProjectId?: string;
+    dashboardId?: string;
 }>();
 
 /* project or group */
@@ -102,6 +104,11 @@ onMounted(() => {
                                           :target-type="props.projectGroupOrProjectId ? (projectId ? 'project' : 'projectGroup') : undefined"
             />
         </keep-alive>
+        <project-detail-tab v-if="mounted && props.projectGroupOrProjectId"
+                            class="mt-6"
+                            :project-id="props.projectGroupOrProjectId"
+                            :dashboard-id="props.dashboardId"
+        />
 
         <template v-if="isModalLoadReady">
             <project-group-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'projectGroup'" />
diff --git a/apps/web/src/services/project/v2/routes/route-constant.ts b/apps/web/src/services/project/v2/routes/route-constant.ts
index 60e0a13162..e8d42084bb 100644
--- a/apps/web/src/services/project/v2/routes/route-constant.ts
+++ b/apps/web/src/services/project/v2/routes/route-constant.ts
@@ -2,4 +2,5 @@ import { MENU_ID } from '@/lib/menu/config';
 
 export const PROJECT_ROUTE_V2 = Object.freeze({
     _NAME: MENU_ID.PROJECT,
+    DETAIL: `${MENU_ID.PROJECT}-detail`,
 });
diff --git a/apps/web/src/services/project/v2/routes/routes.ts b/apps/web/src/services/project/v2/routes/routes.ts
index ecef06d3c0..096122f53c 100644
--- a/apps/web/src/services/project/v2/routes/routes.ts
+++ b/apps/web/src/services/project/v2/routes/routes.ts
@@ -9,6 +9,7 @@ const ProjectContainer = () => import('@/services/project/v2/ProjectContainer.vu
 
 const ProjectMainPage = () => import('@/services/project/v2/pages/ProjectMainPage.vue');
 
+
 const projectRoutes: RouteConfig = {
     path: 'project',
     meta: {
@@ -18,7 +19,7 @@ const projectRoutes: RouteConfig = {
     component: ProjectContainer,
     children: [
         {
-            path: ':projectGroupOrProjectId?',
+            path: ':projectGroupOrProjectId?/:dashboardId?',
             name: PROJECT_ROUTE_V2._NAME,
             meta: {
                 menuId: MENU_ID.PROJECT,