Refactor: Adapt to design changes

The design has been significantly updated, requiring code adjustments.

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;