매매 시그널 디테일 팝업 기능 적용

frontend/src/components/TradeSignalDetailBody.tsx

@@ -16,19 +16,22 @@ interface Props {
   /** compact: 스택 팝업, full: 목록/모달 요약 */
   variant?: 'compact' | 'full';
   showHeadline?: boolean;
+  /** list: 라벨·값 세로 목록, matrix: n×n 정보 카드 그리드 */
+  layout?: 'list' | 'matrix';
 }
 
 export const TradeSignalDetailBody: React.FC<Props> = ({
   item,
   variant = 'compact',
   showHeadline = true,
+  layout = 'list',
 }) => {
   useTradeAlertTimeFormat();
   const isBuy = item.signalType === 'BUY';
   const rows = buildSignalDetailRows(item);
 
   return (
-    <div className={`tsd-body tsd-body--${variant}`}>
+    <div className={`tsd-body tsd-body--${variant}${layout === 'matrix' ? ' tsd-body--matrix' : ''}`}>
       {showHeadline && (
         <div className="tsd-headline">
           <span className={`tsd-direction ${isBuy ? 'tsd-direction--buy' : 'tsd-direction--sell'}`}>
@@ -37,15 +40,35 @@ export const TradeSignalDetailBody: React.FC<Props> = ({
           <span className="tsd-headline-price">{formatSignalPrice(item.price)}</span>
         </div>
       )}
-      <p className="tsd-summary">{getSignalHeadline(item)}</p>
-      <dl className="tsd-detail-grid">
-        {rows.map(row => (
-          <React.Fragment key={row.label}>
-            <dt className="tsd-dt">{row.label}</dt>
-            <dd className={`tsd-dd${row.highlight ? ' tsd-dd--highlight' : ''}`}>{row.value}</dd>
-          </React.Fragment>
-        ))}
-      </dl>
+      {layout !== 'matrix' && (
+        <p className="tsd-summary">{getSignalHeadline(item)}</p>
+      )}
+      {layout === 'matrix' ? (
+        <div className="tsd-detail-matrix" role="list">
+          {rows.map(row => (
+            <div key={row.label} className="tsd-detail-cell" role="listitem">
+              <span className="tsd-detail-cell-label">{row.label}</span>
+              <span
+                className={[
+                  'tsd-detail-cell-value',
+                  row.highlight ? 'tsd-detail-cell-value--highlight' : '',
+                ].filter(Boolean).join(' ')}
+              >
+                {row.value}
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <dl className="tsd-detail-grid">
+          {rows.map(row => (
+            <React.Fragment key={row.label}>
+              <dt className="tsd-dt">{row.label}</dt>
+              <dd className={`tsd-dd${row.highlight ? ' tsd-dd--highlight' : ''}`}>{row.value}</dd>
+            </React.Fragment>
+          ))}
+        </dl>
+      )}
     </div>
   );
 };