diff --git a/src/page/DuesManagement/index.tsx b/src/page/DuesManagement/index.tsx index 0606419..10ca84b 100644 --- a/src/page/DuesManagement/index.tsx +++ b/src/page/DuesManagement/index.tsx @@ -27,6 +27,11 @@ import { useGetMembers } from 'query/members'; import { useSnackBar } from 'ts/useSnackBar'; import * as S from './style'; +interface SortAnchorEl { + name: null | HTMLElement; + unpaidCount: null | HTMLElement; +} + function DefaultTable() { const navigate = useNavigate(); const page = useQueryParam('page', 'number') as number | null; @@ -35,7 +40,10 @@ function DefaultTable() { const [name, setName] = useState(''); const [detail, setDetail] = useState({ month: 0, status: null }); const [memoAnchorEl, setMemoAnchorEl] = useState(null); - const [sortAnchorEl, setSortAnchorEl] = useState(null); + const [sortAnchorEl, setSortAnchorEl] = useState({ + name: null, + unpaidCount: null, + }); const memoPopOverOpen = Boolean(memoAnchorEl); const { value: isFilterModalOpen, @@ -91,12 +99,36 @@ function DefaultTable() { const sortInAscendingOrderByName = () => { setFilteredValue((prevValue) => prevValue.sort((a, b) => a.name.localeCompare(b.name))); - setSortAnchorEl(null); + setSortAnchorEl((prev) => ({ ...prev, name: null })); }; const sortInDescendingOrderByName = () => { setFilteredValue((prevValue) => prevValue.sort((a, b) => b.name.localeCompare(a.name))); - setSortAnchorEl(null); + setSortAnchorEl((prev) => ({ ...prev, name: null })); + }; + + const sortInAscendingOrderByUnpaidCount = () => { + setFilteredValue((prevValue) => prevValue.sort((a, b) => { + if (a.unpaidCount > b.unpaidCount) return 1; + if (a.unpaidCount < b.unpaidCount) return -1; + + if (a.name.localeCompare(b.name) > 0) return 1; + if (a.name.localeCompare(b.name) < 0) return -1; + return 0; + })); + setSortAnchorEl((prev) => ({ ...prev, unpaidCount: null })); + }; + + const sortInDescendingOrderByUnpaidCount = () => { + setFilteredValue((prevValue) => prevValue.sort((a, b) => { + if (a.unpaidCount < b.unpaidCount) return 1; + if (a.unpaidCount > b.unpaidCount) return -1; + + if (a.name.localeCompare(b.name) > 0) return 1; + if (a.name.localeCompare(b.name) < 0) return -1; + return 0; + })); + setSortAnchorEl((prev) => ({ ...prev, unpaidCount: null })); }; const handleMemoClick = (e: React.MouseEvent, dueDetail: DuesDetail) => { @@ -199,22 +231,57 @@ function DefaultTable() { - 미납 횟수 + + 미납 횟수 + + setSortAnchorEl((prev) => ({ ...prev, unpaidCount: null }))} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > +
+

+ 미납 횟수순 정렬 +

+
+ + +
+
+
+
이름 setSortAnchorEl(null)} + open={Boolean(sortAnchorEl.name)} + anchorEl={sortAnchorEl.name} + onClose={() => setSortAnchorEl((prev) => ({ ...prev, name: null }))} anchorOrigin={{ vertical: 'bottom', horizontal: 'left', @@ -226,11 +293,11 @@ function DefaultTable() {
diff --git a/src/page/EditDues/index.tsx b/src/page/EditDues/index.tsx index ddedd5b..e3a7a90 100644 --- a/src/page/EditDues/index.tsx +++ b/src/page/EditDues/index.tsx @@ -31,6 +31,11 @@ import * as S from './style'; type Status = 'PAID' | 'NOT_PAID' | 'SKIP' | 'NONE'; +interface SortAnchorEl { + name: null | HTMLElement; + unpaidCount: null | HTMLElement; +} + function DefaultTable() { const navigate = useNavigate(); const page = useQueryParam('page', 'number') as number | null; @@ -55,7 +60,10 @@ function DefaultTable() { memo: '', }); const [status, setStatus] = useState('PAID'); - const [sortAnchorEl, setSortAnchorEl] = useState(null); + const [sortAnchorEl, setSortAnchorEl] = useState({ + name: null, + unpaidCount: null, + }); const openSnackBar = useSnackBar(); @@ -188,15 +196,40 @@ function DefaultTable() { setFilteredValue((prev) => { return prev.sort((a, b) => a.name.localeCompare(b.name)); }); - setSortAnchorEl(null); + setSortAnchorEl((prev) => ({ ...prev, name: null })); }; const sortInDescendingOrderByName = () => { setFilteredValue((prev) => { return prev.sort((a, b) => b.name.localeCompare(a.name)); }); - setSortAnchorEl(null); + setSortAnchorEl((prev) => ({ ...prev, name: null })); + }; + + const sortInAscendingOrderByUnpaidCount = () => { + setFilteredValue((prevValue) => prevValue.sort((a, b) => { + if (a.unpaidCount > b.unpaidCount) return 1; + if (a.unpaidCount < b.unpaidCount) return -1; + + if (a.name.localeCompare(b.name) > 0) return 1; + if (a.name.localeCompare(b.name) < 0) return -1; + return 0; + })); + setSortAnchorEl((prev) => ({ ...prev, unpaidCount: null })); + }; + + const sortInDescendingOrderByUnpaidCount = () => { + setFilteredValue((prevValue) => prevValue.sort((a, b) => { + if (a.unpaidCount < b.unpaidCount) return 1; + if (a.unpaidCount > b.unpaidCount) return -1; + + if (a.name.localeCompare(b.name) > 0) return 1; + if (a.name.localeCompare(b.name) < 0) return -1; + return 0; + })); + setSortAnchorEl((prev) => ({ ...prev, unpaidCount: null })); }; + return ( <>
@@ -264,22 +297,57 @@ function DefaultTable() {
- 미납 횟수 + + 미납 횟수 + + setSortAnchorEl((prev) => ({ ...prev, unpaidCount: null }))} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > +
+

+ 미납 횟수순 정렬 +

+
+ + +
+
+
+
이름 setSortAnchorEl(null)} + open={Boolean(sortAnchorEl.name)} + anchorEl={sortAnchorEl.name} + onClose={() => setSortAnchorEl((prev) => ({ ...prev, name: null }))} anchorOrigin={{ vertical: 'bottom', horizontal: 'left', @@ -291,11 +359,11 @@ function DefaultTable() {