Enhance viewport configuration management in layout.tsx

- Add `Viewport` type to the metadata and define a `viewport` object with properties for `width` and `initialScale`. This structured approach facilitates the centralized management of viewport settings, which were previously hardcoded in the HTML. - Remove the static HTML viewport meta tag from the `<head>` section and prepare for dynamic insertion based on the TypeScript configuration. This adjustment allows for more flexible management of viewport settings directly from TypeScript, enhancing maintainability and consistency across different parts of the application. These changes improve the application's scalability and maintainability by centralizing configuration management within TypeScript, allowing easier updates and consistency.
Team-Crops · Jul 14, 2024 · 594a9d4 · 594a9d4
1 parent 7afb589
commit 594a9d4
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,19 +7,21 @@ import { LoginPopup } from '#/components/templates/LoginPopup';
 import './globals.css';
 import { SignupGuard } from './signup-guard';
 
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 
 export const metadata: Metadata = {
   title: 'F-IT',
   description: '사이드 프로젝트를 위한 랜덤 팀 매칭/추천 서비스, F-IT',
 };
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1.0,
+};
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      </head>
       <body>
         <SignupGuard />
         <LoginPopup />