refactor : 메뉴를 설정에 따라 동적으로 렌더링할 수 있도록 수정

src/main/webapp/WEB-INF/jsp/framework/layouts/tiles/biz/header.jsp

@@ -3,7 +3,6 @@
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 <%@ taglib prefix="sec"     uri="http://www.springframework.org/security/tags"%>
 <%String uri = request.getRequestURI();%>
-
 <header>
 
 	<hgroup>
@@ -58,62 +57,22 @@
                    </dl>
                 </div>
             </div>
-            <nav>
+
-                <ul class="lnb" id="lnb">
+            <nav id="menuNav">
-                	<c:forEach items="${allMenuList}" var="dep_1" varStatus="status1">
+
-                		<c:if test="${dep_1.menuDepth eq '1' }">
-		                    <li>
-		                        <span><a href="${dep_1.menuUrl}">${dep_1.menuName}</a></span>	<!-- depth1 출력 -->
-		                        <c:if test="${dep_1.childCnt > 0 }">	<!-- 자식 메뉴가 있으면.. -->
-			                        <button type="button" class="toggle">하위메뉴 열기</button>
-	                        		<ul class="dep2">
-			                        <c:forEach items="${allMenuList}" var="dep_2" varStatus="status2">
-			                        	<c:if test="${dep_2.menuDepth eq '2' and dep_1.menuSid eq dep_2.parentSid}">
-				                            <li>
-<%--		                        				<span><a href="${dep_2.menuUrl}">${dep_2.menuName}</a></span><!-- depth2 출력 -->--%>
-		                        				<span><a onclick="openMenu('${dep_2.menuSid}', '${dep_2.menuName}', '${dep_2.menuUrl}')" href="#">${dep_2.menuName}</a></span><!-- depth2 출력 -->
-		                        				<c:if test="${dep_2.childCnt > 0 }">	<!-- 자식 메뉴가 있으면.. -->
-					                                <button type="button" class="toggle">하위메뉴 열기</button>
-					                                <ul class="dep3">
-				                                	<c:forEach items="${allMenuList}" var="dep_3" varStatus="status3">
-					                                	<c:if test="${dep_3.menuDepth eq '3' and dep_2.menuSid eq dep_3.parentSid}">
-					                                		<li <c:if test="${dep_3.menuUrl eq urlInfoMap.menuUrl}"> class="sel active"</c:if>>
-<%--					                                			<span><a href="${ctx }${dep_3.menuUrl}">3 ${dep_3.menuName}</a></span><!-- depth3 출력 -->--%>
-					                                			<span><a onclick="openMenu('${dep_3.menuSid}', '${dep_3.menuName}', '${dep_3.menuUrl}')" href="#">${dep_3.menuName}</a></span><!-- depth3 출력 -->
-		                        								<c:if test="${dep_3.childCnt > 0 }">	<!-- 자식 메뉴가 있으면.. -->
-					                                				<button type="button" class="toggle">하위메뉴 열기</button>
-					                                				<ul class="dep4">
-								                                	<c:forEach items="${allMenuList}" var="dep_4" varStatus="status4">
-								                                		<c:if test="${dep_4.menuDepth eq '4' and dep_3.menuSid eq dep_4.parentSid}">
-						                                					<li <c:if test="${dep_4.menuUrl eq urlInfoMap.menuUrl}"> class="sel active"</c:if>>
-<%--						                                						<span><a href="${ctx }${dep_4.menuUrl}">4 ${dep_4.menuName}</a></span><!-- depth4 출력 -->--%>
-																				<span><a onclick="openMenu('${dep_4.menuSid}', '${dep_4.menuName}', '${dep_4.menuUrl}')" href="#">${dep_4.menuName}</a></span><!-- depth3 출력 -->
-						                                					</li>
-								                                		</c:if>
-								                                	</c:forEach>
-					                                				</ul>
-		                        								</c:if>
-					                                		</li>
-					                                	</c:if>
-				                                	</c:forEach>
-					                                </ul>
-		                        				</c:if>
-				                            </li>
-			                        	</c:if>
-			                        </c:forEach>
-			                        </ul>
-		                        </c:if>
-		                    </li>
-                		</c:if>
-                	</c:forEach>
-                </ul>
             </nav>
+
+			<div id="sneatMenu">
+
+			</div>
+
         </div>
     </hgroup>
 </header>
 
 <script defer type="text/javascript">
 
+
 	/* 사용자 수정 화면*/
 	function fn_goMyView() {
 		/* ====================
@@ -153,6 +112,217 @@
 			}
 		});
 		popup = CmmPopup.open(popUrl, params, popOption, target);
+
+
 	}
+
+
+    /* ====================
+	 * 2023.03.22 이범준
+	 * 동적 메뉴 렌더링 함수
+	====================*/
+	function MenuRender() {
+		let _self = this;
+		_self.template = null;
+
+		_self.rootUlAttrDraw = null;
+		_self.ulAttrDraw = null;
+		_self.liAttrDraw = null;
+		_self.liContentDraw = null;
+
+        //메뉴 렌더링 설정 초기화
+		this.init = function(){
+
+			switch(_self.template){
+				case "sneat" :
+					_self.rootUlAttrDraw = function(element){
+						element.className = "menu-inner";
+					};
+					_self.ulAttrDraw = function(element, menuObj){
+						element.className = "menu-sub";
+					};
+					_self.liAttrDraw = function(element, menuObj){
+						element.className = "menu-item";
+					};
+					_self.liContentDraw = function(element, menuObj){
+
+						let a = document.createElement("a");
+						a.href = "javascript:void(0)";
+						a.classList.add("menu-link");
+						if(menuObj.childCnt > 0){ //하위메뉴가 있으면
+							a.classList.add("menu-toggle");
+						} else {
+							a.setAttribute("onclick", "openMenu('"+menuObj.menuSid+"', '"+menuObj.menuName+"', '"+menuObj.menuUrl+"')");
+						}
+
+						//if(){
+							//a.appendChiled(i) // 아이콘
+						//}
+
+						let div = document.createElement("div");
+						let text = document.createTextNode(menuObj.menuName);
+						div.appendChild(text);
+						a.appendChild(div);
+						element.appendChild(a);
+					};
+					break;
+				default :
+					_self.rootUlAttrDraw = function(element){
+						element.className = "lnb";
+						element.id = "lnb";
+					};
+					_self.ulAttrDraw = function(element, menuObj){
+						if(menuObj.menuDepth == 1){
+							element.className = "dep2";
+						} else if(menuObj.menuDepth == 2){
+							element.className = "dep3";
+						} else if(menuObj.menuDepth == 3){
+							element.className = "dep4";
+						} else {
+
+						}
+					};
+					_self.liAttrDraw = function(element, menuObj){
+						if(menuObj.menuUrl == "${urlInfoMap.menuUrl}" && (menuObj.menuDepth == 3 || menuObj.menuDepth == 4)){
+							element.classList.add("sel");
+							element.classList.add("active");
+						}
+					};
+					_self.liContentDraw = function(element, menuObj){
+
+						let span = document.createElement("span");
+						let a = document.createElement("a");
+						if(menuObj.childCnt <= 0){
+							a.setAttribute("onclick", "openMenu('"+menuObj.menuSid+"', '"+menuObj.menuName+"', '"+menuObj.menuUrl+"')");
+						}
+						a.href = "#"; //href추가
+						let text = document.createTextNode(menuObj.menuName);
+
+						a.appendChild(text);
+						span.appendChild(a);
+						element.appendChild(span);
+
+						if(menuObj.childCnt > 0){ //하위메뉴가 있으면
+							let button = document.createElement("button");
+							button.type = "button";
+							button.classList.add("toggle");
+                            let text = document.createTextNode("하위메뉴 열기");
+                            button.appendChild(text);
+							element.appendChild(button);
+						}
+					};
+					break;
+			}
+		};
+
+        //메뉴 렌더링
+		this.menuDraw = function(allMenuList){
+			let rootUl = document.createElement("ul");
+			_self.rootUlAttrDraw(rootUl);
+
+			for(let status1 = 0; status1 < allMenuList.length; status1++){
+				let dep1 = allMenuList[status1];
+				if(dep1.menuDepth == 1){
+					let li = document.createElement("li");
+					_self.liAttrDraw(li,dep1);
+					_self.liContentDraw(li,dep1);
+
+					if(Number(dep1.childCnt) > 0){
+						let ul = document.createElement("ul");
+						_self.ulAttrDraw(ul,dep1);
+						li.appendChild(ul);
+
+						for(let status2 = 0; status2 < allMenuList.length; status2++){
+							let dep2 = allMenuList[status2];
+							if(dep2.menuDepth == 2 && dep1.menuSid == dep2.parentSid) {
+								let li = document.createElement("li");
+								_self.liAttrDraw(li,dep2);
+								_self.liContentDraw(li,dep2);
+
+								if(Number(dep2.childCnt) > 0){
+									let ul = document.createElement("ul");
+									_self.ulAttrDraw(ul,dep2);
+									li.appendChild(ul);
+
+									for(let status3 = 0; status3 < allMenuList.length; status3++){
+										let dep3 = allMenuList[status3];
+										if(dep3.menuDepth == 3 && dep2.menuSid == dep3.parentSid) {
+											let li = document.createElement("li");
+											_self.liAttrDraw(li,dep3);
+											_self.liContentDraw(li,dep3);
+
+											if(Number(dep3.childCnt) > 0){
+												let ul = document.createElement("ul");
+												_self.ulAttrDraw(ul,dep3);
+												li.appendChild(ul);
+
+												for(let status4 = 0; status4 < allMenuList.length; status4++) {
+													let dep4 = allMenuList[status4];
+													if(dep4.menuDepth == 4 && dep3.menuSid == dep4.parentSid){
+														let li = document.createElement("li");
+														_self.liAttrDraw(li,dep4);
+														_self.liContentDraw(li,dep4);
+
+														ul.appendChild(li);
+													}
+												}
+											}
+
+											ul.appendChild(li);
+										}
+									}
+								}
+
+								ul.appendChild(li);
+							}
+						}
+					}
+
+					rootUl.append(li);
+				}
+			}
+
+			if(_self.template == "sneat"){
+				document.getElementById("sneatMenu").append(rootUl);
+
+				const menu1 = document.querySelector("#sneatMenu");
+				menu1.classList.add("menu");
+				menu1.classList.add("menu-vertical");
+				menu1.classList.add("bg-menu-theme");
+				menu1.classList.add("py-3");
+				menu1.classList.add("overflow-hidden");
+
+				if (menu1) {
+					new Menu(menu1);
+				}
+			} else {
+                document.getElementById("menuNav").append(rootUl);
+			}
+
+		}
+	}
+
+    /**************************************************************************
+     * initialize
+     **************************************************************************/
+    $(document).ready(function () {
+        //사용자별 메뉴 목록 조회
+        cmmAjax({
+            showSuccessMsg: false
+            ,url: "<c:url value='/framework/biz/cmm/cache/getMenuListByUser.do'/>"
+            ,data: {uniqId: '${sessionScope.XitLoginSession.uniqId}'}
+            ,type: "get"
+            ,success: (data) => {
+
+                let mr;
+                mr = new MenuRender();
+                mr.template = "default";
+                mr.init();
+                mr.menuDraw(data.allMenuList);
+            }
+        });
+    });
+
 </script>
 
+