0906.md

인터페이스 명세 - 미믹님 먼저 작성하실예정

0. 선택칸 테이블 width 조절하게 해보기

• react table : column resizing hook으로 만들어 쓴다는 것 라이브러리를 쓰는 방법 두가지
  1. 컴포넌트로 쓰는 것 - Radix
  2. 훅처럼 props들을 가지고 쓰는 것 - React table ; pagination도 쉽게 지원할 수 있고 커스텀 디자인에 맞춰 넣을 수 있다

Scenario: 선택칸의 가로 길이를 마음대로 늘리거나 줄일 수 있다
  Given 선택칸을 렌더하고
  When 원하는 칸을 선택해서 잡아당기면
  Then 선택칸을 줄이거나 늘일 수 있다

1.1 react-table 설치

bun add react-table bun add -d @types/react-table

columns

  return {
    Header: `Column ${i}`,
    accessor: `col${i}`,
  };
});
console.log(columns);

// input: colors ["#ffffff","#ffffff","#ffffff","#ffffff", ...,"#ffffff"]

  const entries = colors.map((v, i) => [`col${i}`, v])
  console.log('entries', entries)

  const row = Object.fromEntries([["col0", "#ffffff"], ["col1", "#ffffff"],["col2", "#ffffff"]])
  console.log('row', row)

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state,
    // resetResizing,
  } = useTable(
    {
      columns,
      data: [row],
      defaultColumn,
    },
    useBlockLayout,
    useResizeColumns
  );

1.2 데모 코드 가져와서 넣어보기

1.3 내 상황에 맞게 바꾸기 colomn, data