fix : 쇼핑몰 구독서비스 관련(모바일)

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

@@ -33,16 +33,19 @@
 				 , GS.SUBSVC_NM
 				 , GS.SUBSVC_GNR
 				 , GS.SUBSVC_GNR_NM
+				 , CONCAT(GS.SUBSVC_NM, ' (', GS.SUBSVC_GNR_NM, ')') AS SUBSVC_CONCAT_NM
 				 , GS.DLVY_CNT
+				 , GS.DLVY_CYCLE
 				 , GS.INVNTRY_QY
-				 , GS.INVNTRY_QY - GS.USEFUL_INVNTRY_QY AS AVAIL_QT	/*가용재고*/
+				 , GS.INVNTRY_QY - GS.USEFUL_INVNTRY_QY AS AVAIL_QT		/*가용재고*/
 				 , GS.SUBSVC_STTUS_CD
 				 , FN_GET_COMMCODE_NAME('GOODS_STTUS', GS.SUBSVC_STTUS_CD) AS SUBSVC_STTUS
 				 , FN_GET_COMMCODE_NAME('EXPSR_DV', GS.EXPSR_DV_CD) AS EXPSR_DV
-				 , GS.SUBSVC_CT								/*구독료*/
+				 , GS.SUBSVC_CT											/*구독료*/
-				 , GS.TME_DLVY_AMT							/*1회배송비*/
+				 , GS.TME_DLVY_AMT										/*1회배송비*/
-				 , GS.CNSMRPRIC								/*소비자가*/
+				 , GS.CNSMRPRIC											/*소비자가*/
-				 , GS.SUBSVC_CT + (TME_DLVY_AMT * DLVY_CNT) as SELPRIC	/*실판매가=구독료+(1회배송비X배송횟수)*/
+				 , GS.SUBSVC_CT + (TME_DLVY_AMT * DLVY_CNT) AS SELPRIC	/*실판매가=구독료+(1회배송비X배송횟수)*/
+				 , ROUND((GS.CNSMRPRIC - (GS.SUBSVC_CT + (TME_DLVY_AMT * DLVY_CNT))) / NULLIF(GS.CNSMRPRIC, 0) * 100, 0) AS DSCNT_RAITO
 				 , GS.IMG
 				 , GS.SUBSVC_DC
 				 , GS.MBL_SUBSVC_DC

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('currency-unit.default')" var="curUnit"/>
 </head>
 
 <script>
@@ -28,6 +29,8 @@
 	 *  구독서비스 상세 조회
 	 * ****************************************************/
 	const fn_select_subsvcDetail = function(subsvcInnb) {
+		var curUnit = '${curUnit}';
+
 		$.ajax({
 			type: "post",
 			url : '<c:url value="/sopmal/main/selectSubscribeDetail"/>',
@@ -38,23 +41,42 @@
 				data = JSON.parse(data.resBody.result);
 				data = data.resultMap;
 
-				$('#subPd').val(data.subPd);
+				$('#subPd').text(data.subPd);
-				$('#dlvyCnt').val(data.dlvyCnt);
+				$('#dlvyCnt').text(data.dlvyCnt);
-				$('#dlvyCycle').val(data.dlvyCycle);
+				$('#dlvyCycle').text(data.dlvyCycle);
-				$('#cnsmrpric').val(data.cnsmrpric);
+				$('#cnsmrpric').text(fn_format_number(data.cnsmrpric) + curUnit);
-				$('#selpric').val(data.selpric);
+				$('#selpric').text(fn_format_number(data.selpric) + curUnit);
-				$('#saleRatio').val(data.saleRatio);
+				$('#dscntRaito').text(data.dscntRaito + '%');
+				$('#subsvcDc').html(data.subsvcDc);
+
+				switch (data.subsvcSttusCd) {
+					case '01':
+						$('#subscribeBtn').text('구독하기');
+						$('#subscribeBtn').prop('disabled', false);
+						break;
+					case '02':
+					case '03':
+						$('#subscribeBtn').text(data.subsvcSttus);
+						$('#subscribeBtn').prop('disabled', true);
+						break;
+					default:
+						break;
+				}
 			}
 		});
 	}
+
+	const fn_format_number = function(number) {
+		return Number(number).toLocaleString();
+	}
 </script>
 <style>
 	.container {
 		display: flex;
 		width: 100%;
-		height: 200px;
 		border: 1px solid #e9ecef;
-		margin-top: 100px;
+		margin-top: 50px;
+		margin-bottom: 50px;
 	}
 
 	.box {
@@ -87,25 +109,14 @@
 		margin-bottom: 8px;
 	}
 
-	.box button {
+	#subsvcDc {
-		background-color: #000;
+		border: 1px solid #e9ecef;
-		color: #fff;
+		padding: clamp(12px, 3%, 18px);
-		border: none;
-		padding: 12px 24px;
-		border-radius: 6px;
-		cursor: pointer;
-		font-size: 14px;
-		text-align: center;
-	}
-
-	.box button:hover {
-		opacity: 0.85;
 	}
 </style>
 <body>
 <%-- 공통 Header --%>
 <jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
-<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
 <!-- 메인 컨텐츠 영역 -->
 <main>
 	<div class="sub-wrapper">
@@ -131,14 +142,24 @@
 							<div class="box">
 								<span>구독서비스 내역</span>
 								<ul>
-									<li>구독기간 : <span id="subPd"></span>개월</li>
+									<li>
-									<li>배송횟수 : <span id="dlvyCnt"></span>회</li>
+										구독기간 : <span id="subPd"></span>개월
-									<li>배송주기 : <span id="dlvyCycle"></span></li>
+									</li>
-									<li>상품금액 : <span id="cnsmrpric" style="font-size: 12px; color: grey; text-decoration: line-through;"></span><span id="selpric"></span>${curUnit} <span id="saleRatio" style="color: red">%</span></li>
+									<li>
+										배송횟수 : <span id="dlvyCnt"></span>회
+									</li>
+									<li>
+										배송주기 : <span id="dlvyCycle"></span>
+									</li>
+									<li>
+										상품금액 : <span id="cnsmrpric" class="product-unit-price__original"></span>
+										<span id="selpric" class="product-unit-price__current"></span>
+										<span id="dscntRaito" style="color: red">%</span>
+									</li>
 								</ul>
 							</div>
 							<div class="box">
-								<button>구독하기</button>
+								<button id="subscribeBtn" class="btn theme large">구독하기</button>
 							</div>
 						</div>
 					</c:when>
@@ -146,6 +167,8 @@
 						<span style="display: block; width: 100%; text-align: center; font-size: 32px;">구독 서비스 상품 준비중</span>
 					</c:otherwise>
 				</c:choose>
+
+				<div id="subsvcDc">구독 서비스 상품 설명</div>
 			</form>
 		</div>
 	</div>

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

@@ -0,0 +1,182 @@
+<%@ 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"%>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+	<%-- 공통 include --%>
+	<jsp:include page="/WEB-INF/views/comm/mobile/Include.jsp"/>
+	<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
+</head>
+<script>
+	$(document).ready(function() {
+		$(".header__title").text("구독 서비스");
+
+		var subsvcInnb = $('[name="subsvcInnb"]:checked').val();
+		fn_select_subsvcDetail(subsvcInnb);
+	});
+
+	/******************************************************
+	 *  구독서비스 상세 조회
+	 * ****************************************************/
+	const fn_select_subsvcDetail = function(subsvcInnb) {
+		var curUnit = '${curUnit}';
+
+		$.ajax({
+			type: "post",
+			url : '<c:url value="/sopmal/main/selectSubscribeDetail"/>',
+			data : {
+				subsvcInnb : subsvcInnb
+			},
+			success: function (data) {
+				data = JSON.parse(data.resBody.result);
+				data = data.resultMap;
+
+				$('#subsvcNm').text(data.subsvcConcatNm);
+				$('#subPd').text(data.subPd);
+				$('#dlvyCnt').text(data.dlvyCnt);
+				$('#dlvyCycle').text(data.dlvyCycle);
+				$('#cnsmrpric').text(fn_format_number(data.cnsmrpric) + curUnit);
+				$('#selpric').text(fn_format_number(data.selpric) + curUnit);
+				$('#dscntRaito').text(data.dscntRaito + '%');
+				$('#subsvcDc').html(data.subsvcDc);
+
+				switch (data.subsvcSttusCd) {
+					case '01':
+						$('#subscribeBtn').text('구독하기');
+						$('#subscribeBtn').prop('disabled', false);
+						break;
+					case '02':
+					case '03':
+						$('#subscribeBtn').text(data.subsvcSttus);
+						$('#subscribeBtn').prop('disabled', true);
+						break;
+					default:
+						break;
+				}
+			}
+		});
+	}
+
+	const fn_format_number = function(number) {
+		return Number(number).toLocaleString();
+	}
+</script>
+<style>
+	.sub-box {
+		padding: 16px;
+	}
+
+	#subsvcDc {
+		padding: clamp(12px, 3%, 18px);
+		border-radius: 8px;
+		border: 1px solid #dee2e6;
+		margin-bottom: 20px;
+	}
+</style>
+<body>
+	<div class="screen-wrap">
+		<!-- 헤더 영역 -->
+		<header class="header header--sub">
+			<jsp:include page="/WEB-INF/views/comm/mobile/Header.jsp"/>
+		</header>
+
+		<!-- 하단 탭바 -->
+		<jsp:include page="/WEB-INF/views/comm/mobile/TabBar.jsp"/>
+
+		<!-- 메인 컨텐츠 -->
+		<div class="content-wrap">
+			<main class="main">
+				<div class="sub-page">
+					<div class="sub-box">
+						<div class="ck-content">
+							<c:out value="${ resultMap.sopmalInfo[0].subsvcGuidanceWords }" escapeXml="false"/>
+						</div>
+					</div>
+					<div class="sub-box">
+						<div class="productDetailInfo">
+							<div class="productDetailInfo__titleWrap">
+								<span id="subsvcNm" class="productDetailInfo__title">
+									구독서비스명
+								</span>
+							</div>
+							<div class="productDetailInfo__price">
+								<div class="productDetailInfo__price__price">
+									<span id="cnsmrpric" class="productDetailInfo__price__original"></span>
+									<span id="selpric" class="productDetailInfo__price__current"></span>
+								</div>
+								<div class="productDetailInfo__price__sale">
+									<span id="dscntRaito" class="percent" style="color: red">%</span>
+								</div>
+							</div>
+							<div id="subsvcDc" class="ck-content">
+								구독 서비스 상품 설명
+							</div>
+							<div class="productDetailInfo__info">
+								<dl>
+									<dt>구독기간</dt>
+									<dd>
+										<span id="subPd"></span>개월
+									</dd>
+								</dl>
+								<dl>
+									<dt>배송횟수</dt>
+									<dd>
+										<span id="dlvyCnt"></span>회
+									</dd>
+								</dl>
+								<dl>
+									<dt>배송주기</dt>
+									<dd>
+										<span id="dlvyCycle"></span>
+									</dd>
+								</dl>
+							</div>
+						</div>
+						<div class="productDetailInfo">
+							<div class="productDetailInfo__body">
+								<button type="button" class="btn full md gray" onclick="openModal('product-option-sheet')">
+									옵션선택
+								</button>
+							</div>
+						</div>
+						<div class="productDetailInfo">
+							<div class="productDetailInfo__body">
+								<button type="button" class="btn full theme">구매하기</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</main>
+			<!-- 푸터 -->
+			<jsp:include page="/WEB-INF/views/comm/mobile/Footer.jsp"/>
+		</div>
+	</div>
+	<div class="microModal microBottomSheet" id="product-option-sheet" aria-hidden="true">
+		<div class="microModal__overlay" tabindex="-1">
+			<div class="microModal__container" role="dialog" aria-modal="true">
+				<div class="microModal__body">
+					<div class="microModal__top">
+						<button class="microModal__close" aria-label="창 닫기" data-micromodal-close></button>
+					</div>
+					<div class="microModal__content">
+						<div class="modalSelect">
+							<div class="modalSelect__list">
+								<c:forEach var="subsvcList" items="${resultMap.subsvcList}" varStatus="status">
+									<label class="modalSelect__item">
+										<input type="radio" name="subsvcInnb" value="${subsvcList.subsvcInnb}" onchange="fn_select_subsvcDetail(this.value); MicroModal.close('product-option-sheet');" <c:if test="${status.first}">checked</c:if>>
+										<span>${subsvcList.subsvcConcatNm}</span>
+									</label>
+								</c:forEach>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>