Merge pull request #171 from Nexters/feat/og

feat: 오픈 그래프 관련 변경사항 반영 및 옵셔널 체이닝 제거
Nexters · Sep 23, 2024 · 4cf2dfc · 4cf2dfc
2 parents e085b28 + 6f2ebea
commit 4cf2dfc
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 137 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/apps/admin/index.html b/apps/admin/index.html
@@ -4,32 +4,23 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="shortcut icon" href="https://boolti.in/favicon.png" />
-    <meta
-      name="description"
-      content="핫한 공연 예매의 시작, 불티 지금 티켓을 구매하고 공연을 즐겨보세요."
-    />
-    <meta property="og:title" content="손쉬운 예매 빠른 입장은 불티" />
+    <meta name="description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
+    <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:site_name" content="핫한 공연 예매의 시작, 불티" />
+    <meta name="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: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:title" content="핫한 공연 예매의 시작, 불티" />
+    <meta name="twitter:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
     <meta name="twitter:image" content="/thumbnail.png" />
     <link rel="canonical" href="https://boolti.in/" />
-    <title>손쉬운 예매 빠른 입장은 불티</title>
+    <title>핫한 공연 예매의 시작, 불티</title>
     <script
       src="https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js"
       integrity="sha384-6MFdIr0zOira1CHQkedUqJVql0YtcZA1P0nbPrQYJXVJZUkTk/oX4U9GhUIs3/z8"

diff --git a/apps/preview/index.html b/apps/preview/index.html
@@ -1,16 +1,23 @@
 <!doctype html>
 <html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="https://preview.boolti.in/favicon.png" />
+    <meta name="description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="핫한 공연 예매의 시작, 불티" />
+    <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="preview.boolti.in" />
+    <meta name="twitter:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
+    <meta name="twitter:image" content="/thumbnail.png" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="shortcut icon" href="https://boolti.in/favicon.png" />
-  <title>손쉬운 예매 빠른 입장은 불티</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/apps/preview/package.json b/apps/preview/package.json
@@ -21,7 +21,7 @@
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-router-dom": "^6.22.3",
     "the-new-css-reset": "^1.11.2"
   },

diff --git a/apps/preview/public/favicon.png b/apps/preview/public/favicon.png
diff --git a/apps/preview/public/thumbnail.png b/apps/preview/public/thumbnail.png
diff --git a/apps/preview/public/vite.svg b/apps/preview/public/vite.svg
diff --git a/apps/preview/src/App.tsx b/apps/preview/src/App.tsx
@@ -6,6 +6,7 @@ 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([
   {
@@ -16,11 +17,13 @@ const router = createBrowserRouter([
 
 const App = () => {
   return (
-    <QueryClientProvider>
-      <BooltiUIProvider>
-        <RouterProvider router={router} />
-      </BooltiUIProvider>
-    </QueryClientProvider>
+    <HelmetProvider>
+      <QueryClientProvider>
+        <BooltiUIProvider>
+          <RouterProvider router={router} />
+        </BooltiUIProvider>
+      </QueryClientProvider>
+    </HelmetProvider>
   );
 };
 

diff --git a/apps/preview/src/pages/ShowPreviewPage/ShowPreviewPage.tsx b/apps/preview/src/pages/ShowPreviewPage/ShowPreviewPage.tsx
@@ -4,7 +4,7 @@ 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';
+import { Helmet } from 'react-helmet-async';
 import { Navigate, useParams } from 'react-router-dom';
 
 import Styled from './ShowPreviewPage.styles';
@@ -50,20 +50,26 @@ const BooltiGrayLogo = () => (
 
 const ShowPreviewPage = () => {
   const params = useParams<{ showId: string }>();
-  const { data } = useShowPreview(Number(params.showId));
+  const { isLoading, data } = useShowPreview(Number(params.showId));
   const dialog = useDialog();
 
   const dynamicLink = `https://boolti.page.link/?link=https://preview.boolti.in/show/${params.showId}&apn=com.nexters.boolti&ibi=com.nexters.boolti&isi=6476589322`;
 
-  if (params === undefined || Number.isNaN(Number(params.showId))) {
+  if (isLoading) {
+    return null;
+  }
+
+  if (params === undefined || Number.isNaN(Number(params.showId)) || !data) {
     return <Navigate to="https://boolti.in" replace />;
   }
 
+  const { name: title, notice: text } = data;
+
   const shareButtonClickHandler = async () => {
     try {
       await navigator.share({
-        title: data?.name ?? '',
-        text: data?.notice ?? '',
+        title,
+        text,
         url: dynamicLink,
       });
     } catch (error) {
@@ -104,38 +110,23 @@ const ShowPreviewPage = () => {
   return (
     <>
       <Helmet>
-        <meta
-          name="description"
-          content="핫한 공연 예매의 시작, 불티 지금 티켓을 구매하고 공연을 즐겨보세요."
-        />
-        <meta
-          property="og:title"
-          content={data?.name ? `${data.name} - 불티` : '손쉬운 예매 빠른 입장은 불티'}
-        />
+        <meta name="description" content="지금 불티에서 핫한 공연 정보를 확인해 보세요." />
+        <meta property="og:title" content={title} />
         <meta property="og:type" content="website" />
         <meta property="og:site_name" content="손쉬운 예매 빠른 입장은 불티" />
-        <meta
-          name="og:description"
-          content="핫한 공연 예매의 시작, 불티 지금 티켓을 구매하고 공연을 즐겨보세요."
-        />
+        <meta name="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:domain" content="boolti.in" />
         <meta property="twitter:url" content="https://boolti.in/" />
-        <meta
-          name="twitter:title"
-          content={data?.name ? `${data.name} - 불티` : '손쉬운 예매 빠른 입장은 불티'}
-        />
-        <meta
-          name="twitter:description"
-          content="핫한 공연 예매의 시작, 불티 지금 티켓을 구매하고 공연을 즐겨보세요."
-        />
+        <meta name="twitter:title" content={title} />
+        <meta name="twitter:description" content="지금 불티에서 핫한 공연 정보를 확인해 보세요." />
         <meta name="twitter:image" content="/thumbnail.png" />
         <link rel="canonical" href="https://boolti.in/" />
-        <title>{data?.name ? `${data.name} - 불티` : '손쉬운 예매 빠른 입장은 불티'}</title>
+        <title>{title}</title>
       </Helmet>
       <Styled.ShowPreviewPage>
         <Styled.ShowPreviewContainer>
@@ -149,23 +140,23 @@ const ShowPreviewPage = () => {
           </Styled.Header>
           <ShowPreview
             show={{
-              images: data?.showImg.map((file) => file.path) ?? [],
-              name: data?.name ?? '',
-              date: data?.date ? format(new Date(data.date), 'yyyy.MM.dd (E)') : '',
-              startTime: data?.date ? format(new Date(data.date), 'HH:mm') : '',
-              runningTime: data?.runningTime ? `${data.runningTime}` : '',
-              salesStartTime: data?.salesStartTime
+              images: data.showImg.map((file) => file.path) ?? [],
+              name: data.name ?? '',
+              date: data.date ? format(new Date(data.date), 'yyyy.MM.dd (E)') : '',
+              startTime: data.date ? format(new Date(data.date), 'HH:mm') : '',
+              runningTime: data.runningTime ? `${data.runningTime}` : '',
+              salesStartTime: data.salesStartTime
                 ? format(new Date(data.salesStartTime), 'yyyy.MM.dd (E)')
                 : '',
-              salesEndTime: data?.salesEndTime
+              salesEndTime: data.salesEndTime
                 ? format(new Date(data.salesEndTime), 'yyyy.MM.dd (E)')
                 : '',
-              placeName: data?.placeName ?? '',
-              placeStreetAddress: data?.streetAddress ?? '',
-              placeDetailAddress: data?.detailAddress ?? '',
-              notice: data?.notice ?? '',
-              hostName: data?.hostName ?? '',
-              hostPhoneNumber: data?.hostPhoneNumber ?? '',
+              placeName: data.placeName ?? '',
+              placeStreetAddress: data.streetAddress ?? '',
+              placeDetailAddress: data.detailAddress ?? '',
+              notice: data.notice ?? '',
+              hostName: data.hostName ?? '',
+              hostPhoneNumber: data.hostPhoneNumber ?? '',
             }}
             onClickLink={reservationButtonClickHandler}
             onClickLinkMobile={reservationButtonMobileClickHandler}

diff --git a/apps/super-admin/index.html b/apps/super-admin/index.html
@@ -4,26 +4,23 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="shortcut icon" href="https://boolti.in/favicon.png" />
-    <meta name="description"
-      content="핫한 공연 예매의 시작, 불티 지금 티켓을 구매하고 공연을 즐겨보세요." />
-    <meta property="og:title" content="손쉬운 예매 빠른 입장은 불티" />
+    <meta name="description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
+    <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:site_name" content="핫한 공연 예매의 시작, 불티" />
+    <meta name="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: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:title" content="핫한 공연 예매의 시작, 불티" />
+    <meta name="twitter:description" content="지금 불티에서 당신의 공연을 시작해 보세요." />
     <meta name="twitter:image" content="/thumbnail.png" />
     <link rel="canonical" href="https://boolti.in/" />
-    <title>손쉬운 예매 빠른 입장은 불티</title>
+    <title>핫한 공연 예매의 시작, 불티</title>
   </head>
   <body>
     <div id="root"></div>