Getting Started
Allra Fintech의 shadcn/ui 기반 UI 컴포넌트 라이브러리
소개
Allra UI는 shadcn/ui를 기반으로 구축된 Allra Fintech의 UI 컴포넌트 라이브러리입니다.
팀 협업과 코드 일관성을 위한 공식 디자인 시스템을 제공합니다.
설치 방법
1. shadcn/ui 설치
먼저 shadcn/ui를 설치합니다.
pnpm dlx shadcn@latest init2. 환경 설정
프로젝트의 components.json에 Allra UI 레지스트리를 추가합니다. @allra 네임스페이스를 아래와 같이 등록하세요.
{
"registries": {
"@allra": {
"url": "https://frontend.allrafintech.co.kr/api/registry/{name}",
"headers": {
"Authorization": "Bearer ${REGISTRY_TOKEN}"
}
}
}
}3. 환경 변수 설정
.env.local 파일에 토큰을 설정합니다. (토큰은 프론트엔드팀에 문의하여 발급받을 수 있습니다.)
REGISTRY_TOKEN=allra_registry_token4. 컴포넌트 설치
shadcn/ui CLI를 통해 필요한 컴포넌트를 추가합니다.
# 금액 입력 컴포넌트
pnpx shadcn@latest add @allra/amount-input
# 전화번호 입력 컴포넌트
pnpx shadcn@latest add @allra/phone-number-input
# 반응형 입력 컴포넌트
pnpx shadcn@latest add @allra/responsive-input