BrainPix · minjeong9919 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025
diff --git a/index.html b/index.html
@@ -2,20 +2,35 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <title>BrainPIX 아이디어 거래 & 협업 플랫폼</title>
     <meta
-      name="description"
-      content="brainPix에서 누구나 자신의 아이디어를 거래하고, 딱 맞는 협력자를 찾아요." />
+      name="keywords"
+      content="브레인픽스, brainpix, 아이디어 거래, 협업" />
     <meta
-      http-equiv="Generator"
-      content="Visual Studio Code" />
+      name="description"
+      content="BrainPIX에서 누구나 자신의 아이디어를 거래하고, 딱 맞는 협력자를 찾아요." />
     <link
       rel="icon"
       type="image/svg+xml"
       href="/src/assets/icons/logo.svg" />
     <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0" />
-    <title>BrainPIX 아이디어 거래 & 협업 플랫폼</title>
+      property="og:type"
+      content="website" />
+    <meta
+      property="og:name"
+      content="BrainPIX" />
+    <meta
+      property="og:image"
+      content="/src/assets/icons/logo.svg" />
+    <meta
+      property="og:image:width"
+      content="250" />
+    <meta
+      property="og:image:height"
+      content="100" />
+    <meta
+      property="og:locale"
+      content="ko_KR" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.54.2",
     "react-quill-new": "^3.3.3",
     "react-router-dom": "^7.1.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -5,19 +5,22 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { ToastProvider } from './contexts/toastContext';
 import { Suspense } from 'react';
 import LoadingPage from './pages/loading/LoadingPage';
+import { HelmetProvider } from 'react-helmet-async';
 
 function App() {
   const queryClient = new QueryClient();
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools initialIsOpen={false} />
-      <ToastProvider>
-        <Suspense fallback={<LoadingPage />}>
-          <RouterProvider router={routes}></RouterProvider>;
-        </Suspense>
-      </ToastProvider>
-    </QueryClientProvider>
+    <HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools initialIsOpen={false} />
+        <ToastProvider>
+          <Suspense fallback={<LoadingPage />}>
+            <RouterProvider router={routes}></RouterProvider>;
+          </Suspense>
+        </ToastProvider>
+      </QueryClientProvider>
+    </HelmetProvider>
   );
 }
 

diff --git a/src/assets/images/logoImage.png b/src/assets/images/logoImage.png
diff --git a/src/assets/images/postCardImage.png b/src/assets/images/postCardImage.png
diff --git a/src/pages/collaboration/CollaborationMain.tsx b/src/pages/collaboration/CollaborationMain.tsx
@@ -11,6 +11,7 @@ import { GetCollaborationListRequest } from '../../types/collaborationType';
 import DownButton from '../../assets/icons/categoryDownButton.svg?react';
 import UpButton from '../../assets/icons/categoryUpButton.svg?react';
 import LoadingPage from '../loading/LoadingPage';
+import { MetaTag } from '../../seoMetaTag';
 
 const categoryMapReverse: Record<string, string> = {
   '광고 · 홍보': 'ADVERTISING_PROMOTION',
@@ -177,6 +178,12 @@ const CollaborationMain = () => {
 
   return (
     <>
+      <MetaTag
+        description='협업을 위한 사람을 모집해요.'
+        keywords='협업 광장, 협업 구인'
+        title='협업 광장'
+        url='/collaboration'
+      />
       <div className={styles.ideaMarketHeader}>
         <div className={styles.titleWrapper}>
           <span className={styles.mainTitle}>협업 광장</span>

diff --git a/src/pages/collaboration/CollaborationRegister.tsx b/src/pages/collaboration/CollaborationRegister.tsx
@@ -98,12 +98,6 @@ const OPTIONS = [
   '기타',
 ];
 
-// interface RecruitmentField {
-//   id: number;
-//   field: string;
-//   numberOfPeople: number;
-// }
-
 const CollaborationRegister = () => {
   const navigate = useNavigate();
   const [category, setCategory] = useState<string>('');

diff --git a/src/pages/collaboration/PostDetailWithLink.tsx b/src/pages/collaboration/PostDetailWithLink.tsx
@@ -16,6 +16,7 @@ import { useQuery } from '@tanstack/react-query';
 import { getCollaborationDetail } from '../../apis/detailPageAPI';
 import { CollaborationDetail } from '../../types/detailPageType';
 import { getUserIdFromToken } from '../../utils/auth';
+import { MetaTag } from '../../seoMetaTag';
 
 const PostDetailWithLink = () => {
   const { collaborationId } = useParams<{ collaborationId: string }>();
@@ -90,6 +91,12 @@ const PostDetailWithLink = () => {
 
   return (
     <>
+      <MetaTag
+        description={data?.title}
+        keywords={data?.title}
+        title={`${data.writer.name}님의 글`}
+        url={`/collaboration/postdetailwithlink/${collaborationId}`}
+      />
       <div className={styles.margin}>
         <ProfileHeader {...profileData} />
         <PostHeader

diff --git a/src/seoMetaTag.tsx b/src/seoMetaTag.tsx
@@ -0,0 +1,65 @@
+import { Helmet } from 'react-helmet-async';
+import Logo from './assets/images/logoImage.png';
+
+interface Props {
+  title: string;
+  description: string;
+  keywords: string;
+  image?: string;
+  url: string;
+}
+
+export const MetaTag = (data: Props) => {
+  const { title, description, keywords, image, url } = data;
+
+  return (
+    <Helmet>
+      <title>{`BrainPIX ${title}`}</title>
+      <link
+        rel='icon'
+        type='image/svg+xml'
+        href='/src/assets/icons/logo.svg'
+      />
+      <meta
+        name='keywords'
+        content={keywords}
+      />
+      <meta
+        name='description'
+        content={description}
+      />
+      <meta
+        property='og:type'
+        content='website'
+      />
+      <meta
+        property='og:title'
+        content={title}
+      />
+      <meta
+        property='og:site_name'
+        content={title}
+      />
+      <meta
+        property='og:description'
+        content={description}
+      />
+      <meta
+        property='og:image'
+        content={image || Logo}
+      />
+      <meta
+        property='og:image:width'
+        content='250'
+      />
+      <meta
+        property='og:image:height'
+        content='200'
+      />
+      <meta
+        property='og:url'
+        content={url}
+      />
+    </Helmet>
+  );
+};