react-helmet ⛑️

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^7.1.0",
+    "@types/react-helmet": "^6.1.11",
     "axios": "^1.7.9",
     "chart.js": "^4.4.7",
     "customize-cra": "^1.0.0",
@@ -12,6 +13,8 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-router-dom": "^7.0.2",
     "styled-components": "^6.1.13"
   },

public/index.html

@@ -7,12 +7,6 @@
     <meta name="description" content="링크메리와 함께 결혼 준비의 시작을 더욱 특별하게. 이제, 종이 청첩장 대신 스마트폰으로 간편하고 빠르게 초대장을 보내보세요"/>
     <meta name="theme-color" content="#000000"/>
 
-    <meta property="og:title" content="링크메리"/>
-    <meta property="og:description" content="링크메리와 함께 결혼 준비의 시작을 더욱 특별하게. 이제, 종이 청첩장 대신 스마트폰으로 간편하고 빠르게 초대장을 보내보세요"/>
-    <meta property="og:image" content="/logo512"/>
-    <meta property="og:url" content="https://www.linkmarry.com/"/>
-    <meta property="og:type" content="website"/>
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.tsx

@@ -19,6 +19,7 @@ import {dummyWedding} from "@remote/value/Wedding";
 import TemplatesPage from "@page/templates/TemplatesPage";
 import GlobalStyle from "@src/GlobalStyle";
 import WeddingPage from "@page/WeddingPage";
+import {Helmet} from "react-helmet";
 
 const {Kakao} = window as any;
 
@@ -31,8 +32,17 @@ function App() {
     }, []);
 
     return (
-        <Router>
+        <>
             <GlobalStyle/>
+            <Helmet>
+                <meta property="og:title" content="링크메리"/>
+                <meta property="og:description"
+                      content="링크메리와 함께 결혼 준비의 시작을 더욱 특별하게. 이제, 종이 청첩장 대신 스마트폰으로 간편하고 빠르게 초대장을 보내보세요"/>
+                <meta property="og:image" content="/logo512"/>
+                <meta property="og:url" content="https://www.linkmarry.com/"/>
+                <meta property="og:type" content="website"/>
+                <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
+            </Helmet>
             <Routes>
                 {/*service*/}
                 <Route path={'login/oauth2/code/kakao'} element={<KakaoRedirectPage/>}/>
@@ -69,7 +79,7 @@ function App() {
                     </div>
                 )}/>
             </Routes>
-        </Router>
+        </>
     );
 }
 

src/component/template/TemplateComponent.tsx

@@ -19,6 +19,7 @@ import InvitationLetterTemplate, {
 import RsvpDialog from "@src/component/template/dialog/rsvp/RsvpDialog";
 import Cookies from "js-cookie";
 import CreateRsvpDialog from "@src/component/template/dialog/rsvp/CreateRsvpDialog";
+import {Helmet} from "react-helmet";
 
 interface Template1Props {
     wedding: Wedding;
@@ -75,6 +76,12 @@ function TemplateComponent(
 
     return (
         <S.container ref={rootRef} $templateFont={templateFont}>
+            <Helmet>
+                <meta property={'og:title'} content={wedding.linkShare.urlTitle}/>
+                <meta property={'og:description'} content={wedding.linkShare.urlContent}/>
+                <meta property={'og:image'} content={wedding.linkShare.urlImg}/>
+                <title>{wedding.linkShare.urlTitle}</title>
+            </Helmet>
             <PreviewTemplate
                 template={wedding.template}
                 baseInfo={wedding.baseInfo}

src/index.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from '@src/App';
+import {HelmetProvider} from "react-helmet-async";
+import {BrowserRouter} from "react-router-dom";
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );
 root.render(
-    <App/>
+    <BrowserRouter>
+        <HelmetProvider>
+            <App/>
+        </HelmetProvider>
+    </BrowserRouter>
 );