refactor: NavigationSchemaScript 컴포넌트 분리

prgrms-web-devcourse · Jul 11, 2024 · c081e23 · c081e23
1 parent 98fa30f
commit c081e23
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,15 +1,13 @@
 import type { Metadata } from 'next';
 
-import {
-  appleSplashScreens,
-  navigationSchemaItems,
-} from '@/constants/metadata';
+import { appleSplashScreens } from '@/constants/metadata';
 
 import GoogleAnalytics from '@/components/common/GoogleAnalytics';
 import AuthFailedErrorBoundary from '@/components/common/AuthFailedErrorBoundary';
 import PWAServiceWorkerProvider from '@/components/common/PWAServiceWorkerProvider';
 import ReactQueryProvider from '@/components/common/ReactQueryProvider';
 import ToastProvider from '@/components/common/Toast/ToastProvider';
+import NavigationSchemaScript from '@/components/common/NavigationSchemaScript';
 import Layout from '@/components/layout/Layout';
 
 import { LineSeedKR } from '@/styles/font';
@@ -41,12 +39,6 @@ export const metadata: Metadata = {
   },
 };
 
-const navigationSchema = {
-  '@context': 'https://schema.org',
-  '@type': 'ItemList',
-  itemListElement: navigationSchemaItems,
-};
-
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="ko">
@@ -61,10 +53,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
             </ReactQueryProvider>
           </ToastProvider>
         </PWAServiceWorkerProvider>
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(navigationSchema) }}
-        />
+        <NavigationSchemaScript />
       </body>
     </html>
   );

diff --git a/src/components/common/NavigationSchemaScript.tsx b/src/components/common/NavigationSchemaScript.tsx
@@ -0,0 +1,21 @@
+import Script from 'next/script';
+
+import { navigationSchemaItems } from '@/constants/metadata/schema';
+
+const navigationSchema = {
+  '@context': 'https://schema.org',
+  '@type': 'ItemList',
+  itemListElement: navigationSchemaItems,
+};
+
+const NavigationSchemaScript = () => {
+  return (
+    <Script
+      id="navigation-schema"
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(navigationSchema) }}
+    />
+  );
+};
+
+export default NavigationSchemaScript;