@cdp-frontend/ui

공통 UI 컴포넌트 패키지입니다.

내부 모노레포에서 사용 시

@cdp-frontend/ui는 SVG 아이콘을 TSX 컴포넌트로 사전 변환하여 제공합니다.
소비하는 앱에서 SVG 관련 별도 설정이 필요 없습니다.

pnpm add -D sass

SCSS 지원

SCSS 모듈을 사용하므로 sass만 설치하면 됩니다.

Next.js 앱

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@cdp-frontend/ui'],
};

외부 레포에서 사용 시 (dist)

SVG가 dist에 미리 컴파일되어 있어 설정이 필요 없습니다.

CSS는 앱 진입점에서 별도로 import해야 합니다. (내부 모노레포 src 방식에서는 불필요)

import '@cdp-frontend/ui/styles';

Next.js에서는 transpilePackages 옵션도 추가합니다.

const nextConfig = {
  transpilePackages: ['@cdp-frontend/ui'],
};

아이콘 추가 시

packages/ui/src/assets/icons/ 에 SVG 파일을 추가한 후 아래 명령어를 실행합니다.

pnpm --filter @cdp-frontend/ui run generate:icons

생성 위치: src/assets/icons/generated/ (파일명은 PascalCase로 변환됨)