) {
+ return (
+
+
+
+ );
+}
+
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+ return (
+
+
+ 더 보기
+
+ );
+}
+
+export {
+ Pagination,
+ PaginationContent,
+ PaginationLink,
+ PaginationItem,
+ PaginationPrevious,
+ PaginationNext,
+ PaginationEllipsis,
+};
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index afea54a9..48890990 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -65,7 +65,7 @@ function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
| ) {
| [] = [
+ { name: '김지수', department: '컴퓨터공학과', memberRole: 'LEAD' },
+ { name: '이도윤', department: '소프트웨어학과', memberRole: 'ADMIN' },
+ { name: '박서연', department: '정보통신공학과', memberRole: 'USER' },
+ { name: '최민준', department: '전자공학과', memberRole: 'USER' },
+ { name: '정하은', department: '경영학과', memberRole: 'USER' },
+ { name: '윤지호', department: '산업공학과', memberRole: 'USER' },
+ { name: '강나연', department: '컴퓨터공학과', memberRole: 'USER' },
+ { name: '조현우', department: '소프트웨어학과', memberRole: 'ADMIN' },
+ { name: '임서영', department: '정보통신공학과', memberRole: 'USER' },
+ { name: '한지민', department: '전자공학과', memberRole: 'USER' },
+ { name: '신민서', department: '경영학과', memberRole: 'USER' },
+ { name: '오승현', department: '산업공학과', memberRole: 'USER' },
+ { name: '문예린', department: '컴퓨터공학과', memberRole: 'USER' },
+ { name: '권태양', department: '소프트웨어학과', memberRole: 'USER' },
+ { name: '류하진', department: '정보통신공학과', memberRole: 'USER' },
+ { name: '배수현', department: '전자공학과', memberRole: 'USER' },
+ { name: '유재원', department: '경영학과', memberRole: 'USER' },
+ { name: '남가은', department: '산업공학과', memberRole: 'USER' },
+ { name: '고도현', department: '컴퓨터공학과', memberRole: 'USER' },
+ { name: '천지우', department: '소프트웨어학과', memberRole: 'USER' },
+ { name: '장미래', department: '정보통신공학과', memberRole: 'USER' },
+ { name: '허성민', department: '전자공학과', memberRole: 'USER' },
+ { name: '노은채', department: '경영학과', memberRole: 'USER' },
+ { name: '서준혁', department: '산업공학과', memberRole: 'USER' },
+ { name: '공하늘', department: '컴퓨터공학과', memberRole: 'USER' },
+];
+
+/** 납부 대상 Mock 데이터 — 25명 (TARGETED 20, EXCLUDED 5) */
+export const MOCK_PAYMENT_TARGETS: MockPaymentTarget[] = MOCK_MEMBERS.map(
+ ({ name, department, memberRole }, idx) => ({
+ targetId: idx + 1,
+ paymentTargetInfo: {
+ userId: idx + 1,
+ clubMemberId: idx + 1,
+ name,
+ tel: `0101234${String(idx).padStart(4, '0')}`,
+ school: '가천대학교',
+ department,
+ memberRole,
+ memberStatus: 'ACTIVE',
+ profileImageUrl: null,
+ },
+ targetStatus: idx < 20 ? 'TARGETED' : 'EXCLUDED',
+ paymentStatus: 'UNPAID',
+ dueAmount: 50000,
+ paidAmount: 0,
+ paidAt: null,
+ confirmedBy: null,
+ memo: null,
+ }),
+);
+// ─── 이월 잔액 Mock ───────────────────────────────────────────────────────────
+// null = 이전 기수 정보 없음, object = 이전 기수 잔액 존재
+export const MOCK_PREVIOUS_BALANCE: { balance: number; generationNumber: number } | null = {
+ balance: 240000,
+ generationNumber: 3,
+};
+
export const MOCK_DEPARTMENTS = [
'컴퓨터공학과',
'소프트웨어학과',
diff --git a/src/hooks/admin/index.ts b/src/hooks/admin/index.ts
index b3e277d4..c0f881ad 100644
--- a/src/hooks/admin/index.ts
+++ b/src/hooks/admin/index.ts
@@ -1,3 +1,4 @@
export { useFlattenedSessions, type FlattenedSession } from './useFlattenedSessions';
export { useSessionMutations } from './useSessionMutations';
export { useBoardDragReorder } from './useBoardDragReorder';
+export { usePaymentTargetFilter } from './usePaymentTargetFilter';
diff --git a/src/hooks/admin/usePaymentTargetFilter.ts b/src/hooks/admin/usePaymentTargetFilter.ts
new file mode 100644
index 00000000..7bd37cdf
--- /dev/null
+++ b/src/hooks/admin/usePaymentTargetFilter.ts
@@ -0,0 +1,62 @@
+'use client';
+
+import { MOCK_PAYMENT_TARGETS } from '@/constants/mock';
+import { useState } from 'react';
+
+const PAGE_SIZE = 10;
+
+type TabType = 'selected' | 'excluded' | 'all';
+
+function usePaymentTargetFilter(selectedMemberIds: number[]) {
+ const [tab, setTab] = useState('selected');
+ const [search, setSearch] = useState('');
+ const [page, setPage] = useState(1);
+
+ const selectedSet = new Set(selectedMemberIds);
+
+ const totalCount = MOCK_PAYMENT_TARGETS.length;
+ const selectedCount = selectedMemberIds.length;
+ const excludedCount = totalCount - selectedCount;
+
+ const byTab =
+ tab === 'selected'
+ ? MOCK_PAYMENT_TARGETS.filter((t) => selectedSet.has(t.paymentTargetInfo.clubMemberId))
+ : MOCK_PAYMENT_TARGETS.filter((t) => !selectedSet.has(t.paymentTargetInfo.clubMemberId));
+ const filteredTargets = search.trim()
+ ? byTab.filter((t) => t.paymentTargetInfo.name.includes(search.trim()))
+ : byTab;
+
+ const totalPages = Math.max(1, Math.ceil(filteredTargets.length / PAGE_SIZE));
+ const currentPage = Math.min(page, totalPages);
+ const pagedTargets = filteredTargets.slice(
+ (currentPage - 1) * PAGE_SIZE,
+ currentPage * PAGE_SIZE,
+ );
+
+ const handleTabChange = (next: TabType) => {
+ setTab(next);
+ setPage(1);
+ };
+
+ const handleSearch = (value: string) => {
+ setSearch(value);
+ setPage(1);
+ };
+
+ return {
+ totalCount,
+ selectedCount,
+ tab,
+ search,
+ selectedSet,
+ page,
+ setPage,
+ excludedCount,
+ totalPages,
+ pagedTargets,
+ handleTabChange,
+ handleSearch,
+ };
+}
+
+export { usePaymentTargetFilter };
diff --git a/src/stores/__tests__/useDuesSetupStore.test.ts b/src/stores/__tests__/useDuesSetupStore.test.ts
new file mode 100644
index 00000000..424bca30
--- /dev/null
+++ b/src/stores/__tests__/useDuesSetupStore.test.ts
@@ -0,0 +1,205 @@
+import { act, renderHook } from '@testing-library/react';
+
+import {
+ useDuesSetupActions,
+ useDuesSetupStore,
+ useDuesSetupValues,
+} from '@/stores/useDuesSetupStore';
+
+const defaultState = {
+ generationNumber: 0,
+ amount: '',
+ name: '',
+ description: '',
+ selectedMemberIds: [] as number[],
+ memberIdsInitialized: false,
+ carryOverOption: 'none' as const,
+ carryOverDescription: '',
+ carryOverInitialized: false,
+ accountNumber: '',
+ bankName: '',
+ accountHolder: '',
+ accountGuide: '',
+ isAccountPublic: false,
+};
+
+beforeEach(() => {
+ localStorage.clear();
+ useDuesSetupStore.setState(defaultState);
+});
+
+describe('초기 상태', () => {
+ it('모든 필드가 기본값으로 초기화된다', () => {
+ const state = useDuesSetupStore.getState();
+
+ expect(state.generationNumber).toBe(0);
+ expect(state.amount).toBe('');
+ expect(state.name).toBe('');
+ expect(state.description).toBe('');
+ expect(state.selectedMemberIds).toEqual([]);
+ expect(state.memberIdsInitialized).toBe(false);
+ expect(state.carryOverOption).toBe('none');
+ expect(state.carryOverDescription).toBe('');
+ expect(state.carryOverInitialized).toBe(false);
+ expect(state.accountNumber).toBe('');
+ expect(state.bankName).toBe('');
+ expect(state.accountHolder).toBe('');
+ expect(state.accountGuide).toBe('');
+ expect(state.isAccountPublic).toBe(false);
+ });
+});
+
+describe('setField', () => {
+ it('Step 1 기본 정보 필드를 업데이트한다', () => {
+ act(() => {
+ useDuesSetupStore.getState().setField({
+ generationNumber: 10,
+ amount: '50000',
+ name: '2025년 1학기 회비',
+ description: '정기 회비입니다',
+ });
+ });
+
+ const state = useDuesSetupStore.getState();
+ expect(state.generationNumber).toBe(10);
+ expect(state.amount).toBe('50000');
+ expect(state.name).toBe('2025년 1학기 회비');
+ expect(state.description).toBe('정기 회비입니다');
+ });
+
+ it('Step 2 납부 대상 필드를 업데이트한다', () => {
+ act(() => {
+ useDuesSetupStore.getState().setField({
+ selectedMemberIds: [1, 2, 3],
+ memberIdsInitialized: true,
+ });
+ });
+
+ const state = useDuesSetupStore.getState();
+ expect(state.selectedMemberIds).toEqual([1, 2, 3]);
+ expect(state.memberIdsInitialized).toBe(true);
+ });
+
+ it('Step 3 이월 설정 필드를 업데이트한다', () => {
+ act(() => {
+ useDuesSetupStore.getState().setField({
+ carryOverOption: 'carry',
+ carryOverDescription: '잔액을 다음 기수로 이월합니다',
+ carryOverInitialized: true,
+ });
+ });
+
+ const state = useDuesSetupStore.getState();
+ expect(state.carryOverOption).toBe('carry');
+ expect(state.carryOverDescription).toBe('잔액을 다음 기수로 이월합니다');
+ expect(state.carryOverInitialized).toBe(true);
+ });
+
+ it('Step 4 계좌 공개 필드를 업데이트한다', () => {
+ act(() => {
+ useDuesSetupStore.getState().setField({
+ accountNumber: '110-123-456789',
+ bankName: '신한은행',
+ accountHolder: '홍길동',
+ accountGuide: '입금 시 이름을 기재해주세요',
+ isAccountPublic: true,
+ });
+ });
+
+ const state = useDuesSetupStore.getState();
+ expect(state.accountNumber).toBe('110-123-456789');
+ expect(state.bankName).toBe('신한은행');
+ expect(state.accountHolder).toBe('홍길동');
+ expect(state.accountGuide).toBe('입금 시 이름을 기재해주세요');
+ expect(state.isAccountPublic).toBe(true);
+ });
+
+ it('업데이트하지 않은 필드는 기존 값을 유지한다', () => {
+ act(() => {
+ useDuesSetupStore.getState().setField({ amount: '30000' });
+ });
+ act(() => {
+ useDuesSetupStore.getState().setField({ name: '회비' });
+ });
+
+ const state = useDuesSetupStore.getState();
+ expect(state.amount).toBe('30000');
+ expect(state.name).toBe('회비');
+ });
+});
+
+describe('reset', () => {
+ it('모든 필드를 초기 상태로 복원한다', () => {
+ act(() => {
+ useDuesSetupStore.getState().setField({
+ amount: '50000',
+ name: '회비',
+ selectedMemberIds: [1, 2],
+ memberIdsInitialized: true,
+ carryOverOption: 'carry',
+ carryOverInitialized: true,
+ isAccountPublic: true,
+ bankName: '카카오뱅크',
+ });
+ });
+
+ act(() => {
+ useDuesSetupStore.getState().reset();
+ });
+
+ const state = useDuesSetupStore.getState();
+ expect(state).toMatchObject(defaultState);
+ });
+});
+
+describe('useDuesSetupValues', () => {
+ it('스토어의 모든 상태 필드를 반환한다', () => {
+ act(() => {
+ useDuesSetupStore.getState().setField({ amount: '20000', generationNumber: 7 });
+ });
+
+ const { result } = renderHook(() => useDuesSetupValues());
+
+ expect(result.current.amount).toBe('20000');
+ expect(result.current.generationNumber).toBe(7);
+ expect(result.current.selectedMemberIds).toEqual([]);
+ expect(result.current.carryOverOption).toBe('none');
+ });
+});
+
+describe('useDuesSetupActions', () => {
+ it('setField와 reset 함수를 반환한다', () => {
+ const { result } = renderHook(() => useDuesSetupActions());
+
+ expect(typeof result.current.setField).toBe('function');
+ expect(typeof result.current.reset).toBe('function');
+ });
+
+ it('훅에서 받은 setField가 스토어를 업데이트한다', () => {
+ const { result } = renderHook(() => useDuesSetupActions());
+
+ act(() => {
+ result.current.setField({ amount: '15000', name: '테스트 회비' });
+ });
+
+ const state = useDuesSetupStore.getState();
+ expect(state.amount).toBe('15000');
+ expect(state.name).toBe('테스트 회비');
+ });
+
+ it('훅에서 받은 reset이 스토어를 초기 상태로 복원한다', () => {
+ act(() => {
+ useDuesSetupStore.getState().setField({ amount: '99000', name: '변경됨' });
+ });
+
+ const { result } = renderHook(() => useDuesSetupActions());
+
+ act(() => {
+ result.current.reset();
+ });
+
+ const state = useDuesSetupStore.getState();
+ expect(state.amount).toBe('');
+ expect(state.name).toBe('');
+ });
+});
diff --git a/src/stores/index.ts b/src/stores/index.ts
index cb9335f4..0ce095da 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -24,6 +24,12 @@ export {
useBoardNavReset,
} from './useBoardNavStore';
export { useCreateClubDraftStore } from './useCreateClubDraftStore';
+export {
+ useDuesSetupStore,
+ useDuesSetupValues,
+ useDuesSetupActions,
+ type DuesSetupState,
+} from './useDuesSetupStore';
export {
useAdminHeaderStore,
useIsAdminEditMode,
diff --git a/src/stores/useDuesSetupStore.ts b/src/stores/useDuesSetupStore.ts
new file mode 100644
index 00000000..3438ba4b
--- /dev/null
+++ b/src/stores/useDuesSetupStore.ts
@@ -0,0 +1,67 @@
+import { create } from 'zustand';
+import { combine, devtools, persist } from 'zustand/middleware';
+import { useShallow } from 'zustand/react/shallow';
+
+const initialState = {
+ generationNumber: 0,
+ // Step 1: 기본 정보
+ amount: '',
+ name: '',
+ description: '',
+ // Step 2: 납부 대상
+ selectedMemberIds: [] as number[],
+ memberIdsInitialized: false,
+ // Step 3: 이월 설정
+ carryOverOption: 'none' as 'none' | 'carry',
+ carryOverDescription: '',
+ carryOverInitialized: false,
+ // Step 4: 계좌 공개
+ accountNumber: '',
+ bankName: '',
+ accountHolder: '',
+ accountGuide: '',
+ isAccountPublic: false,
+};
+
+export type DuesSetupState = typeof initialState;
+
+export const useDuesSetupStore = create(
+ devtools(
+ persist(
+ combine(initialState, (set) => ({
+ setField: (field: Partial) => set(field, false, 'setField'),
+ reset: () => set(initialState, false, 'reset'),
+ })),
+ { name: 'duesSetup' },
+ ),
+ { name: 'DuesSetupStore' },
+ ),
+);
+
+export const useDuesSetupValues = () =>
+ useDuesSetupStore(
+ useShallow((state) => ({
+ generationNumber: state.generationNumber,
+ amount: state.amount,
+ name: state.name,
+ description: state.description,
+ selectedMemberIds: state.selectedMemberIds,
+ memberIdsInitialized: state.memberIdsInitialized,
+ carryOverOption: state.carryOverOption,
+ carryOverDescription: state.carryOverDescription,
+ carryOverInitialized: state.carryOverInitialized,
+ accountNumber: state.accountNumber,
+ bankName: state.bankName,
+ accountHolder: state.accountHolder,
+ accountGuide: state.accountGuide,
+ isAccountPublic: state.isAccountPublic,
+ })),
+ );
+
+export const useDuesSetupActions = () =>
+ useDuesSetupStore(
+ useShallow((state) => ({
+ setField: state.setField,
+ reset: state.reset,
+ })),
+ );
|