diff --git a/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx b/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx index 699ec43..5080db3 100644 --- a/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx +++ b/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx @@ -72,8 +72,94 @@ export const AmountInfoWrap = ({ } { (periodType === SettlementPeriodType.TRANSACTION_DATE) && } diff --git a/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx b/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx index 1039f63..08f00c9 100644 --- a/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx +++ b/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx @@ -65,7 +65,7 @@ export const SettlementInfoWrap = ({ 정상입금액 diff --git a/src/shared/ui/assets/css/style.css b/src/shared/ui/assets/css/style.css index 548d564..ddf5d90 100644 --- a/src/shared/ui/assets/css/style.css +++ b/src/shared/ui/assets/css/style.css @@ -116,6 +116,7 @@ body {} .mt-20 {margin-top: 20px !important;} .mt-16 {margin-top: 16px !important;} .mt-10 {margin-top: 10px !important;} +.mb-10 {margin-bottom: 10px !important;} .mb-16 {margin-bottom: 16px !important;} .mb-20 {margin-bottom: 20px !important;} .mb-30 {margin-bottom: 30px !important;} @@ -2107,6 +2108,14 @@ input[type="radio"] { padding: 16px 0 12px 0; } +.line-one .transaction-item { + padding: 14px 0 !important; +} + +.line-one .date-header { + margin-bottom: 2px; +} + .transaction-item { display: flex; align-items: flex-start; @@ -2141,6 +2150,10 @@ input[type="radio"] { min-width: 0; } +.line-one .transaction-content .transaction-title { + margin-bottom: 0; +} + .transaction-content .transaction-title { font-size: var(--fs-16); font-weight: var(--fw-400); @@ -2686,12 +2699,16 @@ div .credit-period { padding: 0; } +.kv-list.pb-ht .kv-row { + padding-bottom: 15px !important; +} + .kv-row{ display: flex; white-space: nowrap; justify-content: space-between; align-items: start; - gap: 10px; + gap: 0; padding: 0 0 19px; flex-wrap: wrap; } @@ -2701,12 +2718,21 @@ div .credit-period { } .gap-50 .kv-row { - gap: 50px; + gap: 40px; } .kv-row .k{ + width: 100%; + max-width: 38%; + display: inline-block; font-size: var(--fs-17); - color: var(--color-666666) + color: var(--color-666666); + white-space: normal; + word-break: break-all; +} + +.kv-row .k.wid-100 { + max-width: 100%; } .kv-row.bolder .k{ @@ -2718,13 +2744,15 @@ div .credit-period { } .kv-row .v{ + max-width: 60%; + width: 100%; font-size: var(--fs-17); white-space: normal; word-break: break-all; color: var(--color-2D3436); font-weight: var(--fw-500); text-align: right; - max-width: 60%; + padding-left: 10px; } .amount-expand { @@ -3376,6 +3404,10 @@ div .credit-period { gap: 30px; } +.billing-form.no-padding { + padding-bottom: 0; +} + .billing-form.gap-16 { gap: 16px; } @@ -3384,28 +3416,15 @@ div .credit-period { gap: 16px !important; } +.gap-26 { + gap: 26px !important; +} + .gap-30 { gap: 30px !important; } -.billing-row { - display: flex; - align-items: center; - gap: 10px; -} - -.billing-label { - width: 90px; - font-size: var(--fs-16); - font-weight: var(--fw-500); - color: var(--color-2D3436); -} - -.billing-label span { - color: var(--color-EB5757); -} - -.billing-field { +.billing-field, .billing-field-left { position: relative; flex: 1; } @@ -3417,10 +3436,25 @@ div .credit-period { font-size: var(--fs-15); text-align: right; } -.billing-field .date input, .billing-field select { + +.billing-field .date input, +.billing-field select { padding-right: 35px; } +.billing-field-left input, +.billing-field-left select { + width: 100%; + height: 40px; + font-size: var(--fs-15); + text-align: left; +} + +.billing-field-left .date input, +.billing-field-left select { + padding-right: inherit; +} + .billing-inline { display: grid; grid-template-columns: 1fr 40px; @@ -3709,7 +3743,7 @@ span.scheduled { } .ing-title { - font-size: var(--fs-17); + font-size: var(--fs-18); font-weight: var(--fw-700); margin-top: 16px; } @@ -3802,21 +3836,30 @@ ul.txn-amount-detail li { white-space: nowrap; justify-content: space-between; align-items: start; - gap: 20px; + gap: 0; padding: 3px 0; flex-wrap: wrap; } +ul.txn-amount-detail li span { + display: inline-block; + word-break: break-all; + white-space: normal; +} + ul.txn-amount-detail li span:first-child { color: var(--color-777777); font-size: var(--fs-15); font-weight: var(--fw-400); + width: 35%; } ul.txn-amount-detail li span:last-child { color: var(--color-666666); font-size: var(--fs-16); font-weight: var(--fw-400); + width: 60%; + text-align: right; } /* 결제 정보 > 서비스 이용, 수수료 및 정산주기 (ing-list 하위) */ @@ -4959,6 +5002,19 @@ ul.txn-amount-detail li span:last-child { gap: 10px; } +.gap-20 { + gap: 20px; +} + +.item30 { + flex-wrap: wrap; +} + +.item30 > span { + flex: 1 0 calc(33.333% - 16px); + margin-bottom: 6px; +} + /* 102 링크결제_발송내역_미리보기 */ .preview-body { width: 338px; @@ -5127,15 +5183,19 @@ ul.txn-amount-detail li span:last-child { .billing-row { display: flex; align-items: center; - gap: 10px; + gap: 30px; justify-content: space-between; } -.billing-label { - width: 90px; - font-size: var(--fs-16); - font-weight: var(--fw-500); - color: var(--color-2D3436); +.billing-label { + width: 80px; + font-size: var(--fs-16); + font-weight: var(--fw-500); + color: var(--color-2D3436); +} + +.billing-label span { + color: var(--color-EB5757); } .billing-field {