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

<%@ 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" %>
<%--
	Class Name : SubscribeR.jsp
	Description : 구독 목록 폼
	Modification Information

	수정일 수정자 수정내용
	------- -------- ---------------------------
	2025-12-31 이대환	최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">

<head>
	<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
</head>

<script>
	$(document).ready(function() {
		var subsvcInnb = $('#subsvcInnb').val();
		fn_select_subsvcDetail(subsvcInnb);
	});

	/******************************************************
	 *  구독서비스 상세 조회
	 * ****************************************************/
	const fn_select_subsvcDetail = function(subsvcInnb) {
		$.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;

				$('#subPd').val(data.subPd);
				$('#dlvyCnt').val(data.dlvyCnt);
				$('#dlvyCycle').val(data.dlvyCycle);
				$('#cnsmrpric').val(data.cnsmrpric);
				$('#selpric').val(data.selpric);
				$('#saleRatio').val(data.saleRatio);
			}
		});
	}
</script>
<style>
	.container {
		display: flex;
		width: 100%;
		height: 200px;
		border: 1px solid #e9ecef;
		margin-top: 100px;
	}

	.box {
		flex: 1;
		flex-direction: column;
		border-right: 1px solid #e9ecef;
		display: flex;
		padding: 32px;
		box-sizing: border-box;
	}

	.box:last-child {
		display: flex;
		border-right: none;
		justify-content: center;
	}

	.box > span {
		width: 100%;
		margin-bottom: 16px;
	}

	.box ul {
		padding-left: 20px;
		margin: 0;
	}

	.box ul li {
		list-style-type: disc;
		margin-bottom: 8px;
	}

	.box button {
		background-color: #000;
		color: #fff;
		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">
		<div class="sub-content">
			<form>
				<h2 class="subList__title">구독 서비스</h2>
				<div class="ck-content" style="border: 1px solid #e9ecef">
					<c:out value="${ resultMap.sopmalInfo[0].subsvcGuidanceWords }" escapeXml="false"/>
				</div>
				<c:choose>
					<c:when test="${not empty resultMap.subsvcList}">
						<div class="container">
							<div class="box">
								<span>구독서비스</span>
								<div class="select-box">
									<select title="구독 서비스 선택" id="subsvcInnb" name="subsvcInnb" onchange="fn_select_subsvcDetail(this.value);">
										<c:forEach var="subsvcList" items="${resultMap.subsvcList}" varStatus="status">
											<option value="${subsvcList.subsvcInnb}" <c:if test="${status.first}">selected</c:if>>${subsvcList.subsvcConcatNm}</option>
										</c:forEach>
									</select>
								</div>
							</div>
							<div class="box">
								<span>구독서비스 내역</span>
								<ul>
									<li>구독기간 : <span id="subPd"></span>개월</li>
									<li>배송횟수 : <span id="dlvyCnt"></span>회</li>
									<li>배송주기 : <span id="dlvyCycle"></span></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>
								</ul>
							</div>
							<div class="box">
								<button>구독하기</button>
							</div>
						</div>
					</c:when>
					<c:otherwise>
						<span style="display: block; width: 100%; text-align: center; font-size: 32px;">구독 서비스 상품 준비중</span>
					</c:otherwise>
				</c:choose>
			</form>
		</div>
	</div>
</main>

<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>

</body>
</html>