[🚨 fix] viewport meta 경고 해결을 위한 태그 위치 이동

- Warning: viewport meta tags should not be used in _document.js's <Head>. https://nextjs.org/docs/messages/no-document-viewport-meta - viewport를 _document.js 에서 작성하는 경우 예상치 못한 결과를 얻을 수 있으니 _app.js 에서 작성하길 권장
Senity-Waved · Apr 21, 2024 · 3cf8a6e · 3cf8a6e
1 parent 428ceba
commit 3cf8a6e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useState, useEffect } from 'react';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useRouter } from 'next/router';
+import Head from 'next/head';
 import Script from 'next/script';
 import theme from '@/styles/theme';
 import global from '@/styles/global';
@@ -36,6 +37,12 @@ export default function App({ Component, pageProps }: AppProps) {
           <Global styles={global} />
           {process.env.NODE_ENV === 'production' && (
             <>
+              <Head>
+                <meta
+                  name="viewport"
+                  content="width=device-width, initial-scale=1, viewport-fit=cover"
+                />
+              </Head>
               <Script
                 strategy="afterInteractive"
                 src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -6,10 +6,6 @@ export default function Document() {
   return (
     <Html lang="ko">
       <Head>
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1, viewport-fit=cover"
-        />
         <meta property="og:image" content="/app-assets/og-image.png" />
         <meta name="theme-color" content={color.WHITE} />
         <meta name="msapplication-TileColor" content={color.NORMAL} />