Merge pull request #505 from Mile-Writings/feat/#500/dynamicOGImage

[ Feat/#500 ] meta tag og data dynamic 생성

.babelrc

@@ -1,14 +1,18 @@
 {
   "plugins": [
+    "@babel/plugin-proposal-optional-chaining",
     [
       "@emotion",
       {
-        // sourceMap is on by default but source maps are dead code eliminated in production
         "sourceMap": true,
         "autoLabel": "dev-only",
-        // "labelFormat": "[filename]--[local]",
+
         "cssPropOptimization": true
       }
     ]
   ]
+  // "presets": [
+  //   ["@babel/preset-env", { "targets": { "esmodules": true } }], // ESModules 지원
+  //   "@babel/preset-react" // React 지원
+  // ]
 }

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+build
 
 # Editor directories and files
 .vscode/*
@@ -24,4 +25,5 @@ dist-ssr
 *.sw?
 .env
 
+
 stats.html

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/assets/svgs/faviconMile.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="og:title" content="마일 | 글쓰기 모임 | 블로그" />
+    <!-- <meta property="og:title" content="마일 | 글쓰기 모임 | 블로그" />
     <meta
       property="og:description"
       content="오직 글쓰기 모임을 위한 블로그, 마일에서 모임원들과 함께 글을 쓰며 여러분 만의 공간을 만들어보세요"
@@ -16,7 +16,7 @@
     <meta property="og:url" content="https://www.milewriting.com/" />
     <meta property="og:type" content="website" />
     <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
+    <meta property="og:image:height" content="630" /> -->
 
     <link
       rel="stylesheet"

package.json

@@ -9,7 +9,20 @@
     "lint": "eslint './**/*.{ts,tsx,js,jsx}'",
     "lint:fix": "eslint --fix './**/*.{ts,tsx,js,jsx}'",
     "lint:styled": "stylelint './src/**/*.{ts,tsx,js,jsx}' --fix",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "postbuild": "react-snap"
+  },
+  "reactSnap": {
+    "source": "build",
+    "inlineCss": true,
+    "puppeteerArgs": [
+      "--no-sandbox"
+    ],
+    "destination": "build",
+    "include": [
+      "/",
+      "/detail"
+    ]
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
@@ -31,20 +44,25 @@
     "@tiptap/react": "^2.2.3",
     "@tiptap/starter-kit": "^2.2.3",
     "@types/react-slick": "^0.23.13",
+    "@vitejs/plugin-legacy": "^6.0.0",
     "axios": "^1.6.5",
     "emotion-reset": "^3.0.1",
     "history": "^5.3.0",
     "lottie-web": "^5.12.2",
     "quill-divider": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.26.1",
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@emotion/babel-plugin": "^11.11.0",
+    "@prerenderer/renderer-puppeteer": "^1.2.4",
+    "@prerenderer/rollup-plugin": "^0.3.12",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
@@ -61,11 +79,14 @@
     "msw": "^2.2.10",
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "3.1.1",
+    "puppeteer": "^23.10.4",
+    "react-snap": "^1.23.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "source-map-explorer": "^2.5.3",
     "stylelint": "^16.1.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",
+    "terser": "^5.37.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
     "vite-plugin-svgr": "^4.2.0"

src/App.tsx

@@ -2,11 +2,13 @@ import styled from '@emotion/styled';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Suspense } from 'react';
+import { HelmetProvider } from 'react-helmet-async';
 import { RouterProvider } from 'react-router-dom';
 import ResponsiveProvider from './components/commons/Responsive/ResponsiveProvider';
 import Loading from './pages/loading/Loading';
 import router from './routers/Router';
 import { MOBILE_MEDIA_QUERY } from './styles/mediaQuery';
+
 const App = () => {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -16,20 +18,19 @@ const App = () => {
     },
   });
   return (
-    <>
-      {/* <div style={{ fontSize: '16px' }}> */}
+    <HelmetProvider>
       <QueryClientProvider client={queryClient}>
         <ResponsiveProvider>
           <DesktopWrapper>
+            {/* <div style={{ fontSize: '16px' }}> */}
             <Suspense fallback={<Loading />}>
               <RouterProvider router={router} />
             </Suspense>
           </DesktopWrapper>
         </ResponsiveProvider>
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
-      {/* </div> */}
-    </>
+    </HelmetProvider>
   );
 };
 

src/main.tsx

@@ -16,12 +16,29 @@ import { theme } from './styles/theme.ts';
 // }
 
 // enableMocking().then(() => {
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <>
-    <Global styles={globalStyle} />
-    <ThemeProvider theme={theme}>
-      <App />
-    </ThemeProvider>
-  </>,
-);
+
+const container = document.getElementById('root') as HTMLElement;
+const root = ReactDOM.createRoot(container);
+
+if (container.hasChildNodes()) {
+  ReactDOM.hydrateRoot(
+    container,
+    <>
+      <Global styles={globalStyle} />
+      <ThemeProvider theme={theme}>
+        <App />
+      </ThemeProvider>
+    </>,
+  );
+} else {
+  root.render(
+    <>
+      <Global styles={globalStyle} />
+      <ThemeProvider theme={theme}>
+        <App />
+      </ThemeProvider>
+    </>,
+  );
+}
+
 // });

src/pages/postDetail/PostDetail.tsx

@@ -2,15 +2,15 @@ import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import Error from '../error/Error';
-import { useGroupFeedAuth, useGroupFeedPublicStatus } from '../groupFeed/hooks/queries';
-import Loading from '../loading/Loading';
-
+import { Helmet } from 'react-helmet-async';
 import { useParams } from 'react-router-dom';
 import { DefaultModal, DefaultModalBtn } from '../../components/commons/modal/DefaultModal';
 import useModal from '../../hooks/useModal';
 import checkAuthenticate from '../../utils/checkAuthenticate';
 import { replaceDefaultImg } from '../../utils/replaceDefaultImg';
+import Error from '../error/Error';
+import { useGroupFeedAuth, useGroupFeedPublicStatus } from '../groupFeed/hooks/queries';
+import Loading from '../loading/Loading';
 import {
   CheckboxIc,
   DefaultProfileIc,
@@ -108,6 +108,32 @@ const PostDetail = () => {
 
   return (
     <>
+      <Helmet>
+        <title>{`MILE - ${postData?.title}`}</title>
+        <meta property="og:title" content={postData?.title} />
+        <meta
+          property="og:description"
+          content={
+            // '오직 글쓰기 모임을 위한 블로그, 마일에서 모임원들과 함께 글을 쓰며 여러분 만의 공간을 만들어보세요'
+            'test'
+          }
+        ></meta>
+        <meta property="og:image" content={postData?.imageUrl} />
+        <meta name="keyword" content={`글쓰기, 글, 글모임, mile, MILE, 마일, ${postData?.title}`} />
+        <meta
+          property="og:url"
+          content={`https://www.milewriting.com/detail/${groupId}/${postId}`}
+        />
+      </Helmet>
+      {/* <Helmet prioritizeSeoTags>
+        <title>A fancy webpage</title>
+        <link rel="notImportant" href="https://www.chipotle.com" />
+        <meta name="whatever" />
+        <meta property="og:image" content={postData?.imageUrl} />
+        <link rel="canonical" href="https://www.tacobell.com" />
+        <meta property="og:title" content="A very important title" />
+      </Helmet> */}
+
       {accessToken ? <AuthorizationHeader /> : <UnAuthorizationHeader />}
       <Responsive only="desktop">
         <Spacing marginBottom="6.4" />

src/utils/apis/axios.ts

@@ -8,7 +8,6 @@ export const client = axios.create({
   baseURL: `${devBaseUrl}`,
   headers: {
     'Content-Type': 'application/json',
-    'Access-Control-Allow-Origin': '*',
   },
   withCredentials: true,
 });
@@ -18,26 +17,12 @@ export const authClient = axios.create({
   baseURL: `${devBaseUrl}`,
   headers: {
     'Content-Type': 'application/json',
-    'Access-Control-Allow-Origin': '*',
 
     Authorization: `Bearer ${accessToken}`,
   },
   withCredentials: true,
 });
 
-// authClient.interceptors.request.use(
-//   (config) => {
-//     const accessToken = localStorage.getItem('accessToken');
-//     if (accessToken) {
-//       config.headers.Authorization = `Bearer ${accessToken}`;
-//     }
-//     return config;
-//   },
-//   (error) => {
-//     return Promise.reject(error);
-//   },
-// );
-
 authClient.interceptors.response.use(
   (config) => {
     return config;

src/utils/apis/getAllPost.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+const getAllPost = async (url: string) => {
+  const data = await axios.get(`${url}/api/internal/post-data`);
+
+  console.log(data);
+  return data;
+};
+
+export default getAllPost;

tsconfig.json

@@ -23,6 +23,6 @@
     /* svgr */
     "types": ["vite-plugin-svgr/client", "node"]
   },
-  "include": ["src", "**/*.tsx"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src", "**/*.tsx"]
+  // "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "**.*.ts"]
 }