Adapt layout for dynamic island

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

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;