[Fix] 동적 Index html (#261)

* install: react-helmet-async 설치 * feat: Helmet 적용하여 조건부 렌더링 * feat: dynamic head 구현 * fix: Makers -> makers * feat: makers 버전 파비콘 및 아이콘 추가 * fix: season undefined 조건 추가 * chore: 만들어놓은 makers manifest 파일 연결 * feat: url 메타태그 추가
sopt-makers · Jul 29, 2024 · 416d443 · 416d443
1 parent cbe6860
commit 416d443
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -15,33 +15,10 @@
 
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <link rel="icon" href="/favicon.ico" sizes="32x32" />
-    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="manifest" href="/manifest.webmanifest" />
-
     <meta property="og:type" content="website" />
-    <meta property="og:title" content="SOPT 35기 모집 지원하기" />
-    <meta property="og:description" content="SOPT의 신입 기수 모집페이지입니다." />
-    <meta property="og:site_name" content="SOPT 리크루팅" />
     <meta property="og:locale" content="ko_KR" />
-    <!-- <meta property="og:url" content="https://www.someurl.com" /> -->
-    <meta property="og:image" content="/imgOg.png" />
-    <meta property="og:image:alt" content="SOPT 리크루팅 페이지" />
-    <meta property="og:image:width" content="800" />
-    <meta property="og:image:height" content="400" />
-
-    <meta property="twitter:card" content="website" />
-    <meta name="twitter:title" content="SOPT 35기 모집 지원하기" />
-    <meta name="twitter:description" content="SOPT의 신입 기수 모집페이지입니다." />
-    <!-- <meta property="twitter:site" content="https://www.someurl.com" /> -->
-    <meta name="twitter:image" content="/imgOg.png" />
-    <meta property="twitter:image:alt" content="SOPT 공식 홈페이지 이미지" />
-
-    <title>SOPT 35기 모집 지원하기</title>
-    <meta name="author" content="sopt makers team official 4th" />
-    <meta name="description" content="SOPT의 신입 기수 모집페이지입니다." />
+    <meta property="og:url" content="https://recruiting.sopt.org" />
+    <meta property="twitter:site" content="https://recruiting.sopt.org" />
   </head>
   <body>
     <div id="modal"></div>

diff --git a/makersManifest.webmanifest b/makersManifest.webmanifest
@@ -0,0 +1,14 @@
+{
+  "icons": [
+    {
+      "src": "/makers_192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/makers_512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "react": "^18.2.0",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.51.5",
     "react-router-dom": "^6.23.1"
   },

diff --git a/public/maekrsOg.png b/public/maekrsOg.png
diff --git a/public/makers-touch-icon.png b/public/makers-touch-icon.png
diff --git a/public/makersFavicon.ico b/public/makersFavicon.ico
diff --git a/public/makersIcon.svg b/public/makersIcon.svg
diff --git a/public/makers_192.png b/public/makers_192.png
diff --git a/public/makers_512.png b/public/makers_512.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,6 +4,7 @@ import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@ta
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AxiosError } from 'axios';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { HelmetProvider } from 'react-helmet-async';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 import Layout from '@components/Layout';
@@ -109,16 +110,18 @@ const App = () => {
   return (
     <>
       <SessionExpiredDialog ref={sessionRef} />
-      <ThemeContext.Provider value={themeContextValue}>
-        <RecruitingInfoContext.Provider value={recruitingInfoContextValue}>
-          <QueryClientProvider client={queryClient}>
-            <ReactQueryDevtools />
-            <div className={isLight ? light : dark}>
-              <RouterProvider router={router} />
-            </div>
-          </QueryClientProvider>
-        </RecruitingInfoContext.Provider>
-      </ThemeContext.Provider>
+      <HelmetProvider>
+        <ThemeContext.Provider value={themeContextValue}>
+          <RecruitingInfoContext.Provider value={recruitingInfoContextValue}>
+            <QueryClientProvider client={queryClient}>
+              <ReactQueryDevtools />
+              <div className={isLight ? light : dark}>
+                <RouterProvider router={router} />
+              </div>
+            </QueryClientProvider>
+          </RecruitingInfoContext.Provider>
+        </ThemeContext.Provider>
+      </HelmetProvider>
     </>
   );
 };

diff --git a/src/common/components/Layout/index.tsx b/src/common/components/Layout/index.tsx
@@ -1,12 +1,62 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useContext } from 'react';
+import { Helmet } from 'react-helmet-async';
 import { Outlet } from 'react-router-dom';
 
+import { RecruitingInfoContext } from '@store/recruitingInfoContext';
+
 import Header from './components/Header';
 import { container, mainWrapper } from './style.css';
 
+const Head = () => {
+  const {
+    recruitingInfo: { season, isMakers },
+  } = useContext(RecruitingInfoContext);
+
+  const TOUCH_ICON = isMakers ? '/makers-touch-icon.png' : '/apple-touch-icon.png';
+  const ICON = isMakers ? '/makersIcon.svg' : '/icon.svg';
+  const FAVICON = isMakers ? '/makersFavicon.ico' : '/favicon.ico';
+  const SITE_NAME = isMakers === undefined ? 'SOPT 리크루팅' : `SOPT ${isMakers && 'makers '}리크루팅`;
+  const TITLE = season === undefined ? 'SOPT 모집 지원하기' : `SOPT ${isMakers && 'makers '}${season}기 모집 지원하기`;
+  const IMAGE = isMakers ? '/makersOg.png' : '/imgOg.png';
+  const DESCRIPTION =
+    isMakers === undefined
+      ? `SOPT의 신입 기수 모집페이지입니다.`
+      : `SOPT${isMakers && ' makers'}의 신입 기수 모집페이지입니다.`;
+
+  return (
+    <Helmet>
+      <link rel="manifest" href={isMakers ? '/makersManifest.webmanifest' : '/manifest.webmanifest'} />
+
+      <link rel="icon" href={FAVICON} sizes="32x32" />
+      <link rel="icon" href={ICON} type="image/svg+xml" />
+      <link rel="apple-touch-icon" href={TOUCH_ICON} />
+
+      <meta property="og:title" content={TITLE} />
+      <meta property="og:description" content={DESCRIPTION} />
+      <meta property="og:site_name" content={SITE_NAME} />
+
+      <meta property="og:image" content={IMAGE} />
+      <meta property="og:image:alt" content={SITE_NAME} />
+      <meta property="og:image:width" content="800" />
+      <meta property="og:image:height" content="400" />
+
+      <meta property="twitter:card" content="website" />
+      <meta name="twitter:title" content={TITLE} />
+      <meta name="twitter:description" content={DESCRIPTION} />
+      <meta name="twitter:image" content={IMAGE} />
+      <meta property="twitter:image:alt" content={SITE_NAME} />
+
+      <title>{TITLE}</title>
+      <meta name="author" content="sopt makers team official 4th" />
+      <meta name="description" content={DESCRIPTION} />
+    </Helmet>
+  );
+};
+
 const Layout = ({ children }: PropsWithChildren) => {
   return (
     <div className={container}>
+      <Head />
       <Header />
       <main className={mainWrapper}>{children || <Outlet />}</main>
     </div>

diff --git a/src/views/ApplyPage/components/BottomSection/index.tsx b/src/views/ApplyPage/components/BottomSection/index.tsx
@@ -33,7 +33,7 @@ const BottomSection = ({ isReview, knownPath }: BottomSectionProps) => {
       <div id="check-necessary" className={doubleLineCheck}>
         <p className={label}>
           {isMakers
-            ? 'SOPT Makers의 행사 및 정기 모임은 매주 일요일에 진행됩니다.'
+            ? 'SOPT makers의 행사 및 정기 모임은 매주 일요일에 진행됩니다.'
             : 'SOPT의 행사 및 세미나는 매주 토요일에 진행됩니다.'}
         </p>
         <Checkbox checked={isReview ? true : undefined} name="attendance" required>

diff --git a/yarn.lock b/yarn.lock
@@ -2714,6 +2714,13 @@ 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"
+
 is-array-buffer@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
@@ -3006,7 +3013,7 @@ long@^5.0.0:
   resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
   integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
 
-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.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -3381,6 +3388,20 @@ react-dom@^18.2.0:
     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-hook-form@^7.51.5:
   version "7.51.5"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.5.tgz#4afbfb819312db9fea23e8237a3a0d097e128b43"
@@ -3596,6 +3617,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.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"