@clovirtualfashion/components

@clovirtualfashion/components

개발 환경

• node: ^22.14.0

• yarn: ^4.9.1

• vite: ^6.3.5

• react: ^19.1.0

• tailwindcss: ^3.4.17

• typescript: ~5.7.2

• tailwind-variants: ^1.0.0

  tailwind의 className을 조합하여 사용할 수 있게 해주는 라이브러리. 유사한 라이브러리로는 cva(class-variance-authority), twin 등이 있고, 사용의 편의성과 variant에 따라 다른 스타일 적용이 되는 Compound variants 그리고 클래스 충돌 해결 등 다양한 기능들의 장점으로 선택.

  🤔 아직 초기이니 tailwind-variants와 비교 고민 했던 cva + tailwind-merge 에 대해서도 후보군으로 고민해봐도 좋을 것 같습니다.

패키지 구조

src/
  ├── components/             # 컴포넌트 디렉토리
  │   ├── button/             # 버튼 컴포넌트
  │   │   └── src
  │   │   │   ├── Button.styles.ts  # 버튼 스타일
  │   │   │   ├── Button.types.ts   # 버튼 타입 정의
  │   │   │   └── Button.tsx        # 버튼 컴포넌트 구현
  │   │   └── index.ts          # 버튼 컴포넌트 내보내기
  │   │
  │   ├── {componentName}/    # {componentName} 컴포넌트
  │   │   └── src
  │   │   │   ├── {componentName}.styles.ts  # Component 스타일
  │   │   │   ├── {componentName}.types.ts   # Component 타입
  │   │   │   └── {componentName}.tsx        # Component 구현
  │   │   └── index.ts          # {componentName} 관련 파일들
  │   └── index.ts            # 전체 컴포넌트 내보내기
  │
  ├── styles/                # 스타일 관련 파일
  │   └── global.css         # 전역 스타일 (tailwindcss)
  │
  ├── vite-env.d.ts          # Vite 환경 정의 파일
  ├── vite.config.ts         # Vite 설정 파일
  ├── tailwind.config.ts     # tailwindcss 설정 파일
  └── index.ts               # 라이브러리 진입점

⚠️ 주의 사항

중요: Tailwindcss 4부터 변경된 사항으로, 빌드 과정에서 사용하지 않는 className은 자동으로 제거됩니다.

특정 클래스가 제거되지 않고 유지되도록 하려면 반드시 safelist-tailwind.txt 파일에 명시해야 합니다.

패턴 형식(예: bg-*)은 허용되지 않으며, 각 클래스를 개별적으로 명시해야 합니다.

명령어

빌드

## Aurora root
yarn @components build

# or

# Aurora Component packages
yarn build

컴포넌트 생성

## Aurora root
yarn @components component:create

# or

# Aurora Component packages
yarn component:create

컴포넌트 검사

## Aurora root
yarn @components validate:components

# or

# Aurora Component packages
yarn validate:components

사용 방법

/*
* Import design system styles
* 컴포넌트 사용 전 반드시 스타일을 먼저 import 해야 합니다.
*/
import "@clovirtualfashion/components/styles";

// 컴포넌트 가져오기
// case 1
import Button from '@clovirtualfashion/components/button'

// case 2
import { Button } from "@clovirtualfashion/components"

// 사용 예시
<Button label="버튼 텍스트" />

컴포넌트 구조 검사

컴포넌트는 정형화된 구조를 유지해야 합니다. 다음 명령어를 사용하여 모든 컴포넌트의 구조를 검사할 수 있습니다:

yarn check:structure

올바른 구조는 다음과 같습니다:

src/components/
└── {componentName}/    # {componentName} 컴포넌트 (소문자)
    ├── index.ts          # 컴포넌트 진입점
    └── src/
        ├── {ComponentName}.tsx        # 컴포넌트 구현 (대문자 시작)
        ├── {ComponentName}.styles.ts  # 컴포넌트 스타일
        └── {ComponentName}.types.ts   # 컴포넌트 타입