npm - @lotte-innovate/ui-component-test - Versions diffs - 0.1.68 → 0.1.69-beta.0 - Mend

@lotte-innovate/ui-component-test 0.1.68 → 0.1.69-beta.0

Files changed (654) hide show

package/README.md CHANGED Viewed

@@ -9,6 +9,7 @@
 - [Setup](#setup)
 - [Usage](#usage)
 - [Components](#components)
+- [Theme](#theme)
 - [License](#license)
 ## Introduction
@@ -91,13 +92,13 @@ export default App;
 | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
 | Typography 컴포넌트   | Text, Header                                                                                                                                   |
 | 기본 컴포넌트         | Avatar, Badge, Button, Icon Button, Label                                                                                                      |
-| 입력 컴포넌트         | Checkbox, Checkbox Group, Checkbox Cards, Radio, Radio Group, Radio Cards, Select, Slider, Switch, Text Area, Text Field, Toggle, Toggle Group |
-| 네비게이션 컴포넌트   | Menubar, Navigation Menu, Tabs, Tab Nav                                                                                                        |
-| 레이아웃 컴포넌트     | Aspeact Ratio, Card, Inset, Scroll Area, Separator, Table                                                                                      |
-| 피드백 컴포넌트       | Alert Dialog, Dialog, Hover Card, Popover, Toast, Tooltip                                                                                      |
+| 입력 컴포넌트         | Checkbox, CheckboxGroup, CheckboxCards, Radio, RadioGroup, Radio Cards, Select, Slider, TextArea, TextField, Toggle, ToggleGroup, ToggleSwitch |
+| 네비게이션 컴포넌트   | Menubar, Navigation Menu, Tabs, Tab Nav, Breadcrumb                                                                                            |
+| 레이아웃 컴포넌트     | Aspeact Ratio, Card, Inset, ScrollArea, Separator, Table                                                                                       |
+| 피드백 컴포넌트       | AlertDialog, Dialog, HoverCard, Popover, Toast, Tooltip                                                                                        |
 | 로딩 컴포넌트         | Progress, Skeleton, Spinner,                                                                                                                   |
-| 메뉴 및 선택 컴포넌트 | Context Menu, Dropdown Menu, Segmented Control                                                                                                 |
-| 기타 컴포넌트         | Accordian, Callout                                                                                                                             |
+| 메뉴 및 선택 컴포넌트 | ContextMenu, DropdownMenu, Segmented Control                                                                                                   |
+| 기타 컴포넌트         | Accordion, Callout, DataList                                                                                                                   |
 </details>
 <details>
@@ -128,6 +129,75 @@ export default App;
 <br />
+## Theme
+L-UI는 테마 컨텍스트를 제공하여 배포된 컴포넌트들에 대해 다양한 테마를 적용할 수 있게 합니다.
+`Color`, `Radius`, `Scaling`, `Weight` 를 한번에 적용할 수 있습니다.
+먼저 App 최상단에 `LuiThemeProvider`를 추가하여 테마 컨텍스트를 제공합니다.
+```javascript
+import { LuiThemeProvider } from '@lotte-innovate/lui';
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="bg-white">
+      <body>
+        <LuiThemeProvider>{children}</LuiThemeProvider>
+      </body>
+    </html>
+  );
+}
+```
+```javascript
+import { LuiThemeProvider } from '@lotte-innovate/lui';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <LuiThemeProvider>
+      <App />
+    </LuiThemeProvider>
+  </React.StrictMode>,
+);
+```
+테마를 변경하려면 `useTheme`훅을 사용합니다.
+`useTheme`훅은 현재 테마와 테마를 업데이트할 수 있는 함수를 제공합니다.
+```javascript
+import { useTheme, Button } from '@lotte-innovate/lui';
+const ThemeChanger = () => {
+  const { theme, updateTheme } = useTheme();
+  // 초기 값 설정 시
+  theme.themeRadius: 'none';
+  theme.themeColor: 'olive';
+  theme.themeScaling: '90%';
+  theme.themeWeight: 'regular';
+  // 테마 변경 시
+  updateTheme({ themeRadius: "full", themeColor: "amber", themeScaling: "110%" });
+  return (
+    <div>
+      <Button>버튼</Button>
+    </div>
+  );
+};
+```
+<br />
 ## License
 @lotte-innovate