From 42b2d03165dec3b1494e537e5ae6e1c422c2cc71 Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Mon, 9 Oct 2023 11:44:56 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20head=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/HTMLHead/index.tsx | 84 +++++++++++++++++++ src/pages/_app.tsx | 65 +------------- .../ProjectDetailPage/ProjectDetailPage.tsx | 2 + 3 files changed, 88 insertions(+), 63 deletions(-) create mode 100644 src/components/common/HTMLHead/index.tsx diff --git a/src/components/common/HTMLHead/index.tsx b/src/components/common/HTMLHead/index.tsx new file mode 100644 index 00000000..c1b3558e --- /dev/null +++ b/src/components/common/HTMLHead/index.tsx @@ -0,0 +1,84 @@ +import Head from 'next/head'; + +interface HeadProps { + title?: string; + projectID?: string; + imageURL?: string; +} + +function HTMLHead(props: HeadProps) { + const { title, projectID, imageURL } = props; + + return ( + + SOPT + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Twitter */} + + + + + + + + {/* Open Graph */} + + + + + + + + + + ); +} + +export default HTMLHead; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index e56eab0b..333edd6b 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,11 +1,11 @@ import * as amplitude from '@amplitude/analytics-browser'; import type { AppProps } from 'next/app'; -import Head from 'next/head'; import { useRouter } from 'next/router'; import { Global, ThemeProvider } from '@emotion/react'; import { useEffect } from 'react'; import { useState } from 'react'; import { QueryClient, QueryClientProvider } from 'react-query'; +import HTMLHead from '@src/components/common/HTMLHead'; import GoogleTagManagerNoscript from '@src/components/googleTagManager/Noscript'; import GoogleTagManagerScript from '@src/components/googleTagManager/Script'; import * as gtm from '@src/components/googleTagManager/gtm'; @@ -33,68 +33,7 @@ function MyApp({ Component, pageProps }: AppProps) { return ( <> - - SOPT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* Open Graph */} - - - - - - - - - - {/* Twitter */} - - - - - - - + diff --git a/src/views/ProjectDetailPage/ProjectDetailPage.tsx b/src/views/ProjectDetailPage/ProjectDetailPage.tsx index 2c8dfef3..ad23f628 100644 --- a/src/views/ProjectDetailPage/ProjectDetailPage.tsx +++ b/src/views/ProjectDetailPage/ProjectDetailPage.tsx @@ -4,6 +4,7 @@ import { useRouter } from 'next/router'; import { useState } from 'react'; import { useQuery } from 'react-query'; import { ReactComponent as IToggle } from '@src/assets/images/toggle.svg'; +import HTMLHead from '@src/components/common/HTMLHead'; import PageLayout from '@src/components/common/PageLayout'; import { api } from '@src/lib/api'; import { ProjectLinkType } from '@src/lib/types/project'; @@ -49,6 +50,7 @@ function ProjectDetailPage() { return ( +