[Dony] Table 컴포넌트 구현

packages/playground-react/pages/table/column-table.tsx

@@ -0,0 +1,128 @@
+import { ColumnTable, Text, FlexBox } from '@cos-ui/react';
+
+const noticeList = [
+  {
+    id: 1,
+    title: '스터디 가입전 해당 공지사항을 숙지해주세요.',
+    writer: '파크',
+    date: '2022.10.22',
+    view: 101,
+  },
+  {
+    id: 2,
+    title: '스터디 전체 공지 드립니다.',
+    writer: '도니',
+    date: '2022.09.20',
+    view: 110,
+  },
+  {
+    id: 3,
+    title: '스터디 전체 공지 드립니다.',
+    writer: '햄디',
+    date: '2022.09.20',
+    view: 9,
+  },
+  {
+    id: 4,
+    title: '스터디 전체 공지 드립니다.',
+    writer: '제이미',
+    date: '2022.09.22',
+    view: 9,
+  },
+];
+
+const sortValues = {
+  writer: noticeList.map(({ writer }) => writer),
+  date: noticeList.map(({ date }) => {
+    const numberDate = Number(date.split('.').join(''));
+    return numberDate.toString().length < 8 ? numberDate * 10 : numberDate;
+  }),
+  view: noticeList.map(({ view }) => Number(view)),
+};
+
+const SortIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="17"
+    height="14"
+    viewBox="0 0 17 14"
+  >
+    <path
+      id="다각형_3"
+      data-name="다각형 3"
+      d="M7.645,1.408a1,1,0,0,1,1.71,0l6.723,11.073A1,1,0,0,1,15.223,14H1.777a1,1,0,0,1-.855-1.519Z"
+      transform="translate(17 14) rotate(180)"
+      fill="#007aff"
+    />
+  </svg>
+);
+
+const ColumnTablePage = () => (
+  <ColumnTable
+    caption="공지사항"
+    columnsWidth={['85px', '*', '120px', '120px', '120px']}
+    sortValues={sortValues}
+  >
+    <ColumnTable.Row>
+      <ColumnTable.HeadCell>
+        <Text as="div" sx={{ textAlign: 'center' }}>
+          번호
+        </Text>
+      </ColumnTable.HeadCell>
+      <ColumnTable.HeadCell>제목</ColumnTable.HeadCell>
+      <ColumnTable.HeadCell name="writer">
+        <FlexBox
+          sx={{ justifyContent: 'center', alignItems: 'center', gap: '1rem' }}
+        >
+          작성자
+          <SortIcon />
+        </FlexBox>
+      </ColumnTable.HeadCell>
+      <ColumnTable.HeadCell name="date">
+        <FlexBox
+          sx={{ justifyContent: 'center', alignItems: 'center', gap: '1rem' }}
+        >
+          날짜
+          <SortIcon />
+        </FlexBox>
+      </ColumnTable.HeadCell>
+      <ColumnTable.HeadCell name="view">
+        <FlexBox
+          sx={{ justifyContent: 'center', alignItems: 'center', gap: '1rem' }}
+        >
+          조회수
+          <SortIcon />
+        </FlexBox>
+      </ColumnTable.HeadCell>
+    </ColumnTable.Row>
+    {noticeList.map(({ id, title, writer, date, view }) => (
+      <ColumnTable.Row key={id}>
+        <ColumnTable.BodyCell>
+          <Text sx={{ textAlign: 'center' }} ellipsis>
+            {id}
+          </Text>
+        </ColumnTable.BodyCell>
+        <ColumnTable.BodyCell>
+          <Text ellipsis>{title}</Text>
+        </ColumnTable.BodyCell>
+        <ColumnTable.BodyCell>
+          <Text sx={{ textAlign: 'center' }} ellipsis>
+            {writer}
+          </Text>
+        </ColumnTable.BodyCell>
+        <ColumnTable.BodyCell>
+          <Text sx={{ textAlign: 'center' }} ellipsis>
+            {date}
+          </Text>
+        </ColumnTable.BodyCell>
+        <ColumnTable.BodyCell>
+          <Text sx={{ textAlign: 'center' }} ellipsis>
+            {view}
+          </Text>
+        </ColumnTable.BodyCell>
+      </ColumnTable.Row>
+    ))}
+  </ColumnTable>
+);
+
+export default ColumnTablePage;

packages/primitives/src/components/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;

packages/primitives/src/components/Table/Cell/index.tsx

@@ -0,0 +1,108 @@
+import { ReactNode, Dispatch, SetStateAction } from 'react';
+
+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"
+          css={{ display: 'block', width: '100%' }}
+          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;

packages/primitives/src/components/Table/ColumnTable.tsx

@@ -0,0 +1,68 @@
+import React, { cloneElement, ReactElement, useState } from 'react';
+
+import Cell, { SortState, SortConfig } from '@components/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;