[Feat/#60] 브라우저·PWA 세이프에어리어를 env()로 확보

index.html

@@ -3,7 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- viewport-fit=cover: 페이지를 노치·홈 인디케이터 밑까지 펼친다. 이게 없으면 브라우저가
+         알아서 안전 영역 안으로 잘라 넣고, 그 대신 env(safe-area-inset-*)이 항상 0이 된다.
+         펼친 만큼 피하는 건 우리 책임이 되며 index.css의 safe-area 유틸이 담당한다. -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <title>stream-client</title>
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
     <link

src/components/ui/BottomNav.tsx

@@ -94,7 +94,7 @@ function BottomNav({ value, onValueChange }: BottomNavProps) {
       {/* iOS 홈 인디케이터 자리(Figma 812 프레임이 포함하는 34px). 앱 WebView에서는 네이티브
           세이프에어리어가 이미 확보해 줘서 여기서 또 주면 여백이 두 번 들어간다.
           홈 인디케이터가 없는 데스크톱 컬럼에서만 Figma 스펙대로 남긴다. */}
-      <div className="hidden h-[34px] w-full sm:block" />
+      <div className="h-safe-bottom w-full sm:h-[34px]" />
     </div>
   );
 }

src/components/ui/BottomSheet.tsx

@@ -47,7 +47,7 @@ function BottomSheet({ open, onClose, children }: BottomSheetProps) {
             하나 더 붙는데, 실제 @wanteddev/wds의 ActionArea 컴포넌트에는 이 14px이 없어서
             여기서 더해준다. */}
         {/* 앱 WebView에서는 네이티브 세이프에어리어와 중복이라 데스크톱 컬럼에서만 남긴다(BottomNav와 같은 규칙). */}
-        <div className="hidden h-[14px] shrink-0 sm:block" />
+        <div className="h-safe-bottom-extra shrink-0 sm:h-[14px]" />
       </div>
     </div>,
     portalEl,

src/components/ui/ScreenLayout.tsx

@@ -52,7 +52,11 @@ interface ScreenLayoutProps {
 // 같이 움직여야 하는 고정 px는 FeedbacksQaCard(캐러셀 카드)와 BililgeReturnConfirmModal
 // 둘뿐이다. 화면과 같은 배경 위에 서는 컬럼이라 그림자로 경계를 표시한다
 // — App.tsx가 같은 브레이크포인트로 이 컬럼을 가운데 세운다.
-// 세이프에어리어는 앱 셸이 담당하므로 여기서 env(safe-area-inset-*)를 더하지 않는다(중복 여백이 된다).
+// 세이프에어리어는 env(safe-area-inset-*)로 확보한다(index.html의 viewport-fit=cover와 한 쌍).
+// 고정 px를 더하면 앱에서 네이티브 인셋과 겹쳐 두 번 들어가지만, env()는 환경이 채우는 값이라
+// 앱 WebView에서는 0이 되어 중복이 생기지 않는다 — 폰 브라우저·PWA(standalone)에서만 실제 인셋이 잡힌다.
+// 상단은 이 루트 div가 배경을 갖고 있어 여기서 패딩으로 받고, 하단은 Bottom Nav·Action Area가
+// 각자 자기 배경을 그 자리까지 연장해야 해서 컴포넌트마다 h-safe-bottom으로 처리한다.
 // 배경도 같은 방식으로 라우트 handle에서 받는다 — 헤더 슬롯까지 이 루트 div가 덮기 때문에,
 // 화면이 헤더와 본문에 따로 배경을 깔 필요가 없다.
 function ScreenLayout({
@@ -71,7 +75,7 @@ function ScreenLayout({
     <ScreenHeaderContext.Provider value={setHeader}>
       <ScreenSheetPortalContext.Provider value={sheetPortalEl}>
         <div
-          className={`relative flex h-dvh w-full flex-col overflow-hidden sm:w-[480px] sm:shadow-[0_0_20px_rgba(0,0,0,0.05)] ${BACKGROUND_CLASS_NAMES[background]}`}
+          className={`relative flex h-dvh w-full flex-col overflow-hidden pt-safe-top sm:w-[480px] sm:pt-0 sm:shadow-[0_0_20px_rgba(0,0,0,0.05)] ${BACKGROUND_CLASS_NAMES[background]}`}
         >
           <div className="shrink-0">{header}</div>
           {/* 스크롤 처리는 각 화면이 스스로 결정한다(예: 상단 토글/필터는 고정하고 목록만 스크롤).

src/features/events/EventsApplicationClosedScreen.tsx

@@ -71,7 +71,7 @@ function EventsApplicationClosedScreen() {
         </ActionArea>
         {/* WDS ActionArea의 아래 padding 20px + 여기 14px = Figma Bottom Safe Area 34px.
             앱 WebView에서는 네이티브 세이프에어리어와 중복이라 데스크톱 프레임에서만 남긴다. */}
-        <div className="hidden h-[14px] bg-background-normal sm:block" />
+        <div className="h-safe-bottom-extra bg-background-normal sm:h-[14px]" />
       </div>
     </div>
   );

src/features/events/EventsApplicationCompleteScreen.tsx

@@ -92,7 +92,7 @@ function EventsApplicationCompleteScreen() {
         </ActionArea>
         {/* 신청 폼과 같은 이유의 14px — WDS ActionArea의 아래 padding 20px에 iOS Home Bar 여백을 더해 34px.
             앱 WebView에서는 네이티브 세이프에어리어와 중복이라 데스크톱 프레임에서만 남긴다. */}
-        <div className="hidden h-[14px] bg-background-normal sm:block" />
+        <div className="h-safe-bottom-extra bg-background-normal sm:h-[14px]" />
       </div>
     </div>
   );

src/features/events/EventsApplicationScreen.tsx

@@ -155,7 +155,7 @@ function EventsApplicationScreen() {
             WDS ActionArea는 아래 padding 20px만 준다 — 모자란 14px을 여기서 더한다(BottomSheet와 같은 이유).
             Bottom Nav가 있는 화면은 BottomNav가 이 여백을 준다.
             앱 WebView에서는 네이티브 세이프에어리어와 중복이라 데스크톱 컬럼에서만 남긴다(BottomNav와 같은 규칙). */}
-        <div className="hidden h-[14px] bg-background-elevated-normal sm:block" />
+        <div className="h-safe-bottom-extra bg-background-elevated-normal sm:h-[14px]" />
       </div>
 
       <ConfirmModal

src/features/events/EventsDetailScreen.tsx

@@ -211,7 +211,7 @@ function EventsDetailScreen() {
         {/* Figma Action Area(110px)는 버튼 아래가 iOS Home Bar 여백까지 합쳐 34px인데,
             WDS ActionArea는 아래 padding 20px만 준다 — 모자란 14px을 여기서 더한다.
             앱 WebView에서는 네이티브 세이프에어리어와 중복이라 데스크톱 프레임에서만 남긴다(BottomNav와 같은 규칙). */}
-        <div className="hidden h-[14px] bg-background-elevated-normal sm:block" />
+        <div className="h-safe-bottom-extra bg-background-elevated-normal sm:h-[14px]" />
       </div>
     </div>
   );

src/index.css

@@ -45,6 +45,25 @@
   --color-thumbnail-placeholder: #d9d9d9;
 }
 
+/* iOS 노치·홈 인디케이터 자리. index.html의 viewport-fit=cover와 한 쌍이다.
+   값은 우리가 정하지 않고 플랫폼이 채운다 — 앱 WebView는 네이티브 SafeAreaView가 이미
+   인셋해서 0, 폰 브라우저·PWA(standalone)는 실제 인셋, 데스크톱·구형 기기는 0이다.
+   그래서 기기·실행 환경 분기를 코드에서 하지 않아도 된다.
+   데스크톱 프레임(sm 이상)에서 Figma 스펙대로 자리를 흉내 내려면 sm: 유틸로 따로 덮는다. */
+@utility pt-safe-top {
+  padding-top: env(safe-area-inset-top, 0px);
+}
+
+@utility h-safe-bottom {
+  height: env(safe-area-inset-bottom, 0px);
+}
+
+/* WDS ActionArea가 이미 아래 padding 20px을 주는 자리 — 모자란 만큼만 더한다.
+   노치 기기(34px)면 14px, 홈 인디케이터가 없는 기기(0)면 0이 된다. */
+@utility h-safe-bottom-extra {
+  height: max(0px, calc(env(safe-area-inset-bottom, 0px) - 20px));
+}
+
 /* 무한 스크롤 목록 등 스크롤은 동작하되 스크롤바는 안 보이게 할 때 쓰는 재사용 유틸리티 */
 @utility scrollbar-hidden {
   scrollbar-width: none;