Implement notification history feature

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

src/components/Header.tsx

@@ -1,11 +1,12 @@
 
 import React, { useState, useEffect } from 'react';
-import { Bell } from 'lucide-react';
-import { useAuth } from '@/contexts/auth';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useAuth } from '@/contexts/auth';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { isIOSPlatform } from '@/utils/platform';
+import NotificationPopover from './notification/NotificationPopover';
+import useNotifications from '@/hooks/useNotifications';
 
 const Header: React.FC = () => {
   const {
@@ -16,6 +17,7 @@ const Header: React.FC = () => {
   const [imageError, setImageError] = useState(false);
   const isMobile = useIsMobile();
   const [isIOS, setIsIOS] = useState(false);
+  const { notifications, clearAllNotifications, markAsRead } = useNotifications();
 
   // 플랫폼 감지
   useEffect(() => {
@@ -64,9 +66,13 @@ const Header: React.FC = () => {
             <p className="text-gray-500 text-left">젤리의 적자탈출</p>
           </div>
         </div>
-        <button className="neuro-flat p-2.5 rounded-full">
-          <Bell size={20} className="text-gray-600" />
-        </button>
+        <div className="neuro-flat p-2.5 rounded-full">
+          <NotificationPopover 
+            notifications={notifications}
+            onClearAll={clearAllNotifications}
+            onReadNotification={markAsRead}
+          />
+        </div>
       </div>
     </header>
   );