#161 SEO 적용

pknu-wap · Dec 14, 2023 · 4f0c96c · 4f0c96c
1 parent 2980bfb
commit 4f0c96c
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 20 deletions.
diff --git a/client/next.config.js b/client/next.config.js
@@ -20,15 +20,6 @@ const nextConfig = {
       },
     ],
   },
-  async redirects() {
-    return [
-      {
-        source: '/',
-        destination: '/collect',
-        permanent: true,
-      },
-    ];
-  },
 };
 
 module.exports = removeImports({

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -26,6 +26,7 @@
     "lottie-react": "^2.4.0",
     "next": "^14.0.3",
     "next-remove-imports": "^1.0.12",
+    "next-seo": "^6.4.0",
     "notistack": "^3.0.1",
     "picocolors": "^1.0.0",
     "react": "18.2.0",

diff --git a/client/public/assets/GLOG_LOGO.png b/client/public/assets/GLOG_LOGO.png
diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
@@ -49,6 +49,7 @@ import { AddLikeApi, DeleteWriteApi } from '@/api/write-api';
 import { enqueueSnackbar } from 'notistack';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import { postVisitApi } from '@/api/mypage-api';
+import SEO from '@/components/SEO';
 
 const page = ({ params }: { params: { blogName: string; categoryId: string; postId: string } }) => {
   const { data: blogIdData } = usegetblogIdQuery({ blogUrl: params.blogName });
@@ -176,6 +177,11 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
 
   return (
     <Stack>
+      <SEO
+        title={post?.title}
+        description={post?.content?.slice(0, 30)}
+        ogImage={{ url: post?.thumbnail ?? '', width: 1200, height: 630 }}
+      />
       <ThumbnailArea>
         <ImageContainer
           imageSrc={

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -5,15 +5,6 @@ import ThemeRegistry from '@/components/ReactQuery/ThemeRegistry';
 import ReactQuery from '@/components/ReactQuery/Provider';
 import Header from '@/components/Layout/Header';
 import FullLayout from '@/components/Layout/FullLayout';
-import { Metadata } from 'next';
-import Favicon from '/public/assets/yellowFootPrint.png';
-
-export const metadata: Metadata = {
-  title: 'GLOG',
-  description:
-    '개발자들을 위해 만들어진 블로그를 작성해보세요! 발자국 시스템, PR 시스템으로 블로그를 꾸준히 쓸 수 있도록 도와줍니다',
-  icons: [{ rel: 'icon', url: Favicon.src }],
-};
 
 export default function RootLayout(props: { children: ReactNode }) {
   const { children } = props;

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -1,7 +1,10 @@
-import React from 'react';
+import { useRouter } from 'next/navigation';
 
 function Collect() {
-  return <></>;
+  const router = useRouter();
+  router.replace('/i/flow/login');
+
+  return null;
 }
 
 export default Collect;
diff --git a/client/src/components/SEO.tsx b/client/src/components/SEO.tsx
@@ -0,0 +1,44 @@
+import Head from 'next/head';
+import { DefaultSeo } from 'next-seo';
+
+type SEOProps = {
+  title?: string;
+  description?: string;
+  ogImage?: {
+    url: string;
+    width: number;
+    height: number;
+  };
+};
+
+const SEO: React.FC<SEOProps> = ({ title, description, ogImage }: SEOProps) => {
+  const siteTitle = 'GLOG'; // 사이트 제목
+  const siteDescription =
+    '개발자들을 위해 만들어진 블로그를 작성해보세요! 발자국 시스템, PR 시스템으로 블로그를 꾸준히 쓸 수 있도록 도와줍니다.'; // 사이트 설명
+  const siteUrl = 'http://15.164.221.35:3000'; // 사이트 URL
+  const defaultOgImage = {
+    url: `${siteUrl}/GLOG_LOGO.png`,
+    width: 1200,
+    height: 630,
+  };
+
+  return (
+    <>
+      <DefaultSeo
+        title={title ? `${title} | ${siteTitle}` : siteTitle}
+        description={description || siteDescription}
+        canonical={siteUrl}
+        openGraph={{
+          url: siteUrl,
+          title: title || siteTitle,
+          description: description || siteDescription,
+          images: ogImage ? [ogImage] : [defaultOgImage],
+          site_name: siteTitle,
+        }}
+      />
+      <Head>{/* 추가적인 head 설정 */}</Head>
+    </>
+  );
+};
+
+export default SEO;