FuturesTable.tsx 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. 'use client';
  2. import DataTable, { DataTableColumn } from '@/components/table/DataTable';
  3. import { FuturesRow, MARKET_SESSION_LABEL } from '@/types/market';
  4. import { formatNumber } from '@/lib/utils/stock';
  5. import { formatDecimal } from '@/lib/utils/market';
  6. function buildColumns(showSession: boolean): DataTableColumn<FuturesRow>[] {
  7. return [
  8. {
  9. key: 'name',
  10. header: '종목명',
  11. align: 'left',
  12. priority: 'high',
  13. cellClassName: 'data-table__cell--name',
  14. cell: (row) => (
  15. <span className='stock-cell'>
  16. <span className='stock-cell__name'>{row.isuName}</span>
  17. <span className='stock-cell__code'>{row.isuCode}</span>
  18. {showSession && (
  19. <span className='market__cls-badge'>{MARKET_SESSION_LABEL[row.session] ?? row.session}</span>
  20. )}
  21. </span>
  22. )
  23. },
  24. {
  25. key: 'close',
  26. header: '현재가',
  27. align: 'right',
  28. priority: 'high',
  29. cell: (row) => formatDecimal(row.close)
  30. },
  31. {
  32. key: 'changeAmount',
  33. header: '대비',
  34. align: 'right',
  35. priority: 'high',
  36. cell: (row) => formatDecimal(row.changeAmount)
  37. },
  38. {
  39. key: 'settle',
  40. header: '정산가',
  41. align: 'right',
  42. priority: 'low',
  43. cell: (row) => formatDecimal(row.settlePrice)
  44. },
  45. {
  46. key: 'volume',
  47. header: '거래량',
  48. align: 'right',
  49. priority: 'medium',
  50. cell: (row) => formatNumber(row.volume)
  51. },
  52. {
  53. key: 'oi',
  54. header: '미결제약정',
  55. align: 'right',
  56. priority: 'low',
  57. cell: (row) => formatNumber(row.openInterest)
  58. },
  59. {
  60. key: 'product',
  61. header: '상품',
  62. align: 'left',
  63. priority: 'low',
  64. cell: (row) => row.productName || '—'
  65. }
  66. ];
  67. }
  68. // showSession — 야간 세션 조회 시에만 종목명 옆 세션 배지 표시 (정규 기본 화면은 기존과 동일)
  69. export default function FuturesTable({ rows, showSession = false }: { rows: FuturesRow[]; showSession?: boolean })
  70. {
  71. return (
  72. <DataTable<FuturesRow>
  73. caption='선물 목록 — 종목명, 현재가, 대비, 정산가, 거래량, 미결제약정, 상품'
  74. columns={buildColumns(showSession)}
  75. rows={rows}
  76. rowKey={(row) => row.isuCode}
  77. emptyMessage='표시할 선물이 없습니다.'
  78. />
  79. );
  80. }