zellyy-finance/src/components/Header.tsx

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';

const Header: React.FC = () => {
  const { user } = useAuth();
  const userName = user?.user_metadata?.username || '익명';
  const [imageLoaded, setImageLoaded] = useState(false);
  const [imageError, setImageError] = useState(false);

  // 이미지 프리로딩 처리
  useEffect(() => {
    const preloadImage = new Image();
    preloadImage.src = '/zellyy.png';
    
    preloadImage.onload = () => {
      setImageLoaded(true);
    };
    
    preloadImage.onerror = () => {
      console.error('아바타 이미지 로드 실패');
      setImageError(true);
    };
  }, []);

  return (
    <header className="py-8">
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          <Avatar className="h-12 w-12 mr-3">
            {!imageLoaded && !imageError ? (
              <div className="h-full w-full flex items-center justify-center">
                <Skeleton className="h-full w-full rounded-full" />
              </div>
            ) : (
              <>
                <AvatarImage 
                  src="/zellyy.png" 
                  alt="Zellyy" 
                  className={imageLoaded ? 'opacity-100' : 'opacity-0'}
                  onLoad={() => setImageLoaded(true)}
                  onError={() => setImageError(true)}
                />
                {(imageError || !imageLoaded) && (
                  <AvatarFallback delayMs={100}>ZY</AvatarFallback>
                )}
              </>
            )}
          </Avatar>
          <div>
            <h1 className="text-2xl font-bold neuro-text">
              {user ? `${userName}님, 반갑습니다` : '반갑습니다'}
            </h1>
            <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>
    </header>
  );
};

export default Header;