Merge pull request #163 from softeerbootcamp4th/feat/#162/preLoader

Feat/#162/pre loader
softeerbootcamp4th · Aug 22, 2024 · 9e5d983 · 9e5d983
2 parents 537ea1e + 6c7ec0f
commit 9e5d983
Show file tree

Hide file tree

Showing 16 changed files with 168 additions and 26 deletions.
diff --git a/admin/tailwind.config.js b/admin/tailwind.config.js
@@ -26,10 +26,6 @@
           'op-30-blue': 'rgba(1, 40, 255, 0.30)',
         },
         backgroundImage: {
-          //그림 배경 정의
-          'new-car-intro': "url('@/assets/images/newCarIntroBg.svg')",
-          'join-event-main': "url('@/assets/images/joinEventMainBg.svg')",
-          'miniquiz-paper': "url('@/assets/images/miniQuizBg.svg')",
           // 그라데이션 색상 정의
           'gradient-blue-purple':
             'linear-gradient(90deg, #0128FF 0%, #AD00FF 100%)',

diff --git a/service/index.html b/service/index.html
@@ -7,6 +7,21 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="preload"
+      href="./src/assets/images/joinEventMainBg.webp"
+      as="image"
+    />
+    <link
+      rel="preload"
+      href="./src/assets/images/newCarIntroBg.webp"
+      as="image"
+    />
+    <link
+      rel="preload"
+      href="./src/assets/images/casper_car_image.webp"
+      as="image"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"

diff --git a/service/package.json b/service/package.json
@@ -26,7 +26,7 @@
     "micro-slider": "^1.1.0",
     "postcss": "^8.4.39",
     "prop-types": "^15.8.1",
-    "puppeteer": "^23.1.0",
+    "puppeteer": "^23.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",

diff --git a/service/robots.txt → service/public/robots.txt b/service/robots.txt → service/public/robots.txt
diff --git a/service/sitemap.xml → service/public/sitemap.xml b/service/sitemap.xml → service/public/sitemap.xml
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/assets/images/joinEventMainBg.webp b/service/src/assets/images/joinEventMainBg.webp
diff --git a/service/src/assets/images/newCarIntroBg.webp b/service/src/assets/images/newCarIntroBg.webp
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/eventIntro/EventIntroMain.jsx b/service/src/pages/eventIntro/EventIntroMain.jsx
@@ -17,8 +17,10 @@ function EventIntroMain() {
       >
         <div className="flex justify-between">
           <div className="ml-3000">
-            <div className="flex w-[350px] h-[50px] items-center justify-center bg-primary-berrypurple text-detail-1-bold text-neutral-white mb-600 text-nowrap">
-              진짜 캐스퍼 EV를 얻을 수 있는 기회
+            <div className="inline-block px-500 py-200 bg-primary-berrypurple mb-600">
+              <p className="text-detail-1-bold text-neutral-white">
+                진짜 캐스퍼 EV를 얻을 수 있는 기회
+              </p>
             </div>
             <div className="text-heading-banner-title text-neutral-black mb-1000 text-nowrap">
               캐스퍼 EV와
@@ -43,13 +45,17 @@ function EventIntroMain() {
             </p>
             <div className="flex mt-600 gap-300">
               <Link to="event">
-                <button className="flex items-center justify-center duration-200 rounded-full px-1000 py-500 bg-neutral-white text-neutral-black text-detail-3-semibold hover:scale-105">
-                  이벤트 참여하기
+                <button className="flex items-center justify-center duration-200 rounded-full px-1200 py-600 bg-neutral-white hover:scale-105">
+                  <p className="text-neutral-black text-detail-2-semibold">
+                    이벤트 참여하기
+                  </p>
                 </button>
               </Link>
               <Link to="introduce">
-                <button className="flex items-center justify-center bg-transparent rounded-full px-800 py-400 text-neutral-black text-detail-3-semibold border-[2px] border-solid border-neutral-black hover:scale-105 duration-200">
-                  캐스퍼 EV 알아보기
+                <button className="flex items-center justify-center bg-transparent rounded-full px-1000 py-500 border-[2px] border-solid border-neutral-black hover:scale-105 duration-200">
+                  <p className="text-neutral-black text-detail-2-semibold">
+                    캐스퍼 EV 알아보기
+                  </p>
                   <img src={arrow} alt="move" />
                 </button>
               </Link>

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') },

diff --git a/service/yarn.lock b/service/yarn.lock
@@ -4818,10 +4818,10 @@ punycode@^2.1.0:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-[email protected].0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-23.1.0.tgz#50703d2e27c1d73d523c25b807f6e6d95a6b1c47"
-  integrity sha512-SvAsu+xnLN2FMXE/59bp3s3WXp8ewqUGzVV4AQtml/2xmsciZnU/bXcCW+eETHPWQ6Agg2vTI7QzWXPpEARK2g==
+[email protected].1:
+  version "23.1.1"
+  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-23.1.1.tgz#7e018c0c66faeb3e1df81d1012862bb8a5d7ce03"
+  integrity sha512-OeTqNiYGF9qZtwZU4Yc88DDqFJs4TJ4rnK81jkillh6MwDeQodyisM9xe5lBmPhwiDy92s5J5DQtQLjCKHFQ3g==
   dependencies:
     "@puppeteer/browsers" "2.3.1"
     chromium-bidi "0.6.4"
@@ -4830,16 +4830,16 @@ [email protected]:
     typed-query-selector "^2.12.0"
     ws "^8.18.0"
 
-puppeteer@^23.1.0:
-  version "23.1.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-23.1.0.tgz#3abe4980670f214c8edfe689012e83418f81f9aa"
-  integrity sha512-m+CyicDlGN1AVUeOsCa6/+KQydJzxfsPowL7fQy+VGNeaWafB0m8G5aGfXdfZztKMxzCsdz7KNNzbJPeG9wwFw==
+puppeteer@^23.1.1:
+  version "23.1.1"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-23.1.1.tgz#fedac19bed4a6ad6129463221732938cac60fb89"
+  integrity sha512-giN4Ikwl5hkkouH/dVyxIPTPslWuqZ8fjALdSw5Cvt+r0LuDpLdfPxRADlB75YJ2UjPZhgok+xYBYk8ffzv4MA==
   dependencies:
     "@puppeteer/browsers" "2.3.1"
     chromium-bidi "0.6.4"
     cosmiconfig "^9.0.0"
     devtools-protocol "0.0.1312386"
-    puppeteer-core "23.1.0"
+    puppeteer-core "23.1.1"
     typed-query-selector "^2.12.0"
 
 [email protected]: