gper/Gnuboard5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 입금과 가상계좌 아이콘 구분 및 토스페이·핀페이 로고 표시

Browse Source 
무통장입금은 지폐와 입금 화살표, 가상계좌는 펼친 통장으로 구분한다. 토스페이와 핀페이 로고 원본 및 출처를 추가하고 기본·테마 PC·모바일에 적용한다. 브라우저에서 표시·정렬과 결제수단 선택을 확인했다.
This commit is contained in:
whitedot
2026-09-09 07:58:16 +00:00
parent 3510a03f57
commit 53b954b47f
9 changed files with 55 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/default_shop.css
+4 -1
View File
@@ -1299,4 +1299,7 @@ html.no-overflowscrolling #sc_coupon_frm, html.no-overflowscrolling #od_coupon_f
/* PG별 간편결제 공통 버튼 */
#sod_frm_paysel .samsungpay_icon{background:url('../img/samsungpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .tosspay_icon,#sod_frm_paysel .pinpay_icon{font-weight:bold}
#sod_frm_paysel .tosspay_icon{background:url('../img/tosspay-logo.svg') no-repeat 50% 50% #fff;background-size:90px auto;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .pinpay_icon{background:url('../img/pinpay-logo.png') no-repeat 50% 50% #fff;background-size:90px 60px;overflow:hidden;text-indent:-999px}
#m_sod_frm_paysel .tosspay_icon{display:inline-block;width:72px;height:24px;vertical-align:middle;background:url('../img/tosspay-logo.svg') no-repeat 50% 50%;background-size:72px auto;overflow:hidden;text-indent:-999px}
#m_sod_frm_paysel .pinpay_icon{display:inline-block;width:68px;height:24px;vertical-align:middle;background:url('../img/pinpay-logo.png') no-repeat 50% 50%;background-size:68px auto;overflow:hidden;text-indent:-999px}
css/mobile_shop.css
+4 -1
View File
@@ -1057,4 +1057,7 @@ box-shadow:0 0 8px rgba(65,98,255,0.8)}
/* PG별 간편결제 공통 버튼 */
#sod_frm_paysel .samsungpay_icon{background:url('../img/samsungpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .tosspay_icon,#sod_frm_paysel .pinpay_icon{font-weight:bold}
#sod_frm_paysel .tosspay_icon{background:url('../img/tosspay-logo.svg') no-repeat 50% 50% #fff;background-size:90px auto;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .pinpay_icon{background:url('../img/pinpay-logo.png') no-repeat 50% 50% #fff;background-size:90px 60px;overflow:hidden;text-indent:-999px}
#m_sod_frm_paysel .tosspay_icon{display:inline-block;width:72px;height:24px;vertical-align:middle;background:url('../img/tosspay-logo.svg') no-repeat 50% 50%;background-size:72px auto;overflow:hidden;text-indent:-999px}
#m_sod_frm_paysel .pinpay_icon{display:inline-block;width:68px;height:24px;vertical-align:middle;background:url('../img/pinpay-logo.png') no-repeat 50% 50%;background-size:68px auto;overflow:hidden;text-indent:-999px}
docs/pg-easypay.md
+7
View File
@@ -41,3 +41,10 @@ node tests/pg_easypay.js
실제 PG 네트워크 요청과 운영 DB 마이그레이션은 이 테스트에서 실행하지 않는다. 배포 검수 시 계약된 MID에서 각 수단의 성공·실패·사용자 취소·재시도, 주문내역·관리자·영수증 표시, 전액 취소·부분 취소를 확인한다. 머니/포인트 및 카드 복합결제는 실제 총액·현금영수증·부분 취소 가능 여부도 확인한다. 커스텀 스킨이 주문서를 자체 구현했다면 공통 버튼 함수와 결제수단 변경 이벤트를 반영해야 한다.
토스 자체창 요청은 [SDK v2 결제창 문서](https://docs.tosspayments.com/sdk/v2/js/payment)의 `method=CARD`, `card.flowMode=DIRECT`, `card.easyPay` 규격을 사용한다. provider 코드는 [토스 ENUM 문서](https://docs.tosspayments.com/codes/enum-codes)를 따른다. 일반 카드로 변경하면 `DEFAULT`로 되돌리고 SDK 요청에서 `easyPay`를 제외한다.
## 결제 로고 출처
- `img/tosspay-logo.svg`: [토스페이 공식 연동 가이드](https://docs-pay.toss.im/)에서 제공하는 로고 ZIP의 `logo-toss-pay-blue.svg` 원본.
- `img/pinpay-logo.png`: [스마트로페이 간편결제 안내](https://pg.smartro.co.kr/service/pg-service/payment/easypayment/)에서 제공하는 핀페이 로고 원본.
로고의 비율과 색상을 유지하고 저장소의 로컬 파일을 사용한다. 무통장입금·가상계좌 등 일반 결제수단 아이콘은 자체 SVG이다.
img/payment-bank.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-5 9 5M4 10h16M5 20h14M7 10v7m5-7v7m5-7v7"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="2.5" width="18" height="10" rx="2"/><circle cx="12" cy="7.5" r="2.3"/><path d="M6.5 7.5h.01m11 0h.01M12 15v6m-3-3 3 3 3-3M4 18v3h3m10 0h3v-3"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 245 B

After

Width:  |  Height:  |  Size: 344 B

img/payment-virtual-account.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M9 8h6M9 12h6M9 16h2"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5.5C9 3.5 5.5 3 2.5 4v15c3-1 6.5-.5 9.5 1.5 3-2 6.5-2.5 9.5-1.5V4c-3-1-6.5-.5-9.5 1.5Zm0 0v15M5.5 8h3M5.5 11h3M15 8h3.5M15 11h3.5M15 14h2"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 267 B

After

Width:  |  Height:  |  Size: 339 B

img/pinpay-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

img/tosspay-logo.svg
+30
View File
@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1038.2 200" enable-background="new 0 0 1038.2 200" xml:space="preserve">
<g>
<path fill="#0064FF" d="M906.8,75.3c-9.5-11-23-17.1-38.1-17.1c-29.6,0-51.9,23.4-51.9,54.5s22.3,54.5,51.9,54.5
c15.6,0,29.8-6.7,39.2-18.3v16.9h15.7V59.7h-16.8L906.8,75.3z M871.3,150.8c-21.2,0-36.7-16-36.7-38.1s15.4-38.1,36.7-38.1
c20.2,0,35.2,14.4,36.6,35v6.2C906.5,136.4,891.5,150.8,871.3,150.8z"/>
<path fill="#0064FF" d="M1019.9,59.3l-34.8,81.5l-33.8-81.5h-18.6l43.1,101.1l-16.6,39.4h17.4l14.3-34.4l47.3-106.1L1019.9,59.3z"
/>
<path fill="#0064FF" d="M754.3,58.2c-15.6,0-29.8,6.7-39.2,18.3V59.9h-15.7v139.9h16.8v-49.7c9.5,11,23,17.1,38.1,17.1
c29.6,0,51.9-23.4,51.9-54.5S783.9,58.2,754.3,58.2L754.3,58.2z M751.7,150.8c-20.2,0-35.2-14.4-36.6-35v-6.2
c1.4-20.6,16.4-35,36.6-35c21.2,0,36.7,16,36.7,38.1S773,150.8,751.7,150.8z"/>
<path fill="#0064FF" d="M264,126.5V82.7h-22.8v-23H264V31.9l27.9-7.5v35.2h34.8v23h-34.8V126c0,11.5,6.2,18.3,16.9,18.3
c6.1,0,10.6-1.2,15.3-4.7l10,20.8c-7.4,5.7-17.1,8.4-27.7,8.4C279.3,168.9,264,153.6,264,126.5L264,126.5z"/>
<path fill="#0064FF" d="M335.5,112.8c0-31.9,24.7-55.7,58-55.7s58,23.9,58,55.7c0,31.9-24.7,55.8-58,55.8S335.5,144.7,335.5,112.8z
M393.5,143.7c17,0,29.8-13.2,29.8-30.8S410.7,82,393.5,82c-17,0-29.8,13.2-29.8,30.8S376.5,143.7,393.5,143.7L393.5,143.7z"/>
<path fill="#0064FF" d="M458.8,140.8l27.7-7.5c1.8,8.6,9.8,13.5,22.7,13.5c10.6,0,18.3-4.8,18.3-11.1c0-4.7-5.4-8-13.7-9.8
l-20.7-4.4c-19.6-4.2-31.7-14.6-31.7-29.6C461.4,71,479.5,57,506,57c23.7,0,41.7,10.8,46.5,28.2l-26.1,7.1
c-1.7-8.3-9.9-13.8-21.3-13.8c-9.6,0-16,4.5-16,10.8c0,4.9,4.4,7.5,11.5,9.1l24.5,5.6c18.5,4.2,29.7,14.5,29.7,29.5
c0,21.9-18.3,35.1-48,35.1C480.8,168.6,462.7,158.1,458.8,140.8L458.8,140.8z"/>
<path fill="#0064FF" d="M561.6,140.8l27.7-7.5c1.8,8.6,9.8,13.5,22.7,13.5c10.6,0,18.3-4.8,18.3-11.1c0-4.7-5.4-8-13.7-9.8
l-20.7-4.4c-19.6-4.2-31.7-14.6-31.7-29.6c0-20.9,18.1-34.9,44.6-34.9c23.7,0,41.7,10.8,46.5,28.2l-26.1,7.1
c-1.7-8.3-9.9-13.8-21.3-13.8c-9.6,0-16,4.5-16,10.8c0,4.9,4.4,7.5,11.5,9.1l24.2,5.5c18.5,4.2,29.7,14.5,29.7,29.5
c0,21.9-18.3,35.1-48,35.1C583.5,168.6,565.4,158.1,561.6,140.8z"/>
<path fill="#0064FF" d="M118.4,45.4l8.9-41.8c0.4-2.1-1.4-4-3.5-3.5c-12.9,2.3-26.3,6.3-39.6,12C24.4,37.4-11.7,87,3.5,122.9
c11.5,26.9,48.6,38.4,91.7,31.7l-8.9,41.8c-0.4,2.1,1.4,4,3.5,3.5c12.9-2.3,26.3-6.3,39.6-12c59.8-25.3,95.9-74.9,80.7-110.9
C198.7,50.2,161.6,38.7,118.4,45.4z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

theme/basic/css/default_shop.css
+4 -1
View File
@@ -1316,4 +1316,7 @@ html.no-overflowscrolling #sc_coupon_frm, html.no-overflowscrolling #od_coupon_f
/* PG별 간편결제 공통 버튼 */
#sod_frm_paysel .samsungpay_icon{background:url('../../../img/samsungpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .tosspay_icon,#sod_frm_paysel .pinpay_icon{font-weight:bold}
#sod_frm_paysel .tosspay_icon{background:url('../../../img/tosspay-logo.svg') no-repeat 50% 50% #fff;background-size:90px auto;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .pinpay_icon{background:url('../../../img/pinpay-logo.png') no-repeat 50% 50% #fff;background-size:90px 60px;overflow:hidden;text-indent:-999px}
#m_sod_frm_paysel .tosspay_icon{display:inline-block;width:72px;height:24px;vertical-align:middle;background:url('../../../img/tosspay-logo.svg') no-repeat 50% 50%;background-size:72px auto;overflow:hidden;text-indent:-999px}
#m_sod_frm_paysel .pinpay_icon{display:inline-block;width:68px;height:24px;vertical-align:middle;background:url('../../../img/pinpay-logo.png') no-repeat 50% 50%;background-size:68px auto;overflow:hidden;text-indent:-999px}
theme/basic/css/mobile_shop.css
+4 -1
View File
@@ -1056,4 +1056,7 @@ box-shadow:0 0 8px rgba(65,98,255,0.8)}
/* PG별 간편결제 공통 버튼 */
#sod_frm_paysel .samsungpay_icon{background:url('../../../img/samsungpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .tosspay_icon,#sod_frm_paysel .pinpay_icon{font-weight:bold}
#sod_frm_paysel .tosspay_icon{background:url('../../../img/tosspay-logo.svg') no-repeat 50% 50% #fff;background-size:90px auto;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .pinpay_icon{background:url('../../../img/pinpay-logo.png') no-repeat 50% 50% #fff;background-size:90px 60px;overflow:hidden;text-indent:-999px}
#m_sod_frm_paysel .tosspay_icon{display:inline-block;width:72px;height:24px;vertical-align:middle;background:url('../../../img/tosspay-logo.svg') no-repeat 50% 50%;background-size:72px auto;overflow:hidden;text-indent:-999px}
#m_sod_frm_paysel .pinpay_icon{display:inline-block;width:68px;height:24px;vertical-align:middle;background:url('../../../img/pinpay-logo.png') no-repeat 50% 50%;background-size:68px auto;overflow:hidden;text-indent:-999px}