Merge pull request #108 from Kusitms-29th-ASAP/fix/#107

[Fix] Styled Components 오류 해결
Kusitms-29th-ASAP · May 31, 2024 · 361c456 · 361c456
2 parents 45a2a85 + 74c1352
commit 361c456
Show file tree

Hide file tree

Showing 22 changed files with 50 additions and 500 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -15,6 +15,9 @@ const nextConfig = {
   images: {
     domains: ["kr.object.ncloudstorage.com"],
   },
+  compiler: {
+    styledComponents: true,
+  },
 };
 
 export default withPlugins(

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,8 +5,8 @@ import { theme } from "@/styles/theme";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { Provider } from "react-redux";
 import { store } from "@/redux/store";
-import "./global.css";
-import NOSSR from "@/components/common/NOSSR";
+import StyledJsxRegistry from "./registry";
+import GlobalStyles from "@/styles/GlobalStyles";
 
 const queryClient = new QueryClient();
 
@@ -23,9 +23,10 @@ export default function RootLayout({
       <body>
         <Provider store={store}>
           <QueryClientProvider client={queryClient}>
-            <ThemeProvider theme={theme}>
-              <NOSSR>{children}</NOSSR>
-            </ThemeProvider>
+            <StyledJsxRegistry>
+              <GlobalStyles />
+              <ThemeProvider theme={theme}>{children}</ThemeProvider>
+            </StyledJsxRegistry>
           </QueryClientProvider>
         </Provider>
       </body>

diff --git a/src/app/registry.tsx b/src/app/registry.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== "undefined") return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}
diff --git a/src/components/common/NOSSR.tsx b/src/components/common/NOSSR.tsx