Merge pull request #144 from softeerbootcamp4th/feat/#143/SEOsetting

Feat/#143/SEOsetting
softeerbootcamp4th · Aug 21, 2024 · 9b2c979 · 9b2c979
2 parents 7895da5 + aed0ec6
commit 9b2c979
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 9 deletions.
diff --git a/service/index.html b/service/index.html
@@ -2,11 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" href="/hyundai.svg" type="image/svg+xml" />
     <link
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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"
+    />
+
     <title>CasperEvent</title>
   </head>
   <body>

diff --git a/service/package.json b/service/package.json
@@ -24,6 +24,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
     "react-js-pagination": "^3.0.3",
     "react-router-dom": "^6.25.1",
     "swiper": "^11.1.7",

diff --git a/service/public/hyundai.svg b/service/public/hyundai.svg
diff --git a/service/public/vite.svg b/service/public/vite.svg
diff --git a/service/robot.txt b/service/robot.txt
@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /public/
+Sitemap: https://casper-event.store/sitemap.xml
diff --git a/service/sitemap.xml b/service/sitemap.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://casper-event.store/</loc>
+    <lastmod>2024-08-21</lastmod>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://casper-event.store/event</loc>
+    <lastmod>2024-08-21</lastmod>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://casper-event.store/introduce</loc>
+    <lastmod>2024-08-21</lastmod>
+    <priority>0.6</priority>
+  </url>
+</urlset>
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();
@@ -37,13 +38,16 @@ function App() {
   );
 
   return (
-    <div className="relative min-w-[1720px]">
-      <AuthProvider>
-        {!hideHeader && <Header />}
-        <Outlet />
-      </AuthProvider>
-      {!hideFooter && <Footer />}
-    </div>
+    <HelmetProvider>
+      <div className="relative min-w-[1720px]">
+        <AuthProvider>
+          {!hideHeader && <Header />}
+          <Outlet />
+        </AuthProvider>
+        {!hideFooter && <Footer />}
+      </div>
+      /
+    </HelmetProvider>
   );
 }
 

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,29 @@ 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: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>
       <div ref={refs.mainRef}>
         <JoinEventIntroMain />
       </div>

diff --git a/service/src/pages/newCarIntro/NewCarIntro.jsx b/service/src/pages/newCarIntro/NewCarIntro.jsx
@@ -2,10 +2,25 @@ 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:title" content="캐스퍼 EV 소개" />
+        <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>
       <NewCarIntroMain />
       <div className="pt-1800 bg-gradient-lightblue-white-vertical pb-4000">
         <NewCarCarousel />

diff --git a/service/yarn.lock b/service/yarn.lock
@@ -3218,6 +3218,13 @@ internal-slot@^1.0.4, internal-slot@^1.0.7:
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ipaddr.js@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.2.0.tgz#d33fa7bac284f4de7af949638c9d68157c6b92e8"
@@ -3594,7 +3601,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -4073,6 +4080,20 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-fast-compare@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
+react-helmet-async@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-2.0.5.tgz#cfc70cd7bb32df7883a8ed55502a1513747223ec"
+  integrity sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==
+  dependencies:
+    invariant "^2.2.4"
+    react-fast-compare "^3.2.2"
+    shallowequal "^1.1.0"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -4340,6 +4361,11 @@ set-function-name@^2.0.1, set-function-name@^2.0.2:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.2"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -4409,6 +4435,7 @@ stop-iteration-iterator@^1.0.0:
     internal-slot "^1.0.4"
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4489,6 +4516,7 @@ string.prototype.trimstart@^1.0.8:
     es-object-atoms "^1.0.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==