nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

정산내역 상세

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-18 16:27:54 +09:00
parent 4280879fce
commit 630970138d
3 changed files with 180 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
View File

@@ -72,8 +72,94 @@ export const AmountInfoWrap = ({
}
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
<ul className="kv-list">
<li className="kv-row">
<span className="k">거래금액</span>
<span className="v">
<NumericFormat
value={ amountInfo?.transactionAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">결제 수료</span>
<span className="v">
<NumericFormat
value={ amountInfo?.paymentFee }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">에스크로 수수료</span>
<span className="v">
<NumericFormat
value={ amountInfo?.escrowFee }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">인증 수수료</span>
<span className="v">
<NumericFormat
value={ amountInfo?.authFee }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">VAT</span>
<span className="v">
<NumericFormat
value={ amountInfo?.vatFee }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">정산예정금액</span>
<span className="v">
<NumericFormat
value={ amountInfo?.settlementAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">정산전 취소상계</span>
<span className="v">
<NumericFormat
value={ amountInfo?.preSettlementCancelOffset }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</li>
<li className="kv-row bolder">
<span className="k">정산금액</span>
<span className="v">
<NumericFormat
value={ amountInfo?.finalSettlementAmount }
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</li>
</ul>
}
</div>

2
src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx
View File

@@ -65,7 +65,7 @@ export const SettlementInfoWrap = ({
<span className="k">정상입금액</span>
<span className="v">
<NumericFormat
value={ settlementInfo?.settlementDepositAmount }
value={ settlementInfo?.settlementDepositAmount }
thousandSeparator
displayType="text"
></NumericFormat>

122
src/shared/ui/assets/css/style.css
View File

@@ -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 {