Visual edit in Lovable

Edited UI in Lovable

src/components/Header.tsx

@@ -1,12 +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';
-
 const Header: React.FC = () => {
-  const { user } = useAuth();
+  const {
+    user
+  } = useAuth();
   const userName = user?.user_metadata?.username || '익명';
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageError, setImageError] = useState(false);
@@ -15,43 +15,27 @@ const Header: React.FC = () => {
   useEffect(() => {
     const preloadImage = new Image();
     preloadImage.src = '/zellyy.png';
-    
     preloadImage.onload = () => {
       setImageLoaded(true);
     };
-    
     preloadImage.onerror = () => {
       console.error('아바타 이미지 로드 실패');
       setImageError(true);
     };
   }, []);
-
+  return <header className="py-8">
-  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 ? (
+            {!imageLoaded && !imageError ? <div className="h-full w-full flex items-center justify-center">
-              <div className="h-full w-full flex items-center justify-center">
                 <Skeleton className="h-full w-full rounded-full" />
-              </div>
+              </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>}
-                <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">
+            <h1 className="font-bold neuro-text text-xl">
               {user ? `${userName}님, 반갑습니다` : '반갑습니다'}
             </h1>
             <p className="text-gray-500 text-left">젤리의 적자탈출</p>
@@ -61,8 +45,6 @@ const Header: React.FC = () => {
           <Bell size={20} className="text-gray-600" />
         </button>
       </div>
-    </header>
+    </header>;
-  );
 };
-
+export default Header;
-export default Header;