카드 입력 키인결제

src/pages/additional-service/key-in-payment/requeset-page.tsx

@@ -258,8 +258,11 @@ export const KeyInPaymentRequestPage = () => {
 
                                 <div className="billing-row">
                                     <div className="billing-label">{t('additionalService.keyIn.cardNumber')} <span>*</span></div>
+                                </div>
+                                <div className="billing-row" style={{ gap: '10px'}}>
                                     <div className="billing-field">
                                         <PatternFormat
+                                            className='card-format-input'
                                             value={cardNo1}
                                             allowEmptyFormatting
                                             valueIsNumericString
@@ -271,6 +274,7 @@ export const KeyInPaymentRequestPage = () => {
                                     </div>
                                     <div className="billing-field">
                                         <PatternFormat
+                                            className='card-format-input'
                                             value={cardNo2}
                                             allowEmptyFormatting
                                             valueIsNumericString
@@ -282,6 +286,7 @@ export const KeyInPaymentRequestPage = () => {
                                     </div>
                                     <div className="billing-field">
                                         <PatternFormat
+                                            className='card-format-input'
                                             value={cardNo3}
                                             allowEmptyFormatting
                                             valueIsNumericString
@@ -293,6 +298,7 @@ export const KeyInPaymentRequestPage = () => {
                                     </div>
                                     <div className="billing-field">
                                         <PatternFormat
+                                            className='card-format-input'
                                             value={cardNo4}
                                             allowEmptyFormatting
                                             valueIsNumericString

src/shared/ui/assets/css/style-fix.css

@@ -12,7 +12,9 @@ main {
 .align-left {
   text-align: left !important;
 }
-
+.align-center{
+  text-align: center !important;
+}
 .transaction-list {
   /* overflow-y: auto; */
 }
@@ -648,3 +650,7 @@ main.pop .apply-row {
 .settings-login-auth .icon-btn.minus {
   flex-shrink: 0;
 }
+
+.card-format-input{
+  text-align: center; letter-spacing: 1px;
+}