diff --git a/src/components/home/HomeContent.tsx b/src/components/home/HomeContent.tsx
index 3590450..d0c5782 100644
--- a/src/components/home/HomeContent.tsx
+++ b/src/components/home/HomeContent.tsx
@@ -1,3 +1,4 @@
+
 import React from 'react';
 import BudgetProgressCard from '@/components/BudgetProgressCard';
 import BudgetCategoriesSection from '@/components/BudgetCategoriesSection';
@@ -46,10 +47,15 @@ const HomeContent: React.FC<HomeContentProps> = ({
   updateTransaction,
   getCategorySpending
 }) => {
+  // getCategorySpending 함수의 반환값을 바로 사용하지 말고, 변수에 할당하여 사용
+  const categorySpendingData = getCategorySpending();
+  const hasAnySpending = Array.isArray(categorySpendingData) && 
+    categorySpendingData.some(cat => cat.current > 0 || cat.total > 0);
+
   return (
     <div className="pb-[50px]">
-      {getCategorySpending().some(cat => cat.current > 0 || cat.total > 0) ? (
-        <BudgetCategoriesSection categories={getCategorySpending()} />
+      {hasAnySpending ? (
+        <BudgetCategoriesSection categories={categorySpendingData} />
       ) : (
         <EmptyState />
       )}
diff --git a/src/contexts/budget/hooks/useCategorySpending.ts b/src/contexts/budget/hooks/useCategorySpending.ts
index 27d7648..8fe8b24 100644
--- a/src/contexts/budget/hooks/useCategorySpending.ts
+++ b/src/contexts/budget/hooks/useCategorySpending.ts
@@ -1,7 +1,7 @@
 
 import { useCallback } from 'react';
 import { Transaction } from '../types';
-import { calculateCategorySpending } from '../budgetUtils';
+import { calculateCategorySpending } from '../utils/categoryUtils';
 
 // 카테고리별 지출 계산 훅
 export const useCategorySpending = (
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 8f62b5f..06c1eb3 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -11,6 +11,7 @@ import { useWelcomeDialog } from '@/hooks/useWelcomeDialog';
 import { useDataInitialization } from '@/hooks/useDataInitialization';
 import { useIsMobile } from '@/hooks/use-mobile';
 import useNotifications from '@/hooks/useNotifications';
+import SafeAreaContainer from '@/components/SafeAreaContainer';
 
 // 메인 컴포넌트
 const Index = () => {
@@ -149,7 +150,7 @@ const Index = () => {
   }, []);
 
   return (
-    <div className="min-h-screen bg-neuro-background pb-24">
+    <SafeAreaContainer className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         <Header />
 
@@ -168,7 +169,7 @@ const Index = () => {
       
       {/* 첫 사용자 안내 팝업 */}
       <WelcomeDialog open={showWelcome} onClose={handleCloseWelcome} />
-    </div>
+    </SafeAreaContainer>
   );
 };