itfirst/sake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
이주일
2026-08-26 17:10:35 +09:00
parent 889639a63b
commit 87da1e547e
9 changed files with 88 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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}"/>" 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="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="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}"/>

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

@@ -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>

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

@@ -27,9 +27,15 @@
history.scrollRestoration = 'manual';
}
$(window).scrollTop(0);
/*헤더에 타이틀 set*/
const title = '<c:out value="${resultMap.bbsInfo.bbsNm}"/>';
fn_set_header_title(title);
/* ABOUT 하위 화면은 게시판명이 아닌 대메뉴명을 표시 */
<c:choose>
<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}"/>"/>

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

@@ -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>

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

@@ -39,9 +39,15 @@
awaitCloseAnimation: true,
});
/*헤더에 타이틀 set*/
const title = '<c:out value="${resultMap.bbsInfo.bbsNm}"/>';/*게시판이름*/
fn_set_header_title(title);
/* ABOUT 하위 화면은 게시판명이 아닌 대메뉴명을 표시 */
<c:choose>
<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

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

@@ -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}">
<li class="home-category__item ">
<c:if test="${goodsCategory.upperCtgryId eq resultMap.BOGoodsVO.upperCtgryId}">
<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>