@lotte-innovate/ui-component-test 0.1.33 → 0.1.35

package/README.md

@@ -1,89 +1,133 @@
-# LOTTE UI COMPONENT LIBRARY
-
-<br />
-
-## 목차
-
-- [Introduction](#introduction)
-- [Installation](#installation)
-- [Setup](#setup)
-- [Usage](#usage)
-- [Components](#components)
-- [License](#license)
-
-## Introduction
-
-모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
-
-일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
-
-이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
-
-## Installation
-
-패키지를 설치하기 위해 아래 명령어를 사용합니다.
-
-```bash
-  npm i @lotte-innovate/ui-component-test
-```
-
-```bash
-  yarn add @lotte-innovate/ui-component-test
-```
-
-## Setup
-
-패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
-
-프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
-
-```
-  import '@lotte-innovate/ui-component-test/dist/globals.css';
-```
-
-## Usage
-
-React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
-
-```javascript
-import React from 'react';
-import { Button } from '@lotte-innovate/ui-component-test';
-
-const App = () => {
-  return (
-    <div>
-      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
-    </div>
-  );
-};
-
-export default App;
-```
-
-컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.
-
-```javascript
-import React from 'react';
-import { IconButton } from '@lotte-innovate/ui-component-test';
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-
-const App = () => {
-  return (
-    <div>
-      <IconButton>
-        <MagnifyingGlassIcon />
-      </IconButton>
-    </div>
-  );
-};
-
-export default App;
-```
-
-## Components
-
-주요 컴포넌트는 이런 이런 종류가 있습니다. (추가 설명 작성 예정)
-
-## License
-
-@lotte
+# LOTTE UI COMPONENT LIBRARY
+
+<br />
+
+## 목차
+
+- [Introduction](#introduction)
+- [Installation](#installation)
+- [Setup](#setup)
+- [Usage](#usage)
+- [Components](#components)
+- [License](#license)
+
+## Introduction
+
+모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
+
+일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
+
+이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
+
+## Installation
+
+패키지를 설치하기 위해 아래 명령어를 사용합니다.
+
+```bash
+  npm i @lotte-innovate/lui
+```
+
+```bash
+  yarn add @lotte-innovate/lui
+```
+
+## Setup
+
+패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
+
+프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
+
+```
+  import '@lotte-innovate/lui/dist/globals.css';
+```
+
+## Usage
+
+React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
+
+```javascript
+import React from 'react';
+import { Button } from '@lotte-innovate/lui';
+
+const App = () => {
+  return (
+    <div>
+      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
+    </div>
+  );
+};
+
+export default App;
+```
+
+컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.
+
+```javascript
+import React from 'react';
+import { IconButton } from '@lotte-innovate/lui';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+
+const App = () => {
+  return (
+    <div>
+      <IconButton>
+        <MagnifyingGlassIcon />
+      </IconButton>
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Components
+
+<br />
+
+<details>
+  <summary>컴포넌트 목록</summary>
+
+| 구분                  | 종류                                                                                                                                           |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| 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                                                                                      |
+| 로딩 컴포넌트         | Progress, Skeleton, Spinner,                                                                                                                   |
+| 메뉴 및 선택 컴포넌트 | Context Menu, Dropdown Menu, Segmented Control                                                                                                 |
+| 기타 컴포넌트         | Accordian, Callout                                                                                                                             |
+
+</details>
+<details>
+	<summary>차트 목록</summary>
+
+| 구분      | 종류          |
+| --------- | ------------- |
+| 비교 차트 | Bar, Line     |
+| 구성 차트 | Pie, Doughnut |
+| 분포 차트 | Bubble        |
+| 관계 차트 | Radar         |
+
+</details>
+
+<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        |
+
+</details>
+
+<br />
+
+## License
+
+@lotte-innovate