Merge pull request #178 from Nexters/develop

fix: name -> property 변경 및 HelmetProvider를 더 상위로 이동
Nexters · Sep 23, 2024 · 40fe0d1 · 40fe0d1
2 parents 91ea8bd + a9fd4e5
commit 40fe0d1
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 32 deletions.
diff --git a/apps/admin/index.html b/apps/admin/index.html
@@ -8,17 +8,17 @@
     <meta property="og:title" content="핫한 공연 예매의 시작, 불티" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="핫한 공연 예매의 시작, 불티" />
-    <meta name="og:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
+    <meta property="og:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
     <meta property="og:url" content="https://boolti.in/" />
     <meta property="og:image" content="https://boolti.in/thumbnail.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="600" />
-    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:domain" content="boolti.in" />
     <meta property="twitter:url" content="https://boolti.in/" />
-    <meta name="twitter:title" content="핫한 공연 예매의 시작, 불티" />
-    <meta name="twitter:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
-    <meta name="twitter:image" content="/thumbnail.png" />
+    <meta property="twitter:title" content="핫한 공연 예매의 시작, 불티" />
+    <meta property="twitter:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
+    <meta property="twitter:image" content="/thumbnail.png" />
     <link rel="canonical" href="https://boolti.in/" />
     <title>핫한 공연 예매의 시작, 불티</title>
     <script

diff --git a/apps/preview/src/App.tsx b/apps/preview/src/App.tsx
@@ -6,7 +6,6 @@ import { BooltiUIProvider } from '@boolti/ui';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import ShowPreviewPage from './pages/ShowPreviewPage/ShowPreviewPage';
-import { HelmetProvider } from 'react-helmet-async';
 
 const router = createBrowserRouter([
   {
@@ -17,13 +16,11 @@ const router = createBrowserRouter([
 
 const App = () => {
   return (
-    <HelmetProvider>
-      <QueryClientProvider>
-        <BooltiUIProvider>
-          <RouterProvider router={router} />
-        </BooltiUIProvider>
-      </QueryClientProvider>
-    </HelmetProvider>
+    <QueryClientProvider>
+      <BooltiUIProvider>
+        <RouterProvider router={router} />
+      </BooltiUIProvider>
+    </QueryClientProvider>
   );
 };
 

diff --git a/apps/preview/src/main.tsx b/apps/preview/src/main.tsx
@@ -1,5 +1,9 @@
 import ReactDOM from 'react-dom/client';
 
 import App from './App.tsx';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
+import { HelmetProvider } from 'react-helmet-async';
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <HelmetProvider>
+    <App />
+  </HelmetProvider>,
+);
diff --git a/apps/preview/src/pages/ShowPreviewPage/ShowPreviewPage.tsx b/apps/preview/src/pages/ShowPreviewPage/ShowPreviewPage.tsx
@@ -123,24 +123,30 @@ 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:title" content={title} data-react-helmet="true" />
+
         <meta property="og:type" content="website" />
-        <link rel="shortcut icon" href="https://preview.boolti.in/favicon.png" />
+        <meta property="og:title" content={title} data-react-helmet="true" />
         <meta property="og:site_name" content="손쉬운 예매 빠른 입장은 불티" />
-        <meta name="og:description" content="지금 불티에서 핫한 공연 정보를 확인해 보세요." />
-        <meta property="og:url" content="https://boolti.in/" />
+        <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 name="twitter:card" content="summary_large_image" />
-        <meta property="twitter:domain" content="boolti.in" />
-        <meta property="twitter:url" content="https://boolti.in/" />
-        <meta name="twitter:title" content={title} data-react-helmet="true" />
-        <meta name="twitter:description" content="지금 불티에서 핫한 공연 정보를 확인해 보세요." />
-        <meta name="twitter:image" content="/thumbnail.png" />
-        <link rel="canonical" href="https://boolti.in/" />
-        <title>{title}</title>
+
+        <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} data-react-helmet="true" />
+        <meta
+          property="twitter:description"
+          content="지금 불티에서 핫한 공연 정보를 확인해 보세요."
+        />
+        <meta property="twitter:image" content="/thumbnail.png" />
       </Helmet>
       <Styled.ShowPreviewPage>
         <Styled.ShowPreviewContainer>

diff --git a/apps/super-admin/index.html b/apps/super-admin/index.html
@@ -8,17 +8,17 @@
     <meta property="og:title" content="핫한 공연 예매의 시작, 불티" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="핫한 공연 예매의 시작, 불티" />
-    <meta name="og:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
+    <meta property="og:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
     <meta property="og:url" content="https://boolti.in/" />
     <meta property="og:image" content="https://boolti.in/thumbnail.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="600" />
-    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:domain" content="boolti.in" />
     <meta property="twitter:url" content="https://boolti.in/" />
-    <meta name="twitter:title" content="핫한 공연 예매의 시작, 불티" />
-    <meta name="twitter:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
-    <meta name="twitter:image" content="/thumbnail.png" />
+    <meta property="twitter:title" content="핫한 공연 예매의 시작, 불티" />
+    <meta property="twitter:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
+    <meta property="twitter:image" content="/thumbnail.png" />
     <link rel="canonical" href="https://boolti.in/" />
     <title>핫한 공연 예매의 시작, 불티</title>
   </head>