@lotte-innovate/ui-component-test 0.0.44 → 0.0.45

package/README.md

@@ -1,88 +1,62 @@
-# LOTTE UI COMPONENT LIBRARY
+# 🎨 LOTTE UI LIBRARY (L-UI)
 
 <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
-```
+<br />
 
-## Setup
+## 💁소개
 
-패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
+<b>Lotte Innovate 디자인 가이드를 적용한 전사 표준 UI 라이브러리입니다.</b>
 
-프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
+#### 주요 특징
 
-```
-  import '@lotte-innovate/lui/dist/globals.css';
-```
+- <b>웹 표준 및 접근성 준수</b>
 
-## Usage
+  - Headless UI Library인 radix-ui를 사용하여 웹 접근성을 보장합니다.
+  - 정부 UI/UX 가이드라인을 준수하여 개발되었습니다.
 
-React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
+- <b>다양한 컴포넌트</b>
 
-```javascript
-import React from 'react';
-import { Button } from '@lotte-innovate/lui';
+  - 45가지의 UI 컴포넌트와 6가지의 차트를 제공합니다.
 
-const App = () => {
-  return (
-    <div>
-      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
-    </div>
-  );
-};
+- <b>일관된 디자인</b>
 
-export default App;
-```
+  - 모든 컴포넌트와 차트에 공통 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)
 
-컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.
+- <b>스토리북 통합</b>
 
-```javascript
-import React from 'react';
-import { IconButton } from '@lotte-innovate/lui';
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+  - Storybook을 활용하여 컴포넌트를 문서화하고 테스트할 수 있습니다.
+  - [스토리북 바로가기](https://66849ef80cb87f1ca900f051-tqldgzbipz.chromatic.com/?path=/docs/welcome--docs)
 
-const App = () => {
-  return (
-    <div>
-      <IconButton>
-        <MagnifyingGlassIcon />
-      </IconButton>
-    </div>
-  );
-};
+- <b>npm 패키지 배포</b>
+  - 디자인 시스템은 npm 패키지로 배포되어, 프로젝트에 쉽게 설치하고 사용할 수 있습니다.
+  - [NPM 패키지 바로가기](https://www.npmjs.com/package/@lotte-innovate/lui)
 
-export default App;
-```
+<br />
+<details>
+  <summary>공통 Props 목록</summary>
 
-## Components
+| 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        |
 
-<br />
+</details>
 
 <details>
   <summary>컴포넌트 목록</summary>
@@ -112,22 +86,251 @@ export default App;
 
 </details>
 
-<details>
-  <summary>공통 Props 목록</summary>
+<br />
 
-| 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        |
+#### 스토리북 주요 화면
+
+<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>
 
-</details>
+<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 />
 
-## License
+## 🟢실행
+
+- 개발모드 실행
+
+```shell
+npm run dev
+```
+
+- 스토리북 실행
+
+```shell
+npm run storybook
+```
+
+> 접속주소(포트 6006 사용 시): `http://localhost:6006`
+
+- 크로마틱 배포
+  - 터미널에서 크로마틱으로 배포된 주소 확인 가능
+
+```shell
+npm run chromatic
+```
 
-@lotte-innovate
+- 빌드
+  - 패키지 배포없이 스토리북과 컴포넌트 빌드가 필요할때 사용
+
+```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
+```
+
+- package.json 에서 명시된 아래 파일들만 배포됨
+
+```
+"files": [
+    "dist/lib",
+    "dist/tailwind.config.d.ts",
+    "dist/tailwind.config.js",
+    "dist/globals.css"
+  ],
+```
+
+<br />
+
+## 📁구조
+
+#### 디렉토리 구조
+
+```
+📦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
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lotte-innovate/ui-component-test",
   "description": "Lotte UI Library",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "private": false,
   "type": "module",
   "files": [
@@ -48,10 +48,11 @@
     "start": "next start",
     "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=8192' storybook dev -p 6006",
     "chromatic": "cross-env npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
-    "compile": "tsc --jsx react-jsx && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
+    "compile": "tsc --jsx react-jsx",
     "build": "next build && npm run compile",
     "build:css": "npx tailwindcss -i src/app/globals.css -o dist/globals.css --minify",
     "build-storybook": "storybook build",
+    "build:test": "rm -fr dist/* && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
     "clean": "rimraf dist && mkdir dist",
     "update-tailwind": "node update-tailwind-import.js",
     "build:all": "npm run clean && npm run compile && node src/utils/move.js && npm run build:css && tsc-alias && npm run update-tailwind",