Merge branch 'master' of http://gitea.palntour.com/pav/pav-fe-kac

hydratable.config.json

@@ -0,0 +1,3 @@
+{
+  "crawlingUrls": ["/"]
+}

package.json

@@ -81,6 +81,7 @@
     "react-feather": "~2.0.3",
     "react-flatpickr": "3.9.1",
     "react-google-maps": "^9.4.5",
+    "react-helmet-async": "1.3.0",
     "react-hook-form": "6.15.1",
     "react-icons": "^4.2.0",
     "react-indiana-drag-scroll": "^2.0.1",
@@ -127,7 +128,9 @@
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
-    "eject": "react-app-rewired eject"
+    "eject": "react-app-rewired eject",
+    "postbuild": "react-hydratable",
+    "preview": "react-hydratable --preview"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -150,6 +153,7 @@
     "react-app-rewire-postcss": "^3.0.2",
     "react-app-rewire-sass-rule": "^2.1.1",
     "react-app-rewired": "^2.1.6",
+    "react-hydratable": "1.3.0",
     "sass-loader": "^8.0.2",
     "typescript": "^4.3.5"
   },

src/index.js

@@ -2,6 +2,9 @@
 import { Suspense, lazy } from 'react';
 import ReactDOM from 'react-dom';
 
+// ** React Helmet
+import { HelmetProvider } from 'react-helmet-async';
+
 // ** Redux Imports
 import { Provider } from 'react-redux';
 import { store } from './redux/storeConfig/store';
@@ -37,19 +40,26 @@ import * as serviceWorker from './serviceWorker';
 
 // ** Lazy load app
 const LazyApp = lazy(() => import('./App'));
-
+const rootElement = document.getElementById('root');
-ReactDOM.render(
+const element = (
   <Provider store={store}>
     <Suspense fallback={<Spinner />}>
       <ThemeContext>
-        <LazyApp />
+        <HelmetProvider>
+          <LazyApp />
+        </HelmetProvider>
         <ToastContainer newestOnTop />
       </ThemeContext>
     </Suspense>
-  </Provider>,
+  </Provider>
-  document.getElementById('root')
 );
 
+if (rootElement.hasChildNodes()) {
+  ReactDOM.hydrate(element, rootElement);
+} else {
+  ReactDOM.render(element, rootElement);
+}
+
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA

src/views/control/index.js

@@ -1,9 +1,13 @@
+import { Helmet } from 'react-helmet-async';
 import { MapControl } from '../../components/map/MapControl';
 import ControlMain from './main/ControlMain';
 
 const ControlView = () => {
   return (
     <div className='pal-container'>
+      {/* <Helmet>
+        <title>관제시스템</title>
+      </Helmet> */}
       <div className='map'>
         <MapControl />
       </div>

src/views/main/MainDashboard.js

@@ -1,11 +1,18 @@
+import { Helmet } from 'react-helmet-async';
 // ** Styles
 import '@styles/react/libs/flatpickr/flatpickr.scss';
-import React from 'react';
 import '../../assets/css/custom.css';
 import { MainDashContainer } from '../../containers/main/dash/MainDashContainer';
 
 const MainDashboard = props => {
-  return <MainDashContainer />;
+  return (
+    <>
+      {/* <Helmet>
+        <title>메인보드</title>
+      </Helmet> */}
+      <MainDashContainer />
+    </>
+  );
 };
 
 export default MainDashboard;