[#74] react-helmet 적용

.yarnrc.yml

@@ -1,3 +1,5 @@
-yarnPath: .yarn/releases/yarn-3.8.0.cjs
+compressionLevel: mixed
 
+enableGlobalCache: false
 
+yarnPath: .yarn/releases/yarn-3.8.0.cjs

package.json

@@ -11,12 +11,14 @@
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-query": "^1.2.9",
     "@types/react-window": "^1.8.5",
     "axios": "^0.27.2",
     "dom-to-image": "^2.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-query": "^3.39.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { ReactNode, Suspense } from 'react';
 import {
   Routes,
   Route,
@@ -21,30 +21,45 @@ import RoomPage from 'pages/Room/RoomPage';
 import RoomDetailPage from 'pages/Room/RoomDetailPage';
 import TimetablePage from 'pages/TimetablePage';
 import CafeteriaPage from 'pages/Cafeteria/CafeteriaPage';
+import MetaHelmet from 'components/common/MetaHelmet';
 import useTokenState from 'utils/hooks/useTokenState';
 
+interface PageWrapperProps {
+  title: string;
+  element: ReactNode;
+}
+
+function HelmetWrapper({ title, element }: PageWrapperProps) {
+  return (
+    <>
+      <MetaHelmet title={title} />
+      {element}
+    </>
+  );
+}
+
 function App() {
   const token = useTokenState();
   return (
     <Suspense fallback={null}>
       <Routes>
         <Route path="/" element={<BoardPage />}>
-          <Route path="timetable" element={<TimetablePage />} />
-          <Route path="/" element={<IndexPage />} />
-          <Route path="/store" element={<StorePage />} />
-          <Route path="/store/:id" element={<StoreDetailPage />} />
-          <Route path="/bus" element={<BusPage />} />
-          <Route path="/cafeteria" element={<CafeteriaPage />} />
-          <Route path="/board/notice" element={<NoticePage />}>
+          <Route path="timetable" element={<HelmetWrapper title="코인 - 시간표" element={<TimetablePage />} />} />
+          <Route path="/" element={<HelmetWrapper title="코인 - 한기대 커뮤니티" element={<IndexPage />} />} />
+          <Route path="/store" element={<HelmetWrapper title="코인 - 상점" element={<StorePage />} />} />
+          <Route path="/store/:id" element={<HelmetWrapper title="코인 - 상점 상세" element={<StoreDetailPage />} />} />
+          <Route path="/bus" element={<HelmetWrapper title="코인 - 버스" element={<BusPage />} />} />
+          <Route path="/cafeteria" element={<HelmetWrapper title="코인 - 식단" element={<CafeteriaPage />} />} />
+          <Route path="/board/notice" element={<HelmetWrapper title="코인 - 공지사항" element={<NoticePage />} />}>
             <Route path="/board/notice/" element={<NoticeListPage />} />
-            <Route path="/board/notice/:id" element={<NoticeDetailPage />} />
+            <Route path="/board/notice/:id" element={<HelmetWrapper title="코인 - 공지사항 상세" element={<NoticeDetailPage />} />} />
           </Route>
-          <Route path="/room" element={<RoomPage />} />
-          <Route path="/room/:id" element={<RoomDetailPage />} />
+          <Route path="/room" element={<HelmetWrapper title="코인 - 복덕방" element={<RoomPage />} />} />
+          <Route path="/room/:id" element={<HelmetWrapper title="코인 - 복덕방 상세" element={<RoomDetailPage />} />} />
         </Route>
         <Route path="auth" element={token ? <Navigate replace to="/" /> : <AuthPage />}>
-          <Route index element={<LoginPage />} />
-          <Route path="signup" element={<SignupPage />} />
+          <Route index element={<HelmetWrapper title="코인 - 로그인" element={<LoginPage />} />} />
+          <Route path="signup" element={<HelmetWrapper title="코인 - 회원가입" element={<SignupPage />} />} />
         </Route>
       </Routes>
       <Toast />

src/components/common/MetaHelmet/index.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable react/require-default-props */
+import { Helmet } from 'react-helmet';
+
+type MetaHelmetProps = {
+  title: string,
+  description?: string,
+  image?: string,
+};
+
+export default function MetaHelmet({
+  title = '코인 - 한기대 커뮤니티', // 기본값을 직접 할당
+  description = '보다 편하게, 한국기술교육대학교 생활에 필요한 서비스를 만날 수 있습니다.',
+  image = 'https://static.koreatech.in/assets/img/facebook_showcase_image.png',
+}: MetaHelmetProps) {
+  return (
+    <Helmet>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <meta name="og:title" content={title} />
+      <meta
+        name="og:description"
+        content={description}
+      />
+      <meta
+        property="og:image"
+        content={image}
+      />
+      <meta property="og:image:width" content="1200" />
+    </Helmet>
+  );
+}

src/pages/Auth/LoginPage/index.tsx

@@ -122,9 +122,9 @@ function LoginPage() {
       <span className={styles.template__copyright}>
         COPYRIGHT ⓒ&nbsp;
         {
-          new Date().getFullYear()
-        }
-        &nbsp;BY BCSDLab ALL RIGHTS RESERVED.
+            new Date().getFullYear()
+          }
+          &nbsp;BY BCSDLab ALL RIGHTS RESERVED.
       </span>
     </div>
   );

yarn.lock

@@ -3092,6 +3092,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-helmet@npm:^6.1.11":
+  version: 6.1.11
+  resolution: "@types/react-helmet@npm:6.1.11"
+  dependencies:
+    "@types/react": "*"
+  checksum: e329d8ad82c365fec7dd7d91c8b6d167faac30cef0d9f1e27d7e895172a0ebfa65829fb4acabbe79283b01cbbe5840a845caeb50148ceef6f3fad42b3c2c4bdc
+  languageName: node
+  linkType: hard
+
 "@types/react-query@npm:^1.2.9":
   version: 1.2.9
   resolution: "@types/react-query@npm:1.2.9"
@@ -9141,6 +9150,7 @@ __metadata:
     "@types/node": ^16.7.13
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
+    "@types/react-helmet": ^6.1.11
     "@types/react-query": ^1.2.9
     "@types/react-window": ^1.8.5
     "@typescript-eslint/eslint-plugin": ^5.30.0
@@ -9158,6 +9168,7 @@ __metadata:
     eslint-plugin-react-hooks: ^4.6.0
     react: ^18.2.0
     react-dom: ^18.2.0
+    react-helmet: ^6.1.0
     react-query: ^3.39.1
     react-router-dom: ^6.3.0
     react-scripts: 5.0.1
@@ -11497,7 +11508,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -11671,6 +11682,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-fast-compare@npm:^3.1.1":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 2071415b4f76a3e6b55c84611c4d24dcb12ffc85811a2840b5a3f1ff2d1a99be1020d9437ee7c6e024c9f4cbb84ceb35e48cf84f28fcb00265ad2dfdd3947704
+  languageName: node
+  linkType: hard
+
+"react-helmet@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "react-helmet@npm:6.1.0"
+  dependencies:
+    object-assign: ^4.1.1
+    prop-types: ^15.7.2
+    react-fast-compare: ^3.1.1
+    react-side-effect: ^2.1.0
+  peerDependencies:
+    react: ">=16.3.0"
+  checksum: a4998479dab7fc1c2799eddefb1870a9d881b5f71cfdf97979a9882e42f4bb50402d55335f308f461e735e01a06f46b16cc7b4e6bcb22c7a4a6f85a753c5c106
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -11808,6 +11840,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-side-effect@npm:^2.1.0":
+  version: 2.1.2
+  resolution: "react-side-effect@npm:2.1.2"
+  peerDependencies:
+    react: ^16.3.0 || ^17.0.0 || ^18.0.0
+  checksum: c5eb1f42b464fb093bca59aaae0f1b2060373a2aaff95275b8781493628cdbbb6acdd6014e7883782c65c361f35a30f28cc515d68a1263ddb39cbbc47110be53
+  languageName: node
+  linkType: hard
+
 "react-toastify@npm:^9.0.8":
   version: 9.1.3
   resolution: "react-toastify@npm:9.1.3"