Implement notification history feature

Adds a notification history view accessible from the header, including a clear button and a notification count badge.

src/pages/Index.tsx

@@ -10,6 +10,7 @@ import { useAuth } from '@/contexts/auth';
 import { useWelcomeDialog } from '@/hooks/useWelcomeDialog';
 import { useDataInitialization } from '@/hooks/useDataInitialization';
 import { useIsMobile } from '@/hooks/use-mobile';
+import useNotifications from '@/hooks/useNotifications';
 
 // 메인 컴포넌트
 const Index = () => {
@@ -28,6 +29,7 @@ const Index = () => {
   const { showWelcome, checkWelcomeDialogState, handleCloseWelcome } = useWelcomeDialog();
   const { isInitialized } = useDataInitialization(resetBudgetData);
   const isMobile = useIsMobile();
+  const { addNotification } = useNotifications();
 
   // 초기화 후 환영 메시지 표시 상태 확인
   useEffect(() => {
@@ -37,6 +39,21 @@ const Index = () => {
     }
   }, [isInitialized, checkWelcomeDialogState]);
 
+  // 앱 시작시 예시 알림 추가 (실제 앱에서는 필요한 이벤트에 따라 알림 추가)
+  useEffect(() => {
+    if (isInitialized && user) {
+      // 사용자 로그인 시 알림 예시
+      const timeoutId = setTimeout(() => {
+        addNotification(
+          '환영합니다!', 
+          '젤리의 적자탈출에 오신 것을 환영합니다. 예산을 설정하고 지출을 기록해보세요.'
+        );
+      }, 2000);
+      
+      return () => clearTimeout(timeoutId);
+    }
+  }, [isInitialized, user, addNotification]);
+
   // 페이지가 처음 로드될 때 데이터 로딩 확인
   useEffect(() => {
     console.log('Index 페이지 마운트, 현재 데이터 상태:');