[Feature] SEO title을 설정하라 (#351)

- SEO title 설정 - Progress bar 스피너 제거 - remirror update dependencies
mbti-nf-team · Apr 27, 2022 · dee7b21 · dee7b21 · vercel · Apr 27, 2022
1 parent 7958802
commit dee7b21
Show file tree

Hide file tree

Showing 15 changed files with 735 additions and 625 deletions.
diff --git a/next-seo.config.ts b/next-seo.config.ts
@@ -0,0 +1,23 @@
+import { DefaultSeoProps } from 'next-seo';
+
+const defaultTitle = '스터디와 사이드 프로젝트, Conners';
+const defaultDescription = '스터디와 사이드 프로젝트 코너스와 함께 시작하세요!';
+const defaultUrl = 'https://conners.io';
+
+const defaultNextSeoConfig: DefaultSeoProps = {
+  title: defaultTitle,
+  description: defaultDescription,
+  canonical: defaultUrl,
+  openGraph: {
+    type: 'website',
+    locale: 'ko_KR',
+    url: defaultUrl,
+    title: defaultTitle,
+    description: defaultDescription,
+  },
+  twitter: {
+    cardType: 'summary_large_image',
+  },
+};
+
+export default defaultNextSeoConfig;
diff --git a/package.json b/package.json
@@ -45,8 +45,8 @@
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^2.8.3",
     "@react-query-firebase/auth": "^0.3.4",
-    "@remirror/pm": "^1.0.14",
-    "@remirror/react": "^1.0.28",
+    "@remirror/pm": "^1.0.16",
+    "@remirror/react": "^1.0.35",
     "@remirror/styles": "^1.1.3",
     "dayjs": "^1.10.7",
     "emotion-normalize": "^11.0.1",
@@ -56,6 +56,7 @@
     "hast-util-to-string": "^2.0.0",
     "nanoid": "^3.3.1",
     "next": "^12.1.0",
+    "next-seo": "^5.4.0",
     "nextjs-progressbar": "^0.0.14",
     "nookies": "^2.5.2",
     "ramda": "^0.27.1",
@@ -75,7 +76,7 @@
     "refractor": "^4.5.0",
     "rehype-parse": "^8.0.4",
     "rehype-stringify": "^9.0.3",
-    "remirror": "^1.0.71",
+    "remirror": "^1.0.77",
     "sanitize-html": "^2.7.0",
     "svgmoji": "^3.2.0",
     "unified": "^10.1.1",

diff --git a/src/components/common/Core.tsx b/src/components/common/Core.tsx
@@ -26,6 +26,12 @@ function Core(): ReactElement {
     <>
       <NextNProgress
         color={palette.success}
+        options={{
+          showSpinner: false,
+          easing: 'ease',
+          speed: 300,
+          trickle: false,
+        }}
       />
       <GlobalStyles />
       <StyledToastContainer

diff --git a/src/pages/404.page.tsx b/src/pages/404.page.tsx
@@ -1,5 +1,7 @@
 import { ReactElement } from 'react';
 
+import { NextSeo } from 'next-seo';
+
 import EmptyStateArea from '@/components/common/EmptyStateArea';
 import HeaderWrapper from '@/components/common/HeaderWrapper';
 
@@ -8,6 +10,9 @@ import NotFoundIcon from '../assets/icons/img_404.svg';
 function Custom404(): ReactElement {
   return (
     <>
+      <NextSeo
+        title="Conners - 404"
+      />
       <HeaderWrapper
         hasBackground
         isScrollTop

diff --git a/src/pages/500.page.tsx b/src/pages/500.page.tsx
@@ -1,5 +1,7 @@
 import { ReactElement } from 'react';
 
+import { NextSeo } from 'next-seo';
+
 import EmptyStateArea from '@/components/common/EmptyStateArea';
 import HeaderWrapper from '@/components/common/HeaderWrapper';
 
@@ -8,6 +10,9 @@ import UnknownErrorIcon from '../assets/icons/img_500.svg';
 function Custom500(): ReactElement {
   return (
     <>
+      <NextSeo
+        title="Conners - 500"
+      />
       <HeaderWrapper
         hasBackground
         isScrollTop

diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
@@ -5,11 +5,14 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
+import { DefaultSeo } from 'next-seo';
 import { RecoilRoot } from 'recoil';
 
 import Core from '@/components/common/Core';
 import SignInModalContainer from '@/containers/auth/SignInModalContainer';
 
+import defaultNextSeoConfig from '../../next-seo.config';
+
 import '../assets/css/dracula-prism.min.css';
 
 type NextPageWithLayout = NextPage & {
@@ -32,18 +35,21 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   }));
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <Hydrate state={pageProps.dehydratedState}>
-        <RecoilRoot>
-          <Core />
-          <SignInModalContainer />
-          {getLayout((
-            <Component {...pageProps} />
-          ))}
-        </RecoilRoot>
-        <ReactQueryDevtools initialIsOpen={false} />
-      </Hydrate>
-    </QueryClientProvider>
+    <>
+      <DefaultSeo {...defaultNextSeoConfig} />
+      <QueryClientProvider client={queryClient}>
+        <Hydrate state={pageProps.dehydratedState}>
+          <RecoilRoot>
+            <Core />
+            <SignInModalContainer />
+            {getLayout((
+              <Component {...pageProps} />
+            ))}
+          </RecoilRoot>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </Hydrate>
+      </QueryClientProvider>
+    </>
   );
 }
 

diff --git a/src/pages/alarm.page.tsx b/src/pages/alarm.page.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 
 import { GetServerSideProps } from 'next';
+import { NextSeo } from 'next-seo';
 
 import AlarmListContainer from '@/containers/alarm/AlarmListContainer';
 import HeaderContainer from '@/containers/common/HeaderContainer';
@@ -12,6 +13,9 @@ export const getServerSideProps: GetServerSideProps = authenticatedServerSidePro
 function AlarmPage(): ReactElement {
   return (
     <>
+      <NextSeo
+        title="Conners - 알람"
+      />
       <HeaderContainer />
       <DetailLayout>
         <AlarmListContainer />

diff --git a/src/pages/detail/[id].page.tsx b/src/pages/detail/[id].page.tsx
@@ -3,13 +3,15 @@ import { dehydrate, QueryClient } from 'react-query';
 
 import { FirebaseError } from 'firebase/app';
 import { GetServerSideProps } from 'next';
+import { NextSeo } from 'next-seo';
 
 import RecruitCompleteModal from '@/components/detail/modal/RecruitCompleteModal';
 import RecruitCompleteCanvasConfetti from '@/components/detail/RecruitCompleteCanvasConfetti';
 import HeaderContainer from '@/containers/common/HeaderContainer';
 import CommentsContainer from '@/containers/detail/CommentsContainer';
 import DetailContentsContainer from '@/containers/detail/DetailContentsContainer';
 import DetailHeaderContainer from '@/containers/detail/DetailHeaderContainer';
+import useFetchGroup from '@/hooks/api/group/useFetchGroup';
 import useIncreaseView from '@/hooks/api/group/useIncreaseView';
 import { GroupQuery } from '@/models';
 import { Group } from '@/models/group';
@@ -45,9 +47,14 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 
 function DetailPage(): ReactElement {
   useIncreaseView();
+  const { data: group } = useFetchGroup();
 
   return (
     <>
+      <NextSeo
+        title={`Conners - ${group.title}`}
+        description={group.shortDescription}
+      />
       <HeaderContainer />
       <DetailLayout>
         <DetailHeaderContainer />

diff --git a/src/pages/detail/[id]/applicants.page.tsx b/src/pages/detail/[id]/applicants.page.tsx
@@ -3,6 +3,7 @@ import { dehydrate, QueryClient } from 'react-query';
 
 import { FirebaseError } from 'firebase/app';
 import { GetServerSideProps } from 'next';
+import { NextSeo } from 'next-seo';
 import nookies from 'nookies';
 
 import ApplicationStatusContainer from '@/containers/applicants/ApplicationStatusContainer';
@@ -71,6 +72,9 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 function ApplicantsPage(): ReactElement {
   return (
     <>
+      <NextSeo
+        title="Conners - 신청현황 보기"
+      />
       <ApplicationStatusHeaderContainer />
       <ApplicationStatusContainer />
     </>

diff --git a/src/pages/myinfo/applied.page.tsx b/src/pages/myinfo/applied.page.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 
 import { GetServerSideProps } from 'next';
+import { NextSeo } from 'next-seo';
 
 import getMyInfoLayout from '@/components/myInfo/MyInfoLayout';
 import AppliedGroupsContainer from '@/containers/myInfo/AppliedGroupsContainer';
@@ -10,7 +11,12 @@ export const getServerSideProps: GetServerSideProps = authenticatedServerSidePro
 
 function AppliedPage(): ReactElement {
   return (
-    <AppliedGroupsContainer />
+    <>
+      <NextSeo
+        title="Conners - 내 정보, 신청한 팀"
+      />
+      <AppliedGroupsContainer />
+    </>
   );
 }
 

diff --git a/src/pages/myinfo/recruited.page.tsx b/src/pages/myinfo/recruited.page.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 
 import { GetServerSideProps } from 'next';
+import { NextSeo } from 'next-seo';
 
 import getMyInfoLayout from '@/components/myInfo/MyInfoLayout';
 import RecruitedGroupsContainer from '@/containers/myInfo/RecruitedGroupsContainer';
@@ -10,7 +11,12 @@ export const getServerSideProps: GetServerSideProps = authenticatedServerSidePro
 
 function RecruitedPage(): ReactElement {
   return (
-    <RecruitedGroupsContainer />
+    <>
+      <NextSeo
+        title="Conners - 내 정보, 모집한 팀"
+      />
+      <RecruitedGroupsContainer />
+    </>
   );
 }
 

diff --git a/src/pages/myinfo/setting.page.tsx b/src/pages/myinfo/setting.page.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 
 import { GetServerSideProps } from 'next';
+import { NextSeo } from 'next-seo';
 
 import getMyInfoLayout from '@/components/myInfo/MyInfoLayout';
 import MyInfoSettingContainer from '@/containers/myInfo/MyInfoSettingContainer';
@@ -10,7 +11,12 @@ export const getServerSideProps: GetServerSideProps = authenticatedServerSidePro
 
 function SettingPage(): ReactElement {
   return (
-    <MyInfoSettingContainer />
+    <>
+      <NextSeo
+        title="Conners - 내 정보, 내 정보 수정"
+      />
+      <MyInfoSettingContainer />
+    </>
   );
 }
 

diff --git a/src/pages/signup.page.tsx b/src/pages/signup.page.tsx
@@ -1,11 +1,16 @@
 import { ReactElement } from 'react';
 
+import { NextSeo } from 'next-seo';
+
 import SignUpContainer from '@/containers/auth/SignUpContainer';
 import HeaderContainer from '@/containers/common/HeaderContainer';
 
 function SignUpPage(): ReactElement {
   return (
     <>
+      <NextSeo
+        title="Conners - 시작하기"
+      />
       <HeaderContainer />
       <SignUpContainer />
     </>

diff --git a/src/pages/write.page.tsx b/src/pages/write.page.tsx
@@ -1,5 +1,7 @@
 import React, { ReactElement } from 'react';
 
+import { NextSeo } from 'next-seo';
+
 import RemirorEditorProvider from '@/components/write/RemirorEditorProvider';
 import PublishModalContainer from '@/containers/write/PublishModalContainer';
 import WriteFormContainer from '@/containers/write/WriteFormContainer';
@@ -9,6 +11,9 @@ import { DetailLayout } from '@/styles/Layout';
 function WritePage(): ReactElement {
   return (
     <>
+      <NextSeo
+        title="Conners - 팀 모집하기"
+      />
       <WriteHeaderContainer />
       <DetailLayout>
         <RemirorEditorProvider>