[Feat] 환경변수를 활용한 동적 메타태그 구현 (#455)

* install: react-helmet-async 설치 * feat: provider 추가 * feat: index.html에서 helmet으로 이동 * feat: URL 추가 * fix: isMakers context->env로 가져오기 * chore: 테스트용 연산자 제거 * fix: 환경변수 말고 MODE 활용 * fix: useDate 내부 isMakers도 수정
sopt-makers · Sep 24, 2024 · cf8a51f · cf8a51f
1 parent c349bb1
commit cf8a51f
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -17,33 +17,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta property="og:type" content="website" />
     <meta property="og:locale" content="ko_KR" />
-
     <link rel="manifest" href="/manifest.webmanifest" />
-
-    <link rel="icon" href="/makersFavicon.ico" sizes="32x32" />
-    <link rel="icon" href="/makersIcon.svg" type="image/svg+xml" />
-    <link rel="apple-touch-icon" href="https://recruiting.sopt.org/makers-touch-icon.png" />
-
-    <meta property="og:title" content="SOPT makers 모집 지원하기" />
-    <meta property="og:description" content="SOPT makers의 신입 기수 모집페이지입니다." />
-    <meta property="og:site_name" content="SOPT makers 리크루팅" />
-    <meta property="og:url" content="https://recruiting.sopt.org" />
-
-    <meta property="og:image" content="/makersOg.png" />
-    <meta property="og:image:alt" content="SOPT makers 리크루팅" />
-    <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 makers 모집 지원하기" />
-    <meta name="twitter:description" content="SOPT makers의 신입 기수 모집페이지입니다." />
-    <meta name="twitter:image" content="/makersOg.png" />
-    <meta property="twitter:image:alt" content="SOPT makers 리크루팅" />
-    <meta property="twitter:site" content="https://recruiting.sopt.org" />
-
-    <title>SOPT makers 모집 지원하기</title>
-    <meta name="author" content="sopt makers team official 4th" />
-    <meta name="description" content="SOPT makers의 신입 기수 모집페이지입니다." />
   </head>
   <body>
     <div id="modal"></div>

diff --git a/package.json b/package.json
@@ -32,6 +32,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-responsive": "^10.0.0",
     "react-router-dom": "^6.23.1"
@@ -67,4 +68,4 @@
     "vite": "^5.2.0",
     "vitest": "^2.0.5"
   }
-}
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -15,6 +15,7 @@ import BigLoading from 'views/loadings/BigLoding';
 
 import 'styles/reset.css';
 import useDialog from '@hooks/useDialog';
+import { HelmetProvider } from 'react-helmet-async';
 
 const SessionExpiredDialog = lazy(() =>
   import('views/dialogs').then(({ SessionExpiredDialog }) => ({ default: SessionExpiredDialog })),
@@ -112,20 +113,22 @@ const App = () => {
   return (
     <>
       <SessionExpiredDialog ref={sessionExpiredDialogRef} />
-      <ThemeProvider>
-        <DeviceTypeProvider>
-          <RecruitingInfoProvider>
-            <QueryClientProvider client={queryClient}>
-              <ReactQueryDevtools />
-              <div className={isLight ? light : dark}>
-                <Suspense fallback={<BigLoading />}>
-                  <RouterProvider router={router} />
-                </Suspense>
-              </div>
-            </QueryClientProvider>
-          </RecruitingInfoProvider>
-        </DeviceTypeProvider>
-      </ThemeProvider>
+      <HelmetProvider>
+        <ThemeProvider>
+          <DeviceTypeProvider>
+            <RecruitingInfoProvider>
+              <QueryClientProvider client={queryClient}>
+                <ReactQueryDevtools />
+                <div className={isLight ? light : dark}>
+                  <Suspense fallback={<BigLoading />}>
+                    <RouterProvider router={router} />
+                  </Suspense>
+                </div>
+              </QueryClientProvider>
+            </RecruitingInfoProvider>
+          </DeviceTypeProvider>
+        </ThemeProvider>
+      </HelmetProvider>
     </>
   );
 };

diff --git a/src/common/components/Layout/components/Head/index.tsx b/src/common/components/Layout/components/Head/index.tsx
@@ -0,0 +1,45 @@
+import { Helmet } from 'react-helmet-async';
+
+const Head = () => {
+  const isMakers = import.meta.env.MODE.includes('makers');
+
+  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 = `SOPT ${isMakers ? 'makers ' : ''}리크루팅`;
+  const TITLE = `SOPT ${isMakers ? 'makers ' : ''}모집 지원하기`;
+  const IMAGE = isMakers ? '/makersOg.png' : '/imgOg.png';
+  const DESCRIPTION = `SOPT${isMakers ? ' makers' : ''}의 신입 기수 모집페이지입니다.`;
+  const URL = isMakers ? 'https://recruiting.sopt.org' : 'https://recruit.sopt.org';
+
+  return (
+    <Helmet>
+      <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:url" content={URL} />
+
+      <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} />
+      <meta property="twitter:site" content={URL} />
+    </Helmet>
+  );
+};
+
+export default Head;
diff --git a/src/common/components/Layout/index.tsx b/src/common/components/Layout/index.tsx
@@ -4,10 +4,12 @@ import { Outlet } from 'react-router-dom';
 import Header from './components/Header';
 import ScrollToTop from './components/ScrollToTop';
 import { container, mainWrapper } from './style.css';
+import Head from './components/Head';
 
 const Layout = ({ children }: PropsWithChildren) => {
   return (
     <div className={container}>
+      <Head />
       <ScrollToTop />
       <Header />
       <main className={mainWrapper}>{children || <Outlet />}</main>

diff --git a/src/common/hooks/useDate.tsx b/src/common/hooks/useDate.tsx
@@ -62,7 +62,7 @@ const useDate = () => {
   const NoMoreReview = afterInterview; // 면접 마감 -> 지원서 확인 불가
   const NoMoreFinalResult = beforeFinalResult || afterRecruiting; // 최종 합불 확인 기간 아님
 
-  const isMakers = name?.toLowerCase().includes('makers');
+  const isMakers = import.meta.env.MODE.includes('makers');
 
   useEffect(() => {
     handleSaveRecruitingInfo({

diff --git a/src/views/CompletePage/index.tsx b/src/views/CompletePage/index.tsx
@@ -12,9 +12,8 @@ import { container, iconVar, mainTextVar, subTextVar } from './style.css';
 const CompletePage = () => {
   const { deviceType } = useDeviceType();
   const {
-    recruitingInfo: { name, season, group, soptName },
+    recruitingInfo: { name, season, group, soptName, isMakers },
   } = useRecruitingInfo();
-  const isMakers = soptName?.toLowerCase().includes('makers');
 
   const handleClickMyPage = () => {
     track('click-complete-my');

diff --git a/yarn.lock b/yarn.lock
@@ -3519,6 +3519,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"
@@ -3885,7 +3892,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==
@@ -4373,6 +4380,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"
@@ -4668,6 +4689,11 @@ shallow-equal@^3.1.0:
   resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec"
   integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==
 
+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"