[hotfix] 메타 태그 인식되지 않는 문제 해결 (#245)

* 🚨 !HOTFIX!: 툴박스 카테고리가 선택안되는 문제 해결 * 🚨 !HOTFIX!: meta 태그를 인식하지 못하는 문제 해결
boostcampwm-2024 · Dec 6, 2024 · 11d98e2 · 11d98e2
1 parent bc68819
commit 11d98e2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 33 deletions.
diff --git a/apps/client/src/app/App.tsx b/apps/client/src/app/App.tsx
@@ -3,6 +3,7 @@ import { ToasterWithMax } from '@/shared/ui';
 import { ErrorPage } from '@/pages/ErrorPage/ErrorPage';
 import { lazy, Suspense } from 'react';
 import { Loading } from '@/shared/ui';
+import { Helmet } from 'react-helmet-async';
 
 // lazy 로딩
 const HomePage = lazy(() =>
@@ -23,27 +24,51 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: (
-      <Suspense fallback={<Loading />}>
-        <HomePage />
-      </Suspense>
+      <>
+        <Helmet>
+          <title>BooLock - 홈</title>
+          <meta
+            name="description"
+            content="코딩 입문자들이 HTML과 CSS를 블록으로 배우는 BooLock의 메인 페이지입니다."
+          />
+        </Helmet>
+        <Suspense fallback={<Loading />}>
+          <HomePage />
+        </Suspense>
+      </>
     ),
     errorElement: <ErrorPage />,
   },
   {
     path: '/workspace/:workspaceId',
     element: (
-      <Suspense fallback={<Loading />}>
-        <WorkspacePage />
-      </Suspense>
+      <>
+        <Helmet>
+          <title>BooLock - 작업 공간</title>
+          <meta name="description" content={`워크스페이스에서 HTML과 CSS를 연습해보세요.`} />
+        </Helmet>
+        <Suspense fallback={<Loading />}>
+          <WorkspacePage />
+        </Suspense>
+      </>
     ),
     errorElement: <ErrorPage />,
   },
   {
     path: '*',
     element: (
-      <Suspense fallback={<Loading />}>
-        <NotFound />
-      </Suspense>
+      <>
+        <Helmet>
+          <title>BooLock - 페이지를 찾을 수 없음</title>
+          <meta
+            name="description"
+            content="요청한 페이지를 찾을 수 없습니다. 다른 페이지를 확인해 주세요."
+          />
+        </Helmet>
+        <Suspense fallback={<Loading />}>
+          <NotFound />
+        </Suspense>
+      </>
     ),
   },
 ]);

diff --git a/apps/client/src/pages/HomePage/HomePage.tsx b/apps/client/src/pages/HomePage/HomePage.tsx
@@ -1,7 +1,6 @@
 import { Banner, HomeHeader, WorkspaceContainer, WorkspaceModal } from '@/widgets';
 import { useClassBlockStore, useLoadingStore, useWorkspaceStore } from '@/shared/store';
 
-import { Helmet } from 'react-helmet-async';
 import { Loading } from '@/shared/ui';
 import { useEffect } from 'react';
 
@@ -23,13 +22,6 @@ export const HomePage = () => {
 
   return (
     <>
-      <Helmet>
-        <title>BooLock - 홈</title>
-        <meta
-          name="description"
-          content="코딩 입문자들이 HTML과 CSS를 블록으로 배우는 BooLock의 메인 페이지입니다."
-        />
-      </Helmet>
       {isPending && <Loading />}
       <div className="flex h-full w-full flex-col items-center">
         <HomeHeader />

diff --git a/apps/client/src/pages/NotFound/NotFound.tsx b/apps/client/src/pages/NotFound/NotFound.tsx
@@ -1,4 +1,3 @@
-import { Helmet } from 'react-helmet-async';
 import { ErrorContent } from '@/shared/ui/error/ErrorContent';
 
 // TODO: 메세지 상수화 shared/utils/constants.ts 안에 관리
@@ -10,13 +9,6 @@ import { ErrorContent } from '@/shared/ui/error/ErrorContent';
 export const NotFound = () => {
   return (
     <>
-      <Helmet>
-        <title>BooLock - 페이지를 찾을 수 없음</title>
-        <meta
-          name="description"
-          content="요청한 페이지를 찾을 수 없습니다. 다른 페이지를 확인해 주세요."
-        />
-      </Helmet>
       <ErrorContent description={`유효한 페이지가 아닙니다! \n다른 페이지에서 만나요!`} />
     </>
   );

diff --git a/apps/client/src/pages/Workspacepage/WorkspacePage.tsx b/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
@@ -1,6 +1,5 @@
 import { ImageTagModal, CoachMark, WorkspaceContent, WorkspacePageHeader } from '@/widgets';
 import { useGetWorkspace, usePreventLeaveWorkspacePage } from '@/shared/hooks';
-import { Helmet } from 'react-helmet-async';
 import { Loading } from '@/shared/ui';
 import { NotFound } from '@/pages/NotFound/NotFound';
 import { useParams } from 'react-router-dom';
@@ -43,13 +42,6 @@ export const WorkspacePage = () => {
 
   return (
     <>
-      <Helmet>
-        <title>BooLock - 작업 공간</title>
-        <meta
-          name="description"
-          content={`작업 공간 ID: ${workspaceId}에서 HTML과 CSS를 연습해보세요.`}
-        />
-      </Helmet>
       <div className="flex h-screen flex-col">
         {isPending && <Loading />}
         {isCoachMarkOpen && <CoachMark />}