diff --git a/react-fundamental b/react-fundamental new file mode 160000 index 0000000..8f30647 --- /dev/null +++ b/react-fundamental @@ -0,0 +1 @@ +Subproject commit 8f306472a933b8df709cdaa555b983a1dbb2db37 diff --git a/src/components/SortableTable.js b/src/components/SortableTable.js index 2150d57..d9c19f0 100644 --- a/src/components/SortableTable.js +++ b/src/components/SortableTable.js @@ -5,10 +5,27 @@ import Table from './Table'; function SortableTable(props) { const [sortOrder, setSortOrder] = useState(null); const [sortBy, setSortBy] = useState(null); + + console.log("sortOrder", sortOrder); + console.log("sortBy", sortBy); + + const { config, data } = props; const handleClick = (label) => { // TODO - 정렬 화살표 클릭 시 정렬을 해주는 함수 + + if(sortOrder === null){ + setSortOrder("asc"); + /*초기값 asc */ + setSortBy(label); + } else if (sortOrder === "asc"){ + setSortOrder("desc"); + setSortBy(label); + } else if (sortOrder === "desc"){ + setSortOrder(null); + setSortBy(null); + } }; const updatedConfig = config.map((column) => { @@ -37,6 +54,19 @@ function SortableTable(props) { const { sortValue } = config.find((column) => column.label === sortBy); sortedData = [...data].sort((a, b) => { // TODO - 정렬된 데이터로 바꿔 끼우는 부분 들어갈 comparator 함수 + //테스트 되는지 확인해봐 commit + const valueA = sortValue(a); + const valueB = sortValue(b); + + const reverseOrder = sortOrder === 'asc' ? 1 : -1; + + if(typeof valueA === 'string'){ + return valueA.localeCompare(valueB) * reverseOrder; + } else{ + /*string이 아니면 number일거다. */ + return (valueA - valueB) * reverseOrder; + } + }); } @@ -69,10 +99,11 @@ function getIcons(label, sortBy, sortOrder) { } else if (sortOrder === 'desc') { return (