feat: safe area wrapper 제작

Nexters · Feb 17, 2025 · c39beae · c39beae
1 parent a1d8cfb
commit c39beae
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss b/src/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss
@@ -0,0 +1,6 @@
+.SafeArea {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
diff --git a/src/components/common/SafeAreaWrapper/SafeAreaWrapper.tsx b/src/components/common/SafeAreaWrapper/SafeAreaWrapper.tsx
@@ -0,0 +1,7 @@
+import styles from "@/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss";
+
+const SafeAreaWrapper = ({ children }: { children: React.ReactNode }) => {
+  return <div className={styles.SafeArea}>{children}</div>;
+};
+
+export default SafeAreaWrapper;
diff --git a/src/main.tsx b/src/main.tsx
@@ -5,6 +5,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import AppRouter from "@/router/AppRouter";
 
+import SafeAreaWrapper from "@/components/common/SafeAreaWrapper/SafeAreaWrapper";
 import { AppBridgeProvider } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
 import ReactQueryClientProvider from "@/components/provider/ReactQueryClientProvider";
 import { UserAgentProvider } from "@/components/provider/UserAgentProvider";
@@ -17,8 +18,10 @@ ReactDom.createRoot(document.getElementById("root")!).render(
     <ReactQueryClientProvider>
       <UserAgentProvider>
         <AppBridgeProvider>
-          <AppRouter />
-          <ReactQueryDevtools initialIsOpen={false} />
+          <SafeAreaWrapper>
+            <AppRouter />
+            <ReactQueryDevtools initialIsOpen={false} />
+          </SafeAreaWrapper>
         </AppBridgeProvider>
       </UserAgentProvider>
     </ReactQueryClientProvider>