목록 로딩 로직 개선

frontend/src/components/tradeNotification/TradeNotificationListRow.tsx

@@ -66,6 +66,8 @@ interface Props {
   /** 상세분석 레포트 버튼 클릭 */
   onReport?: () => void;
   reportLoading?: boolean;
+  /** 가상 스크롤 목록에서는 div + role=listitem */
+  itemTag?: 'li' | 'div';
 }
 
 const MAX_INDICATOR_CARDS = 8;
@@ -85,6 +87,7 @@ const TradeNotificationListRow: React.FC<Props> = ({
   onTrade,
   onReport,
   reportLoading = false,
+  itemTag = 'li',
 }) => {
   useTradeAlertTimeFormat();
   const isBuy = item.signalType === 'BUY';
@@ -106,7 +109,8 @@ const TradeNotificationListRow: React.FC<Props> = ({
     || strategy?.name
     || strategyRow?.value
     || '실시간 전략';
-  const rowRef = useRef<HTMLLIElement>(null);
+  const rowRef = useRef<HTMLLIElement | HTMLDivElement>(null);
+  const RowTag = itemTag;
   const [inView, setInView] = useState(false);
   /** 펼쳐보기 중인 차트: 'candle' | 지표 id | null */
   const [expandedChartKey, setExpandedChartKey] = useState<string | null>(null);
@@ -348,34 +352,32 @@ const TradeNotificationListRow: React.FC<Props> = ({
     </article>
   );
 
+  const rowClassName = [
+    'tnl-row',
+    isListLayout ? 'tnl-row--gallery' : 'tnl-row--grid',
+    !item.isRead ? 'tnl-row--unread' : '',
+    isSelected ? 'tnl-row--selected' : '',
+    receiving ? 'tnl-row--receiving' : '',
+  ].filter(Boolean).join(' ');
+
   if (!isListLayout) {
     return (
-      <li
-        ref={rowRef}
-        className={[
-          'tnl-row',
-          'tnl-row--grid',
-          !item.isRead ? 'tnl-row--unread' : '',
-          isSelected ? 'tnl-row--selected' : '',
-          receiving ? 'tnl-row--receiving' : '',
-        ].filter(Boolean).join(' ')}
+      <RowTag
+        ref={rowRef as React.Ref<HTMLLIElement & HTMLDivElement>}
+        role={itemTag === 'div' ? 'listitem' : undefined}
+        className={rowClassName}
         onClick={handleRowClick}
       >
         {summaryCard}
-      </li>
+      </RowTag>
     );
   }
 
   return (
-    <li
-      ref={rowRef}
-      className={[
-        'tnl-row',
-        'tnl-row--gallery',
-        !item.isRead ? 'tnl-row--unread' : '',
-        isSelected ? 'tnl-row--selected' : '',
-        receiving ? 'tnl-row--receiving' : '',
-      ].filter(Boolean).join(' ')}
+    <RowTag
+      ref={rowRef as React.Ref<HTMLLIElement & HTMLDivElement>}
+      role={itemTag === 'div' ? 'listitem' : undefined}
+      className={rowClassName}
       onClick={handleRowClick}
     >
       <div
@@ -455,7 +457,7 @@ const TradeNotificationListRow: React.FC<Props> = ({
           </>
         )}
       </div>
-    </li>
+    </RowTag>
   );
 };