Refactor useTransactionsFiltering hook
Refactor the useTransactionsFiltering hook into smaller, more manageable units without changing functionality.
This commit is contained in:
42
src/hooks/transactions/filterOperations/index.ts
Normal file
42
src/hooks/transactions/filterOperations/index.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
|
||||
import { useMonthSelection } from './useMonthSelection';
|
||||
import { useFilterApplication } from './useFilterApplication';
|
||||
import { useTotalCalculation } from './useTotalCalculation';
|
||||
import { FilteringProps, FilteringReturn } from './types';
|
||||
|
||||
/**
|
||||
* 트랜잭션 필터링 작업 관련 훅
|
||||
* 월 선택, 필터 적용, 총액 계산 기능을 제공합니다.
|
||||
*/
|
||||
export const useTransactionsFiltering = ({
|
||||
transactions,
|
||||
selectedMonth,
|
||||
setSelectedMonth,
|
||||
searchQuery,
|
||||
setFilteredTransactions
|
||||
}: FilteringProps): FilteringReturn => {
|
||||
// 월 선택 관련 기능
|
||||
const { handlePrevMonth, handleNextMonth } = useMonthSelection(
|
||||
selectedMonth,
|
||||
setSelectedMonth
|
||||
);
|
||||
|
||||
// 필터 적용
|
||||
useFilterApplication(
|
||||
transactions,
|
||||
selectedMonth,
|
||||
searchQuery,
|
||||
setFilteredTransactions
|
||||
);
|
||||
|
||||
// 총 지출 계산
|
||||
const { getTotalExpenses } = useTotalCalculation();
|
||||
|
||||
return {
|
||||
handlePrevMonth,
|
||||
handleNextMonth,
|
||||
getTotalExpenses
|
||||
};
|
||||
};
|
||||
|
||||
export * from './types';
|
||||
16
src/hooks/transactions/filterOperations/types.ts
Normal file
16
src/hooks/transactions/filterOperations/types.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
|
||||
import { Transaction } from '@/components/TransactionCard';
|
||||
|
||||
export interface FilteringProps {
|
||||
transactions: Transaction[];
|
||||
selectedMonth: string;
|
||||
setSelectedMonth: (month: string) => void;
|
||||
searchQuery: string;
|
||||
setFilteredTransactions: (transactions: Transaction[]) => void;
|
||||
}
|
||||
|
||||
export interface FilteringReturn {
|
||||
handlePrevMonth: () => void;
|
||||
handleNextMonth: () => void;
|
||||
getTotalExpenses: (filteredTransactions: Transaction[]) => number;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { Transaction } from '@/components/TransactionCard';
|
||||
import {
|
||||
filterTransactionsByMonth,
|
||||
filterTransactionsByQuery
|
||||
} from '../filterUtils';
|
||||
|
||||
/**
|
||||
* 필터 적용 관련 훅
|
||||
* 트랜잭션에 대한 월별/검색어 필터링을 적용합니다.
|
||||
*/
|
||||
export const useFilterApplication = (
|
||||
transactions: Transaction[],
|
||||
selectedMonth: string,
|
||||
searchQuery: string,
|
||||
setFilteredTransactions: (transactions: Transaction[]) => void
|
||||
) => {
|
||||
// 필터 적용
|
||||
useEffect(() => {
|
||||
// 1. 월별 필터링
|
||||
let filtered = filterTransactionsByMonth(transactions, selectedMonth);
|
||||
|
||||
// 2. 검색어 필터링
|
||||
if (searchQuery.trim()) {
|
||||
filtered = filterTransactionsByQuery(filtered, searchQuery);
|
||||
}
|
||||
|
||||
console.log('필터링 결과:', filtered.length, '트랜잭션');
|
||||
setFilteredTransactions(filtered);
|
||||
}, [transactions, selectedMonth, searchQuery, setFilteredTransactions]);
|
||||
};
|
||||
26
src/hooks/transactions/filterOperations/useMonthSelection.ts
Normal file
26
src/hooks/transactions/filterOperations/useMonthSelection.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
|
||||
import { getPrevMonth, getNextMonth } from '../dateUtils';
|
||||
|
||||
/**
|
||||
* 월 선택 관련 훅
|
||||
* 이전/다음 월 선택 기능을 제공합니다.
|
||||
*/
|
||||
export const useMonthSelection = (
|
||||
selectedMonth: string,
|
||||
setSelectedMonth: (month: string) => void
|
||||
) => {
|
||||
// 이전 월로 변경
|
||||
const handlePrevMonth = () => {
|
||||
setSelectedMonth(getPrevMonth(selectedMonth));
|
||||
};
|
||||
|
||||
// 다음 월로 변경
|
||||
const handleNextMonth = () => {
|
||||
setSelectedMonth(getNextMonth(selectedMonth));
|
||||
};
|
||||
|
||||
return {
|
||||
handlePrevMonth,
|
||||
handleNextMonth
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
|
||||
import { Transaction } from '@/components/TransactionCard';
|
||||
import { calculateTotalExpenses } from '../filterUtils';
|
||||
|
||||
/**
|
||||
* 총 지출 계산 관련 훅
|
||||
* 필터링된 트랜잭션의 총 지출을 계산합니다.
|
||||
*/
|
||||
export const useTotalCalculation = () => {
|
||||
// 필터링된 트랜잭션의 총 지출 계산
|
||||
const getTotalExpenses = (filteredTransactions: Transaction[]): number => {
|
||||
return calculateTotalExpenses(filteredTransactions);
|
||||
};
|
||||
|
||||
return {
|
||||
getTotalExpenses
|
||||
};
|
||||
};
|
||||
@@ -44,13 +44,13 @@ export const useTransactionsCore = () => {
|
||||
handlePrevMonth,
|
||||
handleNextMonth,
|
||||
getTotalExpenses
|
||||
} = useTransactionsFiltering(
|
||||
} = useTransactionsFiltering({
|
||||
transactions,
|
||||
selectedMonth,
|
||||
setSelectedMonth,
|
||||
searchQuery,
|
||||
setFilteredTransactions
|
||||
);
|
||||
});
|
||||
|
||||
// 트랜잭션 작업
|
||||
const {
|
||||
|
||||
@@ -1,55 +1,5 @@
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { Transaction } from '@/components/TransactionCard';
|
||||
import {
|
||||
filterTransactionsByMonth,
|
||||
filterTransactionsByQuery,
|
||||
calculateTotalExpenses
|
||||
} from './filterUtils';
|
||||
import { getPrevMonth, getNextMonth } from './dateUtils';
|
||||
import { useTransactionsFiltering } from './filterOperations';
|
||||
|
||||
/**
|
||||
* 트랜잭션 필터링 관련 훅
|
||||
* 월별 및 검색어 필터링 기능을 제공합니다.
|
||||
*/
|
||||
export const useTransactionsFiltering = (
|
||||
transactions: Transaction[],
|
||||
selectedMonth: string,
|
||||
setSelectedMonth: (month: string) => void,
|
||||
searchQuery: string,
|
||||
setFilteredTransactions: (transactions: Transaction[]) => void
|
||||
) => {
|
||||
// 월 변경 처리
|
||||
const handlePrevMonth = () => {
|
||||
setSelectedMonth(getPrevMonth(selectedMonth));
|
||||
};
|
||||
|
||||
const handleNextMonth = () => {
|
||||
setSelectedMonth(getNextMonth(selectedMonth));
|
||||
};
|
||||
|
||||
// 필터 적용
|
||||
useEffect(() => {
|
||||
// 1. 월별 필터링
|
||||
let filtered = filterTransactionsByMonth(transactions, selectedMonth);
|
||||
|
||||
// 2. 검색어 필터링
|
||||
if (searchQuery.trim()) {
|
||||
filtered = filterTransactionsByQuery(filtered, searchQuery);
|
||||
}
|
||||
|
||||
console.log('필터링 결과:', filtered.length, '트랜잭션');
|
||||
setFilteredTransactions(filtered);
|
||||
}, [transactions, selectedMonth, searchQuery, setFilteredTransactions]);
|
||||
|
||||
// 필터링된 트랜잭션의 총 지출 계산
|
||||
const getTotalExpenses = (filteredTransactions: Transaction[]) => {
|
||||
return calculateTotalExpenses(filteredTransactions);
|
||||
};
|
||||
|
||||
return {
|
||||
handlePrevMonth,
|
||||
handleNextMonth,
|
||||
getTotalExpenses
|
||||
};
|
||||
};
|
||||
// 기존 훅을 그대로 내보내기
|
||||
export { useTransactionsFiltering };
|
||||
|
||||
Reference in New Issue
Block a user