npm package: @lumir-company/prototype-ui-sdk
Description: UI Component SDK
Author: Your Name
Latest version: 0.0.24

# 루미르 UI SDK

![버전](https://img.shields.io/badge/version-1.0.0-blue.svg)
![라이센스](https://img.shields.io/badge/license-MIT-green.svg)

루미르 UI SDK는 React와 Tailwind CSS를 기반으로 구축된 현대적이고 접근성이 뛰어난 UI 컴포넌트 라이브러리입니다. 모든 컴포넌트는 기업용 애플리케이션에 맞게 디자인되었으며, 일관성 있는 사용자 경험을 제공합니다.

## 특징

- 💎 **아름다운 디자인**: 세련된 컬러 팔레트와 현대적인 UI
- 🌙 **다크 모드 지원**: 완벽한 다크 모드 통합
- 🧩 **모듈식 구조**: 필요한 컴포넌트만 가져와서 사용
- ♿ **접근성 중심**: WCAG 가이드라인 준수
- 📱 **반응형**: 모든 화면 크기에 최적화
- 🎨 **테마 커스터마이징**: 손쉬운 테마 및 스타일 조정

## 설치

npm을 사용하여 패키지를 설치하세요:

```bash
npm install @lumir-company/prototype-ui-sdk
```

또는 yarn을 사용:

```bash
yarn add @lumir-company/prototype-ui-sdk
```

## Tailwind CSS 설정

이 라이브러리는 Tailwind CSS를 기반으로 하므로, 프로젝트에 Tailwind 설정이 필요합니다.

```js
// tailwind.config.js
const { tailwindConfig } = require("@lumir-company/prototype-ui-sdk");
module.exports = {
  // 기본 설정 확장
  ...tailwindConfig,
  // 필요에 따라 사용자 설정 추가
  content: [...tailwindConfig.content, "./src//.{js,ts,jsx,tsx}"],
  theme: {
    ...tailwindConfig.theme,
    extend: {
      ...tailwindConfig.theme.extend,
      // 커스텀 테마 확장
    },
  },
};
```

## 기본 사용법

React 애플리케이션에서 컴포넌트를 가져와 사용하세요:

```jsx
import { Button, Card, TextField } from "@lumir-company/prototype-ui-sdk";
import "@lumir-company/prototype-ui-sdk/dist/styles.css"; // 스타일 임포트
function App() {
  return (
    <Card className="p-6 max-w-md mx-auto">
      <h2 className="text-xl font-semibold mb-4">로그인</h2>
      <TextField label="이메일" placeholder="이메일을 입력하세요" className="mb-3" />
      <TextField label="비밀번호" type="password" placeholder="비밀번호를 입력하세요" className="mb-4" />
      <Button className="w-full">로그인</Button>
    </Card>
  );
}
```

## 테마 시스템

다크 모드 및 커스텀 테마를 쉽게 적용할 수 있습니다:

```jsx
import { applyTheme } from "@lumir-company/prototype-ui-sdk";
// 어디서든 호출 가능 (주로 앱 진입점에서)
applyTheme({
  mode: "dark", // 'light' 또는 'dark'
  primaryColor: "#6366f1", // 주요 색상 커스터마이징
  fontFamily: "Pretendard, sans-serif", // 폰트 변경
});
```

## 스크롤바 커스터마이징

SDK에는 테마에 맞는 세련된 스크롤바 디자인이 포함되어 있습니다:

```jsx
// 스타일 파일을 가져오면 자동으로 적용됩니다
import "@lumir-company/prototype-ui-sdk/dist/styles.css";
// 스크롤이 필요한 컨테이너에 클래스 추가
<div className="content-scrollable">{/ 컨텐츠 /}</div>;
```

## 주요 컴포넌트

### 기본 컴포넌트

- **Button** - 다양한 크기, 색상, 변형을 지원하는 버튼
- **Card** - 콘텐츠를 구조화하기 위한 카드 컴포넌트
- **Typography** - 일관된 텍스트 스타일링을 위한 타이포그래피 시스템
- **Icon** - 다양한 아이콘 세트

### 폼 컴포넌트

- **TextField** - 입력 필드 컴포넌트
- **Select** - 드롭다운 선택 컴포넌트
- **Checkbox, RadioGroup** - 선택 컴포넌트
- **Switch** - 토글 스위치

### 데이터 표시

- **Table** - 데이터 테이블
- **DataGrid** - 고급 데이터 그리드
- **List** - 목록 컴포넌트

### 피드백 및 오버레이

- **Alert** - 알림 메시지
- **Dialog** - 모달 다이얼로그
- **Snackbar** - 토스트 알림

### 내비게이션

- **Sidebar** - 서브메뉴를 지원하는 사이드바 내비게이션
  ```jsx
  <SidebarItem
    icon={<Icons.layout />}
    label="데이터 표시"
    subItems={[
      { label: "데이터 그리드", href: "/data-grid" },
      { label: "테이블", href: "/tables" },
      { label: "차트", href: "/charts", badge: "Beta" },
    ]}
  />
  ```
- **Tabs** - 탭 인터페이스
- **Breadcrumb** - 경로 내비게이션

## 컬러 팔레트

SDK는 다음과 같은 현대적이고 세련된 색상 팔레트를 제공합니다:

- **Primary**: 인디고 계열의 현대적인 보라-파랑 색상
- **Gray**: 블루-그레이 계열 (Tailwind의 Slate)
- **Success**: 에메랄드-그린 (Tailwind의 Emerald)
- **Warning**: 황금빛 주황색 (Tailwind의 Amber)
- **Error**: 세련된 빨간색 계열 (Tailwind의 Red)
- **Info**: 밝은 청색 계열 (Tailwind의 Sky)

이 색상 팔레트는 기업용 애플리케이션에 최적화되어 있으며, 특히 다크 모드에서도 훌륭한 가독성을 제공합니다.

## 브라우저 지원

- Chrome, Firefox, Safari, Edge 최신 버전
- IE는 지원하지 않습니다

## 기여하기

기여를 환영합니다! 이슈를 제기하거나 PR을 제출하기 전에 기여 가이드라인을 확인해주세요.

## 라이센스

이 프로젝트는 MIT 라이센스 하에 배포됩니다.