Commit @81f87b53f5f61fb159fc4235604399d035a35354

aeb0e47

81f87b5

client/resources/css/user/layout.css

--- client/resources/css/user/layout.css

+++ client/resources/css/user/layout.css


             position: relative;
             padding: 20px 0;
         }
-        &>ul>li:hover, &>ul>li:hover>a, .active-menu{
+        &>ul>li:hover,
+        &>ul>li:hover>p,
+        &>ul>li:hover>a,
+        .active-menu {
             cursor: pointer;
             color: #c23d4a;
-        } 
+        }
     }
 
     .submenu {

             }
         }
 
-        p:hover {
+        p:hover,
+        .now-menu {
             background-color: #f9ebed;
         }
     }

aeb0e47

81f87b5

client/resources/css/user/main.css

--- client/resources/css/user/main.css

+++ client/resources/css/user/main.css


             }
         }
 
-        p:hover a {
+        p:hover a,
+        .point-menu {
             color: #c23d4a;
             font-family: "Pretendard-B";
 

aeb0e47

81f87b5

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


         <div class="nav-wrap">
           <nav>
             <ul v-if="$store.state.roles.length > 0">
-              <li @click="updateMenuStats('MENU_00000001')" @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')" :class="{ 'active-menu': isActiveMenu('MENU_00000001') }"> 기록물 <div class="submenu" v-if="submenuVisible['MENU_00000001']" @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
-                  <p>• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 사진 기록물 </router-link>
+              <li @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
+                <p :class="{ 'active-menu': this.$route.path === '/PicHistorySearch.page' || this.$route.path === '/VideoHistorySearch.page' }">기록물</p>
+                <div class="submenu" v-if="submenuVisible['MENU_00000001']" @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
+                  <p :class="{ 'now-menu': this.$route.path === '/PicHistorySearch.page' }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 사진 기록물 </router-link>
                   </p>
                   <div class="hr"></div>
-                  <p>• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 영상 기록물 </router-link>
+                  <p :class="{ 'now-menu': this.$route.path === '/VideoHistorySearch.page' }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 영상 기록물 </router-link>
                   </p>
                 </div>
               </li>
-              <li @click="updateMenuStats('MENU_00000004')" @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')" :class="{ 'active-menu': isActiveMenu('MENU_00000004') }"> 언론에서 바라본 구미시 <div class="submenu" v-if="submenuVisible['MENU_00000004']" @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
-                  <p>• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 미디어 영상 </router-link>
+              <li @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
+                <p :class="{ 'active-menu': this.$route.path === '/MediaVideoSearch.page' || this.$route.path === '/NewsReleaseSearch.page' }">언론에서 바라본 구미시</p>
+                <div class="submenu" v-if="submenuVisible['MENU_00000004']" @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
+                  <p :class="{ 'now-menu': this.$route.path === '/MediaVideoSearch.page' }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 미디어 영상 </router-link>
                   </p>
                   <div class="hr"></div>
-                  <p>• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 보도자료 </router-link>
+                  <p :class="{ 'now-menu': this.$route.path === '/NewsReleaseSearch.page' }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 보도자료 </router-link>
                   </p>
                 </div>
               </li>
-              <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"><router-link :to="{ path: '/MemberManagement.page' }" @click="onMemberManagementClick" exact-active-class="active-menu">회원관리</router-link></li>
-              <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"><router-link :to="{ path: '/CategoryManagement.page' }" @click="onCategoryManagementClick" exact-active-class="active-menu">카테고리 관리</router-link></li>
+              <template v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">
+                <li><router-link :to="{ path: '/MemberManagement.page' }" :class="{ 'active-menu': this.$route.path === '/MemberManagement.page' }">회원관리</router-link></li>
+                <li><router-link :to="{ path: '/CategoryManagement.page' }" :class="{ 'active-menu': this.$route.path === '/CategoryManagement.page' }">카테고리 관리</router-link></li>
+              </template>
             </ul>
           </nav>
         </div>
         <div class="auth-area">
           <ul>
-            <li><img src="../../resources/images/icon/user-settings-line.png" alt="">
+            <li>
+              <img src="../../resources/images/icon/user-settings-line.png" alt="">
               <router-link :to="{ path: '/MyInfo.page' }">{{ $store.state.userNm }}</router-link>
             </li>
             <li>
               <div class="line"></div>
             </li>
-            <li><img src="../../resources/images/icon/logout-box-line.png" alt="">
+            <li>
+              <img src="../../resources/images/icon/logout-box-line.png" alt="">
               <a href="#" @click.prevent="logout">로그아웃</a>
             </li>
           </ul>

         <div class="nav-wrap">
           <nav>
             <ul>
-              <li @click="updateMenuStats('MENU_00000001')">
+              <li>
                 <h6>기록물</h6>
                 <div class="submenu">
-                  <p>• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="closeMenu">사진 기록물</router-link></p>
+                  <p :class="{ 'point-menu': this.$route.path === '/PicHistorySearch.page' }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="closeMenu">사진 기록물</router-link></p>
                   <div class="hr pink"></div>
-                  <p>• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="closeMenu">영상 기록물</router-link></p>
+                  <p :class="{ 'point-menu': this.$route.path === '/VideoHistorySearch.page' }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="closeMenu">영상 기록물</router-link></p>
                 </div>
               </li>
-              <li @click="updateMenuStats('MENU_00000004')">
+              <li>
                 <h6>언론에서 바라본 구미시</h6>
                 <div class="submenu">
-                  <p>• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="closeMenu">미디어 영상</router-link></p>
+                  <p :class="{ 'point-menu': this.$route.path === '/MediaVideoSearch.page' }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="closeMenu">미디어 영상</router-link></p>
                   <div class="hr pink"></div>
-                  <p>• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="closeMenu">보도자료</router-link></p>
+                  <p :class="{ 'point-menu': this.$route.path === '/NewsReleaseSearch.page' }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="closeMenu">보도자료</router-link></p>
                 </div>
               </li>
-              <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">
-                <h6>회원관리</h6>
-                <div class="submenu">
-                  <p>• <router-link :to="{ path: '/MemberManagement.page' }" @click="closeMenu">회원관리</router-link></p>
-                </div>
-              </li>
-              <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">
-                <h6>카테고리 관리</h6>
-                <div class="submenu">
-                  <p>• <router-link :to="{ path: '/CategoryManagement.page' }" @click="closeMenu">카테고리 관리</router-link>
-                  </p>
-                </div>
-              </li>
+              <template v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">
+                <li>
+                  <h6>회원관리</h6>
+                  <div class="submenu">
+                    <p :class="{ 'point-menu': this.$route.path === '/MemberManagement.page' }">• <router-link :to="{ path: '/MemberManagement.page' }" @click="closeMenu">회원관리</router-link></p>
+                  </div>
+                </li>
+                <li>
+                  <h6>카테고리 관리</h6>
+                  <div class="submenu">
+                    <p :class="{ 'point-menu': this.$route.path === '/CategoryManagement.page' }">• <router-link :to="{ path: '/CategoryManagement.page' }" @click="closeMenu">카테고리 관리</router-link>
+                    </p>
+                  </div>
+                </li>
+              </template>
             </ul>
           </nav>
         </div>

 import { reactive } from 'vue';
 import { logOutProc } from "../../resources/api/user"
 import { updateStatsByMenuId } from "../../resources/api/main"
+
 export default {
   data() {
     return {

       isMenuOpen: false,
       // Define the image sources
       logo: 'client/resources/images/logo.png',
-      activeMenu: null,
     };
   },
+
   methods: {
     toggleMenu() {
       this.isMenuOpen = !this.isMenuOpen;
     },
+
     // 메뉴 닫기
     closeMenu() {
       this.isMenuOpen = false;
     },
+
     showSubmenu(menuId) {
       this.submenuVisible[menuId] = true;  // Directly mutate the reactive object
     },

     hideSubmenu(menuId) {
       this.submenuVisible[menuId] = false;  // Directly mutate the reactive object
     },
-    setActiveMenu(menuId) {
-      this.activeMenu = menuId;
-    },
-    onMemberManagementClick() {
-      this.activeMenu = null; // Clear active menu
-    },
 
-    // Handle click on "카테고리 관리" and reset the active menu state
-    onCategoryManagementClick() {
-      this.activeMenu = null; // Clear active menu
-    },
-    // Check if the menu item is active
-    isActiveMenu(menuId) {
-      return this.activeMenu === menuId;
-    },
     async updateMenuStats(menuId) {
       try {
         this.activeMenu = menuId;

         console.error(`메뉴 ID ${menuId} 통계 업데이트 중 오류:`, error);
       }
     },
+
     logout() {
       // 백엔드 로그아웃 API 호출
       logOutProc()

           this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
         });
     },
-
   },
   watch: {},
   computed: {},

...	...	@@ -39,10 +39,13 @@
39	39	position: relative;
40	40	padding: 20px 0;
41	41	}
42		- &>ul>li:hover, &>ul>li:hover>a, .active-menu{
	42	+ &>ul>li:hover,
	43	+ &>ul>li:hover>p,
	44	+ &>ul>li:hover>a,
	45	+ .active-menu {
43	46	cursor: pointer;
44	47	color: #c23d4a;
45		- }
	48	+ }
46	49	}
47	50
48	51	.submenu {
...	...	@@ -70,7 +73,8 @@
70	73	}
71	74	}
72	75
73		- p:hover {
	76	+ p:hover,
	77	+ .now-menu {
74	78	background-color: #f9ebed;
75	79	}
76	80	}

...	...	@@ -83,7 +83,8 @@
83	83	}
84	84	}
85	85
86		- p:hover a {
	86	+ p:hover a,
	87	+ .point-menu {
87	88	color: #c23d4a;
88	89	font-family: "Pretendard-B";
89	90

...	...	@@ -8,36 +8,44 @@
8	8	<div class="nav-wrap">
9	9	<nav>
10	10	<ul v-if="$store.state.roles.length > 0">
11		- <li @click="updateMenuStats('MENU_00000001')" @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')" :class="{ 'active-menu': isActiveMenu('MENU_00000001') }"> 기록물 <div class="submenu" v-if="submenuVisible['MENU_00000001']" @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
12		- <p>• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 사진 기록물 </router-link>
	11	+ <li @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
	12	+ <p :class="{ 'active-menu': this.$route.path === '/PicHistorySearch.page' \|\| this.$route.path === '/VideoHistorySearch.page' }">기록물</p>
	13	+ <div class="submenu" v-if="submenuVisible['MENU_00000001']" @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
	14	+ <p :class="{ 'now-menu': this.$route.path === '/PicHistorySearch.page' }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 사진 기록물 </router-link>
13	15	</p>
14	16	<div class="hr"></div>
15		- <p>• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 영상 기록물 </router-link>
	17	+ <p :class="{ 'now-menu': this.$route.path === '/VideoHistorySearch.page' }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 영상 기록물 </router-link>
16	18	</p>
17	19	</div>
18	20	</li>
19		- <li @click="updateMenuStats('MENU_00000004')" @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')" :class="{ 'active-menu': isActiveMenu('MENU_00000004') }"> 언론에서 바라본 구미시 <div class="submenu" v-if="submenuVisible['MENU_00000004']" @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
20		- <p>• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 미디어 영상 </router-link>
	21	+ <li @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
	22	+ <p :class="{ 'active-menu': this.$route.path === '/MediaVideoSearch.page' \|\| this.$route.path === '/NewsReleaseSearch.page' }">언론에서 바라본 구미시</p>
	23	+ <div class="submenu" v-if="submenuVisible['MENU_00000004']" @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
	24	+ <p :class="{ 'now-menu': this.$route.path === '/MediaVideoSearch.page' }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 미디어 영상 </router-link>
21	25	</p>
22	26	<div class="hr"></div>
23		- <p>• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 보도자료 </router-link>
	27	+ <p :class="{ 'now-menu': this.$route.path === '/NewsReleaseSearch.page' }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 보도자료 </router-link>
24	28	</p>
25	29	</div>
26	30	</li>
27		- <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"><router-link :to="{ path: '/MemberManagement.page' }" @click="onMemberManagementClick" exact-active-class="active-menu">회원관리</router-link></li>
28		- <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"><router-link :to="{ path: '/CategoryManagement.page' }" @click="onCategoryManagementClick" exact-active-class="active-menu">카테고리 관리</router-link></li>
	31	+ <template v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">
	32	+ <li><router-link :to="{ path: '/MemberManagement.page' }" :class="{ 'active-menu': this.$route.path === '/MemberManagement.page' }">회원관리</router-link></li>
	33	+ <li><router-link :to="{ path: '/CategoryManagement.page' }" :class="{ 'active-menu': this.$route.path === '/CategoryManagement.page' }">카테고리 관리</router-link></li>
	34	+ </template>
29	35	</ul>
30	36	</nav>
31	37	</div>
32	38	<div class="auth-area">
33	39	<ul>
34		- <li><img src="../../resources/images/icon/user-settings-line.png" alt="">
	40	+ <li>
	41	+ <img src="../../resources/images/icon/user-settings-line.png" alt="">
35	42	<router-link :to="{ path: '/MyInfo.page' }">{{ $store.state.userNm }}</router-link>
36	43	</li>
37	44	<li>
38	45	<div class="line"></div>
39	46	</li>
40		- <li><img src="../../resources/images/icon/logout-box-line.png" alt="">
	47	+ <li>
	48	+ <img src="../../resources/images/icon/logout-box-line.png" alt="">
41	49	<a href="#" @click.prevent="logout">로그아웃</a>
42	50	</li>
43	51	</ul>
...	...	@@ -51,35 +59,37 @@
51	59	<div class="nav-wrap">
52	60	<nav>
53	61	<ul>
54		- <li @click="updateMenuStats('MENU_00000001')">
	62	+ <li>
55	63	<h6>기록물</h6>
56	64	<div class="submenu">
57		- <p>• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="closeMenu">사진 기록물</router-link></p>
	65	+ <p :class="{ 'point-menu': this.$route.path === '/PicHistorySearch.page' }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="closeMenu">사진 기록물</router-link></p>
58	66	<div class="hr pink"></div>
59		- <p>• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="closeMenu">영상 기록물</router-link></p>
	67	+ <p :class="{ 'point-menu': this.$route.path === '/VideoHistorySearch.page' }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="closeMenu">영상 기록물</router-link></p>
60	68	</div>
61	69	</li>
62		- <li @click="updateMenuStats('MENU_00000004')">
	70	+ <li>
63	71	<h6>언론에서 바라본 구미시</h6>
64	72	<div class="submenu">
65		- <p>• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="closeMenu">미디어 영상</router-link></p>
	73	+ <p :class="{ 'point-menu': this.$route.path === '/MediaVideoSearch.page' }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="closeMenu">미디어 영상</router-link></p>
66	74	<div class="hr pink"></div>
67		- <p>• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="closeMenu">보도자료</router-link></p>
	75	+ <p :class="{ 'point-menu': this.$route.path === '/NewsReleaseSearch.page' }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="closeMenu">보도자료</router-link></p>
68	76	</div>
69	77	</li>
70		- <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">
71		- <h6>회원관리</h6>
72		- <div class="submenu">
73		- <p>• <router-link :to="{ path: '/MemberManagement.page' }" @click="closeMenu">회원관리</router-link></p>
74		- </div>
75		- </li>
76		- <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">
77		- <h6>카테고리 관리</h6>
78		- <div class="submenu">
79		- <p>• <router-link :to="{ path: '/CategoryManagement.page' }" @click="closeMenu">카테고리 관리</router-link>
80		- </p>
81		- </div>
82		- </li>
	78	+ <template v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">
	79	+ <li>
	80	+ <h6>회원관리</h6>
	81	+ <div class="submenu">
	82	+ <p :class="{ 'point-menu': this.$route.path === '/MemberManagement.page' }">• <router-link :to="{ path: '/MemberManagement.page' }" @click="closeMenu">회원관리</router-link></p>
	83	+ </div>
	84	+ </li>
	85	+ <li>
	86	+ <h6>카테고리 관리</h6>
	87	+ <div class="submenu">
	88	+ <p :class="{ 'point-menu': this.$route.path === '/CategoryManagement.page' }">• <router-link :to="{ path: '/CategoryManagement.page' }" @click="closeMenu">카테고리 관리</router-link>
	89	+ </p>
	90	+ </div>
	91	+ </li>
	92	+ </template>
83	93	</ul>
84	94	</nav>
85	95	</div>
...	...	@@ -91,6 +101,7 @@
91	101	import { reactive } from 'vue';
92	102	import { logOutProc } from "../../resources/api/user"
93	103	import { updateStatsByMenuId } from "../../resources/api/main"
	104	+
94	105	export default {
95	106	data() {
96	107	return {
...	...	@@ -98,17 +109,19 @@
98	109	isMenuOpen: false,
99	110	// Define the image sources
100	111	logo: 'client/resources/images/logo.png',
101		- activeMenu: null,
102	112	};
103	113	},
	114	+
104	115	methods: {
105	116	toggleMenu() {
106	117	this.isMenuOpen = !this.isMenuOpen;
107	118	},
	119	+
108	120	// 메뉴 닫기
109	121	closeMenu() {
110	122	this.isMenuOpen = false;
111	123	},
	124	+
112	125	showSubmenu(menuId) {
113	126	this.submenuVisible[menuId] = true; // Directly mutate the reactive object
114	127	},
...	...	@@ -117,21 +130,7 @@
117	130	hideSubmenu(menuId) {
118	131	this.submenuVisible[menuId] = false; // Directly mutate the reactive object
119	132	},
120		- setActiveMenu(menuId) {
121		- this.activeMenu = menuId;
122		- },
123		- onMemberManagementClick() {
124		- this.activeMenu = null; // Clear active menu
125		- },
126	133
127		- // Handle click on "카테고리 관리" and reset the active menu state
128		- onCategoryManagementClick() {
129		- this.activeMenu = null; // Clear active menu
130		- },
131		- // Check if the menu item is active
132		- isActiveMenu(menuId) {
133		- return this.activeMenu === menuId;
134		- },
135	134	async updateMenuStats(menuId) {
136	135	try {
137	136	this.activeMenu = menuId;
...	...	@@ -140,6 +139,7 @@
140	139	console.error(`메뉴 ID ${menuId} 통계 업데이트 중 오류:`, error);
141	140	}
142	141	},
	142	+
143	143	logout() {
144	144	// 백엔드 로그아웃 API 호출
145	145	logOutProc()
...	...	@@ -153,7 +153,6 @@
153	153	this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
154	154	});
155	155	},
156		-
157	156	},
158	157	watch: {},
159	158	computed: {},

Delete comment