Merge pull request #6 from DevKor-github/feat/#5/view-layout

halionaz · web-flow · commit f34a97b2faa7 · 2025-06-22T17:27:38.000+09:00
[#5] View 레이아웃 관련 설정 !
diff --git a/index.html b/index.html
@@ -5,11 +5,14 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
-    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no, viewport-fit=cover"
+    />
     <title>Repicka</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" style="position: fixed; top: 0; right: 0; bottom: 0; left: 0"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/common/components/AppScreenWithSafeArea.tsx b/src/common/components/AppScreenWithSafeArea.tsx
@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from 'react';
+
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+
+/**
+ * 모바일에서 봤을 때 짤림 영역이 (아마도)없는 AppScreen
+ */
+const AppScreenWithSafeArea = ({ children }: PropsWithChildren) => {
+  return (
+    <AppScreen>
+      <div
+        style={{
+          position: 'absolute',
+          top: 'calc(env(safe-area-inset-top))',
+          left: 'calc(env(safe-area-inset-left))',
+          right: 'calc(env(safe-area-inset-right))',
+        }}
+      >
+        {children}
+      </div>
+    </AppScreen>
+  );
+};
+export default AppScreenWithSafeArea;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -1,20 +1,21 @@
 import { useFlow } from '@/libs/routes/stack';
-import { AppScreen } from '@stackflow/plugin-basic-ui';
 import type { ActivityComponentType } from '@stackflow/react';
 import { css } from '@styled-system/css';
 
+import AppScreenWithSafeArea from '@/common/components/AppScreenWithSafeArea';
+
 const HomePage: ActivityComponentType = () => {
   const { push } = useFlow();
   return (
-    <AppScreen>
+    <AppScreenWithSafeArea>
       <h1>리피카 짱</h1>
       <div className={css({ display: 'flex', flexDirection: 'column', gap: '1rem' })}>
         <a href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/kakao`}>카카오톡 로그인</a>
         <a href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/google`}>구글 로그인</a>
         <i>백엔드에몽 로그인 고쳐줘</i>
         <button onClick={() => push('PostPage', {})}>이동</button>
       </div>
-    </AppScreen>
+    </AppScreenWithSafeArea>
   );
 };
 
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
@@ -1,7 +1,8 @@
-import { AppScreen } from '@stackflow/plugin-basic-ui';
 import type { ActivityComponentType } from '@stackflow/react';
 
+import AppScreenWithSafeArea from '@/common/components/AppScreenWithSafeArea';
+
 const NotFoundPage: ActivityComponentType = () => {
-  return <AppScreen>페이지를 찾을 수 없어요 . . .</AppScreen>;
+  return <AppScreenWithSafeArea>페이지를 찾을 수 없어요 . . .</AppScreenWithSafeArea>;
 };
 export default NotFoundPage;
diff --git a/src/pages/PostPage.tsx b/src/pages/PostPage.tsx
@@ -1,13 +1,14 @@
 import type { ActivityComponentType } from '@stackflow/react';
-import { AppScreen } from '@stackflow/plugin-basic-ui';
 import { useFlow } from '@/libs/routes/stack';
 import { css } from '@styled-system/css';
 
+import AppScreenWithSafeArea from '@/common/components/AppScreenWithSafeArea';
+
 const PostPage: ActivityComponentType = () => {
   const { pop } = useFlow();
 
   return (
-    <AppScreen>
+    <AppScreenWithSafeArea>
       <button
         className={css({
           padding: '1rem',
@@ -19,7 +20,7 @@ const PostPage: ActivityComponentType = () => {
         뒤로가기
       </button>
       <div>테스트 테스트 포스트 페이지</div>
-    </AppScreen>
+    </AppScreenWithSafeArea>
   );
 };
 export default PostPage;
