@lotte-innovate/ui-component-test 0.1.14 → 0.1.16

package/README.md

@@ -1,163 +1,71 @@
-# radix-ui 라이브러리 활용 Storybook UI Component 만들기
+# LOTTE UI COMPONENT LIBRARY
+
+---
 
 <br />
 
-## 사전 설치 라이브러리
+## 목차
 
-- radix-ui
-  - 주요 컴포넌트 사용 시 활용할 Headless UI 라이브러리
+- [Introduction](#introduction)
+- [Installation](#installation)
+- [Setup](#setup)
+- [Usage](#usage)
+- [Components](#components)
+- [License](#license)
 
-```shell
-npm install @radix-ui/react-popover@latest -E
-```
+## Introduction
 
-- storybook
-  - 컴포넌트 관리를 위해 사용
+모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
 
-```shell
-npx sb init
-npx storybook@latest add @storybook/addon-styling-webpack
-```
+일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
 
-- clsx
-  - 조건부 className 작성을 위해 사용
+이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
 
-```shell
-npm i clsx
-```
+## Installation
 
-- tailwind-merge
-  - 스타일 충돌 없이 자바스크립트에서 tailwind CSS 클래스를 효율적으로 병합하는 기능을 가진 라이브러리
+패키지를 설치하기 위해 아래 명령어를 사용합니다.
 
-```shell
-npm i tailwind-merge
+```bash
+  npm i @lotte-innovate/ui-component-test
 ```
 
-- class-variance-authority (CVA)
-  - 일관성 있는 UI를 정의하고 사용할 수 있도록 도와주는 툴로써 shadcn/ui 컴포넌트의 핵심 도구
-
-```shell
-npm i class-variance-authority
+```bash
+  yarn add @lotte-innovate/ui-component-test
 ```
 
-<br />
+## Setup
 
-## 실행
+패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
 
-- 스토리북 실행
+프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
 
-```shell
-npm run storybook
 ```
-
-> 접속주소(포트 6006 사용 시): `http://localhost:6006`
-
-- 웹페이지 실행
-
-```shell
-npm run dev
+  import '@lotte-innovate/ui-component-test/dist/globals.css';
 ```
 
-> 접속주소(포트 3000 사용 시): `http://localhost:3000`
-
-## package publish
-
-- 타입스크립트 컴파일
-
-```shell
-npm run publish:npm
-```
-
-- npm package 배포 시
-
-  - npm 로그인
+## Usage
 
-  ```shell
-  npm login
-  ```
+React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
 
-  - package.json 버전 수정 후 컴파일 진행
+```javascript
+import React from 'react';
+import { Button } from '@lotte-innovate/ui-component-test';
 
-  ```shell
-  npm run publish:npm
-  ```
-
-  - 패키지 배포
-
-  ```shell
-  npm publish
-  ```
-
-  - npm scope 배포
-    - npm 로그인 후, 조직 생성 시 @계정명 으로 scope 생성 
-  scope로 생성된 패키지는 npm publish 시, 아래 옵션 추가 
-
-  ```shell
-  npm publish --access=public
-  ```
-
-
-- npm package 미배포시
-
-  - package.json 버전 수정 후 컴파일 진행
-
-  ```shell
-  npm run publish:npm
-  ```
-
-  - dist/ 파일 및 설정파일 추출 후 전달
+const App = () => {
+  return (
+    <div>
+      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
+    </div>
+  );
+};
 
-## 사용자 이용 방법
+export default App;
+```
 
-### npm 배포 시
+## Components
 
-- npm package 설치
+주요 컴포넌트는 이런 이런 종류가 있습니다. (추가 설명 작성 예정)
 
-```sh
-npm install <package_name>
-```
+## License
 
-### npm 미배포시
-
-- 전달 받은 package 모듈 파일을 node_modules/ 폴더에 추가
-
-### tailwind 설정 방법
-
-- tailwind config 파일 설정
-
-```js
-// tailwind.config.ts
-import type { Config } from 'tailwindcss';
-// UI 라이브러리 tailwind config 파일 호출
-// >>>>>>>> 추가
- const packageTailwindConfig = require('ui-component-test/tailwind.config.js');
-// >>>>>>>>
-
-const config: Config = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx,zip}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx,zip}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx,zip}',
-// 해당 프로젝트 css 표준 컴포넌트에 적용 가능
-// >>>>>>>> 추가
-    './node_modules/ui-component-test/**/*.{js,ts,jsx,tsx,mdx,zip}',
-// >>>>>>>>
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-      colors: {},
-// UI 라이브러리 tailwind config 파일 적용
-// >>>>>>>> 추가
-      ...packageTailwindConfig?.theme?.extend,
-// >>>>>>>>
-    },
-  },
-  plugins: [],
-};
-export default config;
-
-```
+@lotte

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@lotte-innovate/ui-component-test",
   "description": "Lotte UI Library",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "private": false,
   "type": "module",
   "files": [
     "dist/lib",
     "dist/tailwind.config.d.ts",
     "dist/tailwind.config.js",
-    "dist/globals.css",
-    "dist/README.md"
+    "dist/globals.css"
   ],
   "main": "dist/lib/index.js",
   "module": "dist/lib/index.js",
@@ -50,7 +49,7 @@
     "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",
-    "publish:npm": "npm run build:all && npm publish"
+    "publish:npm": "npm run build:all && npm publish && node src/utils/post-publish.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",