diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 417120d..3596ddd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { GoogleTagManager } from '@next/third-parties/google';
import classNames from 'classnames';
import type { Metadata } from 'next';
import { Noto_Sans_SC as noto } from 'next/font/google';
+import AntdRegistry from '@/component/global/antdRegistry';
import Header from '@/component/global/header';
import 'tw-elements-react/dist/css/tw-elements-react.min.css';
import './globals.css';
@@ -23,8 +24,10 @@ export default function RootLayout({
return (
-
- {children}
+
+
+ {children}
+
{process.env.isProduction === 'true' && gtmId && }
diff --git a/src/component/global/antdRegistry.tsx b/src/component/global/antdRegistry.tsx
new file mode 100644
index 0000000..f28a381
--- /dev/null
+++ b/src/component/global/antdRegistry.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import {
+ StyleProvider, createCache, extractStyle,
+} from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/es/Cache';
+import {
+ ConfigProvider, theme,
+} from 'antd';
+import { useServerInsertedHTML } from 'next/navigation';
+import React from 'react';
+
+export default function AntdRegistry({ children }: React.PropsWithChildren) {
+ const isServerInserted = React.useRef(false);
+ const cache = React.useMemo(() => createCache(), []);
+ const { darkAlgorithm } = theme;
+
+ useServerInsertedHTML(() => {
+ if (isServerInserted.current) {
+ return;
+ }
+
+ isServerInserted.current = true;
+ return (
+
+ );
+ });
+ return (
+
+
+ {children}
+
+
+ );
+}