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

feat: 게시판 연관상품 목록 표준화

Browse Source
This commit is contained in:
이주일
2026-07-18 11:57:45 +09:00
parent 713bd6a64d
commit afbc268b57
4 changed files with 71 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/main/webapp/WEB-INF/views/sopmal/csc/BbscttDtlR.jsp
View File

@@ -21,6 +21,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%-- 공통 include --%>
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
<style>
.relate-goods-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
</style>
</head>
<script>
$(document).ready(function () {
@@ -132,13 +139,13 @@
});
} else { //메인화면 호출 안할 시
// 상품 - 4열 슬라이드 타입 (이벤트 추천 상품 슬릭 이벤트)
$('.four-row-slick').slick({
$('.relate-goods-slick').slick({
slidesToShow: 4,
slidesToScroll: 4,
speed: 900,
infinite: true,
prevArrow: $('.four-row-slick__prev'),
nextArrow: $('.four-row-slick__next'),
prevArrow: $('.relate-goods-slick__prev'),
nextArrow: $('.relate-goods-slick__next'),
});
}
}
@@ -938,7 +945,7 @@
</div>
</c:if>
<%-------------------------------%>
<c:if test="${bbsInfo.recomendGoodsExpsrAt eq 'Y' && not empty goodsList.relateInfoList}">
<c:if test="${bbsInfo.recomendGoodsExpsrAt eq 'Y' && not empty goodsList}">
<div class="cartOrder">
<div class="main-section__container">
<section class="main-section main-section__four-row">
@@ -950,22 +957,18 @@
</div>
</div>
<div class="product-list-type1">
<div class="four-row-slick evtSlick">
<c:forEach var = "item" items="${goodsList.relateInfoList}">
<div class="${fn:length(goodsList) gt 4 ? 'four-row-slick relate-goods-slick evtSlick' : 'relate-goods-grid'}">
<c:forEach var = "item" items="${goodsList}">
<c:if test = "${not empty item.goodsInnb}">
<div class="product-unit">
<div class="product-unit-image">
<c:forEach var = "img" items = "${goodsList.relateImgList}">
<c:if test = "${item.goodsInnb eq img.goodsInnb}">
<button type="button" onclick = "fn_move_goods_dtl(<c:out value="${item.goodsInnb}"/>)" value="${item.goodsInnb}">
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<img src="<c:out value = "${cdnurl}${img.img}"/>" style="width: 100%;
<button type="button" onclick = "fn_move_goods_dtl(<c:out value="${item.goodsInnb}"/>)" value="${item.goodsInnb}">
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<img src="<c:out value = "${cdnurl}${item.img}"/>" style="width: 100%;
height: 304px; /* 원하는 고정 높이 설정 */
object-fit: cover; /* 이미지 비율을 유지하면서 영역에 맞게 자름 */"
onerror="this.src='/pc/images/image_placeholder.png'" alt="해당 이미지에 대한 설명">
</button>
</c:if>
</c:forEach>
onerror="this.src='/pc/images/image_placeholder.png'" alt="해당 이미지에 대한 설명">
</button>
</div>
<div class="product-unit-info">
<div class="product-badge-container">
@@ -996,48 +999,42 @@
</button>
</div>
<div class="product-unit-price">
<c:forEach var="goodsOpt" items="${goodsList.relateGoodsOptList}">
<c:if test="${item.goodsInnb eq goodsOpt.goodsInnb && goodsOpt.stdrDvAt eq 'Y'}">
<div class="product-unit-price__price">
<span class="product-unit-price__original">
<fmt:formatNumber value="${goodsOpt.cnsmrpric}" pattern="#,###"/>
<fmt:formatNumber value="${item.cnsmrpric}" pattern="#,###"/>
</span>
<span class="product-unit-price__current">
<fmt:formatNumber value="${goodsOpt.slepric}" pattern="#,###"/>
<fmt:formatNumber value="${item.slepric}" pattern="#,###"/>
</span>
</div>
<div class="product-unit-price__sale">
<span class="percent"><c:out value = "${goodsOpt.slePercent}"/>%</span>
<span class="percent"><c:out value = "${item.slePercent}"/>%</span>
</div>
</c:if>
</c:forEach>
</div>
<span class="product-unit-price__monthly-payment"><c:out value = "${item.srtDc}"/></span>
</div>
<div class="product-unit-rating">
<i class="icon icon_rating-star"></i>
<c:forEach var = "evlInfo" items="${goodsList.goodsRvwEvlList}">
<c:if test = "${evlInfo.goodsInnb eq item.goodsInnb}">
<span class="product-unit-rating__score"><c:out value = "${evlInfo.avgEvlScore}"/>${goodsOpt.goodInnb}</span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${evlInfo.cntBbsctt}" pattern="#,###"/>)</span>
</c:if>
</c:forEach>
<span class="product-unit-rating__score"><c:out value = "${item.avgEvlScore}"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${item.cntBbsctt}" pattern="#,###"/>)</span>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<c:if test="${fn:length(goodsList) gt 4}">
<div class="four-row-slick__btn-container">
<button class="four-row-slick__prev">
<button class="relate-goods-slick__prev">
<i class="icon icon_prev02"></i>
<span class="visually-hidden">이전</span>
</button>
<button class="four-row-slick__next">
<button class="relate-goods-slick__next">
<i class="icon icon_next02"></i>
<span class="visually-hidden">다음</span>
</button>
</div>
</c:if>
</div>
</section>
</div>