3326 lines
185 KiB
Plaintext
3326 lines
185 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">
|
|
<head>
|
|
<%-- 공통 include --%>
|
|
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
|
|
</head>
|
|
<c:choose>
|
|
<c:when test = "${empty prevewVO.mainSiteInnb && prevewVO.evtPageAt ne 'Y'}"> <%--이벤트게시글 아님--%>
|
|
<body>
|
|
<%-- 공통 Header --%>
|
|
<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
|
|
<!-- 메인 컨텐츠 영역 -->
|
|
<main>
|
|
<!-- 영역 리스트 -->
|
|
<c:forEach items="${ resultMap.relmList }" var="relmList" varStatus="status">
|
|
<!-- 메인 롤링 배너 -->
|
|
<!-- 배너 이미지 사이즈 1280x480 -->
|
|
<c:if test="${ relmList.relmDvCd eq '01'}">
|
|
<section class="main-section main-section__main-banner">
|
|
<div class="main-banner" id="main-banner${ relmList.ordr }">
|
|
<c:forEach items="${ resultMap.case01 }" var="case01" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case01.sOrdr }">
|
|
<div><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__btn-container">
|
|
<button class="main-banner__prev" id="main-banner__prev${ relmList.ordr }"><i class="icon icon_prev01"></i><span
|
|
class="visually-hidden">이전</span>
|
|
</button>
|
|
<button class="main-banner__next" id="main-banner__next${ relmList.ordr }"><i class="icon icon_next01"></i><span
|
|
class="visually-hidden">다음</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 그룹별 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '02'}">
|
|
<div class="main-section__container section-2">
|
|
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
|
|
<section class="main-section">
|
|
<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-type1 product-list-type-group product-list-type-group-${ relmList.ordr }" id="product-list-type-group-${ relmList.ordr }-${ baseCase.iOrdr }">
|
|
<div class="product-list-type1__list product-list-type1__list-group">
|
|
|
|
<c:forEach items="${ resultMap.case02 }" var="case02" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case02.sOrdr && baseCase.iOrdr eq case02.iOrdr }">
|
|
<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>
|
|
<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'">
|
|
</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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${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>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 카테고리별 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '03'}">
|
|
<div class="main-section__container section-3">
|
|
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
|
|
<input type="hidden" name="section-mainSiteInnb" value="${ prevewVO.mainSiteInnb }"/>
|
|
<section class="main-section">
|
|
<div class="main-section-header" style="margin-bottom: 48px;">
|
|
<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="category-type-tab">
|
|
<ul class="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>
|
|
<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 }', '${ prevewVO.mainSiteInnb }'); return false;">
|
|
<c:if test = "${not empty baseCase.filCours}">
|
|
<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-type1 product-list-type-category product-list-type-category-${ relmList.ordr }" id="product-list-type-category-${ relmList.ordr }-${ baseCase.iOrdr }">
|
|
<div class="product-list-type1__list ">
|
|
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</section>
|
|
</div>
|
|
|
|
</c:if>
|
|
|
|
<!-- 상품 - 이미지 배너 타입 -->
|
|
<!-- 이미지 사이즈 410x410 -->
|
|
<!-- 상품 - 이미지 배너 타입 (배경 이미지 X ".no-bg" 클래스 추가) -->
|
|
<c:if test="${ relmList.relmDvCd eq '04'}">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
|
|
<c:if test="${ baseCase.relmDvCd eq '04' && relmList.ordr eq baseCase.sOrdr }">
|
|
<c:choose>
|
|
<c:when test="${ empty baseCase.filCours}">
|
|
<div class="main-section__container product-banner no-bg">
|
|
</c:when>
|
|
<c:otherwise>
|
|
<div class="main-section__container product-banner" style="background-image: url('${ baseCase.filCours }');" >
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<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 }">
|
|
<div class="product-banner__left">
|
|
<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>
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<div class="product-banner__right">
|
|
<div class="product-list-type2">
|
|
<div class="product-banner-slick">
|
|
|
|
<c:forEach items="${ resultMap.case04 }" var="case04" varStatus="status" >
|
|
<c:if test="${ relmList.ordr eq case04.sOrdr }">
|
|
<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'">
|
|
</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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${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>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
<div class="product-banner-slick__btn-container">
|
|
<button class="product-banner-slick__prev"><i class="icon icon_prev03"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="product-banner-slick__next"><i class="icon icon_next03"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 기획전 -->
|
|
<!-- 기획전 소개 이미지 사이즈 510x700 -->
|
|
<c:if test="${ relmList.relmDvCd eq '05'}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__exhibition">
|
|
<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="exhibition">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
|
|
<c:if test="${ baseCase.relmDvCd eq '05' && relmList.ordr eq baseCase.sOrdr }">
|
|
<div class="exhibition__left">
|
|
<a href="${ baseCase.itmeCnncUrl }">
|
|
<div class="exhibition__image">
|
|
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</div>
|
|
<div class="exhibition__description">
|
|
<h4 class="exhibition__description-title">${ baseCase.itemMainDc }</h4>
|
|
<c:if test = "${not empty baseCase.itemSubDc}">
|
|
<span class="exhibition__description-subtitle">${ baseCase.itemSubDc }
|
|
<i class="icon icon_exhibition-arrow"></i>
|
|
</span>
|
|
</c:if>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<div class="exhibition__right">
|
|
<div class="product-list-type2">
|
|
<div class="product-list-type2__list">
|
|
|
|
<c:forEach items="${ resultMap.case05 }" var="case05" varStatus="status" >
|
|
<c:if test="${ relmList.ordr eq case05.sOrdr }">
|
|
<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>
|
|
<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'">
|
|
</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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${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">${ 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}">
|
|
${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>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 2x2 타입 -->
|
|
<!-- 상품 - 2x2 타입 (배경 이미지 X, ".no-bg" 클래스 추가) -->
|
|
<c:if test="${ relmList.relmDvCd eq '06'}">
|
|
<div class="main-section__container TwoXTwo-type no-bg">
|
|
<section class="main-section main-section__TwoXTwo-type">
|
|
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd eq '06' && relmList.ordr eq baseCase.sOrdr && baseCase.iOrdr eq '01'}">
|
|
|
|
<div class="TwoXTwo-left">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ baseCase.itemSubSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ baseCase.itemMainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="TwoXTwo-left__container">
|
|
<div class="TwoXTwo-left-slick">
|
|
|
|
<c:forEach items="${ resultMap.case06 }" var="case06" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case06.sOrdr && baseCase.iOrdr eq case06.iOrdr }">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case06.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case06.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case06.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">
|
|
<img src="${cdnurl}${ case06.goodsImgCours }" alt="${case06.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="${case06.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case06.iconExpsrOrdr-1}" style="order:${case06.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case06.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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case06.goodsNmExpsrOrdr-1}" style="order:${case06.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">${ case06.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case06.pricExpsrOrdr-1}" style="order:${case06.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case06.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case06.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case06.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case06.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent">${ case06.slePercent }%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case06.reprsntDcExpsrOrdr-1}" style="order:${case06.reprsntDcExpsrOrdr-1}">
|
|
${case06.reprsntDc}
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case06.rvwEvlScreExpsrOrdr-1}" style="order:${case06.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case06.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case06.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case06.dlvyExpsrOrdr-1}" style="order:${case06.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case06.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
<div class="TwoXTwo-left-slick__btn-container">
|
|
<button class="TwoXTwo-left-slick__prev"><i class="icon icon_prev03"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="TwoXTwo-left-slick__next"><i class="icon icon_next03"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd eq '06' && relmList.ordr eq baseCase.sOrdr && baseCase.iOrdr eq '02'}">
|
|
|
|
<div class="TwoXTwo-right">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ baseCase.itemSubSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ baseCase.itemMainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="TwoXTwo-right__container">
|
|
<div class="TwoXTwo-right-slick">
|
|
|
|
<c:forEach items="${ resultMap.case06 }" var="case06" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case06.sOrdr && baseCase.iOrdr eq case06.iOrdr }">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">
|
|
<img src="${cdnurl}${ case06.goodsImgCours }" alt="${ case06.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="${case06.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case06.iconExpsrOrdr-1}" style="order:${case06.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case06.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case06.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case06.goodsNmExpsrOrdr-1}" style="order:${case06.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">${ case06.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case06.pricExpsrOrdr-1}" style="order:${case06.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case06.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case06.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case06.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case06.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent">${ case06.slePercent }%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case06.reprsntDcExpsrOrdr-1}" style="order:${case06.reprsntDcExpsrOrdr-1}">
|
|
${case06.reprsntDc}
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case06.rvwEvlScreExpsrOrdr-1}" style="order:${case06.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case06.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case06.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case06.dlvyExpsrOrdr-1}" style="order:${case06.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case06.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
<div class="TwoXTwo-right-slick__btn-container">
|
|
<button class="TwoXTwo-right-slick__prev"><i class="icon icon_prev03"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="TwoXTwo-right-slick__next"><i class="icon icon_next03"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 4열 슬라이드 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '07'}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__four-row">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '07' && relmList.ordr eq baseCase.sOrdr and not empty baseCase.goodsGroupInnb }">
|
|
<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-type1">
|
|
<div class="four-row-slick">
|
|
<c:forEach items="${ resultMap.case07 }" var="case07" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case07.sOrdr }">
|
|
<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'">
|
|
</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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${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>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="four-row-slick__btn-container">
|
|
<button class="four-row-slick__prev"><i class="icon icon_prev02"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="four-row-slick__next"><i class="icon icon_next02"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 타임세일 -->
|
|
<!-- 타임세일 (배경 이미지 X, ".no-bg" 클래스 추가) -->
|
|
<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}">
|
|
<div class="main-section__container time-sale no-bg">
|
|
</c:when>
|
|
<c:otherwise>
|
|
<div class="main-section__container time-sale" style="background-image: url('${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }');" >
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:if>
|
|
</c:forEach>
|
|
<section class="main-section main-section__time-sale">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '08' && relmList.ordr eq baseCase.sOrdr }">
|
|
<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>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<div class="time-sale">
|
|
<span class="visually-hidden">타임세일</span>
|
|
<div class="wrapper">
|
|
<div class="time-sale-slick">
|
|
|
|
<c:forEach items="${ resultMap.case08 }" var="case08" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case08.sOrdr }">
|
|
<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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${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>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
<div class="time-sale-slick__btn-container">
|
|
<button class="time-sale-slick__prev"><i class="icon icon_prev02"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="time-sale-slick__next"><i class="icon icon_next02"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 베스트 리뷰 -->
|
|
<c:if test="${ relmList.relmDvCd eq '09'}">
|
|
<div class="main-section__container">
|
|
<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="best-review">
|
|
<div class="best-review-slick">
|
|
<c:forEach items="${ resultMap.case09 }" var="case09" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case09.sOrdr }">
|
|
<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>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="best-review-slick__btn-container">
|
|
<button class="best-review-slick__prev"><i class="icon icon_prev02"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="best-review-slick__next"><i class="icon icon_next02"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 매거진 -->
|
|
<!-- 매거진 썸네일 이미지 사이즈 500x360 -->
|
|
<c:if test="${ relmList.relmDvCd eq '10'}">
|
|
<div class="main-section__container magazine">
|
|
<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="magazine-slick col-2">
|
|
<c:forEach items="${ resultMap.case10 }" var="case10" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case10.sOrdr }">
|
|
<div>
|
|
<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 class="magazine-slick__btn-container">
|
|
<button class="magazine-slick__prev"><i class="icon icon_prev02"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="magazine-slick__next"><i class="icon icon_next02"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=subPage&bbsId=magazine" class="magazine__more-link">더보기
|
|
<i class="icon icon_magazine-more-icon"></i>
|
|
</a>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 브랜드 및 제품 바로가기 -->
|
|
<!-- 좌측이미지 사이즈 영역 620x400 -->
|
|
<!-- 우측이미지 2개 사이즈 영역 각각 620x180 -->
|
|
<c:if test="${ relmList.relmDvCd eq '11'}">
|
|
<div class="main-section__container">
|
|
<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 }">
|
|
<c:if test="${ case11.iOrdr eq '1' }">
|
|
<div class="left">
|
|
<a href="${ case11.itmeCnncUrl }">
|
|
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'" >
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
<div class="right">
|
|
<c:forEach items="${ resultMap.case11 }" var="case11" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case11.sOrdr }">
|
|
<c:if test="${ case11.iOrdr eq '2' }">
|
|
<div class="first">
|
|
<a href="${ case11.itmeCnncUrl }">
|
|
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${ case11.iOrdr eq '3' }">
|
|
<div class="second">
|
|
<a href="${ case11.itmeCnncUrl }">
|
|
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
<!-- 띠 배너 -->
|
|
<c:if test="${ relmList.relmDvCd eq '12'}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__small-banner01">
|
|
<div class="small-banner01">
|
|
<c:forEach items="${ resultMap.case12 }" var="case12" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case12.sOrdr }">
|
|
<div><a href="${ case12.itmeCnncUrl }"><img src="${cdnurl}${ case12.filCours }/${ case12.sysFilNm }" alt="배너 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'"></a></div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="small-banner01__btn-container">
|
|
<button class="small-banner01__prev"><i class="icon icon_prev04"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="small-banner01__next"><i class="icon icon_next04"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
<!-- 공지사항 -->
|
|
<c:if test="${ relmList.relmDvCd eq '13'}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__notice">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<h2 class="main-section-title__title">
|
|
공지사항
|
|
</h2>
|
|
</div>
|
|
<div class="notice-line">
|
|
<i class="icon icon_notice-speaker"></i>
|
|
<div class="notice-line-slick">
|
|
<c:forEach items="${ resultMap.case13 }" var="case13" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case13.sOrdr }">
|
|
<div>
|
|
<span class="text">
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=CM&reqUrl=csc&bbsId=${ case13.bbsId }&bbscttInnb=${ case13.bbscttInnb }">
|
|
${ case13.sj }
|
|
</a>
|
|
</span>
|
|
<span class="date">
|
|
<c:set var="registDt" value="${fn:replace(case13.registDt, 'T', ' ')}" />
|
|
<fmt:parseDate var="registDt" value="${ registDt }" pattern="yyyy-MM-dd HH:mm:ss"/>
|
|
<fmt:formatDate value="${registDt}" pattern="yyyy-MM-dd"/>
|
|
</span>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="btn-container">
|
|
<button class="notice-line__prev">
|
|
<i class="icon icon_notice-chevron"></i>
|
|
</button>
|
|
<button class="notice-line__next">
|
|
<i class="icon icon_notice-chevron2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
<!-- FAQ -->
|
|
<c:if test="${ relmList.relmDvCd eq '14'}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__notice">
|
|
<div class="notice">
|
|
<c:forEach items="${ resultMap.case14 }" var="case14" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case14.sOrdr }">
|
|
|
|
<c:if test="${ case14.iOrdr eq '1' }">
|
|
<div class="notice__box">
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=faq">
|
|
<i class="icon icon_notice01"></i>
|
|
</a>
|
|
<h4 class="notice__title"><a href="">${ case14.itemMainSj }</a></h4>
|
|
<span class="notice__description">${ case14.itemSubSj }</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${ case14.iOrdr eq '2' }">
|
|
<div class="notice__box">
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=useGuidance&bbsId=use_guidance">
|
|
<i class="icon icon_notice02"></i>
|
|
</a>
|
|
<h4 class="notice__title"><a href="">${ case14.itemMainSj }</a></h4>
|
|
<span class="notice__description">${ case14.itemSubSj }</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${ case14.iOrdr eq '3' }">
|
|
<div class="notice__box">
|
|
<i class="icon icon_notice03"></i>
|
|
<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>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
<!-- 우측 퀵메뉴 -->
|
|
<div class="quick-menu__wrapper">
|
|
<aside class="quick-menu">
|
|
<div class="quick-menu__group">
|
|
<button onclick="location.href='/sopmal/ordr/selectSpbk'">
|
|
<i class="icon icon_quick-menu02">
|
|
<span class="number-badge" class = "headerCartCnt">${ resultMap.cartCnt }</span>
|
|
</i>
|
|
<span>장바구니</span>
|
|
</button>
|
|
<button onclick="location.href='/sopmal/mpage/ordr/selectWslistInqireForm'">
|
|
<i class="icon icon_quick-menu03">
|
|
<c:if test="${ !empty resultMap.loginFlag }">
|
|
<span class="number-badge">
|
|
${ resultMap.wishList }
|
|
</span>
|
|
</c:if>
|
|
</i>
|
|
<span>위시리스트</span>
|
|
</button>
|
|
</div>
|
|
<div class="quick-menu__recentProduct">
|
|
<p class="quick-menu__recentProduct__title">최근 본 상품(${fn:length(resultMap.recentGoods)})</p>
|
|
<c:if test="${ !empty resultMap.recentGoods }">
|
|
<div class="recentProductSlick">
|
|
<c:set var="cnt" value="0" />
|
|
<c:set var="openFlag" value="0" />
|
|
<c:set var="closeFlag" value="0" />
|
|
<c:forEach items="${ resultMap.recentGoods }" var="recentGoods" varStatus="status">
|
|
<c:set var="cnt" value="${ cnt + 1 }" />
|
|
<c:choose>
|
|
<c:when test="${ cnt == 1 || cnt % 3 == 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 % 3 == 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="recentProductSlick__item">
|
|
</c:if>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${recentGoods.goodsInnb});">
|
|
<img src="${cdnurl}${ recentGoods.goodsImgCours }" alt="${recentGoods.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
<c:if test="${ closeFlag == 1}">
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
<c:if test="${ closeFlag == 2}">
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
<div class="recentProductSlick__btn-container">
|
|
<button class="recentProductSlick__prev"><i class="icon icon_prev01"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<span class="recentProductSlick__index">
|
|
<span class="current">1</span>
|
|
/
|
|
<span class="total"></span>
|
|
</span>
|
|
<button class="recentProductSlick__next"><i class="icon icon_next01"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
<div class="quick-menu__customer-service"
|
|
onclick="window.open('http://pf.kakao.com/_xjxjHxnX', '_blank');">
|
|
<i class="icon icon_kakao-customer-service"></i>
|
|
<span class="visually-hidden">고객센터</span>
|
|
<span class="quick-menu__customer-service__num">
|
|
문의는 카톡으로
|
|
</span>
|
|
</div>
|
|
<div class="quick-menu__to-top">
|
|
<button><i class="icon icon_quick-to-top"></i><span class="visually-hidden">위로
|
|
가기</span></button>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
<!-- 모달 -->
|
|
<!-- 메인 팝업-->
|
|
<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.popupLcY }px; left:${ popup.popupLcX }px; z-index: ${ status.index +1};">
|
|
<div class="main-popup-content" style=" width:${ popup.popupMgWth }px; height:${ popup.popupMgVtc }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>
|
|
</main>
|
|
<%-- 공통 Footer --%>
|
|
<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
|
|
<!-- 모달 -->
|
|
<!-- 검색어를 입력하세요 모달 -->
|
|
<div id="enter-keyword" class="modal alert">
|
|
<div class="alert-content">
|
|
<p class="alert-content__text">검색어를 입력해주세요</p>
|
|
<!-- <p class="alert-content__text--sm">내용입니다.</p> -->
|
|
</div>
|
|
<div class="alert-btn-container">
|
|
<!-- <a href="#" rel="modal:close" class="alert-btn alert-btn--cancel">취소</a> -->
|
|
<a href="#" rel="modal:close" class="alert-btn alert-btn--confirm">확인</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 상품 옵션 모달 -->
|
|
<div id="product-option-popUp" class="modal option">
|
|
<div class="option-header">
|
|
<div class="option-header__title">옵션 선택</div>
|
|
</div>
|
|
<div class="option-content">
|
|
<div class="product-option">
|
|
<div class="product-option__item">
|
|
<label class="b-checkbox checkbox is-medium">
|
|
<input type="checkbox" value="false">
|
|
<span class="check"></span>
|
|
<span class="control-label">식물성 알티지오메가3 1박스</span>
|
|
</label>
|
|
<div class="product-option__right">
|
|
<span class="product-option__price">59,000${curUnit}</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-option__item">
|
|
<label class="b-checkbox checkbox is-medium">
|
|
<input type="checkbox" value="false">
|
|
<span class="check"></span>
|
|
<span class="control-label">식물성 알티지오메가3 4+1</span>
|
|
</label>
|
|
<div class="product-option__right">
|
|
<span class="product-option__price">59,000${curUnit}</span>
|
|
<span class="product-option__monthly-payment">(개월당 47,200${curUnit})</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-option__item">
|
|
<label class="b-checkbox checkbox is-medium">
|
|
<input type="checkbox" value="">
|
|
<span class="check"></span>
|
|
<span class="control-label">식물성 알티지오메가3 8+2</span>
|
|
</label>
|
|
<div class="product-option__right">
|
|
<span class="product-option__price">59,000${curUnit}</span>
|
|
<span class="product-option__gift">비타민C 증정</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="product-count">
|
|
<div class="product-count__amount-top">
|
|
<span class="product-count__amount-title">식물성 알티지오메가3 1박스</span>
|
|
<button class="product-count__amount-delete"><span class="visually-hidden">삭제</span></button>
|
|
</div>
|
|
<div class="product-count__amount-bottom">
|
|
<div class="product-count__amount-counter">
|
|
<button class="product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>
|
|
<span class="product-count__amount-number">1</span>
|
|
<button class="product-count__amount-btn plus"><span class="visually-hidden">추가</span></button>
|
|
</div>
|
|
<div class="product-count__amount-price-box">
|
|
<span class="product-count__amount-monthly-price">개월당 19,500${curUnit}</span>
|
|
<span class="product-count__amount-price">59,000${curUnit}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-count">
|
|
<div class="product-count__amount-top">
|
|
<span class="product-count__amount-title">식물성 알티지오메가3 1박스</span>
|
|
<button class="product-count__amount-delete"><span class="visually-hidden">삭제</span></button>
|
|
</div>
|
|
<div class="product-count__amount-bottom">
|
|
<div class="product-count__amount-counter">
|
|
<button class="product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>
|
|
<span class="product-count__amount-number">1</span>
|
|
<button class="product-count__amount-btn plus"><span class="visually-hidden">추가</span></button>
|
|
</div>
|
|
<div class="product-count__amount-price-box">
|
|
<span class="product-count__amount-monthly-price">개월당 19,500${curUnit}</span>
|
|
<span class="product-count__amount-price">59,000${curUnit}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="product-total__container">
|
|
<span class="product-total__text">총 상품금액</span>
|
|
<span class="product-total__price">59,000<span class="won">${curUnit}</span></span>
|
|
</div>
|
|
<div class="product-btn-container">
|
|
<button class="gift-btn">선물</button>
|
|
<button class="btn theme large outline">장바구니</button>
|
|
<button class="btn theme large">구매하기</button>
|
|
</div>
|
|
<div style="margin-top: 24px;">
|
|
<div id="NC_ID_1699495131279295" class="npay_storebtn_bx">
|
|
<div id="NPAY_BUTTON_BOX_ID" class="npay_button_box ">
|
|
<div class="npay_button">
|
|
<div class="npay_text"><span class="npay_blind">NAVER 네이버 ID로 간편구매 네이버페이</span></div>
|
|
<table class="npay_btn_list" cellspacing="0" cellpadding="0">
|
|
<tbody>
|
|
<tr>
|
|
<td class="npay_btn_item"> <a id="NPAY_BUY_LINK_IDNC_ID_1699495131279295" href="#"
|
|
class="npay_btn_link npay_btn_pay btn_green"
|
|
style="box-sizing:content-box; " title="새창"><span class="npay_blind">네이버페이
|
|
구매하기</span></a> </td>
|
|
<td class="npay_btn_item btn_width"> <a id="NPAY_WISH_LINK_IDNC_ID_1699495131279295"
|
|
href="#" class="npay_btn_link npay_btn_zzim "
|
|
style="box-sizing:content-box; " title="새창"><span
|
|
class="npay_blind">찜하기</span></a> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="NPAY_EVENT_ID" class="npay_event"> <a id="NPAY_PROMOTION_PREV_IDNC_ID_1699495131279295"
|
|
href="#" class="npay_more npay_more_prev"><span class="npay_blind">이전</span></a>
|
|
<p id="NPAY_PROMOTION_IDNC_ID_1699495131279295" class="npay_event_text"><strong
|
|
class="event_title">이벤트</strong><a href="https://new-m.pay.naver.com/pcpay/eventbenefit"
|
|
class="event_link" target="_blank">네이버페이</a></p> <a
|
|
id="NPAY_PROMOTION_NEXT_IDNC_ID_1699495131279295" href="#"
|
|
class="npay_more npay_more_next"><span class="npay_blind">다음</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<!-- 영역 리스트 -->
|
|
<c:forEach items="${ resultMap.relmList }" var="relmList" varStatus="status">
|
|
<!-- 메인 롤링 배너 -->
|
|
<!-- 배너 이미지 사이즈 1280x480 -->
|
|
<c:if test="${ relmList.relmDvCd eq '01'}">
|
|
<section class="main-section main-section__main-banner">
|
|
<div class="main-banner" id="main-banner${ relmList.ordr }">
|
|
<c:forEach items="${ resultMap.case01 }" var="case01" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case01.sOrdr }">
|
|
<div><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__btn-container">
|
|
<button class="main-banner__prev" id="main-banner__prev${ relmList.ordr }"><i class="icon icon_prev01"></i><span
|
|
class="visually-hidden">이전</span>
|
|
</button>
|
|
<button class="main-banner__next" id="main-banner__next${ relmList.ordr }"><i class="icon icon_next01"></i><span
|
|
class="visually-hidden">다음</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 그룹별 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '02'}">
|
|
<div class="main-section__container section-2">
|
|
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
|
|
<section class="main-section">
|
|
<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-type1 product-list-type-group product-list-type-group-${ relmList.ordr }" id="product-list-type-group-${ relmList.ordr }-${ baseCase.iOrdr }">
|
|
<div class="product-list-type1__list product-list-type1__list-group">
|
|
|
|
<c:forEach items="${ resultMap.case02 }" var="case02" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case02.sOrdr && baseCase.iOrdr eq case02.iOrdr }">
|
|
<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>
|
|
<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'">
|
|
</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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${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>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 카테고리별 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '03'}">
|
|
<div class="main-section__container section-3">
|
|
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
|
|
<input type="hidden" name="section-mainSiteInnb" value="${ prevewVO.mainSiteInnb }"/>
|
|
<section class="main-section">
|
|
<div class="main-section-header" style="margin-bottom: 48px;">
|
|
<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="category-type-tab">
|
|
<ul class="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>
|
|
<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 }', '${ prevewVO.mainSiteInnb }'); return false;">
|
|
<c:if test = "${not empty baseCase.filCours}">
|
|
<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-type1 product-list-type-category product-list-type-category-${ relmList.ordr }" id="product-list-type-category-${ relmList.ordr }-${ baseCase.iOrdr }">
|
|
<div class="product-list-type1__list ">
|
|
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</section>
|
|
</div>
|
|
|
|
</c:if>
|
|
|
|
<!-- 상품 - 이미지 배너 타입 -->
|
|
<!-- 이미지 사이즈 410x410 -->
|
|
<!-- 상품 - 이미지 배너 타입 (배경 이미지 X ".no-bg" 클래스 추가) -->
|
|
<c:if test="${ relmList.relmDvCd eq '04'}">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
|
|
<c:if test="${ baseCase.relmDvCd eq '04' && relmList.ordr eq baseCase.sOrdr }">
|
|
<c:choose>
|
|
<c:when test="${ empty baseCase.filCours}">
|
|
<div class="main-section__container product-banner no-bg">
|
|
</c:when>
|
|
<c:otherwise>
|
|
<div class="main-section__container product-banner" style="background-image: url('${ baseCase.filCours }');" >
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<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 }">
|
|
<div class="product-banner__left">
|
|
<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>
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<div class="product-banner__right">
|
|
<div class="product-list-type2">
|
|
<div class="product-banner-slick">
|
|
|
|
<c:forEach items="${ resultMap.case04 }" var="case04" varStatus="status" >
|
|
<c:if test="${ relmList.ordr eq case04.sOrdr }">
|
|
<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'">
|
|
</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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${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>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
<div class="product-banner-slick__btn-container">
|
|
<button class="product-banner-slick__prev"><i class="icon icon_prev03"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="product-banner-slick__next"><i class="icon icon_next03"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 기획전 -->
|
|
<!-- 기획전 소개 이미지 사이즈 510x700 -->
|
|
<c:if test="${ relmList.relmDvCd eq '05'}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__exhibition">
|
|
<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="exhibition">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
|
|
<c:if test="${ baseCase.relmDvCd eq '05' && relmList.ordr eq baseCase.sOrdr }">
|
|
<div class="exhibition__left">
|
|
<a href="${ baseCase.itmeCnncUrl }">
|
|
<div class="exhibition__image">
|
|
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</div>
|
|
<div class="exhibition__description">
|
|
<h4 class="exhibition__description-title">${ baseCase.itemMainDc }</h4>
|
|
<c:if test = "${not empty baseCase.itemSubDc}">
|
|
<span class="exhibition__description-subtitle">${ baseCase.itemSubDc }
|
|
<i class="icon icon_exhibition-arrow"></i>
|
|
</span>
|
|
</c:if>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<div class="exhibition__right">
|
|
<div class="product-list-type2">
|
|
<div class="product-list-type2__list">
|
|
|
|
<c:forEach items="${ resultMap.case05 }" var="case05" varStatus="status" >
|
|
<c:if test="${ relmList.ordr eq case05.sOrdr }">
|
|
<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>
|
|
<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'">
|
|
</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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${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">${ 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}">
|
|
${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>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 2x2 타입 -->
|
|
<!-- 상품 - 2x2 타입 (배경 이미지 X, ".no-bg" 클래스 추가) -->
|
|
<c:if test="${ relmList.relmDvCd eq '06'}">
|
|
<div class="main-section__container TwoXTwo-type no-bg">
|
|
<section class="main-section main-section__TwoXTwo-type">
|
|
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd eq '06' && relmList.ordr eq baseCase.sOrdr && baseCase.iOrdr eq '01'}">
|
|
|
|
<div class="TwoXTwo-left">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ baseCase.itemSubSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ baseCase.itemMainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="TwoXTwo-left__container">
|
|
<div class="TwoXTwo-left-slick">
|
|
|
|
<c:forEach items="${ resultMap.case06 }" var="case06" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case06.sOrdr && baseCase.iOrdr eq case06.iOrdr }">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<c:choose>
|
|
<c:when test="${case06.goodsSttusCd eq '02'}">
|
|
<div class="sold-out">
|
|
<span>입고 대기중</span>
|
|
</div>
|
|
</c:when>
|
|
<c:when test="${case06.goodsSttusCd eq '03'}">
|
|
<div class="sold-out">
|
|
<span>${case06.goodsSttusNm}</span>
|
|
</div>
|
|
</c:when>
|
|
</c:choose>
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">
|
|
<img src="${cdnurl}${ case06.goodsImgCours }" alt="${case06.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="${case06.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case06.iconExpsrOrdr-1}" style="order:${case06.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case06.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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case06.goodsNmExpsrOrdr-1}" style="order:${case06.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">${ case06.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case06.pricExpsrOrdr-1}" style="order:${case06.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="${case06.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case06.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">${ case06.slePercent }%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case06.reprsntDcExpsrOrdr-1}" style="order:${case06.reprsntDcExpsrOrdr-1}">
|
|
${case06.reprsntDc}
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case06.rvwEvlScreExpsrOrdr-1}" style="order:${case06.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case06.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case06.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case06.dlvyExpsrOrdr-1}" style="order:${case06.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case06.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
<div class="TwoXTwo-left-slick__btn-container">
|
|
<button class="TwoXTwo-left-slick__prev"><i class="icon icon_prev03"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="TwoXTwo-left-slick__next"><i class="icon icon_next03"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd eq '06' && relmList.ordr eq baseCase.sOrdr && baseCase.iOrdr eq '02'}">
|
|
|
|
<div class="TwoXTwo-right">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<span class="main-section-title__description">${ baseCase.itemSubSj }</span>
|
|
<h2 class="main-section-title__title">
|
|
${ baseCase.itemMainSj }
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="TwoXTwo-right__container">
|
|
<div class="TwoXTwo-right-slick">
|
|
|
|
<c:forEach items="${ resultMap.case06 }" var="case06" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case06.sOrdr && baseCase.iOrdr eq case06.iOrdr }">
|
|
<div class="product-unit">
|
|
<div class="product-unit-image">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">
|
|
<img src="${cdnurl}${ case06.goodsImgCours }" alt="${ case06.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="${case06.iconExpsrAt eq 'Y'}">
|
|
<div class="product-badge-container col order-${case06.iconExpsrOrdr-1}" style="order:${case06.iconExpsrOrdr-1}">
|
|
<c:if test="${not empty case06.goodsIconCd}">
|
|
<c:forEach items="${fn:split(case06.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
|
|
<c:choose>
|
|
<c:when test="${fn:contains(iconCdNm, '-')}">
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.goodsNmExpsrAt eq 'Y'}">
|
|
<div class="product-unit-title col order-${case06.goodsNmExpsrOrdr-1}" style="order:${case06.goodsNmExpsrOrdr-1}">
|
|
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">${ case06.goodsNm }</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.pricExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price col order-${case06.pricExpsrOrdr-1}" style="order:${case06.pricExpsrOrdr-1}">
|
|
<div class="product-unit-price__price">
|
|
<span class="product-unit-price__original <c:if test="${case06.slePercent eq 0}">visually-hidden</c:if>"><fmt:formatNumber value="${case06.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
|
|
<span class="product-unit-price__current"><fmt:formatNumber value="${case06.slepric}" pattern="#,###"/>${curUnit}</span>
|
|
</div>
|
|
<div class="product-unit-price__sale <c:if test="${case06.slePercent eq 0}">visually-hidden</c:if>">
|
|
<span class="percent">${ case06.slePercent }%</span>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.reprsntDcExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case06.reprsntDcExpsrOrdr-1}" style="order:${case06.reprsntDcExpsrOrdr-1}">
|
|
${case06.reprsntDc}
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.rvwEvlScreExpsrAt eq 'Y'}">
|
|
<div class="product-unit-rating col order-${case06.rvwEvlScreExpsrOrdr-1}" style="order:${case06.rvwEvlScreExpsrOrdr-1}">
|
|
<i class="icon icon_rating-star"></i>
|
|
<span class="product-unit-rating__score"><c:out value="${case06.avgEvlScore}" default="0.0"/></span>
|
|
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case06.cntEvlScor}" pattern="#,###"/>)</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${case06.dlvyExpsrAt eq 'Y'}">
|
|
<div class="product-unit-price__monthly-payment col order-${case06.dlvyExpsrOrdr-1}" style="order:${case06.dlvyExpsrOrdr-1}">
|
|
<c:out value="${case06.dlvyGroupNm}"/>
|
|
</div>
|
|
</c:if>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
</div>
|
|
<div class="TwoXTwo-right-slick__btn-container">
|
|
<button class="TwoXTwo-right-slick__prev"><i class="icon icon_prev03"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="TwoXTwo-right-slick__next"><i class="icon icon_next03"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 상품 - 4열 슬라이드 타입 -->
|
|
<c:if test="${ relmList.relmDvCd eq '07'}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__four-row">
|
|
<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-type1">
|
|
<div class="four-row-slick">
|
|
<c:forEach items="${ resultMap.case07 }" var="case07" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case07.sOrdr }">
|
|
<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'">
|
|
</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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${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>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="four-row-slick__btn-container">
|
|
<button class="four-row-slick__prev"><i class="icon icon_prev02"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="four-row-slick__next"><i class="icon icon_next02"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 타임세일 -->
|
|
<!-- 타임세일 (배경 이미지 X, ".no-bg" 클래스 추가) -->
|
|
<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}">
|
|
<div class="main-section__container time-sale no-bg">
|
|
</c:when>
|
|
<c:otherwise>
|
|
<div class="main-section__container time-sale" style="background-image: url('${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }');" >
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:if>
|
|
</c:forEach>
|
|
<section class="main-section main-section__time-sale">
|
|
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
|
|
<c:if test="${ baseCase.relmDvCd == '08' && relmList.ordr eq baseCase.sOrdr }">
|
|
<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>
|
|
</c:if>
|
|
</c:forEach>
|
|
|
|
<div class="time-sale">
|
|
<span class="visually-hidden">타임세일</span>
|
|
<div class="wrapper">
|
|
<div class="time-sale-slick">
|
|
|
|
<c:forEach items="${ resultMap.case08 }" var="case08" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case08.sOrdr }">
|
|
<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)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${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>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
<div class="time-sale-slick__btn-container">
|
|
<button class="time-sale-slick__prev"><i class="icon icon_prev02"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="time-sale-slick__next"><i class="icon icon_next02"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 베스트 리뷰 -->
|
|
<c:if test="${ relmList.relmDvCd eq '09'}">
|
|
<div class="main-section__container">
|
|
<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="best-review">
|
|
<div class="best-review-slick">
|
|
<c:forEach items="${ resultMap.case09 }" var="case09" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case09.sOrdr }">
|
|
<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>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="best-review-slick__btn-container">
|
|
<button class="best-review-slick__prev"><i class="icon icon_prev02"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="best-review-slick__next"><i class="icon icon_next02"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 매거진 -->
|
|
<!-- 매거진 썸네일 이미지 사이즈 500x360 -->
|
|
<c:if test="${ relmList.relmDvCd eq '10'}">
|
|
<div class="main-section__container magazine">
|
|
<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="magazine-slick col-2">
|
|
<c:forEach items="${ resultMap.case10 }" var="case10" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case10.sOrdr }">
|
|
<div>
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=detail&bbsId=${ case10.bbsId }&bbscttInnb=${ case10.bbscttInnb }&mbrid=${ resultMap.loginFlag }">
|
|
<img src="${cdnurl}${ case10.reprsntImgSysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="magazine-slick__btn-container">
|
|
<button class="magazine-slick__prev"><i class="icon icon_prev02"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="magazine-slick__next"><i class="icon icon_next02"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</div>
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=subPage&bbsId=magazine" class="magazine__more-link">더보기
|
|
<i class="icon icon_magazine-more-icon"></i>
|
|
</a>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- 브랜드 및 제품 바로가기 -->
|
|
<!-- 좌측이미지 사이즈 영역 620x400 -->
|
|
<!-- 우측이미지 2개 사이즈 영역 각각 620x180 -->
|
|
<c:if test="${ relmList.relmDvCd eq '11'}">
|
|
<div class="main-section__container">
|
|
<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 }">
|
|
<c:if test="${ case11.iOrdr eq '1' }">
|
|
<div class="left">
|
|
<a href="${ case11.itmeCnncUrl }">
|
|
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'" >
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
<div class="right">
|
|
<c:forEach items="${ resultMap.case11 }" var="case11" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case11.sOrdr }">
|
|
<c:if test="${ case11.iOrdr eq '2' }">
|
|
<div class="first">
|
|
<a href="${ case11.itmeCnncUrl }">
|
|
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${ case11.iOrdr eq '3' }">
|
|
<div class="second">
|
|
<a href="${ case11.itmeCnncUrl }">
|
|
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
|
|
</a>
|
|
</div>
|
|
</c:if>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
<!-- 띠 배너 -->
|
|
<c:if test="${ relmList.relmDvCd eq '12'}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__small-banner01">
|
|
<div class="small-banner01">
|
|
<c:forEach items="${ resultMap.case12 }" var="case12" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case12.sOrdr }">
|
|
<div><a href="${ case12.itmeCnncUrl }"><img src="${cdnurl}${ case12.filCours }/${ case12.sysFilNm }" alt="배너 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'"></a></div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="small-banner01__btn-container">
|
|
<button class="small-banner01__prev"><i class="icon icon_prev04"></i><span
|
|
class="visually-hidden">이전</span></button>
|
|
<button class="small-banner01__next"><i class="icon icon_next04"></i><span
|
|
class="visually-hidden">다음</span></button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
<!-- 공지사항 -->
|
|
<c:if test="${ relmList.relmDvCd eq '13'}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__notice">
|
|
<div class="main-section-header">
|
|
<div class="main-section-title">
|
|
<h2 class="main-section-title__title">
|
|
공지사항
|
|
</h2>
|
|
</div>
|
|
<div class="notice-line">
|
|
<i class="icon icon_notice-speaker"></i>
|
|
<div class="notice-line-slick">
|
|
<c:forEach items="${ resultMap.case13 }" var="case13" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case13.sOrdr }">
|
|
<div>
|
|
<span class="text">
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=CM&reqUrl=csc&bbsId=${ case13.bbsId }&bbscttInnb=${ case13.bbscttInnb }">
|
|
${ case13.sj }
|
|
</a>
|
|
</span>
|
|
<span class="date">
|
|
<c:set var="registDt" value="${fn:replace(case13.registDt, 'T', ' ')}" />
|
|
<fmt:parseDate var="registDt" value="${ registDt }" pattern="yyyy-MM-dd HH:mm:ss"/>
|
|
<fmt:formatDate value="${registDt}" pattern="yyyy-MM-dd"/>
|
|
</span>
|
|
</div>
|
|
</c:if>
|
|
</c:forEach>
|
|
</div>
|
|
<div class="btn-container">
|
|
<button class="notice-line__prev">
|
|
<i class="icon icon_notice-chevron"></i>
|
|
</button>
|
|
<button class="notice-line__next">
|
|
<i class="icon icon_notice-chevron2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</c:if>
|
|
<!-- FAQ -->
|
|
<c:if test="${ relmList.relmDvCd eq '14'}">
|
|
<div class="main-section__container">
|
|
<section class="main-section main-section__notice">
|
|
<div class="notice">
|
|
<c:forEach items="${ resultMap.case14 }" var="case14" varStatus="status">
|
|
<c:if test="${ relmList.ordr eq case14.sOrdr }">
|
|
|
|
<c:if test="${ case14.iOrdr eq '1' }">
|
|
<div class="notice__box">
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=faq">
|
|
<i class="icon icon_notice01"></i>
|
|
</a>
|
|
<h4 class="notice__title"><a href="">${ case14.itemMainSj }</a></h4>
|
|
<span class="notice__description">${ case14.itemSubSj }</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${ case14.iOrdr eq '2' }">
|
|
<div class="notice__box">
|
|
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=useGuidance&bbsId=use_guidance">
|
|
<i class="icon icon_notice02"></i>
|
|
</a>
|
|
<h4 class="notice__title"><a href="">${ case14.itemMainSj }</a></h4>
|
|
<span class="notice__description">${ case14.itemSubSj }</span>
|
|
</div>
|
|
</c:if>
|
|
<c:if test="${ case14.iOrdr eq '3' }">
|
|
<div class="notice__box">
|
|
<i class="icon icon_notice03"></i>
|
|
<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>
|
|
</section>
|
|
</div>
|
|
</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;
|
|
}
|
|
|
|
.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 () {
|
|
|
|
// 메인 롤링 배너
|
|
// 240213 배너 바뀔때 버튼 페이드아웃/인 애니메이션 추가
|
|
let main_banner = $('.main-banner');
|
|
let main_banner__prev = $('.main-banner__prev');
|
|
let main_banner__next = $('.main-banner__next');
|
|
|
|
for (let i = 0; i < main_banner.length; i++) {
|
|
let main = main_banner[i].id;
|
|
let prev = main_banner__prev[i].id;
|
|
let next = main_banner__next[i].id;
|
|
|
|
var mainSlider = $('#' + main).slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
variableWidth: true,
|
|
autoplay: true,
|
|
autoplaySpeed: 4000,
|
|
speed: 900,
|
|
centerMode: true,
|
|
infinite: true,
|
|
dots: true,
|
|
prevArrow: $('#' + prev),
|
|
nextArrow: $('#' + next),
|
|
}).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
|
|
// $('#'+main+', #'+next+'').fadeOut(200).delay(300).fadeIn(300);
|
|
});
|
|
}
|
|
|
|
// 상품 - 상품 묶음 리스트 타입
|
|
$('.product-bundle-list .product-list-type2').each(function (index, element) {
|
|
var $slider = $(element).find('.product-bundle-list-slick');
|
|
var $btnContainer = $slider.next('.product-bundle-list-slick__btn-container');
|
|
|
|
$slider.slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
speed: 900,
|
|
infinite: true,
|
|
prevArrow: $btnContainer.find('.product-bundle-list-slick__prev'),
|
|
nextArrow: $btnContainer.find('.product-bundle-list-slick__next'),
|
|
});
|
|
|
|
var categoryBtn = $(element).closest('.product-bundle-list').find('li button');
|
|
var categoryContent = $(element).closest('.product-bundle-list').find('.product-list-type2');
|
|
categoryBtn.on('click', function () {
|
|
$(this).parent().siblings().find('button').removeClass('active');
|
|
$(this).addClass('active');
|
|
var index = $(this).parent().index();
|
|
console.log(index);
|
|
categoryContent.removeClass('active');
|
|
categoryContent.eq(index).addClass('active');
|
|
categoryContent.eq(index).find('.product-bundle-list-slick').slick('setPosition');
|
|
|
|
});
|
|
});
|
|
|
|
// 상품 - 타임세일 슬라이드
|
|
$('.main-section__time-sale > .time-sale').each(function () {
|
|
var $slider = $(this).find('.time-sale-slick');
|
|
var $btnContainer = $(this).find('.time-sale-slick__btn-container');
|
|
|
|
$slider.slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
speed: 900,
|
|
infinite: true,
|
|
prevArrow: $btnContainer.find('.time-sale-slick__prev'),
|
|
nextArrow: $btnContainer.find('.time-sale-slick__next'),
|
|
});
|
|
});
|
|
|
|
|
|
// 중간 띠 배너 1 슬라이드
|
|
$('.main-section__small-banner01').each(function () {
|
|
var $slider = $(this).find('.small-banner01');
|
|
var $btnContainer = $(this).find('.small-banner01__btn-container');
|
|
|
|
$slider.slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
variableWidth: true,
|
|
speed: 900,
|
|
infinite: true,
|
|
dots: true,
|
|
centerMode: true,
|
|
prevArrow: $btnContainer.find('.small-banner01__prev'),
|
|
nextArrow: $btnContainer.find('.small-banner01__next'),
|
|
});
|
|
});
|
|
|
|
|
|
// 상품 - 2x2 타입
|
|
$('.TwoXTwo-type').each(function () {
|
|
var $leftSlider = $(this).find('.TwoXTwo-left-slick');
|
|
var $rightSlider = $(this).find('.TwoXTwo-right-slick');
|
|
var $leftBtnContainer = $(this).find('.TwoXTwo-left-slick__btn-container');
|
|
var $rightBtnContainer = $(this).find('.TwoXTwo-right-slick__btn-container');
|
|
|
|
$leftSlider.slick({
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2,
|
|
speed: 900,
|
|
infinite: true,
|
|
prevArrow: $leftBtnContainer.find('.TwoXTwo-left-slick__prev'),
|
|
nextArrow: $leftBtnContainer.find('.TwoXTwo-left-slick__next'),
|
|
});
|
|
|
|
$rightSlider.slick({
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2,
|
|
speed: 900,
|
|
infinite: true,
|
|
prevArrow: $rightBtnContainer.find('.TwoXTwo-right-slick__prev'),
|
|
nextArrow: $rightBtnContainer.find('.TwoXTwo-right-slick__next'),
|
|
});
|
|
|
|
})
|
|
$('.main-section__small-banner02').each(function () {
|
|
var $slider = $(this).find('.small-banner02');
|
|
var $btnContainer = $(this).find('.small-banner02__btn-container');
|
|
|
|
$slider.slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
variableWidth: true,
|
|
speed: 900,
|
|
infinite: true,
|
|
dots: true,
|
|
centerMode: true,
|
|
prevArrow: $btnContainer.find('.small-banner02__prev'),
|
|
nextArrow: $btnContainer.find('.small-banner02__next'),
|
|
});
|
|
});
|
|
|
|
|
|
// 상품 - 이미지배너 타입
|
|
$('.main-section__product-banner > .product-banner').each(function () {
|
|
var $slider = $(this).find('.product-banner-slick');
|
|
var $btnContainer = $(this).find('.product-banner-slick__btn-container');
|
|
|
|
$slider.slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
speed: 900,
|
|
infinite: true,
|
|
prevArrow: $btnContainer.find('.product-banner-slick__prev'),
|
|
nextArrow: $btnContainer.find('.product-banner-slick__next'),
|
|
});
|
|
});
|
|
|
|
|
|
// 상품 - 4열 슬라이드 타입
|
|
$('.product-list-type1').each(function () {
|
|
var $slider = $(this).find('.four-row-slick');
|
|
var $btnContainer = $(this).find('.four-row-slick__btn-container');
|
|
|
|
$slider.slick({
|
|
slidesToShow: 4,
|
|
slidesToScroll: 4,
|
|
speed: 900,
|
|
infinite: true,
|
|
prevArrow: $btnContainer.find('.four-row-slick__prev'),
|
|
nextArrow: $btnContainer.find('.four-row-slick__next'),
|
|
});
|
|
});
|
|
|
|
// 상단 이동 스크롤 버튼
|
|
$('.quick-menu__to-top > button').click(function () {
|
|
$('html, body').scrollTop(0);
|
|
});
|
|
|
|
// 베스트 리뷰
|
|
$('.best-review').each(function () {
|
|
var $slider = $(this).find('.best-review-slick');
|
|
var $btnContainer = $(this).find('.best-review-slick__btn-container');
|
|
|
|
$slider.slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
speed: 900,
|
|
infinite: true,
|
|
prevArrow: $btnContainer.find('.best-review-slick__prev'),
|
|
nextArrow: $btnContainer.find('.best-review-slick__next'),
|
|
});
|
|
});
|
|
|
|
// 매거진 리뷰
|
|
$('.main-section__magazine > .magazine').each(function () {
|
|
var $slider = $(this).find('.magazine-slick');
|
|
var $btnContainer = $(this).find('.magazine-slick__btn-container');
|
|
|
|
$slider.slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
variableWidth: true,
|
|
speed: 900,
|
|
centerMode: true,
|
|
infinite: true,
|
|
prevArrow: $btnContainer.find('.magazine-slick__prev'),
|
|
nextArrow: $btnContainer.find('.magazine-slick__next'),
|
|
});
|
|
});
|
|
|
|
// 공지사항 롤링
|
|
$('.notice-line').each(function () {
|
|
var $slider = $(this).find('.notice-line-slick');
|
|
var $btnContainer = $(this).find('.btn-container');
|
|
|
|
$slider.slick({
|
|
slidesToShow: 1,
|
|
slidesToShow: 1,
|
|
speed: 900,
|
|
infinite: true,
|
|
vertical: true,
|
|
autoplay: true,
|
|
prevArrow: $btnContainer.find('.notice-line__prev'),
|
|
nextArrow: $btnContainer.find('.notice-line__next'),
|
|
});
|
|
});
|
|
|
|
|
|
// 상품 그룹 탭
|
|
$('.section-2').each(function () {
|
|
let ordr = $(this).find('input[name="section-ordr"]').val();
|
|
fn_product_group_type(ordr, "1");
|
|
});
|
|
|
|
|
|
// 상품 카테고리 탭
|
|
$('.section-3').each(function () {
|
|
let ordr = $(this).find('input[name="section-ordr"]').val();
|
|
let mainSiteInnb = $(this).find('input[name="section-mainSiteInnb"]').val();
|
|
fn_product_category_type(ordr, "1", mainSiteInnb);
|
|
});
|
|
|
|
|
|
// 타임이벤트시 시간 떨어뜨리는 함수
|
|
startCountdown();
|
|
|
|
// 베스트리뷰 네이버페이 이미지 수정
|
|
$('.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());
|
|
});
|
|
|
|
|
|
// 팝업 창 오픈
|
|
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-group-' + ordr).hide();
|
|
$('#product-list-type-group-' + ordr + '-' + tabNo).show();
|
|
}
|
|
|
|
// 상품 카테고리 탭 클릭 시
|
|
const fn_product_category_type = function (ordr, tabNo, mainSiteInnb) {
|
|
$('.category-type-tab__btn-' + ordr).removeClass('active');
|
|
$('#category-type-tab__btn-' + ordr + '-' + tabNo).addClass('active');
|
|
|
|
fn_select_product_category(ordr, tabNo, mainSiteInnb);
|
|
|
|
$('.product-list-type-category-' + ordr).hide();
|
|
$('#product-list-type-category-' + ordr + '-' + tabNo).show();
|
|
}
|
|
|
|
|
|
// 상품 카테고리 가져오기
|
|
const fn_select_product_category = function (ordr, tabNo, mainSiteInnb) {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/sopmal/main/selectMainSiteDesignCtgryListInqire",
|
|
data: {
|
|
ordr: ordr,
|
|
expsrOrdr: tabNo,
|
|
mainSiteInnb: mainSiteInnb
|
|
},
|
|
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}';
|
|
|
|
$.each(result, function (index, result) {
|
|
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 + '" data-badge-cd="' + iconCdNm + '">' + temp + '</span>';
|
|
} else {
|
|
str += '<span class="product-badge ' + lower + '" data-badge-cd="' + iconCdNm + '">' + 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>';
|
|
});
|
|
|
|
$('#product-list-type-category-' + ordr + '-' + tabNo + ' > .product-list-type1__list').html(str);
|
|
}
|
|
|
|
// 기본 값 설정
|
|
function fn_default_message(key, defaultMessage) {
|
|
return key ? key : defaultMessage;
|
|
}
|
|
|
|
|
|
// 매거진 상세
|
|
const fn_move_dtl = (bbscttInnb) => {
|
|
$("#bbscttInnb").val(bbscttInnb);
|
|
$("#dtlForm").submit();
|
|
}
|
|
|
|
//타임 이벤트 카운트 다운
|
|
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 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;
|
|
}
|
|
|
|
// console.log("result : ", result);
|
|
|
|
// let hours = String(Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0');
|
|
// let minutes = String(Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
|
|
// let seconds = String(Math.floor((difference % (1000 * 60)) / 1000)).padStart(2, '0');
|
|
|
|
$(this).text(result);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// 1초마다 카운트다운 업데이트
|
|
const timer = setInterval(countDown, 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);
|
|
}
|
|
}
|
|
|
|
|
|
// 241001 우측 상품리스트 슬라이드
|
|
$('.recentProductSlick').slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
infinite: false,
|
|
draggable: false,
|
|
speed: 0,
|
|
prevArrow: $('.recentProductSlick__prev'),
|
|
nextArrow: $('.recentProductSlick__next'),
|
|
});
|
|
|
|
// 241001 우측 상품리스트 슬라이드 인덱스
|
|
var recentProductIndex = 0;
|
|
$('.recentProductSlick__index .total').text($('.recentProductSlick .slick-slide').length);
|
|
|
|
// on slick change, get current index and update the index
|
|
$('.recentProductSlick').on('afterChange', function (event, slick, currentSlide) {
|
|
recentProductIndex = currentSlide;
|
|
$('.recentProductSlick__index .current').text(recentProductIndex + 1);
|
|
});
|
|
</script>
|
|
</html> |