Merge pull request #306 from SCBJ-7/feature/#305-hydrateRoot

[#305] hydrateRoot로 변경

package.json

@@ -12,7 +12,8 @@
     "preview": "vite preview",
     "prepare": "husky install",
     "test": "vitest",
-    "generate-pwa-assets": "pwa-assets-generator --preset minimal public/logo.svg"
+    "generate-pwa-assets": "pwa-assets-generator --preset minimal public/logo.svg",
+    "postbuild": "react-snap"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
@@ -37,6 +38,7 @@
     "react-icons": "^4.12.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.21.1",
+    "react-snap": "^1.23.0",
     "react-window": "^1.8.10",
     "styled-components": "^6.1.6",
     "zustand": "^4.4.7"
@@ -83,5 +85,11 @@
     "workerDirectory": [
       "public"
     ]
+  },
+  "reactSnap": {
+    "include": [
+      "/"
+    ],
+    "source": "./dist"
   }
 }

src/main.tsx

@@ -1,6 +1,5 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { hydrate } from "react-dom";
 import ReactDOM from "react-dom/client";
 import { HelmetProvider } from "react-helmet-async";
 import { ThemeProvider } from "styled-components";
@@ -35,7 +34,8 @@ if ("serviceWorker" in navigator) {
 
 const rootElement = document.getElementById("root");
 if (rootElement?.hasChildNodes()) {
-  hydrate(
+  ReactDOM.hydrateRoot(
+    rootElement,
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme}>
         <GlobalStyle />
@@ -45,7 +45,6 @@ if (rootElement?.hasChildNodes()) {
       </ThemeProvider>
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>,
-    rootElement,
   );
 } else {
   ReactDOM.createRoot(document.getElementById("root")!).render(