iCignal 설치 가이드

# .npmrc 파일 생성
echo "registry=http://repo.calsplatz.com:4873" > .npmrc

# pnpm (권장)
pnpm add @vortex/ui-foundation @vortex/ui-icignal
 
# npm
npm install @vortex/ui-foundation @vortex/ui-icignal
 
# yarn
yarn add @vortex/ui-foundation @vortex/ui-icignal

pnpm add -D tailwindcss@next @tailwindcss/postcss@next

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

import type { Config } from "tailwindcss";
import icignalPreset from "@vortex/ui-icignal/tailwind-preset";
 
export default {
  presets: [icignalPreset], // ← iCignal 디자인 토큰 적용
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
} satisfies Config;

@import "tailwindcss";
@import "@vortex/ui-icignal/styles"; /* iCignal 전용 스타일 */

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

import { Button } from "@vortex/ui-foundation";
 
export default function App() {
  return <Button>Foundation Button</Button>;
}

import { Button } from "@vortex/ui-foundation";
import { IcignalCard } from "@vortex/ui-icignal";
 
export default function App() {
  return (
    <IcignalCard>
      <h2>iCignal Card</h2>
      <Button>Click me</Button>
    </IcignalCard>
  );
}

/* iCignal Primary Colors */
--color-icignal-primary: #...;
--color-icignal-secondary: #...;
--color-icignal-accent: #...;

<div className="bg-icignal-primary text-white">iCignal Primary Color</div>

npx @vortex/cli init my-icignal-app --template vite --theme icignal
cd my-icignal-app
pnpm dev

@vortex/ui-icignal/
├─ components/        # iCignal 전용 컴포넌트
├─ tokens/           # 디자인 토큰
├─ tailwind-preset/  # Tailwind 설정
└─ styles/           # 글로벌 스타일

// tailwind.config.ts 확인
import icignalPreset from "@vortex/ui-icignal/tailwind-preset";
 
export default {
  presets: [icignalPreset], // ← 이 줄 확인
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
};

/* globals.css 확인 */
@import "tailwindcss";
@import "@vortex/ui-icignal/styles"; /* ← 이 줄 확인 */