npm package: @scglab/admin-ui
Description: React 기반 SCGLab 어드민 UI 컴포넌트 라이브러리
Author: SCGLab
Latest version: 0.1.29

# SCGLab Admin UI

React 기반 SCGLab 어드민 UI 컴포넌트 라이브러리

## 📦 설치

```bash
npm install @scglab/admin-ui
# or
yarn add @scglab/admin-ui
```

## 🚀 사용법

### 기본 사용

```tsx
import { Text } from '@scglab/admin-ui';
import '@scglab/admin-ui/styles';

function App() {
  return (
    <Text size="h1" color="primary" fontWeight="bold">
      안녕하세요
    </Text>
  );
}
```

### 스타일 Import

글로벌 스타일과 Pretendard 폰트를 사용하려면 CSS를 import하세요:

```tsx
// main.tsx 또는 App.tsx
import '@scglab/admin-ui/styles';
```

## ✨ 특징

- ✅ **Zero Dependencies**: 스타일 의존성 없음 (Tailwind, styled-components 등 불필요)
- ✅ **TypeScript**: 완전한 타입 지원
- ✅ **Tree-shakeable**: 사용한 컴포넌트만 번들에 포함
- ✅ **Customizable**: 모든 props를 통한 커스터마이징 지원
- ✅ **Theme System**: 일관된 디자인을 위한 테마 시스템 제공

## 📚 컴포넌트

### Text

텍스트를 표시하는 기본 컴포넌트입니다.

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `FontSizeType` | `'body16'` | 텍스트 크기 (h1~h6, body10~body18) |
| `color` | `ColorType` | `'black'` | 텍스트 색상 |
| `fontWeight` | `FontWeightType` | `'regular'` | 폰트 두께 (regular, semibold, bold) |
| `justify` | `JustifyType` | - | 수평 정렬 |
| `align` | `AlignType` | - | 수직 정렬 |
| `textDecoration` | `'none' \| 'underline' \| 'line-through'` | `'none'` | 텍스트 장식 |
| `children` | `ReactNode` | - | 표시할 텍스트 또는 요소 |
| `className` | `string` | - | 추가 CSS 클래스 |

#### 예제

```tsx
import { Text } from '@scglab/admin-ui';

// 제목
<Text size="h1" color="primary" fontWeight="bold">
  페이지 제목
</Text>

// 본문
<Text size="body16" color="text">
  본문 내용입니다.
</Text>

// 링크 스타일
<Text size="body14" color="primary" textDecoration="underline">
  링크 텍스트
</Text>

// 정렬
<Text size="body16" justify="center" align="center">
  중앙 정렬 텍스트
</Text>
```

## 🎨 테마 시스템

테마 상수와 타입을 직접 import하여 사용할 수 있습니다.

### 사용 가능한 Export

```tsx
import {
  // 색상
  colors,

  // 폰트 크기
  fontSize,
  lineHeightSize,

  // 폰트 두께
  fontWeight,

  // 레이아웃
  directions,
  justifies,
  justifySelfs,
  aligns,
  alignSelfs,

  // 타입
  type ColorType,
  type FontSizeType,
  type FontWeightType,
  type DirectionType,
  type JustifyType,
  type JustifySelfType,
  type AlignType,
  type AlignSelfType,
} from '@scglab/admin-ui';
```

### 색상 팔레트

```tsx
import { colors } from '@scglab/admin-ui';

// Primary 색상
colors.primary      // #3083FF
colors.primary10    // #EAF3FF
colors.primary5     // #F5F9FF
colors.primary3     // #F9FBFF

// Secondary 색상
colors.secondary    // #18FF82

// Text 색상
colors.primaryText  // #111928
colors.text         // #637381
colors.textLight    // #F3F4F6

// Status 색상
colors.green        // #016630
colors.red          // #9F0712
colors.orange       // #9F2D00
colors.blue         // #193CB8
colors.warning      // #F15050

// Grayscale
colors.gray1        // #F9FAFB
colors.gray2        // #F3F4F6
colors.gray3        // #E5E7EB
colors.dark2        // #1F2A37
colors.dark3        // #374151
```

### 폰트 크기

```tsx
import { fontSize } from '@scglab/admin-ui';

// Heading 크기 (rem 단위)
fontSize.h1         // 4.286rem (60px)
fontSize.h2         // 3.429rem (48px)
fontSize.h3         // 2.857rem (40px)
fontSize.h4         // 2.143rem (30px)
fontSize.h5         // 2rem (28px)
fontSize.h6         // 1.714rem (24px)

// Body 크기 (rem 단위)
fontSize.body18     // 1.286rem (18px)
fontSize.body16     // 1.143rem (16px)
fontSize.body14     // 1rem (14px)
fontSize.body12     // 0.857rem (12px)
fontSize.body10     // 0.714rem (10px)
```

## 🛠 개발

### Storybook 실행

```bash
npm run sb
# or
yarn sb
```

### 빌드

```bash
npm run build
# or
yarn build
```

빌드 결과물:
- `dist/index.js` - CommonJS 번들
- `dist/index.mjs` - ES Module 번들
- `dist/index.d.ts` - TypeScript 타입 정의
- `dist/styles/index.css` - 스타일 파일

## 📦 NPM 배포

### 배포 전 체크리스트

1. **버전 업데이트**
   ```bash
   # 패치 버전 (0.1.5 -> 0.1.6)
   npm version patch

   # 마이너 버전 (0.1.5 -> 0.2.0)
   npm version minor

   # 메이저 버전 (0.1.5 -> 1.0.0)
   npm version major
   ```

2. **빌드 확인**
   ```bash
   npm run build
   ```

   빌드가 성공적으로 완료되었는지 확인하고, `dist` 폴더에 다음 파일들이 생성되었는지 확인하세요:
   - `index.cjs`, `index.js` (번들 파일)
   - `index.d.ts` (타입 정의 파일)
   - `styles/index.css` (스타일 파일)

3. **package.json 확인**
   - `name`: `@scglab/admin-ui`
   - `version`: 올바른 버전인지 확인
   - `main`, `module`, `types`, `exports` 필드가 올바르게 설정되어 있는지 확인
   - `files`: `["dist", "README.md"]` - 배포될 파일 목록 확인

### NPM 배포 (로컬)

1. **NPM 로그인 (최초 1회)**
   ```bash
   npm login
   ```
   로그인 정보는 `~/.npmrc`에 저장되므로 이후에는 다시 할 필요 없습니다.

2. **배포 실행**
   ```bash
   npm publish
   ```
   `package.json`의 `publishConfig.access: "public"` 덕분에 `--access public` 없이 public으로 배포됩니다.

3. **배포 확인**
   배포가 완료되면 다음 링크에서 확인할 수 있습니다:
   - NPM 페이지: `https://www.npmjs.com/package/@scglab/admin-ui`

   또는 터미널에서 확인:
   ```bash
   npm view @scglab/admin-ui
   ```

### 배포 취소 (필요한 경우)

```bash
# 특정 버전 배포 취소 (배포 후 72시간 이내)
npm unpublish @scglab/admin-ui@0.1.5

# 전체 패키지 삭제 (주의!)
npm unpublish @scglab/admin-ui --force
```

### 자동화 스크립트

배포 과정을 자동화하려면 `package.json`에 다음 스크립트를 추가할 수 있습니다:

```json
{
  "scripts": {
    "prepublishOnly": "npm run build",
    "release:patch": "npm version patch && npm publish",
    "release:minor": "npm version minor && npm publish",
    "release:major": "npm version major && npm publish"
  }
}
```

사용 예시:
```bash
# 패치 버전 배포
npm run release:patch

# 마이너 버전 배포
npm run release:minor

# 메이저 버전 배포
npm run release:major
```

### 주의사항

- ⚠️ 배포 전 반드시 빌드를 실행하여 최신 코드가 반영되도록 하세요
- ⚠️ 버전을 올릴 때는 [Semantic Versioning](https://semver.org/) 규칙을 따르세요
- ⚠️ 배포된 패키지는 24시간 이후에는 삭제할 수 없으니 신중하게 배포하세요
- ⚠️ `.npmignore` 파일이 없으면 `.gitignore`가 사용됩니다

## 📝 라이센스

MIT © SCGLab