Merge pull request #427 from sharemindteam/feat/helmet_426

[Feat] SEO를 위한 react-helmet 추가
sharemindteam · Dec 12, 2024 · a2ec0d1 · a2ec0d1
2 parents 9a604fd + 8930042
commit a2ec0d1
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 80 deletions.
diff --git a/generateSitemap.mjs b/generateSitemap.mjs
@@ -16,7 +16,6 @@ const generateSitemap = async () => {
     { url: '/open-consult', changefreq: 'always', priority: 1.0 },
     { url: '/open-consult/likes', changefreq: 'always', priority: 0.8 },
     { url: '/open-consult/recents', changefreq: 'always', priority: 0.8 },
-    { url: '/categorySearch', changefreq: 'daily', priority: 0.7 },
     { url: '/service', changefreq: 'never', priority: 0.8 },
     { url: '/service-unavailable', changefreq: 'monthly', priority: 0.5 },
   ];

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react-cookie": "^7.0.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-microsoft-clarity": "^1.2.0",
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
@@ -69,6 +70,7 @@
   },
   "devDependencies": {
     "@types/react-dom": "^18.2.18",
+    "@types/react-helmet": "^6.1.11",
     "husky": "4"
   }
 }
diff --git a/src/components/Buyer/BuyerOpenConsultDetail/MainQuestionSection.tsx b/src/components/Buyer/BuyerOpenConsultDetail/MainQuestionSection.tsx
@@ -18,6 +18,8 @@ import { deletePostLikes, deletePostScraps } from 'api/delete';
 import { formattedMessage } from 'utils/formattedMessage';
 import { Flex } from 'components/Common/Flex';
 
+import { Helmet } from 'react-helmet';
+
 //
 //
 //
@@ -128,40 +130,46 @@ function MainQuestionSection() {
   //
 
   return (
-    <MainQuestionWrapper>
-      <MainQuestionText>
-        <div className="row1">
-          <Body1>{card?.title}</Body1>
-          {!card?.isPublic && (
-            <PrivateSign>
-              <LockIcon />
-              <Caption1 color={Grey3}>비공개</Caption1>
-            </PrivateSign>
-          )}
-        </div>
-        <Space height="1.2rem" />
-        <div className="row2">{formattedMessage(card?.content)}</div>
-        <Space height="0.8rem" />
-        <div className="row3">
-          <Caption2 color={Grey2}>{card?.updatedAt}</Caption2>
-          <Circle />
-          <Caption2 color={Grey2}>{card?.consultCategory}</Caption2>
-        </div>
-        <Space height="1rem" />
-      </MainQuestionText>
-      <Flex gap="1rem" justify="flex-end">
-        <ButtonItem onClick={handleClickLikeButton}>
-          {isLike ? <HeartIcon /> : <HeartEmptyIcon />}
-
-          <Button2 color={Grey2}>{card?.totalLike}</Button2>
-        </ButtonItem>
-        <ButtonItem onClick={handleClickScrapButton}>
-          {isSave ? <SaveIcon /> : <SaveEmptyIcon />}
-
-          <Button2 color={Grey2}>{card?.totalScrap}</Button2>
-        </ButtonItem>
-      </Flex>
-    </MainQuestionWrapper>
+    <>
+      <Helmet>
+        <title>{`${card?.title} | 셰어마인드 공개 상담`}</title>
+        <meta name="description" content={card?.content} />
+      </Helmet>
+      <MainQuestionWrapper>
+        <MainQuestionText>
+          <div className="row1">
+            <Body1>{card?.title}</Body1>
+            {!card?.isPublic && (
+              <PrivateSign>
+                <LockIcon />
+                <Caption1 color={Grey3}>비공개</Caption1>
+              </PrivateSign>
+            )}
+          </div>
+          <Space height="1.2rem" />
+          <div className="row2">{formattedMessage(card?.content)}</div>
+          <Space height="0.8rem" />
+          <div className="row3">
+            <Caption2 color={Grey2}>{card?.updatedAt}</Caption2>
+            <Circle />
+            <Caption2 color={Grey2}>{card?.consultCategory}</Caption2>
+          </div>
+          <Space height="1rem" />
+        </MainQuestionText>
+        <Flex gap="1rem" justify="flex-end">
+          <ButtonItem onClick={handleClickLikeButton}>
+            {isLike ? <HeartIcon /> : <HeartEmptyIcon />}
+
+            <Button2 color={Grey2}>{card?.totalLike}</Button2>
+          </ButtonItem>
+          <ButtonItem onClick={handleClickScrapButton}>
+            {isSave ? <SaveIcon /> : <SaveEmptyIcon />}
+
+            <Button2 color={Grey2}>{card?.totalScrap}</Button2>
+          </ButtonItem>
+        </Flex>
+      </MainQuestionWrapper>
+    </>
   );
 }
 

diff --git a/src/pages/Buyer/BuyerCounselorProfile.tsx b/src/pages/Buyer/BuyerCounselorProfile.tsx
@@ -12,6 +12,7 @@ import {
 
 import { Space } from 'components/Common/Space';
 import { useLayoutEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
 import { AppendCategoryType } from 'utils/AppendCategoryType';
@@ -102,52 +103,60 @@ export const BuyerCounselorProfile = () => {
   if (id !== undefined) {
     const counselorId = parseInt(id, 10);
     return (
-      <Wrapper>
-        <CounselorProfileHeader />
-        <Body>
-          <CounselorProfileCard
-            nickname={profileData.nickname}
-            level={profileData.level}
-            rating={profileData.ratingAverage}
-            reviewNumber={profileData.totalReview}
-            consultStyle={consultStyleToCharNum(profileData.consultStyle) || 9}
-            totalConsult={profileData.totalConsult}
-          />
-          <CounselorProfileNav
-            isInfo={isInfo}
-            setIsInfo={setIsInfo}
-            reviewNumber={profileData.totalReview}
+      <>
+        <Helmet>
+          <title>{`${profileData.nickname} | 셰어마인드 상담사 프로필`}</title>
+          <meta name="description" content={profileData.experience} />
+        </Helmet>
+        <Wrapper>
+          <CounselorProfileHeader />
+          <Body>
+            <CounselorProfileCard
+              nickname={profileData.nickname}
+              level={profileData.level}
+              rating={profileData.ratingAverage}
+              reviewNumber={profileData.totalReview}
+              consultStyle={
+                consultStyleToCharNum(profileData.consultStyle) || 9
+              }
+              totalConsult={profileData.totalConsult}
+            />
+            <CounselorProfileNav
+              isInfo={isInfo}
+              setIsInfo={setIsInfo}
+              reviewNumber={profileData.totalReview}
+            />
+            {isInfo ? (
+              <>
+                <CounselorInfo
+                  consultType={profileData.consultTypes}
+                  consultTimes={profileData.consultTimes}
+                  letterPrice={profileData.consultCosts.편지}
+                  chattingPrice={profileData.consultCosts.채팅}
+                />
+                <CounselorExp
+                  experience={profileData.experience}
+                  introduction={profileData.introduction}
+                />
+                <CounselorTypeSection
+                  tagList={AppendCategoryType(
+                    profileData.consultCategories,
+                    profileData.consultStyle,
+                  )}
+                />
+                <Space height="5.2rem" />
+              </>
+            ) : (
+              <CounselorReview counselorId={counselorId} />
+            )}
+          </Body>
+          <CounselorFooter
+            counselorId={counselorId}
+            isWishList={profileData.isWishList}
+            consultTypes={profileData.consultTypes}
           />
-          {isInfo ? (
-            <>
-              <CounselorInfo
-                consultType={profileData.consultTypes}
-                consultTimes={profileData.consultTimes}
-                letterPrice={profileData.consultCosts.편지}
-                chattingPrice={profileData.consultCosts.채팅}
-              />
-              <CounselorExp
-                experience={profileData.experience}
-                introduction={profileData.introduction}
-              />
-              <CounselorTypeSection
-                tagList={AppendCategoryType(
-                  profileData.consultCategories,
-                  profileData.consultStyle,
-                )}
-              />
-              <Space height="5.2rem" />
-            </>
-          ) : (
-            <CounselorReview counselorId={counselorId} />
-          )}
-        </Body>
-        <CounselorFooter
-          counselorId={counselorId}
-          isWishList={profileData.isWishList}
-          consultTypes={profileData.consultTypes}
-        />
-      </Wrapper>
+        </Wrapper>
+      </>
     );
   } else {
     return <>404 error</>;