Refactor: Adapt to design changes

The design has been significantly updated, requiring code adjustments.

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,12 @@ const Header: React.FC = () => {
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageError, setImageError] = useState(false);
   const isMobile = useIsMobile();
+  const [isIOS, setIsIOS] = useState(false);
+
+  // 플랫폼 감지
+  useEffect(() => {
+    setIsIOS(isIOSPlatform());
+  }, []);
 
   // 이미지 프리로딩 처리
   useEffect(() => {
@@ -28,16 +35,27 @@ const Header: React.FC = () => {
     };
   }, []);
 
-  return <header className="py-4">
+  return (
+    <header className={`py-4 ${isIOS ? 'ios-header' : ''}`}>
       <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 +68,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,47 @@
+
+import React, { useEffect, useState, ReactNode } from 'react';
+import { isIOSPlatform } from '@/utils/platform';
+
+interface SafeAreaContainerProps {
+  children: ReactNode;
+  className?: string;
+  topOnly?: boolean;
+  bottomOnly?: boolean;
+}
+
+/**
+ * 플랫폼별 안전 영역(Safe Area)을 고려한 컨테이너 컴포넌트
+ * iOS에서는 노치/다이나믹 아일랜드를 고려한 여백 적용
+ */
+const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
+  children,
+  className = '',
+  topOnly = false,
+  bottomOnly = false
+}) => {
+  const [isIOS, setIsIOS] = useState(false);
+  
+  // 마운트 시 플랫폼 확인
+  useEffect(() => {
+    setIsIOS(isIOSPlatform());
+  }, []);
+
+  // 플랫폼에 따른 클래스 결정
+  let safeAreaClass = '';
+  
+  if (isIOS) {
+    if (!bottomOnly) safeAreaClass += ' pt-12'; // iOS 상단 안전 영역
+    if (!topOnly) safeAreaClass += ' pb-8';     // iOS 하단 안전 영역
+  } else {
+    if (!bottomOnly) safeAreaClass += ' pt-4';  // 안드로이드 상단 여백
+    if (!topOnly) safeAreaClass += ' pb-4';     // 안드로이드 하단 여백
+  }
+
+  return (
+    <div className={`${safeAreaClass} ${className}`}>
+      {children}
+    </div>
+  );
+};
+
+export default SafeAreaContainer;