[headless] Table 컴포넌트 구현

[jindonyy]

issue #65
기존에 디자인 시스템 컴포넌트로 구현한 Table 컴포넌트를 headless 기반으로 변경

예상 동작

• headCell 을 누르면 정렬이 된다.
  • 오름차순, 내림차순으로 토글된다.
  • 클릭할 때마다 headCell 의 스타일이 변한다.

제공하고자 하는 인터페이스

type HeadCellProps = {
  sort?: {
    defaultOrder: 'ascending' | 'descending';
    value: string | number;
  };
  children: ReactElement | ReactElement[];
}

[healtheloper]

sort 의 value 를 받는 이유가 sort 의 기준을 잡기 위해서 일까요?
그렇다면 value 를 따로 받지않고, value 가 무엇인지 확인 (typeof 등..) 해서 내부에서 처리하는건 어떤가요?

인터페이스는 type 말고 실제 테이블을 사용할 때의 인터페이스도 같이 작성해주시면 파악하기 더 쉬울 것 같아요

[jindonyy]

회의에서 말씀드려서 답변을 안달았네요!

sort 의 value 를 받는 이유가 sort 의 기준을 잡기 위해서 일까요? 그렇다면 value 를 따로 받지않고, value 가 무엇인지 확인 (typeof 등..) 해서 내부에서 처리하는건 어떤가요?

예시 사진처럼 0회, 2022.10.02 등 보여져야하는 값과 정렬에 사용되야하는 값이 달라 정렬을 위한 값을 따로 받는걸로 정했습니다!
그리고 데이터가 외부에 있고, 실제로 정렬 함수가 실행되야하는 곳(headCell)과 값이 들어오는 곳(bodyCell)이 달라 외부에서 받기로 결정했습니다.

인터페이스는 type 말고 실제 테이블을 사용할 때의 인터페이스도 같이 작성해주시면 파악하기 더 쉬울 것 같아요.

넵 해당 부분은 아직 설계가 덜 되서 추후에 수정된 부분이랑 같이 업데이트 하겠습니다.