초기소스

src/main/webapp/WEB-INF/views/sopmal/mpage/bnef/CashDtlsR.jsp

@@ -0,0 +1,80 @@
+<%@ 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"%>
+
+
+<%--
+	Class Name : CouponDtlsR.jsp
+	Description : 마이페이지 쿠폰 내역
+	Modification Information
+
+	수정일 수정자 수정내용
+	------- -------- ---------------------------
+	2024-02-27 추지훈 최초 생성
+--%>
+
+<script>
+    $(document).ready(function() {
+
+
+    });
+
+
+
+
+
+</script>
+
+<div class="sub-tab__content current">
+    <div class="mileageList">
+        <c:choose>
+            <c:when test="${ not empty resultMap.cashList}">
+                <c:forEach var="list" items="${ resultMap.cashList}" varStatus="status">
+                    <c:choose>
+                        <c:when test = "${list.mlgAccmlDvCd eq 'add'}">
+                            <c:set var="upAt" value="mileageList__item--saveUp"/>
+                        </c:when>
+                        <c:otherwise>
+                            <c:set var="upAt" value=""/>
+                        </c:otherwise>
+                    </c:choose>
+                    <div class="mileageList__item ${upAt}">
+                        <div class="mileageList__itemHeader">
+                            <div class="mileageList__itemHeaderMisc">
+                                <span class="mileageList__itemDate"><c:out value="${ list.mpageRegistDt }"/></span>
+                                <span class="mileageList__itemDot">·</span>
+                                <span class="mileageList__itemBrand"><c:out value="${ list.sopmalNm }"/></span>
+                            </div>
+                            <span class="mileageList__itemTitle"><c:out value="${ list.mlgAccmlDvNm }"/> (잔여: <fmt:formatNumber value="${list.blce}" pattern="#,###"/>)</span>
+                        </div>
+                        <div class="mileageList__itemBody">
+                            <span class="mileageList__itemDescription"><c:out value="${ list.mlgApplcDvNm }"/></span>
+                            <span class="mileageList__itemNumber"><span class="comma"><fmt:formatNumber value="${list.accmlmnyAmt}" pattern="#,###"/></span></span>
+                        </div>
+                        <div class="mileageList__orderNum">
+                            <c:if test="${ not empty list.ordrInnb && list.ordrInnb ne 0 }">
+                                주문번호 <em><c:out value="${ list.ordrInnb }"/></em>
+                            </c:if>
+                        </div>
+                    </div>
+                </c:forEach>
+            </c:when>
+            <c:otherwise>
+                <div class="orderList__no-result">
+                    <img src="<c:url value="/pc/images/icon__no-result.png"/>" alt="">
+                    <p class="orderList__no-result-text">마일리지내역이 없습니다.</p>
+                </div>
+            </c:otherwise>
+        </c:choose>
+    </div>
+    <div class="pagination__container">
+        <ui:pagination paginationInfo="${resultMap.paginationInfo}" type="image" jsFunction="fn_select_mlg_list" />
+    </div>
+</div>
+<div class="sub-tab__content">2</div>
+<div class="sub-tab__content">3</div>
+<div class="sub-tab__content">4</div>

src/main/webapp/WEB-INF/views/sopmal/mpage/bnef/CashDtlsRForm.jsp

@@ -0,0 +1,397 @@
+<%@ 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"%>
+<%--
+	Class Name : CashDtlsRForm.jsp
+	Description : 마이페이지 GC 머니 내역
+	Modification Information
+
+	수정일 수정자 수정내용
+	------- -------- ---------------------------
+--%>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <%-- 공통 include --%>
+    <jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
+</head>
+
+<script>
+    $(document).ready(function() {
+        let pageIndex	= '<c:out value="${ resultMap.paramVO.pageIndex }"/>';
+        let pageUnit 	= '<c:out value="${ resultMap.paramVO.pageUnit }"/>';
+        fn_select_mlg_list(pageIndex, pageUnit);
+        fn_start_display();
+    });
+
+
+
+    /******************************************************************
+     *   시작 화면 제어
+     ******************************************************************/
+    const fn_start_display = function() {
+
+        /* 검색조건 > 날짜 구간 버튼 클릭 이벤트 */
+        $('.dateRange-btn').on('click', function() {
+            const date = $(this).attr('id');
+
+            $(this).closest('div').find('#dateRange').val(date);
+
+            if ('allDays' === date) {
+                $('#bgnDt, #endDt').val('');
+
+                return false;
+            }
+
+            fn_set_date('bgnDt', 'endDt', 'endDt', date);
+        });
+
+        /* 검색 버튼 클릭 이벤트 */
+        $('#btnSearch').on('click', function() {
+            fn_select_mlg_list(1);
+        });
+
+        /*pin 번호 등록*/
+        $(document).on("click","#pinAlertBtn",function(){
+            if ($("#pinAlertBtn").text() === "등록") {
+                fn_add_cash();
+            } else {
+                $("#closeBtn").click();
+            }
+        });
+    }
+
+
+    /* 검색조건 세팅 */
+    const fn_set_param = function() {
+        const params = ${paramVO};
+        const keys = Object.keys(params);
+
+        for (let i = 0; i < keys.length; i++) {
+            let key = keys[i];
+            let data = params[key];
+
+            if ('bgnDt' == key || 'endDt' == key) {
+                if (!fn_is_empty(data)) {
+                    for (let i = 0; i < data.length; i++) {
+                        $('#' + key).val(data);
+                    }
+                }
+            }
+
+            if ('dateRange' == key) {
+                $('#'+ data).trigger('click');
+            }
+
+            if ('srchwrd' == key) {
+                $('#' + key).val(data);
+            }
+        }
+    }
+
+
+
+    /******************************************************************
+     *   마일리지 목록 조회
+     ******************************************************************/
+    const fn_select_mlg_list	= function(pageIndex, pageUnit) {
+
+
+        const currentTabTxt = $(".sub-tab__btn.current").text();
+        if(currentTabTxt === '적립') {
+            $("#srchMlgAccmlDvCd").val("add");
+        } else if (currentTabTxt === 'use') {
+            $("#srchMlgAccmlDvCd").val("use");
+        } else if (currentTabTxt === 'exp') {
+            $("#srchMlgAccmlDvCd").val("exp");
+        }
+
+        let dataStr;
+        if(!pageIndex) {
+            $('#pageIndex').val(1);
+        } else {
+            $('#pageIndex').val(pageIndex);
+        }
+
+        if(!pageUnit) {
+
+            dataStr	= $('#listForm').serialize();
+        } else {
+            if($('#pageUnit').length){
+                $('#pageUnit').val(pageUnit);
+                dataStr	= $('#listForm').serialize();
+            } else {
+                dataStr	= $('#listForm').serialize()+'&pageUnit='+pageUnit;
+            }
+        }
+
+        $('#pageIndex').val(pageIndex);
+
+
+        $.ajax({
+            type: "post",
+            url : '<c:url value="/sopmal/mpage/bnef/selectCashDtlsInqire"/>',
+            data : dataStr,
+            success:function(resultHtml) {
+                $('#pageDiv').empty();
+                $('#pageDiv').html(resultHtml);
+            }
+        });
+    }
+
+
+    /******************************************************************
+     *   마일리지 목록 조회 지급구분
+     ******************************************************************/
+    const fn_select_mlg_list_dv = function(srchMlgAccmlDvCd) {
+        $.ajax({
+            type: "post",
+            url : '<c:url value="/sopmal/mpage/bnef/selectCashDtlsInqire"/>',
+            data : {
+                srchMlgAccmlDvCd : srchMlgAccmlDvCd
+            },
+            success:function(resultHtml) {
+                $('#pageDiv').empty();
+                $('#pageDiv').html(resultHtml);
+            }
+        });
+    }
+
+    /****************************************************************
+     상품권 충전 서비스 시작
+     ****************************************************************/
+    const fn_select_crtnb = () => {
+        $.ajax({
+            type: "post",
+            url: '<c:url value="/sopmal/mpage/bnef/selectGiftCardCrtfcNb"/>',
+            data: {crtfcNb: $('#crtfcNb').val()},
+            success: function (result) {
+                result = JSON.parse(result.resBody.result);
+                $("#pinMsg").text(result.message);
+                const at = result.at;
+                if(at.possibleAt === 'Y'){
+                    $("#pinAlertBtn").text("등록");
+                    $('#pinNb').show();
+                    $('#pinNb').val('');
+                    $('#pinNb').focus();
+                    $("#alertCrtnb").val(result.crtfcNb)
+                }else{
+                    $("#pinAlertBtn").text("닫기");
+                    $('#pinNb').hide();
+                }
+                $('#pinBtn').click();
+            }
+        });
+    }
+
+    /****************************************************************
+     상품권 충전
+     ****************************************************************/
+    const fn_add_cash = () => {
+        $.ajax({
+            type: "post",
+            url: '<c:url value="/sopmal/mpage/bnef/insertGiftCard"/>',
+            data: {pinNb: $('#pinNb').val(),
+                   crtfcNb: $('#alertCrtnb').val()},
+            success: function (result) {
+                result = JSON.parse(result.resBody.result);
+                alert(result.message);
+                $("#crtfcNb").val("");
+                $("#closeBtn").click();
+                $("#calBlce").text(fn_format_comma(result.blce));
+                fn_select_mlg_list(1); // 목록 새로고침
+            }
+        });
+    }
+
+</script>
+
+<body>
+
+<%-- 공통 Header --%>
+<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
+
+<!-- 메인 컨텐츠 영역 -->
+<main>
+    <div class="sub-wrapper">
+        <div class="sub-content">
+            <div class="sub-rl">
+                <%-- 마이페이지 Left 영역 --%>
+                <jsp:include page="/WEB-INF/views/comm/mpage/MypageLeft.jsp"/>
+                <div class="sub-right-content">
+                    <%-- 마이페이지 Right 영역 --%>
+                    <jsp:include page="/WEB-INF/views/comm/mpage/MypageRight.jsp"/>
+                    <div class="sub-right-content__section">
+                        <h3 class="sub-right-content__title">GC 머니 내역</h3>
+                        <div class="mileageStatus">
+                            <div class="mileageStatusCurrent">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="67" height="63" viewBox="0 0 67 63"
+                                     fill="none">
+                                    <g clip-path="url(#clip0_872_54192)">
+                                        <g style="mix-blend-mode:darken">
+                                            <path
+                                                    d="M43.7905 51.5702C56.5262 51.5702 66.8505 41.2459 66.8505 28.5102C66.8505 15.7745 56.5262 5.4502 43.7905 5.4502C31.0548 5.4502 20.7305 15.7745 20.7305 28.5102C20.7305 41.2459 31.0548 51.5702 43.7905 51.5702Z"
+                                                    fill="#DADBE1"></path>
+                                        </g>
+                                        <path d="M4.93945 15.2997V13.7197" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M2.58 17.6494H1" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M4.93945 20.0098V21.5898" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M7.28906 17.6494H8.86906" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M26.1895 2.42V1" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M24.0704 4.54004H22.6504" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M26.1895 6.66016V8.08016" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M28.3105 4.54004H29.7305" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M55.8999 13.9805H18.9199V21.8905H55.8999V13.9805Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <path d="M60.1909 21.8896H23.2109V29.8096H60.1909V21.8896Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <path d="M54.3804 29.8096H17.4004V37.7196H54.3804V29.8096Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <path d="M57.6909 37.7197H20.7109V45.6397H57.6909V37.7197Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <path d="M61.8804 45.6396H24.9004V53.5496H61.8804V45.6396Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <path d="M57.6909 53.5498H20.7109V61.4698H57.6909V53.5498Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <g style="mix-blend-mode:darken">
+                                            <path
+                                                    d="M50.6004 42.0604C50.6004 43.2804 50.5104 44.4704 50.3404 45.6404C49.9204 48.4604 49.0204 51.1304 47.7204 53.5504C46.0604 56.6504 43.7504 59.3604 40.9604 61.4704H20.7104V53.5504H24.9004V45.6404H20.7104V37.7204H17.4004V29.8104H23.2104V21.8904H18.9204V18.7604C21.2204 18.0404 23.6604 17.6504 26.1904 17.6504C31.2704 17.6504 36.0004 19.2104 39.9104 21.8904C42.9204 23.9304 45.4504 26.6504 47.2904 29.8104C48.7004 32.2104 49.7004 34.8804 50.2004 37.7204C50.4704 39.1304 50.6004 40.5804 50.6004 42.0604Z"
+                                                    fill="#DADBE1"></path>
+                                        </g>
+                                        <path
+                                                d="M2.54078 48.8405H38.8708C39.6608 46.7305 40.1108 44.4505 40.1108 42.0605H1.30078C1.30078 44.4505 1.75078 46.7305 2.54078 48.8405Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M20.7098 61.4709C26.1498 61.4709 31.0498 59.2309 34.5798 55.6309H6.83984C10.3598 59.2309 15.2698 61.4709 20.7098 61.4709Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M6.84102 55.6306H34.581C36.461 53.7106 37.921 51.4106 38.881 48.8506H2.54102C3.50102 51.4106 4.96102 53.7206 6.84102 55.6306Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M6.84102 28.4902C4.96102 30.4102 3.50102 32.7102 2.54102 35.2702H38.871C37.911 32.7102 36.451 30.4002 34.571 28.4902H6.84102Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M1.30078 42.0603H40.1208C40.1208 39.6703 39.6708 37.3903 38.8808 35.2803H2.54078C1.75078 37.3903 1.30078 39.6703 1.30078 42.0603Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M20.7098 22.6504C15.2698 22.6504 10.3698 24.8904 6.83984 28.4904H34.5798C31.0598 24.8904 26.1498 22.6504 20.7098 22.6504Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M26.1893 61.4704C36.9091 61.4704 45.5993 52.7802 45.5993 42.0604C45.5993 31.3405 36.9091 22.6504 26.1893 22.6504C15.4694 22.6504 6.7793 31.3405 6.7793 42.0604C6.7793 52.7802 15.4694 61.4704 26.1893 61.4704Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path class="svg-themeColor"
+                                              d="M19.3923 35.9873C19.5007 35.229 20.3132 34.3623 21.4507 34.3623C22.4798 34.3623 23.2923 35.1206 23.5632 35.879L26.0548 44.1665H26.109L28.6007 35.879C28.8173 35.1206 29.6298 34.3623 30.7132 34.3623C31.8507 34.3623 32.6632 35.229 32.7715 35.9873L34.6673 47.6873V48.0665C34.6673 48.9873 34.0173 49.5831 33.1507 49.5831C32.0673 49.5831 31.634 49.0956 31.5257 48.1206L30.334 39.5623H30.2798L27.7882 48.3373C27.6257 48.8248 27.2465 49.529 26.109 49.529C24.9715 49.529 24.5923 48.8248 24.4298 48.3373L21.8298 39.5081H21.7757L20.5298 48.0665C20.3673 49.0415 19.9882 49.529 18.9048 49.529C17.984 49.5831 17.334 48.9873 17.334 48.0665C17.334 47.9581 17.334 47.8498 17.334 47.6873L19.3923 35.9873Z"
+                                              fill="#3B3B3D"></path>
+                                    </g>
+                                    <defs>
+                                        <clipPath id="clip0_872_54192">
+                                            <rect width="66.86" height="62.47" fill="white"></rect>
+                                        </clipPath>
+                                    </defs>
+                                </svg>
+                                <span class="mileageStatusCurrent__title">잔여 GC 머니</span>
+                                <span class="mileageStatusCurrent__number"><span class="comma" id="calBlce"><fmt:formatNumber value="${not empty resultMap.blce ? resultMap.blce : 0}" pattern="#,###"/></span></span>
+                                <span class="mileageStatusCurrent__unit">점</span>
+                            </div>
+                            <div  class="mileageStatusCurrent">
+                                <input class="input-text full" type="search" title="검색어 입력" style="width : 300px; margin-right: 10px"
+                                       id="crtfcNb" name="crtfcNb" maxlength="50"
+                                       placeholder="등록하실 상품권 번호를 입력해 주세요.">
+                                <button type="button" class="btn md dark" onclick="fn_select_crtnb();">
+                                    조회
+                                </button>
+                            </div>
+                        </div>
+                        <form id="listForm">
+                            <input type="hidden" id="mlgInnb" name="mlgInnb" value=""/>
+                            <input type="hidden" id="pageIndex" name="pageIndex" value="${paramVO.pageIndex}}"/>
+                            <input type="hidden" id="pageUnit" name="pageUnit" value="${paramVO.pageUnit}"/>
+                            <input type="hidden" id="srchMlgAccmlDvCd" name="srchMlgAccmlDvCd" value=""/>
+                            <div class="customer-search">
+                                <div class="customer-search__row justify-start">
+                                    <div class="customer-search__controls">
+                                        <div class="dateRange-btnContainer">
+                                            <input type="hidden" name="dateRange" id="dateRange" value="allDays">
+                                            <button type="button" class="dateRange-btn" id="7D">일주일</button>
+                                            <button type="button" class="dateRange-btn" id="1M">1개월</button>
+                                            <button type="button" class="dateRange-btn" id="3M">3개월</button>
+                                            <button type="button" class="dateRange-btn selected" id="allDays">전체</button>
+                                        </div>
+                                        <div class="input-container">
+                                            <input type="text" name="srchStartDate" id="bgnDt" class="datepicker" title="시작 날짜 선택" autocomplete="off">
+                                            <span class="tilde">~</span>
+                                            <input type="text" name="srchEndDate" id="endDt" class="datepicker" title="종료 날짜 선택" autocomplete="off">
+                                        </div>
+                                    </div>
+                                    <button type="button" id="btnSearch" class="btn md dark">검색</button>
+                                </div>
+                            </div>
+                            <div class="sub-tab">
+                                <div class="sub-tab__trigger">
+                                    <button class="sub-tab__btn current" type="button" onclick="fn_select_mlg_list(1);">전체</button>
+                                    <c:if test = "${not empty resultMap.mlgAccmlDv}">
+                                        <c:forEach var = "mlgAccmlDv" items = "${resultMap.mlgAccmlDv}">
+                                            <c:if test="${mlgAccmlDv.cd eq 'add' || mlgAccmlDv.cd eq 'dn'}">
+                                                <button class="sub-tab__btn" type="button"
+                                                        onclick="fn_select_mlg_list_dv('<c:out value="${mlgAccmlDv.cd}"/>');"><c:out value="${mlgAccmlDv.cdNm}"/>
+                                                </button>
+                                            </c:if>
+                                        </c:forEach>
+                                    </c:if>
+                                </div>
+                                <div id="pageDiv">
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+<%-- pin 번호 인증 모달--%>
+<a href="#alert-01" rel="modal:open" id="pinBtn"></a>
+<div id="alert-01" class="modal alert">
+    <div class="alert-content">
+        <p class="alert-content__text--sm" id="pinMsg"></p>
+        <br>
+        <input type="text" name="pinNb" id="pinNb" class="input-text full" placeholder="상품권 PIN 번호를 입력해 주세요." maxlength="50">
+        <input type = "hidden" name = "crtfcNb" id = "alertCrtnb"/>
+    </div>
+    <div class="alert-btn-container">
+        <button class="alert-btn alert-btn--confirm" id="pinAlertBtn">확인</button>
+        <a href="#" rel="modal:close" id="closeBtn"></a>
+    </div>
+</div>
+<%-- 공통 Footer --%>
+<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
+
+</body>
+
+</html>

src/main/webapp/WEB-INF/views/sopmal/mpage/bnef/CouponDtlsRForm.jsp

@@ -0,0 +1,322 @@
+<%@ 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"%>
+
+
+<%--
+	Class Name : CouponDtlsR.jsp
+	Description : 마이페이지 쿠폰 내역
+	Modification Information
+
+	수정일 수정자 수정내용
+	------- -------- ---------------------------
+	2024-02-27 추지훈 최초 생성
+--%>
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+<%-- 공통 include --%>
+<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
+</head>
+
+<script>
+    $(document).ready(function() {
+
+        let pageIndex	= '<c:out value="${ resultMap.paramVO.pageIndex }"/>';
+		let pageUnit 	= '<c:out value="${ resultMap.paramVO.pageUnit }"/>';
+
+        let pageIndexDwld	= '<c:out value="${ resultMapDwld.paramVO.pageIndex }"/>';
+        let pageUnitDwld 	= '<c:out value="${ resultMapDwld.paramVO.pageUnit }"/>';
+
+
+
+		fn_select_useposbl_coupon(pageIndex, pageUnit);
+
+
+
+
+    });
+
+    let alldwldCnt = '${ not empty resultMap.dwldPosblCouponCnt ? resultMap.dwldPosblCouponCnt : '0'  }';
+
+    /************************************************
+    *   사용 가능 쿠폰 목록 조회
+    *************************************************/
+    const fn_select_useposbl_coupon	= function(pageIndex, pageUnit) {
+
+        let dataStr;
+        if(!pageIndex) {
+            $('#pageIndex').val(1);
+        } else {
+            $('#pageIndex').val(pageIndex);
+        }
+
+        if(!pageUnit) {
+
+            dataStr	= $('#holdListForm').serialize();
+        } else {
+            if($('#pageUnit').length){
+                $('#pageUnit').val(pageUnit);
+                dataStr	= $('#holdListForm').serialize();
+            } else {
+                dataStr	= $('#holdListForm').serialize()+'&pageUnit='+pageUnit;
+            }
+        }
+
+        $('#pageIndex').val(pageIndex);
+
+        $.ajax({
+            type: "post",
+            url : '<c:url value="/sopmal/mpage/bnef/selectCouponUsePosblDtlsInqire"/>',
+            data : dataStr,
+            success:function(resultHtml) {
+                $('#usePosblCouponDiv').empty();
+                $('#usePosblCouponDiv').html(resultHtml);
+            }
+        });
+    }
+
+
+
+    /************************************************
+    *   다운로드 가능 쿠폰 목록 조회
+    *************************************************/
+    const fn_select_dwld_coupon	= function(pageIndexDwld, pageUnitDwld) {
+
+        let dataStr;
+        if(!pageIndexDwld) {
+            $('#pageIndexDwld').val(1);
+        } else {
+            $('#pageIndexDwld').val(pageIndexDwld);
+        }
+
+        if(!pageUnitDwld) {
+
+            dataStr	= $('#dwldListForm').serialize();
+        } else {
+            if($('#pageUnitDwld').length){
+                $('#pageUnitDwld').val(pageUnitDwld);
+                dataStr	= $('#dwldListForm').serialize();
+            } else {
+                dataStr	= $('#dwldListForm').serialize()+'&pageUnitDwld='+pageUnitDwld;
+            }
+        }
+
+        $('#pageIndexDwld').val(pageIndexDwld);
+
+        $.ajax({
+            type: "post",
+            url : '<c:url value="/sopmal/mpage/bnef/selectDwldCouponDtlsInqire"/>',
+            data : dataStr,
+            success:function(resultHtml) {
+                $('#dwldCouponDiv').empty();
+                $('#dwldCouponDiv').html(resultHtml);
+            }
+        });
+    }
+
+
+    /************************************************
+    *   쿠폰 상세 정보 조회 팝업 : 다운로드 가능 쿠폰
+    *************************************************/
+    const fn_open_modal_coupon_dtl	= function(modalDivSltr, modalSlrt, url, param, sopmalCd, couponSndngInnb){
+        var couponInnb = param
+
+        $.ajax({
+            type: 'post',
+            url: url,
+            data: {
+                couponInnb : couponInnb,
+                sopmalCd : sopmalCd,
+                couopnSndngInnb : couponSndngInnb
+            },
+            success: function (data) {
+                    $(modalSlrt).remove();
+                    $(modalDivSltr).html(data);
+                    $(modalSlrt).modal();
+            }
+        });
+    };
+
+    /************************************************
+     *   쿠폰 상세 정보 조회 팝업 : 사용가능 쿠폰
+     *************************************************/
+    const fn_open_modal_dwldcoupon_dtl	= function(modalDivSltr, modalSlrt, url, param, sopmalCd){
+        var dwldCouponInnb = param
+
+        $.ajax({
+            type: 'post',
+            url: url,
+            data: {
+                dwldCouponInnb : dwldCouponInnb,
+                sopmalCd : sopmalCd
+            },
+            success: function (data) {
+                    $(modalSlrt).remove();
+                    $(modalDivSltr).html(data);
+                    $(modalSlrt).modal();
+            }
+        });
+    };
+
+
+    /************************************************
+    *   인증번호 입력 쿠폰 등록
+    *************************************************/
+    const fn_regist_offline_coupon	= function() {
+
+        if (fn_is_empty($('#oflneCouponCrtnb').val())) {
+            alert("등록하실 쿠폰 번호를 입력해 주세요.");
+            return false;
+        }
+
+
+
+
+        const data = $('#couponCodeRegistForm').serialize();
+
+
+        if (confirm('인증번호 쿠폰을 <spring:message code="confirm.common.insert"/>')) {
+            $.ajax({
+                type: "post",
+                url: '<c:url value="/sopmal/mpage/bnef/insertCouponRegist"/>',
+                data: data,
+                success: function (result) {
+
+                    const parseResult = JSON.parse(result.resBody.result);
+
+
+                    if (parseResult.status === '0') {
+                        alert('<spring:message code="success.common.insert"/>');
+                        // $('#useCouponListBtn').click();
+                        location.reload();
+                        $('#oflneCouponCrtnb').val('');
+                    } else {
+                        alert(parseResult.message);
+                    }
+                }
+            });
+        }
+    }
+
+    /************************************************
+    *   쿠폰 다운로드 단건
+    *************************************************/
+    const fn_regist_dwld_coupon	= function(couponInnb, sopmalCd, couponSndngInnb, cupnpkInnb, cupnpkNm, cupnpkDc) {
+
+
+        $.ajax({
+            type: "post",
+            url: '<c:url value="/sopmal/mpage/bnef/insertDwldCouponAllRegist"/>',
+            data: {
+                couponInnb: couponInnb,
+                sopmalCd: sopmalCd,
+                couponSndngInnb : couponSndngInnb,
+                cupnpkInnb : cupnpkInnb,
+                cupnpkNm : cupnpkNm,
+                cupnpkDc : cupnpkDc
+            },
+            success: function (resultHtml) {
+
+                alert('<spring:message code="success.common.save"/>');
+                // $('#useCouponListBtn').click();
+                location.reload();
+            }
+        });
+
+    }
+
+
+    /************************************************
+     *   (모든) 쿠폰 다운로드 다건
+     *************************************************/
+    const fn_regist_dwld_coupon_all	= function() {
+
+        const data = $('#dwldListForm').serialize();
+
+
+        if (alldwldCnt > 0) {
+
+            $.ajax({
+                type: "post",
+                url: '<c:url value="/sopmal/mpage/bnef/insertDwldCouponAllRegist"/>',
+                data: data,
+                success: function (resultHtml) {
+
+                    alert('<spring:message code="success.common.save"/>');
+                    // $('#useCouponListBtn').click();
+                    location.reload();
+                }
+            });
+        } else {
+            alert('다운로드 받을 쿠폰이 없습니다.');
+        }
+    }
+
+
+
+
+
+</script>
+
+<body>
+
+    <%-- 공통 Header --%>
+    <jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
+
+    <!-- 메인 컨텐츠 영역 -->
+    <main>
+        <div class="sub-wrapper">
+            <div class="sub-content">
+                <div class="sub-rl">
+                    <%-- 마이페이지 Left 영역 --%>
+                    <jsp:include page="/WEB-INF/views/comm/mpage/MypageLeft.jsp"/>
+                    <div class="sub-right-content">
+                    <%-- 마이페이지 Right 영역 --%>
+                    <jsp:include page="/WEB-INF/views/comm/mpage/MypageRight.jsp"/>
+                        <div class="sub-right-content__section">
+                            <h3 class="sub-right-content__title">쿠폰 내역</h3>
+                            <form id="couponCodeRegistForm">
+                                <div class="customer-search">
+                                    <div class="customer-search__row justify-start">
+                                        <input class="input-text customer-search__search" type="search" title="검색어 입력" id="oflneCouponCrtnb" name="oflneCouponCrtnb"
+                                            placeholder="등록하실 쿠폰 번호를 입력해 주세요.">
+                                        <button type="button" class="btn md dark" onclick="fn_regist_offline_coupon();">쿠폰등록</button>
+                                    </div>
+                                </div>
+                            </form>
+                            <div class="boxTab">
+                                <button class="boxTab__tabBtn current" id="useCouponListBtn" onclick="fn_select_useposbl_coupon(); return false;">사용가능 쿠폰 (<c:out value="${ not empty resultMap.usePosblCouponCnt ? resultMap.usePosblCouponCnt : '0' }"/>)</button>
+                                <button class="boxTab__tabBtn" onclick="fn_select_dwld_coupon(); return false;">쿠폰 다운로드 (<c:out value="${ not empty resultMap.dwldPosblCouponCnt ? resultMap.dwldPosblCouponCnt : '0' }"/>)</button>
+                            </div>
+
+                            <%-- 사용가능 쿠폰 내역 --%>
+                            <div class="boxTab__content current" id="usePosblCouponDiv">
+                                
+                            </div>
+
+                            <%-- 다운로드 가능 쿠폰 내역--%>
+                            <div class="boxTab__content" id="dwldCouponDiv">
+                                
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- 쿠폰정보 모달 -->
+    <div id="modalDiv">
+    </div>
+
+    <%-- 공통 Footer --%>
+    <jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
+
+</body>
+
+</html>

src/main/webapp/WEB-INF/views/sopmal/mpage/bnef/DwldCouponDtlsR.jsp

@@ -0,0 +1,128 @@
+<%@ 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"%>
+
+
+<%--
+	Class Name : CouponDtlsR.jsp
+	Description : 마이페이지 쿠폰 내역
+	Modification Information
+
+	수정일 수정자 수정내용
+	------- -------- ---------------------------
+	2024-02-27 추지훈 최초 생성
+--%>
+<form id="dwldListForm">
+    <input type="hidden" id="pageIndexDwld" name="pageIndex" value="<c:out value="${ resultMapDwld.paramVO.pageIndex }"/>"/>
+    <input type="hidden" id="recordCountPerPageDwld" name="recordCountPerPage" value="<c:out value="${ resultMapDwld.paramVO.recordCountPerPage }"/> "/>
+    <input type="hidden" id="sopmalCdDwld" name="sopmalCd" value=""/>
+    <input type="hidden" id="mbrInnbDwld" name="mbrInnb" value=""/>
+    <input type="hidden" id="mbrDvCdDwld" name="mbrDvCd" value=""/>
+
+    <c:if test="${ fn:length(resultMapDwld.resultList) > 0 }">
+        <div class="couponList__btnContainer">
+            <button type="button" class="btn theme" onclick="fn_regist_dwld_coupon_all();">모든 쿠폰 다운로드</button>
+        </div>
+    </c:if>
+    <c:choose>
+        <c:when test="${ not empty resultMapDwld.resultList && fn:length(resultMapDwld.resultList) > 0 }">
+                <div class="couponList">
+                <c:forEach items="${ resultMapDwld.resultList }" var="couponList" varStatus="status">
+                    <div class="couponList__item">
+                        <div class="couponList__left">
+                            <input type="hidden" name="couponArray" value="<c:out value="${ couponList.couponInnb }"/>" />
+                            <p class="couponList__subTitle">
+                                <c:out value="${ couponList.cupnpkNm }"/>
+                            </p>
+                            <p class="couponList__title">
+                                <c:out value="${ couponList.couponSndngNm }"/><br>
+                                <span class="couponList__date"><c:out value="${ couponList.coupNm }"/></span>
+                            </p>
+                            <p class="couponList__date">
+                                <c:choose>
+                                    <c:when test="${ 'Y' eq couponList.dwldPdLmttAt }">
+                                        <c:out value="${couponList.dwldBgnDt}" /> ~
+                                        <c:out value="${couponList.dwldEndDt}" />
+                                        <c:if test="${ 0 lt couponList.validpdDay }"><span class="couponList__dayLeft">(<c:out value="${ couponList.validpdDay }"/>일 남음)</span></c:if>
+                                    </c:when>
+                                    <c:otherwise>
+                                        제한없음
+                                    </c:otherwise>
+                                </c:choose>
+                            </p>
+                            <button type="button"
+                                    class="btn sm gray2 couponList__checkBtn"
+                                    onclick="fn_open_modal_coupon_dtl('#modalDiv', '#coupon-info-pop', '<c:out value="/sopmal/mpage/bnef/selectDwldYCouponDtlInfoInqirePopup"/>', '<c:out value="${ couponList.couponInnb }"/>', '<c:out value="${ couponList.sopmalCd }"/>', '<c:out value="${ couponList.couponSndngInnb }"/>'); return false;"
+                            >
+                                조회
+                            </button>
+                        </div>
+                        <div class="couponList__right">
+                            <div class="couponList__image">
+                                <c:choose>
+                                    <c:when test="${ couponList.sopmalCd eq 'NC' }">
+                                        <img src="/pc/images/쿠폰이미지01.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'CH' }">
+                                        <img src="/pc/images/쿠폰이미지02.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'TZ' }">
+                                        <img src="/pc/images/쿠폰이미지03.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'DT' }">
+                                        <img src="/pc/images/쿠폰이미지04.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'PL' }">
+                                        <img src="/pc/images/쿠폰이미지05.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'LF' }">
+                                        <img src="/pc/images/쿠폰이미지06.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'AF' }">
+                                        <img src="/pc/images/쿠폰이미지07.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'DL' }">
+                                        <img src="/pc/images/쿠폰이미지08.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'JM' }">
+                                        <img src="/pc/images/쿠폰이미지09.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'NB' }">
+                                        <img src="/pc/images/쿠폰이미지10.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'BD' }">
+                                        <img src="/pc/images/쿠폰이미지11.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                </c:choose>
+                            </div>
+                            <button type="button" class="btn sm theme outline"
+                                    onclick="fn_regist_dwld_coupon(<c:out value="${ couponList.couponInnb }"/>,
+                                        '<c:out value="${ couponList.sopmalCd }"/>',
+                                        '<c:out value="${ couponList.couponSndngInnb }"/>',
+                                        '<c:out value="${ couponList.cupnpkInnb }"/>',
+                                        '<c:out value="${ couponList.cupnpkNm }"/>',
+                                        '<c:out value="${ couponList.cupnpkDc }"/>' );">
+                                쿠폰 다운로드
+                            </button>
+                        </div>
+                    </div>
+                </c:forEach>
+                </div>
+                <div class="pagination__container">
+                    <ui:pagination paginationInfo="${resultMapDwld.paginationInfo}" type="image" jsFunction="fn_select_dwld_coupon" />
+                </div>
+            </c:when>
+            <c:otherwise>
+                <div class="couponList">
+                    <div class="couponList__no-result">
+                        <img src="<c:url value="/pc/images/icon__no-result.png"/>" alt="">
+                        <p class="orderList__no-result-text">다운로드 가능한 쿠폰이 없습니다.</p>
+                    </div>
+                </div>
+            </c:otherwise>
+        </c:choose>
+</form>

src/main/webapp/WEB-INF/views/sopmal/mpage/bnef/MbrGradR.jsp

@@ -0,0 +1,132 @@
+<%@ 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"%>
+
+
+<%--
+	Class Name : CouponDtlsR.jsp
+	Description : 마이페이지 쿠폰 내역
+	Modification Information
+
+	수정일 수정자 수정내용
+	------- -------- ---------------------------
+	2024-02-27 추지훈 최초 생성
+--%>
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <%-- 공통 include --%>
+    <jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
+</head>
+
+<script>
+    $(document).ready(function() {
+
+
+    });
+
+
+
+
+
+</script>
+
+<body>
+
+<%-- 공통 Header --%>
+<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
+
+<!-- 메인 컨텐츠 영역 -->
+<main>
+    <div class="sub-wrapper">
+        <div class="sub-content">
+            <div class="sub-rl">
+                <spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
+                <%-- 마이페이지 Left 영역 --%>
+                <jsp:include page="/WEB-INF/views/comm/mpage/MypageLeft.jsp"/>
+                <div class="sub-right-content">
+                    <%-- 마이페이지 Right 영역 --%>
+                    <jsp:include page="/WEB-INF/views/comm/mpage/MypageRight.jsp"/>
+                        <div class="sub-right-content__section">
+                            <div class="myMemberRank">
+                                <div class="myMemberRank__inner">
+                                    <h3 class="myMemberRank__title">회원등급</h3>
+                                    <p class="myMemberRank__text">고객님의 주문실적에 따라 다채로운 혜택을 받아보세요!</p>
+                                </div>
+                                <img src="/pc/images/회원등급이미지.png" alt="">
+                            </div>
+                            <div class="myMemberRankInfo">
+                                <ul class="myMemberRankInfo__list">
+                                <c:choose>
+                                    <c:when test="${ not empty resultMap.resultList && fn:length(resultMap.resultList) > 0 }">
+                                        <c:forEach var="gradList" items="${ resultMap.resultList }" varStatus="status">
+                                            <li class="myMemberRankInfo__item">
+                                                <div class="myMemberRankInfo__top">
+                                                    <input type = "hidden" name = "" value = "<c:out value="${cdnurl}${gradList.mbrGradIconCours}"/>"/>
+                                                    <c:if test = "${not empty gradList.mbrGradIconCours}">
+                                                        <img src="<c:out value="${ cdnurl }${gradList.mbrGradIconCours}"/>"  onerror="this.src='/pc/images/image_placeholder.png'" width="112" height="112" alt="${ gradList.mbrGradNm }">
+                                                    </c:if>
+                                                    <div class="myMemberRankInfo__topDescription">
+                                                        <span class="myMemberRankInfo__topName"><c:out value="${ gradList.mbrGradNm }"/></span>
+                                                        <p class="myMemberRankInfo__topText">
+                                                            <c:choose>
+                                                                <c:when test="${ gradList.mbrGradCndCd eq '01'}">
+                                                                    <c:out value="${ gradList.mbrGradCndCdNm }"/>
+                                                                </c:when>
+                                                                <c:when test="${ gradList.mbrGradCndCd eq '02'}">
+                                                                    <%-- 구매 횟수 1년에 <c:out value="${ gradList.mbrGradPurchsCnt }"/>회 이상,<br> --%>
+                                                                    구매금액 <c:out value="${ gradList.mbrGradAmtSop }"/> 이상인 경우
+                                                                </c:when>
+                                                            </c:choose>
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                                <div class="myMemberRankInfo__body">
+                                                    <c:if test="${ gradList.mbrGradCndCd eq '02' && not empty gradList.mlgAccmlAmt }">
+                                                        <div class="myMemberRankInfo__box">
+                                                            <img src="/pc/images/icon_member-mileage.png" alt="">
+                                                            <span class="myMemberRankInfo__boxText">구매금액의 <em><c:out value="${ gradList.mlgAccmlAmt }"/><c:out value="${ gradList.mlgAccmlUnitDvCdNm }"/></em> 적립</span>
+                                                        </div>
+                                                    </c:if>
+                                                    <c:if test="${ gradList.couponAt > 0 }">
+                                                        <div class="myMemberRankInfo__box">
+                                                            <img src="/pc/images/icon_member-coupon.png" alt="">
+                                                            <span class="myMemberRankInfo__boxText"><em><c:out value="${ gradList.cupnpkNm }"/></em> 쿠폰팩 지급</span>
+                                                        </div>
+                                                    </c:if>
+                                                </div>
+                                            </li>
+                                        </c:forEach>
+                                    </c:when>
+                                    <c:otherwise>
+                                        <tr>
+                                            <td colspan="100%" ><spring:message code="common.nodata"/></td>
+                                        </tr>
+                                    </c:otherwise>
+                                </c:choose>
+                                </ul>
+                            </div>
+                            <div class="infoBox">
+                                <h6 class="infoBox__title">안내사항</h6>
+                                <ol class="infoBox__list">
+                                    <li><c:out value="${resultMap.gradGroup.mbrGradInfo.calcPdMtCnt}"/>개월 동안 주문한 금액 기준이며, 혜택은 등업시 제공 합니다.</li>
+                                </ol>
+                            </div>
+                        </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+<%-- 공통 Footer --%>
+<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
+
+</body>
+
+</html>

src/main/webapp/WEB-INF/views/sopmal/mpage/bnef/MlgDtlsR.jsp

@@ -0,0 +1,83 @@
+<%@ 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"%>
+
+
+<%--
+	Class Name : CouponDtlsR.jsp
+	Description : 마이페이지 쿠폰 내역
+	Modification Information
+
+	수정일 수정자 수정내용
+	------- -------- ---------------------------
+	2024-02-27 추지훈 최초 생성
+--%>
+
+<script>
+    $(document).ready(function() {
+
+
+    });
+
+
+
+
+
+</script>
+
+<div class="sub-tab__content current">
+    <div class="mileageList">
+        <c:choose>
+            <c:when test="${ not empty resultMap.resultList && fn:length(resultMap.resultList) > 0 }">
+                <c:forEach var="list" items="${ resultMap.resultList }" varStatus="status">
+                    <div class="mileageList__item
+                        <c:if test="${ list.mlgAccmlDvCd eq 'add' || list.mlgAccmlDvCd eq 'up' }">
+                        mileageList__item--saveUp
+                        </c:if>"
+                    >
+                        <div class="mileageList__itemHeader">
+                            <div class="mileageList__itemHeaderMisc">
+                                <span class="mileageList__itemDate"><c:out value="${ list.mpageRegistDt }"/></span>
+                                <span class="mileageList__itemDot">·</span>
+                                <span class="mileageList__itemBrand"><c:out value="${ list.sopmalNm }"/></span>
+                                <c:if test = "${list.mlgAccmlDvCd eq 'add' || list.mlgAccmlDvCd eq 'up'}"><%--적립 혹은 지급 일 때만 유효기간 노출--%>
+                                    <span class="mileageList__itemDot">·</span>
+                                    <span class="mileageList__itemDate"><c:out value="${ list.bgnDt }"/></span>
+                                    <span class="mileageList__itemDot">~</span>
+                                    <span class="mileageList__itemDate"><c:out value="${ list.endDt }"/></span>
+                                </c:if>
+                            </div>
+                            <span class="mileageList__itemTitle"><c:out value="${ list.mlgAccmlDvNm }"/></span>
+                        </div>
+                        <div class="mileageList__itemBody">
+                            <span class="mileageList__itemDescription"><c:out value="${ list.mlgApplcDvNm }"/></span>
+                            <span class="mileageList__itemNumber"><span
+                                    class="comma"><fmt:formatNumber value="${list.accmlmnyAmt}" pattern="#,###"/></span></span>
+                        </div>
+                        <div class="mileageList__orderNum">
+                            <c:if test="${ not empty list.ordrInnb && list.ordrInnb ne 0 }">
+                                주문번호 <em><c:out value="${ list.ordrInnb }"/></em>
+                            </c:if>
+                        </div>
+                    </div>
+                </c:forEach>
+            </c:when>
+            <c:otherwise>
+                <div class="orderList__no-result">
+                    <img src="<c:url value="/pc/images/icon__no-result.png"/>" alt="">
+                    <p class="orderList__no-result-text">마일리지내역이 없습니다.</p>
+                </div>
+            </c:otherwise>
+        </c:choose>
+    </div>
+    <div class="pagination__container">
+        <ui:pagination paginationInfo="${resultMap.paginationInfo}" type="image" jsFunction="fn_select_mlg_list" />
+    </div>
+</div>
+<div class="sub-tab__content">2</div>
+<div class="sub-tab__content">3</div>
+<div class="sub-tab__content">4</div>

src/main/webapp/WEB-INF/views/sopmal/mpage/bnef/MlgDtlsRForm.jsp

@@ -0,0 +1,341 @@
+<%@ 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"%>
+
+
+<%--
+	Class Name : CouponDtlsR.jsp
+	Description : 마이페이지 쿠폰 내역
+	Modification Information
+
+	수정일 수정자 수정내용
+	------- -------- ---------------------------
+	2024-02-27 추지훈 최초 생성
+--%>
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <%-- 공통 include --%>
+    <jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
+</head>
+
+<script>
+    $(document).ready(function() {
+
+
+
+        let pageIndex	= '<c:out value="${ resultMap.paramVO.pageIndex }"/>';
+        let pageUnit 	= '<c:out value="${ resultMap.paramVO.pageUnit }"/>';
+
+        fn_select_mlg_list(pageIndex, pageUnit);
+
+        fn_start_display();
+
+    });
+
+
+
+    /******************************************************************
+     *   시작 화면 제어
+     ******************************************************************/
+    const fn_start_display = function() {
+
+        /* 검색조건 > 날짜 구간 버튼 클릭 이벤트 */
+        $('.dateRange-btn').on('click', function() {
+            const date = $(this).attr('id');
+
+            $(this).closest('div').find('#dateRange').val(date);
+
+            if ('allDays' === date) {
+                $('#bgnDt, #endDt').val('');
+
+                return false;
+            }
+
+            fn_set_date('bgnDt', 'endDt', 'endDt', date);
+        });
+
+        /* 검색 버튼 클릭 이벤트 */
+        $('#btnSearch').on('click', function() {
+            fn_select_mlg_list(1);
+        });
+    }
+
+
+    /* 검색조건 세팅 */
+    const fn_set_param = function() {
+        const params = ${paramVO};
+        const keys = Object.keys(params);
+
+        for (let i = 0; i < keys.length; i++) {
+            let key = keys[i];
+            let data = params[key];
+
+            if ('bgnDt' == key || 'endDt' == key) {
+                if (!fn_is_empty(data)) {
+                    for (let i = 0; i < data.length; i++) {
+                        $('#' + key).val(data);
+                    }
+                }
+            }
+
+            if ('dateRange' == key) {
+                $('#'+ data).trigger('click');
+            }
+
+            if ('srchwrd' == key) {
+                $('#' + key).val(data);
+            }
+        }
+    }
+
+
+
+    /******************************************************************
+     *   마일리지 목록 조회
+     ******************************************************************/
+    const fn_select_mlg_list	= function(pageIndex, pageUnit) {
+
+
+        const currentTabTxt = $(".sub-tab__btn.current").text();
+        if(currentTabTxt === '적립') {
+            $("#srchMlgAccmlDvCd").val("add");
+        } else if (currentTabTxt === 'use') {
+            $("#srchMlgAccmlDvCd").val("use");
+        } else if (currentTabTxt === 'exp') {
+            $("#srchMlgAccmlDvCd").val("exp");
+        }
+
+        let dataStr;
+        if(!pageIndex) {
+            $('#pageIndex').val(1);
+        } else {
+            $('#pageIndex').val(pageIndex);
+        }
+
+        if(!pageUnit) {
+
+            dataStr	= $('#listForm').serialize();
+        } else {
+            if($('#pageUnit').length){
+                $('#pageUnit').val(pageUnit);
+                dataStr	= $('#listForm').serialize();
+            } else {
+                dataStr	= $('#listForm').serialize()+'&pageUnit='+pageUnit;
+            }
+        }
+
+        $('#pageIndex').val(pageIndex);
+
+
+        $.ajax({
+            type: "post",
+            url : '<c:url value="/sopmal/mpage/bnef/selectMlgDtlsInqire"/>',
+            data : dataStr,
+            success:function(resultHtml) {
+                $('#pageDiv').empty();
+                $('#pageDiv').html(resultHtml);
+            }
+        });
+    }
+
+
+    /******************************************************************
+     *   마일리지 목록 조회 지급구분
+     ******************************************************************/
+    const fn_select_mlg_list_dv = function(srchMlgAccmlDvCd) {
+
+        $.ajax({
+            type: "post",
+            url : '<c:url value="/sopmal/mpage/bnef/selectMlgDtlsInqire"/>',
+            data : {
+                srchMlgAccmlDvCd : srchMlgAccmlDvCd
+            },
+            success:function(resultHtml) {
+                $('#pageDiv').empty();
+                $('#pageDiv').html(resultHtml);
+            }
+        });
+    }
+
+
+
+</script>
+
+<body>
+
+<%-- 공통 Header --%>
+<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
+
+<!-- 메인 컨텐츠 영역 -->
+<main>
+    <div class="sub-wrapper">
+        <div class="sub-content">
+            <div class="sub-rl">
+                <%-- 마이페이지 Left 영역 --%>
+                <jsp:include page="/WEB-INF/views/comm/mpage/MypageLeft.jsp"/>
+                <div class="sub-right-content">
+                    <%-- 마이페이지 Right 영역 --%>
+                    <jsp:include page="/WEB-INF/views/comm/mpage/MypageRight.jsp"/>
+                    <div class="sub-right-content__section">
+                        <h3 class="sub-right-content__title">마일리지 내역</h3>
+                        <div class="mileageStatus">
+                            <div class="mileageStatusCurrent">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="67" height="63" viewBox="0 0 67 63"
+                                     fill="none">
+                                    <g clip-path="url(#clip0_872_54192)">
+                                        <g style="mix-blend-mode:darken">
+                                            <path
+                                                    d="M43.7905 51.5702C56.5262 51.5702 66.8505 41.2459 66.8505 28.5102C66.8505 15.7745 56.5262 5.4502 43.7905 5.4502C31.0548 5.4502 20.7305 15.7745 20.7305 28.5102C20.7305 41.2459 31.0548 51.5702 43.7905 51.5702Z"
+                                                    fill="#DADBE1"></path>
+                                        </g>
+                                        <path d="M4.93945 15.2997V13.7197" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M2.58 17.6494H1" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M4.93945 20.0098V21.5898" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M7.28906 17.6494H8.86906" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M26.1895 2.42V1" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M24.0704 4.54004H22.6504" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M26.1895 6.66016V8.08016" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M28.3105 4.54004H29.7305" stroke="#3B3B3D" stroke-width="2"
+                                              stroke-linecap="round" stroke-linejoin="round"></path>
+                                        <path d="M55.8999 13.9805H18.9199V21.8905H55.8999V13.9805Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <path d="M60.1909 21.8896H23.2109V29.8096H60.1909V21.8896Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <path d="M54.3804 29.8096H17.4004V37.7196H54.3804V29.8096Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <path d="M57.6909 37.7197H20.7109V45.6397H57.6909V37.7197Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <path d="M61.8804 45.6396H24.9004V53.5496H61.8804V45.6396Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <path d="M57.6909 53.5498H20.7109V61.4698H57.6909V53.5498Z" fill="white"
+                                              stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                              stroke-linejoin="round"></path>
+                                        <g style="mix-blend-mode:darken">
+                                            <path
+                                                    d="M50.6004 42.0604C50.6004 43.2804 50.5104 44.4704 50.3404 45.6404C49.9204 48.4604 49.0204 51.1304 47.7204 53.5504C46.0604 56.6504 43.7504 59.3604 40.9604 61.4704H20.7104V53.5504H24.9004V45.6404H20.7104V37.7204H17.4004V29.8104H23.2104V21.8904H18.9204V18.7604C21.2204 18.0404 23.6604 17.6504 26.1904 17.6504C31.2704 17.6504 36.0004 19.2104 39.9104 21.8904C42.9204 23.9304 45.4504 26.6504 47.2904 29.8104C48.7004 32.2104 49.7004 34.8804 50.2004 37.7204C50.4704 39.1304 50.6004 40.5804 50.6004 42.0604Z"
+                                                    fill="#DADBE1"></path>
+                                        </g>
+                                        <path
+                                                d="M2.54078 48.8405H38.8708C39.6608 46.7305 40.1108 44.4505 40.1108 42.0605H1.30078C1.30078 44.4505 1.75078 46.7305 2.54078 48.8405Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M20.7098 61.4709C26.1498 61.4709 31.0498 59.2309 34.5798 55.6309H6.83984C10.3598 59.2309 15.2698 61.4709 20.7098 61.4709Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M6.84102 55.6306H34.581C36.461 53.7106 37.921 51.4106 38.881 48.8506H2.54102C3.50102 51.4106 4.96102 53.7206 6.84102 55.6306Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M6.84102 28.4902C4.96102 30.4102 3.50102 32.7102 2.54102 35.2702H38.871C37.911 32.7102 36.451 30.4002 34.571 28.4902H6.84102Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M1.30078 42.0603H40.1208C40.1208 39.6703 39.6708 37.3903 38.8808 35.2803H2.54078C1.75078 37.3903 1.30078 39.6703 1.30078 42.0603Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M20.7098 22.6504C15.2698 22.6504 10.3698 24.8904 6.83984 28.4904H34.5798C31.0598 24.8904 26.1498 22.6504 20.7098 22.6504Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path
+                                                d="M26.1893 61.4704C36.9091 61.4704 45.5993 52.7802 45.5993 42.0604C45.5993 31.3405 36.9091 22.6504 26.1893 22.6504C15.4694 22.6504 6.7793 31.3405 6.7793 42.0604C6.7793 52.7802 15.4694 61.4704 26.1893 61.4704Z"
+                                                fill="white" stroke="#3B3B3D" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"></path>
+                                        <path class="svg-themeColor"
+                                              d="M19.3923 35.9873C19.5007 35.229 20.3132 34.3623 21.4507 34.3623C22.4798 34.3623 23.2923 35.1206 23.5632 35.879L26.0548 44.1665H26.109L28.6007 35.879C28.8173 35.1206 29.6298 34.3623 30.7132 34.3623C31.8507 34.3623 32.6632 35.229 32.7715 35.9873L34.6673 47.6873V48.0665C34.6673 48.9873 34.0173 49.5831 33.1507 49.5831C32.0673 49.5831 31.634 49.0956 31.5257 48.1206L30.334 39.5623H30.2798L27.7882 48.3373C27.6257 48.8248 27.2465 49.529 26.109 49.529C24.9715 49.529 24.5923 48.8248 24.4298 48.3373L21.8298 39.5081H21.7757L20.5298 48.0665C20.3673 49.0415 19.9882 49.529 18.9048 49.529C17.984 49.5831 17.334 48.9873 17.334 48.0665C17.334 47.9581 17.334 47.8498 17.334 47.6873L19.3923 35.9873Z"
+                                              fill="#3B3B3D"></path>
+                                    </g>
+                                    <defs>
+                                        <clipPath id="clip0_872_54192">
+                                            <rect width="66.86" height="62.47" fill="white"></rect>
+                                        </clipPath>
+                                    </defs>
+                                </svg>
+                                <span class="mileageStatusCurrent__title">사용가능 마일리지</span>
+                                <span class="mileageStatusCurrent__number"><span class="comma"><c:out value="${ resultMap.blceSum }"/></span></span>
+                                <span class="mileageStatusCurrent__unit">점</span>
+                            </div>
+                            <div class="mileageStatusMisc">
+                                <div class="mileageStatusMisc__item mileageStatusMisc__item--scheduled">
+                                    <span class="mileageStatusMisc__title">적립예정 마일리지</span>
+                                    <span class="mileageStatusMisc__number"><span class="comma"><c:out value="${ resultMap.accmlPrearngeSum }"/></span></span>
+                                    <span class="mileageStatusMisc__unit">점</span>
+                                </div>
+                                <div class="mileageStatusMisc__item">
+                                    <span class="mileageStatusMisc__title">소멸예정 마일리지</span>
+                                    <span class="mileageStatusMisc__number"><span class="comma"><c:out value="${ resultMap.endInMnthBlceSum }"/></span></span>
+                                    <span class="mileageStatusMisc__unit">점</span>
+                                </div>
+                            </div>
+                        </div>
+                        <form id="listForm">
+                            <input type="hidden" id="mlgInnb" name="mlgInnb" value=""/>
+                            <input type="hidden" id="pageIndex" name="pageIndex" value="${ resultMap.paramVO.pageIndex} }"/>
+                            <input type="hidden" id="pageUnit" name="pageUnit" value="${ resultMap.paramVO.pageUnit} }"/>
+                            <input type="hidden" id="srchMlgAccmlDvCd" name="srchMlgAccmlDvCd" value=""/>
+                            <div class="customer-search">
+                                <div class="customer-search__row justify-start">
+                                    <div class="customer-search__controls">
+                                        <div class="dateRange-btnContainer">
+                                            <input type="hidden" name="dateRange" id="dateRange" value="allDays">
+                                            <button type="button" class="dateRange-btn" id="7D">일주일</button>
+                                            <button type="button" class="dateRange-btn" id="1M">1개월</button>
+                                            <button type="button" class="dateRange-btn" id="3M">3개월</button>
+                                            <button type="button" class="dateRange-btn selected" id="allDays">전체</button>
+                                        </div>
+                                        <div class="input-container">
+                                            <input type="text" name="bgnDt" id="bgnDt" class="datepicker" title="시작 날짜 선택" autocomplete="off">
+                                            <span class="tilde">~</span>
+                                            <input type="text" name="endDt" id="endDt" class="datepicker" title="종료 날짜 선택" autocomplete="off">
+                                        </div>
+                                    </div>
+                                    <button type="button" id="btnSearch" class="btn md dark">검색</button>
+                                </div>
+                            </div>
+
+                            <div class="sub-tab">
+                                <div class="sub-tab__trigger">
+                                    <button class="sub-tab__btn current" type="button" onclick="fn_select_mlg_list(1);">전체</button>
+                                    <button class="sub-tab__btn" type="button" onclick="fn_select_mlg_list_dv('add');">적립</button>
+                                    <button class="sub-tab__btn" type="button" onclick="fn_select_mlg_list_dv('use');">사용</button>
+                                    <button class="sub-tab__btn" type="button" onclick="fn_select_mlg_list_dv('exp');">소멸</button>
+                                </div>
+                                <div id="pageDiv">
+
+                                </div>
+
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+<%-- 공통 Footer --%>
+<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
+
+</body>
+
+</html>

src/main/webapp/WEB-INF/views/sopmal/mpage/bnef/UsePosblCouponDtlPopupR.jsp

@@ -0,0 +1,179 @@
+<%@ 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"%>
+
+
+<%--
+	Class Name : CouponDtlsR.jsp
+	Description : 마이페이지 쿠폰 내역
+	Modification Information
+
+	수정일 수정자 수정내용
+	------- -------- ---------------------------
+	2024-02-27 추지훈 최초 생성
+--%>
+
+    <!-- 쿠폰정보 -->
+    <div id="coupon-info-pop" class="modal default" style="max-width: 560px;">
+        <div class="modal-header">
+            <div class="modal-header__title">쿠폰정보</div>
+        </div>
+        <div class="modal-content">
+            <div class="table-wrapper">
+                <table class="table tight">
+                    <caption>해당 테이블에 대한 설명</caption>
+                    <!-- 각 열 width 설정 -->
+                    <colgroup>
+                        <col style="width: 25%;">
+                        <col style="width: auto;">
+                    </colgroup>
+                    <tbody>
+                        <tr>
+                            <th>
+                                쿠폰명
+                            </th>
+                            <td><c:out value="${ resultMap.dwldCouponVO.coupNm }"/></td>
+                        </tr>
+                        <tr>
+                            <th>
+                                혜택
+                            </th>
+                            <td>
+                                <c:choose>
+                                    <c:when test="${ resultMap.dwldCouponVO.bnefDv eq '01' || resultMap.dwldCouponVO.bnefDv eq '03' }">
+                                        <span class="fw-500">
+                                            <c:out value="${ resultMap.dwldCouponVO.aditDscntAmt }"/> <c:out value="${ resultMap.dwldCouponVO.goodsDscntDvNm }"/> 할인
+                                        </span><br/>
+                                        <c:if test="${ '01' eq resultMap.dwldCouponVO.goodsDscntDv }">
+                                            <span class="gray-8">최대 <c:out value="${ resultMap.dwldCouponVO.dscntMxmmAmt }"/>원 할인</span>
+                                        </c:if>
+                                    </c:when>
+                                    <c:when test="${ resultMap.dwldCouponVO.bnefDv eq '02' }">
+                                        <span class="fw-500">
+                                        <c:if test="${ '01' eq resultMap.dwldCouponVO.dlvyAmtDscntDv }">기본배송비 무료,
+                                            </span>
+                                            <br>
+                                            <span class="gray-8">
+                                            최대 <c:out value="${ resultMap.dwldCouponVO.dlvyAmtMxmmDscntAmt }"/>원 할인</c:if>
+                                        </span>
+                                        <span class="fw-500">
+                                            <c:if test="${ '02' eq resultMap.dwldCouponVO.dlvyAmtDscntDv }">배송비 <c:out value="${ resultMap.dwldCouponVO.dlvyAmtDscntAmt }"/>원 할인</c:if>
+                                        </span>
+                                    </c:when>
+                                    <c:otherwise>
+
+                                    </c:otherwise>
+                                </c:choose>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>
+                                유효기간
+                            </th>
+                            <td>
+                                <c:choose>
+                                    <c:when test="${ resultMap.dwldCouponVO.validpdKndCd eq '01' }">
+                                        <c:out value="${ resultMap.dwldCouponVO.validpdBgnDt }"/> ~ <c:out value="${ resultMap.dwldCouponVO.validpdEndDt }"/><c:if test="${ 0 lt resultMap.dwldCouponVO.validpdDay }">(<c:out value="${ resultMap.dwldCouponVO.validpdDay }"/>일 남음)</c:if>
+                                    </c:when>
+                                    <c:when test="${ resultMap.dwldCouponVO.validpdKndCd eq '02' }">
+                                        <c:out value="${ resultMap.dwldCouponVO.validpdKndCdNm }"/> <c:out value="${ resultMap.dwldCouponVO.validpdDeCnt }"/> 일
+                                    </c:when>
+                                    <c:otherwise>
+                                        <c:out value="${ resultMap.dwldCouponVO.validpdBgnDt }"/> ~ <c:out value="${ resultMap.dwldCouponVO.validpdEndDt }"/><c:if test="${ 0 lt resultMap.dwldCouponVO.validpdDay }">(<c:out value="${ resultMap.dwldCouponVO.validpdDay }"/>일 남음)</c:if>
+                                    </c:otherwise>
+                                </c:choose>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="infoBox">
+                <ul class="infoBox__list">
+                    <%-- 사용환경 --%>
+                    <c:if test="${ not empty resultMap.dwldCouponVO.useEnvrnCd }">
+                        <c:choose>
+                            <c:when test="${resultMap.dwldCouponVO.useEnvrnCd eq '01' }">
+                                <li class="fyi gray-7">온라인 쿠폰</li>
+                            </c:when>
+                            <c:when test="${ resultMap.dwldCouponVO.useEnvrnCd eq '02' }">
+                                <li class="fyi gray-7">오프라인 쿠폰</li>
+                            </c:when>
+                            <c:when test="${ resultMap.dwldCouponVO.useEnvrnCd eq '03' }">
+                                <li class="fyi gray-7">온/오프라인 쿠폰</li>
+                            </c:when>
+                        </c:choose>
+                    </c:if>
+                    <%-- 타 쿠폰 동시사용여부 --%>
+                    <c:if test="${ not empty resultMap.dwldCouponVO.otrCouponSmtmUseAt }">
+                        <c:choose>
+                            <c:when test="${resultMap.dwldCouponVO.otrCouponSmtmUseAt eq 'Y' }">
+                                <li class="fyi gray-7">다른 쿠폰과 동시 사용 불가</li>
+                            </c:when>
+                            <c:when test="${ resultMap.dwldCouponVO.otrCouponSmtmUseAt eq 'N' }">
+                                <li class="fyi gray-7">다른 쿠폰과 동시 사용 가능</li>
+                            </c:when>
+                        </c:choose>
+                    </c:if>
+                    <%-- 사용가능금액(제품) --%>
+                        <c:if test="${ not empty resultMap.dwldCouponVO.usePosblAmt && 0 ne fn:replace(resultMap.dwldCouponVO.usePosblAmt, ',', '') }">
+                        <li class="fyi gray-7"><c:out value="${ resultMap.dwldCouponVO.usePosblAmt }"/>원 이상 구매 시</li>
+                    </c:if>
+                    <%-- 사용가능금액(대상제품 포함 구매제품 총합) --%>
+                    <c:if test="${ not empty resultMap.dwldCouponVO.usePosblAllAmt && 0 ne fn:replace(resultMap.dwldCouponVO.usePosblAllAmt, ',', '') && resultMap.dwldCouponVO.usePosblAllAmtUseAt eq 'Y' }">
+                        <li class="fyi gray-7"><c:out value="${ resultMap.dwldCouponVO.usePosblAllAmt }"/>원 이상 구매 시</li>
+                    </c:if>
+                    <%-- 중복다운로드 여부 --%>
+                    <c:if test="${ not empty resultMap.dwldCouponVO.dplctDwldAt}">
+                        <c:choose>
+                            <c:when test="${resultMap.dwldCouponVO.dplctDwldAt eq 'N' }">
+                                <li class="fyi gray-7">중복 다운로드 불가</li>
+                            </c:when>
+                            <c:when test="${ resultMap.dwldCouponVO.dplctDwldAt eq 'Y' }">
+                                <li class="fyi gray-7">중복 다운로드 가능</li>
+                            </c:when>
+                        </c:choose>
+                    </c:if>
+                    <%-- 중복할인여부 --%>
+                    <c:if test="${ not empty resultMap.dwldCouponVO.dplctDscntAt}">
+                        <c:choose>
+                            <c:when test="${resultMap.dwldCouponVO.dplctDscntAt eq 'N' }">
+                                <li class="fyi gray-7">중복 할인 불가</li>
+                            </c:when>
+                            <c:when test="${ resultMap.dwldCouponVO.dplctDscntAt eq 'Y' }">
+                                <li class="fyi gray-7">중복 할인 가능</li>
+                            </c:when>
+                        </c:choose>
+                    </c:if>
+                    <%-- 적용상품선정기준 --%>
+                    <c:if test="${ not empty resultMap.dwldCouponVO.goodsApplcDvCd }">
+                        <c:choose>
+                            <c:when test="${resultMap.dwldCouponVO.goodsApplcDvCd eq '01' }">
+                                <li class="fyi gray-7">모든 상품에 사용가능</li>
+                            </c:when>
+                            <c:when test="${ resultMap.dwldCouponVO.goodsApplcDvCd eq '02' }">
+                                <li class="fyi gray-7">특정 카테고리에 사용가능</li>
+                            </c:when>
+                            <c:when test="${ resultMap.dwldCouponVO.goodsApplcDvCd eq '03' }">
+                                <li class="fyi gray-7">특정 상품에 사용가능</li>
+                            </c:when>
+                            <c:when test="${ resultMap.dwldCouponVO.goodsApplcDvCd eq '04' }">
+                                <li class="fyi gray-7">특정 카테고리 외 사용가능</li>
+                            </c:when>
+                            <c:when test="${ resultMap.dwldCouponVO.goodsApplcDvCd eq '05' }">
+                                <li class="fyi gray-7">특정 상품 외 사용가능</li>
+                            </c:when>
+                        </c:choose>
+                    </c:if>
+                </ul>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <a href="#" rel="modal:close" class="btn large outline">닫기</a>
+            <!-- <a href="#" rel="" class="btn large gray2">결제취소</a> -->
+        </div>
+    </div>
+

src/main/webapp/WEB-INF/views/sopmal/mpage/bnef/UsePosblCouponDtlsR.jsp

@@ -0,0 +1,128 @@
+<%@ 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"%>
+
+
+<%--
+	Class Name : CouponDtlsR.jsp
+	Description : 마이페이지 쿠폰 내역
+	Modification Information
+
+	수정일 수정자 수정내용
+	------- -------- ---------------------------
+	2024-02-27 추지훈 최초 생성
+--%>
+<form id="holdListForm">
+    <input type="hidden" id="pageIndex" name="pageIndex" value="<c:out value="${ resultMap.paramVO.pageIndex }"/>"/>
+    <input type="hidden" id="recordCountPerPage" name="recordCountPerPage" value="<c:out value="${ resultMap.paramVO.recordCountPerPage }"/> "/>
+    <input type="hidden" id="sopmalCd" name="sopmalCd"/>
+    <input type="hidden" id="mbrInnb" name="mbrInnb" />
+    <c:choose>
+        <c:when test="${ not empty resultMap.resultList && fn:length(resultMap.resultList) > 0 }">
+            <div class="couponList">
+                <c:forEach items="${ resultMap.resultList }" var="couponList" varStatus="status">
+                    <div class="couponList__item">
+                        <div class="couponList__left">
+                            <p class="couponList__subTitle"><c:out value="${ couponList.cupnpkNm }"/></p>
+                            <p class="couponList__title">
+                                <c:out value="${ couponList.couponSndngNm }"/><br>
+                                <span class="couponList__date"><c:out value="${ couponList.coupNm }"/></span>
+                            </p>
+                            <p class="couponList__date">
+                                <c:out value="${ couponList.validpdBgnDt }"/> <br/> ~ <c:out value="${ couponList.validpdEndDt }"/>
+                                <span class="couponList__dayLeft">
+                                    <c:set var="today" value="<%=new java.util.Date()%>" />
+                                    <c:set var="date"><fmt:formatDate value="${today}" pattern="yyyy-MM-dd" /></c:set>
+                                    <c:choose>
+                                        <c:when test="${ couponList.validpdEndDt gt date }">
+                                            (<c:out value="${ couponList.validpdDay }"/>일 남음)
+                                        </c:when>
+                                        <c:when test="${ couponList.validpdEndDt lt date}">
+                                            (<c:out value="${ couponList.validpdDay }"/>일 지남)
+                                        </c:when>
+                                        <c:when test="${ couponList.validpdEndDt eq date}">
+                                            (오늘까지)
+                                        </c:when>
+                                    </c:choose>
+                                </span>
+                            </p>
+                            <button type="button" 
+                                    class="btn sm gray2 couponList__checkBtn" 
+                                    onclick="fn_open_modal_dwldcoupon_dtl('#modalDiv', '#coupon-info-pop', '<c:out value="/sopmal/mpage/bnef/selectCouponDtlInfoInqirePopup"/>', '<c:out value="${ couponList.dwldCouponInnb }"/>', '<c:out value="${ couponList.sopmalCd }"/>'); return false;"
+                            >
+                                조회
+                            </button>
+                        </div>
+                        <div class="couponList__right">
+                            <div class="couponList__image">
+                                <c:choose>
+                                    <c:when test="${ couponList.sopmalCd eq 'NC' }">
+                                        <img src="/pc/images/쿠폰이미지01.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'CH' }">
+                                        <img src="/pc/images/쿠폰이미지02.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'TZ' }">
+                                        <img src="/pc/images/쿠폰이미지03.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'DT' }">
+                                        <img src="/pc/images/쿠폰이미지04.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'PL' }">
+                                        <img src="/pc/images/쿠폰이미지05.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'LF' }">
+                                        <img src="/pc/images/쿠폰이미지06.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'AF' }">
+                                        <img src="/pc/images/쿠폰이미지07.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'DL' }">
+                                        <img src="/pc/images/쿠폰이미지08.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'JM' }">
+                                        <img src="/pc/images/쿠폰이미지09.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'NB' }">
+                                        <img src="/pc/images/쿠폰이미지10.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                    <c:when test="${ couponList.sopmalCd eq 'BD' }">
+                                        <img src="/pc/images/쿠폰이미지11.png" onerror="this.src='/pc/images/image_placeholder.png'" alt="">
+                                    </c:when>
+                                </c:choose>
+                            </div>
+                                <c:set var="today" value="<%=new java.util.Date()%>" />
+                                <c:set var="date"><fmt:formatDate value="${today}" pattern="yyyy-MM-dd HH:mm" /></c:set>
+                                <c:choose>
+                                    <c:when test="${ couponList.couponSttusCd eq '03' }">
+                                        <span class="couponList__date" style="color: blue"><strong>사용함</strong></span>
+                                    </c:when>
+                                    <c:when test="${ couponList.couponSttusCd eq '02' && couponList.validpdEndDt ge date }">
+                                        <span class="couponList__date" style="color: red"><strong>미사용</strong></span>
+                                    </c:when>
+                                    <c:when test="${ couponList.couponSttusCd eq '02' && couponList.validpdEndDt lt date }">
+                                        <span class="couponList__date" style="color: gray"><strong>소멸함</strong></span>
+                                    </c:when>
+                                </c:choose>
+                        </div>
+                    </div>
+                </c:forEach>
+            </div>
+            <div class="pagination__container">
+                <ui:pagination paginationInfo="${resultMap.paginationInfo}" type="image" jsFunction="fn_select_useposbl_coupon" />
+            </div>
+        </c:when>
+        <c:otherwise>
+            <div class="couponList">
+                <div class="couponList__no-result">
+                    <img src="<c:url value="/pc/images/icon__no-result.png"/>" alt="">
+                    <p class="orderList__no-result-text">사용 가능한 쿠폰이 없습니다.</p>
+                </div>
+            </div>
+        </c:otherwise>
+    </c:choose>
+</form>