PostRow.tsx 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. 'use client';
  2. // D6 §5.1 — 게시글행(PostRow) 열 구성 빌더 + PostDataTable 편의 래퍼.
  3. // 제목(말줄임) + 댓글수 | 작성자 | 작성일 | 조회 | 추천 (도미노 패턴, 우측 정렬 카운트).
  4. // 작성일/조회는 우선순위 낮음 → mobile drop.
  5. import Link from 'next/link';
  6. import DataTable, { DataTableColumn } from '@/components/table/DataTable';
  7. import Post from '@/types/forum/post';
  8. import { formatDate } from '@/lib/utils/client';
  9. import { formatNumber } from '@/lib/utils/stock';
  10. export function buildPostColumns(): DataTableColumn<Post>[] {
  11. return [
  12. {
  13. key: 'subject',
  14. header: '제목',
  15. align: 'left',
  16. priority: 'high',
  17. cellClassName: 'data-table__cell--name',
  18. cell: (row) => (
  19. <Link href={`/post/${row.id}`} className='post-cell'>
  20. {row.boardPrefix && (
  21. <span className='post-cell__prefix'>[{row.boardPrefix.name}]</span>
  22. )}
  23. <span className='post-cell__subject'>{row.subject}</span>
  24. {row.comments > 0 && (
  25. <span className='post-cell__comments'>[{row.comments}]</span>
  26. )}
  27. </Link>
  28. )
  29. },
  30. {
  31. key: 'author',
  32. header: '작성자',
  33. align: 'left',
  34. priority: 'medium',
  35. cell: (row) => row.name || row.sid || '-'
  36. },
  37. {
  38. key: 'createdAt',
  39. header: '작성일',
  40. align: 'right',
  41. priority: 'low',
  42. cell: (row) => formatDate(row.createdAt)
  43. },
  44. {
  45. key: 'views',
  46. header: '조회',
  47. align: 'right',
  48. priority: 'low',
  49. cell: (row) => formatNumber(row.views)
  50. },
  51. {
  52. key: 'likes',
  53. header: '추천',
  54. align: 'right',
  55. priority: 'high',
  56. cell: (row) => formatNumber(row.likes)
  57. }
  58. ];
  59. }
  60. interface PostDataTableProps {
  61. rows: Post[];
  62. caption?: string;
  63. emptyMessage?: string;
  64. }
  65. // 게시글 목록 편의 래퍼 — 기본 열 구성으로 DataTable 렌더
  66. export default function PostDataTable({ rows, caption, emptyMessage }: PostDataTableProps)
  67. {
  68. return (
  69. <DataTable<Post>
  70. caption={caption ?? '게시글 목록 — 제목, 작성자, 작성일, 조회수, 추천수'}
  71. columns={buildPostColumns()}
  72. rows={rows}
  73. rowKey={(row) => row.id}
  74. emptyMessage={emptyMessage ?? '등록된 글이 없습니다.'}
  75. />
  76. );
  77. }