@lotte-innovate/ui-component-test 0.0.49 → 0.0.51

package/README.md

@@ -1,62 +1,88 @@
-# 🎨 LOTTE UI LIBRARY (L-UI)
+# LOTTE UI COMPONENT LIBRARY
 
 <br />
 
-## 📌목차
+## 목차
 
-- [💁 소개](#소개)
-- [🔨 기술스택](#기술스택)
-- [💻 사전설치](#사전설치)
-- [🟢 실행](#실행)
-- [🛠️ 배포](#배포)
-- [📁 구조](#구조)
+- [Introduction](#introduction)
+- [Installation](#installation)
+- [Setup](#setup)
+- [Usage](#usage)
+- [Components](#components)
+- [License](#license)
 
-<br />
+## Introduction
 
-## 💁소개
+모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
 
-<b>Lotte Innovate 디자인 가이드를 적용한 전사 표준 UI 라이브러리입니다.</b>
+일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
 
-#### 주요 특징
+이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
 
-- <b>웹 표준 및 접근성 준수</b>
+## Installation
 
-  - Headless UI Library인 radix-ui를 사용하여 웹 접근성을 보장합니다.
-  - 정부 UI/UX 가이드라인을 준수하여 개발되었습니다.
+패키지를 설치하기 위해 아래 명령어를 사용합니다.
 
-- <b>다양한 컴포넌트</b>
+```bash
+  npm i @lotte-innovate/lui
+```
 
-  - 45가지의 UI 컴포넌트와 6가지의 차트를 제공합니다.
+```bash
+  yarn add @lotte-innovate/lui
+```
 
-- <b>일관된 디자인</b>
+## Setup
 
-  - 모든 컴포넌트와 차트에 공통 Props (Color, Radius, Scaling, Weight, Appearance, Size)를 적용하여 디자인의 통일성을 유지합니다.
-  - 다크모드에서도 표준화된 색상을 적용하여 모든 컴포넌트에 일관되게 적용욉니다.
-  - [피그마 디자인 가이드 바로가기](https://www.figma.com/design/tlcB7UYdvUNzPk5T66FqLf/UI-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EA%B3%B5%EC%9C%A0%EC%9A%A9?node-id=0-1&node-type=canvas&t=PEwpe2j6PilPTwXC-0)
+패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
 
-- <b>스토리북 통합</b>
+프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
 
-  - Storybook을 활용하여 컴포넌트를 문서화하고 테스트할 수 있습니다.
-  - [스토리북 바로가기](https://66849ef80cb87f1ca900f051-tqldgzbipz.chromatic.com/?path=/docs/welcome--docs)
+```
+  import '@lotte-innovate/lui/dist/globals.css';
+```
 
-- <b>npm 패키지 배포</b>
-  - 디자인 시스템은 npm 패키지로 배포되어, 프로젝트에 쉽게 설치하고 사용할 수 있습니다.
-  - [NPM 패키지 바로가기](https://www.npmjs.com/package/@lotte-innovate/lui)
+## Usage
 
-<br />
-<details>
-  <summary>공통 Props 목록</summary>
+React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
 
-| 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        |
+```javascript
+import React from 'react';
+import { Button } from '@lotte-innovate/lui';
 
-</details>
+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>
@@ -86,251 +112,22 @@
 
 </details>
 
-<br />
-
-#### 스토리북 주요 화면
-
-<div>
-  <div>
-    <p>Light, Dark Color</p>
-    <img src="/uploads/6ff420bc359758218c69e3fdabd9ec38/color.png" width="40%" />&nbsp;
-    <img src="/uploads/5c6296dc810dd5668330520057a094f4/color-dark.png" width="40%" />
-  </div>
-  <div>
-    <p>Header, Checkbox Component</p>
-    <img src="/uploads/8a01ff02586bf822f17e3f06f70f1857/header.png" width="40%" />&nbsp;
-    <img src="/uploads/a44c67d88d699d84dcb38a16900a2654/checkbox.png" width="40%" />
-  </div>
-  <div>
-    <p>SegmentedControl, Doughnutchart Component</p>
-    <img src="/uploads/54d0265e45325d56a8f5df5a947560d4/segmented.png" width="40%" />&nbsp;
-    <img src="/uploads/1e2d25043446da8c67ce62334043618b/doughnut-chart.png" width="40%" />
-  </div>
-  <div>
-    <p>Dark 모드일때 ToggleGroup, Dropdown Component</p>
-    <img src="/uploads/059d20ecfbc22f0864f4b769f30a1723/dark-toggle.png" width="40%" />&nbsp;
-    <img src="/uploads/d4b7006f59bb35a166105dad34ee232f/dark-dropdown.png" width="40%" />
-  </div>
-</div>
-
-<br />
-
-## 🔨기술스택
-
-#### Environment
-
-![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-007ACC?style=for-the-badge&logo=Visual%20Studio%20Code&logoColor=white)
-![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=Git&logoColor=white)
-![Github](https://img.shields.io/badge/Gitlab-FC6D26?style=for-the-badge&logo=GitLab&logoColor=white)
-
-#### Config
-
-![npm](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)
-
-#### Development
-
-![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=Javascript&logoColor=white)
-![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
-![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=Next.js&logoColor=white)
-![tailwind CSS](https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=TailwindCSS&logoColor=white)
-![storybook](https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)
-
-#### Communication
-
-![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=Figma&logoColor=white)
-![Github Issues](https://img.shields.io/badge/Github%20Issues-FC6D26?style=for-the-badge&logo=GitLab&logoColor=white)
-
-#### Reference
-
-![RadixUI](https://img.shields.io/badge/Radix%20UI-161618?style=for-the-badge&logo=RadixUI&logoColor=white)
-![Chartjs](https://img.shields.io/badge/Chart.js-FF6384?style=for-the-badge&logo=Chart.js&logoColor=white)
-
-<br />
-
-## 💻사전설치
-
-이 라이브러리는 React로 구축된 프로젝트를 지원하며 주요 사전 설치 라이브러리는 아래와 같습니다.
-
-- radix-ui/primitives
-  - 컴포넌트 개발 시 활용할 라이브러리로 필요한 컴포넌트 별 설치
-
-```shell
-npm install @radix-ui/react-accordion@latest -E
-```
-
-- radix-ui/theme
-  - 일부 컴포넌트는 스타일이 적용된 theme 라이브러리 설치
-
-```shell
-npm install @radix-ui/themes -E
-```
-
-- chart.js
-  - 차트 컴포넌트 개발 시 활용
-
-```shell
-npm install chart.js
-```
-
-- storybook
-  - 컴포넌트 디자인 테스트를 위해 설치
-
-```shell
-npx sb init
-npx storybook@latest add @storybook/addon-styling-webpack
-```
-
-- clsx
-  - 조건부 className 작성을 위해 사용
-
-```shell
-npm i clsx
-```
-
-- tailwind-merge
-  - 스타일 충돌 없이 자바스크립트에서 tailwind CSS 클래스를 효율적으로 병합하는 기능을 가진 라이브러리
-
-```shell
-npm i tailwind-merge
-```
-
-- class-variance-authority (CVA)
-  - 일관성 있는 UI를 정의하고 사용할 수 있도록 도와주는 툴로써 shadcn/ui 컴포넌트의 핵심 도구
-
-```shell
-npm i class-variance-authority
-```
-
-<br />
-
-## 🟢실행
-
-- 개발모드 실행
-
-```shell
-npm run dev
-```
-
-- 스토리북 실행
-
-```shell
-npm run storybook
-```
-
-> 접속주소(포트 6006 사용 시): `http://localhost:6006`
-
-- 크로마틱 배포
-  - 터미널에서 크로마틱으로 배포된 주소 확인 가능
-
-```shell
-npm run chromatic
-```
-
-- 빌드
-  - 패키지 배포없이 스토리북과 컴포넌트 빌드가 필요할때 사용
-
-```shell
-npm run build:all
-```
-
-<br />
-
-## 🛠️배포
-
-> NPM 패키지로 배포하는 과정
-
-- npm 로그인하기
-
-```shell
-npm login
-```
-
-- npm scope 배포
-  - npm 로그인 후, 조직 생성 시 @계정명 으로 scope 생성
-    scope로 생성된 패키지는 npm publish 시, 아래 옵션 추가
-
-```shell
-npm publish --access=public
-```
-
-- package.json "version" 수정 후 배포
-  - 버전 표기법
-    - 메이저: 기능 대거 추가 및 수정
-    - 마이너: 작은 기능 추가 및 수정
-    - 패치: 버그나 사소한 오류 수정
-
- <br />
-
-- npm 패키지 배포는 아래 명령어를 이용
-
-```shell
-npm run publish:npm
-```
+<details>
+  <summary>공통 Props 목록</summary>
 
-- package.json 에서 명시된 아래 파일들만 배포됨
+| 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        |
 
-```
-"files": [
-    "dist/lib",
-    "dist/tailwind.config.d.ts",
-    "dist/tailwind.config.js",
-    "dist/globals.css"
-  ],
-```
+</details>
 
 <br />
 
-## 📁구조
+## License
 
-#### 디렉토리 구조
-
-```
-📦dist : 컴파일 시 생성되며 NPM 패키지로 배포됨
-📦src
-┣ 📂app
-┃ ┣ 📜layout.tsx
-┃ ┣ 📜page.tsx
-┃ ┣ 📜stories.css : 스토리북 관련 CSS 파일
-┃ ┣ 📜globals.css
-┃ ┗ 📜styles.css
-┣ 📂lib : NPM 패키지 배포에 필요한 컴포넌트가 들어있는 폴더
-┃ ┣ 📂Typography
-┃ ┃ ┣ 📂Header
-┃ ┃ ┣ 📂Text
-┃ ┃ ┗ 📜index.ts
-┃ ┣ 📂color : 컴포넌트에서 사용하는 컬러 관련 파일 모음 폴더
-┃ ┃ ┣ 📜alpha.ts
-┃ ┃ ┣ 📜constants.ts
-┃ ┃ ┣ 📜dark.ts
-┃ ┃ ┣ 📜krdsColors.ts
-┃ ┃ ┗ 📜light.ts
-┃ ┣ 📂components : 배포되는 컴포넌트들이 들어있는 폴더
-┃ ┃ ┣ 📂Accordion
-┃ ┃ ┣ 📂AlertDialog
-┃ ┃ ┣ 📂AspectRatio
-┃ ┃ ┣ ...
-┃ ┃ ┣ 📂ToggleGroup
-┃ ┃ ┣ 📂ToggleSwitch
-┃ ┃ ┣ 📂Tooltip
-┃ ┃ ┗ 📜index.ts
-┃ ┣ 📂utils
-┃ ┃ ┗ 📜utils.ts : 공통 유틸 함수
-┃ ┣ 📜README.md : NPM 전용 README 파일
-┣ 📂stories : 디자인 테스트를 위한 스토리북 폴더
-┃ ┣ 📂accordion
-┃ ┣ 📂alert-dialog
-┃ ┣ 📂aspect-ratio
-┃ ┣ 📂assets : 스토리북 관련 이미지 폴더
-┃ ┣ ...
-┃ ┣ 📂toggle
-┃ ┣ 📂tooltip
-┃ ┣ 📜DarkAlphaColors.mdx
-┃ ┣ 📜DarkColors.mdx
-┃ ┣ 📜LightAlphaColors.mdx
-┃ ┣ 📜LightColors.mdx
-┃ ┣ 📜Welcome.mdx
-┃ ┗ 📜Welcome.tsx
-┗ 📂utils : 패키지 배포에 필요한 함수 모음
-  ┣ 📜move.js
-  ┗ 📜post-publish.js
-```
+@lotte-innovate