[Feature] Set title with react-helmet all pages

package.json

@@ -39,6 +39,7 @@
     "react-content-loader": "^5.1.4",
     "react-dom": "^17.0.1",
     "react-draft-wysiwyg": "^1.14.5",
+    "react-helmet": "^6.1.0",
     "react-icons": "^4.1.0",
     "react-moment": "^1.0.0",
     "react-redux": "^7.2.2",

src/containers/introduce/IntroduceHeaderContainer.jsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useState } from 'react';
 
+import { Helmet } from 'react-helmet';
+
 import { useInterval } from 'react-use';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -57,24 +59,29 @@ const IntroduceHeaderContainer = () => {
   }
 
   return (
-    <IntroduceHeader group={group}>
-      <ApplicantViewButton
-        user={user}
-        group={group}
-        realTime={realTime}
-        applyFields={applyFields}
-        onApply={onApplyStudy}
-        onApplyCancel={onApplyCancel}
-        clearForm={clearApplyForm}
-        onChangeApplyFields={onChangeApplyFields}
-      />
-      <ModeratorViewButton
-        user={user}
-        group={group}
-        realTime={realTime}
-        onUpdateConfirm={onUpdateConfirmParticipant}
-      />
-    </IntroduceHeader>
+    <>
+      <Helmet>
+        <title>{group.title}</title>
+      </Helmet>
+      <IntroduceHeader group={group}>
+        <ApplicantViewButton
+          user={user}
+          group={group}
+          realTime={realTime}
+          applyFields={applyFields}
+          onApply={onApplyStudy}
+          onApplyCancel={onApplyCancel}
+          clearForm={clearApplyForm}
+          onChangeApplyFields={onChangeApplyFields}
+        />
+        <ModeratorViewButton
+          user={user}
+          group={group}
+          realTime={realTime}
+          onUpdateConfirm={onUpdateConfirmParticipant}
+        />
+      </IntroduceHeader>
+    </>
   );
 };
 

src/pages/LoginPage.jsx

@@ -1,9 +1,16 @@
 import React from 'react';
 
+import { Helmet } from 'react-helmet';
+
 import LoginFormContainer from '../containers/auth/LoginFormContainer';
 
 const LoginPage = () => (
-  <LoginFormContainer />
+  <>
+    <Helmet>
+      <title>로그인</title>
+    </Helmet>
+    <LoginFormContainer />
+  </>
 );
 
 export default LoginPage;

src/pages/MainPage.jsx

@@ -1,13 +1,20 @@
 import React from 'react';
 
+import { Helmet } from 'react-helmet';
+
 import Responsive from '../styles/Responsive';
 
 import StudyGroupsContainer from '../containers/groups/StudyGroupsContainer';
 
 const MainPage = () => (
-  <Responsive>
-    <StudyGroupsContainer />
-  </Responsive>
+  <>
+    <Helmet>
+      <title>제목(미정)</title>
+    </Helmet>
+    <Responsive>
+      <StudyGroupsContainer />
+    </Responsive>
+  </>
 );
 
 export default React.memo(MainPage);

src/pages/RegisterPage.jsx

@@ -1,9 +1,16 @@
 import React from 'react';
 
+import { Helmet } from 'react-helmet';
+
 import RegisterFormContainer from '../containers/auth/RegisterFormContainer';
 
 const RegisterPage = () => (
-  <RegisterFormContainer />
+  <>
+    <Helmet>
+      <title>회원가입</title>
+    </Helmet>
+    <RegisterFormContainer />
+  </>
 );
 
 export default RegisterPage;

src/pages/WritePage.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Helmet } from 'react-helmet';
+
 import styled from '@emotion/styled';
 
 import Responsive from '../styles/Responsive';
@@ -14,11 +16,17 @@ const WritePageWrapper = styled(Responsive)`
 `;
 
 const IntroducePage = () => (
-  <WritePageWrapper>
-    <WriteFormContainer />
-    <WriteEditorContainer />
-    <TagFormContainer />
-    <WriteButtonsContainer />
-  </WritePageWrapper>
+  <>
+    <Helmet>
+      <title>스터디 소개글 작성</title>
+    </Helmet>
+    <WritePageWrapper>
+      <WriteFormContainer />
+      <WriteEditorContainer />
+      <TagFormContainer />
+      <WriteButtonsContainer />
+    </WritePageWrapper>
+  </>
+
 );
 export default IntroducePage;