@likelion-design/ui 0.1.0 → 0.1.1

package/README.md

@@ -1,40 +1,108 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/pages/api-reference/create-next-app).
+# @likelion-design/ui
 
-## Getting Started
+React UI 컴포넌트 라이브러리
 
-First, run the development server:
+## 설치
 
 ```bash
-npm run dev
+npm install @likelion-design/ui
 # or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+yarn add @likelion-design/ui
+```
+
+## 사용법
+
+### 1. CSS 스타일 import (필수)
+
+컴포넌트를 사용하기 전에 반드시 CSS 파일을 import해야 합니다:
+
+```tsx
+// App.tsx 또는 최상위 파일
+import "@likelion-design/ui/styles.css";
+```
+
+### 2. 컴포넌트 사용
+
+```tsx
+import { ActionButton, IconButton } from "@likelion-design/ui";
+
+function App() {
+  return (
+    <div>
+      <ActionButton
+        size="medium"
+        variant="primary"
+        onClick={() => console.log("clicked")}
+      >
+        Click me
+      </ActionButton>
+
+      <IconButton
+        size="large"
+        variant="primary"
+        icon={<YourIcon />}
+        aria-label="좋아요"
+      />
+    </div>
+  );
+}
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## 컴포넌트
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+### ActionButton
 
-[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+액션 버튼 컴포넌트 - 사용자가 액션을 트리거하거나 이벤트를 실행할 때 사용
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.
+**Props:**
 
-This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+- `size`: `"xlarge" | "large" | "medium" | "small"`
+- `variant`: `"primary" | "neutral" | "secondary"`
+- `shape`: `"solid" | "outline" | "ghost"`
+- `state`: `"enabled" | "hovered" | "loading" | "disabled"`
+- `prefixIcon`: 앞쪽 아이콘
+- `suffixIcon`: 뒤쪽 아이콘
+- `loading`: 로딩 상태
 
-## Learn More
+### IconButton
 
-To learn more about Next.js, take a look at the following resources:
+아이콘 버튼 컴포넌트 - 텍스트 레이블 없이 아이콘만으로 액션을 전달
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.
+**Props:**
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+- `size`: `"xlarge" | "large" | "medium" | "small"`
+- `variant`: `"primary" | "neutral"`
+- `iconType`: `"solid" | "outline" | "weak"`
+- `state`: `"enabled" | "hovered" | "disabled"`
+- `icon`: React 아이콘 컴포넌트
+- `aria-label`: 접근성 라벨 (필수)
 
-## Deploy on Vercel
+### Button
+
+레거시 버튼 컴포넌트 (하위 호환성)
+
+### Header
+
+헤더 컴포넌트
+
+### Page
+
+페이지 컴포넌트
+
+## TypeScript 지원
+
+모든 컴포넌트는 완전한 TypeScript 타입 정의를 제공합니다.
+
+## 개발
+
+```bash
+# Storybook 실행
+npm run storybook
+
+# 패키지 빌드
+npm run build
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## 라이선스
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.
+MIT

package/package.json

@@ -1,10 +1,26 @@
 {
   "name": "@likelion-design/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist",
     "README.md"