@petnow/ui
사내 웹 프로젝트에서 쓰는 공용 컴포넌트 라이브러리다. React 19와 Tailwind CSS v4를 쓰는 소비 레포를 전제로 한다.
- Storybook: https://components.petnow.co/
- 변경 내역: CHANGELOG.md
- 4.x에서 올리는 경우: docs/migration/v4-to-v5.md
사용 방법
-
설치. Tailwind CSS v4.1 이상이 peer dependency다.
pnpm add @petnow/ui -
소비 레포의 메인 CSS에서 Tailwind를 한 번 import하고, 그 뒤에 패키지 CSS를 import한다.
@import "tailwindcss"; @import "@petnow/ui/tailwind.css";@petnow/ui/tailwind.css는 토큰·유틸리티를 추가하고 패키지dist를@source로 등록한다. Tailwind, 폰트, base 스타일, shadcn 변수, 다크 모드 설정은 넣지 않는다. 이것들은 소비 레포가 정한다. -
v0
Radio나.scrollbar,.popup-scrollbar,.ja-break-all,.global-break-all클래스를 쓰면 일반 CSS도 import한다.import "@petnow/ui/dist/index.css";이 CSS는
components레이어에 있어서 소비 레포 utility로 덮을 수 있고, import 위치에 영향을 받지 않는다. -
컴포넌트를 쓴다.
import { CTAButton } from "@petnow/ui"; // 또는 개별 경로 import { CTAButton } from "@petnow/ui/v1/cta-button";
Petify 테마는 상위 요소에 petify 클래스를 붙이면 v1 시맨틱 컬러가 바뀐다.
구조
@petnow/ui
├── tailwind.css - 소비 레포가 import하는 Tailwind 엔트리 (v0 토큰은 deprecated)
├── petnow-design-system-v1.css - v1 토큰(ref·시맨틱 컬러, 타이포그래피)
├── index.ts - 패키지 엔트리
├── src
│ ├── components
│ │ ├── ui - 내부 전용 primitive (export하지 않음)
│ │ ├── v0 - 기존 컴포넌트 (기능 추가 없이 유지)
│ │ └── v1 - 현재 컴포넌트와 아이콘
│ ├── styles/components.css - dist/index.css로 복사되는 일반 CSS
│ ├── index.css - Storybook 엔트리
│ └── utils
├── test
│ ├── css - 소비 레포 방식으로 패키지 CSS를 빌드해 보는 테스트
│ ├── v0
│ └── v1
└── docs
├── adr
└── migration
개발
Node 버전은 mise.toml로 고정한다. pnpm은 package.json의 packageManager를 따른다.
mise install
pnpm i
pnpm storybook # http://localhost:6006
pnpm jest
pnpm build # tsc + vite 라이브러리 빌드 + dist/index.css 복사
배포
npm Trusted Publishing(OIDC)으로 배포한다. GitHub Actions가 발급하는 OIDC 토큰을 쓰므로 NPM_TOKEN 같은
레지스트리 토큰을 관리하지 않는다.
- PR을 만들어 main에 merge한다. PR에서는 테스트, 포맷 검사, 빌드, Storybook 빌드가 돈다.
- semver에 맞춰
v*태그를 push한다(예:v5.0.0)..github/workflows/publish-npm.yaml이 태그 버전으로package.json을 맞춰 npm에 배포하고, 버전 커밋을 main에 남긴다. - 하위 호환을 깨는 변경은 CHANGELOG.md와
docs/migration/에 적는다.