[Dony] headless Table 구현 #95
Conversation
change context values to children props.
delete O(n)2 sort logic.
✅ Deploy Preview for co-studo ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
There was a problem hiding this comment.
정렬을 위해 사용할 값을 cell에서 각각 받는게 나은지 table에서 name별로 배열을 만들어서 객체로 받는게 사용하기 편할지 고민입니다.
테이블을 사용할 때 noticeList를 순회하면서 데이터를 넘겨주는 부분과 sortValues에 들어가는 값이 비슷한 부분이 있지 않나 싶어요. cell에서 각각 받게 된다면 어떤 방식으로 사용하게 되는 건지 좀 더 설명해주실 수 있을까요?
정렬 기능까지 포함하는 테이블 구현하기가 쉽지 않으셨을 것 같은데 고생 많으셨습니다 도니!!
| 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); | ||
| }; |
There was a problem hiding this comment.
updateSortState를 실행할 때 매번 이 연산을 수행하게 되는데 같은 컬럼을 여러번 클릭하는 경우에는 매번 계산하는 게 불필요할 수 있을 것 같아요! 현재 sortState에 있는 name과 같다면 가지고 있는 sortIndices를 reverse해서 반환해줘도 되지 않을까요?
| view: noticeList.map(({ view }) => Number(view)), | ||
| }; | ||
|
|
||
| const tableCSS = css` |
There was a problem hiding this comment.
따로 빼서 작성하는 스타일의 네이밍도 통일하면 좋을 것 같아요! 현재는 xxStyle 이런 식으로 많이 사용하고 있는데 이 부분에 대해 한번 논의해봐도 좋을 것 같습니다. 그리고 Headless 컴포넌트의 경우 styled를 사용하기로 했던 것 같은데 css prop을 사용하신 이유는 중복해서 작성하지 않고 여러 테이블에 적용하기 위함일까요?
| export type SortConfig = { | ||
| sortValues?: { [key in string]: (string | number)[] }; | ||
| sortState: SortState; | ||
| setSortState: Dispatch<SetStateAction<SortState>>; | ||
| }; |
There was a problem hiding this comment.
별 건 아니지만 문득 도니가 사용하신 [key in string]과 [key: string]이 무슨 차이인지 궁금해서 찾아봤었는데요! 제 생각엔 [key: string] 쪽이 좀 더 적절하지 않나 싶었던 것 같아요.
관련해서 정리한 링크입니다!
그리고 sortState가 현재 어떤 것을 기준으로 정렬하고 있는지에 관한 정보니까 이런 부분을 좀 더 명확히 나타낼 수 있는 이름이면 더 좋겠다는 생각도 드네요!
| export const Row: ComponentStory<typeof RowTable> = () => ( | ||
| <RowTable | ||
| caption="공지사항" | ||
| columnsWidth={['8%', '24%', '24%', '24%', '24%']} |
There was a problem hiding this comment.
단순한 궁금증인데 컬럼의 퍼센트를 합쳐서 100%가 되지 않아도 상관이 없는 건가요??
close #84
지난 번에 보낸 Design system 컴포넌트로 구현했던 table 컴포넌트 PR close하고 정렬 기능 추가하여 headless 컴포넌트로 다시 PR 보냅니다!
설계
기능
접근성
caption을 사용하여 table이 어떤 표를 나타내는지 명시
th에 scope를 지정하여 제목행이 가로인지 세로인지 명시
고민한 사항
sortValues prop을 받을 위치
정렬을 위해 사용할 값을 cell에서 각각 받는게 나은지 table에서 name별로 배열을 만들어서 객체로 받는게 사용하기 편할지 고민입니다.