모바일 GNB 클릭시 활성화 표시

src/main/webapp/WEB-INF/views/mob/common/fragments/GnbMob.html

@@ -92,6 +92,20 @@
 	
 <script th:inline="javascript">
 /*<![CDATA[*/
+	// 현재 클릭 GNB Class On 처리
+	let fnSetGtabSq = function (){
+		const url = new URL(document.location.href);
+		// URLSearchParams 객체
+		const urlParams = url.searchParams;
+		let gnbId = urlParams.get('gnbId');
+
+		// gtabId = gtabSq;
+		if(gagajf.isNull(gnbId)){
+			gnbId = "Home";
+		}
+		$("#gnbLi"+gnbId).addClass("on");
+	}
+
 	let fnClickGnbTab = function(gtabSq) {
 		gagajf.setCookie("st24ck_gnb_tab", gtabSq, 1);
 	}
@@ -105,20 +119,26 @@
 		$('#ulGnbTab').html('');
 		
 		let tag = '';
-		let ckBrandGnbTabSq = gagajf.getCookie("st24ck_brand_gnb_tab");
+		var gnbId = '?gnbId=';
+		// let ckBrandGnbTabSq = gagajf.getCookie("st24ck_brand_gnb_tab");
 		// tag += '<ul>\n';
-		tag += '	<li class="'+(gagajf.isNull(ckBrandGnbTabSq) ? "on" : "")+'"><a href="javascript:void(0);" onclick="cfnGoToBrandMain(' + [[${brandGroupInfo?.brandGroupNo}]] + ');fnClickBrandGnbTab(\'\');" class="on">홈</a></li>\n';
-		tag += '	<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + [[${brandGroupInfo?.brandGroupNo}]] + ',\'' + [[${brandGroupInfo?.cateGb}]] + '\');" class="on">상품</a></li>\n';
+		tag += '	<li id="gnbLiHome"><a href="javascript:void(0);" onclick="cfnGoToBrandMain(' + [[${brandGroupInfo?.brandGroupNo}]] + ' , \'\');" class="on">홈</a></li>\n';
+		tag += '	<li id="gnbLi100"><a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + [[${brandGroupInfo?.brandGroupNo}]] + ',\'' + [[${brandGroupInfo?.cateGb}]] + '\',\'\',\'\',\'\',\'\',\'\',\'\',100);" class="on">상품</a></li>\n';
 		
 		$.getJSON('/display/brand/gnb/tab/list?brandGroupNo=' + [[${brandGroupInfo?.brandGroupNo}]]
 			, function(result, status) {
 				if (status == 'success') {
 					if (result.length > 0) {
 						$.each(result, function(idx, item) {
+							if(item.linkUrl.indexOf('?') < -1){
+								gnbId = '?gnbId=';
+							}else{
+								gnbId = '&gnbId=';
+							}
 							if (item.contentsType == 'L') { // 컨텐츠유형:링크
-								tag += '<li class="'+ (ckBrandGnbTabSq == item.gtabSq ? "on" : "") +'"><a href="' + item.linkUrl + '" onclick="fnClickBrandGnbTab(' + item.gtabSq + ');">' + item.gtabNm + '</a></li>\n';
+								tag += '<li id="gnbLi' + item.gtabSq + '"><a href="' + item.linkUrl + gnbId + item.gtabSq + '" >' + item.gtabNm + '</a></li>\n';
 							}else{
-								tag += '<li class="'+ (ckBrandGnbTabSq == item.gtabSq ? "on" : "") +'"><a href="' + item.linkUrl + '" onclick="fnClickBrandGnbTab(' + item.gtabSq + ');">' + item.gtabNm + '</a></li>\n';
+								tag += '<li id="gnbLi' + item.gtabSq + '"><a href="' + item.linkUrl + gnbId + item.gtabSq + '" >' + item.gtabNm + '</a></li>\n';
 							}
 						});
 					}
@@ -127,29 +147,38 @@
 				$('#ulGnbTab').html(tag);
 			});
 		// tag += '</ul>\n';
+		setTimeout(function() {
+			fnSetGtabSq();
+		}, 3000);
 	}
 	
 	// GNB탭 생성
 	let fnCreateGnbTab = function() {
+		var gnbId = '?gnbId=';
 		$.getJSON('/display/gnb/tab/list'
 			, function(result, status) {
 				if (status == 'success') {
 					if (result.length > 0) {
 						$('#ulGnbTab').html('');
 						
-						let ckGnbTabSq = gagajf.getCookie("st24ck_gnb_tab");
+						// let ckGnbTabSq = gagajf.getCookie("st24ck_gnb_tab");
 						
 						let tag = '';
-						tag += '<li class="' + (gagajf.isNull(ckGnbTabSq) ? "on" : "") + '"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN); fnClickGnbTab(\'\');">홈</a></li>\n';
-						tag += '<li class="' + (ckGnbTabSq == 100 ? "on" : "") + '"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_ALL_BRAND); fnClickGnbTab(100);">브랜드</a></li>\n';
+						tag += '<li id="gnbLiHome"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN,\'\',\'\');">홈</a></li>\n';
+						tag += '<li id="gnbLi100"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_ALL_BRAND);">브랜드</a></li>\n';
 						
 						$.each(result, function(idx, item) {
 							if (item.contentsType == 'C') { // 컨텐츠유형: 카테고리
-								tag += '<li class="' + (ckGnbTabSq == item.gtabSq ? "on" : "") + '"><a href="javascript:void(0);" onclick="cfnGoToCategoryMain(\'G032_101\',' + item.cate1No + '); fnClickGnbTab(' + item.gtabSq + ');">' + item.gtabNm + '</a></li>\n';
+								tag += '<li id="gnbLi' + item.gtabSq + '"><a href="javascript:void(0);" onclick="cfnGoToCategoryMain(\'G032_101\',' + item.cate1No + ',\'\',' + item.gtabSq + ');">' + item.gtabNm + '</a></li>\n';
 							} else if (item.contentsType == 'O') { // 컨텐츠유형: 아울렛
-								tag += '<li class="' + (ckGnbTabSq == item.gtabSq ? "on" : "") + '"><a href="javascript:void(0);" onclick="cfnGoToOutletMain(\'G032_103\'); fnClickGnbTab(' + item.gtabSq + ');">' + item.gtabNm + '</a></li>\n';
+								tag += '<li id="gnbLi' + item.gtabSq + '"><a href="javascript:void(0);" onclick="cfnGoToOutletMain(\'G032_103\',' + item.gtabSq + ');">' + item.gtabNm + '</a></li>\n';
 							} else { // 컨텐츠유형: 링크
-								tag += '<li class="' + (ckGnbTabSq == item.gtabSq ? "on" : "") + '"><a href="' + item.linkUrl + '" onclick="fnClickGnbTab(' + item.gtabSq + ');">' + item.gtabNm + '</a></li>\n';
+								if(item.linkUrl.indexOf('?') < -1){
+									gnbId = '?gnbId=';
+								}else{
+									gnbId = '&gnbId=';
+								}
+								tag += '<li id="gnbLi' + item.gtabSq + '"><a href="' + item.linkUrl + gnbId + item.gtabSq + '">' + item.gtabNm + '</a></li>\n';
 							}
 						});
 						
@@ -157,6 +186,9 @@
 					}
 				}
 			});
+		setTimeout(function() {
+			fnSetGtabSq();
+		}, 3000);
 	}
 	
 	// GNB탭 > 브랜드 생성
@@ -230,6 +262,7 @@
 
 		// 띠배너 조회
 		fnCreateTopMobBanner();
+		// var para = document.location.href.split("?");
 	});
 /*]]>*/
 </script>

src/main/webapp/ux/style24_link.js

@@ -138,10 +138,11 @@ const _PAGE_LOOKBOOK_DETAIL = _frontUrl + "/display/lookbook/detail/form";		//
  * @author : gagamel
  * @since  : 2020/02/21
  */
-var cfnGoToPage = function(page, ithrCd) {
+var cfnGoToPage = function(page, ithrCd , gnbId) {
 	if (!gagajf.isNull(page)) {
 		var params = page;
 		if (ithrCd) params += "&ithrCd=" + ithrCd;
+		if (gnbId) params += "&gnbId=" + gnbId;
 		document.location.href = params;
 	}
 }
@@ -1215,9 +1216,10 @@ function cfnPutWishList(a) {
  * @since  : 2021/03/22
  * @author : gagamel
  */
-var cfnGoToCategoryMain = function(cateGb, cate1No, brandGroupNo) {
+var cfnGoToCategoryMain = function(cateGb, cate1No, brandGroupNo, gnbId) {
 	var params = '?cateGb=' + cateGb + '&cate1No=' + cate1No;
 	if (typeof (brandGroupNo) != 'undefined') params += '&brandGroupNo=' + brandGroupNo;
+	if (typeof (gnbId) != 'undefined') params += '&gnbId=' + gnbId;
 	cfnGoToPage(_PAGE_CATE_MAIN + params);
 }
 
@@ -1233,8 +1235,9 @@ var cfnGoToCategoryMain = function(cateGb, cate1No, brandGroupNo) {
  * @since  : 2021/04/20
  * @author : bin2107
  */
-var cfnGoToOutletMain = function(cateGb) {
+var cfnGoToOutletMain = function(cateGb , gnbId) {
 	var params = '?cateGb=' + cateGb;
+	if (typeof (gnbId) != 'undefined') params += '&gnbId=' + gnbId;
 	cfnGoToPage(_PAGE_OUTLET_MAIN + params);
 }
 
@@ -1256,7 +1259,7 @@ var cfnGoToOutletMain = function(cateGb) {
  * @since  : 2021/03/22
  * @author : gagamel
  */
-var cfnGoToGoodsList = function(brandGroupNo, cateGb, cate1No, cate2No, cate3No, cate4No, cate5No, formalGb) {
+var cfnGoToGoodsList = function(brandGroupNo, cateGb, cate1No, cate2No, cate3No, cate4No, cate5No, formalGb, gnbId) {
 	var params = '?brandGroupNo=' + brandGroupNo + '&cateGb=' + cateGb;
 	if (typeof (cate1No) != 'undefined') params += '&cate1No=' + cate1No;
 	if (typeof (cate2No) != 'undefined') params += '&cate2No=' + cate2No;
@@ -1264,6 +1267,7 @@ var cfnGoToGoodsList = function(brandGroupNo, cateGb, cate1No, cate2No, cate3No,
 	if (typeof (cate4No) != 'undefined') params += '&cate4No=' + cate4No;
 	if (typeof (cate5No) != 'undefined') params += '&cate5No=' + cate5No;
 	if (typeof (formalGb) != 'undefined') params += '&formalGb=' + formalGb;
+	if (typeof (gnbId) != 'undefined') params += '&gnbId=' + gnbId;
 	cfnGoToPage(_PAGE_CATE_GOODS_LIST + params);
 }
 
@@ -1278,8 +1282,9 @@ var cfnGoToGoodsList = function(brandGroupNo, cateGb, cate1No, cate2No, cate3No,
  * @since  : 2021/03/16
  * @author : gagamel
  */
-var cfnGoToBrandMain = function(brandGroupNo) {
+var cfnGoToBrandMain = function(brandGroupNo, gnbId) {
 	var params = '?brandGroupNo=' + brandGroupNo;
+	if (typeof (gnbId) != 'undefined') params += '&gnbId=' + gnbId;
 	cfnGoToPage(_PAGE_BRAND_MAIN + params);
 }