[Chore/BAR-263] Google Analytics 설정 (#85)

* chore: GA 설정 * refactor: SEO 컴포넌트 분리
YAPP-Github · Mar 24, 2024 · 6f47191 · 6f47191
1 parent 3e352f2
commit 6f47191
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "template": "plop"
   },
   "dependencies": {
+    "@next/third-parties": "^14.1.0",
     "@storybook/addon-actions": "^7.6.10",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query": "^5.17.9",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,35 +1,25 @@
 import type { AppProps } from 'next/app';
-import Head from 'next/head';
 
 import 'react-notion-x/src/styles.css';
 import '@styles/global.css';
 
 import Modal from '@components/Modal';
 import TanstackQueryProvider from '@components/Providers/TanstackQueryProvider';
+import SEO from '@components/SEO';
 import Toast from '@components/Toast';
+import { GoogleAnalytics } from '@next/third-parties/google';
 
 const App = ({ Component, pageProps }: AppProps) => {
   return (
-    <TanstackQueryProvider dehydratedState={pageProps.dehydratedState}>
-      <Head>
-        <link rel="icon" href="/favicon.ico" />
-        <meta name="description" content="바로 잡아 바로 쓰는, 바로" />
-        <meta name="keyword" content="baro 바로" />
-        <meta property="og:type" content="website" />
-        <meta property="og:url" content="https://ba-ro.co.kr" />
-        <meta property="og:title" content="바로" />
-        <meta
-          property="og:image"
-          content="https://image.ba-ro.co.kr/ba-ro.png"
-        />
-        <meta property="og:description" content="바로 잡아 바로 쓰는, 바로" />
-        <meta property="og:site_name" content="baro" />
-        <title>바로 잡아 바로 쓰는, 바로</title>
-      </Head>
-      <Component {...pageProps} />
-      <Toast />
-      <Modal />
-    </TanstackQueryProvider>
+    <>
+      <SEO />
+      <TanstackQueryProvider dehydratedState={pageProps.dehydratedState}>
+        <Component {...pageProps} />
+        <Toast />
+        <Modal />
+        <GoogleAnalytics gaId="G-FE8WVNGY6S" />
+      </TanstackQueryProvider>
+    </>
   );
 };
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/SEO/index.tsx b/src/components/SEO/index.tsx
@@ -0,0 +1,36 @@
+import Head from 'next/head';
+
+const META = {
+  TITLE: '바로 잡아 바로 쓰는, 바로',
+  OG_TITLE: '바로',
+  DESCRIPTION: '바로 잡아 바로 쓰는, 바로',
+  URL: 'https://ba-ro.co.kr',
+  KEYWORD: 'baro 바로',
+  IMAGE: 'https://image.ba-ro.co.kr/ba-ro.png',
+  TYPE: 'website',
+  SITE_NAME: 'baro',
+};
+
+const SEO = () => {
+  return (
+    <Head>
+      <title>{META.TITLE}</title>
+      <link rel="icon" href="/favicon.ico" />
+
+      <meta name="description" content={META.DESCRIPTION} />
+      <meta name="keyword" content={META.KEYWORD} />
+      <meta property="og:type" content={META.TYPE} />
+      <meta property="og:url" content={META.URL} />
+      <meta property="og:title" content={META.OG_TITLE} />
+      <meta property="og:description" content={META.DESCRIPTION} />
+      <meta property="og:image" content={META.IMAGE} />
+      <meta property="og:site_name" content={META.SITE_NAME} />
+
+      <meta name="twitter:title" content={META.OG_TITLE} />
+      <meta name="twitter:description" content={META.DESCRIPTION} />
+      <meta name="twitter:image" content={META.IMAGE} />
+    </Head>
+  );
+};
+
+export default SEO;