..

src/entities/transaction/ui/list-item.tsx

@@ -112,18 +112,25 @@ export const ListItem = ({
     let rs = [];
     if(transactionCategory === TransactionCategory.AllTransaction){
       rs.push(
-        <>
+        <div className="transaction-details">
           <span>{ getTime() }</span>
           <span className="separator">|</span>
           <span>{ stateName }</span>
           <span className="separator">|</span>
           <span>{ mid }</span>
+          {
+            (!!installmentMonth && parseInt(installmentMonth) > 1) && 
+              <>
+                <span className="separator">|</span>
+                <span>{ installmentMonth }개월 할부</span>
               </>
+          }
+        </div>
       );
     }
     else if(transactionCategory === TransactionCategory.CashReceipt){
       rs.push(
-        <>
+        <div className="transaction-details">
           <span>{ getTime() }</span>
           <span className="separator">|</span>
           <span>{ issueStatus }</span>
@@ -131,12 +138,12 @@ export const ListItem = ({
           <span>{ paymentMethod }</span>
           <span className="separator">|</span>
           <span>{ processResult }</span>
-        </>
+        </div>
       );
     }
     else if(transactionCategory === TransactionCategory.Escrow){
       rs.push(
-        <>
+        <div className="transaction-details">
           <span>{ getTime() }</span>
           <span className="separator">|</span>
           <span>{ deliveryStatus }</span>
@@ -144,18 +151,25 @@ export const ListItem = ({
           <span>{ settlementStatus }</span>
           <span className="separator">|</span>
           <span>{ cancelStatus }</span>
+          {
+            (!!installmentMonth && parseInt(installmentMonth) > 1) && 
+              <>
+                <span className="separator">|</span>
+                <span>{ installmentMonth }개월 할부</span>
               </>
+          }
+        </div>
       );
     }
     else if(transactionCategory === TransactionCategory.Billing){
       rs.push(
-        <>
+        <div className="transaction-details">
           <span>{ getTime() }</span>
           <span className="separator">|</span>
           <span>{ processResult }</span>
           <span className="separator">|</span>
           <span>{ paymentMethod }</span>
-        </>
+        </div>
       );
     }
     return rs;
@@ -172,15 +186,7 @@ export const ListItem = ({
         </div>
         <div className="transaction-content">
           <div className="transaction-title">{ getTitle() }</div>
-          <div className="transaction-details">
           { getDetail() }
-            { (!!installmentMonth && parseInt(installmentMonth) > 1) && 
-              <>
-                <span className="separator">|</span>
-                <span>{ installmentMonth }개월 할부</span>
-              </>
-            }
-          </div>
         </div>
         <div className="transaction-amount">
           <NumericFormat

src/shared/ui/filter/button-groups.tsx

@@ -14,6 +14,7 @@ export const FilterButtonGroups = ({
       for(let i=0;i<btnGroups.length;i++){
         rs.push(
           <span 
+            key={ `key-btngroup-span-${i}` }
             className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
             onClick={ () => setter(btnGroups[i]?.value || '') }
           >{ btnGroups[i]?.name }</span>
@@ -22,6 +23,7 @@ export const FilterButtonGroups = ({
       for(let i=0;i<emptySpanCnt;i++){
         rs.push(
           <span 
+            key={ `key-btngroup-span-nodata-${i}` }
             className="keyword-tag flex-1" 
             style={{ visibility: 'hidden' }}
           ></span>

src/shared/ui/filter/select.tsx

@@ -16,7 +16,7 @@ export const FilterSelect = ({
     for(let i=0;i<selectOptions.length;i++){
       rs.push(
         <option
-          key={ `key-filter-select-input-${i}` }
+          key={ `key-filter-select-${i}` }
           value={ selectOptions[i]?.value }
         >{ selectOptions[i]?.name }</option>
       );