From ce60f418fa20ef609cfc9876b725669331d989b3 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 23 Mar 2025 10:15:20 +0000
Subject: [PATCH] Fix notch issue on iOS

Addresses the notch display issue on iOS devices.
---
 src/components/Header.tsx            |  4 +++-
 src/components/SafeAreaContainer.tsx |  4 ++--
 src/index.css                        | 16 +++++++---------
 src/pages/Settings.tsx               |  9 ++++++---
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 48c8d69..cc3b9ea 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -37,8 +37,10 @@ const Header: React.FC = () => {
     };
   }, []);
 
+  const headerClass = isIOS ? 'has-safe-area-top' : 'py-4';
+
   return (
-    <header className={`py-4 ${isIOS ? 'ios-header' : ''}`}>
+    <header className={headerClass}>
       <div className="flex justify-between items-center">
         <div className="flex items-center">
           <Avatar className="h-12 w-12 mr-3">
diff --git a/src/components/SafeAreaContainer.tsx b/src/components/SafeAreaContainer.tsx
index 78f2b47..3173357 100644
--- a/src/components/SafeAreaContainer.tsx
+++ b/src/components/SafeAreaContainer.tsx
@@ -30,8 +30,8 @@ const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
   let safeAreaClass = '';
   
   if (isIOS) {
-    if (!bottomOnly) safeAreaClass += ' pt-12'; // iOS 상단 안전 영역
-    if (!topOnly) safeAreaClass += ' pb-8';     // iOS 하단 안전 영역
+    if (!bottomOnly) safeAreaClass += ' has-safe-area-top'; // iOS 상단 안전 영역
+    if (!topOnly) safeAreaClass += ' has-safe-area-bottom'; // iOS 하단 안전 영역
   } else {
     if (!bottomOnly) safeAreaClass += ' pt-4';  // 안드로이드 상단 여백
     if (!topOnly) safeAreaClass += ' pb-4';     // 안드로이드 하단 여백
diff --git a/src/index.css b/src/index.css
index 6b4e9a2..26eb83c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -53,10 +53,10 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
 
     /* Safe area 값 */
-    --safe-area-top: 0px;
-    --safe-area-bottom: 0px;
-    --safe-area-left: 0px;
-    --safe-area-right: 0px;
+    --safe-area-top: env(safe-area-inset-top, 0px);
+    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+    --safe-area-left: env(safe-area-inset-left, 0px);
+    --safe-area-right: env(safe-area-inset-right, 0px);
   }
 
   .dark {
@@ -152,15 +152,15 @@
   
   /* 안전 영역 관련 클래스 */
   .has-safe-area-top {
-    padding-top: max(1rem, env(safe-area-inset-top));
+    padding-top: max(1rem, var(--safe-area-top));
   }
   
   .has-safe-area-bottom {
-    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+    padding-bottom: max(1rem, var(--safe-area-bottom));
   }
   
   .ios-header {
-    padding-top: max(1rem, env(safe-area-inset-top));
+    padding-top: max(1rem, var(--safe-area-top));
   }
   
   /* 모바일 화면에서의 추가 스타일 */
@@ -260,12 +260,10 @@
 /* iOS 전용 스타일 */
 @supports (-webkit-touch-callout: none) {
   .ios-safe-area-top {
-    --safe-area-top: env(safe-area-inset-top);
     padding-top: var(--safe-area-top);
   }
   
   .ios-safe-area-bottom {
-    --safe-area-bottom: env(safe-area-inset-bottom);
     padding-bottom: var(--safe-area-bottom);
   }
 }
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 1a3eb7a..8029018 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -8,6 +8,7 @@ import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from '
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/auth';
 import { useToast } from '@/hooks/useToast.wrapper';
+import SafeAreaContainer from '@/components/SafeAreaContainer';
 
 const SettingsOption = ({
   icon: Icon,
@@ -57,8 +58,9 @@ const Settings = () => {
     navigate(path);
   };
   
-  return <div className="min-h-screen bg-neuro-background pb-24">
-      <div className="max-w-md mx-auto px-6">
+  return (
+    <SafeAreaContainer className="min-h-screen bg-neuro-background">
+      <div className="max-w-md mx-auto px-6 pb-24">
         {/* Header */}
         <header className="py-4">
           <h1 className="font-bold neuro-text mb-3 text-xl">설정</h1>
@@ -121,7 +123,8 @@ const Settings = () => {
       </div>
 
       <NavBar />
-    </div>;
+    </SafeAreaContainer>
+  );
 };
 
 export default Settings;