fix : 쇼핑몰 구독서비스 스크롤 상단바 추가

src/main/resources/mybatis/xml/mapper/gcone/goods/subsvc/BOSubsvcMapper.xml

@@ -74,60 +74,61 @@
 			, CAST(@ROWNUM:=@ROWNUM + 1 AS UNSIGNED) AS RNUM
 			FROM (
 				SELECT COUNT(*) OVER() AS TOT_CNT
-				, GC.SUBSVC_INNB
+				, GS.SUBSVC_INNB
-				, GC.SOPMAL_CD
+				, GS.SOPMAL_CD
-				, GC.SUBSVC_NM
+				, CONCAT(GS.SUBSVC_NM, ' (', GS.SUBSVC_GNR_NM, ')') AS SUBSVC_CONCAT_NM
-				, GC.SUBSVC_GNR
+				, GS.SUBSVC_NM
-				, GC.SUBSVC_GNR_NM
+				, GS.SUBSVC_GNR
-				, GC.DLVY_CNT
+				, GS.SUBSVC_GNR_NM
-				, GC.INVNTRY_QY
+				, GS.DLVY_CNT
-				, GC.INVNTRY_QY - GC.USEFUL_INVNTRY_QY AS AVAIL_QT		/*가용제고*/
+				, GS.INVNTRY_QY
-				, GC.SUBSVC_STTUS_CD
+				, GS.INVNTRY_QY - GS.USEFUL_INVNTRY_QY AS AVAIL_QT		/*가용제고*/
-				, FN_GET_COMMCODE_NAME('GOODS_STTUS', GC.SUBSVC_STTUS_CD) AS SUBSVC_STTUS		/*구독서비스 상태*/
+				, GS.SUBSVC_STTUS_CD
-				, FN_GET_COMMCODE_NAME('EXPSR_DV', GC.EXPSR_DV_CD) AS EXPSR_DV				/*노출구분*/
+				, FN_GET_COMMCODE_NAME('GOODS_STTUS', GS.SUBSVC_STTUS_CD) AS SUBSVC_STTUS		/*구독서비스 상태*/
-				, GC.SUBSVC_CT			/*구독료*/
+				, FN_GET_COMMCODE_NAME('EXPSR_DV', GS.EXPSR_DV_CD) AS EXPSR_DV				/*노출구분*/
-				, GC.TME_DLVY_AMT		/*1회배송비*/
+				, GS.SUBSVC_CT			/*구독료*/
-				, GC.CNSMRPRIC			/*소비자가*/
+				, GS.TME_DLVY_AMT		/*1회배송비*/
-				, GC.SUBSVC_CT + (TME_DLVY_AMT * DLVY_CNT) as SELPRIC							  /*실판매가=구독료+(1회배송비X배송횟수)*/
+				, GS.CNSMRPRIC			/*소비자가*/
-				, GC.IMG							/*섬네일 이미지*/
+				, GS.SUBSVC_CT + (TME_DLVY_AMT * DLVY_CNT) as SELPRIC							  /*실판매가=구독료+(1회배송비X배송횟수)*/
-				, GC.LAST_PROCS_ODR				/*최종차수*/
+				, GS.IMG							/*섬네일 이미지*/
-				FROM GC_SUBSVC GC
+				, GS.LAST_PROCS_ODR				/*최종차수*/
-				WHERE GC.USE_AT = 'Y'
+				FROM GC_SUBSVC GS
-				  AND GC.SOPMAL_CD = #{sopmalCd}
+				WHERE GS.USE_AT = 'Y'
+				  AND GS.SOPMAL_CD = #{sopmalCd}
 				<if test="srchSelSubsvcNm != null and srchSelSubsvcNm != ''">
-					AND GC.SUBSVC_NM = #{srchSelSubsvcNm}						/*구독서비스 명*/
+					AND GS.SUBSVC_NM = #{srchSelSubsvcNm}						/*구독서비스 명*/
 				</if>
 				<if test="srchSelSubsvcGnr != null and srchSelSubsvcGnr != ''">
-				AND GC.SUBSVC_GNR = #{srchSelSubsvcGnr}						/*기수*/
+				AND GS.SUBSVC_GNR = #{srchSelSubsvcGnr}						/*기수*/
 				</if>
 				<if test="srchSubsvcNm != null and srchSubsvcNm != ''">
-				AND GC.SUBSVC_NM LIKE CONCAT('%',#{srchSubsvcNm},'%')			/*구독서비스 명*/
+				AND GS.SUBSVC_NM LIKE CONCAT('%',#{srchSubsvcNm},'%')			/*구독서비스 명*/
 				</if>
 				<if test="srchSubsvcGnrNm != null and srchSubsvcGnrNm != ''">
-				AND GC.SUBSVC_GNR_NM LIKE CONCAT('%',#{srchSubsvcGnrNm},'%')	/*기수명*/
+				AND GS.SUBSVC_GNR_NM LIKE CONCAT('%',#{srchSubsvcGnrNm},'%')	/*기수명*/
 				</if>
 				<choose>
 					<when test="@com.wb.domainserver.util.dataaccess.MybaitsUtil@isNotEmpty(srchArrSubsvcSttusCd)">
 						/*판매상태*/
-						AND GC.SUBSVC_STTUS_CD IN
+						AND GS.SUBSVC_STTUS_CD IN
 						<foreach collection="srchArrSubsvcSttusCd" item="subsvcSttusCd" open="(" close=")" separator=",">
 							#{subsvcSttusCd}
 						</foreach>
 					</when>
 				</choose>
 				<if test="srchExpsrDvCd != null and srchExpsrDvCd != ''">
-				AND GC.EXPSR_DV_CD = #{srchExpsrDvCd}						/*노출여부*/
+				AND GS.EXPSR_DV_CD = #{srchExpsrDvCd}						/*노출여부*/
 				</if>
 				ORDER BY
 				<choose>
 				    <when test="sortDv == 'subsvcGnrAsc'">
-						GC.SUBSVC_NM ASC, SUBSVC_GNR ASC,
+						GS.SUBSVC_NM ASC, SUBSVC_GNR ASC,
 					</when>
 				    <otherwise>
-						GC.SUBSVC_NM DESC, SUBSVC_GNR DESC,
+						GS.SUBSVC_NM DESC, SUBSVC_GNR DESC,
 					</otherwise>
 				</choose>
-				GC.SUBSVC_INNB ASC
+				GS.SUBSVC_INNB ASC
 			) TB
 			WHERE (@ROWNUM:=0)=0
 		) PV

src/main/webapp/WEB-INF/views/sopmal/main/SubscribeR.jsp

@@ -16,6 +16,7 @@
 
 <head>
 	<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
+	<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
 	<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
 </head>
 
@@ -23,12 +24,14 @@
 	$(document).ready(function() {
 		var subsvcInnb = $('#subsvcInnb').val();
 		fn_select_subsvcDetail(subsvcInnb);
+		fn_scroll_event();
 	});
 
 	/******************************************************
 	 *  구독서비스 상세 조회
 	 * ****************************************************/
 	const fn_select_subsvcDetail = function(subsvcInnb) {
+		var cdnurl = '${cdnurl}';
 		var curUnit = '${curUnit}';
 
 		$.ajax({
@@ -49,15 +52,23 @@
 				$('#dscntRaito').text(data.dscntRaito + '%');
 				$('#subsvcDc').html(data.subsvcDc);
 
+				$("#fixedImg").attr("src", cdnurl + data.img);
+				$('#fixedTitle').text(data.subsvcConcatNm);
+				$('#fixedPrice').text(fn_format_number(data.selpric));
+
 				switch (data.subsvcSttusCd) {
 					case '01':
 						$('#subscribeBtn').text('구독하기');
 						$('#subscribeBtn').prop('disabled', false);
+						$('#fixedButton').text('구독하기');
+						$('#fixedButton').prop('disabled', false);
 						break;
 					case '02':
 					case '03':
 						$('#subscribeBtn').text(data.subsvcSttus);
 						$('#subscribeBtn').prop('disabled', true);
+						$('#fixedButton').text(data.subsvcSttus);
+						$('#fixedButton').prop('disabled', true);
 						break;
 					default:
 						break;
@@ -69,6 +80,47 @@
 	const fn_format_number = function(number) {
 		return Number(number).toLocaleString();
 	}
+
+	/*************************************************************
+	 탭, 스크롤 이벤트
+	 **************************************************************/
+	const fn_scroll_event = () => {
+		function handleTabScroll() {
+			var scrollTop = $(window).scrollTop();
+			var fixedTabHeight = 100;
+			var initialProductDetailTop = $('#subsvcDc').offset().top;
+
+			var threshold = initialProductDetailTop - fixedTabHeight;
+
+			if (scrollTop > threshold) {
+				if (!$(".productDetailTab").hasClass("fixed")) {
+					$(".productDetailTab").addClass("fixed");
+					$(".fixedProduct").addClass("fixed");
+					$('#subsvcDc').css("margin-top", 62 + "px");
+				}
+			} else {
+				if ($(".productDetailTab").hasClass("fixed")) {
+					$(".productDetailTab").removeClass("fixed");
+					$(".fixedProduct").removeClass("fixed");
+					$('#subsvcDc').css("margin-top", "");
+				}
+			}
+		}
+
+		var debounce = function (func, delay) {
+			var timer;
+			return function () {
+				var context = this,
+						args = arguments;
+				clearTimeout(timer);
+				timer = setTimeout(function () {
+					func.apply(context, args);
+				}, delay);
+			};
+		};
+
+		$(window).scroll(debounce(handleTabScroll, 20));
+	}
 </script>
 <style>
 	.container {
@@ -112,6 +164,10 @@
 		border: 1px solid #e9ecef;
 		padding: clamp(12px, 3%, 18px);
 	}
+
+	.productDetailTab.fixed {
+		height: 100px;
+	}
 </style>
 <body>
 <%-- 공통 Header --%>
@@ -167,7 +223,25 @@
 						<span style="display: block; width: 100%; text-align: center; font-size: 32px;">구독 서비스 상품 준비중</span>
 					</c:otherwise>
 				</c:choose>
-
+				<div class="productDetailTab">
+					<div class="fixedProduct">
+						<div class="fixedProduct__left">
+							<div class="fixedProduct__image">
+								<img id="fixedImg" alt="상품이미지" onerror="this.src='/pc/images/image_placeholder.png'">
+							</div>
+							<div class="fixedProduct__product">
+								<p id="fixedTitle" class="fixedProduct__title">상품명</p>
+								<span class="fixedProduct__price">
+                                    <span id="fixedPrice" class="comma">상품가격</span>
+                                    <span class="priceUnit"></span><span class="priceUnit">${curUnit}</span>
+                                </span>
+							</div>
+						</div>
+						<div class="fixedProduct__right">
+							<button type="button" id="fixedButton" class="btn theme lg purchsOrdr">구독하기</button>
+						</div>
+					</div>
+				</div>
 				<div id="subsvcDc" class="ck-content">구독 서비스 상품 설명</div>
 			</form>
 		</div>