Commit @2f392cae3579cb3a1416665873c5b2166af0bdbe

hmkim 03-28

250328 김혜민 관리자및사용자 페이지 breadcrumb 공통 수정

@2f392cae3579cb3a1416665873c5b2166af0bdbe

1180333

2f392ca

client/views/layout/UserMenu.vue

--- client/views/layout/UserMenu.vue

+++ client/views/layout/UserMenu.vue


         const res = await findBySysMenu(params);
         if (res.status == 200) {
           this.menuList = res.data.data.menuList;
-          this.fnMenuActive(this.$route.path);
+          // 전체 메뉴 트리 store에 저장
           this.$store.commit('setMenuList', this.menuList);
+          console.log('this.menuList', this.menuList);
+          this.fnMenuActive(this.$route.path);
         }
       } catch (error) {
         alert("에러가 발생했습니다.\n관리자에게 문의하세요");

1180333

2f392ca

client/views/pages/App.vue

--- client/views/pages/App.vue

+++ client/views/pages/App.vue


     <AdminHeader />
     <AdminMenu />
     <main class="main-wrap">
-      <Breadcrumb />
+      <Breadcrumb v-if="$route.path !== '/adm/main.page' && $route.path !== '/main.page'" />
         <div :class="{'content-wrap': true, 'main': this.$route.path === '/adm/main.page'}">
           <router-view />
         </div>

   </div>
   <div v-else v-cloak class="user-wrap relative">
     <UserHeader v-if="path != '/login.page'"/>
-    <Breadcrumb />
     <main class="main-wrap">
+      <Breadcrumb v-if="$route.path !== '/adm/main.page' && $route.path !== '/main.page'" />
       <router-view />
     </main>
   </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,5 +1,5 @@
1	1	<template>
2		- <div>
	2	+ <div v-if="breadcrumbList.length > 0">
3	3	<span v-for="(crumb, index) in breadcrumbList" :key="index">
4	4	{{ crumb.menuNm }}
5	5	<span v-if="index < breadcrumbList.length - 1"> > </span>
...	...	@@ -24,23 +24,56 @@
24	24	},
25	25	methods: {
26	26	generateBreadcrumb() {
27		- const fullMenuList = this.$store.state.menuList \|\| []; // 전체 메뉴 트리
	27	+ const menuState = this.$store.state;
28	28	const currentPath = this.$route.path;
29		- const findMenuPath = (menus, path, trail = []) => {
	29	+
	30	+ // 관리자: childList 기반
	31	+ const findFromTree = (menus, path, trail = []) => {
30	32	for (const menu of menus) {
31	33	const newTrail = [...trail, menu];
32	34	if (menu.routerUrl === path) return newTrail;
33	35	if (menu.childList?.length) {
34		- const found = findMenuPath(menu.childList, path, newTrail);
	36	+ const found = findFromTree(menu.childList, path, newTrail);
35	37	if (found) return found;
36	38	}
37	39	}
38		- return null;
	40	+ return null;
39	41	};
40	42
41		- const breadcrumb = findMenuPath(fullMenuList, currentPath);
42		- this.breadcrumbList = breadcrumb \|\| [];
	43	+ // 사용자: upMenuId 기반
	44	+ const findFromFlat = (flatMenus, path) => {
	45	+ const findCurrent = flatMenus.find(menu => menu.routerUrl === path);
	46	+ if (!findCurrent) return [];
	47	+
	48	+ const buildTrail = (menu, trail = []) => {
	49	+ const parent = flatMenus.find(m => m.menuId === menu.upMenuId);
	50	+ if (parent) {
	51	+ return buildTrail(parent, [parent, ...trail]);
	52	+ }
	53	+ return trail;
	54	+ };
	55	+
	56	+ const trail = buildTrail(findCurrent);
	57	+ return [...trail, findCurrent];
	58	+ };
	59	+
	60	+ let breadcrumb = [];
	61	+
	62	+ // 구조 판단
	63	+ if (menuState.menuList?.length) {
	64	+ // 사용자용
	65	+ const flatMenus = menuState.menuList.flatMap(menu =>
	66	+ [menu, ...(menu.childList \|\| [])]
	67	+ );
	68	+ breadcrumb = findFromFlat(flatMenus, currentPath);
	69	+ } else if (menuState.menu?.childList?.length) {
	70	+ // 관리자용
	71	+ breadcrumb = findFromTree(menuState.menu.childList, currentPath);
	72	+ }
	73	+
	74	+ this.breadcrumbList = breadcrumb;
43	75	}
	76	+
44	77	},
45	78	};
46		-</script>
	79	+</script> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -152,8 +152,10 @@
152	152	const res = await findBySysMenu(params);
153	153	if (res.status == 200) {
154	154	this.menuList = res.data.data.menuList;
155		- this.fnMenuActive(this.$route.path);
	155	+ // 전체 메뉴 트리 store에 저장
156	156	this.$store.commit('setMenuList', this.menuList);
	157	+ console.log('this.menuList', this.menuList);
	158	+ this.fnMenuActive(this.$route.path);
157	159	}
158	160	} catch (error) {
159	161	alert("에러가 발생했습니다.\n관리자에게 문의하세요");

...	...	@@ -3,7 +3,7 @@
3	3	<AdminHeader />
4	4	<AdminMenu />
5	5	<main class="main-wrap">
6		- <Breadcrumb />
	6	+ <Breadcrumb v-if="$route.path !== '/adm/main.page' && $route.path !== '/main.page'" />
7	7	<div :class="{'content-wrap': true, 'main': this.$route.path === '/adm/main.page'}">
8	8	<router-view />
9	9	</div>
...	...	@@ -11,8 +11,8 @@
11	11	</div>
12	12	<div v-else v-cloak class="user-wrap relative">
13	13	<UserHeader v-if="path != '/login.page'"/>
14		- <Breadcrumb />
15	14	<main class="main-wrap">
	15	+ <Breadcrumb v-if="$route.path !== '/adm/main.page' && $route.path !== '/main.page'" />
16	16	<router-view />
17	17	</main>
18	18	</div>

Delete comment