BondsTable.tsx 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. 'use client';
  2. import DataTable, { DataTableColumn } from '@/components/table/DataTable';
  3. import { BondRow, BOND_MARKET_LABEL } from '@/types/market';
  4. import { formatNumber } from '@/lib/utils/stock';
  5. import { formatDecimal, formatRatePercent } from '@/lib/utils/market';
  6. function buildColumns(): DataTableColumn<BondRow>[] {
  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.name}</span>
  17. <span className='stock-cell__code'>{row.code}</span>
  18. </span>
  19. )
  20. },
  21. {
  22. key: 'market',
  23. header: '시장',
  24. align: 'center',
  25. priority: 'low',
  26. cell: (row) => <span className='market__cls-badge'>{BOND_MARKET_LABEL[row.market] ?? row.market}</span>
  27. },
  28. {
  29. key: 'close',
  30. header: '가격',
  31. align: 'right',
  32. priority: 'high',
  33. cell: (row) => formatDecimal(row.close)
  34. },
  35. {
  36. key: 'ytm',
  37. header: '수익률(YTM)',
  38. align: 'right',
  39. priority: 'high',
  40. cell: (row) => formatRatePercent(row.yieldToMaturity, 3)
  41. },
  42. {
  43. key: 'volume',
  44. header: '거래량',
  45. align: 'right',
  46. priority: 'medium',
  47. cell: (row) => formatNumber(row.volume)
  48. },
  49. {
  50. key: 'maturity',
  51. header: '만기',
  52. align: 'center',
  53. priority: 'low',
  54. cell: (row) => row.maturityYears || '—'
  55. }
  56. ];
  57. }
  58. export default function BondsTable({ rows }: { rows: BondRow[] })
  59. {
  60. return (
  61. <DataTable<BondRow>
  62. caption='채권 목록 — 종목명, 시장, 가격, 수익률, 거래량, 만기'
  63. columns={buildColumns()}
  64. rows={rows}
  65. rowKey={(row) => row.code}
  66. emptyMessage='표시할 채권이 없습니다.'
  67. />
  68. );
  69. }