feat: safe area 테스트2

Author: sikkzz

apps/tuk-web/src/app/layout.tsx

@@ -16,6 +16,7 @@ export const viewport = {
   initialScale: 1,
   maximumScale: 1,
   userScalable: 'no',
+  viewportFit: 'cover',
 };
 
 export default function RootLayout({

apps/tuk-web/src/app/proposal/[proposalId]/detail/components/GatheringProposalContent.tsx

@@ -121,6 +121,7 @@ export const CardFrame = () => {
       height="421"
       viewBox="0 0 408 421"
       fill="none"
+      style={{ overflow: 'hidden', display: 'block' }}
     >
       <foreignObject x="0" y="0" width="408" height="421">
         <div

apps/tuk-web/src/shared/components/Header.tsx

@@ -1,3 +1,4 @@
+// Header.tsx
 import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
 
 import { cn } from '@/shared/lib';
@@ -6,7 +7,9 @@ export const Header = ({ children, className }: HTMLAttributes<HTMLHeadElement>)
   return (
     <header
       className={cn(
-        'sticky top-0 z-20 flex h-16 items-center justify-between bg-white-default px-5 py-4',
+        // 🔹 h-16 고정 제거 → min-h-16로 기본 높이 보장 + pt-safe로 노치 패딩
+        'sticky top-0 z-20 flex min-h-16 items-center justify-between ' +
+          'pt-safe bg-white-default px-5 py-4',
         className
       )}
     >

apps/tuk-web/src/shared/components/provider/ClientProvider.tsx

@@ -8,9 +8,7 @@ import { UserAgentProvider } from '@/shared/components/provider/UserAgentProvide
 export default function ClientProvider({ children }: { children: ReactNode }) {
   return (
     <UserAgentProvider>
-      <AppBridgeProvider>
-        <div className="mx-auto max-w-[600px]">{children}</div>
-      </AppBridgeProvider>
+      <AppBridgeProvider>{children}</AppBridgeProvider>
     </UserAgentProvider>
   );
 }

apps/tuk-web/src/styles/globals.css

@@ -95,6 +95,59 @@
   }
 }
 
+:root {
+  --safe-top: 0px;
+  --safe-right: 0px;
+  --safe-bottom: 0px;
+  --safe-left: 0px;
+}
+
+@supports (padding: max(0px)) {
+  :root {
+    --safe-top: env(safe-area-inset-top);
+    --safe-right: env(safe-area-inset-right);
+    --safe-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+@layer utilities {
+  /* 화면 전체 + 안전영역 패딩 흡수 */
+  .screen-safe {
+    min-height: 100dvh; /* 앱 웹뷰에 안전 */
+    padding-top: var(--safe-top);
+    padding-right: var(--safe-right);
+    padding-bottom: var(--safe-bottom);
+    padding-left: var(--safe-left);
+  }
+
+  /* 고정 헤더/푸터 보정용 */
+  .pt-safe {
+    padding-top: var(--safe-top);
+  }
+  .pr-safe {
+    padding-right: var(--safe-right);
+  }
+  .pb-safe {
+    padding-bottom: var(--safe-bottom);
+  }
+  .pl-safe {
+    padding-left: var(--safe-left);
+  }
+
+  /* 하단 고정바(CTA) 자주 쓰는 패턴 */
+  .cta-safe {
+    padding-bottom: calc(var(--safe-bottom) + 1.5rem);
+  }
+
+  /* iOS 필터/블러 오버플로우 방지(필요한 요소에 클래스 부여해서 사용) */
+  .contain-paint {
+    contain: paint;
+    clip-path: inset(0);
+    transform: translateZ(0);
+    pointer-events: none; /* 배경 장식이라면 옵션 */
+  }
+}
+
 * {
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -106,7 +159,10 @@
 
 html,
 body {
+  max-width: 37.5rem;
+  margin: 0 auto;
   overscroll-behavior: none;
   -webkit-overflow-scrolling: touch;
   touch-action: manipulation;
+  overflow-x: hidden;
 }