@lotte-innovate/ui-component-test 0.1.69-beta.1 → 0.1.69-beta.10

package/README.md

@@ -88,17 +88,15 @@ export default App;
 <details>
   <summary>컴포넌트 목록</summary>
 
-| 구분                  | 종류                                                                                                                                           |
-| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| Typography 컴포넌트   | Text, Header                                                                                                                                   |
-| 기본 컴포넌트         | Avatar, Badge, Button, Icon Button, Label                                                                                                      |
-| 입력 컴포넌트         | 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,                                                                                                                   |
-| 메뉴 및 선택 컴포넌트 | ContextMenu, DropdownMenu, Segmented Control                                                                                                   |
-| 기타 컴포넌트         | Accordion, Callout, DataList                                                                                                                   |
+| 구분                | 종류                                                                                                             |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| Typography 컴포넌트 | Header, Text                                                                                                     |
+| 기본 컴포넌트       | Avatar, Badge, Button, IconButton, Label                                                                         |
+| 입력 컴포넌트       | DatePicker, Editor, Slider, TextArea, TextField                                                                  |
+| 선택 컴포넌트       | Checkbox, CheckboxCards, CheckboxGroup, Radio, RadioCards, RadioGroup, Select, Toggle, ToggleGroup, ToggleSwitch |
+| 네비게이션 컴포넌트 | Breadcrumb, GNB, Menubar, NavigationMenu, SNB, Tab Nav, Tabs                                                     |
+| 레이아웃 컴포넌트   | AspectRatio, Card, Footer, Grid, Inset, ScrollArea, Separator, Table                                             |
+|                     |
 
 </details>
 <details>
@@ -116,14 +114,14 @@ export default App;
 <details>
   <summary>공통 Props 목록</summary>
 
-| name       | description                                       | 단계     | option                                        |
-| ---------- | ------------------------------------------------- | -------- | --------------------------------------------- |
-| Color      | 27가지 색상을 라이트/다크/알파/알파다크 모드 제공 | 1~12단계 | blue, crimson, teal, orange, purple, amber... |
-| Radius     | 컴포넌트의 둥글기 적용                            | 5단계    | none, small, medium, large, full              |
-| Scaling    | 컴포넌트의 비율                                   | 5단계    | 90%, 95%, 100%, 105%, 110%                    |
-| Weight     | 컴포넌트의 텍스트 굵기                            | 4단계    | regular, medium, semibold, bold               |
-| Appearance | 컴포넌트의 디자인 스타일                          | 6단계    | classic, ghost, outline, soft, solid, surface |
-| Size       | 컴포넌트의 크기                                   | 5단계    | x-small, small, medium, large, x-large        |
+| name       | description                                       | 단계     | option                                        | 테마적용여부 |
+| ---------- | ------------------------------------------------- | -------- | --------------------------------------------- | ------------ |
+| Color      | 27가지 색상을 라이트/다크/알파/알파다크 모드 제공 | 1~12단계 | blue, crimson, teal, orange, purple, amber... | O            |
+| Radius     | 컴포넌트의 둥글기 적용                            | 5단계    | none, small, medium, large, full              | O            |
+| Scaling    | 컴포넌트의 비율                                   | 5단계    | 90%, 95%, 100%, 105%, 110%                    | O            |
+| Weight     | 컴포넌트의 텍스트 굵기                            | 4단계    | regular, medium, semibold, bold               | O            |
+| Appearance | 컴포넌트의 디자인 스타일                          | 6단계    | classic, ghost, outline, soft, solid, surface | X            |
+| Size       | 컴포넌트의 크기                                   | 5단계    | x-small, small, medium, large, x-large        | X            |
 
 </details>
 
@@ -131,12 +129,14 @@ export default App;
 
 ## Theme
 
-L-UI는 테마 컨텍스트를 제공하여 배포된 컴포넌트들에 대해 다양한 테마를 적용할 수 있게 합니다.
+각 컴포넌트들은 공통 Props를 개별적으로 적용할 수도 있고, 테마를 통해 컴포넌트의 스타일을 한번에 변경할 수도 있습니다.
 
-`Color`, `Radius`, `Scaling`, `Weight` 를 한번에 적용할 수 있습니다.
+L-UI는 테마 컨텍스트를 제공하여 `Color`, `Radius`, `Scaling`, `Weight` 를 모든 컴포넌트에 동일한 스타일을 지정할 수 있습니다..
 
 먼저 App 최상단에 `LuiThemeProvider`를 추가하여 테마 컨텍스트를 제공합니다.
 
+> Next.js와 같은 프레임워크를 사용하는 프로젝트에서 사용 예시
+
 ```javascript
 import { LuiThemeProvider } from '@lotte-innovate/lui';
 
@@ -156,16 +156,16 @@ export default function RootLayout({
 
 ```
 
+> 클라이언트 사이드 프로젝트에서 사용 예시
+
 ```javascript
 import { LuiThemeProvider } from '@lotte-innovate/lui';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <LuiThemeProvider>
-      <App />
-    </LuiThemeProvider>
-  </React.StrictMode>,
+  <LuiThemeProvider>
+    <App />
+  </LuiThemeProvider>,
 );
 ```
 
@@ -196,6 +196,26 @@ const ThemeChanger = () => {
 };
 ```
 
+테마가 적용되었지만 일부 컴포넌트는 스타일을 다르게 하고 싶은 경우, 각 컴포넌트에 직접 Props를 전달하여 스타일을 재정의할 수 있습니다.
+
+```javascript
+import { useTheme, Button } from '@lotte-innovate/lui';
+
+const ThemeChanger = () => {
+  const { theme } = useTheme();
+
+  theme.themeRadius: 'full';
+  theme.themeColor: 'blue';
+
+  return (
+    <div>
+      <Button>테마 적용 버튼</Button>
+      <Button radius="none" color="crimson">테마 미적용 버튼</Button>
+    </div>
+  );
+};
+```
+
 <br />
 
 ## License