Refactor: Codebase review and cleanup

Review the entire codebase for potential issues and perform necessary cleanup.

src/components/SafeAreaContainer.tsx

@@ -1,80 +1,31 @@
 
-import React, { useEffect, useState, ReactNode } from 'react';
-import { isIOSPlatform } from '@/utils/platform';
+import React from 'react';
+import { cn } from '@/lib/utils';
 
 interface SafeAreaContainerProps {
-  children: ReactNode;
+  children: React.ReactNode;
   className?: string;
-  topOnly?: boolean;
-  bottomOnly?: boolean;
-  extraBottomPadding?: boolean; // 추가 하단 여백 옵션
+  extraBottomPadding?: boolean;
 }
 
 /**
- * 플랫폼별 안전 영역(Safe Area)을 고려한 컨테이너 컴포넌트
- * iOS에서는 노치/다이나믹 아일랜드를 고려한 여백 적용
+ * iOS의 안전 영역(notch, home indicator 등)을 고려한 컨테이너
+ * 모든 페이지 최상위 컴포넌트로 사용해야 함
  */
 const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
   children,
   className = '',
-  topOnly = false,
-  bottomOnly = false,
-  extraBottomPadding = false // 기본값은 false
+  extraBottomPadding = false
 }) => {
-  const [isIOS, setIsIOS] = useState(false);
-  
-  // 마운트 시 플랫폼 확인
-  useEffect(() => {
-    const checkPlatform = async () => {
-      const isiOS = isIOSPlatform();
-      console.log('SafeAreaContainer: 플랫폼 확인 - iOS:', isiOS);
-      setIsIOS(isiOS);
-    };
-    
-    checkPlatform();
-  }, []);
-
-  // 플랫폼에 따른 클래스 결정
-  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';     // 안드로이드 하단 여백
-  }
-
-  // 추가 하단 여백 적용
-  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}`}>
+    <div
+      className={cn(
+        'min-h-screen bg-neuro-background',
+        'pt-safe pb-safe pl-safe pr-safe', // iOS 안전 영역 적용
+        extraBottomPadding ? 'pb-24' : '',
+        className
+      )}
+    >
       {children}
     </div>
   );