diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx index 2668b50..7361689 100644 --- a/src/pages/Analytics.tsx +++ b/src/pages/Analytics.tsx @@ -12,10 +12,13 @@ import PeriodSelector from '@/components/analytics/PeriodSelector'; import SummaryCards from '@/components/analytics/SummaryCards'; import MonthlyComparisonChart from '@/components/analytics/MonthlyComparisonChart'; import CategorySpendingList from '@/components/analytics/CategorySpendingList'; - const Analytics = () => { const [selectedPeriod, setSelectedPeriod] = useState('이번 달'); - const { budgetData, getCategorySpending, transactions } = useBudget(); + const { + budgetData, + getCategorySpending, + transactions + } = useBudget(); const isMobile = useIsMobile(); const [refreshTrigger, setRefreshTrigger] = useState(0); const [monthlyData, setMonthlyData] = useState([]); @@ -26,7 +29,7 @@ const Analytics = () => { if (document.visibilityState === 'visible') { console.log('분석 페이지 보임 - 데이터 새로고침'); setRefreshTrigger(prev => prev + 1); - + // 이벤트 발생시켜 데이터 새로고침 try { window.dispatchEvent(new Event('storage')); @@ -38,11 +41,10 @@ const Analytics = () => { } } }; - const handleFocus = () => { console.log('분석 페이지 포커스 - 데이터 새로고침'); setRefreshTrigger(prev => prev + 1); - + // 이벤트 발생시켜 데이터 새로고침 try { window.dispatchEvent(new Event('storage')); @@ -53,16 +55,14 @@ const Analytics = () => { console.error('이벤트 발생 오류:', e); } }; - document.addEventListener('visibilitychange', handleVisibilityChange); window.addEventListener('focus', handleFocus); window.addEventListener('transactionUpdated', () => setRefreshTrigger(prev => prev + 1)); window.addEventListener('budgetDataUpdated', () => setRefreshTrigger(prev => prev + 1)); window.addEventListener('categoryBudgetsUpdated', () => setRefreshTrigger(prev => prev + 1)); - + // 컴포넌트 마운트 시 초기 데이터 로드 이벤트 트리거 handleFocus(); - return () => { document.removeEventListener('visibilitychange', handleVisibilityChange); window.removeEventListener('focus', handleFocus); @@ -71,13 +71,13 @@ const Analytics = () => { window.removeEventListener('categoryBudgetsUpdated', () => {}); }; }, []); - + // 실제 예산 및 지출 데이터 사용 const totalBudget = budgetData?.monthly?.targetAmount || 0; const totalExpense = budgetData?.monthly?.spentAmount || 0; const savings = Math.max(0, totalBudget - totalExpense); const savingsPercentage = totalBudget > 0 ? Math.round(savings / totalBudget * 100) : 0; - + // 카테고리별 지출 차트 데이터 생성 - 색상 유틸리티 사용 const categorySpending = getCategorySpending(); const expenseData = categorySpending.map(category => ({ @@ -88,88 +88,67 @@ const Analytics = () => { // 월별 데이터 생성 - 샘플 데이터 제거하고 현재 달만 실제 데이터 사용 useEffect(() => { - console.log('Analytics 페이지: 월별 데이터 생성', { totalBudget, totalExpense }); - + console.log('Analytics 페이지: 월별 데이터 생성', { + totalBudget, + totalExpense + }); + // 현재 월 가져오기 const today = new Date(); const currentMonth = today.getMonth(); - + // 현재 달만 실제 데이터 사용하는 배열 생성 const monthlyDataArray = [{ - name: MONTHS_KR[currentMonth].split(' ')[0], // '8월' 형식으로 변환 + name: MONTHS_KR[currentMonth].split(' ')[0], + // '8월' 형식으로 변환 budget: totalBudget, expense: totalExpense }]; - setMonthlyData(monthlyDataArray); console.log('Analytics 페이지: 월별 데이터 생성 완료', monthlyDataArray); }, [totalBudget, totalExpense, refreshTrigger]); - + // 이전/다음 기간 이동 처리 const handlePrevPeriod = () => { console.log('이전 기간으로 이동'); }; - const handleNextPeriod = () => { console.log('다음 기간으로 이동'); }; - - return ( -
+ return
{/* Header */}
-

지출 분석

+

지출 분석

{/* Period Selector */} - + {/* Summary Cards */} - +
{/* Monthly Comparison Chart */}

월별 그래프

- +
{/* Category Pie Chart */}

카테고리별 지출

- {expenseData.some(item => item.value > 0) ? ( - - ) : ( -
+ {expenseData.some(item => item.value > 0) ? :

데이터가 없습니다

-
- )} +
}
{/* Top Spending Categories */}

주요 지출 카테고리

- +
-
- ); +
; }; - -export default Analytics; +export default Analytics; \ No newline at end of file