[feat] react helmet, react prerender add

softeerbootcamp4th · Aug 22, 2024 · 54b17f0 · 54b17f0
1 parent 8cb12cc
commit 54b17f0
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 6 deletions.
diff --git a/service/src/App.jsx b/service/src/App.jsx
@@ -3,6 +3,7 @@ import { AuthProvider } from '@/context/authContext';
 import Header from '@/components/header/Header';
 import Footer from '@/components/footer/Footer';
 import { Outlet, useLocation } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
 
 function App() {
   const location = useLocation();
@@ -40,11 +41,13 @@ function App() {
 
   return (
     <div className="relative min-w-[1720px]">
-      <AuthProvider>
-        {!hideHeader && <Header />}
-        <Outlet />
-      </AuthProvider>
-      {!hideFooter && <Footer />}
+      <HelmetProvider>
+        <AuthProvider>
+          {!hideHeader && <Header />}
+          <Outlet />
+        </AuthProvider>
+        {!hideFooter && <Footer />}
+      </HelmetProvider>
     </div>
   );
 }

diff --git a/service/src/pages/eventIntro/EventIntro.jsx b/service/src/pages/eventIntro/EventIntro.jsx
@@ -4,10 +4,27 @@ import EventIntroNav from '@/pages/eventIntro/EventIntroNav';
 import EventIntroRewards from '@/pages/eventIntro/EventIntroRewards';
 import { animationVariants } from '@/styles/FramerMotion';
 import { motion } from 'framer-motion';
+import { Helmet } from 'react-helmet-async';
 
 function EventIntro() {
   return (
     <div>
+      <Helmet>
+        <title>캐스퍼 이벤트 소개</title>
+        <meta
+          name="description"
+          content="캐스퍼 EV를 받을 수 있는 이벤트에 대해 자세히 알아보세요. 이벤트 참여 방법과 다양한 보상을 소개합니다."
+        />
+        <meta property="og:title" content="캐스퍼 이벤트 소개" />
+        <meta
+          property="og:description"
+          content="캐스퍼 EV를 받을 수 있는 이벤트에 참여해보세요!"
+        />
+        <meta
+          property="og:image"
+          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/%E1%84%86%E1%85%B5%E1%84%82%E1%85%B5+%E1%84%8F%E1%85%B1%E1%84%8C%E1%85%B3+7.svg"
+        />
+      </Helmet>
       <EventIntroMain />
       <div className="bg-gradient-lightblue-white-vertical mt-[1px]">
         <EventIntroNav />

diff --git a/service/src/pages/joinEvent/JoinEventIntro.jsx b/service/src/pages/joinEvent/JoinEventIntro.jsx
@@ -5,12 +5,30 @@ import JoinEventIntroMain from '@/pages/joinEvent/JoinEventIntroMain';
 import WorldCup from '@/pages/joinEvent/WorldCup';
 import MiniQuiz from '@/pages/joinEvent/MiniQuiz';
 import useScroll from '@/hooks/useScroll';
+import { Helmet } from 'react-helmet-async';
 
 function JoinEventIntro() {
   const { refs } = useScroll();
 
   return (
     <>
+      <Helmet>
+        <title>캐스퍼 이벤트 참여</title>
+        <meta
+          name="description"
+          content="다양한 게임을 즐기고 응모권을 모아 캐스퍼 EV를 받을 수 있는 기회를 잡아보세요!"
+        />
+        <meta property="og:url" content="https://casper-event.store/event" />
+        <meta property="og:title" content="캐스퍼 이벤트 참여" />
+        <meta
+          property="og:description"
+          content="다양한 게임을 즐기고 응모권을 모아 캐스퍼 EV를 받을 수 있는 기회를 잡아보세요!"
+        />
+        <meta
+          property="og:image"
+          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/OGImage.png"
+        />
+      </Helmet>
       <div ref={refs.mainRef}>
         <JoinEventIntroMain />
       </div>

diff --git a/service/src/pages/miniquiz/MiniQuiz.jsx b/service/src/pages/miniquiz/MiniQuiz.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import EventHeader from '@/components/header/EventHeader';
 import ExitModal from '@/components/modal/ExitModal';
 import MiniQuizMain from '@/pages/miniquiz/MiniQuizMain';
+import { Helmet } from 'react-helmet-async';
 
 function MiniQuiz() {
   const [openExitModal, setOpenExitModal] = useState(false);
@@ -11,6 +12,26 @@ function MiniQuiz() {
   return (
     <>
       <div className="relative min-h-[860px] text-nowrap">
+        <Helmet>
+          <title>캐스퍼 미니퀴즈</title>
+          <meta
+            name="description"
+            content="미니퀴즈을 통해 선착순 경품과 툴박스 아이템을 획득하세요!"
+          />
+          <meta
+            property="og:url"
+            content="https://casper-event.store/event/miniquiz"
+          />
+          <meta property="og:title" content="캐스퍼 미니퀴즈" />
+          <meta
+            property="og:description"
+            content="미니퀴즈을 통해 선착순 경품과 툴박스 아이템을 획득하세요!"
+          />
+          <meta
+            property="og:image"
+            content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/OGImage.png"
+          />
+        </Helmet>
         <EventHeader
           eventTitle="Event 2. 도구 얻기"
           eventBody="월드컵 일일 미니퀴즈"

diff --git a/service/src/pages/newCarIntro/NewCarIntro.jsx b/service/src/pages/newCarIntro/NewCarIntro.jsx
@@ -2,10 +2,28 @@ import React from 'react';
 import NewCarIntroMain from '@/pages/newCarIntro/NewCarIntroMain';
 import NewCarCarousel from '@/pages/newCarIntro/NewCarCarousel';
 import NewCarDetail from '@/pages/newCarIntro/NewCarDetail';
+import { Helmet } from 'react-helmet-async';
 
 function NewCarIntro() {
   return (
     <>
+      <Helmet>
+        <title>캐스퍼 EV 소개</title>
+        <meta name="description" content="캐스퍼 EV에 대해 알아보세요!" />
+        <meta
+          property="og:url"
+          content="https://casper-event.store/introduce"
+        />
+        <meta property="og:title" content="캐스퍼 EV 소개" />
+        <meta
+          property="og:description"
+          content="캐스퍼 EV에 대해 알아보세요!"
+        />
+        <meta
+          property="og:image"
+          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/OGImage.png"
+        />
+      </Helmet>
       <NewCarIntroMain />
       <div className="pt-1800 bg-gradient-lightblue-white-vertical pb-4000">
         <NewCarCarousel />

diff --git a/service/src/pages/worldCup/WorldCupMain.jsx b/service/src/pages/worldCup/WorldCupMain.jsx
@@ -4,6 +4,7 @@ import worldCupData from '@/constants/worldCup/worldCupData';
 import { useNavigate } from 'react-router-dom';
 import shuffleArr from '@/utils/shuffleArr';
 import { postWorldCupResult } from '@/api/worldCup/index';
+import { Helmet } from 'react-helmet-async';
 
 const WorldCupMain = () => {
   const navigate = useNavigate();
@@ -65,6 +66,26 @@ const WorldCupMain = () => {
 
   return (
     <div>
+      <Helmet>
+        <title>캐스퍼 상황 월드컵</title>
+        <meta
+          name="description"
+          content="월드컵 게임을 통해 자동차 아이템을 획득하세요!"
+        />
+        <meta
+          property="og:url"
+          content="https://casper-event.store/event/worldcup"
+        />
+        <meta property="og:title" content="캐스퍼 상황 월드컵" />
+        <meta
+          property="og:description"
+          content="월드컵 게임을 통해 자동차 아이템을 획득하세요!"
+        />
+        <meta
+          property="og:image"
+          content="https://softeer4-team8.s3.ap-northeast-2.amazonaws.com/OGImage.png"
+        />
+      </Helmet>
       <WorldCupGame
         title={getTitle()}
         roundData={roundData}

diff --git a/service/vite.config.js b/service/vite.config.js
@@ -2,9 +2,36 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import { resolve } from 'path';
 import svgr from 'vite-plugin-svgr';
+import prerender from '@prerenderer/rollup-plugin';
+import dotenv from 'dotenv';
+
+dotenv.config();
 
 export default defineConfig({
-  plugins: [react(), svgr()],
+  plugins: [
+    react(),
+    svgr(),
+    prerender({
+      routes: [
+        '/',
+        '/event',
+        '/event/worldCup',
+        '/event/miniQuiz',
+        '/introduce',
+      ],
+      renderer: '@prerenderer/renderer-puppeteer',
+      rendererOptions: {
+        maxConcurrentRoutes: 1,
+        renderAfterTime: 500,
+      },
+      postProcess(renderedRoute) {
+        const apiUrl = process.env.VITE_API_URL;
+        renderedRoute.html = renderedRoute.html
+          .replace(/http:/i, 'https:')
+          .replace(/(https:\/\/)?(localhost|127\.0\.0\.1):\d*/i, apiUrl);
+      },
+    }),
+  ],
   resolve: {
     alias: [
       { find: '@', replacement: resolve(__dirname, 'src') },