Merge pull request #150 from softeerbootcamp4th/feat/#146/PreRendering

Feat/#146/pre rendering
softeerbootcamp4th · Aug 21, 2024 · 105e40e · 105e40e
2 parents 74eb82b + a00f1a8
commit 105e40e
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 150 deletions.
diff --git a/service/index.html b/service/index.html
@@ -8,6 +8,22 @@
       rel="stylesheet"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="캐스퍼에 당첨될 수 있는 기회!! 이벤트 참여하고 캐스퍼 EV를 받아가세요!!"
+    />
+    <meta property="og:url" content="https://casper-event.store" />
+    <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"
+    />
+
+    <title>캐스퍼 이벤트</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/service/src/App.jsx b/service/src/App.jsx
@@ -3,7 +3,6 @@ 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 { Helmet, HelmetProvider } from 'react-helmet-async';
 
 function App() {
   const location = useLocation();
@@ -38,33 +37,13 @@ function App() {
   );
 
   return (
-    <HelmetProvider>
-      <div className="relative min-w-[1720px]">
-        <Helmet>
-          <meta
-            name="description"
-            content="캐스퍼에 당첨될 수 있는 기회!! 이벤트 참여하고 캐스퍼 EV를 받아가세요!!"
-          />
-          <meta property="og:url" content="https://casper-event.store" />
-          <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"
-          />
-
-          <title>캐스퍼 이벤트</title>
-        </Helmet>
-        <AuthProvider>
-          {!hideHeader && <Header />}
-          <Outlet />
-        </AuthProvider>
-        {!hideFooter && <Footer />}
-      </div>
-    </HelmetProvider>
+    <div className="relative min-w-[1720px]">
+      <AuthProvider>
+        {!hideHeader && <Header />}
+        <Outlet />
+      </AuthProvider>
+      {!hideFooter && <Footer />}
+    </div>
   );
 }
 

diff --git a/service/src/pages/eventIntro/EventIntro.jsx b/service/src/pages/eventIntro/EventIntro.jsx
@@ -4,28 +4,10 @@ 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:url" content="https://casper-event.store/" />
-        <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>
       <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,30 +5,12 @@ 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,7 +2,6 @@ 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);
@@ -12,26 +11,6 @@ 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,28 +2,10 @@ 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,7 +4,6 @@ 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();
@@ -67,26 +66,6 @@ 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,36 +2,11 @@ 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(),
-    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);
-      },
-    }),
-  ],
+  plugins: [react(), svgr()],
   resolve: {
     alias: [
       { find: '@', replacement: resolve(__dirname, 'src') },