Commit @5256a4afe065248c81615ed73ec28d461e91c574

5256a4a

client/views/component/Breadcrumb/Breadcrumb.vue (added)

+++ client/views/component/Breadcrumb/Breadcrumb.vue

...	...	@@ -0,0 +1,46 @@
	1	+<template>
	2	+ <div>
	3	+ <span v-for="(crumb, index) in breadcrumbList" :key="index">
	4	+ {{ crumb.menuNm }}
	5	+ <span v-if="index < breadcrumbList.length - 1"> > </span>
	6	+ </span>
	7	+ </div>
	8	+</template>
	9	+
	10	+<script>
	11	+export default {
	12	+ data() {
	13	+ return {
	14	+ breadcrumbList: [],
	15	+ };
	16	+ },
	17	+ watch: {
	18	+ $route: {
	19	+ immediate: true,
	20	+ handler() {
	21	+ this.generateBreadcrumb();
	22	+ }
	23	+ }
	24	+ },
	25	+ methods: {
	26	+ generateBreadcrumb() {
	27	+ const fullMenuList = this.$store.state.menuList \|\| []; // 전체 메뉴 트리
	28	+ const currentPath = this.$route.path;
	29	+ const findMenuPath = (menus, path, trail = []) => {
	30	+ for (const menu of menus) {
	31	+ const newTrail = [...trail, menu];
	32	+ if (menu.routerUrl === path) return newTrail;
	33	+ if (menu.childList?.length) {
	34	+ const found = findMenuPath(menu.childList, path, newTrail);
	35	+ if (found) return found;
	36	+ }
	37	+ }
	38	+ return null;
	39	+ };
	40	+
	41	+ const breadcrumb = findMenuPath(fullMenuList, currentPath);
	42	+ this.breadcrumbList = breadcrumb \|\| [];
	43	+ }
	44	+ },
	45	+};
	46	+</script>

dacc729

5256a4a

client/views/layout/AdminHeader.vue

--- client/views/layout/AdminHeader.vue

+++ client/views/layout/AdminHeader.vue


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

dacc729

5256a4a

client/views/pages/App.vue

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

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


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

 import UserHeader from "../layout/UserHeader.vue";
 import AdminHeader from "../layout/AdminHeader.vue";
 import AdminMenu from "../layout/AdminMenu.vue";
-
+import Breadcrumb from "../component/Breadcrumb/Breadcrumb.vue";
 const App = {
   data: () => {
     return {

     'UserHeader': UserHeader,
     'AdminHeader': AdminHeader,
     'AdminMenu': AdminMenu,
+    'Breadcrumb' : Breadcrumb,
   },
   mounted() {},
 };

dacc729

5256a4a

client/views/pages/AppStore.js

--- client/views/pages/AppStore.js

+++ client/views/pages/AppStore.js


     },
     setPageAuth(state, newValue) {
       state.pageAuth = newValue;
-    }
+    },
+    setMenuList(state, menuList) {
+      state.menuList = menuList;
+    },
   },
   actions: {
     async logout({ commit }) {

...	...	@@ -52,6 +52,8 @@
52	52	const res = await findBySysMenu(params);
53	53	if(res.status == 200) {
54	54	this.menuList = res.data.data.menuList;
	55	+ // 전체 메뉴 트리 store에 저장
	56	+ this.$store.commit('setMenuList', this.menuList);
55	57	}
56	58	} catch(error) {
57	59	alert('에러가 발생했습니다.\n관리자에게 문의하세요.');

...	...	@@ -3,6 +3,7 @@
3	3	<AdminHeader />
4	4	<AdminMenu />
5	5	<main class="main-wrap">
	6	+ <Breadcrumb />
6	7	<div :class="{'content-wrap': true, 'main': this.$route.path === '/adm/main.page'}">
7	8	<router-view />
8	9	</div>
...	...	@@ -20,7 +21,7 @@
20	21	import UserHeader from "../layout/UserHeader.vue";
21	22	import AdminHeader from "../layout/AdminHeader.vue";
22	23	import AdminMenu from "../layout/AdminMenu.vue";
23		-
	24	+import Breadcrumb from "../component/Breadcrumb/Breadcrumb.vue";
24	25	const App = {
25	26	data: () => {
26	27	return {
...	...	@@ -45,6 +46,7 @@
45	46	'UserHeader': UserHeader,
46	47	'AdminHeader': AdminHeader,
47	48	'AdminMenu': AdminMenu,
	49	+ 'Breadcrumb' : Breadcrumb,
48	50	},
49	51	mounted() {},
50	52	};

...	...	@@ -55,7 +55,10 @@
55	55	},
56	56	setPageAuth(state, newValue) {
57	57	state.pageAuth = newValue;
58		- }
	58	+ },
	59	+ setMenuList(state, menuList) {
	60	+ state.menuList = menuList;
	61	+ },
59	62	},
60	63	actions: {
61	64	async logout({ commit }) {

Delete comment