iCignal 설치 가이드
iCignal 제품 전용 디자인 시스템 패키지를 설치하는 방법을 안내합니다.
개요
@vortex/ui-icignal은 iCignal 제품군을 위한 전용 디자인 시스템입니다.
특징
- 통합 패키지: Foundation 컴포넌트와 iCignal 전용 컴포넌트를 단일 패키지에서 제공
- Vite 최적화: Vite + React 환경에 최적화
- Tailwind CSS 4: 최신 Tailwind CSS와 통합
💡 모든 컴포넌트는
@vortex/ui-icignal에서 import합니다.
필수 요구사항
- Node.js: 20 이상
- 패키지 매니저: pnpm 9+ (권장)
빠른 시작
Vortex CLI를 사용하여 iCignal 프로젝트를 생성합니다:
npx @vortex/cli init my-app --template vite-icignal
cd my-app
pnpm install
pnpm dev이 명령은 다음을 자동으로 설정합니다:
- ✅ React 19 + Vite 7 + TypeScript 5
- ✅ Tailwind CSS 4
- ✅ @vortex/ui-icignal
- ✅ React Query + Axios + Zod
- ✅ React Router
- ✅ TypeScript path aliases
문제 해결
스타일이 적용되지 않음
증상: 컴포넌트가 스타일 없이 표시됨
해결:
/* globals.css 첫 줄 확인 */
@import "tailwindcss";Vite 플러그인 오류
증상: tailwindcss 플러그인 오류
해결:
// vite.config.ts 확인
import tailwindcss from "@tailwindcss/vite"
export default defineConfig({
plugins: [tailwindcss(), react()], // tailwindcss가 먼저
})다음 단계
Last updated on