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) &&
-
-
+ -
+ 거래금액
+
+
+
+
+ -
+ 결제 수료
+
+
+
+
+ -
+ 에스크로 수수료
+
+
+
+
+ -
+ 인증 수수료
+
+
+
+
+ -
+ VAT
+
+
+
+
+ -
+ 정산예정금액
+
+
+
+
+ -
+ 정산전 취소상계
+
+
+
+
+ -
+ 정산금액
+
+
+
+
}
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 {