Skip to content

Commit

Permalink
style: 공통 컴포넌트 MetaTag로 분리
Browse files Browse the repository at this point in the history
  • Loading branch information
imddoy committed Aug 5, 2024
1 parent 18dc3eb commit 66ea7f5
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 15 deletions.
23 changes: 23 additions & 0 deletions src/components/commons/meta/MetaTag.tsx
Original file line number Diff line number Diff line change
@@ -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;
22 changes: 7 additions & 15 deletions src/pages/gig/Gig.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 66ea7f5

Please sign in to comment.