Refactor: Split Index.tsx into smaller components and hooks

Split the large Index.tsx file into smaller, more manageable components and custom hooks to improve code readability and maintainability. Ensure all functionality remains the same after refactoring.

src/hooks/useWelcomeNotification.tsx

@@ -0,0 +1,35 @@
+
+import { useEffect } from 'react';
+import { useAuth } from '@/contexts/auth';
+import useNotifications from '@/hooks/useNotifications';
+
+/**
+ * 앱 초기화 후 환영 메시지 알림을 표시하는 커스텀 훅
+ */
+export const useWelcomeNotification = (isInitialized: boolean) => {
+  const { user } = useAuth();
+  const { addNotification } = useNotifications();
+
+  useEffect(() => {
+    try {
+      // 환영 메시지가 이미 표시되었는지 확인하는 키
+      const welcomeNotificationSent = sessionStorage.getItem('welcomeNotificationSent');
+      
+      if (isInitialized && user && !welcomeNotificationSent) {
+        // 사용자 로그인 시 알림 예시 (한 번만 실행)
+        const timeoutId = setTimeout(() => {
+          addNotification(
+            '환영합니다!', 
+            '젤리의 적자탈출에 오신 것을 환영합니다. 예산을 설정하고 지출을 기록해보세요.'
+          );
+          // 세션 스토리지에 환영 메시지 표시 여부 저장
+          sessionStorage.setItem('welcomeNotificationSent', 'true');
+        }, 2000);
+        
+        return () => clearTimeout(timeoutId);
+      }
+    } catch (error) {
+      console.error('환영 메시지 알림 표시 중 오류:', error);
+    }
+  }, [isInitialized, user, addNotification]);
+};