[스마트디자인][Mobile] 원터치 주문서 디자인 최신화 & 디바이스 최적화 가이드

📖 문서 활용 가이드

작업 위치 : [쇼핑몰 관리자] 디자인(PC/모바일) > 디자인 보관함 > 수정할 디자인의 '디자인 편집' 버튼 선택 > 디자인 편집창 > 수정할 파일 선택

주문서를 커스텀하지 않은 경우

  • 신규 코드를 전체 복사하여 기존 소스 코드에 그대로 덮어쓰세요.

주문서를 커스텀한 경우

  • 먼저 가이드에 따라 기존 코드에서 붉은색 음영 영역을 삭제하고, 신규 코드의 초록색 음영 영역을 추가하여 변경 사항을 적용해 주세요.
  • ⚠️ 삭제 또는 추가 대상 영역 안에 직접 수정한 코드가 포함될 수 있어요. 단순히 코드 덩어리를 복사/붙여넣기 할 경우 기존 작업 내용이 사라질 수 있으니, 반드시 본인의 코드를 기준으로 가이드의 변경 사항을 꼼꼼하게 비교하며 적용해 주세요.
  • 잘못 수정한 경우에는 당황하지 마시고, 디자인 편집창 상단의 '히스토리' 메뉴에서 이전 파일을 선택하여 백업본을 불러올 수 있어요.

목차

쿠폰선택 /coupon/coupon_select.html수정 /css/module/order/customshiparea.css삭제 /css/module/order/storePickupInfo.css삭제 /js/popup_scroll.js추가 배송가능지역 /order/custom_ship_area.html수정 주문서작성 /order/orderform.html수정 수령지안내 /order/store_pickup_info.html수정
쿠폰선택
쿠폰 > 쿠폰선택 (/coupon/coupon_select.html)
🔴 기존 코드
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes"> <title>쿠폰</title>
<!--@css(/css/module/order/ec_orderform/form_onetouch.css)-->
<!-- 사용자 스타일 수정이 필요한 경우, 신규 CSS 파일을 추가하여 #userStyle #mCafe24Order { } 셀렉터로 처리 가능합니다. --> <!--@js(/layout/basic/js/common.js)--> </head> 
<body id="popup" class="layer">
<div id="userStyle">
<div id="mCafe24Order">
<div module="Coupon_SelectNew" class="ec-base-layer typeWide {$gClearFlex}">
<!--
$prd_non_coupon_display = F
-->
<h1>쿠폰</h1>
<div class="wrap">
<div class="pannelArea {$bPrdCoupon|display}">
<div class="title">
<h2>상품 쿠폰</h2>
</div>
<div class="contents">
<div module="Coupon_aPrd" class="segment">
<div class="ec-base-box">
<strong class="prdName">{$product_name}<span>{$sOptStr}</span><span id="{$coupon_prd_hidden}">
{$sHidden}</span></strong>
<div class="ec-base-table gCellNarrow">
<table border="1">
<caption>결제정보 상세</caption>
<colgroup>
<col style="width:102px;">
<col style="width:auto;">
</colgroup>
<tbody>
<tr>
<th scope="row">판매가</th>
<td class="right">{$sOrdPrice}</td>
</tr>
<tr>
<th scope="row">할인혜택</th>
<td id="{$coupon_prd_total_sale_price}" class="right">{$sTotalMemberSalePrice}</td>
</tr>
</tbody>
</table>
</div>
</div>
<span id="{$coupon_prd_select}" class="gBlank20">{$sCoupon}</span>
<div class="totalPay gBlank20">
<h3 class="heading">할인/적립금액</h3>
<strong class="txtStrong">{$sCouponSaleSpan}</strong>
</div>
</div>
</div>
</div>
<div class="pannelArea {$bOrdCoupon|display}"> <div class="title"> <h2>주문서 쿠폰</h2> </div> <div class="contents"> <div class="segment"> <ul id="{$selected_order_coupon_id}" class="ordCouponList"> <li>{$sOrdCoupon}</li> </ul> </div> </div> </div>
<div class="pannelArea ec-shipCoupon"> <div class="title"> <h2>배송비 쿠폰</h2> </div> <div class="contents"> <div class="segment"> <div class="ec-base-box"> <ul id="{$selected_ship_coupon_id}" class="shipCouponList"></ul> </div> </div> </div> </div>
<div class="ec-base-fold theme2 eToggle"> <div class="title"> <h2>쿠폰적용내역</h2> <span class="txtStrong gRight">{$price_unit_head}<span id="{$total_coupon_discount_id}">0</span> {$price_unit_tail}</span> </div> <div class="contents"> <div class="ec-base-table gCellNarrow"> <table border="1"> <caption>쿠폰적용내역 상세</caption> <colgroup> <col style="width:138px;"> <col style="width:auto;"> </colgroup> <tbody> <tr> <th scope="row">상품 할인/적립</th> <td class="right">{$price_unit_head}<span id="{$product_coupon_discount_id}">0{$price_unit_tail}</span>/<span id="{$product_coupon_mileage_id}">0</span></td> </tr> <tr> <th scope="row">주문서 할인/적립</th> <td class="right">{$price_unit_head}<span id="{$order_coupon_discount_id}">0{$price_unit_tail}</span>/<span id="{$order_coupon_mileage_id}">0</span></td> </tr> <tr> <th scope="row">배송비 할인</th> <td class="right">{$price_unit_head}<span id="{$ship_coupon_discount_id}">0{$price_unit_tail}</span></td> </tr> </tbody> </table> </div> <div class="helpArea"> <ul class="ec-base-help"> <li>보유한 쿠폰 중 적용 가능한 쿠폰만 표시됩니다.</li> <li>쿠폰은 회원등급할인 이후에 적용되므로, 현재 페이지에서 보여지는 판매가와 실제 적용되는 금액이 다를 수 있습니다.</li> <li>추가쿠폰은 최대사용개수와 상관없이 상품 쿠폰과 주문서 쿠폰을 각각 1개씩 추가로 사용할 수 있는 쿠폰입니다.</li> </ul> </div> </div> </div> </div>
<div class="ec-base-button gFull"> <button type="button" class="btnSubmit" onclick="{$action_result}">적용</button>
</div>
<button type="button" class="btnClose" onclick="javascript:self.close();">닫기</button>
</div> </div> </div> </body> </html>
🔵 신규 코드
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes"> <title>쿠폰</title> <!-- 사용자 스타일 수정이 필요한 경우, 신규 CSS 파일을 추가하여 #userStyle #mCafe24Order { } 셀렉터로 처리 가능합니다. -->
<!--@css(/css/module/order/ec_orderform/form_onetouch_popup.css)--> <!--@js(/js/popup_scroll.js)-->
<!--@js(/layout/basic/js/common.js)--> </head>
<body id="popup" class="v2">
<div module="Coupon_SelectNew" class="ec-base-layer {$gClearFlex}"> <!-- $prd_non_coupon_display = F --> <div class="header"> <h1>쿠폰</h1> </div> <div class="wrap"> <div class="ec-base-card productCoupon {$bPrdCoupon|display}"> <div class="card-head"> <h2>상품 쿠폰</h2> </div> <div class="card-content"> <div module="Coupon_aPrd" class="segment"> <strong class="prdName">{$product_name}<span>{$sOptStr}</span><span id="{$coupon_prd_hidden}"> {$sHidden}</span></strong> <div class="ec-base-table"> <table> <caption>결제정보 상세</caption> <tbody> <tr> <th scope="row">판매가</th> <td>{$sOrdPrice}</td> </tr> <tr> <th scope="row" class="top">할인혜택</th> <td class="top"> <span id="{$coupon_prd_total_sale_price}" class="benefit">{$sTotalMemberSalePrice}</span> <div id="{$coupon_prd_select}" class="selectCoupon">{$sCoupon}</div> </td> </tr> <tr> <th scope="row">할인/적립금액</th> <td><strong class="txtStrong txtDiscount">{$sCouponSaleSpan}</strong></td> </tr> </tbody> </table> </div> </div> </div> </div>
<div class="ec-base-card {$bOrdCoupon|display}"> <div class="card-head"> <h2>주문서 쿠폰</h2> </div> <div class="card-content"> <div class="ec-base-table"> <table> <caption>주문서 쿠폰</caption> <tbody> <tr class="top"> <th scope="row">주문서 쿠폰</th> <td> <div class="segment"> <ul id="{$selected_order_coupon_id}" class="ordCouponList"> <li>{$sOrdCoupon}</li> </ul> </div> </td> </tr> </tbody> </table> </div> </div> </div>
<div class="ec-base-card ec-shipCoupon"> <div class="card-head"> <h2>배송비 쿠폰</h2> </div> <div class="card-content"> <div class="ec-base-table"> <table> <caption>배송비 쿠폰</caption> <tbody> <tr> <th scope="row">배송비 쿠폰</th> <td> <div class="segment"> <ul id="{$selected_ship_coupon_id}" class="shipCouponList"></ul> </div> </td> </tr> </tbody> </table> </div> </div> </div>
<div class="ec-base-card"> <div class="card-head"> <h2>쿠폰 적용내역</h2> <!-- 아래 주석 삭제 시 미동작합니다, 주석 삭제 금지 --> <!-- <span class="txtStrong gRight txtDiscount">{$price_unit_head}<span id="{$total_coupon_discount_id}">0</span>{$price_unit_tail}</span> --> </div> <div class="card-content"> <div class="ec-base-table"> <table> <caption>쿠폰적용내역 상세</caption> <tbody> <tr> <th scope="row">쿠폰 적용내역</th> <td><strong class="txtStrong txtDiscount">{$price_unit_head}<span id="{$total_coupon_discount_id}">0</span>{$price_unit_tail}</strong></td> </tr> <tr> <th scope="row">상품 할인/적립</th> <td><span class="txtDiscount">{$price_unit_head}<span id="{$product_coupon_discount_id}">0{$price_unit_tail}</span>/<span id="{$product_coupon_mileage_id}">0</span></span></td> </tr> <tr> <th scope="row">주문서 할인/적립</th> <td><span class="txtDiscount">{$price_unit_head}<span id="{$order_coupon_discount_id}">0{$price_unit_tail}</span>/<span id="{$order_coupon_mileage_id}">0</span></span></td> </tr> <tr> <th scope="row">배송비 할인</th> <td><span class="txtDiscount">{$price_unit_head}<span id="{$ship_coupon_discount_id}">0{$price_unit_tail}</span></span></td> </tr> </tbody> </table> </div> <div class="helpArea gBlank16"> <ul class="ec-base-help"> <li>보유한 쿠폰 중 적용 가능한 쿠폰만 표시됩니다.</li> <li>쿠폰은 회원등급할인 이후에 적용되므로, 현재 페이지에서 보여지는 판매가와 실제 적용되는 금액이 다를 수 있습니다.</li> <li>추가쿠폰은 최대사용개수와 상관없이 상품 쿠폰과 주문서 쿠폰을 각각 1개씩 추가로 사용할 수 있는 쿠폰입니다.</li> </ul> </div>
</div> </div> </div>
<div class="footer ec-base-button"> <button type="button" class="btnReset" onclick="{$action_init}"><i class="icoReset"></i>초기화</button> <button type="button" class="btnSubmit" onclick="{$action_result}">적용</button> </div> <button type="button" class="btnClose" onclick="javascript:self.close();">닫기</button>
</div> </body> </html>
CSS
css > 모듈 > 주문 (/css/module/order/customshiparea.css)
🔴 기존 코드
.xans-order-customshiparea { padding:14px; }
.xans-order-customshiparea .wrap { max-height:460px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; margin:7px 0 14px; border-bottom:1px solid #ddd; background:#fff; }
.xans-order-customshiparea .wrap ul { max-height:460px; }
.xans-order-customshiparea .wrap li { padding:7px; border:1px solid #ddd; border-bottom:0; }
🔵 신규 코드

기존 코드를 모두 삭제해주세요.

CSS
css > 모듈 > 주문 (/css/module/order/storePickupInfo.css)
🔴 기존 코드
#popup { min-width:320px; }
#popup div.wrap { background:#f1f1f1; }
#popup .wrap .ec-base-fold.theme4 { margin:0; }
#popup .wrap .ec-base-fold.theme4 dd { padding:0; }
.xans-order-storepickupinfo .ec-base-table { border:none; }
.xans-order-storepickupinfo .ec-base-table .btnTel { display:inline-block; vertical-align:top; margin:-2px 0 0 7px; padding:7px 10px 7px 28px; border:1px solid #d5d5d5; border-radius:2px; background:#f1f1f1 url("//img.echosting.cafe24.com/skin/mobile_en_US/layout/bg_tel.png") no-repeat 10px center; background-size:8px 13px; }
.xans-order-storepickupinfo .ec-base-table .map { overflow:hidden; padding:0; border-top:1px solid #ececec; line-height:1.4em; background:#fff; }
.xans-order-storepickupinfo .ec-base-table .map img { max-width:100%; }
🔵 신규 코드

기존 코드를 모두 삭제해주세요.

JS
js (/js/popup_scroll.js)
🔴 기존 코드

디자인 편집창에서 화면 추가 후
신규 코드를 넣어주세요.

(작업 순서 : '화면추가' 버튼 선택 > 저장경로 선택 및 파일명 입력 > '저장' 버튼 선택 > 신규 코드 붙여넣기)

🔵 신규 코드
function waitForElement(selector, callback) { const el = document.querySelector(selector); if (el) return callback(el); const observer = new MutationObserver(() => { const el = document.querySelector(selector); if (el) { observer.disconnect(); callback(el); } }); observer.observe(document.body, { childList: true, subtree: true }); } waitForElement('.ec-base-layer .wrap', function(scrollTarget) { const body = document.body; function handleScroll() { const scrollTop = scrollTarget.scrollTop; const scrollHeight = scrollTarget.scrollHeight; const clientHeight = scrollTarget.clientHeight; const isAtTop = scrollTop === 0; const isAtBottom = scrollTop + clientHeight >= scrollHeight; body.classList.toggle('scrollTop', !isAtTop); body.classList.toggle('scrollBottom', !isAtBottom); } scrollTarget.addEventListener('scroll', handleScroll); handleScroll(); });
배송가능지역
주문 > 배송가능지역(/order/custom_ship_area.html)
🔴 기존 코드
<!--@layout(/layout/basic/popup.html)-->
<div module="Order_Customshiparea">
<!--@css(/css/module/order/customshiparea.css)-->
<h2>배송 가능 지역</h2>
<div class="wrap">
<ul>
<li>{$area_name}<p>(우편번호 : {$begin_zipcode}~{$end_zipcode})</p></li>
<li>{$area_name}<p>(우편번호 : {$begin_zipcode}~{$end_zipcode})</p></li>
</ul>
</div>
<button type="button" class="btnBasic" onclick="OrderCustomshiparea.CloseLayer('dAreaLayer');">닫기</button>
</div>
🔵 신규 코드
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes"> <title>배송 가능 지역</title> <!--@css(/css/module/order/ec_orderform/form_onetouch_popup.css)--> <!--@js(/js/popup_scroll.js)--> <!--@js(/layout/basic/js/common.js)--> </head> <body id="popup" class="v2"> <div module="Order_Customshiparea" class="ec-base-layer"> <div class="header"> <h1>배송 가능 지역</h1> </div> <div class="wrap"> <ul class="availableArea"> <li class="ec-base-card gBorder"> <strong class="name">{$area_name}</strong> <p class="detail">우편번호 : {$begin_zipcode}~{$end_zipcode}</p> </li> <li class="ec-base-card gBorder"> <strong class="name">{$area_name}</strong> <p class="detail">우편번호 : {$begin_zipcode}~{$end_zipcode}</p> </li> </ul> </div>
<div class="footer ec-base-button"> <button type="button" class="btnSubmit" onclick="OrderCustomshiparea.CloseLayer('dAreaLayer');">확인</button> </div> <button type="button" class="btnClose" onclick="javascript:self.close();">닫기</button>
</div>
</body> </html>
주문서작성
주문 > 주문서작성 (/order/orderform.html)
🔴 기존 코드
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes"> <title>주문서 작성</title> <!--@css(/css/module/order/ec_orderform/form_onetouch.css)--> <!-- 사용자 스타일 수정이 필요한 경우, 신규 CSS 파일을 추가하여 #userStyle #mCafe24Order { } 셀렉터로 처리 가능합니다. --> <!--@js(/layout/basic/js/common.js)--> <!--@js(/js/module/order/ec_orderform/orders.js)--> </head>
<body id="userStyle">
<!-- [상단영역] --> <!--@import(/order/ec_orderform/header.html)--> <div id="mCafe24Order" class="typeHeader" module="Order_form" unroll="1"> <!-- 이값은 지우면 안되는 값입니다. ($move_order_after 주문완료페이지 주소 / $move_basket 장바구니페이지 주소) $move_order_after=/order/order_result.html $move_basket=/order/basket.html $paymethod_selector = textButton $email_type=emailcompact $product_weight_display=F -->
<!-- [바로구매 주문상품] --> <!--@import(/order/ec_orderform/product_detail.html)-->
<!-- [주문배송정보] 주문자정보, 배송지정보, 배송정보--> <!--@import(/order/ec_orderform/billingNshipping.html)-->
<!-- [추가정보입력] 추가입력, 기타문의사항--> <!--@import(/order/ec_orderform/additionalInput.html)-->
<!-- [주문상품] --> <!--@import(/order/ec_orderform/orderProduct.html)-->
<!-- [사은품] --> <div id="{$gift_orderform_id}"> <!--@import(/order/ec_orderform/gift.html)--> </div>
<!-- [할인/부가결제] 할인/부가결제, 자동 할인내역 레이어 팝업--> <!--@import(/order/ec_orderform/discount.html)-->
<!-- [결제정보] --> <!--@import(/order/ec_orderform/payment.html)-->
<!-- [결제수단] --> <!--@import(/order/ec_orderform/paymethod.html)-->
<!-- [적립 혜택] --> <!--@import(/order/ec_orderform/benefit.html)-->
<!-- [약관동의] --> <!--@import(/order/ec_orderform/agreement.html)-->
<div class="ec-base-button gFull" id="orderFixItem"> <button type="button" class="btnSubmit" id="{$btn_payment_id}"> {$total_order_price_front_head}<span id="{$total_order_price_front_id}">{$total_order_price_front}</span> {$total_order_price_front_tail} <span class="{$subscription_hide_display|display}">결제하기</span><span class="{$subscription_show_display|display}">정기배송 신청하기</span> </button> </div>
<!-- [주문 정보 확인 레이어팝업] --> <iframe id="{$payment_proc_id}" name="h_payment" width="0" height="0" frameborder="0" src=""></iframe> <label id="labelSPrdName"><input type="hidden" id="sPrdName" name="sPrdName" value="{$sPrdName}"></label> </div> <div id="progressPaybar" style="display:none;"> <div id="progressPaybarBackground" class="layerProgress"></div> <div id="progressPaybarView"> <p class="graph">현재 결제가 진행중입니다.</p> <p class="txt"> 본 결제 창은 결제완료 후 자동으로 닫히며, <br> 결제 진행 중에 본 결제 창을 닫으시면<br> 주문이 되지 않으니 <br> 결제 완료 될 때 까지 닫지 마시기 바랍니다. </p> </div> </div> </body> </html>
🔵 신규 코드
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes"> <title>주문서 작성</title> <!--@css(/css/module/order/ec_orderform/form_onetouch.css)-->
<!--@css(/css/module/order/ec_orderform/form_onetouch_v2.css)-->
<!-- 사용자 스타일 수정이 필요한 경우, 신규 CSS 파일을 추가하여 #userStyle #mCafe24Order { } 셀렉터로 처리 가능합니다. --> <!--@js(/layout/basic/js/common.js)--> <!--@js(/js/module/order/ec_orderform/orders.js)-->
<!--@js(/js/module/order/ec_orderform/orders_v2.js)-->
</head>
<body id="userStyle" class="v2">
<!-- [상단영역] --> <!--@import(/order/ec_orderform/header.html)--> <div id="mCafe24Order" class="typeHeader" module="Order_form" unroll="1"> <!-- 이값은 지우면 안되는 값입니다. ($move_order_after 주문완료페이지 주소 / $move_basket 장바구니페이지 주소) $move_order_after=/order/order_result.html $move_basket=/order/basket.html $paymethod_selector = textButton $email_type=emailcompact $product_weight_display=F -->
<div class="leftGroup"> <!-- [바로구매 주문상품]--> <!--@import(/order/ec_orderform/product_detail.html)-->
<!-- [주문상품] --> <!--@import(/order/ec_orderform/orderProduct_v2.html)-->
<!-- [사은품] --> <div id="{$gift_orderform_id}"> <!--@import(/order/ec_orderform/gift.html)--> </div>
<!-- [주문배송정보] 주문자정보, 배송지정보, 배송정보--> <!--@import(/order/ec_orderform/billingNshipping_v2.html)-->
<!-- [할인/부가결제] 할인/부가결제, 자동 할인내역 레이어 팝업--> <!--@import(/order/ec_orderform/discount.html)-->
<!-- [추가정보입력] 추가입력, 기타문의사항 --> <!--@import(/order/ec_orderform/additionalInput.html)-->
<!-- [결제수단] --> <!--@import(/order/ec_orderform/paymethod_v2.html)-->
</div> <div class="rightGroup"> <div class="stickyTop"> <!-- [결제정보] --> <!--@import(/order/ec_orderform/payment_v2.html)-->
<!-- [적립 혜택] --> <!--@import(/order/ec_orderform/benefit.html)--> </div>
<!-- [약관동의] --> <!--@import(/order/ec_orderform/agreement_v2.html)-->
<div class="agree-msg" id="agreeMsg"><p>주문 내용을 확인하였으며 약관에 동의합니다.</p></div>
<div class="ec-base-button gFull" id="orderFixItem"> <button type="button" class="btnSubmit" id="{$btn_payment_id}"> {$total_order_price_front_head}<span id="{$total_order_price_front_id}">{$total_order_price_front}</span> {$total_order_price_front_tail} <span class="{$subscription_hide_display|display}">결제하기</span><span class="{$subscription_show_display|display}">정기배송 신청하기</span> </button> </div>
</div> <!-- [주문 정보 확인 레이어팝업] --> <iframe id="{$payment_proc_id}" name="h_payment" width="0" height="0" frameborder="0" src=""></iframe> <label id="labelSPrdName"><input type="hidden" id="sPrdName" name="sPrdName" value="{$sPrdName}"></label> </div> <div id="progressPaybar" style="display:none;"> <div id="progressPaybarBackground" class="layerProgress"></div> <div id="progressPaybarView"> <p class="graph">현재 결제가 진행중입니다.</p> <p class="txt"> 본 결제 창은 결제완료 후 자동으로 닫히며, <br> 결제 진행 중에 본 결제 창을 닫으시면<br> 주문이 되지 않으니 <br> 결제 완료 될 때 까지 닫지 마시기 바랍니다. </p> </div> </div> </body> </html>
수령지안내
주문 > 수령지안내(/order/store_pickup_info.html)
🔴 기존 코드
<!--@layout(/layout/basic/popup.html)-->
<div module="Order_StorePickupInfo"class="ec-base-layer">
<!--@css(/css/module/order/storePickupInfo.css)-->
<div class="header">
<h1>수령지 안내</h1>
</div>
<div class="content">
<dl>
<dt><strong>{$sc_name}</strong><br />{$receive_addr}</dt>
<dd>
<div class="ec-base-table">
<table border="1">
<caption>수령지 안내</caption>
<colgroup>
<col style="width:100px;">
<col style="width:auto;">
</colgroup>
<tbody>
<tr>
<th scope="row">전화번호</th>
<td>{$main_phone} <a href="tel:{$main_phone}"class="btnBasic">전화걸기</a></td>
</tr>
<tr>
<th scope="row">영업시간</th>
<td>{$office_hour}</td>
</tr>
<tr>
<th scope="row">수령지안내</th>
<td>{$receive_info}</td>
</tr>
<tr>
<tdcolspan="2">약도</td>
</tr>
<tr>
<td colspan="2"class="map">{$receive_map}</td>
</tr>
</tbody>
</table>
</div>
</dd>
</dl>
<dl>
<dt><strong>{$sc_name}</strong><br />{$receive_addr}</dt>
<dd>
<div class="ec-base-table">
<table border="1">
<caption>수령지 안내</caption>
<colgroup>
<col style="width:100px;">
<col style="width:auto;">
</colgroup>
<tbody>
<tr>
<th scope="row">전화번호</th>
<td>{$main_phone} <a href="tel:{$main_phone}" class="btnBasic">전화걸기</a></td>
</tr>
<tr>
<th scope="row">영업시간</th>
<td>{$office_hour}</td>
</tr>
<tr>
<th scope="row">수령지안내</th>
<td>{$receive_info}</td>
</tr>
<tr>
<th scope="row" colspan="2">약도</th>
</tr>
<tr>
<tdcolspan="2" class="map">{$receive_map}</td>
</tr>
</tbody>
</table>
</div>
</dd>
</dl>
</div>
<div class="ec-base-button">
<a href="#none" onclick="window.close()" class="btnNormalFix sizeS">닫기</a>
</div>
</div>
🔵 신규 코드
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes"> <title>수령지 안내</title> <!--@css(/css/module/order/ec_orderform/form_onetouch_popup.css)--> <!--@js(/js/popup_scroll.js)--> <!--@js(/js/common.js)--> </head> <body id="popup" class="v2"> <div module="Order_StorePickupInfo"class="ec-base-layer"> <div class="header"> <h1>수령지 안내</h1> </div> <div class="wrap"> <dl class="ec-base-card pickupLocation"> <dt class="card-head"><strong class="name"> {$sc_name}</strong><span class="desc">{$receive_addr}</span></dt> <dd class="card-content"> <div class="ec-base-table"> <table> <caption>수령지 안내</caption> <tbody> <tr> <th scope="row">전화번호</th> <td><div class="gridSet gMiddle gap8"> {$main_phone} <a href="tel:{$main_phone}" class="btnBasic">전화걸기</a></div></td> </tr> <tr> <th scope="row">영업시간</th> <td>{$office_hour}</td> </tr> <tr> <th scope="row">수령지안내</th> <td>{$receive_info}</td> </tr> <tr> <th scope="row" class="top">약도</th> <td>{$receive_map}</td> </tr> </tbody> </table> </div> </dd> </dl> <dl class="ec-base-card pickupLocation"> <dt class="card-head"><strong class="name"> {$sc_name}</strong><span class="desc">{$receive_addr}</span></dt> <dd class="card-content"> <div class="ec-base-table"> <table> <caption>수령지 안내</caption> <tbody> <tr> <th scope="row">전화번호</th> <td><div class="gridSet gMiddle gap8"> {$main_phone} <a href="tel:{$main_phone}" class="btnBasic">전화걸기</a></div></td> </tr> <tr> <th scope="row">영업시간</th> <td>{$office_hour}</td> </tr> <tr> <th scope="row">수령지안내</th> <td>{$receive_info}</td> </tr> <tr> <th scope="row" class="top">약도</th> <td>{$receive_map}</td> </tr> </tbody> </table> </div> </dd> </dl> </div> <div class="footer ec-base-button"> <a href="#none" onclick="window.close()" class="btnSubmit">확인</a> </div> <button type="button" class="btnClose" onclick="javascript:self.close();">닫기</button> </div> </body> </html>