From d2b2fe88da6f9a2e74ba23084f4a1382d7eecc4f Mon Sep 17 00:00:00 2001
From: "focp212@naver.com" <focp212@naver.com>
Date: Fri, 12 Sep 2025 18:00:58 +0900
Subject: [PATCH] ..

---
 src/entities/transaction/ui/list-item.tsx | 40 +++++++++++++----------
 src/shared/ui/filter/button-groups.tsx    |  2 ++
 src/shared/ui/filter/select.tsx           |  2 +-
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/entities/transaction/ui/list-item.tsx b/src/entities/transaction/ui/list-item.tsx
index 46169c8..b1ae2cd 100644
--- a/src/entities/transaction/ui/list-item.tsx
+++ b/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>
+          { getDetail() }
         </div>
         <div className="transaction-amount">
           <NumericFormat
diff --git a/src/shared/ui/filter/button-groups.tsx b/src/shared/ui/filter/button-groups.tsx
index a3e75c6..f829ebd 100644
--- a/src/shared/ui/filter/button-groups.tsx
+++ b/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>
diff --git a/src/shared/ui/filter/select.tsx b/src/shared/ui/filter/select.tsx
index d75be3e..39c629b 100644
--- a/src/shared/ui/filter/select.tsx
+++ b/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>
       );