From 83e3c00a057bd8a58952b17ccfe8ee7d2a668574 Mon Sep 17 00:00:00 2001 From: whitedot Date: Wed, 9 Sep 2026 03:48:13 +0000 Subject: [PATCH] =?UTF-8?q?refactor:=20=EA=B8=B0=EB=B3=B8=20=EA=B2=B0?= =?UTF-8?q?=EC=A0=9C=EC=88=98=EB=8B=A8=20=EC=95=84=EC=9D=B4=EC=BD=98?= =?UTF-8?q?=EC=9D=84=20=EC=9D=BC=EA=B4=80=EB=90=9C=20SVG=20=EB=9D=BC?= =?UTF-8?q?=EC=9D=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A1=9C=20=EA=B5=90?= =?UTF-8?q?=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 무통장·가상계좌·계좌이체·휴대폰·신용카드 아이콘을 구분하고 기본 및 테마의 PC·모바일 크기와 정렬을 통일한다. 브라우저에서 네 가지 스타일의 아이콘 표시와 결제수단 선택을 확인했다. --- css/default_shop.css | 26 +++++++++++++++++++++----- css/mobile_shop.css | 26 +++++++++++++++++++++----- img/payment-bank.svg | 1 + img/payment-card.svg | 1 + img/payment-phone.svg | 1 + img/payment-transfer.svg | 1 + img/payment-virtual-account.svg | 1 + theme/basic/css/default_shop.css | 26 +++++++++++++++++++++----- theme/basic/css/mobile_shop.css | 26 +++++++++++++++++++++----- 9 files changed, 89 insertions(+), 20 deletions(-) create mode 100644 img/payment-bank.svg create mode 100644 img/payment-card.svg create mode 100644 img/payment-phone.svg create mode 100644 img/payment-transfer.svg create mode 100644 img/payment-virtual-account.svg diff --git a/css/default_shop.css b/css/default_shop.css index da9aff643..26c23da2f 100644 --- a/css/default_shop.css +++ b/css/default_shop.css @@ -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} diff --git a/css/mobile_shop.css b/css/mobile_shop.css index d8aea16c6..7e5b7ab58 100644 --- a/css/mobile_shop.css +++ b/css/mobile_shop.css @@ -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} diff --git a/img/payment-bank.svg b/img/payment-bank.svg new file mode 100644 index 000000000..55509ac3c --- /dev/null +++ b/img/payment-bank.svg @@ -0,0 +1 @@ + diff --git a/img/payment-card.svg b/img/payment-card.svg new file mode 100644 index 000000000..f72af6437 --- /dev/null +++ b/img/payment-card.svg @@ -0,0 +1 @@ + diff --git a/img/payment-phone.svg b/img/payment-phone.svg new file mode 100644 index 000000000..b6600119f --- /dev/null +++ b/img/payment-phone.svg @@ -0,0 +1 @@ + diff --git a/img/payment-transfer.svg b/img/payment-transfer.svg new file mode 100644 index 000000000..d3b7507be --- /dev/null +++ b/img/payment-transfer.svg @@ -0,0 +1 @@ + diff --git a/img/payment-virtual-account.svg b/img/payment-virtual-account.svg new file mode 100644 index 000000000..59b2b5622 --- /dev/null +++ b/img/payment-virtual-account.svg @@ -0,0 +1 @@ + diff --git a/theme/basic/css/default_shop.css b/theme/basic/css/default_shop.css index 524295842..4f9d34e41 100644 --- a/theme/basic/css/default_shop.css +++ b/theme/basic/css/default_shop.css @@ -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} diff --git a/theme/basic/css/mobile_shop.css b/theme/basic/css/mobile_shop.css index 4183cbb25..84a22263f 100644 --- a/theme/basic/css/mobile_shop.css +++ b/theme/basic/css/mobile_shop.css @@ -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}