[Feat]: theme 적용을 위한 Provider 추가 (#47)

YAPP-Github · Jan 7, 2025 · 8461f8b · 8461f8b
1 parent 73b7a7f
commit 8461f8b
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 4 deletions.
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
 import './globals.css';
-//import '@repo/ui/styles';
 import '@repo/theme/styles';
+//import '@repo/ui/styles';
+import { ThemeProvider } from '@repo/theme';
 
 const geistSans = localFont({
   src: './fonts/GeistVF.woff',
@@ -28,7 +29,8 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
+        <ThemeProvider theme="light">{children}</ThemeProvider>{' '}
+        {/** TODO: 추후 시스템 감지 설정 추가 예정 */}
       </body>
     </html>
   );

diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -18,9 +18,11 @@
     "@vanilla-extract/css": "^1.17.0",
     "@vanilla-extract/next-plugin": "^2.4.8",
     "@vanilla-extract/recipes": "^0.5.5",
-    "@vanilla-extract/sprinkles": "^1.6.3"
+    "@vanilla-extract/sprinkles": "^1.6.3",
+    "react": "^18"
   },
   "devDependencies": {
+    "@types/react": "^18.2.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.5",
     "esbuild": "^0.21.0",
     "esbuild-plugin-preserve-directives": "^0.0.11"

diff --git a/packages/theme/src/components/ThemeProvider.tsx b/packages/theme/src/components/ThemeProvider.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { lightThemeClass, darkThemeClass } from '../themes/themes.css';
+
+type ThemeProviderProps = {
+  children: ReactNode;
+  theme?: 'light' | 'dark';
+};
+
+export function ThemeProvider({
+  children,
+  theme = 'light',
+}: ThemeProviderProps) {
+  const themeClass = theme === 'light' ? lightThemeClass : darkThemeClass;
+
+  return <div className={themeClass}>{children}</div>;
+}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
@@ -1,3 +1,4 @@
-export * from './tokens';
 export * from './themes';
 export * from './sprinkles';
+export * from './tokens';
+export * from './components/ThemeProvider';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml