Files
sake/src/main/webapp/WEB-INF/views/comm/Header.jsp
2025-12-16 16:18:36 +09:00

1392 lines
58 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="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<c:choose>
<c:when test="${ topBarInfo.topbar.gnbTyCd eq '04'}">
<!-- 헤더 영역(Type3) -->
<header class="header header--type02">
<!-- 상단 띠배너 -->
<!-- 상단 띠배너 사이즈 1280x50 -->
<!-- 배경색 없는 투명한 이미지 넣어야됨 -->
<c:if test="${ not empty topBarInfo.case15 }">
<div class="top-banner">
<div class="top-banner-slick">
<c:forEach items="${ topBarInfo.case15 }" var="case15" varStatus="status">
<div class="top-banner__image">
<a href="${ case15.itmeCnncUrl }">
<img src="${cdnurl}${ case15.filCours }/${ case15.sysFilNm }" alt="해당 이미지에 대한 설명">
</a>
</div>
</c:forEach>
</div>
<div class="top-banner__btn-container">
<button class="top-banner__close">
<i class="icon icon_top-banner-close"></i>
<span class="visually-hidden">닫기</span>
</button>
</div>
</div>
</c:if>
<div class="header-top-controls">
<div class="header__right">
<div class="header-misc-link">
<ul>
<c:choose>
<c:when test="${isAuthenticated}">
<li><a href="/sopmal/logout">로그아웃</a></li>
</c:when>
<c:otherwise>
<li><a href="javascript:void(0)" onclick="fn_login()">로그인</a></li>
<li><a href="/sopmal/mbr/selectJoinGuidance" onclick="setTopMenuCode()">회원가입</a></li>
</c:otherwise>
</c:choose>
<li><a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=notice" onclick="setTopMenuCode()">고객센터</a></li>
<li><a href="/sopmal/mpage/ordr/selectMbrOrdrListInqire" onclick="setTopMenuCode()">주문/배송</a></li>
<c:if test = "${sopmallInfo.shopInfo.sopmalCd eq 'NC' && sopmallInfo.shopInfo.sopmalCd eq 'CH'}"><%--뉴트리코어,참다한만--%>
<li><a href="/sopmal/main/selectStrListForm" onclick="setTopMenuCode()">매장안내</a></li>
</c:if>
</ul>
</div>
</div>
</div>
<div class="header__top">
<div class="header__left">
<h1 class="header__logo">
<a href="/">
<img src="${ cdnurl }${ topBarInfo.topbar.topFilCours }/${ topBarInfo.topbar.topSysFilNm }" alt="<c:out value="${sopmallInfo.shopInfo.sopmalNm}"/>">
</a>
</h1>
<div class="header-search-bar__wrapper">
<div class="header-search-bar">
<input type="search" readonly id="header-search-trigger" title="검색어 입력"
placeholder="검색어를 입력해주세요.">
<button>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_10974)">
<path
d="M23.2332 21.8602L17.5212 15.9194C18.9898 14.1735 19.7945 11.9768 19.7945 9.68999C19.7945 4.34701 15.4475 0 10.1045 0C4.76156 0 0.414551 4.34701 0.414551 9.68999C0.414551 15.033 4.76156 19.38 10.1045 19.38C12.1104 19.38 14.0218 18.775 15.6561 17.6265L21.4115 23.6124C21.6521 23.8622 21.9756 24 22.3224 24C22.6506 24 22.9619 23.8749 23.1982 23.6474C23.7004 23.1641 23.7165 22.3628 23.2332 21.8602ZM10.1045 2.52782C14.0538 2.52782 17.2667 5.74069 17.2667 9.68999C17.2667 13.6393 14.0538 16.8522 10.1045 16.8522C6.15524 16.8522 2.94237 13.6393 2.94237 9.68999C2.94237 5.74069 6.15524 2.52782 10.1045 2.52782Z" />
</g>
<defs>
<clipPath id="clip0_5_10974">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="header-search-pop">
<form id="search-form">
<div class="header-search-pop__header">
<input type="search" name="kwrd" autocomplete="off" title="검색어 입력" id="header-search-bar"
placeholder="검색어를 입력해주세요.">
<button type="button" class="header-search-pop__text-delete-btn">
<span class="visually-hidden">검색어 삭제</span>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16"
viewBox="0 0 24 24">
<path
d="M 4.9902344 3.9902344 A 1.0001 1.0001 0 0 0 4.2929688 5.7070312 L 10.585938 12 L 4.2929688 18.292969 A 1.0001 1.0001 0 1 0 5.7070312 19.707031 L 12 13.414062 L 18.292969 19.707031 A 1.0001 1.0001 0 1 0 19.707031 18.292969 L 13.414062 12 L 19.707031 5.7070312 A 1.0001 1.0001 0 0 0 18.980469 3.9902344 A 1.0001 1.0001 0 0 0 18.292969 4.2929688 L 12 10.585938 L 5.7070312 4.2929688 A 1.0001 1.0001 0 0 0 4.9902344 3.9902344 z">
</path>
</svg>
</button>
<button class="header-search-pop__search-btn">
<span class="visually-hidden">검색</span>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_10974)">
<path
d="M23.2332 21.8602L17.5212 15.9194C18.9898 14.1735 19.7945 11.9768 19.7945 9.68999C19.7945 4.34701 15.4475 0 10.1045 0C4.76156 0 0.414551 4.34701 0.414551 9.68999C0.414551 15.033 4.76156 19.38 10.1045 19.38C12.1104 19.38 14.0218 18.775 15.6561 17.6265L21.4115 23.6124C21.6521 23.8622 21.9756 24 22.3224 24C22.6506 24 22.9619 23.8749 23.1982 23.6474C23.7004 23.1641 23.7165 22.3628 23.2332 21.8602ZM10.1045 2.52782C14.0538 2.52782 17.2667 5.74069 17.2667 9.68999C17.2667 13.6393 14.0538 16.8522 10.1045 16.8522C6.15524 16.8522 2.94237 13.6393 2.94237 9.68999C2.94237 5.74069 6.15524 2.52782 10.1045 2.52782Z" />
</g>
<defs>
<clipPath id="clip0_5_10974">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
</form>
<div class="header-search-pop__body">
<section class="header-search-pop__recent-search">
<h3 class="header-search-pop__sub-title">최근 검색어</h3>
<div class="header-search-pop__recent-search-inner">
<ul class="header-search-pop__recent-search-list">
</ul>
</div>
<button type="button" class="header-search-pop__recent-search-deleteAll">전체삭제</button>
</section>
<section class="header-search-pop__trend">
<h3 class="header-search-pop__sub-title">인기 검색어</h3>
<div class="search-trend">
<ul>
<c:forEach var="popularSrchwrd" items="${ topBarInfo.popularSrchwrd }" varStatus="status">
<li>
<a href="javascript:void(0);" onclick="fn_search('${ popularSrchwrd.popularSrchwrd }'); return false;">
<%-- <a href="sopmal/goods/selectGoodsSrchForm?kwrd=${ popularSrchwrd.popularSrchwrd }"> --%>
<span class="search-trend__number">${ status.index+1}.</span>
<span class="search-trend__text">${ popularSrchwrd.popularSrchwrd }</span>
</a>
</li>
</c:forEach>
</ul>
</div>
</section>
</div>
<div class="header-search-pop__auto-complete">
<ul>
</ul>
</div>
<div class="header-search-pop__footer">
<button class="header-search-pop__close">
<span>닫기</span>
</button>
</div>
</div>
</div>
<div class="header-trend">
<div class="search-trend" id="search-trend">
<ul>
<c:forEach var="popularGoods" items="${ topBarInfo.popularGoods }" varStatus="status">
<li>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${popularGoods.goodsInnb});">
<span class="search-trend__number">${ status.index+1 }.</span>
<span class="search-trend__text">${ popularGoods.goodsNm }</span>
<c:choose>
<c:when test="${ popularGoods.popularChngDv eq '01' }">
<i class="icon icon_search-up"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '02' }">
<i class="icon icon_search-default"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '03' }">
<i class="icon icon_search-down"></i>
</c:when>
</c:choose>
</a>
</li>
</c:forEach>
</ul>
</div>
<button class="search-trend__drop-down-trigger"><span class="visually-hidden">실시간 인기 상품</span></button>
<section class="search-trend__drop-down">
<h3 class="search-trend__drop-down-title">실시간 인기 상품</h3>
<div class="search-trend">
<ul>
<c:forEach var="popularGoods" items="${ topBarInfo.popularGoods }" varStatus="status">
<li>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${popularGoods.goodsInnb});">
<span class="search-trend__number">${ status.index+1 }.</span>
<span class="search-trend__text">${ popularGoods.goodsNm }</span>
<c:choose>
<c:when test="${ popularGoods.popularChngDv eq '01' }">
<i class="icon icon_search-up"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '02' }">
<i class="icon icon_search-default"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '03' }">
<i class="icon icon_search-down"></i>
</c:when>
</c:choose>
</a>
</li>
</c:forEach>
</ul>
</div>
</section>
</div>
</div>
<div class="header__right">
<div class="header-sub-link">
<ul>
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
<c:if test="${topMenuList.ctgryDvCd eq '02'}">
<c:if test="${topMenuList.rnum eq '2'}">
<li><a href='<c:out value="${topMenuList.url}"/>'><c:out value ="${topMenuList.ctgryNm}"/></a></li>
</c:if>
</c:if>
</c:forEach>
</ul>
</div>
</div>
</div>
<nav class="header-nav">
<div class="header-nav__inner">
<div class="full-menu__container">
<button class="header-nav__hamburger">
<img src="/pc/images/icon_nav-menu.png" alt="">
</button>
<div class="full-menu">
<ul class="full-menu__depth1">
<c:if test="${!empty sopmallInfo}">
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.menuExpsrAt eq 'Y'}">
<c:if test="${topMenuList.rnum eq '2'}">
<c:set var="gnbDpth3Chk" value="N"/>
<li>
<a href='<c:out value="${topMenuList.url}"/>' onclick="setTopMenuCode()"><c:out value ="${topMenuList.ctgryNm}"/></a>
</c:if>
<c:if test="${'3' eq topMenuList.rnum}">
<!-- 메뉴 하위가 메뉴인 경우-->
<c:if test="${chkFullUpperMenuCd ne topMenuList.upperCtgryId}">
<c:set var="gnbDpth3Chk" value="Y"/>
<ul class="full-menu__depth2">
</c:if>
<li><a href='<c:out value="${topMenuList.url}"/>' onclick="setTopMenuCode()"><c:out value ="${topMenuList.ctgryNm}"/></a></li>
</c:if>
<c:if test="${topMenuList.rnum < 4}">
<c:set var="chkFullUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
</c:if>
</c:if>
<c:if test="${topMenuList.ctgryDvCd eq '01'}">
<c:if test="${'3' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
<c:if test="${'Y' eq gnbDpth3Chk}">
</ul>
</c:if>
</li>
</c:if>
<c:if test="${'2' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
</li>
</c:if>
</c:if>
</c:forEach>
</c:if>
</ul>
</div>
</div>
<ul class="header-nav__list">
<c:if test="${!empty sopmallInfo}">
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.menuExpsrAt eq 'Y'}">
<c:if test="${topMenuList.rnum eq '2'}">
<c:set var="depth3Chk" value="N"/>
<li>
<a href="${topMenuList.url}" onclick="setTopMenuCode()"
<c:if test="${not empty topMenuList.menuChrColor}">
style="color:${topMenuList.menuChrColor};"
</c:if>>
<c:out value="${topMenuList.ctgryNm}"/>
</a>
</c:if>
<c:if test="${'3' eq topMenuList.rnum}">
<!-- 메뉴 하위가 메뉴인 경우-->
<c:if test="${chkUpperMenuCd ne topMenuList.upperCtgryId}">
<c:set var="depth3Chk" value="Y"/>
<div class="header-nav__depth2">
<ul>
</c:if>
<li>
<a href="${topMenuList.url}" 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 test="${topMenuList.rnum < 4}">
<c:set var="chkUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
</c:if>
</c:if>
<c:if test="${topMenuList.ctgryDvCd eq '01'}">
<c:if test="${'3' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
<c:if test="${'Y' eq depth3Chk}">
</ul>
</div>
</c:if>
</li>
</c:if>
<c:if test="${'2' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
</li>
</c:if>
</c:if>
</c:forEach>
</c:if>
</ul>
<div class="header-nav__btn-container">
<button type="button" onclick="setMypageCheck('/sopmal/ordr/selectSpbk')">
<span class="number-badge headerCartCnt">${ topBarInfo.cartCnt }</span>
<i class="icon icon_nav-cart"></i>
<span class="visually-hidden">장바구니</span>
</button>
<button type="button" onclick="setMypageCheck('/sopmal/mpage/mbr/selectMpageMainInqire')">
<i class="icon icon_nav-mypage"></i>
<span class="visually-hidden">마이페이지</span>
</button>
</div>
</div>
</nav>
</header>
</c:when>
<c:when test="${ topBarInfo.topbar.gnbTyCd eq '03'}">
<!-- 헤더 영역(Type3) -->
<header class="header header--type01">
<!-- 상단 띠배너 -->
<!-- 상단 띠배너 사이즈 1280x50 -->
<!-- 배경색 없는 투명한 이미지 넣어야됨 -->
<c:if test="${ not empty topBarInfo.case15 }">
<div class="top-banner">
<div class="top-banner-slick">
<c:forEach items="${ topBarInfo.case15 }" var="case15" varStatus="status">
<div class="top-banner__image">
<a href="${ case15.itmeCnncUrl }">
<img src="${cdnurl}${ case15.filCours }/${ case15.sysFilNm }" alt="해당 이미지에 대한 설명">
</a>
</div>
</c:forEach>
</div>
<div class="top-banner__btn-container">
<button class="top-banner__close">
<i class="icon icon_top-banner-close"></i>
<span class="visually-hidden">닫기</span>
</button>
</div>
</div>
</c:if>
<div class="header__top">
<div class="header__left">
<h1 class="header__logo">
<a href="/">
<img src="${ cdnurl }${ topBarInfo.topbar.topFilCours }/${ topBarInfo.topbar.topSysFilNm }" alt="<c:out value="${sopmallInfo.shopInfo.sopmalNm}"/>">
</a>
</h1>
<div class="header-search-bar__wrapper">
<div class="header-search-bar">
<input type="search" readonly id="header-search-trigger" title="검색어 입력"
placeholder="검색어를 입력해주세요.">
<button>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_10974)">
<path
d="M23.2332 21.8602L17.5212 15.9194C18.9898 14.1735 19.7945 11.9768 19.7945 9.68999C19.7945 4.34701 15.4475 0 10.1045 0C4.76156 0 0.414551 4.34701 0.414551 9.68999C0.414551 15.033 4.76156 19.38 10.1045 19.38C12.1104 19.38 14.0218 18.775 15.6561 17.6265L21.4115 23.6124C21.6521 23.8622 21.9756 24 22.3224 24C22.6506 24 22.9619 23.8749 23.1982 23.6474C23.7004 23.1641 23.7165 22.3628 23.2332 21.8602ZM10.1045 2.52782C14.0538 2.52782 17.2667 5.74069 17.2667 9.68999C17.2667 13.6393 14.0538 16.8522 10.1045 16.8522C6.15524 16.8522 2.94237 13.6393 2.94237 9.68999C2.94237 5.74069 6.15524 2.52782 10.1045 2.52782Z" />
</g>
<defs>
<clipPath id="clip0_5_10974">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="header-search-pop">
<form id="search-form">
<div class="header-search-pop__header">
<input type="search" name="kwrd" autocomplete="off" title="검색어 입력" id="header-search-bar"
placeholder="검색어를 입력해주세요.">
<button type="button" class="header-search-pop__text-delete-btn">
<span class="visually-hidden">검색어 삭제</span>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16"
viewBox="0 0 24 24">
<path
d="M 4.9902344 3.9902344 A 1.0001 1.0001 0 0 0 4.2929688 5.7070312 L 10.585938 12 L 4.2929688 18.292969 A 1.0001 1.0001 0 1 0 5.7070312 19.707031 L 12 13.414062 L 18.292969 19.707031 A 1.0001 1.0001 0 1 0 19.707031 18.292969 L 13.414062 12 L 19.707031 5.7070312 A 1.0001 1.0001 0 0 0 18.980469 3.9902344 A 1.0001 1.0001 0 0 0 18.292969 4.2929688 L 12 10.585938 L 5.7070312 4.2929688 A 1.0001 1.0001 0 0 0 4.9902344 3.9902344 z">
</path>
</svg>
</button>
<button class="header-search-pop__search-btn">
<span class="visually-hidden">검색</span>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_10974)">
<path
d="M23.2332 21.8602L17.5212 15.9194C18.9898 14.1735 19.7945 11.9768 19.7945 9.68999C19.7945 4.34701 15.4475 0 10.1045 0C4.76156 0 0.414551 4.34701 0.414551 9.68999C0.414551 15.033 4.76156 19.38 10.1045 19.38C12.1104 19.38 14.0218 18.775 15.6561 17.6265L21.4115 23.6124C21.6521 23.8622 21.9756 24 22.3224 24C22.6506 24 22.9619 23.8749 23.1982 23.6474C23.7004 23.1641 23.7165 22.3628 23.2332 21.8602ZM10.1045 2.52782C14.0538 2.52782 17.2667 5.74069 17.2667 9.68999C17.2667 13.6393 14.0538 16.8522 10.1045 16.8522C6.15524 16.8522 2.94237 13.6393 2.94237 9.68999C2.94237 5.74069 6.15524 2.52782 10.1045 2.52782Z" />
</g>
<defs>
<clipPath id="clip0_5_10974">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
</form>
<div class="header-search-pop__body">
<section class="header-search-pop__recent-search">
<h3 class="header-search-pop__sub-title">최근 검색어</h3>
<div class="header-search-pop__recent-search-inner">
<ul class="header-search-pop__recent-search-list">
</ul>
</div>
<button type="button" class="header-search-pop__recent-search-deleteAll">전체삭제</button>
</section>
<section class="header-search-pop__trend">
<h3 class="header-search-pop__sub-title">인기 검색어</h3>
<div class="search-trend">
<ul>
<c:forEach var="popularSrchwrd" items="${ topBarInfo.popularSrchwrd }" varStatus="status">
<li>
<a href="javascript:void(0);" onclick="fn_search('${ popularSrchwrd.popularSrchwrd }'); return false;">
<%-- <a href="sopmal/goods/selectGoodsSrchForm?kwrd=${ popularSrchwrd.popularSrchwrd }"> --%>
<span class="search-trend__number">${ status.index+1}.</span>
<span class="search-trend__text">${ popularSrchwrd.popularSrchwrd }</span>
</a>
</li>
</c:forEach>
</ul>
</div>
</section>
</div>
<div class="header-search-pop__auto-complete">
<ul>
</ul>
</div>
<div class="header-search-pop__footer">
<button class="header-search-pop__close">
<span>닫기</span>
</button>
</div>
</div>
</div>
<div class="header-trend">
<div class="search-trend" id="search-trend">
<ul>
<c:forEach var="popularGoods" items="${ topBarInfo.popularGoods }" varStatus="status">
<li>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${popularGoods.goodsInnb});">
<span class="search-trend__number">${ status.index+1 }.</span>
<span class="search-trend__text">${ popularGoods.goodsNm }</span>
<c:choose>
<c:when test="${ popularGoods.popularChngDv eq '01' }">
<i class="icon icon_search-up"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '02' }">
<i class="icon icon_search-default"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '03' }">
<i class="icon icon_search-down"></i>
</c:when>
</c:choose>
</a>
</li>
</c:forEach>
</ul>
</div>
<button class="search-trend__drop-down-trigger"><span class="visually-hidden">실시간 인기 상품</span></button>
<section class="search-trend__drop-down">
<h3 class="search-trend__drop-down-title">실시간 인기 상품</h3>
<div class="search-trend">
<ul>
<c:forEach var="popularGoods" items="${ topBarInfo.popularGoods }" varStatus="status">
<li>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${popularGoods.goodsInnb});">
<span class="search-trend__number">${ status.index+1 }.</span>
<span class="search-trend__text">${ popularGoods.goodsNm }</span>
<c:choose>
<c:when test="${ popularGoods.popularChngDv eq '01' }">
<i class="icon icon_search-up"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '02' }">
<i class="icon icon_search-default"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '03' }">
<i class="icon icon_search-down"></i>
</c:when>
</c:choose>
</a>
</li>
</c:forEach>
</ul>
</div>
</section>
</div>
</div>
<div class="header__right">
<div class="header-misc-link">
<ul>
<c:choose>
<c:when test="${isAuthenticated}">
<li><a href="/sopmal/logout">로그아웃</a></li>
</c:when>
<c:otherwise>
<li><a href="javascript:void(0)" onclick="fn_login()">로그인</a></li>
<li><a href="/sopmal/mbr/selectJoinGuidance" onclick="setTopMenuCode()">회원가입</a></li>
</c:otherwise>
</c:choose>
<li><a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=notice" onclick="setTopMenuCode()">고객센터</a></li>
<li><a href="/sopmal/mpage/ordr/selectMbrOrdrListInqire" onclick="setTopMenuCode()">주문/배송</a></li>
<c:if test="${sopmallInfo.shopInfo.sopmalCd eq 'NC' && sopmallInfo.shopInfo.sopmalCd eq 'CH'}"><%--뉴트리코어,참다한만--%>
<li><a href="/sopmal/main/selectStrListForm" onclick="setTopMenuCode()">매장안내</a>
</li>
</c:if>
</ul>
</div>
</div>
</div>
<div class="header__miscLink">
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
<c:if test="${topMenuList.ctgryDvCd eq '02'}">
<c:if test="${topMenuList.rnum eq '2'}">
<a href='<c:out value="${topMenuList.url}"/>' class="btn xsm outline" onclick="setTopMenuCode()"><c:out value ="${topMenuList.ctgryNm}"/></a>
</c:if>
</c:if>
</c:forEach>
</div>
<nav class="header-nav">
<div class="header-nav__inner">
<div class="full-menu__container">
<button class="header-nav__hamburger">
<img src="/pc/images/icon_nav-menu.png" alt="">
</button>
<div class="full-menu">
<ul class="full-menu__depth1">
<c:if test="${!empty sopmallInfo}">
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.menuExpsrAt eq 'Y'}">
<c:if test="${topMenuList.rnum eq '2'}">
<c:set var="gnbDpth3Chk" value="N"/>
<li>
<a href='<c:out value="${topMenuList.url}"/>' onclick="setTopMenuCode()"><c:out value ="${topMenuList.ctgryNm}"/></a>
</c:if>
<c:if test="${'3' eq topMenuList.rnum}">
<!-- 메뉴 하위가 메뉴인 경우-->
<c:if test="${chkFullUpperMenuCd ne topMenuList.upperCtgryId}">
<c:set var="gnbDpth3Chk" value="Y"/>
<ul class="full-menu__depth2">
</c:if>
<li><a href='<c:out value="${topMenuList.url}"/>' onclick="setTopMenuCode()"><c:out value ="${topMenuList.ctgryNm}"/></a></li>
</c:if>
<c:if test="${topMenuList.rnum < 4}">
<c:set var="chkFullUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
</c:if>
</c:if>
<c:if test="${topMenuList.ctgryDvCd eq '01'}">
<c:if test="${'3' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
<c:if test="${'Y' eq gnbDpth3Chk}">
</ul>
</c:if>
</li>
</c:if>
<c:if test="${'2' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
</li>
</c:if>
</c:if>
</c:forEach>
</c:if>
</ul>
</div>
</div>
<ul class="header-nav__list">
<c:if test="${!empty sopmallInfo}">
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.menuExpsrAt eq 'Y'}">
<c:if test="${topMenuList.rnum eq '2'}">
<c:set var="depth3Chk" value="N"/>
<li>
<a href="${topMenuList.url}" onclick="setTopMenuCode()"
<c:if test="${not empty topMenuList.menuChrColor}">
style="color:${topMenuList.menuChrColor};"
</c:if>>
<c:out value="${topMenuList.ctgryNm}"/>
</a>
</c:if>
<c:if test="${'3' eq topMenuList.rnum}">
<!-- 메뉴 하위가 메뉴인 경우-->
<c:if test="${chkUpperMenuCd ne topMenuList.upperCtgryId}">
<c:set var="depth3Chk" value="Y"/>
<div class="header-nav__depth2">
<ul>
</c:if>
<li>
<a href="${topMenuList.url}" 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 test="${topMenuList.rnum < 4}">
<c:set var="chkUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
</c:if>
</c:if>
<c:if test="${topMenuList.ctgryDvCd eq '01'}">
<c:if test="${'3' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
<c:if test="${'Y' eq depth3Chk}">
</ul>
</div>
</c:if>
</li>
</c:if>
<c:if test="${'2' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
</li>
</c:if>
</c:if>
</c:forEach>
</c:if>
</ul>
<div class="header-nav__btn-container">
<button type="button" onclick="setMypageCheck('/sopmal/ordr/selectSpbk')">
<span class="number-badge headerCartCnt">${ topBarInfo.cartCnt }</span>
<i class="icon icon_nav-cart"></i>
<span class="visually-hidden">장바구니</span>
</button>
<button type="button" onclick="setMypageCheck('/sopmal/mpage/mbr/selectMpageMainInqire')">
<i class="icon icon_nav-mypage"></i>
<span class="visually-hidden">마이페이지</span>
</button>
</div>
</div>
</nav>
</header>
</c:when>
<c:when test="${ topBarInfo.topbar.gnbTyCd eq '01' }">
<!-- 헤더 영역(Type3) -->
<header class="header" id="header_type02">
<!-- 상단 띠배너 -->
<!-- 상단 띠배너 사이즈 1280x50 -->
<!-- 배경색 없는 투명한 이미지 넣어야됨 -->
<c:if test="${ not empty topBarInfo.case15 }">
<div class="top-banner">
<div class="top-banner-slick">
<c:forEach items="${ topBarInfo.case15 }" var="case15" varStatus="status">
<div class="top-banner__image">
<a href="${ case15.itmeCnncUrl }">
<img src="${cdnurl}${ case15.filCours }/${ case15.sysFilNm }" alt="해당 이미지에 대한 설명">
</a>
</div>
</c:forEach>
</div>
<div class="top-banner__btn-container">
<button class="top-banner__close">
<i class="icon icon_top-banner-close"></i>
<span class="visually-hidden">닫기</span>
</button>
</div>
</div>
</c:if>
<div class="header__top">
<div class="header__left">
<h1 class="header__logo">
<a href="/">
<img src="${ cdnurl }${ topBarInfo.topbar.topFilCours }/${ topBarInfo.topbar.topSysFilNm }" alt="<c:out value="${sopmallInfo.shopInfo.sopmalNm}"/>">
</a>
</h1>
<div class="header-search-bar__wrapper">
<div class="header-search-bar">
<input type="search" readonly id="header-search-trigger" title="검색어 입력"
placeholder="검색어를 입력해주세요.">
<button>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_10974)">
<path
d="M23.2332 21.8602L17.5212 15.9194C18.9898 14.1735 19.7945 11.9768 19.7945 9.68999C19.7945 4.34701 15.4475 0 10.1045 0C4.76156 0 0.414551 4.34701 0.414551 9.68999C0.414551 15.033 4.76156 19.38 10.1045 19.38C12.1104 19.38 14.0218 18.775 15.6561 17.6265L21.4115 23.6124C21.6521 23.8622 21.9756 24 22.3224 24C22.6506 24 22.9619 23.8749 23.1982 23.6474C23.7004 23.1641 23.7165 22.3628 23.2332 21.8602ZM10.1045 2.52782C14.0538 2.52782 17.2667 5.74069 17.2667 9.68999C17.2667 13.6393 14.0538 16.8522 10.1045 16.8522C6.15524 16.8522 2.94237 13.6393 2.94237 9.68999C2.94237 5.74069 6.15524 2.52782 10.1045 2.52782Z" />
</g>
<defs>
<clipPath id="clip0_5_10974">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="header-search-pop">
<form id="search-form">
<div class="header-search-pop__header">
<input type="search" name="kwrd" autocomplete="off" title="검색어 입력" id="header-search-bar"
placeholder="검색어를 입력해주세요.">
<button type="button" class="header-search-pop__text-delete-btn">
<span class="visually-hidden">검색어 삭제</span>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16"
viewBox="0 0 24 24">
<path
d="M 4.9902344 3.9902344 A 1.0001 1.0001 0 0 0 4.2929688 5.7070312 L 10.585938 12 L 4.2929688 18.292969 A 1.0001 1.0001 0 1 0 5.7070312 19.707031 L 12 13.414062 L 18.292969 19.707031 A 1.0001 1.0001 0 1 0 19.707031 18.292969 L 13.414062 12 L 19.707031 5.7070312 A 1.0001 1.0001 0 0 0 18.980469 3.9902344 A 1.0001 1.0001 0 0 0 18.292969 4.2929688 L 12 10.585938 L 5.7070312 4.2929688 A 1.0001 1.0001 0 0 0 4.9902344 3.9902344 z">
</path>
</svg>
</button>
<button class="header-search-pop__search-btn">
<span class="visually-hidden">검색</span>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_10974)">
<path
d="M23.2332 21.8602L17.5212 15.9194C18.9898 14.1735 19.7945 11.9768 19.7945 9.68999C19.7945 4.34701 15.4475 0 10.1045 0C4.76156 0 0.414551 4.34701 0.414551 9.68999C0.414551 15.033 4.76156 19.38 10.1045 19.38C12.1104 19.38 14.0218 18.775 15.6561 17.6265L21.4115 23.6124C21.6521 23.8622 21.9756 24 22.3224 24C22.6506 24 22.9619 23.8749 23.1982 23.6474C23.7004 23.1641 23.7165 22.3628 23.2332 21.8602ZM10.1045 2.52782C14.0538 2.52782 17.2667 5.74069 17.2667 9.68999C17.2667 13.6393 14.0538 16.8522 10.1045 16.8522C6.15524 16.8522 2.94237 13.6393 2.94237 9.68999C2.94237 5.74069 6.15524 2.52782 10.1045 2.52782Z" />
</g>
<defs>
<clipPath id="clip0_5_10974">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
</form>
<div class="header-search-pop__body">
<section class="header-search-pop__recent-search">
<h3 class="header-search-pop__sub-title">최근 검색어</h3>
<div class="header-search-pop__recent-search-inner">
<ul class="header-search-pop__recent-search-list">
</ul>
</div>
<button type="button" class="header-search-pop__recent-search-deleteAll">전체삭제</button>
</section>
<section class="header-search-pop__trend">
<h3 class="header-search-pop__sub-title">인기 검색어</h3>
<div class="search-trend">
<ul>
<c:forEach var="popularSrchwrd" items="${ topBarInfo.popularSrchwrd }" varStatus="status">
<li>
<a href="javascript:void(0);" onclick="fn_search('${ popularSrchwrd.popularSrchwrd }'); return false;">
<%-- <a href="sopmal/goods/selectGoodsSrchForm?kwrd=${ popularSrchwrd.popularSrchwrd }"> --%>
<span class="search-trend__number">${ status.index+1}.</span>
<span class="search-trend__text">${ popularSrchwrd.popularSrchwrd }</span>
</a>
</li>
</c:forEach>
</ul>
</div>
</section>
</div>
<div class="header-search-pop__auto-complete">
<ul>
</ul>
</div>
<div class="header-search-pop__footer">
<button class="header-search-pop__close">
<span>닫기</span>
</button>
</div>
</div>
</div>
<div class="header-trend">
<div class="search-trend" id="search-trend">
<ul>
<c:forEach var="popularGoods" items="${ topBarInfo.popularGoods }" varStatus="status">
<li>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${popularGoods.goodsInnb});">
<span class="search-trend__number">${ status.index+1 }.</span>
<span class="search-trend__text">${ popularGoods.goodsNm }</span>
<c:choose>
<c:when test="${ popularGoods.popularChngDv eq '01' }">
<i class="icon icon_search-up"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '02' }">
<i class="icon icon_search-default"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '03' }">
<i class="icon icon_search-down"></i>
</c:when>
</c:choose>
</a>
</li>
</c:forEach>
</ul>
</div>
<button class="search-trend__drop-down-trigger"><span class="visually-hidden">실시간 인기 상품</span></button>
<section class="search-trend__drop-down">
<h3 class="search-trend__drop-down-title">실시간 인기 상품</h3>
<div class="search-trend">
<ul>
<c:forEach var="popularGoods" items="${ topBarInfo.popularGoods }" varStatus="status">
<li>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${popularGoods.goodsInnb});">
<span class="search-trend__number">${ status.index+1 }.</span>
<span class="search-trend__text">${ popularGoods.goodsNm }</span>
<c:choose>
<c:when test="${ popularGoods.popularChngDv eq '01' }">
<i class="icon icon_search-up"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '02' }">
<i class="icon icon_search-default"></i>
</c:when>
<c:when test="${ popularGoods.popularChngDv eq '03' }">
<i class="icon icon_search-down"></i>
</c:when>
</c:choose>
</a>
</li>
</c:forEach>
</ul>
</div>
</section>
</div>
</div>
<div class="header__right">
<div class="header-misc-link">
<ul>
<c:choose>
<c:when test="${isAuthenticated}">
<li><a href="/sopmal/logout">로그아웃</a></li>
</c:when>
<c:otherwise>
<li><a href="javascript:void(0)" onclick="fn_login()">로그인</a></li>
<li><a href="/sopmal/mbr/selectJoinGuidance" onclick="setTopMenuCode()">회원가입</a></li>
</c:otherwise>
</c:choose>
<li><a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=notice" onclick="setTopMenuCode()">고객센터</a></li>
<li><a href="/sopmal/mpage/ordr/selectMbrOrdrListInqire" onclick="setTopMenuCode()">주문/배송</a></li>
<c:if test="${sopmallInfo.shopInfo.sopmalCd eq 'NC' && sopmallInfo.shopInfo.sopmalCd eq 'CH'}"><%--뉴트리코어,참다한만--%>
<li><a href="/sopmal/main/selectStrListForm" onclick="setTopMenuCode()">매장안내</a>
</li>
</c:if>
</ul>
</div>
</div>
</div>
<nav class="header-nav">
<div class="header-nav__inner">
<div class="full-menu__container">
<button class="header-nav__hamburger">
<img src="/pc/images/icon_nav-menu.png" alt="">
</button>
<div class="full-menu">
<ul class="full-menu__depth1">
<c:if test="${!empty sopmallInfo}">
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.menuExpsrAt eq 'Y'}">
<c:if test="${topMenuList.rnum eq '2'}">
<c:set var="gnbDpth3Chk" value="N"/>
<li>
<a href='<c:out value="${topMenuList.url}"/>' onclick="setTopMenuCode()"><c:out value ="${topMenuList.ctgryNm}"/></a>
</c:if>
<c:if test="${'3' eq topMenuList.rnum}">
<!-- 메뉴 하위가 메뉴인 경우-->
<c:if test="${chkFullUpperMenuCd ne topMenuList.upperCtgryId}">
<c:set var="gnbDpth3Chk" value="Y"/>
<ul class="full-menu__depth2">
</c:if>
<li><a href='<c:out value="${topMenuList.url}"/>' onclick="setTopMenuCode()"><c:out value ="${topMenuList.ctgryNm}"/></a></li>
</c:if>
<c:if test="${topMenuList.rnum < 4}">
<c:set var="chkFullUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
</c:if>
</c:if>
<c:if test="${topMenuList.ctgryDvCd eq '01'}">
<c:if test="${'3' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
<c:if test="${'Y' eq gnbDpth3Chk}">
</ul>
</c:if>
</li>
</c:if>
<c:if test="${'2' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
</li>
</c:if>
</c:if>
</c:forEach>
</c:if>
</ul>
</div>
</div>
<ul class="header-nav__list">
<c:if test="${!empty sopmallInfo}">
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.menuExpsrAt eq 'Y'}">
<c:if test="${topMenuList.rnum eq '2'}">
<c:set var="depth3Chk" value="N"/>
<li>
<a href="${topMenuList.url}" onclick="setTopMenuCode()"
<c:if test="${not empty topMenuList.menuChrColor}">
style="color:${topMenuList.menuChrColor};"
</c:if>>
<c:out value="${topMenuList.ctgryNm}"/>
</a>
</c:if>
<c:if test="${'3' eq topMenuList.rnum}">
<!-- 메뉴 하위가 메뉴인 경우-->
<c:if test="${chkUpperMenuCd ne topMenuList.upperCtgryId}">
<c:set var="depth3Chk" value="Y"/>
<div class="header-nav__depth2">
<ul>
</c:if>
<li>
<a href="${topMenuList.url}" 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 test="${topMenuList.rnum < 4}">
<c:set var="chkUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
</c:if>
</c:if>
<c:if test="${topMenuList.ctgryDvCd eq '01'}">
<c:if test="${'3' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
<c:if test="${'Y' eq depth3Chk}">
</ul>
</div>
</c:if>
</li>
</c:if>
<c:if test="${'2' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
</li>
</c:if>
</c:if>
</c:forEach>
</c:if>
</ul>
<div class="header-nav__btn-container">
<button type="button" onclick="setMypageCheck('/sopmal/ordr/selectSpbk')">
<span class="number-badge headerCartCnt">${ topBarInfo.cartCnt }</span>
<i class="icon icon_nav-cart"></i>
<span class="visually-hidden">장바구니</span>
</button>
<button type="button" onclick="setMypageCheck('/sopmal/mpage/mbr/selectMpageMainInqire')">
<i class="icon icon_nav-mypage"></i>
<span class="visually-hidden">마이페이지</span>
</button>
</div>
</div>
</nav>
</header>
</c:when>
<c:when test="${ topBarInfo.topbar.gnbTyCd eq '02' }">
<!-- 헤더 영역(Type3) -->
<header class="header header--type04">
<input type="hidden" id="search-trend" />
<!-- 상단 띠배너 -->
<!-- 상단 띠배너 사이즈 1280x50 -->
<!-- 배경색 없는 투명한 이미지 넣어야됨 -->
<c:if test="${ not empty topBarInfo.case15 }">
<div class="top-banner">
<div class="top-banner-slick">
<c:forEach items="${ topBarInfo.case15 }" var="case15" varStatus="status">
<div class="top-banner__image">
<a href="${ case15.itmeCnncUrl }">
<img src="${cdnurl}${ case15.filCours }/${ case15.sysFilNm }" alt="해당 이미지에 대한 설명">
</a>
</div>
</c:forEach>
</div>
<div class="top-banner__btn-container">
<button class="top-banner__close">
<i class="icon icon_top-banner-close"></i>
<span class="visually-hidden">닫기</span>
</button>
</div>
</div>
</c:if>
<div class="header__top">
<div class="header__left">
<h1 class="header__logo">
<a href="/">
<img src="${ cdnurl }${ topBarInfo.topbar.topFilCours }/${ topBarInfo.topbar.topSysFilNm }" alt="<c:out value="${sopmallInfo.shopInfo.sopmalNm}"/>">
</a>
</h1>
<div class="header-search-bar__wrapper">
<div class="header-search-bar">
<input type="search" readonly id="header-search-trigger" title="검색어 입력"
placeholder="검색어를 입력해주세요.">
<button>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_10974)">
<path
d="M23.2332 21.8602L17.5212 15.9194C18.9898 14.1735 19.7945 11.9768 19.7945 9.68999C19.7945 4.34701 15.4475 0 10.1045 0C4.76156 0 0.414551 4.34701 0.414551 9.68999C0.414551 15.033 4.76156 19.38 10.1045 19.38C12.1104 19.38 14.0218 18.775 15.6561 17.6265L21.4115 23.6124C21.6521 23.8622 21.9756 24 22.3224 24C22.6506 24 22.9619 23.8749 23.1982 23.6474C23.7004 23.1641 23.7165 22.3628 23.2332 21.8602ZM10.1045 2.52782C14.0538 2.52782 17.2667 5.74069 17.2667 9.68999C17.2667 13.6393 14.0538 16.8522 10.1045 16.8522C6.15524 16.8522 2.94237 13.6393 2.94237 9.68999C2.94237 5.74069 6.15524 2.52782 10.1045 2.52782Z" />
</g>
<defs>
<clipPath id="clip0_5_10974">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="header-search-pop">
<form id="search-form">
<div class="header-search-pop__header">
<input type="search" name="kwrd" autocomplete="off" title="검색어 입력" id="header-search-bar"
placeholder="검색어를 입력해주세요.">
<button type="button" class="header-search-pop__text-delete-btn">
<span class="visually-hidden">검색어 삭제</span>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16"
viewBox="0 0 24 24">
<path
d="M 4.9902344 3.9902344 A 1.0001 1.0001 0 0 0 4.2929688 5.7070312 L 10.585938 12 L 4.2929688 18.292969 A 1.0001 1.0001 0 1 0 5.7070312 19.707031 L 12 13.414062 L 18.292969 19.707031 A 1.0001 1.0001 0 1 0 19.707031 18.292969 L 13.414062 12 L 19.707031 5.7070312 A 1.0001 1.0001 0 0 0 18.980469 3.9902344 A 1.0001 1.0001 0 0 0 18.292969 4.2929688 L 12 10.585938 L 5.7070312 4.2929688 A 1.0001 1.0001 0 0 0 4.9902344 3.9902344 z">
</path>
</svg>
</button>
<button class="header-search-pop__search-btn">
<span class="visually-hidden">검색</span>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_10974)">
<path
d="M23.2332 21.8602L17.5212 15.9194C18.9898 14.1735 19.7945 11.9768 19.7945 9.68999C19.7945 4.34701 15.4475 0 10.1045 0C4.76156 0 0.414551 4.34701 0.414551 9.68999C0.414551 15.033 4.76156 19.38 10.1045 19.38C12.1104 19.38 14.0218 18.775 15.6561 17.6265L21.4115 23.6124C21.6521 23.8622 21.9756 24 22.3224 24C22.6506 24 22.9619 23.8749 23.1982 23.6474C23.7004 23.1641 23.7165 22.3628 23.2332 21.8602ZM10.1045 2.52782C14.0538 2.52782 17.2667 5.74069 17.2667 9.68999C17.2667 13.6393 14.0538 16.8522 10.1045 16.8522C6.15524 16.8522 2.94237 13.6393 2.94237 9.68999C2.94237 5.74069 6.15524 2.52782 10.1045 2.52782Z" />
</g>
<defs>
<clipPath id="clip0_5_10974">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
</form>
<div class="header-search-pop__body">
<section class="header-search-pop__recent-search">
<h3 class="header-search-pop__sub-title">최근 검색어</h3>
<div class="header-search-pop__recent-search-inner">
<ul class="header-search-pop__recent-search-list">
</ul>
</div>
<button type="button" class="header-search-pop__recent-search-deleteAll">전체삭제</button>
</section>
<section class="header-search-pop__trend">
<h3 class="header-search-pop__sub-title">인기 검색어</h3>
<div class="search-trend">
<ul>
<c:forEach var="popularSrchwrd" items="${ topBarInfo.popularSrchwrd }" varStatus="status">
<li>
<a href="javascript:void(0);" onclick="fn_search('${ popularSrchwrd.popularSrchwrd }'); return false;">
<%-- <a href="sopmal/goods/selectGoodsSrchForm?kwrd=${ popularSrchwrd.popularSrchwrd }"> --%>
<span class="search-trend__number">${ status.index+1}.</span>
<span class="search-trend__text">${ popularSrchwrd.popularSrchwrd }</span>
</a>
</li>
</c:forEach>
</ul>
</div>
</section>
</div>
<div class="header-search-pop__auto-complete">
<ul>
</ul>
</div>
<div class="header-search-pop__footer">
<button class="header-search-pop__close">
<span>닫기</span>
</button>
</div>
</div>
</div>
</div>
<div class="header__right">
<div class="header-misc-link">
<ul>
<c:choose>
<c:when test="${isAuthenticated}">
<li><a href="/sopmal/logout">로그아웃</a></li>
</c:when>
<c:otherwise>
<li><a href="javascript:void(0)" onclick="fn_login()">로그인</a></li>
<li><a href="/sopmal/mbr/selectJoinGuidance" onclick="setTopMenuCode()">회원가입</a></li>
</c:otherwise>
</c:choose>
<li><a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=notice" onclick="setTopMenuCode()">고객센터</a></li>
<li><a href="/sopmal/mpage/ordr/selectMbrOrdrListInqire" onclick="setTopMenuCode()">주문/배송</a></li>
<c:if test="${sopmallInfo.shopInfo.sopmalCd eq 'NC' && sopmallInfo.shopInfo.sopmalCd eq 'CH'}"><%--뉴트리코어,참다한만--%>
<li><a href="/sopmal/main/selectStrListForm" onclick="setTopMenuCode()">매장안내</a>
</li>
</c:if>
<li><a href="/sopmal/mpage/mbr/selectMpageMainInqire" onclick="setTopMenuCode()">마이페이지</a></li>
<li><a href="/sopmal/ordr/selectSpbk" onclick="setTopMenuCode()">장바구니</a></li>
</ul>
</div>
</div>
</div>
<nav class="header-nav">
<div class="header-nav__inner">
<div class="full-menu__container">
<button class="header-nav__hamburger">
<img src="/pc/images/icon_nav-menu.png" alt="">
</button>
<div class="full-menu">
<ul class="full-menu__depth1">
<c:if test="${!empty sopmallInfo}">
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.menuExpsrAt eq 'Y'}">
<c:if test="${topMenuList.rnum eq '2'}">
<c:set var="gnbDpth3Chk" value="N"/>
<li>
<a href='<c:out value="${topMenuList.url}"/>' onclick="setTopMenuCode()"><c:out value ="${topMenuList.ctgryNm}"/></a>
</c:if>
<c:if test="${'3' eq topMenuList.rnum}">
<!-- 메뉴 하위가 메뉴인 경우-->
<c:if test="${chkFullUpperMenuCd ne topMenuList.upperCtgryId}">
<c:set var="gnbDpth3Chk" value="Y"/>
<ul class="full-menu__depth2">
</c:if>
<li><a href='<c:out value="${topMenuList.url}"/>' onclick="setTopMenuCode()"><c:out value ="${topMenuList.ctgryNm}"/></a></li>
</c:if>
<c:if test="${topMenuList.rnum < 4}">
<c:set var="chkFullUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
</c:if>
</c:if>
<c:if test="${topMenuList.ctgryDvCd eq '01'}">
<c:if test="${'3' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
<c:if test="${'Y' eq gnbDpth3Chk}">
</ul>
</c:if>
</li>
</c:if>
<c:if test="${'2' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
</li>
</c:if>
</c:if>
</c:forEach>
</c:if>
</ul>
</div>
</div>
<ul class="header-nav__list">
<c:if test="${!empty sopmallInfo}">
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.menuExpsrAt eq 'Y'}">
<c:if test="${topMenuList.rnum eq '2'}">
<c:set var="depth3Chk" value="N"/>
<li>
<a href="${topMenuList.url}" onclick="setTopMenuCode()"
<c:if test="${not empty topMenuList.menuChrColor}">
style="color:${topMenuList.menuChrColor};"
</c:if>>
<c:out value="${topMenuList.ctgryNm}"/>
</a>
</c:if>
<c:if test="${'3' eq topMenuList.rnum}">
<!-- 메뉴 하위가 메뉴인 경우-->
<c:if test="${chkUpperMenuCd ne topMenuList.upperCtgryId}">
<c:set var="depth3Chk" value="Y"/>
<div class="header-nav__depth2">
<ul>
</c:if>
<li>
<a href="${topMenuList.url}" 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 test="${topMenuList.rnum < 4}">
<c:set var="chkUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
</c:if>
</c:if>
<c:if test="${topMenuList.ctgryDvCd eq '01'}">
<c:if test="${'3' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
<c:if test="${'Y' eq depth3Chk}">
</ul>
</div>
</c:if>
</li>
</c:if>
<c:if test="${'2' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
</li>
</c:if>
</c:if>
</c:forEach>
</c:if>
</ul>
<div class="header-nav__btn-container">
</div>
</div>
</nav>
</header>
</c:when>
</c:choose>
<script>
$(document).ready(function () {
init_set();
loadRecentSearches();
});
function fn_login() {
setTopMenuCode();
fn_move_login();
}
function setTopMenuCode() {
document.cookie = "checkMenu=Y";
}
function setMypageCheck(url) {
document.cookie = "checkMenu=Y";
window.location.href = url;
}
function init_set() {
// 검색 url
$("#search-form").attr('action', "/sopmal/goods/selectGoodsSrchForm");
}
// 최근 검색어 로드
function loadRecentSearches() {
let searchList = $('.header-search-pop__recent-search-list');
let searches = JSON.parse(localStorage.getItem('recentSearches')) || [];
if(!Array.isArray(searches)) {
searches = [];
}
searchList.innerHTML = '';
let str = "";
let cnt = 0;
searches.forEach(function (search) {
str += '<li>' +
'<i class="icon icon_recent-search"></i>'+
'<a href="/sopmal/goods/selectGoodsSrchForm?kwrd='+search+'">'+search+'</a>'+
'<button class="header-search-pop__recent-search-delete" onclick="deleteSearch('+cnt+');">'+
'<span class="visually-hidden">검색어 삭제</span>'+
'</button>'+
'</li>';
cnt++;
});
searchList.html(str);
}
// 최근 검색어 저장
function saveSearch(param) {
let searches = JSON.parse(localStorage.getItem('recentSearches')) || [];
if (!Array.isArray(searches)) {
searches = [];
}
if (!searches.includes(param)) {
searches.push(param);
if (searches.length > 6) {
searches.shift(); // 6개를 초과하면 가장 오래된 검색어를 제거
}
localStorage.setItem('recentSearches', JSON.stringify(searches));
}
}
// 최근 검색어 삭제
function deleteSearch(key) {
console.log("key : "+key);
let searches = JSON.parse(localStorage.getItem('recentSearches')) || [];
if (!Array.isArray(searches)) {
searches = [];
}
console.log(searches);
searches.splice(key, 1); // 배열에서 특정 인덱스의 요소 삭제
localStorage.setItem('recentSearches', JSON.stringify(searches));
loadRecentSearches(); // 업데이트된 리스트 로드
}
// 최근 검색어 전체 삭제
function deleteSearchAll() {
localStorage.removeItem('recentSearches');
loadRecentSearches(); // 전체 삭제 후 리스트를 비움
}
// 최근 검색어 전체 삭제
$('.header-search-pop__recent-search-deleteAll').on('click', function() {
deleteSearchAll();
});
// 검색 버튼 클릭시
$('.header-search-pop__search-btn').on('click', function() {
let kwrd = $('input[name=kwrd]').val();
if(kwrd) {
saveSearch(kwrd);
}
});
// 검색어 자동 완성 기능
$('input[name=kwrd]').on('focusin keyup', function() {
let kwrd = $('input[name=kwrd]').val().trim();
setTimeout(function () {
$.ajax({
url : "/sopmal/goods/selectSrchGoodsNm",
type : "GET",
data : {
kwrd : kwrd,
sopmalCd : '${ sopmallInfo.shopInfo.sopmalCd }'
},
success : function(data) {
let result = JSON.parse(data.resBody.result);
autoComplete(result, kwrd);
}
});
}, 500);
});
const autoCompleteTag = $('.header-search-pop__auto-complete > ul');
// 검색어 자동 완성
function autoComplete(result, kwrd) {
let str = "";
let temp = "";
for(var i = 0; i < result.list.length; i++) {
temp = result.list[i].goodsNm.replace(kwrd, "<em>"+kwrd+"</em>");
// str += '<li>'+
// '<a href="/sopmal/goods/selectGoodsSrchForm?kwrd='+result.list[i].goodsNm+'">'+
// temp+
// '</a>'+
// '</li>';
str += '<li>'+
'<a href="javascript:void(0);" onclick="fn_search(\''+result.list[i].goodsNm+'\'); return false;">'+
temp+
'</a>'+
'</li>';
}
if(str == "") {
str = '<li><span style="display: block; font-size: 15px; padding: 6px 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">' +
'해당 단어로 시작하는 검색어가 없습니다.' +
'</span>' +
'</li>';
}
autoCompleteTag.html(str);
};
// 검색
function fn_search(kwrd) {
$('#header-search-bar').val(kwrd);
$('.header-search-pop__search-btn').click();
}
</script>