🔨 settings: radix UI Theme 프로바이더 세팅 #9

dnd-side-project · Jul 30, 2024 · 1e8734f · 1e8734f
1 parent 6ca1224
commit 1e8734f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,12 @@
 import "../styles/reset.css";
+import "@radix-ui/themes/styles.css";
 import "../styles/globals.css";
 
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
 import MobileLayout from "@/layout/Mobile/MobileLayout";
+import RadixThemeProvider from "@/lib/RadixThemeProvider";
 import ReactQueryProvider from "@/lib/ReactQueryProvider";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -23,7 +25,9 @@ export default function RootLayout({
     <html lang="ko">
       <body className={`${inter.className}`} suppressHydrationWarning>
         <ReactQueryProvider>
-          <MobileLayout>{children}</MobileLayout>
+          <RadixThemeProvider>
+            <MobileLayout>{children}</MobileLayout>
+          </RadixThemeProvider>
         </ReactQueryProvider>
       </body>
     </html>

diff --git a/src/lib/RadixThemeProvider.tsx b/src/lib/RadixThemeProvider.tsx
@@ -0,0 +1,13 @@
+"use client";
+import { Theme, ThemePanel } from "@radix-ui/themes";
+
+function RadixThemeProvider({ children }: React.PropsWithChildren) {
+  return (
+    <Theme>
+      {children}
+      <ThemePanel />
+    </Theme>
+  );
+}
+
+export default RadixThemeProvider;