Merge pull request #184 from Nexters/develop

fix: HelmetProvider 위치 수정 및 컴포넌트 분리
Nexters · Sep 23, 2024 · a1bae02 · a1bae02
2 parents 476617a + 4432f83
commit a1bae02
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 34 deletions.
diff --git a/apps/preview/src/App.tsx b/apps/preview/src/App.tsx
@@ -4,6 +4,7 @@ import 'the-new-css-reset/css/reset.css';
 import { QueryClientProvider } from '@boolti/api';
 import { BooltiUIProvider } from '@boolti/ui';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
 
 import ShowPreviewPage from './pages/ShowPreviewPage/ShowPreviewPage';
 
@@ -18,7 +19,9 @@ const App = () => {
   return (
     <QueryClientProvider>
       <BooltiUIProvider>
-        <RouterProvider router={router} />
+        <HelmetProvider>
+          <RouterProvider router={router} />
+        </HelmetProvider>
       </BooltiUIProvider>
     </QueryClientProvider>
   );

diff --git a/apps/preview/src/components/Meta/index.tsx b/apps/preview/src/components/Meta/index.tsx
@@ -0,0 +1,37 @@
+import { Helmet } from 'react-helmet-async';
+
+interface Props {
+  title: string;
+  showId: string;
+}
+
+export const Meta = ({ title, showId }: Props) => {
+  return (
+    <Helmet>
+      <link rel="shortcut icon" href="https://preview.boolti.in/favicon.png" />
+
+      <title>{title}</title>
+      <link rel="canonical" href="https://preview.boolti.in" />
+      <meta name="description" content="지금 불티에서 핫한 공연 정보를 확인해 보세요." />
+
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={title} />
+      <meta property="og:site_name" content="손쉬운 예매 빠른 입장은 불티" />
+      <meta property="og:description" content="지금 불티에서 핫한 공연 정보를 확인해 보세요." />
+      <meta property="og:url" content={`https://preview.boolti.in/show/${showId}`} />
+      <meta property="og:image" content="https://preview.boolti.in/thumbnail.png" />
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="600" />
+
+      <meta property="twitter:card" content="summary_large_image" />
+      <meta property="twitter:domain" content="preview.boolti.in" />
+      <meta property="twitter:url" content={`https://preview.boolti.in/show/${showId}`} />
+      <meta property="twitter:title" content={title} />
+      <meta
+        property="twitter:description"
+        content="지금 불티에서 핫한 공연 정보를 확인해 보세요."
+      />
+      <meta property="twitter:image" content="/thumbnail.png" />
+    </Helmet>
+  );
+};
diff --git a/apps/preview/src/main.tsx b/apps/preview/src/main.tsx
@@ -1,9 +1,5 @@
 import ReactDOM from 'react-dom/client';
 
 import App from './App.tsx';
-import { HelmetProvider } from 'react-helmet-async';
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <HelmetProvider>
-    <App />
-  </HelmetProvider>,
-);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
diff --git a/apps/preview/src/pages/ShowPreviewPage/ShowPreviewPage.tsx b/apps/preview/src/pages/ShowPreviewPage/ShowPreviewPage.tsx
@@ -4,10 +4,10 @@ import { Footer, ShowPreview, useDialog } from '@boolti/ui';
 import { format, setDefaultOptions } from 'date-fns';
 import { ko } from 'date-fns/locale';
 import { QRCodeSVG } from 'qrcode.react';
-import { Helmet } from 'react-helmet-async';
 import { useParams } from 'react-router-dom';
 
 import Styled from './ShowPreviewPage.styles';
+import { Meta } from '../../components/Meta';
 
 setDefaultOptions({ locale: ko });
 
@@ -123,32 +123,7 @@ const ShowPreviewPage = () => {
 
   return (
     <>
-      <Helmet>
-        <link rel="shortcut icon" href="https://preview.boolti.in/favicon.png" />
-
-        <title>{title}</title>
-        <link rel="canonical" href="https://preview.boolti.in" />
-        <meta name="description" content="지금 불티에서 핫한 공연 정보를 확인해 보세요." />
-
-        <meta property="og:type" content="website" />
-        <meta property="og:title" content={title} />
-        <meta property="og:site_name" content="손쉬운 예매 빠른 입장은 불티" />
-        <meta property="og:description" content="지금 불티에서 핫한 공연 정보를 확인해 보세요." />
-        <meta property="og:url" content={`https://preview.boolti.in/show/${params.showId}`} />
-        <meta property="og:image" content="https://preview.boolti.in/thumbnail.png" />
-        <meta property="og:image:width" content="1200" />
-        <meta property="og:image:height" content="600" />
-
-        <meta property="twitter:card" content="summary_large_image" />
-        <meta property="twitter:domain" content="preview.boolti.in" />
-        <meta property="twitter:url" content={`https://preview.boolti.in/show/${params.showId}`} />
-        <meta property="twitter:title" content={title} />
-        <meta
-          property="twitter:description"
-          content="지금 불티에서 핫한 공연 정보를 확인해 보세요."
-        />
-        <meta property="twitter:image" content="/thumbnail.png" />
-      </Helmet>
+      {params.showId && <Meta title={title} showId={params.showId} />}
       <Styled.ShowPreviewPage>
         <Styled.ShowPreviewContainer>
           <Styled.Header>