Merge pull request #444 from Bamdoliro/feat/#443

SEOKKAMONI · web-flow · commit 9219aa229e85 · 2023-10-16T11:16:49.000+09:00
레이아웃 쉬프트 현상 수정
diff --git a/apps/user/next.config.js b/apps/user/next.config.js
@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
     transpilePackages: ['@maru/ui'],
+    compiler: {
+        styledComponents: true,
+    },
 };
diff --git a/apps/user/src/app/layout.tsx b/apps/user/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import Provider from '@/components/Provider';
+import StyledComponentsRegistry from '@/lib/registry';
 import QueryClientProvider from '@/services/QueryClientProvider';
 import Script from 'next/script';
 import { ReactNode } from 'react';
@@ -30,9 +31,11 @@ const Layout = ({ children }: Props) => {
                 </Script>
             </head>
             <body>
-                <QueryClientProvider>
-                    <Provider>{children}</Provider>
-                </QueryClientProvider>
+                <StyledComponentsRegistry>
+                    <QueryClientProvider>
+                        <Provider>{children}</Provider>
+                    </QueryClientProvider>
+                </StyledComponentsRegistry>
             </body>
         </html>
     );
diff --git a/apps/user/src/lib/registry.tsx b/apps/user/src/lib/registry.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { useServerInsertedHTML } from 'next/navigation';
+import { ReactNode, useState } from 'react';
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+
+interface Props {
+    children: ReactNode;
+}
+
+const StyledComponentsRegistry = ({ children }: Props) => {
+    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>
+    );
+};
+
+export default StyledComponentsRegistry;
