⭐ feat : React-Helmet 적용

- title만 동적으로 바뀐다. 메타태그는 동적으로 바뀌지 않음을 볼 수 있다.

.eslintignore

@@ -0,0 +1,6 @@
+/build/*.js
+/config/*.js
+/bower_components/foo/*.js
+!.build
+.build/*
+!.build/test.js

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+.build
 
 # misc
 .DS_Store

package.json

@@ -13,8 +13,10 @@
     "@types/react-dom": "^18.0.8",
     "axios": "0.27.2",
     "dotenv": "^16.0.3",
+    "gatsby": "^4.24.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.6",

src/App.js

@@ -2,14 +2,20 @@ import GlobalStyle from './styles/GlobalStyle';
 import { Reset } from 'styled-reset';
 import Router from './router/Routers';
 import CarListProvider from './context/CarListProvider';
+import { Helmet } from 'react-helmet-async';
 
 function App() {
   return (
-    <CarListProvider>
-      <Reset />
-      <GlobalStyle />
-      <Router />
-    </CarListProvider>
+    <>
+      <Helmet>
+        <title>B2C Car Sharing</title>
+      </Helmet>
+      <CarListProvider>
+        <Reset />
+        <GlobalStyle />
+        <Router />
+      </CarListProvider>
+    </>
   );
 }
 

src/components/metaTag/SEOMetaTag.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { useLocation } from 'react-router-dom';
+import { convertAmount } from '../../utils/function/convertAmount';
+
+const SEOMetaTag = () => {
+  const { state } = useLocation();
+  if (state)
+    return (
+      <Helmet>
+        <title>{`${state.attribute.brand} ${state.attribute.name}`}</title>
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content={`${state.attribute.brand} ${state.attribute.name}`} />
+        <meta property="og:description" content={`월 ${convertAmount(state.amount)} 원`} />
+        <meta property="og:image" content={state.attribute.imageUrl} />
+
+        <link rel="canonical" href={state.url} />
+      </Helmet>
+    );
+};
+
+export default SEOMetaTag;

src/index.js

@@ -3,9 +3,13 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import { ThemeProvider } from 'styled-components';
 import theme from './styles/theme';
+import { HelmetProvider } from 'react-helmet-async';
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <ThemeProvider theme={theme}>
-    <App />
+    <HelmetProvider>
+      <App />
+    </HelmetProvider>
   </ThemeProvider>
 );