From 66ea7f59f0d2e7f500142ff0f3ff4d45eafe1bc8 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Mon, 5 Aug 2024 23:39:28 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20MetaTag=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/commons/meta/MetaTag.tsx | 23 +++++++++++++++++++++++
 src/pages/gig/Gig.tsx                   | 22 +++++++---------------
 2 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 src/components/commons/meta/MetaTag.tsx

diff --git a/src/components/commons/meta/MetaTag.tsx b/src/components/commons/meta/MetaTag.tsx
new file mode 100644
index 00000000..89468f16
--- /dev/null
+++ b/src/components/commons/meta/MetaTag.tsx
@@ -0,0 +1,23 @@
+import { Helmet } from "react-helmet-async";
+
+interface MetaTagProps {
+  title: string;
+  description: string;
+  image: string;
+  url?: string;
+}
+
+const MetaTag = ({ title, description, image, url }: MetaTagProps) => {
+  return (
+    <Helmet>
+      <title>{title}</title>
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={image} />
+      <meta name="keywords" content={`공연, 밴드, 뮤지컬, 비트, beat, ${title}`} />
+      {url && <meta property="og:url" content={url} />}
+    </Helmet>
+  );
+};
+
+export default MetaTag;
diff --git a/src/pages/gig/Gig.tsx b/src/pages/gig/Gig.tsx
index fc9b7084..2e0ff34c 100644
--- a/src/pages/gig/Gig.tsx
+++ b/src/pages/gig/Gig.tsx
@@ -15,7 +15,7 @@ import Content from "./components/content/Content";
 import ShowInfo from "./components/showInfo/ShowInfo";
 import { SHOW_TYPE_KEY } from "./constants";
 import * as S from "./Gig.styled";
-import { Helmet } from "react-helmet-async";
+import MetaTag from "@components/commons/meta/MetaTag";
 
 const Gig = () => {
   const navigate = useNavigate();
@@ -62,20 +62,12 @@ const Gig = () => {
 
   return (
     <S.ContentWrapper>
-      <Helmet>
-        <title>{data?.performanceTitle}</title>
-        <meta property="og:title" content={data?.performanceTitle} />
-        <meta
-          property="og:description"
-          content={`${data?.performanceTitle} - 심장이 뛰는 공연, BEAT에서 만나보세요.`}
-        />
-        <meta property="og:image" content={data?.posterImage} />
-        <meta
-          name="keywords"
-          content={`공연, 밴드, 뮤지컬, 비트, beat, ${data?.performanceTitle}`}
-        />
-        <meta property="og:url" content={`https://www.beatlive.kr/gig/${performanceId}`} />
-      </Helmet>
+      <MetaTag
+        title={data?.performanceTitle}
+        description={`${data?.performanceTitle} - 심장이 뛰는 공연, BEAT에서 만나보세요.`}
+        image={data?.posterImage}
+        url={`https://www.beatlive.kr/gig/${performanceId}`}
+      />
       <ShowInfo
         posterImage={data?.posterImage ?? ""}
         genre={data?.genre as SHOW_TYPE_KEY}