@lotte-innovate/ui-component-test 0.2.88 → 0.2.90

package/README.md

@@ -134,7 +134,7 @@ export default App;
 
 각 컴포넌트들은 공통 Props를 개별적으로 적용할 수도 있고, 테마를 통해 컴포넌트의 스타일을 한번에 변경할 수도 있습니다.
 
-L-UI는 테마 컨텍스트를 제공하여 `Color`, `Radius`, `Scaling`, `Weight` 를 모든 컴포넌트에 동일한 스타일을 지정할 수 있습니다..
+L-UI는 테마 컨텍스트를 제공하여 `Color`, `Radius`, `Scaling`, `Weight` 를 모든 컴포넌트에 동일한 스타일을 지정할 수 있습니다.
 
 먼저 App 최상단에 `LuiThemeProvider`를 추가하여 테마 컨텍스트를 제공합니다.
 
@@ -158,6 +158,23 @@ export default function RootLayout({
 }
 ```
 
+> Next.js App router 에서 Layout.tsx 을 사용하는 예시 코드
+
+`ThemeProvider`를 프로젝트의 가장 가까운 `layout.tsx` 파일에 추가해야 합니다.
+
+이렇게 하면 `ThemeProvider`가 해당 레이아웃 내의 모든 컴포넌트에 테마 상태를 제공할 수 있습니다.
+
+```tsx
+import React from 'react';
+import { LuiThemeProvider } from '@lotte-innovate/lui';
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <LuiThemeProvider>{children}</LuiThemeProvider>;
+};
+
+export default Layout;
+```
+
 > 클라이언트 사이드 프로젝트에서 사용 예시
 
 ```tsx
@@ -188,7 +205,9 @@ const ThemeChanger = () => {
   theme.themeWeight = 'regular';
 
   // 테마 변경 시
-  updateTheme({ themeRadius: 'full', themeColor: 'amber', themeScaling: '110%' });
+  useEffect(() => {
+    updateTheme({ themeRadius: 'full', themeColor: 'amber', themeScaling: '110%' });
+  }, []);
 
   return (
     <div>