SCGLab Admin UI

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

📦 설치

``bash
npm install @scglab/admin-ui


or


yarn add @scglab/admin-ui
`

🚀 사용법

$3

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

function App() {
return (

안녕하세요

);
}
`

$3

글로벌 스타일과 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: 일관된 디자인을 위한 테마 시스템 제공

📚 컴포넌트

$3

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

#### 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';

// 제목

페이지 제목


// 본문

본문 내용입니다.


// 링크 스타일

링크 텍스트


// 정렬

중앙 정렬 텍스트

`

🎨 테마 시스템

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

$3

`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';
`

$3

`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
`

$3

`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)
`

🛠 개발

$3

`bash
npm run sb


or


yarn sb
`

$3

`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 배포

$3

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"] - 배포될 파일 목록 확인

$3

1. NPM 로그인
`bash
npm login
`

NPM 계정 정보를 입력하여 로그인합니다.

2. 배포 실행
`bash
# Public 패키지로 배포 (Scoped 패키지는 기본적으로 private)
npm publish --access public
`

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

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

$3

`bash


특정 버전 배포 취소 (배포 후 72시간 이내)

npm unpublish @scglab/admin-ui@0.1.5

전체 패키지 삭제 (주의!)

npm unpublish @scglab/admin-ui --force
`

$3

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

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

사용 예시:
`bash


패치 버전 배포

npm run release:patch

마이너 버전 배포

npm run release:minor

메이저 버전 배포

npm run release:major
`

$3

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

📝 라이센스

MIT © SCGLab