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

refactor: 기본 결제수단 아이콘을 일관된 SVG 라인 스타일로 교체

Browse Source 
무통장·가상계좌·계좌이체·휴대폰·신용카드 아이콘을 구분하고 기본 및 테마의 PC·모바일 크기와 정렬을 통일한다. 브라우저에서 네 가지 스타일의 아이콘 표시와 결제수단 선택을 확인했다.
This commit is contained in:
whitedot
2026-09-09 07:58:16 +00:00
parent 2adaa0a658
commit 83e3c00a05
9 changed files with 89 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/default_shop.css
+21 -5
View File
@@ -816,11 +816,27 @@ box-shadow: 1px 2px 2px #eee;}
#sod_frm_paysel .samsungpay_icon{background:url('../img/samsungpay.png') no-repeat 50% 50% #fff;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .ssgpay_icon{background:url('../img/ssgpay_icon.png') no-repeat 50% 50% #fff;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .skpay_icon{background:url('../img/skpay11_icon.png') no-repeat 50% 50% #fff; background-size: 70px;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .bank_icon{background:url('../img/pay_icon1.png') no-repeat 15px 50% #fff}
#sod_frm_paysel .vbank_icon{background:url('../img/pay_icon2.png') no-repeat 15px 50% #fff;padding-top:13px}
#sod_frm_paysel .iche_icon{background:url('../img/pay_icon2.png') no-repeat 15px 50% #fff;padding-top:13px}
#sod_frm_paysel .hp_icon{background:url('../img/pay_icon3.png') no-repeat 24px 50% #fff}
#sod_frm_paysel .card_icon{background:url('../img/pay_icon4.png') no-repeat 17px 50% #fff}
/* 기본 결제수단: 같은 굵기의 SVG 라인 아이콘 */
#sod_frm_paysel .bank_icon{background-image:url('../img/payment-bank.svg')}
#sod_frm_paysel .vbank_icon{background-image:url('../img/payment-virtual-account.svg')}
#sod_frm_paysel .iche_icon{background-image:url('../img/payment-transfer.svg')}
#sod_frm_paysel .hp_icon{background-image:url('../img/payment-phone.svg')}
#sod_frm_paysel .card_icon{background-image:url('../img/payment-card.svg')}
#sod_frm_paysel .bank_icon,
#sod_frm_paysel .vbank_icon,
#sod_frm_paysel .iche_icon,
#sod_frm_paysel .hp_icon,
#sod_frm_paysel .card_icon{background-repeat:no-repeat;background-position:18px 50%;background-size:28px 28px;padding:0 12px 0 58px;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:18px}
#m_sod_frm_paysel .bank_icon{background-image:url('../img/payment-bank.svg')}
#m_sod_frm_paysel .vbank_icon{background-image:url('../img/payment-virtual-account.svg')}
#m_sod_frm_paysel .iche_icon{background-image:url('../img/payment-transfer.svg')}
#m_sod_frm_paysel .hp_icon{background-image:url('../img/payment-phone.svg')}
#m_sod_frm_paysel .card_icon{background-image:url('../img/payment-card.svg')}
#m_sod_frm_paysel .bank_icon,
#m_sod_frm_paysel .vbank_icon,
#m_sod_frm_paysel .iche_icon,
#m_sod_frm_paysel .hp_icon,
#m_sod_frm_paysel .card_icon{display:inline-block;min-height:24px;padding-left:30px;line-height:24px;vertical-align:middle;background-repeat:no-repeat;background-position:0 50%;background-size:24px 24px}
#forderform .sod_right #sod_bsk_tot {border:1px solid #e3e5e8}
#forderform .od_pay_buttons_el{margin-top:20px;border:1px solid #e3e5e8;background:#fff;padding:10px}
#forderform .od_pay_buttons_el h3{font-size:1.167em;margin:0px 0 5px}
css/mobile_shop.css
+21 -5
View File
@@ -919,11 +919,27 @@ box-shadow:0 0 8px rgba(65,98,255,0.8)}
#sod_frm_paysel .samsungpay_icon{background:url('../img/samsungpay.png') no-repeat 50% 50% #fff;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .ssgpay_icon{background:url('../img/ssgpay_icon.png') no-repeat 50% 50% #fff;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .skpay_icon{background:url('../img/skpay11_icon.png') no-repeat 50% 50% #fff; background-size: 70px;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .bank_icon{background:url('../img/pay_icon1.png') no-repeat 15px 50% #fff}
#sod_frm_paysel .vbank_icon{background:url('../img/pay_icon2.png') no-repeat 15px 50% #fff;padding-top:13px}
#sod_frm_paysel .iche_icon{background:url('../img/pay_icon2.png') no-repeat 15px 50% #fff;padding-top:13px}
#sod_frm_paysel .hp_icon{background:url('../img/pay_icon3.png') no-repeat 24px 50% #fff}
#sod_frm_paysel .card_icon{background:url('../img/pay_icon4.png') no-repeat 17px 50% #fff}
/* 기본 결제수단: 같은 굵기의 SVG 라인 아이콘 */
#sod_frm_paysel .bank_icon{background-image:url('../img/payment-bank.svg')}
#sod_frm_paysel .vbank_icon{background-image:url('../img/payment-virtual-account.svg')}
#sod_frm_paysel .iche_icon{background-image:url('../img/payment-transfer.svg')}
#sod_frm_paysel .hp_icon{background-image:url('../img/payment-phone.svg')}
#sod_frm_paysel .card_icon{background-image:url('../img/payment-card.svg')}
#sod_frm_paysel .bank_icon,
#sod_frm_paysel .vbank_icon,
#sod_frm_paysel .iche_icon,
#sod_frm_paysel .hp_icon,
#sod_frm_paysel .card_icon{background-repeat:no-repeat;background-position:18px 50%;background-size:28px 28px;padding:0 12px 0 58px;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:18px}
#m_sod_frm_paysel .bank_icon{background-image:url('../img/payment-bank.svg')}
#m_sod_frm_paysel .vbank_icon{background-image:url('../img/payment-virtual-account.svg')}
#m_sod_frm_paysel .iche_icon{background-image:url('../img/payment-transfer.svg')}
#m_sod_frm_paysel .hp_icon{background-image:url('../img/payment-phone.svg')}
#m_sod_frm_paysel .card_icon{background-image:url('../img/payment-card.svg')}
#m_sod_frm_paysel .bank_icon,
#m_sod_frm_paysel .vbank_icon,
#m_sod_frm_paysel .iche_icon,
#m_sod_frm_paysel .hp_icon,
#m_sod_frm_paysel .card_icon{display:inline-block;min-height:24px;padding-left:30px;line-height:24px;vertical-align:middle;background-repeat:no-repeat;background-position:0 50%;background-size:24px 24px}
#forderform .sod_right #sod_bsk_tot {border:1px solid #e3e5e8}
#forderform .od_pay_buttons_el{margin-top:20px;border:1px solid #e3e5e8;background:#fff;padding:10px}
#forderform .od_pay_buttons_el h3{font-size:1.167em;margin:0px 0 5px}
img/payment-bank.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 245 B

img/payment-card.svg
+1
View File
@@ -0,0 +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="2.5" y="5" width="19" height="14" rx="3"/><path d="M3 10h18M6.5 15h4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 266 B

img/payment-phone.svg
+1
View File
@@ -0,0 +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="6" y="2.5" width="12" height="19" rx="3"/><path d="M10 6h4M11 18h2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 264 B

img/payment-transfer.svg
+1
View File
@@ -0,0 +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="M4 8h15m-4-4 4 4-4 4M20 16H5m4-4-4 4 4 4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 238 B

img/payment-virtual-account.svg
+1
View File
@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 267 B

theme/basic/css/default_shop.css
+21 -5
View File
@@ -806,11 +806,27 @@ box-shadow: 1px 2px 2px #eee;}
#sod_frm_paysel .samsungpay_icon{background:url('../../../img/samsungpay.png') no-repeat 50% 50% #fff;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .ssgpay_icon{background:url('../../../img/ssgpay_icon.png') no-repeat 50% 50% #fff;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .skpay_icon{background:url('../../../img/skpay11_icon.png') no-repeat 50% 50% #fff; background-size: 70px;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .bank_icon{background:url('../../../img/pay_icon1.png') no-repeat 15px 50% #fff}
#sod_frm_paysel .vbank_icon{background:url('../../../img/pay_icon2.png') no-repeat 15px 50% #fff}
#sod_frm_paysel .iche_icon{background:url('../../../img/pay_icon2.png') no-repeat 15px 50% #fff}
#sod_frm_paysel .hp_icon{background:url('../../../img/pay_icon3.png') no-repeat 24px 50% #fff}
#sod_frm_paysel .card_icon{background:url('../../../img/pay_icon4.png') no-repeat 17px 50% #fff}
/* 기본 결제수단: 같은 굵기의 SVG 라인 아이콘 */
#sod_frm_paysel .bank_icon{background-image:url('../../../img/payment-bank.svg')}
#sod_frm_paysel .vbank_icon{background-image:url('../../../img/payment-virtual-account.svg')}
#sod_frm_paysel .iche_icon{background-image:url('../../../img/payment-transfer.svg')}
#sod_frm_paysel .hp_icon{background-image:url('../../../img/payment-phone.svg')}
#sod_frm_paysel .card_icon{background-image:url('../../../img/payment-card.svg')}
#sod_frm_paysel .bank_icon,
#sod_frm_paysel .vbank_icon,
#sod_frm_paysel .iche_icon,
#sod_frm_paysel .hp_icon,
#sod_frm_paysel .card_icon{background-repeat:no-repeat;background-position:18px 50%;background-size:28px 28px;padding:0 12px 0 58px;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:18px}
#m_sod_frm_paysel .bank_icon{background-image:url('../../../img/payment-bank.svg')}
#m_sod_frm_paysel .vbank_icon{background-image:url('../../../img/payment-virtual-account.svg')}
#m_sod_frm_paysel .iche_icon{background-image:url('../../../img/payment-transfer.svg')}
#m_sod_frm_paysel .hp_icon{background-image:url('../../../img/payment-phone.svg')}
#m_sod_frm_paysel .card_icon{background-image:url('../../../img/payment-card.svg')}
#m_sod_frm_paysel .bank_icon,
#m_sod_frm_paysel .vbank_icon,
#m_sod_frm_paysel .iche_icon,
#m_sod_frm_paysel .hp_icon,
#m_sod_frm_paysel .card_icon{display:inline-block;min-height:24px;padding-left:30px;line-height:24px;vertical-align:middle;background-repeat:no-repeat;background-position:0 50%;background-size:24px 24px}
#forderform .sod_right #sod_bsk_tot {border:1px solid #e3e5e8}
#forderform .od_pay_buttons_el{margin-top:20px;border:1px solid #e3e5e8;background:#fff;padding:10px}
#forderform .od_pay_buttons_el h3{font-size:1.167em;margin:0px 0 5px}
theme/basic/css/mobile_shop.css
+21 -5
View File
@@ -918,11 +918,27 @@ box-shadow:0 0 8px rgba(65,98,255,0.8)}
#sod_frm_paysel .samsungpay_icon{background:url('../../../img/samsungpay.png') no-repeat 50% 50% #fff;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .ssgpay_icon{background:url('../../../img/ssgpay_icon.png') no-repeat 50% 50% #fff;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .skpay_icon{background:url('../../../img/skpay11_icon.png') no-repeat 50% 50% #fff; background-size: 70px;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .bank_icon{background:url('../../../img/pay_icon1.png') no-repeat 15px 50% #fff}
#sod_frm_paysel .vbank_icon{background:url('../../../img/pay_icon2.png') no-repeat 15px 50% #fff}
#sod_frm_paysel .iche_icon{background:url('../../../img/pay_icon2.png') no-repeat 15px 50% #fff}
#sod_frm_paysel .hp_icon{background:url('../../../img/pay_icon3.png') no-repeat 24px 50% #fff}
#sod_frm_paysel .card_icon{background:url('../../../img/pay_icon4.png') no-repeat 17px 50% #fff}
/* 기본 결제수단: 같은 굵기의 SVG 라인 아이콘 */
#sod_frm_paysel .bank_icon{background-image:url('../../../img/payment-bank.svg')}
#sod_frm_paysel .vbank_icon{background-image:url('../../../img/payment-virtual-account.svg')}
#sod_frm_paysel .iche_icon{background-image:url('../../../img/payment-transfer.svg')}
#sod_frm_paysel .hp_icon{background-image:url('../../../img/payment-phone.svg')}
#sod_frm_paysel .card_icon{background-image:url('../../../img/payment-card.svg')}
#sod_frm_paysel .bank_icon,
#sod_frm_paysel .vbank_icon,
#sod_frm_paysel .iche_icon,
#sod_frm_paysel .hp_icon,
#sod_frm_paysel .card_icon{background-repeat:no-repeat;background-position:18px 50%;background-size:28px 28px;padding:0 12px 0 58px;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:18px}
#m_sod_frm_paysel .bank_icon{background-image:url('../../../img/payment-bank.svg')}
#m_sod_frm_paysel .vbank_icon{background-image:url('../../../img/payment-virtual-account.svg')}
#m_sod_frm_paysel .iche_icon{background-image:url('../../../img/payment-transfer.svg')}
#m_sod_frm_paysel .hp_icon{background-image:url('../../../img/payment-phone.svg')}
#m_sod_frm_paysel .card_icon{background-image:url('../../../img/payment-card.svg')}
#m_sod_frm_paysel .bank_icon,
#m_sod_frm_paysel .vbank_icon,
#m_sod_frm_paysel .iche_icon,
#m_sod_frm_paysel .hp_icon,
#m_sod_frm_paysel .card_icon{display:inline-block;min-height:24px;padding-left:30px;line-height:24px;vertical-align:middle;background-repeat:no-repeat;background-position:0 50%;background-size:24px 24px}
#forderform .sod_right #sod_bsk_tot {border:1px solid #e3e5e8}
#forderform .od_pay_buttons_el{margin-top:20px;border:1px solid #e3e5e8;background:#fff;padding:10px}
#forderform .od_pay_buttons_el h3{font-size:1.167em;margin:0px 0 5px}