Commit @7d68d6efe8d2ae3eeb45a82524ce3d55082294ab

이호영 2 days ago

컨텐츠 메뉴 진입 시 서브 메뉴 구현

@7d68d6efe8d2ae3eeb45a82524ce3d55082294ab

8a36567

7d68d6e

src/main/java/kcc/web/MainController.java

--- src/main/java/kcc/web/MainController.java

+++ src/main/java/kcc/web/MainController.java


 import javax.servlet.http.HttpSession;
 
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;

 	@ResponseBody
 	@RequestMapping(value = "/web/com/subMenu.do")
 	public ResponseEntity<RestResponse> webCommonSubMenu(
-			@RequestBody MenuManageJTreeVO menuManageVO ) throws Exception {
-
+			@RequestBody Map<String, Object> paramMap) throws Exception {
+		// 1. 파라미터 추출
+		String depth1MenuNm = (String) paramMap.get("depth1MenuNm");
+		String depth2MenuNm = (String) paramMap.get("depth2MenuNm");
 	
-		System.out.println("?????");
+		// 2. 전체 메뉴 조회 및 1Depth 리스트 생성 (URL 세팅 포함)
+		List<MenuManageJTreeVO> menuResultList = menuCreateManageService.selectMenuListJtree(new MenuManageJTreeVO());
+	
+		List<MenuManageJTreeVO> depth1List = menuResultList.stream()
+				.filter(menu -> "1".equals(menu.getUpperMenuId()))
+				.peek(menu -> menu.setUrl("/web/content.do?proFn=" + menu.getMenuNo())) // 스트림 안에서 URL 세팅
+				.collect(Collectors.toList());
+	
+		// 3. 현재 선택된 1Depth 찾기 (이미 필터링된 depth1List에서 찾음)
+		MenuManageJTreeVO selectedDepth1 = depth1List.stream()
+				.filter(menu -> depth1MenuNm != null && depth1MenuNm.equalsIgnoreCase(menu.getMenuNm()))
+				.findFirst()
+				.orElse(null);
+	
+		// 4. 2Depth 리스트 생성 (selectedDepth1이 있을 때만 진행)
+		List<MenuManageJTreeVO> depth2List = new ArrayList<>();
+		MenuManageJTreeVO selectedDepth2 = null;
+	
+		if (selectedDepth1 != null) {
+			depth2List = menuResultList.stream()
+				.filter(menu -> selectedDepth1.getMenuNo().equals(menu.getUpperMenuId()))
+				.peek(menu -> menu.setUrl("/web/content.do?proFn=" + menu.getMenuNo()))
+				.collect(Collectors.toList());
 		
-		
-		
-		RestResponse restResponse = new RestResponse();
-		
-		
+			// 5. 현재 선택된 2Depth 찾기
+			selectedDepth2 = depth2List.stream()
+				.filter(menu -> depth2MenuNm != null && depth2MenuNm.equalsIgnoreCase(menu.getMenuNm()))
+				.findFirst()
+				.orElse(null);
+		}
+	
+		// 6. 결과 맵 구성 및 반환
+		Map<String, Object> resultMap = new HashMap<>();
+		resultMap.put("depth1List", depth1List);
+		resultMap.put("selectedDepth1", selectedDepth1);
+		resultMap.put("depth2List", depth2List);
+		resultMap.put("selectedDepth2", selectedDepth2);
+	
+		RestResponse restResponse = new RestResponse(HttpStatus.OK, "", resultMap);
 		return ResponseEntity.ok(restResponse);
 
 	}

8a36567

7d68d6e

src/main/webapp/publish/usr/script/submenu.js

--- src/main/webapp/publish/usr/script/submenu.js

+++ src/main/webapp/publish/usr/script/submenu.js


 $(function(){
 	console.log('??!!???');
+	
+	const currentPath = window.location.pathname;
+	console.log(currentPath);
 
-	fn_getSubMenu()
+	if (currentPath !== '/web/main/mainPage.do') {
+		if (currentPath === '/web/content.do') {
+			fn_getSubMenu();
+		}
+	}
 });
 
 function fn_getSubMenu(){
 
-
-	console.log($('#container .sub_title').text());
-	console.log($('#container .sub_title').text());
-	console.log($('#container .sub_title').text());
 	
 	
 	var title = $('#container .sub_title').text();
-	
+	var subTitle = $.trim($('.content_title').text());
+
+	console.log('title ::', title);
+	console.log('subTitle ::', subTitle);
 
 	var sendData = {
-			"upperMenuId" : '111'
+			"depth1MenuNm" :  title
+			, "depth2MenuNm" : subTitle
 		}
 	
 	$.ajax({

 		data: JSON.stringify(sendData),
 		dataType: 'json',
 		success: function(data) {
-			alert("d")
 			console.log(data);
-        },
-	    error: function(err) {
-	        console.error(err);
-	    }
+			if(data.status == 'OK'){
+				renderSubVisualNav(data);	
+			}
+		},
+		error: function(err) {
+			console.error(err);
+		}
 	});
 	
-}
+}
+
+
+// AJAX 성공 시 호출되는 함수 내부
+function renderSubVisualNav(res) {
+    const result = res.data || res; // res.data가 있으면 쓰고, 없으면 res 자체를 사용
+    
+    const depth1List = result.depth1List || []; // 데이터가 없으면 빈 배열로 초기화
+    const depth2List = result.depth2List || [];
+    const selected1 = result.selectedDepth1;
+    const selected2 = result.selectedDepth2;
+
+    let html = '';
+
+    // 1. 기본 홈 아이콘
+    html += '<a href="/"><i class="icon home"></i></a>';
+
+    // 2. 1Depth 메뉴 생성
+    if (depth1List.length > 0) { // 리스트가 있을 때만 실행
+        html += '<div class="snb_wrap">';
+        html += `  <button type="button" class="snb_title">${selected1 ? selected1.text : '메뉴'}</button>`;
+        html += '  <ul class="snb_select">';
+        depth1List.forEach(item => {
+            html += `    <li><a href="${item.url || '#'}">${item.text}</a></li>`;
+        });
+        html += '  </ul>';
+        html += '</div>';
+    }
+
+    // 3. 2Depth 메뉴 생성
+    if (depth2List.length > 0) {
+        html += '<div class="snb_wrap">';
+        html += `  <button type="button" class="snb_title">${selected2 ? selected2.text : '메뉴'}</button>`;
+        html += '  <ul class="snb_select">';
+        depth2List.forEach(item => {
+            html += `    <li><a href="${item.url || '#'}">${item.text}</a></li>`;
+        });
+        html += '  </ul>';
+        html += '</div>';
+    }
+
+    document.querySelector('.sub_visual_nav').innerHTML = html;
+}

Add a comment

Open 0
Closed 0

List

...	...	@@ -36,6 +36,7 @@
36	36	import javax.servlet.http.HttpSession;
37	37
38	38	import org.springframework.beans.factory.annotation.Value;
	39	+import org.springframework.http.HttpStatus;
39	40	import org.springframework.http.ResponseEntity;
40	41	import org.springframework.stereotype.Controller;
41	42	import org.springframework.ui.Model;
...	...	@@ -713,16 +714,50 @@
713	714	@ResponseBody
714	715	@RequestMapping(value = "/web/com/subMenu.do")
715	716	public ResponseEntity<RestResponse> webCommonSubMenu(
716		- @RequestBody MenuManageJTreeVO menuManageVO ) throws Exception {
717		-
	717	+ @RequestBody Map<String, Object> paramMap) throws Exception {
	718	+ // 1. 파라미터 추출
	719	+ String depth1MenuNm = (String) paramMap.get("depth1MenuNm");
	720	+ String depth2MenuNm = (String) paramMap.get("depth2MenuNm");
718	721
719		- System.out.println("?????");
	722	+ // 2. 전체 메뉴 조회 및 1Depth 리스트 생성 (URL 세팅 포함)
	723	+ List<MenuManageJTreeVO> menuResultList = menuCreateManageService.selectMenuListJtree(new MenuManageJTreeVO());
	724	+
	725	+ List<MenuManageJTreeVO> depth1List = menuResultList.stream()
	726	+ .filter(menu -> "1".equals(menu.getUpperMenuId()))
	727	+ .peek(menu -> menu.setUrl("/web/content.do?proFn=" + menu.getMenuNo())) // 스트림 안에서 URL 세팅
	728	+ .collect(Collectors.toList());
	729	+
	730	+ // 3. 현재 선택된 1Depth 찾기 (이미 필터링된 depth1List에서 찾음)
	731	+ MenuManageJTreeVO selectedDepth1 = depth1List.stream()
	732	+ .filter(menu -> depth1MenuNm != null && depth1MenuNm.equalsIgnoreCase(menu.getMenuNm()))
	733	+ .findFirst()
	734	+ .orElse(null);
	735	+
	736	+ // 4. 2Depth 리스트 생성 (selectedDepth1이 있을 때만 진행)
	737	+ List<MenuManageJTreeVO> depth2List = new ArrayList<>();
	738	+ MenuManageJTreeVO selectedDepth2 = null;
	739	+
	740	+ if (selectedDepth1 != null) {
	741	+ depth2List = menuResultList.stream()
	742	+ .filter(menu -> selectedDepth1.getMenuNo().equals(menu.getUpperMenuId()))
	743	+ .peek(menu -> menu.setUrl("/web/content.do?proFn=" + menu.getMenuNo()))
	744	+ .collect(Collectors.toList());
720	745
721		-
722		-
723		- RestResponse restResponse = new RestResponse();
724		-
725		-
	746	+ // 5. 현재 선택된 2Depth 찾기
	747	+ selectedDepth2 = depth2List.stream()
	748	+ .filter(menu -> depth2MenuNm != null && depth2MenuNm.equalsIgnoreCase(menu.getMenuNm()))
	749	+ .findFirst()
	750	+ .orElse(null);
	751	+ }
	752	+
	753	+ // 6. 결과 맵 구성 및 반환
	754	+ Map<String, Object> resultMap = new HashMap<>();
	755	+ resultMap.put("depth1List", depth1List);
	756	+ resultMap.put("selectedDepth1", selectedDepth1);
	757	+ resultMap.put("depth2List", depth2List);
	758	+ resultMap.put("selectedDepth2", selectedDepth2);
	759	+
	760	+ RestResponse restResponse = new RestResponse(HttpStatus.OK, "", resultMap);
726	761	return ResponseEntity.ok(restResponse);
727	762
728	763	}

...	...	@@ -1,22 +1,29 @@
1	1	$(function(){
2	2	console.log('??!!???');
	3	+
	4	+ const currentPath = window.location.pathname;
	5	+ console.log(currentPath);
3	6
4		- fn_getSubMenu()
	7	+ if (currentPath !== '/web/main/mainPage.do') {
	8	+ if (currentPath === '/web/content.do') {
	9	+ fn_getSubMenu();
	10	+ }
	11	+ }
5	12	});
6	13
7	14	function fn_getSubMenu(){
8	15
9		-
10		- console.log($('#container .sub_title').text());
11		- console.log($('#container .sub_title').text());
12		- console.log($('#container .sub_title').text());
13	16
14	17
15	18	var title = $('#container .sub_title').text();
16		-
	19	+ var subTitle = $.trim($('.content_title').text());
	20	+
	21	+ console.log('title ::', title);
	22	+ console.log('subTitle ::', subTitle);
17	23
18	24	var sendData = {
19		- "upperMenuId" : '111'
	25	+ "depth1MenuNm" : title
	26	+ , "depth2MenuNm" : subTitle
20	27	}
21	28
22	29	$.ajax({
...	...	@@ -26,12 +33,56 @@
26	33	data: JSON.stringify(sendData),
27	34	dataType: 'json',
28	35	success: function(data) {
29		- alert("d")
30	36	console.log(data);
31		- },
32		- error: function(err) {
33		- console.error(err);
34		- }
	37	+ if(data.status == 'OK'){
	38	+ renderSubVisualNav(data);
	39	+ }
	40	+ },
	41	+ error: function(err) {
	42	+ console.error(err);
	43	+ }
35	44	});
36	45
37		-} (No newline at end of file)
	46	+}
	47	+
	48	+
	49	+// AJAX 성공 시 호출되는 함수 내부
	50	+function renderSubVisualNav(res) {
	51	+ const result = res.data \|\| res; // res.data가 있으면 쓰고, 없으면 res 자체를 사용
	52	+
	53	+ const depth1List = result.depth1List \|\| []; // 데이터가 없으면 빈 배열로 초기화
	54	+ const depth2List = result.depth2List \|\| [];
	55	+ const selected1 = result.selectedDepth1;
	56	+ const selected2 = result.selectedDepth2;
	57	+
	58	+ let html = '';
	59	+
	60	+ // 1. 기본 홈 아이콘
	61	+ html += '<a href="/"><i class="icon home"></i></a>';
	62	+
	63	+ // 2. 1Depth 메뉴 생성
	64	+ if (depth1List.length > 0) { // 리스트가 있을 때만 실행
	65	+ html += '<div class="snb_wrap">';
	66	+ html += ` <button type="button" class="snb_title">${selected1 ? selected1.text : '메뉴'}</button>`;
	67	+ html += ' <ul class="snb_select">';
	68	+ depth1List.forEach(item => {
	69	+ html += ` <li><a href="${item.url \|\| '#'}">${item.text}</a></li>`;
	70	+ });
	71	+ html += ' </ul>';
	72	+ html += '</div>';
	73	+ }
	74	+
	75	+ // 3. 2Depth 메뉴 생성
	76	+ if (depth2List.length > 0) {
	77	+ html += '<div class="snb_wrap">';
	78	+ html += ` <button type="button" class="snb_title">${selected2 ? selected2.text : '메뉴'}</button>`;
	79	+ html += ' <ul class="snb_select">';
	80	+ depth2List.forEach(item => {
	81	+ html += ` <li><a href="${item.url \|\| '#'}">${item.text}</a></li>`;
	82	+ });
	83	+ html += ' </ul>';
	84	+ html += '</div>';
	85	+ }
	86	+
	87	+ document.querySelector('.sub_visual_nav').innerHTML = html;
	88	+}

Delete comment