Files
sake/src/main/webapp/WEB-INF/views/mobileMain.jsp

2665 lines
132 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"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui"%>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld"%>
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
<!DOCTYPE html>
<html lang="ko">
<c:choose>
<c:when test = "${empty prevewVO.mainSiteInnb && prevewVO.evtPageAt ne 'Y'}">
<head>
<%-- 공통 include --%>
<jsp:include page="/WEB-INF/views/comm/mobile/Include.jsp"/>
</head>
<body>
<div class="screen-wrap">
<%-- 공통 Header --%>
<jsp:include page="/WEB-INF/views/comm/mobile/MainHeader.jsp"/>
<%-- 공통 하단 탭바 --%>
<jsp:include page="/WEB-INF/views/comm/mobile/TabBar.jsp"/>
<!-- 메인 컨텐츠 -->
<div class="content-wrap">
<main class="main">
<!-- 영역 리스트 -->
<c:forEach items="${ resultMap.relmList }" var="relmList" varStatus="status">
<!-- 인기 검색어 영역 -->
<c:if test="${ status.first and topBarInfo.topbar.gnbTyCd ne '02' }" >
<div class="header-trend__wrapper">
<span class="header-trend__title">
<i class="icon icon_search-trend"></i>
실시간 인기 상품
</span>
<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>
</div>
</div>
</c:if>
<!-- 메인 롤링 배너 -->
<!-- 이미지 사이즈 720x600 -->
<c:if test="${ relmList.relmDvCd eq '01'}">
<div class="main-section main-section__main-banner">
<div class="swiper main-banner" id="main-banner${ relmList.ordr }">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case01 }" var="case01" varStatus="status">
<c:if test="${ relmList.ordr eq case01.sOrdr }">
<div class="swiper-slide">
<a href="${ case01.itmeCnncUrl }">
<img src="${cdnurl}${ case01.filCours }/${ case01.sysFilNm }" alt="" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
</c:if>
</c:forEach>
</div>
<div class="main-banner__controls">
<div class="swiper-pagination" id="swiper-pagination${ relmList.ordr }"></div>
<button class="main-banner__controls__btn play" id="main-banner__controls__btn${ relmList.ordr }">
<span class="visually-hidden">배너 재생</span>
</button>
</div>
</div>
</div>
</c:if>
<!-- 상품 - 그룹별 타입 -->
<c:if test="${ relmList.relmDvCd eq '02'}">
<section class="main-section section-2">
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="product-tab">
<ul>
<!-- 그룹별 리스트 출력 -->
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
<li><button class="product-tab__btn product-tab__btn-${ relmList.ordr }" id="product-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }" onclick="fn_product_group_type('${ relmList.ordr }', '${baseCase.iOrdr}'); return false;">${ baseCase.goodsGroupNm }</button></li>
</c:if>
</c:forEach>
</ul>
</div>
<!-- 상품 리스트 출력 -->
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
<div class="product-list-type-1col product-list-type-1col_group product-list-type-1col_group-${ relmList.ordr }" id="product-list-type-1col_group-${ relmList.ordr }-${ baseCase.iOrdr }">
<div class="swiper product-list-type-1col__swiper">
<div class="swiper-wrapper">
<c:set var="cnt" value="0" />
<c:set var="openFlag" value="0" />
<c:set var="closeFlag" value="0" />
<c:forEach items="${ resultMap.case02 }" var="case02" varStatus="status">
<c:if test="${ relmList.ordr eq case02.sOrdr && baseCase.iOrdr eq case02.iOrdr }">
<c:set var="cnt" value="${ cnt + 1 }" />
<c:choose>
<c:when test="${ cnt == 1 || cnt % 4 == 1 }">
<c:set var="openFlag" value="1" />
</c:when>
<c:otherwise>
<c:set var="openFlag" value="2" />
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${ cnt % 4 == 0 }">
<c:set var="closeFlag" value="1" />
</c:when>
<c:otherwise>
<c:set var="closeFlag" value="2" />
</c:otherwise>
</c:choose>
<c:if test="${ openFlag == 1 }">
<div class="swiper-slide">
<div class="product-list-type-1col__list">
</c:if>
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case02.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>입고 대기중</span>
</div>
</c:when>
<c:when test="${case02.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case02.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<i class="icon icon_product-image-badge01"></i>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">
<img src="${cdnurl}${ case02.goodsImgCours }" alt="${case02.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case02.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case02.iconExpsrOrdr-1}" style="order:${case02.iconExpsrOrdr-1}">
<c:if test="${not empty case02.goodsIconCd}">
<c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case02.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case02.goodsNmExpsrOrdr-1}" style="order:${case02.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">${ case02.goodsNm }</a>
</div>
</c:if>
<c:if test="${case02.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case02.pricExpsrOrdr-1}" style="order:${case02.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original <c:if test="${case02.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case02.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case02.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale <c:if test="${case02.slePercent eq 0}">visually-hidden</c:if>">
<span class="percent"><c:out value="${case02.slePercent}"/>%</span>
</div>
</div>
</c:if>
<c:if test="${case02.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case02.reprsntDcExpsrOrdr-1}" style="order:${case02.reprsntDcExpsrOrdr-1}">
<c:out value="${case02.reprsntDc}"/>
</div>
</c:if>
<c:if test="${case02.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case02.rvwEvlScreExpsrOrdr-1}" style="order:${case02.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case02.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case02.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case02.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case02.dlvyExpsrOrdr-1}" style="order:${case02.dlvyExpsrOrdr-1}">
<c:out value="${case02.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
<c:if test="${ closeFlag == 1 }">
</div>
</div>
</c:if>
</c:if>
</c:forEach>
<c:if test="${ closeFlag == 2 }">
</div>
</div>
</c:if>
</div>
<div class="swiper-pagination theme-pagination"></div>
</div>
</div>
</c:if>
</c:forEach>
</section>
</c:if>
<!-- 상품 - 카테고리별 타입 -->
<c:if test="${ relmList.relmDvCd eq '03'}">
<section class="main-section main-section__category-type section-3">
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
<div class="swiper category-type-tab">
<ul class="swiper-wrapper category-type-tab__list">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
<li class="swiper-slide">
<button class="category-type-tab__btn category-type-tab__btn-${ relmList.ordr }" id="category-type-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }" onclick="fn_product_category_type('${ relmList.ordr }', '${ baseCase.iOrdr }'); return false;">
<c:if test = "${not empty baseCase.sysFilNm}">
<i class="icon icon_category-type-tab01">
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</i>
</c:if>
<span class="category-type-tab__name">${ baseCase.ctgryNm }</span>
</button>
</li>
</c:if>
</c:forEach>
</ul>
</div>
</div>
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
<div class="product-list-type-1col product-list-type-1col_category product-list-type-1col_category-${ relmList.ordr }" id="product-list-type-1col_category-${ relmList.ordr }-${ baseCase.iOrdr }">
<%-- <div class="swiper product-list-type-1col__swiper" id="product-list-type-1col__swiper-category-${ baseCase.iOrdr }"> --%>
<!-- <div class="swiper-wrapper"> -->
<!-- </div> -->
<!-- <div class="swiper-pagination theme-pagination"></div> -->
<!-- </div> -->
</div>
</c:if>
</c:forEach>
</section>
</c:if>
<!-- 상품 - 이미지 배너 타입 -->
<c:if test="${ relmList.relmDvCd eq '04'}">
<section class="main-section main-section__product-banner">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="product-banner">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '04' && relmList.ordr eq baseCase.sOrdr }">
<a href="${ baseCase.itmeCnncUrl }">
<div class="product-banner__image">
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" style="height: 310px;" alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
</div>
</a>
</c:if>
</c:forEach>
</div>
<div class="product-list-vertical-twoAndaHalf">
<div class="swiper product-list-vertical-twoAndaHalf__swiper">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case04 }" var="case04" varStatus="status" >
<c:if test="${ relmList.ordr eq case04.sOrdr }">
<div class="swiper-slide">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case04.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>입고 대기중</span>
</div>
</c:when>
<c:when test="${case04.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case04.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case04.goodsInnb});">
<img src="${cdnurl}${ case04.goodsImgCours }" alt="${case04.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case04.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case04.iconExpsrOrdr-1}" style="order:${case04.iconExpsrOrdr-1}">
<c:if test="${not empty case04.goodsIconCd}">
<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case04.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case04.goodsNmExpsrOrdr-1}" style="order:${case04.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case04.goodsInnb});">${ case04.goodsNm }</a>
</div>
</c:if>
<c:if test="${case04.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case04.pricExpsrOrdr-1}" style="order:${case04.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original <c:if test="${case04.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case04.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case04.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale <c:if test="${case04.slePercent eq 0}">visually-hidden</c:if>">
<span class="percent">${ case04.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case04.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case04.reprsntDcExpsrOrdr-1}" style="order:${case04.reprsntDcExpsrOrdr-1}">
${case04.reprsntDc}
</div>
</c:if>
<c:if test="${case04.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case04.rvwEvlScreExpsrOrdr-1}" style="order:${case04.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case04.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case04.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case04.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case04.dlvyExpsrOrdr-1}" style="order:${case04.dlvyExpsrOrdr-1}">
<c:out value="${case04.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</section>
</c:if>
<!-- url 기획전 -->
<c:if test="${ relmList.relmDvCd eq '05'}">
<section class="main-section main-section__product-banner">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="product-banner">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '05' && relmList.ordr eq baseCase.sOrdr }">
<a href="${ baseCase.itmeCnncUrl }">
<div class="product-banner__image">
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
</div>
<div class="product-banner__description">
<h4 class="product-banner__description-title">${ baseCase.itemMainDc }</h4>
<c:if test = "${not empty baseCase.itemSubDc}">
<span class="product-banner__description-subtitle">${ baseCase.itemSubDc }
<i class="icon icon_product-banner-arrow"></i>
</span>
</c:if>
</div>
</a>
</c:if>
</c:forEach>
</div>
<div class="product-list-type-1col">
<div class="swiper product-list-type-1col__swiper">
<div class="swiper-wrapper">
<c:set var="cnt" value="0" />
<c:set var="openFlag" value="0" />
<c:set var="closeFlag" value="0" />
<c:forEach items="${ resultMap.case05 }" var="case05" varStatus="status" >
<c:if test="${ relmList.ordr eq case05.sOrdr }">
<c:set var="cnt" value="${ cnt + 1 }" />
<c:choose>
<c:when test="${ cnt == 1 || cnt % 4 == 1 }">
<c:set var="openFlag" value="1" />
</c:when>
<c:otherwise>
<c:set var="openFlag" value="2" />
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${ cnt % 4 == 0 }">
<c:set var="closeFlag" value="1" />
</c:when>
<c:otherwise>
<c:set var="closeFlag" value="2" />
</c:otherwise>
</c:choose>
<c:if test="${ openFlag == 1 }">
<div class="swiper-slide">
<div class="product-list-type-1col__list">
</c:if>
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case05.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>입고 대기중</span>
</div>
</c:when>
<c:when test="${case05.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case05.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<i class="icon icon_product-image-badge01"></i>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">
<img src="${cdnurl}${ case05.goodsImgCours }" alt="${case05.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case05.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case05.iconExpsrOrdr-1}" style="order:${case05.iconExpsrOrdr-1}">
<c:if test="${not empty case05.goodsIconCd}">
<c:forEach items="${fn:split(case05.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case05.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case05.goodsNmExpsrOrdr-1}" style="order:${case05.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">${ case05.goodsNm }</a>
</div>
</c:if>
<c:if test="${case05.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case05.pricExpsrOrdr-1}" style="order:${case05.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original <c:if test="${case05.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case05.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case05.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale <c:if test="${case05.slePercent eq 0}">visually-hidden</c:if>">
<span class="percent"><c:out value="${case05.slePercent}"/>%</span>
</div>
</div>
</c:if>
<c:if test="${case05.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case05.reprsntDcExpsrOrdr-1}" style="order:${case05.reprsntDcExpsrOrdr-1}">
<c:out value="${case05.reprsntDc}"/>
</div>
</c:if>
<c:if test="${case05.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case05.rvwEvlScreExpsrOrdr-1}" style="order:${case05.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case05.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case05.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case05.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case05.dlvyExpsrOrdr-1}" style="order:${case05.dlvyExpsrOrdr-1}">
<c:out value="${case05.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
<c:if test="${ closeFlag == 1 }">
</div>
</div>
</c:if>
</c:if>
</c:forEach>
<c:if test="${ closeFlag == 2 }">
</div>
</div>
</c:if>
</div>
<div class="swiper-pagination theme-pagination"></div>
</div>
</div>
</section>
</c:if>
<!-- 상품 - 4열 슬라이드 타입 -->
<c:if test="${ relmList.relmDvCd eq '07'}">
<section class="main-section main-section__time-sale no-bg">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '07' && relmList.ordr eq baseCase.sOrdr }">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ baseCase.subSj }</span>
<h2 class="main-section-title__title">
${ baseCase.mainSj }
</h2>
</div>
</div>
</c:if>
</c:forEach>
<div class="product-list-vertical-twoAndaHalf">
<div class="swiper product-list-vertical-twoAndaHalf__swiper">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case07 }" var="case07" varStatus="status">
<c:if test="${ relmList.ordr eq case07.sOrdr }">
<div class="swiper-slide">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case07.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>입고 대기중</span>
</div>
</c:when>
<c:when test="${case07.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case07.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">
<img src="${cdnurl}${ case07.goodsImgCours }" alt="${ case07.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case07.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case07.iconExpsrOrdr-1}" style="order:${case07.iconExpsrOrdr-1}">
<c:if test="${not empty case07.goodsIconCd}">
<c:forEach items="${fn:split(case07.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case07.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case07.goodsNmExpsrOrdr-1}" style="order:${case07.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">${ case07.goodsNm }</a>
</div>
</c:if>
<c:if test="${case07.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case07.pricExpsrOrdr-1}" style="order:${case07.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original <c:if test="${case07.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case07.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case07.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale <c:if test="${case07.slePercent eq 0}">visually-hidden</c:if>">
<span class="percent">${ case07.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case07.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case07.reprsntDcExpsrOrdr-1}" style="order:${case07.reprsntDcExpsrOrdr-1}">
${case07.reprsntDc}
</div>
</c:if>
<c:if test="${case07.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case07.rvwEvlScreExpsrOrdr-1}" style="order:${case07.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case07.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case07.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case07.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case07.dlvyExpsrOrdr-1}" style="order:${case07.dlvyExpsrOrdr-1}">
<c:out value="${case07.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</section>
</c:if>
<!-- 타임세일 -->
<!-- 타임세일 (배경 이미지 X, "no-bg" 클래스 추가, 상품 1.5열 슬라이드) -->
<c:if test="${ relmList.relmDvCd eq '08'}">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '08' && relmList.ordr eq baseCase.sOrdr }">
<c:choose>
<c:when test="${ empty baseCase.filCours}">
<section class="main-section main-section__time-sale no-bg">
</c:when>
<c:otherwise>
<section class="main-section main-section__time-sale" style="background-image: url('${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }');" >
</c:otherwise>
</c:choose>
</c:if>
</c:forEach>
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">얼마 남지 않았어요!</span>
<h2 class="main-section-title__title">
타임세일⏰
</h2>
</div>
</div>
<div class="product-list-vertical-oneAndaHalf">
<div class="swiper product-list-vertical-oneAndaHalf__swiper">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case08 }" var="case08" varStatus="status">
<c:if test="${ relmList.ordr eq case08.sOrdr }">
<div class="swiper-slide">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case08.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>입고 대기중</span>
</div>
</c:when>
<c:when test="${case08.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case08.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<c:if test="${(case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N') or (case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0) }">
<div class="time-sale__top">
<c:if test="${case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N'}">
<span class="time" name="remainTime">${case08.remainTime}</span>
<%-- <span class="time" name="tmeSetup">${case08.tmeSetup}</span> --%>
<%-- <input type="hidden" name="tmeSetupValue" value="${ case08.tmeSetup }" /> --%>
</c:if>
<c:if test="${case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0 }">
<span class="left">남은수량 ${ case08.remainQy }개</span>
</c:if>
</div>
</c:if>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">
<img src="${cdnurl}${ case08.goodsImgCours }" alt="${ case08.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case08.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case08.iconExpsrOrdr-1}" style="order:${case08.iconExpsrOrdr-1}">
<c:if test="${not empty case08.goodsIconCd}">
<c:forEach items="${fn:split(case08.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case08.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case08.goodsNmExpsrOrdr-1}" style="order:${case08.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">${ case08.goodsNm }</a>
</div>
</c:if>
<c:if test="${case08.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case08.pricExpsrOrdr-1}" style="order:${case08.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original <c:if test="${case08.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case08.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case08.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale <c:if test="${case08.slePercent eq 0}">visually-hidden</c:if>">
<span class="percent">${ case08.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case08.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case08.reprsntDcExpsrOrdr-1}" style="order:${case08.reprsntDcExpsrOrdr-1}">
${case08.reprsntDc}
</div>
</c:if>
<c:if test="${case08.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case08.rvwEvlScreExpsrOrdr-1}" style="order:${case08.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case08.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case08.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case08.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case08.dlvyExpsrOrdr-1}" style="order:${case08.dlvyExpsrOrdr-1}">
<c:out value="${case08.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</section>
</c:if>
<!-- 베스트 리뷰 -->
<c:if test="${ relmList.relmDvCd eq '09'}">
<section class="main-section main-section__best-review">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '09' && relmList.ordr eq baseCase.sOrdr }">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ baseCase.subSj }</span>
<h2 class="main-section-title__title">
${ baseCase.mainSj }
</h2>
</div>
</div>
</c:if>
</c:forEach>
<div class="product-list-vertical-oneAndaHalf">
<div class="swiper product-list-vertical-oneAndaHalf__swiper">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case09 }" var="case09" varStatus="status">
<c:if test="${ relmList.ordr eq case09.sOrdr }">
<div class="swiper-slide" >
<div class="best-review__item">
<div class="best-review__review" >
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case09.goodsInnb});" class="best-review__review_a">
<div class="best-review__review-image" >
<input type="hidden" class="npayBbscttSnb" value="${ case09.npayBbscttSnb }"/>
<c:choose>
<c:when test="${ case09.photoRvwAt eq 'Y' }">
<img src="${cdnurl}${ case09.reviwImg }" class="reviwImg" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
</c:when>
<c:when test="${ case09.photoRvwAt eq 'N' }">
<img src="${cdnurl}${ case09.goodsImgCours }" class="reviwImg" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
</c:when>
</c:choose>
</div>
<span class="best-review__title">
${ case09.sj }
</span>
<div class="best-review__paragraph">
${ case09.cn }
</div>
</a>
</div>
<div class="best-review__product">
<div class="best-review__product-image">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case09.goodsInnb});">
<img src="${cdnurl}${ case09.goodsImgCours }" alt="${case09.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner">
<div class="product-unit-title">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case09.goodsInnb});">${ case09.goodsNm }</a>
</div>
</div>
<div class="product-unit-misc">
<div class="product-unit-rating">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case09.avgEvlScore}" default="0.0"/></span>
</div>
<div class="product-unit-price">
<span class="product-unit-price__original <c:if test="${case09.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case09.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case09.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</section>
</c:if>
<!-- 매거진 -->
<c:if test="${ relmList.relmDvCd eq '10'}">
<!-- 매거진 -->
<!-- 이미지 사이즈 350x250 -->
<section class="main-section main-section__magazine">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="magazine">
<div class="swiper magazine__swiper">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case10 }" var="case10" varStatus="status">
<c:if test="${ relmList.ordr eq case10.sOrdr }">
<div class="swiper-slide">
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=detail&bbsId=${ case10.bbsId }&bbscttInnb=${ case10.bbscttInnb }">
<img src="${cdnurl}${ case10.reprsntImgSysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
</c:if>
</c:forEach>
</div>
</div>
<div class="magazine__link">
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=subPage&bbsId=magazine" class="magazine__more-link">매거진 더보기</a>
</div>
</div>
</section>
</c:if>
<!-- 브랜드 소개 -->
<c:if test="${ relmList.relmDvCd eq '11'}">
<!-- 브랜드 및 제품 바로가기 -->
<!-- 이미지 가로 사이즈 720px -->
<section class="main-section main-section__brand-link">
<div class="brand-link">
<c:forEach items="${ resultMap.case11 }" var="case11" varStatus="status">
<c:if test="${ relmList.ordr eq case11.sOrdr }">
<div class="brand-link__image">
<a href="${ case11.itmeCnncUrl }">
<c:choose>
<c:when test="${ status.index == '0' }">
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'"loading="lazy">
</c:when>
<c:otherwise>
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'"loading="lazy">
</c:otherwise>
</c:choose>
</a>
</div>
</c:if>
</c:forEach>
</div>
</section>
</c:if>
<!-- 띠배너 -->
<c:if test="${ relmList.relmDvCd eq '12'}">
<!-- 중간 띠 배너 -->
<!-- 이미지 가로 사이즈 720px -->
<section class="main-section main-section__small-banner">
<div class="small-banner">
<div class="small-banner__swiper">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case12 }" var="case12" varStatus="status">
<c:if test="${ relmList.ordr eq case12.sOrdr }">
<div class="swiper-slide">
<a href="${ case12.itmeCnncUrl }">
<img src="${cdnurl}${ case12.filCours }/${ case12.sysFilNm }" alt="배너 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
</a>
</div>
</c:if>
</c:forEach>
</div>
<div class="swiper-pagination theme-pagination"></div>
</div>
</div>
</section>
</c:if>
<!-- 공지사항 -->
<c:if test="${ relmList.relmDvCd eq '13'}">
<section class="main-section main-section__notice">
<div class="mainNotice__wrapper">
<div class="mainNotice">
<h2 class="mainNotice__title">공지사항</h2>
<ul class="mainNotice__list">
<c:forEach items="${ resultMap.case13 }" var="case13" varStatus="status">
<c:if test="${ relmList.ordr eq case13.sOrdr }">
<li>
<a href="/sopmal/csc/selectBbscttAuth?authDv=CM&reqUrl=csc&bbsId=${ case13.bbsId }&bbscttInnb=${ case13.bbscttInnb }">
<i class="icon icon_notice-speaker"></i>
<span>${ case13.sj }</span>
</a>
</li>
</c:if>
</c:forEach>
</ul>
<div class="mainNotice__link">
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=notice">더보기</a>
</div>
</div>
</div>
</section>
</c:if>
<!-- FAQ -->
<c:if test="${ relmList.relmDvCd eq '14'}">
<section class="main-section main-section__notice">
<div class="mainNotice__wrapper">
<div class="mainNotice__customerLink">
<c:forEach items="${ resultMap.case14 }" var="case14" varStatus="status">
<c:if test="${ relmList.ordr eq case14.sOrdr }">
<c:if test="${ case14.iOrdr eq '1' }">
<a class="mainNotice__customerLink__link" href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=faq">${ case14.itemMainSj }</a>
</c:if>
<c:if test="${ case14.iOrdr eq '2' }">
<a class="mainNotice__customerLink__link primary" href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=useGuidance&bbsId=use_guidance">${ case14.itemMainSj }</a>
</c:if>
</c:if>
</c:forEach>
</div>
<div class="mainNotice__customerContact">
<c:forEach items="${ resultMap.case14 }" var="case14" varStatus="status">
<c:if test="${ relmList.ordr eq case14.sOrdr }">
<c:if test="${ case14.iOrdr eq '3' }">
<i class="icon icon_notice03"></i>
<div class="mainNotice__customerContact__right">
<h4 class="notice__title customer-service">${ case14.itemMainSj }</h4>
<span class="notice__number">${ case14.cscTelnb }</span>
<p class="notice__paragraph">
<span class="notice__text01">${ case14.cscWkdayWorkTme }</span>
<span class="notice__text02">(${ case14.cscLunchTme })</span>
<br>
<span class="notice__text03">${ case14.cscRstde }</span>
</p>
</div>
</c:if>
</c:if>
</c:forEach>
</div>
</div>
</section>
</c:if>
</c:forEach>
<!-- Top 버튼 -->
<div class="quick-menu__to-top">
<button><i class="icon icon_quick-to-top"></i>
<span class="visually-hidden">위로 가기</span>
</button>
</div>
</main>
<!-- 푸터 -->
<jsp:include page="/WEB-INF/views/comm/mobile/Footer.jsp"/>
</body>
<!-- 모달 -->
<!-- 메인 팝업-->
<c:if test="${ !empty resultMap.popup }">
<c:forEach items="${ resultMap.popup }" var="popup" varStatus="status">
<div class="main-popup" id="main-popup-${ popup.popupInnb }"
style="top:${ popup.mblPopupLcY }px; left:${ popup.mblPopupLcX }px; z-index: ${ status.index +10 };">
<div class="main-popup-content"
style=" width:${ popup.mblPopupMgWth }px; height:${ popup.mblPopupMgVtc }px;">
<a href="${ popup.cnncUrl }">
<img src="${cdnurl}${ popup.filCours }/${ popup.sysFilNm }"
onerror="this.src='/pc/images/image_placeholder.png'">
</a>
<c:if test="${ popup.tmeSetupAt eq 'Y' }">
<div class="main-popup-time">
<input type="hidden" name="tmeSetupValue" value="${ popup.tmeSetup }" />
<span name="tmeSetup">${ popup.tmeSetup }</span>
</div>
</c:if>
</div>
<div class="main-popup-footer">
<label class="b-checkbox checkbox is-small">
<input type="checkbox" name="checked" value="false">
<span class="check"></span>
<span class="control-label">오늘 하루 팝업 창 닫기</span>
</label>
<a href="javascript:void(0);" class="main-popup-btn" onclick="closePopup(this)">닫기</a>
</div>
</div>
</c:forEach>
</c:if>
</c:when>
<c:otherwise>
<!-- 영역 리스트 -->
<c:forEach items="${ resultMap.relmList }" var="relmList" varStatus="status">
<!-- 메인 롤링 배너 -->
<!-- 이미지 사이즈 720x600 -->
<c:if test="${ relmList.relmDvCd eq '01'}">
<div class="main-section main-section__main-banner">
<div class="swiper main-banner" id="main-banner${ relmList.ordr }">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case01 }" var="case01" varStatus="status">
<c:if test="${ relmList.ordr eq case01.sOrdr }">
<div class="swiper-slide">
<a href="${ case01.itmeCnncUrl }">
<img src="${cdnurl}${ case01.filCours }/${ case01.sysFilNm }" alt=""
onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
</c:if>
</c:forEach>
</div>
<div class="main-banner__controls">
<div class="swiper-pagination" id="swiper-pagination${ relmList.ordr }"></div>
<button class="main-banner__controls__btn play"
id="main-banner__controls__btn${ relmList.ordr }">
<span class="visually-hidden">배너 재생</span>
</button>
</div>
</div>
</div>
</c:if>
<!-- 상품 - 그룹별 타입 -->
<c:if test="${ relmList.relmDvCd eq '02'}">
<section class="main-section section-2">
<input type="hidden" name="section-ordr" value="${ relmList.ordr }"/>
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="product-tab">
<ul>
<!-- 그룹별 리스트 출력 -->
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
<li>
<button class="product-tab__btn product-tab__btn-${ relmList.ordr }"
id="product-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }"
onclick="fn_product_group_type('${ relmList.ordr }', '${baseCase.iOrdr}'); return false;">${ baseCase.goodsGroupNm }</button>
</li>
</c:if>
</c:forEach>
</ul>
</div>
<!-- 상품 리스트 출력 -->
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
<div class="product-list-type-1col product-list-type-1col_group product-list-type-1col_group-${ relmList.ordr }" id="product-list-type-1col_group-${ relmList.ordr }-${ baseCase.iOrdr }">
<div class="swiper product-list-type-1col__swiper">
<div class="swiper-wrapper">
<c:set var="cnt" value="0" />
<c:set var="openFlag" value="0" />
<c:set var="closeFlag" value="0" />
<c:forEach items="${ resultMap.case02 }" var="case02" varStatus="status">
<c:if test="${ relmList.ordr eq case02.sOrdr && baseCase.iOrdr eq case02.iOrdr }">
<c:set var="cnt" value="${ cnt + 1 }" />
<c:choose>
<c:when test="${ cnt == 1 || cnt % 4 == 1 }">
<c:set var="openFlag" value="1" />
</c:when>
<c:otherwise>
<c:set var="openFlag" value="2" />
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${ cnt % 4 == 0 }">
<c:set var="closeFlag" value="1" />
</c:when>
<c:otherwise>
<c:set var="closeFlag" value="2" />
</c:otherwise>
</c:choose>
<c:if test="${ openFlag == 1 }">
<div class="swiper-slide">
<div class="product-list-type-1col__list">
</c:if>
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case02.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>입고 대기중</span>
</div>
</c:when>
<c:when test="${case02.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case02.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<i class="icon icon_product-image-badge01"></i>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">
<img src="${cdnurl}${ case02.goodsImgCours }" alt="${case02.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case02.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case02.iconExpsrOrdr-1}" style="order:${case02.iconExpsrOrdr-1}">
<c:if test="${not empty case02.goodsIconCd}">
<c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case02.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case02.goodsNmExpsrOrdr-1}" style="order:${case02.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">${ case02.goodsNm }</a>
</div>
</c:if>
<c:if test="${case02.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case02.pricExpsrOrdr-1}" style="order:${case02.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original <c:if test="${case02.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case02.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case02.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale <c:if test="${case02.slePercent eq 0}">visually-hidden</c:if>">
<span class="percent"><c:out value="${case02.slePercent}"/>%</span>
</div>
</div>
</c:if>
<c:if test="${case02.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case02.reprsntDcExpsrOrdr-1}" style="order:${case02.reprsntDcExpsrOrdr-1}">
<c:out value="${case02.reprsntDc}"/>
</div>
</c:if>
<c:if test="${case02.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case02.rvwEvlScreExpsrOrdr-1}" style="order:${case02.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case02.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case02.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case02.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case02.dlvyExpsrOrdr-1}" style="order:${case02.dlvyExpsrOrdr-1}">
<c:out value="${case02.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
<c:if test="${ closeFlag == 1 }">
</div>
</div>
</c:if>
</c:if>
</c:forEach>
<c:if test="${ closeFlag == 2 }">
</div>
</div>
</c:if>
</div>
<div class="swiper-pagination theme-pagination"></div>
</div>
</div>
</c:if>
</c:forEach>
</section>
</c:if>
<!-- 상품 - 카테고리별 타입 -->
<c:if test="${ relmList.relmDvCd eq '03'}">
<section class="main-section main-section__category-type section-3">
<input type="hidden" name="section-ordr" value="${ relmList.ordr }"/>
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
<div class="swiper category-type-tab">
<ul class="swiper-wrapper category-type-tab__list">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
<li class="swiper-slide">
<button class="category-type-tab__btn category-type-tab__btn-${ relmList.ordr }"
id="category-type-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }"
onclick="fn_product_category_type('${ relmList.ordr }', '${ baseCase.iOrdr }'); return false;">
<c:if test="${not empty baseCase.sysFilNm}">
<i class="icon icon_category-type-tab01">
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }"
onerror="this.src='/pc/images/image_placeholder.png'">
</i>
</c:if>
<span class="category-type-tab__name">${ baseCase.ctgryNm }</span>
</button>
</li>
</c:if>
</c:forEach>
</ul>
</div>
</div>
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
<div class="product-list-type-1col product-list-type-1col_category product-list-type-1col_category-${ relmList.ordr }"
id="product-list-type-1col_category-${ relmList.ordr }-${ baseCase.iOrdr }">
<%-- <div class="swiper product-list-type-1col__swiper" id="product-list-type-1col__swiper-category-${ baseCase.iOrdr }"> --%>
<!-- <div class="swiper-wrapper"> -->
<!-- </div> -->
<!-- <div class="swiper-pagination theme-pagination"></div> -->
<!-- </div> -->
</div>
</c:if>
</c:forEach>
</section>
</c:if>
<!-- 상품 - 이미지 배너 타입 -->
<c:if test="${ relmList.relmDvCd eq '04'}">
<section class="main-section main-section__product-banner">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="product-banner">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd eq '04' && relmList.ordr eq baseCase.sOrdr }">
<a href="${ baseCase.itmeCnncUrl }">
<div class="product-banner__image">
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" style="height: 310px;"
alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
</div>
</a>
</c:if>
</c:forEach>
</div>
<div class="product-list-vertical-twoAndaHalf">
<div class="swiper product-list-vertical-twoAndaHalf__swiper">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case04 }" var="case04" varStatus="status">
<c:if test="${ relmList.ordr eq case04.sOrdr }">
<div class="swiper-slide">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case04.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>입고 대기중</span>
</div>
</c:when>
<c:when test="${case04.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case04.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case04.goodsInnb});">
<img src="${cdnurl}${ case04.goodsImgCours }" alt="${case04.goodsNm }"
onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column"
style="flex-direction:column">
<c:if test="${case04.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case04.iconExpsrOrdr-1}"
style="order:${case04.iconExpsrOrdr-1}">
<c:if test="${not empty case04.goodsIconCd}">
<c:forEach items="${fn:split(case04.goodsIconCd, ',')}"
var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case04.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case04.goodsNmExpsrOrdr-1}"
style="order:${case04.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);"
onclick="fn_move_goods_dtl(${case04.goodsInnb});">${ case04.goodsNm }</a>
</div>
</c:if>
<c:if test="${case04.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case04.pricExpsrOrdr-1}"
style="order:${case04.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original <c:if test="${case04.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber
value="${case04.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber
value="${case04.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale <c:if test="${case04.slePercent eq 0}">visually-hidden</c:if>">
<span class="percent">${ case04.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case04.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case04.reprsntDcExpsrOrdr-1}"
style="order:${case04.reprsntDcExpsrOrdr-1}">
${case04.reprsntDc}
</div>
</c:if>
<c:if test="${case04.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case04.rvwEvlScreExpsrOrdr-1}"
style="order:${case04.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out
value="${case04.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber
value="${case04.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case04.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case04.dlvyExpsrOrdr-1}"
style="order:${case04.dlvyExpsrOrdr-1}">
<c:out value="${case04.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</section>
</c:if>
<!-- url 기획전 -->
<c:if test="${ relmList.relmDvCd eq '05'}">
<section class="main-section main-section__product-banner">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="product-banner">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd eq '05' && relmList.ordr eq baseCase.sOrdr }">
<a href="${ baseCase.itmeCnncUrl }">
<div class="product-banner__image">
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" alt="기획전 이미지 내용 입력"
onerror="this.src='/pc/images/image_placeholder.png'">
</div>
<div class="product-banner__description">
<h4 class="product-banner__description-title">${ baseCase.itemMainDc }</h4>
<c:if test="${not empty baseCase.itemSubDc}">
<span class="product-banner__description-subtitle">${ baseCase.itemSubDc }
<i class="icon icon_product-banner-arrow"></i>
</span>
</c:if>
</div>
</a>
</c:if>
</c:forEach>
</div>
<div class="product-list-type-1col">
<div class="swiper product-list-type-1col__swiper">
<div class="swiper-wrapper">
<c:set var="cnt" value="0" />
<c:set var="openFlag" value="0" />
<c:set var="closeFlag" value="0" />
<c:forEach items="${ resultMap.case05 }" var="case05" varStatus="status" >
<c:if test="${ relmList.ordr eq case05.sOrdr }">
<c:set var="cnt" value="${ cnt + 1 }" />
<c:choose>
<c:when test="${ cnt == 1 || cnt % 4 == 1 }">
<c:set var="openFlag" value="1" />
</c:when>
<c:otherwise>
<c:set var="openFlag" value="2" />
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${ cnt % 4 == 0 }">
<c:set var="closeFlag" value="1" />
</c:when>
<c:otherwise>
<c:set var="closeFlag" value="2" />
</c:otherwise>
</c:choose>
<c:if test="${ openFlag == 1 }">
<div class="swiper-slide">
<div class="product-list-type-1col__list">
</c:if>
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case05.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>입고 대기중</span>
</div>
</c:when>
<c:when test="${case05.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case05.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<i class="icon icon_product-image-badge01"></i>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">
<img src="${cdnurl}${ case05.goodsImgCours }" alt="${case05.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case05.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case05.iconExpsrOrdr-1}" style="order:${case05.iconExpsrOrdr-1}">
<c:if test="${not empty case05.goodsIconCd}">
<c:forEach items="${fn:split(case05.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case05.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case05.goodsNmExpsrOrdr-1}" style="order:${case05.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">${ case05.goodsNm }</a>
</div>
</c:if>
<c:if test="${case05.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case05.pricExpsrOrdr-1}" style="order:${case05.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original <c:if test="${case05.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case05.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case05.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale <c:if test="${case05.slePercent eq 0}">visually-hidden</c:if>">
<span class="percent"><c:out value="${case05.slePercent}"/>%</span>
</div>
</div>
</c:if>
<c:if test="${case05.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case05.reprsntDcExpsrOrdr-1}" style="order:${case05.reprsntDcExpsrOrdr-1}">
<c:out value="${case05.reprsntDc}"/>
</div>
</c:if>
<c:if test="${case05.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case05.rvwEvlScreExpsrOrdr-1}" style="order:${case05.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case05.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case05.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case05.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case05.dlvyExpsrOrdr-1}" style="order:${case05.dlvyExpsrOrdr-1}">
<c:out value="${case05.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
<c:if test="${ closeFlag == 1 }">
</div>
</div>
</c:if>
</c:if>
</c:forEach>
<c:if test="${ closeFlag == 2 }">
</div>
</div>
</c:if>
</div>
<div class="swiper-pagination theme-pagination"></div>
</div>
</div>
</section>
</c:if>
<!-- 상품 - 4열 슬라이드 타입 -->
<c:if test="${ relmList.relmDvCd eq '07'}">
<section class="main-section main-section__time-sale no-bg">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '07' && relmList.ordr eq baseCase.sOrdr }">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ baseCase.subSj }</span>
<h2 class="main-section-title__title">
${ baseCase.mainSj }
</h2>
</div>
</div>
</c:if>
</c:forEach>
<div class="product-list-vertical-twoAndaHalf">
<div class="swiper product-list-vertical-twoAndaHalf__swiper">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case07 }" var="case07" varStatus="status">
<c:if test="${ relmList.ordr eq case07.sOrdr }">
<div class="swiper-slide">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case07.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>입고 대기중</span>
</div>
</c:when>
<c:when test="${case07.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case07.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">
<img src="${cdnurl}${ case07.goodsImgCours }" alt="${ case07.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case07.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case07.iconExpsrOrdr-1}" style="order:${case07.iconExpsrOrdr-1}">
<c:if test="${not empty case07.goodsIconCd}">
<c:forEach items="${fn:split(case07.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case07.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case07.goodsNmExpsrOrdr-1}" style="order:${case07.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">${ case07.goodsNm }</a>
</div>
</c:if>
<c:if test="${case07.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case07.pricExpsrOrdr-1}" style="order:${case07.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original <c:if test="${case07.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case07.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case07.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale <c:if test="${case07.slePercent eq 0}">visually-hidden</c:if>">
<span class="percent">${ case07.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case07.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case07.reprsntDcExpsrOrdr-1}" style="order:${case07.reprsntDcExpsrOrdr-1}">
${case07.reprsntDc}
</div>
</c:if>
<c:if test="${case07.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case07.rvwEvlScreExpsrOrdr-1}" style="order:${case07.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case07.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case07.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case07.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case07.dlvyExpsrOrdr-1}" style="order:${case07.dlvyExpsrOrdr-1}">
<c:out value="${case07.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</section>
</c:if>
<!-- 타임세일 -->
<!-- 타임세일 (배경 이미지 X, "no-bg" 클래스 추가, 상품 1.5열 슬라이드) -->
<c:if test="${ relmList.relmDvCd eq '08'}">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '08' && relmList.ordr eq baseCase.sOrdr }">
<c:choose>
<c:when test="${ empty baseCase.filCours}">
<section class="main-section main-section__time-sale no-bg">
</c:when>
<c:otherwise>
<section class="main-section main-section__time-sale" style="background-image: url('${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }');" >
</c:otherwise>
</c:choose>
</c:if>
</c:forEach>
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">얼마 남지 않았어요!</span>
<h2 class="main-section-title__title">
타임세일⏰
</h2>
</div>
</div>
<div class="product-list-vertical-oneAndaHalf">
<div class="swiper product-list-vertical-oneAndaHalf__swiper">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case08 }" var="case08" varStatus="status">
<c:if test="${ relmList.ordr eq case08.sOrdr }">
<div class="swiper-slide">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case08.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>입고 대기중</span>
</div>
</c:when>
<c:when test="${case08.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case08.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<c:if test="${(case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N') or (case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0) }">
<div class="time-sale__top">
<c:if test="${case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N'}">
<span class="time" name="remainTime">${case08.remainTime}</span>
<%-- <span class="time" name="tmeSetup">${case08.tmeSetup}</span> --%>
<%-- <input type="hidden" name="tmeSetupValue" value="${ case08.tmeSetup }" /> --%>
</c:if>
<c:if test="${case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0 }">
<span class="left">남은수량 ${ case08.remainQy }개</span>
</c:if>
</div>
</c:if>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">
<img src="${cdnurl}${ case08.goodsImgCours }" alt="${ case08.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case08.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case08.iconExpsrOrdr-1}" style="order:${case08.iconExpsrOrdr-1}">
<c:if test="${not empty case08.goodsIconCd}">
<c:forEach items="${fn:split(case08.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case08.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case08.goodsNmExpsrOrdr-1}" style="order:${case08.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">${ case08.goodsNm }</a>
</div>
</c:if>
<c:if test="${case08.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case08.pricExpsrOrdr-1}" style="order:${case08.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original <c:if test="${case08.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case08.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case08.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale <c:if test="${case08.slePercent eq 0}">visually-hidden</c:if>">
<span class="percent">${ case08.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case08.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case08.reprsntDcExpsrOrdr-1}" style="order:${case08.reprsntDcExpsrOrdr-1}">
${case08.reprsntDc}
</div>
</c:if>
<c:if test="${case08.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case08.rvwEvlScreExpsrOrdr-1}" style="order:${case08.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case08.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case08.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case08.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case08.dlvyExpsrOrdr-1}" style="order:${case08.dlvyExpsrOrdr-1}">
<c:out value="${case08.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</section>
</c:if>
<!-- 브랜드 소개 -->
<c:if test="${ relmList.relmDvCd eq '11'}">
<!-- 브랜드 및 제품 바로가기 -->
<!-- 이미지 가로 사이즈 720px -->
<section class="main-section main-section__brand-link">
<div class="brand-link">
<c:forEach items="${ resultMap.case11 }" var="case11" varStatus="status">
<c:if test="${ relmList.ordr eq case11.sOrdr }">
<div class="brand-link__image">
<a href="${ case11.itmeCnncUrl }">
<c:choose>
<c:when test="${ status.index == '0' }">
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'"loading="lazy">
</c:when>
<c:otherwise>
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'"loading="lazy">
</c:otherwise>
</c:choose>
</a>
</div>
</c:if>
</c:forEach>
</div>
</section>
</c:if>
<!-- 띠배너 -->
<c:if test="${ relmList.relmDvCd eq '12'}">
<!-- 중간 띠 배너 -->
<!-- 이미지 가로 사이즈 720px -->
<section class="main-section main-section__small-banner">
<div class="small-banner">
<div class="small-banner__swiper">
<div class="swiper-wrapper">
<c:forEach items="${ resultMap.case12 }" var="case12" varStatus="status">
<c:if test="${ relmList.ordr eq case12.sOrdr }">
<div class="swiper-slide">
<a href="${ case12.itmeCnncUrl }">
<img src="${cdnurl}${ case12.filCours }/${ case12.sysFilNm }" alt="배너 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'" loading="lazy">
</a>
</div>
</c:if>
</c:forEach>
</div>
<div class="swiper-pagination theme-pagination"></div>
</div>
</div>
</section>
</c:if>
</c:forEach>
</c:otherwise>
</c:choose>
<style>
.main-popup {
display:none;
/* max-width: 520px; */
position:absolute;
border-radius: 24px;
overflow: hidden;
background: #fff;
box-sizing: border-box;
max-width: 400px;
max-height: 100vh;
}
.main-popup-content {
max-height: 640px;
overflow-y: auto;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.main-popup-footer {
display: flex;
justify-content: space-between;
padding: 4px 8px;
}
.main-popup-footer label{
margin-left: 12px;
color: #16191d
}
.main-popup-content img {
width:100%;
height:100%;
/* object-fit: cover; */
position : absolute;
top:0; left:0;
background-size:cover;
}
.main-popup-btn {
height:28px;
font-size: 14px;
background-color: transparent;
color: #16191d;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 18px;
}
.main-popup-btn:hover {
text-decoration: underline;
}
.main-popup-time {
position: absolute;
bottom:0; left:0;
width: 100%;
height:30px;
background-color: black;
opacity:0.6;
z-index: 1;
text-align: center;
display: flex;
justify-content: center;
}
.main-popup-time span {
/* width:100%; */
text-align: center;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
}
</style>
<script>
$(document).ready(function () {// 상품 그룹 탭
//fn_product_group_type('1');
$('.section-2').each(function () {
let ordr = $(this).find('input[name="section-ordr"]').val();
fn_product_group_type(ordr, "1");
});
// 상품 카테고리 탭
//fn_product_category_type('1');
$('.section-3').each(function () {
let ordr = $(this).find('input[name="section-ordr"]').val();
fn_product_category_type(ordr, "1");
});
// 베스트리뷰 네이버페이 이미지 수정
$('.best-review__review > .best-review__review_a').each(function () {
let npay = $(this).find('.npayBbscttSnb').val();
// 네이버페이인 경우
if (npay != "") {
let cn = $(this).find('.best-review__paragraph').html();
let tempDiv = $('<div>').html(cn);
let firstImg = tempDiv.find('img').first();
$(this).find('.reviwImg').attr('src', firstImg.attr('src'));
}
});
// 베스트리뷰 내용에 태그 제거
$('.best-review__paragraph').each(function () {
let prevValue = $(this).text();
$(this).text(prevValue.trim());
});
// 타임이벤트시 시간 떨어뜨리는 함수
startCountdown();
openPopup();
});
// 상품 그룹 탭 클릭 시
const fn_product_group_type = function (ordr, tabNo) {
$('.product-tab__btn-' + ordr).removeClass('active');
$('#product-tab__btn-' + ordr + '-' + tabNo).addClass('active');
$('.product-list-type-1col_group-' + ordr).hide();
$('#product-list-type-1col_group-' + ordr + '-' + tabNo).show();
}
// 상품 카테고리 탭 클릭 시
const fn_product_category_type = function (ordr, tabNo) {
$('.category-type-tab__btn-' + ordr).removeClass('active');
$('#category-type-tab__btn-' + ordr + '-' + tabNo).addClass('active');
fn_select_product_category(ordr, tabNo);
$('.product-list-type-1col_category-' + ordr).hide();
$('#product-list-type-1col_category-' + ordr + '-' + tabNo).show();
}
// 상품 카테고리 가져오기
const fn_select_product_category = function (ordr, tabNo) {
$.ajax({
type: "post",
url: "/sopmal/main/selectMainSiteDesignCtgryListInqire",
data: {
ordr: ordr,
expsrOrdr: tabNo
},
success: function (data) {
let result = JSON.parse(data.resBody.result);
fn_product_category_setting(result, ordr, tabNo);
}
});
}
// 상품 카테고리
const fn_product_category_setting = function (data, ordr, tabNo) {
let result = data.resultMap;
let str = "";
var curUnit = '${curUnit}';
let cnt = 0;
let openFlag = 0;
let closeFlag = 0;
let showCnt = 4;
str += '<div class="swiper product-list-type-1col__swiper">';
str += '<div class="swiper-wrapper">';
$.each(result, function (index, result) {
cnt = cnt + 1;
if (cnt == 1 || cnt % showCnt == 1) {
openFlag = 1;
} else {
openFlag = 2;
}
if (cnt % showCnt == 0) {
closeFlag = 1;
} else {
closeFlag = 2;
}
if (openFlag == 1) {
str += '<div class="swiper-slide">';
str += ' <div class="product-list-type-1col__list">';
}
str += '<div class="product-unit">';
str += ' <div class="product-unit-image">';
if (result.goodsSttusCd === '02') {
str += '<div class="sold-out">';
str += ' <span>입고 대기중</span>';
str += '</div>';
} else if (result.goodsSttusCd === '03') {
str += '<div class="sold-out">';
str += ' <span>'+result.goodsSttusNm+'</span>';
str += '</div>';
}
str += ' <a href="javascript:void(0);" onclick="fn_move_goods_dtl(' + result.goodsInnb + ');">';
str += ' <img src="${cdnurl}' + result.goodsImgCours + '" alt="' + result.goodsNm + '" onerror="this.src=\'/pc/images/image_placeholder.png\'" >';
str += ' </a>';
str += ' </div>';
str += ' <div class="product-unit-info">';
str += ' <div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">';
if (result.iconExpsrAt == 'Y') {
str += '<div class="product-badge-container col order-' + (result.iconExpsrOrdr - 1) + '" style="order:' + (result.iconExpsrOrdr - 1) + '">';
if (result.goodsIconCd != null && result.goodsIconCd != "") {
let iconCdNm = result.goodsIconCd.split(',');
$.each(iconCdNm, function (index, iconCdNm) {
let lower = iconCdNm.toLowerCase();
let upper = iconCdNm.toUpperCase();
if (iconCdNm.includes('-')) {
let temp = upper.replace(/-/g, ' ');
str += '<span class="product-badge ' + lower + '">' + temp + '</span>';
} else {
str += '<span class="product-badge ' + lower + '">' + upper + '</span>';
}
});
}
str += '</div>';
}
if (result.goodsNmExpsrAt == 'Y') {
str += '<div class="product-unit-title col order-' + (result.goodsNmExpsrOrdr - 1) + '" style="order:' + (result.goodsNmExpsrOrdr - 1) + '">';
str += ' <a href="javascript:void(0);" onclick="fn_move_goods_dtl(' + result.goodsInnb + ');">' + result.goodsNm + '</a>';
str += '</div>';
}
if (result.pricExpsrAt == 'Y') {
str += '<div class="product-unit-price col order-' + (result.pricExpsrOrdr - 1) + '" style="order:' + (result.pricExpsrOrdr - 1) + '">';
str += ' <div class="product-unit-price__price">';
str += ' <span class="product-unit-price__original' + (result.slePercent == 0 ? ' visually-hidden' : '') + new Intl.NumberFormat('ko-KR').format(result.cnsmrpric) + curUnit + '</span>';
str += ' <span class="product-unit-price__current">' + new Intl.NumberFormat('ko-KR').format(result.slepric) + curUnit + '</span>';
str += ' </div>';
str += ' <div class="product-unit-price__sale' + (result.slePercent == 0 ? ' visually-hidden' : '') + '">';
str += ' <span class="percent">' + result.slePercent + '%</span>';
str += ' </div>';
str += '</div>';
}
if (result.reprsntDcExpsrAt == 'Y') {
str += '<div class="product-unit-price__monthly-payment col order-' + (result.reprsntDcExpsrOrdr - 1) + '" style="order:' + (result.reprsntDcExpsrOrdr - 1) + '">';
// str += ' ' + result.reprsntDc + '';
str += ' '+fn_default_message(result.reprsntDc, '')+'';
str += '</div>';
}
if (result.rvwEvlScreExpsrAt == 'Y') {
str += '<div class="product-unit-rating col order-' + (result.rvwEvlScreExpsrOrdr - 1) + '" style="order:' + (result.rvwEvlScreExpsrOrdr - 1) + '">';
str += ' <i class="icon icon_rating-star"></i>';
// str += ' <span class="product-unit-rating__score">' + result.avgEvlScore + '</span>';
str += ' <span class="product-unit-rating__score">'+fn_default_message(result.avgEvlScore, '0.0')+'</span>';
str += ' <span class="product-unit-rating__count">(' + new Intl.NumberFormat('ko-KR').format(result.cntEvlScor) + ')</span>';
str += '</div>';
}
if (result.dlvyExpsrAt == 'Y') {
str += '<div class="product-unit-price__monthly-payment col order-' + (result.dlvyExpsrOrdr - 1) + '" style="order:' + (result.dlvyExpsrOrdr - 1) + '">';
str += ' ' + result.dlvyGroupNm + '';
str += '</div>';
}
str += ' </div>';
str += ' </div>';
str += '</div>';
if (closeFlag == 1) {
str += ' </div>';
str += '</div>';
}
});
if (closeFlag == 2) {
str += ' </div>';
str += '</div>';
}
str += ' </div>';
str += '<div class="swiper-pagination theme-pagination"></div>';
str += '</div>';
$('#product-list-type-1col_category-' + ordr + '-' + tabNo).html(str);
// Swiper 초기화
const swiper = new Swiper('.product-list-type-1col_category > .swiper', {
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
}
// 기본 값 설정
function fn_default_message(key, defaultMessage) {
return key ? key : defaultMessage;
}
//타임 이벤트 카운트 다운
function startCountdown() {
// 각 span 태그의 remainTime을 처리합니다.
$('span[name^="remainTime"]').each(function () {
let remainTime = $(this).text().trim(); // 현재 span의 텍스트 가져오기
// 시간을 시, 분, 초로 분리
if (remainTime === 'N') {
return false; // remainTime이 'N'이면 중지
}
let [hours, minutes, seconds] = remainTime.split(':').map(Number);
// 타이머 업데이트 함수
function updateTimer() {
// 현재 시간을 표시
let formattedHours = hours < 10 ? '0' + hours : hours;
let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
let formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
let result_days = Math.floor(formattedHours / 24);
let result_hours = formattedHours % 24;
let result;
if (result_days >= 1) {
// console.log("일수 필요");
result = result_days + '일 ' + result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
} else {
result = result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
}
$(this).text(result);
// 현재 span 태그에 업데이트
// $(this).text(formattedHours + ':' + formattedMinutes + ':' + formattedSeconds);
// 1초 감소
seconds--;
// 초가 0보다 작아지면 분에서 1을 빼고 초를 59로 설정
if (seconds < 0) {
seconds = 59;
minutes--;
}
// 분이 0보다 작아지면 시간에서 1을 빼고 분을 59로 설정
if (minutes < 0) {
minutes = 59;
hours--;
}
// 시간이 0보다 작아지면 타이머 중지
if (hours < 0) {
$(this).text("00:00:00");
clearInterval(timerInterval);
}
}
// `this`를 업데이트 함수에서 사용할 수 있도록 바인딩
const timerInterval = setInterval(updateTimer.bind(this), 1000);
});
}
// 팝업 창 열기
function openPopup() {
let popupId;
$('.main-popup').each(function () {
popupId = $(this).attr('id');
let popupFlag = getCookie(popupId);
if (popupFlag) {
$('#' + popupId).css('display', 'none');
} else {
$('#' + popupId).css('display', 'block');
}
});
}
// 쿠키 불러오기
function getCookie(name) {
const cookies = document.cookie.split(';')
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return true;
}
}
return false;
}
// 쿠키 설정 expiredays 후의 클릭한 시간까지
function setCookie24(name, value, expiredays) {
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
}
// 팝업 닫기
function closePopup(ele) {
$(ele).closest('.main-popup').css('display', 'none');
let cookieName = $(ele).closest('.main-popup').attr('id');
let checkFlag = $(ele).closest('.main-popup').find('input[name="checked"]').is(':checked');
// console.log("cookieName = "+cookieName);
// console.log("checkFlag = "+checkFlag);
// 체크가 되어 있으면
if (checkFlag) {
setCookie24(cookieName, 'Y', 1);
}
}
// 팝업 시간 카운트
function countDown() {
$('span[name^="tmeSetup"]').each(function() {
let targetDateString = $(this).siblings('input[name="tmeSetupValue"]').val();
let targetDate = new Date(targetDateString);
let now = new Date();
let difference = targetDate - now;
if (difference <= 0) {
console.log("시간이 지났습니다!");
clearInterval(timer); // 카운트다운 종료
$(this).text('00:00:00');
return;
}
let hours = Math.floor( difference / (1000 * 60 * 60) );
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
// let formattedHours = hours < 10 ? '0' + hours : hours;
let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
let formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
let result_days = Math.floor(hours / 24);
let result_hours = hours % 24;
let result;
if(result_days >= 1) {
console.log("일수 필요");
result = result_days + '일 ' + result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
}else {
result = result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
}
$(this).text(result);
});
}
// 1초마다 카운트다운 업데이트
const timer = setInterval(countDown, 1000);
// 241105 카테고리별 타입탭 슬라이드
const categoryTypeSwipers = Array.from(document.querySelectorAll('.category-type-tab.swiper'));
categoryTypeSwipers.forEach((categoryType, index) => {
const categoryTypeSwiper = new Swiper(categoryType, {
slidesPerView: 4.5,
slidesPerGroup: 4,
spaceBetween: 12,
breakpoints: {
640: {
slidesPerView: 6.5,
slidesPerGroup: 6,
}
}
});
});
// 메인 롤링 배너
const mainSwiper = new Swiper(".main-banner", {
loop: true,
pagination: {
el: ".main-banner .swiper-pagination",
type: "fraction",
},
autoplay: {
delay: 4000,
},
});
const playPauseBtn = document.querySelector('.main-banner__controls__btn.play');
let isAutoplay = true;
if(!fn_is_empty(playPauseBtn)){
playPauseBtn.addEventListener('click', function () {
if (isAutoplay) {
mainSwiper.autoplay.stop();
this.classList.add('paused');
this.querySelector('.visually-hidden').textContent = '배너 재생'; // Changing button text for screen readers
} else {
mainSwiper.autoplay.start();
this.classList.remove('paused');
this.querySelector('.visually-hidden').textContent = '배너 멈춤'; // Changing button text for screen readers
}
isAutoplay = !isAutoplay;
});
}
let main_banner = $('.main-banner');
for (let i = 1; i <= main_banner.length; i++) {
let main_banner = "#main-banner" + i;
let swiper_pagination = "#swiper-pagination" + i;
const mainSwiper = new Swiper(main_banner, {
loop: true,
pagination: {
el: swiper_pagination,
type: "fraction",
},
autoplay: {
delay: 4000,
},
});
const playPauseBtn = '#main-banner__controls__btn' + i;
let isAutoplay = true;
$(playPauseBtn).on('click', function () {
if (isAutoplay) {
mainSwiper.autoplay.stop();
this.classList.add('paused');
this.querySelector('.visually-hidden').textContent = '배너 재생'; // Changing button text for screen readers
} else {
mainSwiper.autoplay.start();
this.classList.remove('paused');
this.querySelector('.visually-hidden').textContent = '배너 멈춤'; // Changing button text for screen readers
}
isAutoplay = !isAutoplay;
});
}
// 상품 2열
const productListType2colsSwipers = Array.from(document.querySelectorAll('.product-list-type-2cols__swiper'));
productListType2colsSwipers.forEach((productListElement, index) => {
const productListType1Swiper = new Swiper(productListElement, {
slidesPerView: 1,
pagination: {
el: productListElement.querySelector('.swiper-pagination.theme-pagination'), // Select the .swiper-pagination.theme-pagination that is a child of the current .product-list-type-2cols__swiper element
clickable: true,
},
loop: true,
});
});
// 상품 1열
const productListType1Swipers = Array.from(document.querySelectorAll('.product-list-type-1col__swiper'));
productListType1Swipers.forEach((productListElement, index) => {
const productListType1Swiper = new Swiper(productListElement, {
slidesPerView: 1,
pagination: {
el: productListElement.querySelector('.swiper-pagination.theme-pagination'), // Select the .swiper-pagination.theme-pagination that is a child of the current .product-list-type-1col__swiper element
clickable: true,
},
loop: true,
});
});
// 상품 가로 슬라이드 (2.5열 슬라이드)
const twoAndaHalfElements = Array.from(document.querySelectorAll('.product-list-vertical-twoAndaHalf__swiper'));
twoAndaHalfElements.forEach((twoAndaHalf, index) => {
const twoAndaHalfSwiper = new Swiper(twoAndaHalf, {
spaceBetween: 12,
slidesPerView: 2.3,
// scrollbar: {
// el: twoAndaHalf.querySelector('.swiper-scrollbar'), // Select the .swiper-scrollbar that is a child of the current .time-sale__swiper element
// hide: false,
// },
freeMode: true,
});
});
// 상품 가로 슬라이드 (1.5열 슬라이드)
const oneAndaHalfElements = Array.from(document.querySelectorAll('.product-list-vertical-oneAndaHalf__swiper'));
oneAndaHalfElements.forEach((oneAndaHalf, index) => {
const oneAndaHalfSwiper = new Swiper(oneAndaHalf, {
spaceBetween: 12,
slidesPerView: 1.5,
// scrollbar: {
// el: oneAndaHalf.querySelector('.swiper-scrollbar'), // Select the .swiper-scrollbar that is a child of the current .time-sale__swiper element
// hide: false,
// },
freeMode: true,
});
});
// 상품 가로 슬라이드 (1.5열 슬라이드 센터)
const oneAndaHalfCenterElements = Array.from(document.querySelectorAll('.product-list-vertical-oneAndaHalfCenter__swiper'));
oneAndaHalfCenterElements.forEach((oneAndaHalfCenter, index) => {
const oneAndaHalfCenterSwiper = new Swiper(oneAndaHalfCenter, {
spaceBetween: 12,
slidesPerView: 1.5,
centeredSlides: true,
loop: true,
// scrollbar: {
// el: oneAndaHalfCenter.querySelector('.swiper-scrollbar'), // Select the .swiper-scrollbar that is a child of the current .time-sale__swiper element
// hide: false,
// },
});
});
// 중간 띠 배너 슬라이드
const smallBannerSwipers = Array.from(document.querySelectorAll('.small-banner__swiper'));
smallBannerSwipers.forEach((smallBannerElement, index) => {
const smallBannerSwiper = new Swiper(smallBannerElement, {
loop: true,
pagination: {
el: smallBannerElement.querySelector('.swiper-pagination'),
clickable: true,
},
});
});
// 매거진 슬라이드
const magazineSwiper = new Swiper(".magazine__swiper", {
// slidesPerView: 1.8,
slidesPerView: 'auto',
// spaceBetween: 4,
centeredSlides: true,
loop: true,
});
// data-micromodal-trigger 속성을 가진 버튼을 클릭하면 해당 ID의 모달이 열림
// 모달 배경화면 스크롤 방지
MicroModal.init(
{
disableScroll: true,
awaitCloseAnimation: true,
});
// 풀스크린 팝업 트리거 이벤트 리스너
$('.fullscreen-trigger').on('click', function (e) {
e.preventDefault();
var modalId = $(this).attr('data-micromodal-trigger');
openModal(modalId);
});
// 풀스크린 팝업 닫기 이벤트 리스너
$('.microModal .microModal__close').on('click', function () {
var modalId = $(this).closest('.microModal').attr('id');
closeModal(modalId);
});
// 풀스크린 팝업 뒤로가기 이벤트 리스너
window.addEventListener('popstate', function (event) {
var modalId = window.location.hash.replace('#', '');
if (modalId) {
closeModal(modalId);
} else {
$('.microModal').each(function () {
MicroModal.close($(this).attr('id'));
});
}
document.body.style.overflow = '';
});
if (window.location.hash) {
var modalId = window.location.hash.replace('#', '');
openModal(modalId);
}
let gnbTyCd = '${topBarInfo.topbar.gnbTyCd}';
if (gnbTyCd !== '03' && !fn_is_empty($("#search-trend"))) {
if(!fn_is_empty($("#search-trend"))){
// 실시간 검색
$("#search-trend").vTicker({
speed: 500,
pause: 3000,
showItems: 1,
mousePause: true,
height: 0,
animate: true,
margin: 0,
padding: 0,
startPaused: false,
});
}
}
</script>
</html>