정산내역 상세

src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx

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

src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx

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

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 {
+.billing-field, .billing-field-left {
-    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 {
     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 { 
+.billing-label {
-    width: 90px; 
+    width: 80px;
-    font-size: var(--fs-16); 
+    font-size: var(--fs-16);
-    font-weight: var(--fw-500); 
+    font-weight: var(--fw-500);
-    color: var(--color-2D3436); 
+    color: var(--color-2D3436);
+}
+
+.billing-label span {
+    color: var(--color-EB5757);
 }
 
 .billing-field {