feat: 사이트 관리 페이지 작업 및 Table 컴포넌트 수정

packages/common/components/src/ui/index.ts

@@ -15,4 +15,5 @@ export * from "./popover";
 export * from "./radio-group";
 export * from "./slider";
 export * from "./switch";
+export * from "./table";
 export * from "./tabs";

packages/common/components/src/ui/table/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import "./table.css";
 
 import {
@@ -6,14 +5,45 @@ import {
   getCoreRowModel,
   useReactTable,
   type ColumnDef,
+  type RowData,
+  type Table,
 } from "@tanstack/react-table";
 
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    align: "left" | "center" | "right";
+  }
+}
+
+function TableHead<T>({ table }: { table: Table<T> }) {
+  return (
+    <thead>
+      {table.getHeaderGroups().map((headerGroup) => (
+        <tr key={headerGroup.id}>
+          {headerGroup.headers.map((header) => (
+            <th key={header.id} className="sticky top-0">
+              {header.isPlaceholder
+                ? null
+                : flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+            </th>
+          ))}
+        </tr>
+      ))}
+    </thead>
+  );
+}
+
 interface TableProps<T> {
   data: T[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   columns: ColumnDef<T, any>[];
 }
 
-function Table<T>({ data, columns }: TableProps<T>) {
+function BasicTable<T>({ data, columns }: TableProps<T>) {
   const table = useReactTable({
     data,
     columns,
@@ -21,36 +51,23 @@ function Table<T>({ data, columns }: TableProps<T>) {
   });
 
   return (
-    <div className="p-2">
-      <table>
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <th key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows.map((row) => (
-            <tr key={row.id}>
-              {row.getVisibleCells().map((cell) => (
-                <td key={cell.id}>
+    <table className="w-full">
+      <TableHead table={table} />
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <tr key={row.id}>
+            {row.getVisibleCells().map((cell) => {
+              const { meta } = cell.column.columnDef;
+              return (
+                <td key={cell.id} align="center" {...meta}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-        {/* <tfoot>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+      {/* <tfoot>
           {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
               {footerGroup.headers.map((header) => (
@@ -66,9 +83,8 @@ function Table<T>({ data, columns }: TableProps<T>) {
             </tr>
           ))}
         </tfoot> */}
-      </table>
-    </div>
+    </table>
   );
 }
 
-export { Table };
+export { BasicTable };