From 227445109f94f9b1a0359bb0381d8746b99ca2f1 Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Sun, 13 Dec 2020 00:21:58 +0900
Subject: [PATCH] [Feature] Set title with react-helmet all pages

---
 package-lock.json                             | 21 +++++++++
 package.json                                  |  1 +
 .../introduce/IntroduceHeaderContainer.jsx    | 43 +++++++++++--------
 src/pages/LoginPage.jsx                       |  9 +++-
 src/pages/MainPage.jsx                        | 13 ++++--
 src/pages/RegisterPage.jsx                    |  9 +++-
 src/pages/WritePage.jsx                       | 20 ++++++---
 7 files changed, 87 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0bd882b..4ead7cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11289,6 +11289,22 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
     "react-icons": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.1.0.tgz",
@@ -11347,6 +11363,11 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-side-effect": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
+    },
     "react-universal-interface": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
diff --git a/package.json b/package.json
index 9de6f09..05eb15b 100644
--- a/package.json
+++ b/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",
diff --git a/src/containers/introduce/IntroduceHeaderContainer.jsx b/src/containers/introduce/IntroduceHeaderContainer.jsx
index 0034a50..d903dbd 100644
--- a/src/containers/introduce/IntroduceHeaderContainer.jsx
+++ b/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>
+    </>
   );
 };
 
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index 913f426..f662149 100644
--- a/src/pages/LoginPage.jsx
+++ b/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;
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index a2107fa..da3c0f3 100644
--- a/src/pages/MainPage.jsx
+++ b/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);
diff --git a/src/pages/RegisterPage.jsx b/src/pages/RegisterPage.jsx
index e2a582a..697686f 100644
--- a/src/pages/RegisterPage.jsx
+++ b/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;
diff --git a/src/pages/WritePage.jsx b/src/pages/WritePage.jsx
index 47fa9a0..391aa82 100644
--- a/src/pages/WritePage.jsx
+++ b/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;