+
+ );
+}
diff --git a/src/layout/LoadingSpinner/style.ts b/src/layout/LoadingSpinner/style.ts
new file mode 100644
index 0000000..b5efd89
--- /dev/null
+++ b/src/layout/LoadingSpinner/style.ts
@@ -0,0 +1,7 @@
+import { css } from '@emotion/react';
+
+export const loading = css`
+ position: absolute;
+ top: 50%;
+ left: 50%;
+`;
diff --git a/src/model/dues/allDues.ts b/src/model/dues/allDues.ts
new file mode 100644
index 0000000..7cc2940
--- /dev/null
+++ b/src/model/dues/allDues.ts
@@ -0,0 +1,23 @@
+export interface DuesInfo {
+ year: number;
+ dues: Dues[];
+}
+
+interface Dues {
+ memberId: number;
+ name: string;
+ track: TrackInfo;
+ unpaidCount: number;
+ detail: DuesDetail[];
+}
+
+export interface DuesDetail {
+ month: number;
+ status: '납부' | '면제' | '미납' | null;
+ memo?: string;
+}
+
+interface TrackInfo {
+ id: number;
+ name: string;
+}
diff --git a/src/page/DuesManagement/index.tsx b/src/page/DuesManagement/index.tsx
new file mode 100644
index 0000000..92ed533
--- /dev/null
+++ b/src/page/DuesManagement/index.tsx
@@ -0,0 +1,261 @@
+import { useNavigate } from 'react-router-dom';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import {
+ Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Input, Popover,
+} from '@mui/material';
+import Modal from '@mui/material/Modal';
+import {
+ ChangeEvent, Suspense, useEffect, useState,
+} from 'react';
+import { useGetAllDues } from 'query/dues';
+import useBooleanState from 'util/hooks/useBooleanState.ts';
+import { DuesDetail } from 'model/dues/allDues';
+import { STATUS_MAPPING } from 'util/constants/status';
+import { useGetTracks } from 'query/tracks';
+import LoadingSpinner from 'layout/LoadingSpinner';
+import { ArrowBackIosNewOutlined, ArrowForwardIosOutlined } from '@mui/icons-material';
+import useQueryParam from 'util/hooks/useQueryParam';
+import * as S from './style';
+
+function DefaultTable() {
+ const navigate = useNavigate();
+ const page = useQueryParam('page', 'number') as number;
+ const currentYear = new Date().getFullYear();
+ const [duesYear, setDuesYear] = useState(currentYear - page + 1);
+ const [trackFilter, setTrackFilter] = useState([true, true, true, true, true, true]);
+ const [name, setName] = useState('');
+ const [detail, setDetail] = useState
+
+
+
+ {duesYear}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default function DuesManagement() {
+ const page = useQueryParam('page', 'number') as number;
+ const currentYear = new Date().getFullYear();
+ const duesYear = currentYear - page + 1;
+ return (
+
+
+ );
+}
diff --git a/src/page/DuesManagement/style.ts b/src/page/DuesManagement/style.ts
new file mode 100644
index 0000000..3813f99
--- /dev/null
+++ b/src/page/DuesManagement/style.ts
@@ -0,0 +1,163 @@
+import { css } from '@emotion/react';
+import { colors } from 'const/colors/style';
+import { DuesDetail } from 'model/dues/allDues';
+
+export const sidebar = css`
+ display: flex;
+ flex-direction: column;
+ width: 250px;
+ min-height: calc(100vh - 10px);
+ background-color: ${colors.gray};
+ border-right: 1px solid ${colors.borderGray};
+`;
+
+export const topBar = css`
+ width: 100%;
+ height: 100px;
+ background-color: ${colors.gray};
+ border-bottom: 1px solid ${colors.borderGray};
+ display: flex;
+ align-items: center;
+`;
+
+export const topBarTitle = css`
+ margin-left: 16px;
+`;
+
+export const content = css`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100vw;
+`;
+
+export const mainContent = css`
+ position: relative;
+ width: 95%;
+ min-height: calc(100vh - 250px);
+`;
+
+export const container = css`
+ display: flex;
+ height: 100%;
+ width: 100%;
+ background-color: ${colors.gray};
+`;
+
+export const logo = css`
+ width: 100%;
+ margin-top: -10px;
+`;
+
+export const searchAndPagination = css`
+ position: relative;
+ display: flex;
+ justify-content: end;
+ width: calc(100% - 100px);
+ margin: 10px 0;
+`;
+
+export const pagination = css`
+ position: absolute;
+ right: 44%;
+ display: flex;
+`;
+
+export const paginationTitle = css`
+ font-weight: bold;
+ font-size: 20px;
+ margin-top: 4px;
+`;
+
+export const tableContainer = css`
+ overflow-x: initial;
+`;
+
+export const tableHeader = css`
+ background-color: #1877f2;
+ color: #ffffff;
+`;
+
+export const trackTableCell = css`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`;
+
+export const dues = css`
+ width: calc(100% - 100px);
+ height: 100%;
+`;
+
+export const filterModalButton = css`
+ padding: 8px 16px;
+ border-radius: 8px;
+ cursor: pointer;
+ border: 1px solid #eeeeee;
+ color: #212121;
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+`;
+
+export const filterModal = css`
+ position: fixed;
+ z-index: 1300;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
+
+export const filterModalContainer = css`
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ overflow: hidden;
+ background-color: #ffffff;
+ border-radius: 8px;
+ border: 1px solid #e0e0e0;
+ box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
+ padding: 24px;
+ color: #212121;
+`;
+
+export const checkboxFieldset = css`
+ margin: 5px;
+`;
+
+export const filterModalContent = css`
+ display: flex;
+ flex-direction: column;
+`;
+
+// 미납 | 납부 | 면제 | null(아직 납부 달이 지나지 않음)
+// popover를 여는 버튼은 미납, 면제일 때만 보이도록 함
+export const memoTableCell = (props: DuesDetail) => {
+ let backgroundColor = 'default';
+
+ switch (props.status) {
+ case '미납':
+ backgroundColor = '#ff5630';
+ break;
+ case '면제':
+ case '납부':
+ backgroundColor = '#00a76f';
+ break;
+ default:
+ backgroundColor = 'default';
+ break;
+ }
+
+ return css`
+ cursor: ${props.status === '미납' || props.status === '면제' ? 'pointer' : 'default'};
+ background-color: ${backgroundColor};
+ `;
+};
+
+export const memoPopover = css`
+ padding: 16px;
+`;
diff --git a/src/query/dues.ts b/src/query/dues.ts
new file mode 100644
index 0000000..8127330
--- /dev/null
+++ b/src/query/dues.ts
@@ -0,0 +1,11 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { DuesOptions, getAllDues } from 'api/Dues';
+import { DuesInfo } from 'model/dues/allDues';
+
+export const useGetAllDues = ({ year, track }: DuesOptions) => {
+ const { data }: { data: DuesInfo } = useSuspenseQuery({
+ queryKey: ['dues', year, track],
+ queryFn: () => getAllDues({ year, track }),
+ });
+ return { data };
+};
diff --git a/src/util/constants/status.ts b/src/util/constants/status.ts
new file mode 100644
index 0000000..476f39c
--- /dev/null
+++ b/src/util/constants/status.ts
@@ -0,0 +1,5 @@
+export const STATUS_MAPPING = {
+ 미납: 'X',
+ 면제: '-',
+ 납부: 'O',
+};
diff --git a/src/util/hooks/useBooleanState.ts b/src/util/hooks/useBooleanState.ts
new file mode 100644
index 0000000..92e2bd2
--- /dev/null
+++ b/src/util/hooks/useBooleanState.ts
@@ -0,0 +1,13 @@
+import { useCallback, useState } from 'react';
+
+export default function useBooleanState(defaultValue?: boolean) {
+ const [value, setValue] = useState(!!defaultValue);
+
+ const setTrue = useCallback(() => setValue(true), []);
+ const setFalse = useCallback(() => setValue(false), []);
+ const changeValue = useCallback(() => setValue((x) => !x), []);
+
+ return {
+ value, setValue, setTrue, setFalse, changeValue,
+ } as const;
+}
diff --git a/src/util/hooks/useQueryParam.ts b/src/util/hooks/useQueryParam.ts
new file mode 100644
index 0000000..f8fe21d
--- /dev/null
+++ b/src/util/hooks/useQueryParam.ts
@@ -0,0 +1,24 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export default function useQueryParam(key: string, type: string): string | number | null {
+ const location = useLocation();
+ const [param, setParam] = useState
+ 
+
+
+
+
+
+
+
+
+ + {duesYear} + 년 회비 내역 +
+
+
+