[Dony] headless Table 구현

src/components/common/Table/BasicTable.tsx

@@ -0,0 +1,53 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { offscreen } from '@styles/commonStyles';
+
+export type BasicTableProps = {
+  caption: string;
+  columnsWidth?: string[];
+  children: (ReactElement | ReactElement[])[];
+};
+
+const BasicTable = ({
+  caption,
+  columnsWidth,
+  children,
+  ...restProps
+}: BasicTableProps) => (
+  <table {...restProps}>
+    <caption css={offscreen}>{caption}</caption>
+    {columnsWidth && (
+      <colgroup>
+        {columnsWidth.map((width, index) => (
+          // 유동적으로 변하지 않는 리스트
+          // eslint-disable-next-line react/no-array-index-key
+          <col key={index} width={width} />
+        ))}
+      </colgroup>
+    )}
+    <tbody>{children}</tbody>
+  </table>
+);
+
+type RowProps = {
+  children: ReactElement | ReactElement[];
+};
+
+const Row = ({ children, ...restProps }: RowProps) => (
+  <tr {...restProps}>{children}</tr>
+);
+
+type CellProps = {
+  colSpan?: number;
+  rowSpan?: number;
+  children: ReactNode;
+};
+
+const Cell = ({ children, ...restProps }: CellProps) => (
+  <td {...restProps}>{children}</td>
+);
+
+BasicTable.Row = Row;
+BasicTable.Cell = Cell;
+
+export default BasicTable;

src/components/common/Table/Cell/index.tsx

@@ -0,0 +1,106 @@
+import { ReactNode, Dispatch, SetStateAction } from 'react';
+
+import Button from '@components/common/Button';
+
+const DIRECTION = {
+  ASCENDING: 'ascending',
+  DESCENDING: 'descending',
+};
+
+export type SortState = {
+  name: string;
+  direction: typeof DIRECTION[keyof typeof DIRECTION];
+  sortIndices: number[];
+} | null;
+
+export type SortConfig = {
+  sortValues?: { [key in string]: (string | number)[] };
+  sortState: SortState;
+  setSortState: Dispatch<SetStateAction<SortState>>;
+};
+
+type CellProps = {
+  colSpan?: number;
+  rowSpan?: number;
+  name?: string;
+  sortConfig?: SortConfig;
+  children: ReactNode;
+};
+
+interface HeadCellProps extends CellProps {
+  scope?: 'col' | 'row';
+  sortConfig: SortConfig;
+}
+
+const HeadCell = ({
+  name = '',
+  scope,
+  sortConfig,
+  children,
+  ...restProps
+}: HeadCellProps) => {
+  const { sortValues = {}, sortState, setSortState } = sortConfig;
+  const direction =
+    sortState &&
+    sortState.name === name &&
+    sortState.direction === DIRECTION.DESCENDING
+      ? DIRECTION.ASCENDING
+      : DIRECTION.DESCENDING;
+
+  const getSortIndices = () => {
+    const sortValuesByName = sortValues[name].map((value, index) => ({
+      value,
+      index,
+    }));
+    sortValuesByName.sort((a, b) => {
+      if (a.value > b.value) return direction === DIRECTION.ASCENDING ? 1 : -1;
+      if (a.value < b.value) return direction === DIRECTION.ASCENDING ? -1 : 1;
+      return 0;
+    });
+
+    return sortValuesByName.map(({ index }) => index);
+  };
+
+  const updateSortState = () => {
+    if (!sortValues[name])
+      throw new Error('Please set sortValues[name] in Table props.');
+
+    const newSortState = {
+      name,
+      direction,
+      sortIndices: getSortIndices(),
+    };
+    setSortState(newSortState);
+  };
+
+  return (
+    <th
+      scope={scope}
+      data-sort={sortState?.name === name ? sortState?.direction : undefined}
+      {...restProps}
+    >
+      {name ? (
+        <Button type="button" onClick={updateSortState}>
+          {children}
+        </Button>
+      ) : (
+        children
+      )}
+    </th>
+  );
+};
+
+const BodyCell = ({ children, ...restProps }: CellProps) => (
+  <td {...restProps}>{children}</td>
+);
+
+const Cell = ({ name, sortConfig, children, ...restProps }: CellProps) =>
+  sortConfig ? (
+    <HeadCell sortConfig={sortConfig} name={name} {...restProps}>
+      {children}
+    </HeadCell>
+  ) : (
+    <BodyCell {...restProps}>{children}</BodyCell>
+  );
+
+export default Cell;

src/components/common/Table/ColumnTable.tsx

@@ -0,0 +1,68 @@
+import React, { cloneElement, ReactElement, useState } from 'react';
+
+import Cell, { SortState, SortConfig } from '@components/common/Table/Cell';
+import { offscreen } from '@styles/commonStyles';
+
+export type ColumnTableProps = {
+  caption: string;
+  columnsWidth?: string[];
+  sortValues?: { [key in string]: (string | number)[] };
+  children: (ReactElement | ReactElement[])[];
+};
+
+const ColumnTable = ({
+  caption,
+  columnsWidth,
+  sortValues,
+  children,
+  ...restProps
+}: ColumnTableProps) => {
+  const Children = React.Children.toArray(children);
+  const [headRow, bodyRows] = [Children[0], Children.splice(1)];
+  const [sortState, setSortState] = useState<SortState>(null);
+  const sortConfig = { sortValues, sortState, setSortState };
+
+  return (
+    <table {...restProps}>
+      <caption css={offscreen}>{caption}</caption>
+      {columnsWidth && (
+        <colgroup>
+          {columnsWidth.map((width, index) => (
+            // 유동적으로 변하지 않는 리스트
+            // eslint-disable-next-line react/no-array-index-key
+            <col key={index} width={width} />
+          ))}
+        </colgroup>
+      )}
+      <thead>
+        {cloneElement(headRow as ReactElement, { scope: 'col', sortConfig })}
+      </thead>
+      <tbody>
+        {sortState
+          ? sortState.sortIndices.map((index) => bodyRows[index])
+          : bodyRows}
+      </tbody>
+    </table>
+  );
+};
+
+type RowProps = {
+  scope?: 'col';
+  sortConfig?: SortConfig;
+  children: ReactElement | ReactElement[];
+};
+
+const Row = ({ scope, sortConfig, children, ...restProps }: RowProps) => (
+  <tr {...restProps}>
+    {sortConfig
+      ? React.Children.toArray(children).map((child) =>
+          cloneElement(child as ReactElement, { scope, sortConfig }),
+        )
+      : children}
+  </tr>
+);
+
+ColumnTable.Row = Row;
+ColumnTable.Cell = Cell;
+
+export default ColumnTable;

src/components/common/Table/RowTable.tsx

@@ -0,0 +1,67 @@
+import React, { cloneElement, ReactElement, useState } from 'react';
+
+import Cell, { SortState, SortConfig } from '@components/common/Table/Cell';
+import { offscreen } from '@styles/commonStyles';
+
+export type RowTableProps = {
+  caption: string;
+  columnsWidth?: string[];
+  sortValues?: { [key in string]: (string | number)[] };
+  children: ReactElement | ReactElement[];
+};
+
+const RowTable = ({
+  caption,
+  columnsWidth,
+  sortValues,
+  children,
+  ...restProps
+}: RowTableProps) => {
+  const [sortState, setSortState] = useState<SortState>(null);
+  const sortConfig = { sortValues, sortState, setSortState };
+
+  return (
+    <table {...restProps}>
+      <caption css={offscreen}>{caption}</caption>
+      {columnsWidth && (
+        <colgroup>
+          {columnsWidth.map((width, index) => (
+            // 유동적으로 변하지 않는 리스트
+            // eslint-disable-next-line react/no-array-index-key
+            <col key={index} width={width} />
+          ))}
+        </colgroup>
+      )}
+      <tbody>
+        {React.Children.toArray(children).map((child) =>
+          cloneElement(child as ReactElement, { scope: 'row', sortConfig }),
+        )}
+      </tbody>
+    </table>
+  );
+};
+
+type RowProps = {
+  scope?: 'row';
+  sortConfig?: SortConfig;
+  children: (ReactElement | ReactElement[])[];
+};
+
+const Row = ({ scope, sortConfig, children, ...restProps }: RowProps) => {
+  const Children = React.Children.toArray(children);
+  const [headCell, bodyCells] = [Children[0], Children.splice(1)];
+
+  return (
+    <tr {...restProps}>
+      {cloneElement(headCell as ReactElement, { scope, sortConfig })}
+      {sortConfig?.sortState
+        ? sortConfig.sortState.sortIndices.map((index) => bodyCells[index])
+        : bodyCells}
+    </tr>
+  );
+};
+
+RowTable.Row = Row;
+RowTable.Cell = Cell;
+
+export default RowTable;

src/components/common/Table/index.tsx

@@ -0,0 +1,5 @@
+import BasicTable from '@components/common/Table/BasicTable';
+import ColumnTable from '@components/common/Table/ColumnTable';
+import RowTable from '@components/common/Table/RowTable';
+
+export { BasicTable, ColumnTable, RowTable };