Adapt layout for dynamic island

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

src/utils/safeArea.ts

@@ -0,0 +1,61 @@
+
+import { isAndroidPlatform, isIOSPlatform } from './platform';
+
+/**
+ * 기기 플랫폼에 따라 상단 안전 영역(Safe Area) 패딩 값을 반환합니다.
+ * iOS의 경우 다이나믹 아일랜드/노치를 위한 여백을 제공합니다.
+ */
+export const getTopSafeAreaPadding = (): string => {
+  if (isIOSPlatform()) {
+    return 'env(safe-area-inset-top, 47px)';
+  }
+  return '0px';
+};
+
+/**
+ * 기기 플랫폼에 따라 하단 안전 영역(Safe Area) 패딩 값을 반환합니다.
+ * iOS의 경우 홈 인디케이터를 위한 여백을 제공합니다.
+ */
+export const getBottomSafeAreaPadding = (): string => {
+  if (isIOSPlatform()) {
+    return 'env(safe-area-inset-bottom, 34px)';
+  }
+  return '0px';
+};
+
+/**
+ * 플랫폼 감지 및 안전 영역 CSS 변수를 문서에 적용합니다.
+ * 이 함수는 앱 초기화시 한 번 호출해야 합니다.
+ */
+export const applySafeAreaInsets = (): void => {
+  const root = document.documentElement;
+  
+  // 최초 로드 시 안전 영역 값 설정
+  updateSafeAreaVariables();
+  
+  // 방향 변경 시 안전 영역 값 다시 계산
+  window.addEventListener('orientationchange', updateSafeAreaVariables);
+  window.addEventListener('resize', updateSafeAreaVariables);
+};
+
+/**
+ * 안전 영역 CSS 변수를 문서에 업데이트합니다.
+ */
+const updateSafeAreaVariables = (): void => {
+  const root = document.documentElement;
+  
+  // 플랫폼에 따른 안전 영역 패딩 계산
+  root.style.setProperty('--safe-area-top', getTopSafeAreaPadding());
+  root.style.setProperty('--safe-area-bottom', getBottomSafeAreaPadding());
+  
+  // 디버깅용: 현재 사용 중인 플랫폼 표시
+  if (isIOSPlatform()) {
+    root.classList.add('ios-platform');
+    root.classList.remove('android-platform');
+  } else if (isAndroidPlatform()) {
+    root.classList.add('android-platform');
+    root.classList.remove('ios-platform');
+  } else {
+    root.classList.remove('ios-platform', 'android-platform');
+  }
+};