Refactor useTransactionsFiltering hook

Refactor the useTransactionsFiltering hook into smaller, more manageable units without changing functionality.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-17 22:41:30 +00:00
parent 9db57e10db
commit 88cc1af139
7 changed files with 139 additions and 55 deletions

View 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';

View 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;
}

View File

@@ -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]);
};

View 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
};
};

View File

@@ -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
};
};

View File

@@ -44,13 +44,13 @@ export const useTransactionsCore = () => {
handlePrevMonth,
handleNextMonth,
getTotalExpenses
} = useTransactionsFiltering(
} = useTransactionsFiltering({
transactions,
selectedMonth,
setSelectedMonth,
searchQuery,
setFilteredTransactions
);
});
// 트랜잭션 작업
const {

View File

@@ -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 };