Merge pull request #136 from geulDa/refactor/#135/web-app-accessibility

Refactor: web-app-accessibility 웹앱 공통 사이즈 적용

Author: skyblue1232

src/pages/_app.tsx

@@ -3,6 +3,7 @@ import '@/shared/icons';
 import { useState } from 'react';
 import type { AppProps } from 'next/app';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import AppLayout from '@/shared/layout/AppLayout';
 
 export default function App({ Component, pageProps }: AppProps) {
   const [queryClient] = useState(
@@ -13,12 +14,14 @@ export default function App({ Component, pageProps }: AppProps) {
             staleTime: 60 * 1000,
           },
         },
-      }),
+      })
   );
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Component {...pageProps} />
+      <AppLayout>
+        <Component {...pageProps} />
+      </AppLayout>
     </QueryClientProvider>
   );
 }

src/shared/layout/AppLayout.tsx

@@ -0,0 +1,7 @@
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="app-wrapper">
+      {children}
+    </div>
+  );
+}

src/styles/globals.css

@@ -13,6 +13,23 @@ html, body {
   font-family: var(--font-sans);
 }
 
+.app-wrapper {
+  width: 100%;
+  max-width: 402px; 
+  margin: 0 auto;          
+  position: relative;  
+  min-height: 100vh;
+  background: var(--background);
+  overflow-x: hidden;  
+  transform: translateZ(0);
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .app-wrapper {
+    width: 100%;
+    max-width: none;
+  }
+}
 
 @theme {
      /* 메인컬러(MAIN) → mint */