<FEAT> (FE): detail한 부분들 수정 및 구현 #23

package.json

@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
+    "react-helmet": "^6.1.0",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
@@ -59,6 +60,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-helmet": "^6.1.6",
     "@types/react-swipeable-views": "^0.13.1",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",

src/components/SEO.tsx

@@ -0,0 +1,76 @@
+import { Helmet } from 'react-helmet';
+import React from 'react';
+import Logo from '@assets/logo512.png';
+
+const SEO = ({
+  title,
+  description,
+  url,
+  image,
+  me,
+  meta = [],
+}: {
+  title?: string;
+  description?: string;
+  url: string;
+  image?: string;
+  me?: string;
+  meta?: { property: string; content: string }[];
+}) => {
+  return (
+    <Helmet
+      title={title}
+      htmlAttributes={{ lang: 'ko' }}
+      meta={[
+        ...meta,
+        { name: `description`, content: description },
+        {
+          property: 'og:url',
+          content: url,
+        },
+        {
+          property: 'og:type',
+          content: 'website',
+        },
+        {
+          property: 'og:title',
+          content: title,
+        },
+        {
+          property: 'og:description',
+          content: description,
+        },
+        {
+          property: 'og:image',
+          content: image ? image : Logo,
+        },
+        // {
+        //   property: 'fb:app_id',
+        //   content: someFbAppId,
+        // },
+        {
+          property: 'twitter:card',
+          content: 'summary',
+        },
+        {
+          property: 'twitter:creator',
+          content: me ? me : 'unknown',
+        },
+        {
+          property: 'twitter:title',
+          content: title,
+        },
+        {
+          property: 'twitter:description',
+          content: description,
+        },
+        {
+          property: 'twitter:image',
+          content: image ? image : Logo,
+        },
+      ]}
+    />
+  );
+};
+
+export default React.memo(SEO);

src/pages/Main.tsx

@@ -2,12 +2,20 @@ import Banner from '@components/main/Banner';
 import CardGroup from '@components/main/CardGroup';
 import IntroSection from '@components/main/IntroSection';
 import Partners from '@components/main/Partners';
+import SEO from '@components/SEO';
 import { Container } from '@mui/material';
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 
 const Main = () => {
+  const location = useLocation();
   return (
     <div>
+      <SEO
+        title="Welcome MBTIWithUs!"
+        description="다양한 mbti를 만나보세요!"
+        url={location?.pathname}
+      />
       <Banner />
       <Container sx={{ py: 3 }}>
         <Partners />

src/pages/board/BoardDetail.tsx

@@ -16,6 +16,7 @@ import BoardCommentInput from '@components/board/BoardCommentInput';
 import { toast } from 'react-toastify';
 import BoardWriter from '@components/board/BoardWriter';
 import NotFound from '@components/NotFound';
+import SEO from '@components/SEO';
 
 const BoardDetailPage = () => {
   const { id } = useParams();
@@ -103,6 +104,11 @@ const BoardDetailPage = () => {
 
   return (
     <Container sx={{ py: 3 }}>
+      <SEO
+        title={data?.title}
+        description={data?.content}
+        url={location?.pathname}
+      />
       {isLoading ? (
         <OverlayLoading isLoading />
       ) : error || !data ? (

src/pages/board/index.tsx

@@ -9,6 +9,7 @@ import api from '@libs/api';
 import BoardWriter from '@components/board/BoardWriter';
 import { useLocation } from 'react-router-dom';
 import useIntersection from '@hooks/useIntersection';
+import SEO from '@components/SEO';
 
 const LIMIT = 10;
 
@@ -69,6 +70,11 @@ const BoardPage = () => {
 
   return (
     <Container sx={{ py: 3 }}>
+      <SEO
+        title="서로 다른 MBTI의 사람들과 소통하세요!"
+        description="여러 사람들과 만날 수 있습니다"
+        url={location?.pathname}
+      />
       {isLoading ? (
         <OverlayLoading isLoading />
       ) : (

src/pages/profile/Result.tsx

@@ -2,18 +2,28 @@ import ProgressRow from '@components/mbti/ProgressRow';
 import { UserStateContext } from '@contexts/UserContext';
 import { Avatar, Box, Container, Divider, Typography } from '@mui/material';
 import LinkMui from '@mui/material/Link';
-import React, { useContext } from 'react';
-import { useLocation } from 'react-router-dom';
+import React, { useContext, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { IMbtiResult } from 'types';
 import { getMbtiResult2String } from '@libs/mbti';
 
 const ResultPage = () => {
   const location = useLocation();
   const result: IMbtiResult = location.state;
   const auth = useContext(UserStateContext);
-
   const mbti = getMbtiResult2String(result);
 
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (auth?.userLoading) {
+      return;
+    }
+
+    if (!auth?.token) {
+      navigate('/login');
+    }
+  }, [auth]);
+
   return (
     <Container sx={{ py: 3 }}>
       <Container maxWidth="sm">