Fix: SafeArea for iOS dynamic island

Fixes iOS safe area issues caused by the dynamic island.

src/components/SafeAreaContainer.tsx

@@ -25,15 +25,22 @@ const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
   
   // 마운트 시 플랫폼 확인
   useEffect(() => {
-    setIsIOS(isIOSPlatform());
+    const checkPlatform = async () => {
+      const isiOS = isIOSPlatform();
+      console.log('SafeAreaContainer: 플랫폼 확인 - iOS:', isiOS);
+      setIsIOS(isiOS);
+    };
+    
+    checkPlatform();
   }, []);
 
   // 플랫폼에 따른 클래스 결정
-  let safeAreaClass = '';
+  let safeAreaClass = 'safe-area-container';
   
   if (isIOS) {
     if (!bottomOnly) safeAreaClass += ' has-safe-area-top'; // iOS 상단 안전 영역
     if (!topOnly) safeAreaClass += ' has-safe-area-bottom'; // iOS 하단 안전 영역
+    safeAreaClass += ' ios-safe-area'; // iOS 전용 클래스 추가
   } else {
     if (!bottomOnly) safeAreaClass += ' pt-4';  // 안드로이드 상단 여백
     if (!topOnly) safeAreaClass += ' pb-4';     // 안드로이드 하단 여백
@@ -42,6 +49,30 @@ const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
   // 추가 하단 여백 적용
   const extraBottomClass = extraBottomPadding ? 'pb-[80px]' : '';
 
+  // 디버그용 로그 추가
+  useEffect(() => {
+    if (isIOS) {
+      console.log('SafeAreaContainer: iOS 안전 영역 적용됨', {
+        topOnly,
+        bottomOnly,
+        extraBottomPadding
+      });
+      
+      // 안전 영역 값 확인 (CSS 변수)
+      try {
+        const computedStyle = getComputedStyle(document.documentElement);
+        console.log('Safe area 변수 값:', {
+          top: computedStyle.getPropertyValue('--safe-area-top'),
+          bottom: computedStyle.getPropertyValue('--safe-area-bottom'),
+          left: computedStyle.getPropertyValue('--safe-area-left'),
+          right: computedStyle.getPropertyValue('--safe-area-right')
+        });
+      } catch (error) {
+        console.error('CSS 변수 확인 중 오류:', error);
+      }
+    }
+  }, [isIOS, topOnly, bottomOnly]);
+
   return (
     <div className={`${safeAreaClass} ${extraBottomClass} ${className}`}>
       {children}