diff --git a/src/components/SafeAreaContainer.tsx b/src/components/SafeAreaContainer.tsx index 11628f4..01a8290 100644 --- a/src/components/SafeAreaContainer.tsx +++ b/src/components/SafeAreaContainer.tsx @@ -1,80 +1,31 @@ -import React, { useEffect, useState, ReactNode } from 'react'; -import { isIOSPlatform } from '@/utils/platform'; +import React from 'react'; +import { cn } from '@/lib/utils'; interface SafeAreaContainerProps { - children: ReactNode; + children: React.ReactNode; className?: string; - topOnly?: boolean; - bottomOnly?: boolean; - extraBottomPadding?: boolean; // 추가 하단 여백 옵션 + extraBottomPadding?: boolean; } /** - * 플랫폼별 안전 영역(Safe Area)을 고려한 컨테이너 컴포넌트 - * iOS에서는 노치/다이나믹 아일랜드를 고려한 여백 적용 + * iOS의 안전 영역(notch, home indicator 등)을 고려한 컨테이너 + * 모든 페이지 최상위 컴포넌트로 사용해야 함 */ const SafeAreaContainer: React.FC = ({ children, className = '', - topOnly = false, - bottomOnly = false, - extraBottomPadding = false // 기본값은 false + extraBottomPadding = false }) => { - const [isIOS, setIsIOS] = useState(false); - - // 마운트 시 플랫폼 확인 - useEffect(() => { - const checkPlatform = async () => { - const isiOS = isIOSPlatform(); - console.log('SafeAreaContainer: 플랫폼 확인 - iOS:', isiOS); - setIsIOS(isiOS); - }; - - checkPlatform(); - }, []); - - // 플랫폼에 따른 클래스 결정 - let safeAreaClass = 'safe-area-container'; - - if (isIOS) { - if (!bottomOnly) safeAreaClass += ' has-safe-area-top'; // iOS 상단 안전 영역 - if (!topOnly) safeAreaClass += ' has-safe-area-bottom'; // iOS 하단 안전 영역 - safeAreaClass += ' ios-safe-area'; // iOS 전용 클래스 추가 - } else { - if (!bottomOnly) safeAreaClass += ' pt-4'; // 안드로이드 상단 여백 - if (!topOnly) safeAreaClass += ' pb-4'; // 안드로이드 하단 여백 - } - - // 추가 하단 여백 적용 - const extraBottomClass = extraBottomPadding ? 'pb-[80px]' : ''; - - // 디버그용 로그 추가 - useEffect(() => { - if (isIOS) { - console.log('SafeAreaContainer: iOS 안전 영역 적용됨', { - topOnly, - bottomOnly, - extraBottomPadding - }); - - // 안전 영역 값 확인 (CSS 변수) - try { - const computedStyle = getComputedStyle(document.documentElement); - console.log('Safe area 변수 값:', { - top: computedStyle.getPropertyValue('--safe-area-top'), - bottom: computedStyle.getPropertyValue('--safe-area-bottom'), - left: computedStyle.getPropertyValue('--safe-area-left'), - right: computedStyle.getPropertyValue('--safe-area-right') - }); - } catch (error) { - console.error('CSS 변수 확인 중 오류:', error); - } - } - }, [isIOS, topOnly, bottomOnly]); - return ( -
+
{children}
); diff --git a/src/components/transactions/TransactionsHeader.tsx b/src/components/transactions/TransactionsHeader.tsx index 3275af1..0119854 100644 --- a/src/components/transactions/TransactionsHeader.tsx +++ b/src/components/transactions/TransactionsHeader.tsx @@ -1,7 +1,8 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react'; import { formatCurrency } from '@/utils/formatters'; +import { formatMonthForDisplay } from '@/hooks/transactions/dateUtils'; interface TransactionsHeaderProps { selectedMonth: string; @@ -24,14 +25,25 @@ const TransactionsHeader: React.FC = ({ totalExpenses, isDisabled }) => { - console.log('TransactionsHeader 렌더링:', { - selectedMonth, - totalExpenses - }); - + // 월 표시 형식 변환 (2024-04 -> 2024년 04월) + const displayMonth = useMemo(() => + formatMonthForDisplay(selectedMonth), + [selectedMonth] + ); + // 예산 정보가 없는 경우 기본값 사용 const targetAmount = budgetData?.monthly?.targetAmount || 0; + // 디버깅을 위한 로그 + React.useEffect(() => { + console.log('TransactionsHeader 렌더링:', { + selectedMonth, + displayMonth, + totalExpenses, + targetAmount + }); + }, [selectedMonth, displayMonth, totalExpenses, targetAmount]); + return (

지출 내역

@@ -61,7 +73,7 @@ const TransactionsHeader: React.FC = ({
- {selectedMonth} + {displayMonth}