Skip to Content
Getting StartedInstallation

Installation

Vortex UI를 프로젝트에 설치하는 방법을 안내합니다.

요구사항

시작하기 전에 다음 요구사항을 확인하세요:

  • Node.js: v20.0.0 이상
  • pnpm: v9+ (권장) 또는 npm/yarn
  • React: 18 이상

설치 방법

Vortex UI를 설치하는 방법은 두 가지가 있습니다:

방법 1: CLI 사용 (권장)

Vortex CLI를 사용하면 프로젝트 생성부터 컴포넌트 추가까지 자동화할 수 있습니다.

새 프로젝트 생성

# Vite + React 템플릿으로 새 프로젝트 생성
npx @vortex/cli init my-project --template vite-react
cd my-project
 
# 의존성 설치 및 개발 서버 실행
pnpm install
pnpm dev

컴포넌트 추가

# 단일 컴포넌트 추가
npx @vortex/cli add button
 
# 여러 컴포넌트 한 번에 추가
npx @vortex/cli add button input card select

방법 2: 수동 설치

기존 프로젝트에 Vortex UI를 수동으로 추가하는 방법입니다.

Step 1: 패키지 설치

사용할 제품 패키지를 선택하여 설치하세요:

# Foundation (기본 컴포넌트)
npm install @vortex/ui-foundation
 
# 또는 iCignal (iCignal 프로젝트)
npm install @vortex/ui-icignal
 
# 또는 Cals (Cals 프로젝트)
npm install @vortex/ui-cals

⚠️ 주의: 하나의 프로젝트에는 하나의 패키지만 설치하세요.

Step 2: Tailwind CSS 설정

Vortex UI는 Tailwind CSS를 사용합니다. 프로젝트에 Tailwind CSS가 없다면 먼저 설치하세요:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

그 다음, tailwind.config.ts 파일을 다음과 같이 설정하세요:

// tailwind.config.ts
import type { Config } from "tailwindcss";
import { foundationPreset } from "@vortex/ui-foundation/preset";
 
export default {
  presets: [foundationPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@vortex/ui-foundation/dist/**/*.js",
  ],
} satisfies Config;

iCignal 또는 Cals 사용 시:

// iCignal
import { icignalPreset } from "@vortex/ui-icignal/preset";
 
export default {
  presets: [icignalPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@vortex/ui-icignal/dist/**/*.js",
  ],
};
 
// Cals
import { calsPreset } from "@vortex/ui-cals/preset";
 
export default {
  presets: [calsPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@vortex/ui-cals/dist/**/*.js",
  ],
};

Step 3: CSS Import

메인 CSS 파일에 Vortex UI 스타일을 import하세요:

// src/main.tsx 또는 src/index.tsx
import "@vortex/ui-foundation/styles";
import "./index.css";
 
// React 앱 렌더링 코드...

iCignal 또는 Cals 사용 시:

// iCignal
import "@vortex/ui-icignal/styles";
 
// Cals
import "@vortex/ui-cals/styles";

Step 4: TypeScript 설정 (선택사항)

TypeScript를 사용한다면 tsconfig.json에 다음 설정을 추가하세요:

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "types": ["vite/client"],
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

설치 확인

설치가 완료되었다면 간단한 컴포넌트를 사용해보세요:

// src/App.tsx
import { Button } from "@vortex/ui-foundation";
 
export default function App() {
  return (
    <div className="p-8">
      <Button variant="primary">Hello Vortex UI!</Button>
    </div>
  );
}

개발 서버를 실행하고 브라우저에서 확인하세요:

pnpm dev

다음 단계

설치를 완료하셨나요? 이제 제품별 설정 가이드를 확인하세요:

문제가 발생했다면:

  • FAQ - 자주 묻는 질문 및 트러블슈팅
Last updated on
For DesignersCals 설치 가이드