fix: 모바일 전체메뉴 하위 카테고리 표시 개선

src/main/java/com/wb/domainserver/domain/sopmal/goods/controller/GoodsController.java

@@ -305,6 +305,14 @@ public class GoodsController {
 	public String selectGoodsListForm(HttpServletRequest request,
 									  BOGoodsVO vo,
 									  ModelMap model) {
+		String mobileParentCtgryId = request.getParameter("mobileParentCtgryId");
+		String mobileCurrentCtgryId = request.getParameter("mobileCurrentCtgryId");
+		boolean mobileSubCategorySelected = mobileParentCtgryId != null && !mobileParentCtgryId.isBlank()
+				&& mobileCurrentCtgryId != null && !mobileCurrentCtgryId.isBlank();
+		if (mobileSubCategorySelected) {
+			vo.setCtgryId(mobileParentCtgryId);
+		}
+
 		AnonymousUser user = MemberJwtContextHolder.getMemberInfo();
 		if("01".equals(user.getSysDvCd())){
 			vo.setSopmalCd(user.getSopmalCd());
@@ -322,7 +330,7 @@ public class GoodsController {
 		//검색한 카테고리 정보로 vo 세팅
 		if(!CollectionUtils.isEmpty(goodsCategoryList)){
 			vo.setUpperCtgryId(goodsCategoryList.get(0).get("baseCtgryId").toString());
-			vo.setCtgryId(goodsCategoryList.get(0).get("baseCtgryId").toString());
+			vo.setCtgryId(mobileSubCategorySelected ? mobileCurrentCtgryId : goodsCategoryList.get(0).get("baseCtgryId").toString());
 		}else{
 			vo.setUpperCtgryId("0");
 			vo.setCtgryId("0");

src/main/resources/static/mobile/css/default.css

@@ -4269,6 +4269,9 @@ body {
 .header--sub:has(.headerTab) ~ .content-wrap {
   padding-top: 96px;
 }
+.header--sub:has(.mobile-about-menu) ~ .content-wrap {
+  padding-top: 96px;
+}
 .header--sub::before {
   content: "";
   position: absolute;
@@ -14751,4 +14754,4 @@ body {
   margin-bottom: 20px;
   padding: 14px 28px;
   background-color: #ffffff;
-}/*# sourceMappingURL=default.css.map */
+}/*# sourceMappingURL=default.css.map */

src/main/webapp/WEB-INF/views/comm/mobile/Header.jsp

@@ -35,10 +35,32 @@
                 </div>
             </div>
         </div>
+        <c:if test="${param.mobileAboutMenuAt eq 'Y' && not empty param.mobileParentCtgryId}">
+            <c:set var="mobileAboutCurrentCtgryId" value="${param.mobileCurrentCtgryId}"/>
+            <nav class="home-category mobile-about-menu" aria-label="하위 메뉴">
+                <div class="home-category__content">
+                <ul class="home-category__list">
+                    <c:forEach var="topMenuList" items="${sopmallInfo.menuList}">
+                        <c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.rnum eq '3' && topMenuList.upperCtgryId eq param.mobileParentCtgryId && topMenuList.menuExpsrAt eq 'Y'}">
+                            <c:if test="${empty mobileAboutCurrentCtgryId}">
+                                <c:set var="mobileAboutCurrentCtgryId" value="${topMenuList.ctgryId}"/>
+                            </c:if>
+                            <li class="home-category__item<c:if test="${topMenuList.ctgryId eq mobileAboutCurrentCtgryId}"> active</c:if>">
+                                <a href="<c:out value="${topMenuList.url}"/><c:choose><c:when test="${fn:contains(topMenuList.url, '?')}">&amp;</c:when><c:otherwise>?</c:otherwise></c:choose>mobileParentCtgryId=<c:out value="${param.mobileParentCtgryId}"/>&amp;mobileAboutMenuAt=Y&amp;mobileCurrentCtgryId=<c:out value="${topMenuList.ctgryId}"/>"
+                                   class="home-category__link">
+                                    <c:out value="${topMenuList.ctgryNm}"/>
+                                </a>
+                            </li>
+                        </c:if>
+                    </c:forEach>
+                </ul>
+                </div>
+            </nav>
+        </c:if>
     </div>
 <script>
     //뒤로가기 이벤트 부여, 각 페이지 마다 이벤트 삭제 후 다른 이벤트 사용 가능
     $(".header__toBack__btn").on("click",function (){
         fn_go_back();
     });
-</script>
+</script>

src/main/webapp/WEB-INF/views/comm/mobile/Include.jsp

@@ -1070,10 +1070,11 @@
                                                 <c:if test="${topMenuList.gnbExpsrAt eq 'Y'}">
                                                     <c:if test="${topMenuList.rnum eq '2'}">
                                                         <c:set var="mDpth3Chk" value="N"/>
+																		<c:set var="mobileAboutParentAt" value="${topMenuList.ctgryNm eq 'ABOUT'}"/>
                                                         <li class="isSub list">
                                                         <div class="isSubDv">
-                                                            <a href="<c:out value="${topMenuList.url}"/>" class="depth"><c:out value ="${topMenuList.ctgryNm}"/><em class="visually-hidden">상세내용닫기</em></a>
+									<a href="<c:out value="${topMenuList.url}"/><c:choose><c:when test="${fn:contains(topMenuList.url, '?')}">&amp;</c:when><c:otherwise>?</c:otherwise></c:choose>mobileParentCtgryId=<c:out value="${topMenuList.ctgryId}"/><c:if test="${topMenuList.ctgryNm eq 'ABOUT'}">&amp;mobileAboutMenuAt=Y</c:if>" class="depth"><c:out value ="${topMenuList.ctgryNm}"/><em class="visually-hidden">상세내용닫기</em></a>
-                                                            <a href="<c:out value="${topMenuList.url}"/>" class="moer"></a>
+									<a href="<c:out value="${topMenuList.url}"/><c:choose><c:when test="${fn:contains(topMenuList.url, '?')}">&amp;</c:when><c:otherwise>?</c:otherwise></c:choose>mobileParentCtgryId=<c:out value="${topMenuList.ctgryId}"/><c:if test="${topMenuList.ctgryNm eq 'ABOUT'}">&amp;mobileAboutMenuAt=Y</c:if>" class="moer"></a>
                                                         </div>
                                                     </c:if>
                                                     <c:if test="${topMenuList.rnum eq '3'}">
@@ -1082,7 +1083,7 @@
                                                             <c:set var="mDpth3Chk" value="Y"/>
                                                             <ul class="view">
                                                         </c:if>
-                                                        <li><a href='<c:out value="${topMenuList.url}"/>'><c:out value ="${topMenuList.ctgryNm}"/></a></li>
+																				<li><a href="<c:out value="${topMenuList.url}"/><c:choose><c:when test="${fn:contains(topMenuList.url, '?')}">&amp;</c:when><c:otherwise>?</c:otherwise></c:choose>mobileParentCtgryId=<c:out value="${topMenuList.upperCtgryId}"/>&amp;mobileCurrentCtgryId=<c:out value="${topMenuList.ctgryId}"/><c:if test="${mobileAboutParentAt}">&amp;mobileAboutMenuAt=Y</c:if>"><c:out value ="${topMenuList.ctgryNm}"/></a></li>
                                                     </c:if>
                                                     <c:if test="${topMenuList.rnum < 4}">
                                                         <c:set var="chkUpperMenuCd" value="${topMenuList.upperCtgryId}"/>

src/main/webapp/WEB-INF/views/comm/mobile/MainHeader.jsp

@@ -66,7 +66,7 @@
 								<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.menuExpsrAt eq 'Y'}">
 									<c:if test="${topMenuList.rnum eq '2'}">
 										<li class="home-category__item">
-											<a href="<c:out value="${topMenuList.url}"/>" onclick="setTopMenuCode()" <c:if test="${not empty topMenuList.menuChrColor}"> style="color:${topMenuList.menuChrColor};"</c:if>><c:out value ="${topMenuList.ctgryNm}"/></a>
+											<a href="<c:out value="${topMenuList.url}"/><c:choose><c:when test="${fn:contains(topMenuList.url, '?')}">&amp;</c:when><c:otherwise>?</c:otherwise></c:choose>mobileParentCtgryId=<c:out value="${topMenuList.ctgryId}"/><c:if test="${topMenuList.ctgryNm eq 'ABOUT'}">&amp;mobileAboutMenuAt=Y</c:if>" onclick="setTopMenuCode()" <c:if test="${not empty topMenuList.menuChrColor}"> style="color:${topMenuList.menuChrColor};"</c:if>><c:out value ="${topMenuList.ctgryNm}"/></a>
 										</li>
 									</c:if>
 								</c:if>
@@ -90,4 +90,4 @@
         $(".top-banner__close").click(function () {
             $(".top-banner").remove();
         });
-    </script>
+    </script>

src/main/webapp/WEB-INF/views/sopmal_m/csc/BbscttDtlR.jsp

@@ -27,9 +27,15 @@
             history.scrollRestoration = 'manual';
         }
         $(window).scrollTop(0);
-        /*헤더에 타이틀 set*/
+        /* ABOUT 하위 화면은 게시판명이 아닌 대메뉴명을 표시 */
-        const title = '<c:out value="${resultMap.bbsInfo.bbsNm}"/>';
+        <c:choose>
-        fn_set_header_title(title);
+            <c:when test="${param.mobileAboutMenuAt eq 'Y'}">
+                fn_set_header_title('ABOUT');
+            </c:when>
+            <c:otherwise>
+                fn_set_header_title('<c:out value="${resultMap.bbsInfo.bbsNm}"/>');
+            </c:otherwise>
+        </c:choose>
         fn_select_cn();
         // data-micromodal-trigger 속성을 가진 버튼을 클릭하면 해당 ID의 모달이 열림
         // 모달 배경화면 스크롤 방지
@@ -1253,6 +1259,7 @@
                                         <i class="icon icon_lock"></i>
                                     </c:if>
                                 </h4>
+                                <c:if test="${param.mobileAboutMenuAt ne 'Y'}">
                                 <ul class="eventDetail__list">
                                     <c:if test="${bbsInfo.registDtYn eq 'Y'}">
                                         <li><c:out value="${bbscttInfo.sumRegistDt}"/></li>
@@ -1294,6 +1301,7 @@
                                         </c:choose>
                                     </li>
                                 </ul>
+                                </c:if>
                             </div>
                             <%-------------------------------%>
                             <%--첨부 파일 다운로드 영역--%>
@@ -1753,6 +1761,9 @@
         </div>
        </div>
 <form id="hiddenForm">
+	<input type="hidden" name="mobileParentCtgryId" value="<c:out value="${param.mobileParentCtgryId}"/>"/>
+	<input type="hidden" name="mobileAboutMenuAt" value="<c:out value="${param.mobileAboutMenuAt}"/>"/>
+	<input type="hidden" name="mobileCurrentCtgryId" value="<c:out value="${param.mobileCurrentCtgryId}"/>"/>
     <%--목록 관련--%>
     <input type="hidden" name="pageIndex" value="<c:out value="${bbscttVO.pageIndex}"/>"/>
     <input type="hidden" name="bbsTyCd" value="<c:out value="${bbscttVO.bbsTyCd}"/>"/>

src/main/webapp/WEB-INF/views/sopmal_m/csc/CscListRForm.jsp

@@ -314,6 +314,9 @@
                                    </div>
                                </form>
                                <form id = "dtlForm" action="/sopmal/csc/selectBbscttDtlInqire" method="get">
+							   <input type="hidden" name="mobileParentCtgryId" value="<c:out value="${param.mobileParentCtgryId}"/>"/>
+							   <input type="hidden" name="mobileAboutMenuAt" value="<c:out value="${param.mobileAboutMenuAt}"/>"/>
+							   <input type="hidden" name="mobileCurrentCtgryId" value="<c:out value="${param.mobileCurrentCtgryId}"/>"/>
                                    <input type="hidden" name="bbscttInnb" id="bbscttInnb"><%--게시글 고유번호--%>
                                    <input type="hidden" name="bbsId" value="<c:out value = "${bbsInfo.bbsId}"/>"/><%--게시판아이디--%>
                                    <input type="hidden" name="bbsTyCd" value="<c:out value = "${bbsInfo.bbsTyCd}"/>"/><%--게시판타입--%>
@@ -429,4 +432,4 @@
         </div>
     </div>
 </div>
-</html>
+</html>

src/main/webapp/WEB-INF/views/sopmal_m/csc/SubPageListRForm.jsp

@@ -39,9 +39,15 @@
                 awaitCloseAnimation: true,
             });
 
-        /*헤더에 타이틀 set*/
+        /* ABOUT 하위 화면은 게시판명이 아닌 대메뉴명을 표시 */
-        const title = '<c:out value="${resultMap.bbsInfo.bbsNm}"/>';/*게시판이름*/
+        <c:choose>
-        fn_set_header_title(title);
+            <c:when test="${param.mobileAboutMenuAt eq 'Y'}">
+                fn_set_header_title('ABOUT');
+            </c:when>
+            <c:otherwise>
+                fn_set_header_title('<c:out value="${resultMap.bbsInfo.bbsNm}"/>');
+            </c:otherwise>
+        </c:choose>
 
         /*box_tab 클릭 이벤트*/
         $(".headerTab__item").on("click", function () {
@@ -347,6 +353,11 @@
         fn_create_input("reqUrl","subPage", form);
         fn_create_input("bbsId", $("#bbsId").val(), form);
         fn_create_input("cscAt", $("#cscAt").val(), form);
+        <c:if test="${param.mobileAboutMenuAt eq 'Y'}">
+            fn_create_input("mobileParentCtgryId", '<c:out value="${param.mobileParentCtgryId}"/>', form);
+            fn_create_input("mobileAboutMenuAt", 'Y', form);
+            fn_create_input("mobileCurrentCtgryId", '<c:out value="${param.mobileCurrentCtgryId}"/>', form);
+        </c:if>
         /*let pageUnit = '';
         //페이지 유닛 계산
         const pgeVtcCnt = $("#pgeVtcCnt").val();//ROW

src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsListRForm.jsp

@@ -29,6 +29,16 @@
         const title = '상품 목록';
         fn_set_header_title(title);
 
+        const $categoryList = $('.header--sub > .home-category .home-category__list');
+        const $activeCategory = $categoryList.find('.home-category__item.active');
+        if ($activeCategory.length) {
+            const listElement = $categoryList.get(0);
+            const activeRect = $activeCategory.get(0).getBoundingClientRect();
+            const listRect = listElement.getBoundingClientRect();
+            const activeCenter = activeRect.left - listRect.left + listElement.scrollLeft + (activeRect.width / 2);
+            $categoryList.scrollLeft(Math.max(0, activeCenter - (listElement.clientWidth / 2)));
+        }
+
         let pageIndex = '<c:out value="${ resultMap.BOGoodsVO.pageIndex }"/>';
 
         fn_select_list(pageIndex);
@@ -1116,12 +1126,12 @@
         <nav class="home-category">
             <div class="home-category__content">
                 <ul class="home-category__list">
-                    <li class="home-category__item active">
+                    <li class="home-category__item<c:if test="${resultMap.BOGoodsVO.ctgryId eq resultMap.BOGoodsVO.upperCtgryId}"> active</c:if>">
                         <a href="javascript:void(0);" data-text="${resultMap.goodsCategoryList[0].baseCtgryNm}"  data-value="${resultMap.goodsCategoryList[0].baseCtgryId}">전체</a>
                     </li>
                     <c:forEach items="${resultMap.goodsCategoryList}" var="goodsCategory"  varStatus="status">
-                        <c:if test="${goodsCategory.ctgryId ne resultMap.BOGoodsVO.ctgryId}">
+                        <c:if test="${goodsCategory.upperCtgryId eq resultMap.BOGoodsVO.upperCtgryId}">
-                            <li class="home-category__item ">
+                            <li class="home-category__item<c:if test="${goodsCategory.ctgryId eq resultMap.BOGoodsVO.ctgryId}"> active</c:if>">
                                 <a href="javascript:void(0);" data-value="${goodsCategory.ctgryId}"> ${goodsCategory.ctgryNm}</a>
                             </li>
                         </c:if>
@@ -1260,4 +1270,4 @@
     </div>
 </div>
 
-</html>
+</html>