Seo 관련 작업 (#50)

* feat: 구글 애널리틱스 추가

* feat: 사이트맵 작업

* feat: robots 파일 추가

* feat: metadata 작업
title, description 추가
og-image 추가

* chore: package 이름 변경

* chore: env 변경

* fix: 힌트 한글 엔터 입력시 2번 호출되는 에러 수정
nativeEvent.isComposing 이벤트 추가

.env.local.example

@@ -4,3 +4,6 @@ NEXT_PUBLIC_SUPABASE_URL=your-project-url
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
 NEXT_PUBLIC_CLIENT_ID=oauth-rest-api-key
 NEXT_PUBLIC_CLIENT_SECRET=client-secret-code
+NEXT_PUBLIC_GOOGLE_ID = google-analytics
+NEXT_PUBLIC_PROD_URL=prod-url
+NEXT_PUBLIC_BASE_URL=base-url

app/api/quizzes/[id]/route.ts

@@ -0,0 +1,22 @@
+import { cookies } from 'next/headers';
+import { createClient } from '@/utils/supabase/server';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  const { id } = params;
+
+  const cookieStore = cookies();
+  const supabase = createClient(cookieStore);
+
+  const { data: quiz } = await supabase
+    .from('quizzes')
+    .select('*')
+    .eq('id', id)
+    .limit(1)
+    .single();
+
+  return NextResponse.json({ quiz });
+}

app/api/quizzes/route.ts

@@ -0,0 +1,12 @@
+import { cookies } from 'next/headers';
+import { createClient } from '@/utils/supabase/server';
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  const cookieStore = cookies();
+  const supabase = createClient(cookieStore);
+
+  const { data: quizzes } = await supabase.from('quizzes').select('*');
+
+  return NextResponse.json({ quizzes });
+}

app/google-analytics.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import Script from 'next/script';
+import * as gtag from '../gtag.js';
+
+const GoogleAnalytics = () => {
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+      />
+      <Script
+        id="gtag-init"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${gtag.GA_TRACKING_ID}', {
+            page_path: window.location.pathname,
+          });
+        `,
+        }}
+      />
+    </>
+  );
+};
+
+export default GoogleAnalytics;

app/layout.tsx

@@ -3,6 +3,7 @@ import './globals.css';
 import QueryProvider from '@/providers/query-provider';
 import { PcScreen } from '@/components/pc-screen';
 import OverlayProvider from '@/providers/overlay-provider';
+import GoogleAnalytics from './google-analytics';
 
 const defaultUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
@@ -33,6 +34,7 @@ export default function RootLayout({
           </div>
         </body>
       </QueryProvider>
+      <GoogleAnalytics />
     </html>
   );
 }

app/quizzes/[id]/answers/layout.tsx

@@ -1,4 +1,3 @@
-import BackHeader from '@/components/common/headers/back-header';
 import React from 'react';
 
 type LayoutProps = {
@@ -8,8 +7,6 @@ type LayoutProps = {
 export default function Layout({ children }: LayoutProps) {
   return (
     <>
-      <BackHeader />
-
       <section className="p-4">{children}</section>
     </>
   );

app/quizzes/sitemap.ts

@@ -0,0 +1,31 @@
+import { type MetadataRoute } from 'next';
+
+async function getQuizzes(): Promise<
+  Database['public']['Tables']['quizzes']['Row'][]
+> {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/quizzes`);
+
+  const { quizzes } = await res.json();
+
+  return quizzes;
+}
+
+export async function generateSitemaps() {
+  const quizzes = await getQuizzes();
+
+  return quizzes.map((quiz) => ({
+    id: quiz.id,
+  }));
+}
+export default async function sitemap({
+  id,
+}: {
+  id: number;
+}): Promise<MetadataRoute.Sitemap> {
+  const quizzes = await getQuizzes();
+
+  return quizzes.map((quiz) => ({
+    url: `${process.env.NEXT_PUBLIC_PROD_URL}/quizzes/${id}`,
+    lastModified: quiz.updated_at,
+  }));
+}

app/quizzes/writer/_components/hints.tsx

@@ -57,7 +57,7 @@ export default function Hints({ form }: HintsProps) {
           placeholder="힌트를 입력해주세요"
           maxLength={formLiteral.hints.item.max.value}
           onKeyDown={(e) => {
-            if (e.key === 'Enter') {
+            if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
               e.preventDefault();
               addHint();
             }

app/robots.ts

@@ -0,0 +1,12 @@
+import { MetadataRoute } from 'next';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: '/private/',
+    },
+    sitemap: `${process.env.NEXT_PUBLIC_PROD_URL}/sitemap.xml`,
+  };
+}

app/sitemap.ts

@@ -0,0 +1,14 @@
+import { MetadataRoute } from 'next';
+
+const PROD_URL = process.env.NEXT_PUBLIC_PROD_URL;
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: `${PROD_URL}`,
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 1,
+    },
+  ];
+}

gtag.js

@@ -0,0 +1,15 @@
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ID;
+
+export const pageview = (url) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  });
+};
+
+export const event = ({ action, category, label, value }) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};