Adapt layout for dynamic island

Adjust top margin based on platform to accommodate the dynamic island on iOS devices.

src/components/Header.tsx

@@ -5,6 +5,7 @@ import { useAuth } from '@/contexts/auth';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useIsMobile } from '@/hooks/use-mobile';
+import { isIOSPlatform } from '@/utils/platform';
 
 const Header: React.FC = () => {
   const {
@@ -14,6 +15,9 @@ const Header: React.FC = () => {
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageError, setImageError] = useState(false);
   const isMobile = useIsMobile();
+  
+  // iOS 기기에서는 상단 안전 영역을 위한 클래스 적용
+  const safeAreaClass = isIOSPlatform() ? 'needs-top-safe-area' : '';
 
   // 이미지 프리로딩 처리
   useEffect(() => {
@@ -28,16 +32,27 @@ const Header: React.FC = () => {
     };
   }, []);
 
-  return <header className="py-4">
+  return (
+    <header className={`py-4 ${safeAreaClass}`}>
       <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">
+            {!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)} />
+              </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="font-bold neuro-text text-xl">
@@ -50,7 +65,8 @@ const Header: React.FC = () => {
           <Bell size={20} className="text-gray-600" />
         </button>
       </div>
-    </header>;
+    </header>
+  );
 };
 
 export default Header;

src/components/SafeAreaContainer.tsx

@@ -0,0 +1,33 @@
+
+import React from 'react';
+import { isIOSPlatform } from '@/utils/platform';
+
+interface SafeAreaContainerProps {
+  children: React.ReactNode;
+  className?: string;
+  applyTop?: boolean;
+  applyBottom?: boolean;
+}
+
+/**
+ * 안전 영역(Safe Area)을 고려한 컨테이너 컴포넌트
+ * iOS의 다이나믹 아일랜드/노치와 하단 홈 인디케이터를 고려하여 패딩을 적용합니다.
+ */
+const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
+  children,
+  className = '',
+  applyTop = true,
+  applyBottom = false
+}) => {
+  // iOS 플랫폼인 경우에만 안전 영역 패딩 적용
+  const topPadding = applyTop && isIOSPlatform() ? 'pt-safe-area' : '';
+  const bottomPadding = applyBottom && isIOSPlatform() ? 'pb-safe-area' : '';
+  
+  return (
+    <div className={`${topPadding} ${bottomPadding} ${className}`}>
+      {children}
+    </div>
+  );
+};
+
+export default SafeAreaContainer;