273 lines
18 KiB
Plaintext
273 lines
18 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
|
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
|
|
<aside class="tab-bar">
|
|
<nav class="tab-bar__nav">
|
|
<a class="tab-bar__link" onclick="fn_select_mbrInfo('<c:out value="${cdnurl}"/>',${isAuthenticated}); openModal('hamburger-menu');">
|
|
<i class="icon icon_tab-bar-category"></i>
|
|
카테고리</a>
|
|
|
|
<a class="tab-bar__link" href="/sopmal/mpage/ordr/selectWslistInqireForm" id="tabBarWishOrBnft" data-sopmalcd="${sopmallInfo.shopInfo.sopmalCd}">
|
|
<i class="icon icon_tab-bar-wishlist"></i>
|
|
위시리스트</a>
|
|
<div class="tab-bar__home-wrapper">
|
|
<div class="tab-bar__home">
|
|
<a href="/" class="hide-text">
|
|
<i class="icon icon_tab-bar-home"></i>
|
|
<span class="visually-hidden">홈</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<a class="tab-bar__link" href="/sopmal/ordr/selectSpbk">
|
|
<i class="icon icon_tab-bar-cart"></i>
|
|
장바구니</a>
|
|
<a class="tab-bar__link active" href="/sopmal/mpage/mbr/selectMpageMainInqire">
|
|
<i class="icon icon_tab-bar-mypage"></i>
|
|
마이페이지
|
|
</a>
|
|
</nav>
|
|
<div class="tab-bar__bg">
|
|
<div class="tab-bar__bg-fraction"></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 햄버거 메뉴 모달 -->
|
|
<div class="microModal microFullMenu" id="hamburger-menu" aria-hidden="true">
|
|
<div class="microModal__overlay" tabindex="-1">
|
|
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
<div class="microModal__body" id = "hambergerModal">
|
|
<div class="microModal__top">
|
|
<h2 class="microModal__title">
|
|
전체메뉴
|
|
</h2>
|
|
<button type="button" class="microModal__close" onclick="closeModal('hamburger-menu');"></button>
|
|
</div>
|
|
<div class="microModal__content">
|
|
<div class="fullMenu">
|
|
<c:if test="${not isAuthenticated}">
|
|
<div class="sub-box">
|
|
<div class="fullMenu__top">
|
|
<button type="button" class="btn md outline" onclick="fn_move_login();">로그인</button>
|
|
<button type="button" class="btn md theme" onclick="location.href='/sopmal/mbr/selectJoinGuidance'; setTopMenuCode(); ">회원가입</button>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<div class="sub-box">
|
|
<div class="fullMenu__top">
|
|
<div class="member-rank-summary">
|
|
<div class="textBtns">
|
|
<a href="/sopmal/ordr/selectSpbk" class="textBtns__btn">장바구니</a>
|
|
<c:choose>
|
|
<c:when test="${isAuthenticated}"><%--회원일시--%>
|
|
<a href="/sopmal/mpage/mbr/selectMpageMainInqire" class="textBtns__btn">마이페이지</a>
|
|
<a href="/sopmal/logout" class="textBtns__btn">로그아웃</a>
|
|
</c:when>
|
|
<c:otherwise><%--비회원일시--%>
|
|
<a href="/sopmal/mpage/ordr/selectMbrOrdrListInqire" class="textBtns__btn">주문조회</a>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
<c:if test = "${isAuthenticated}">
|
|
<div class="member-rank-summary__top">
|
|
<div class="member-rank-summary__icon" id = "hambergerGradImg"></div>
|
|
<a href="/sopmal/mpage/mbr/selectMpageMainInqire" class="member-rank-summary__user">
|
|
<span class="member-rank-summary__rank" id = "hambergerGradNm"></span>
|
|
<span class="member-rank-summary__name" id = "hambergermbrNm"></span>
|
|
</a>
|
|
<a class="member-rank-summary__benefit-link" href="/sopmal/mpage/bnef/selectMbrGradInqire">등급별 혜택</a>
|
|
</div>
|
|
<div class="member-rank-summary__bottom">
|
|
<div class="member-rank-summary__summary">
|
|
<a href="/sopmal/mpage/bnef/selectMlgDtlsInqireForm" class="member-rank-summary__summary-item">
|
|
<img src="/mobile/images/icon_member-rank-mileage.png"
|
|
alt="">
|
|
<div class="member-rank-summary__summary-description">
|
|
<span class="member-rank-summary__summary-name">마일리지</span>
|
|
<p class="member-rank-summary__summary-numberContainer">
|
|
<span
|
|
class="member-rank-summary__summary-number comma"
|
|
id = "hambergerMbrMlgAmt"></span>
|
|
<span
|
|
class="member-rank-summary__summary-numberUnit">원</span>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a href="/sopmal/mpage/bnef/selectCouponDtlsForm" class="member-rank-summary__summary-item">
|
|
<img src="/mobile/images/icon_member-rank-coupon.png" alt="">
|
|
<div class="member-rank-summary__summary-description">
|
|
<span class="member-rank-summary__summary-name">쿠폰</span>
|
|
<p class="member-rank-summary__summary-numberContainer">
|
|
<span class="member-rank-summary__summary-number comma" id = "hambergerCoupnCnt"></span>
|
|
<span
|
|
class="member-rank-summary__summary-numberUnit">장</span>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a href="/sopmal/mpage/ordr/selectWslistInqireForm" class="member-rank-summary__summary-item">
|
|
<img src="/mobile/images/icon_member-rank-wishlist.png" alt="">
|
|
<div class="member-rank-summary__summary-description">
|
|
<span class="member-rank-summary__summary-name">위시리스트</span>
|
|
<p class="member-rank-summary__summary-numberContainer">
|
|
<span class="member-rank-summary__summary-number comma"
|
|
id = "hambergerWslistCnt"></span>
|
|
<span
|
|
class="member-rank-summary__summary-numberUnit">개</span>
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sub-box">
|
|
<div class="menu_navigation_wrap">
|
|
<!-- 카테고리 -->
|
|
<ul class="side_menu accordion">
|
|
<c:if test="${!empty sopmallInfo}">
|
|
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
|
|
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.gnbExpsrAt eq 'Y'}">
|
|
<c:if test="${topMenuList.rnum eq '2'}">
|
|
<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>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${'3' eq topMenuList.rnum}">
|
|
<!-- 메뉴 하위가 메뉴인 경우-->
|
|
<c:if test="${chkUpperMenuCd ne topMenuList.upperCtgryId}">
|
|
<ul class="view">
|
|
</c:if>
|
|
<li><a href='<c:out value="${topMenuList.url}"/>'><c:out value ="${topMenuList.ctgryNm}"/></a></li>
|
|
<c:if test="${'0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
|
|
</ul>
|
|
</li>
|
|
</c:if>
|
|
</c:if>
|
|
<c:if test="${topMenuList.rnum < 4}">
|
|
<c:set var="chkUpperMenuCd" value="${ topMenuList.upperCtgryId }"/>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
</c:if>
|
|
</ul>
|
|
|
|
<!-- 최근 본 상품(SIDE) -->
|
|
<div class="recently_side" id="recentlySite">
|
|
<!-- <div class="swiper recentlySide-swiper"> -->
|
|
<!-- <div class="swiper-wrapper" id="recentlySite"> -->
|
|
|
|
<!-- <div class="swiper-slide recentlySide__image"> -->
|
|
<!-- <a href=""> -->
|
|
<!-- <img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명"> -->
|
|
<!-- </a> -->
|
|
<!-- </div> -->
|
|
<!-- <div class="swiper-slide recentlySide__image"> -->
|
|
<!-- <a href=""> -->
|
|
<!-- <img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명"> -->
|
|
<!-- </a> -->
|
|
<!-- </div> -->
|
|
<!-- <div class="swiper-slide recentlySide__image"> -->
|
|
<!-- <a href=""> -->
|
|
<!-- <img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명"> -->
|
|
<!-- </a> -->
|
|
<!-- </div> -->
|
|
|
|
<!-- <div class="swiper-slide recentlySide__image"> -->
|
|
<!-- <a href=""> -->
|
|
<!-- <img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명"> -->
|
|
<!-- </a> -->
|
|
<!-- </div> -->
|
|
<!-- <div class="swiper-slide recentlySide__image"> -->
|
|
<!-- <a href=""> -->
|
|
<!-- <img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명"> -->
|
|
<!-- </a> -->
|
|
<!-- </div> -->
|
|
|
|
<!-- </div> -->
|
|
<!-- <div class="swiper-pagination theme-pagination"></div> -->
|
|
<!-- </div> -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="sub-box">
|
|
<div class="fullMenu__miscLinks">
|
|
<h5 class="fullMenu__miscLinks__title">서비스</h5>
|
|
<ul class="fullMenu__miscLinks__list">
|
|
<li>
|
|
<a href="/sopmal/csc/selectCscMainForm" class="fullMenu__miscLinks__link">고객센터</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<c:if test = "${sopmallInfo.shopInfo.cscTelnbOrdrPosblAt eq 'Y'}">
|
|
<div class="sub-box">
|
|
<div class="mainNotice__customerContact mainNotice__customerContact--moreInfo">
|
|
<i class="icon icon_notice03"></i>
|
|
<div class="mainNotice__customerContact__right">
|
|
<h4 class="notice__title customer-service">고객센터</h4>
|
|
<span class="notice__number"><c:out value="${sopmallInfo.shopInfo.cscTelnb}"/></span>
|
|
<p class="notice__paragraph">
|
|
<span class="notice__text01"><c:out value="${sopmallInfo.shopInfo.cscWkdayWorkTme}"/></span>
|
|
<span class="notice__text02">(<c:out value="${sopmallInfo.shopInfo.cscLunchTme}"/>)</span>
|
|
<br>
|
|
<span class="notice__text03"><c:out value="${sopmallInfo.shopInfo.cscRstde}"/></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
////햄버거 메뉴 관련 스크립트
|
|
// 좌측 메뉴 클릭시 해당 메뉴 보여주기
|
|
$('.fullMenu__menu__btn').on('click', function () {
|
|
$(this).addClass('current');
|
|
$(this).closest('li').siblings().find('.fullMenu__menu__btn').removeClass('current');
|
|
var index = $(this).closest('li').index() - 1; // 전체 메뉴 버튼을 뺀 나머지 버튼의 인덱스
|
|
$(this).closest('.fullMenu__content').find('.fullMenu__itemSection').eq(index).siblings().hide();
|
|
$(this).closest('.fullMenu__content').find('.fullMenu__itemSection').eq(index).show();
|
|
});
|
|
|
|
// 전체 메뉴 클릭시 전체 메뉴 보여주기
|
|
$('.fullMenuAll').on('click', function () {
|
|
$(this).addClass('current');
|
|
$(this).closest('li').siblings().find('.fullMenu__menu__btn').removeClass('current');
|
|
$(this).closest('.fullMenu__content').find('.fullMenu__itemSection').show();
|
|
});
|
|
|
|
//
|
|
$('.hamburgerTabBtn').on('click', function () {
|
|
$('.hamburgerTabBtn').removeClass('active');
|
|
$(this).addClass('active');
|
|
var index = $(this).closest('li').index();
|
|
$('.fullMenu__content').removeClass('active');
|
|
$('.fullMenu__content').eq(index).addClass('active');
|
|
});
|
|
|
|
$(document).ready(function(){
|
|
MicroModal.init({
|
|
disableScroll: true,
|
|
awaitCloseAnimation: true,
|
|
});
|
|
|
|
$(".menu_navigation_wrap .depth").on('click', function () {
|
|
/*하위레벨 없을 시 페이지 이동*/
|
|
if ($(this).closest(".isSub").find(".view").length === 0) {
|
|
const href = $(this).attr("href");
|
|
location.href = href;
|
|
}
|
|
});
|
|
|
|
});
|
|
</script> |