@highpixel-co/palda-design-system

Palda 제품에서 사용하는 디자인 토큰, 아이콘, React UI 컴포넌트와 패턴을 하나로 배포하는 공개 npm 패키지입니다.

설치

계정이나 읽기 토큰 없이 설치할 수 있습니다.

npm install --save-exact @highpixel-co/palda-design-system
# pnpm 프로젝트: pnpm add --save-exact @highpixel-co/palda-design-system

사용

앱 진입점에서 전체 스타일을 한 번 불러옵니다.

import '@highpixel-co/palda-design-system/styles.css';

영역별 subpath를 사용합니다.

import { SearchIcon } from '@highpixel-co/palda-design-system/icons';
import { EmptyState } from '@highpixel-co/palda-design-system/patterns';
import { SemanticSpaceGapLg } from '@highpixel-co/palda-design-system/tokens';
import { Button } from '@highpixel-co/palda-design-system/ui';

루트 경로에서는 아이콘, UI와 패턴을 함께 내보냅니다. JS 토큰은 /tokens에서만 가져옵니다.

설명서와 앱 검사

이 패키지는 같은 버전의 사용 문서·catalog·앱용 하네스를 함께 포함합니다. 별도의 DS clone은 필요하지 않습니다. Node.js 22.12 이상에서 실행합니다.

pnpm exec palda-ds guide
pnpm exec palda-ds check
pnpm exec palda-ds screens # HTML 화면 시안이 있는 프로젝트

npm은 npm exec -- palda-ds check로 실행합니다. 사용 설명서에 검사 범위, 경로 설정, 기존 코드 예외, AI 작업 규칙과 CI 연결 방법이 있습니다. guide 명령은 설치된 설명서의 파일 경로를 출력합니다. 기계가 읽는 export·자산 상태 목록은 /catalog에 있습니다.

앱은 DS 버전을 정확히 고정하고 package.json과 잠금 파일을 함께 갱신합니다. 앱의 기존 전체 검사와 CI에 palda-ds check를 한 번 연결합니다. 작업 중 검사 시점은 AI가 판단하고, 제출 전에는 전체 검사를 수행합니다. GitHub에서 검사 통과를 병합 조건으로 지정하는 것은 관리자 설정입니다.

릴리스

내부 @palda/tokens, @palda/icons, @palda/ui, @palda/patterns workspace는 개별 배포하지 않습니다. 버전을 올린 뒤 같은 버전의 v* 태그를 push하면 GitHub Actions가 전체 검증 후 이 패키지만 public npm에 배포합니다. 배포할 때는 개인 토큰을 저장하지 않고 npm Trusted Publisher로 GitHub Actions의 일회성 신분을 확인합니다.

npm에 패키지가 아직 없을 때만 소유자가 2단계 인증으로 첫 버전을 직접 배포합니다. 첫 배포 뒤 GitHub Actions를 Trusted Publisher로 등록하고, npm의 Publishing access를 Require two-factor authentication and disallow tokens로 잠급니다. 이후 릴리스는 태그 workflow만 사용합니다.

라이선스

코드와 패키지 에셋은 MIT 라이선스로 배포합니다. LICENSE에 허가 조건이 있고, NOTICE에 highpixel의 상표 조건과 포함된 Lucide 아이콘의 라이선스 전문이 있습니다. "Palda", "팔다", "highpixel"의 이름과 로고는 상표이며 MIT 라이선스는 이 상표를 사용할 권리를 부여하지 않습니다.